/* ============================================================
   index.css — Home page styles

   Bulma-first. Only add rules here for things Bulma cannot do:
   - Custom breakpoint at 600px (portrait-phone only)
   - Background images on sections
   - Custom colour overrides for branded sections

   Custom breakpoint: 600px sits above the widest portrait phone
   (~430px), so phones in portrait get the mobile layout and
   everything else — including iPad Mini portrait (768px) — gets
   the desktop layout. Bulma's built-in breakpoint is 769px which
   is too wide, so we use .hp-mobile-only / .hp-desktop instead of
   Bulma's is-hidden-mobile / is-hidden-tablet where needed.
   ============================================================ */


/* ── Portrait-phone breakpoint ────────────────────────────── */

@media screen and (max-width: 599px) {
  .hp-desktop      { display: none !important; }

  /* Hero: centre text and give the text column ~half-screen breathing room */
  .hp-hero .hero-body {
    padding-top: 8vh;
    padding-bottom: 8vh;
  }

  .hp-hero .column:first-child {
    text-align: center;
    min-height: 45vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .hp-hero .column:last-child {
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (min-width: 600px) {
  .hp-mobile-only  { display: none !important; }
}



/* ── Hero image — fit inside square without cropping ─────── */

.hp-hero .image img {
  object-fit: contain;
}


/* ── Section image ────────────────────────────────────────── */

.hp-section-img img {
  border: 1px solid var(--color-surface-border);
  border-radius: 6px;
}

@media screen and (min-width: 600px) {
  .hp-section-img {
    width: 50%;
    margin: 0 auto;
  }
}


/* ── Hero CTA block ───────────────────────────────────────── */
/* inline-flex keeps the block left-aligned with the title on desktop;
   align-items centres the small text under the button width.
   On mobile the parent's has-text-centered-mobile centres the inline block. */

.hp-hero-cta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}


/* ── Feature accordion (mobile only) ─────────────────────── */

.hp-feature-accordion details {
  border-bottom: 1px solid var(--color-surface-border);
}

.hp-feature-accordion details:first-child {
  border-top: 1px solid var(--color-surface-border);
}

.hp-feature-accordion summary {
  display: flex;
  align-items: center;
  padding: 0.9rem 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
  gap: 0.75rem;
}

.hp-feature-accordion summary::-webkit-details-marker {
  display: none;
}

/* Chevron — rotates when open */
.hp-feature-accordion summary::after {
  content: '›';
  font-size: 1.4rem;
  line-height: 1;
  color: var(--color-on-surface-faint);
  margin-left: auto;
  display: inline-block;
  transform: rotate(90deg);
  transition: transform 0.2s;
}

.hp-feature-accordion details[open] > summary::after {
  transform: rotate(270deg);
}

.hp-feature-accordion .hp-feature-body {
  padding: 0 0 1rem 2.25rem;
  color: var(--color-on-surface-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}


/* ── Pricing ──────────────────────────────────────────────── */

.hp-pricing-featured {
  border: 2px solid var(--color-secondary);
}


/* ── Section band background ──────────────────────────────── */

.hp-band {
  background-color: var(--color-bg-alt);
}