/*
  Reusable tab-group + accordion-grid components.
  First built for the Insurance page's "What boat insurance covers"
  section (Figma node 18669:8842), but the class names are kept generic
  (not insurance-specific) since a set of pill tabs switching between
  grids of expandable cards is a pattern likely to be reused elsewhere.

  See css/category-page.css for the reusable .accordion-tabs-section
  shell these components typically sit inside (header + tab-group +
  accordion-grid(s) + CTA).
*/

/* ---- Tab group (pill container + pill tabs) ---- */

.tab-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-l); /* 16px */
  padding: var(--space-m); /* 12px */
  box-sizing: border-box;
  background: var(--colour-white);
  border: 1px solid var(--colour-light-grey);
  border-radius: var(--space-full);
}

.tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-m) var(--space-xl); /* 12px 20px */
  background: transparent;
  border: none;
  border-radius: var(--space-full);
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 18px;
  line-height: 25.2px;
  color: #2A2C2E; /* raw Figma value on the inactive tab — not tied to an existing named token */
  white-space: nowrap;
  cursor: pointer;
}

.tab--active {
  background: var(--colour-brand-teal);
  color: var(--colour-white);
}

/* ---- Accordion grid ---- */

/* Desktop: three INDEPENDENT vertical column stacks, not a CSS grid.
   A grid with shared row tracks (even via grid-auto-flow: column) would
   size every column's Nth row to the tallest card in that row — so
   opening a card in column 1 would push column 2/3's cards down too.
   Flex columns as siblings have no such coupling: each column's height
   is purely a function of its own cards, matching Figma's own structure
   (three separate 410px-wide frames placed side by side). */
.accordion-grid {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xl); /* 24px */
  width: 100%;
}

/* An author `display` rule beats the UA stylesheet's [hidden] rule at
   equal specificity (author always wins over user-agent origin) — so
   without this, a hidden .accordion-grid (the inactive category panels)
   would still render as an empty flex item, adding a phantom gap on
   both sides of it in .accordion-tabs-section__inner's own flex column. */
.accordion-grid[hidden] {
  display: none;
}

.accordion-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl); /* 24px */
  flex: 1 1 0%;
  min-width: 0;
}

.accordion-grid__note {
  margin: 0;
  color: var(--colour-body-grey);
}

/* ---- Accordion card ---- */

.accordion {
  background: var(--colour-white);
  border: 1px solid var(--colour-light-grey);
  border-radius: 10px;
  box-sizing: border-box;
}

/* The button IS the entire visible header row, not a narrow strip around
   the icon/text — its hit area must cover the full padded box a user
   sees, not just its content. Padding lives here (moved from .accordion,
   which previously wrapped a padding:0 trigger, leaving the surrounding
   24px/20px unclickable) rather than on a non-semantic wrapper. Bottom
   padding is conditional: collapsed, the trigger is the whole visible
   card and needs its own; expanded, .accordion__panel supplies the same
   24px gap below its own content instead, so the total padding is
   identical either way — see that rule below. */
.accordion__trigger {
  display: flex;
  align-items: flex-start;
  gap: var(--space-m); /* 12px */
  width: 100%;
  padding: var(--space-2xl) var(--space-xl) 0; /* 24px 20px 0 */
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  box-sizing: border-box;
  /* The conditional bottom padding below is a resting-state value, not a
     hover/focus one — without a transition, toggling .accordion--expanded
     removes it instantly while the panel's own height is still animating
     open from 0 (js/motion.js's toggleHeight), so the card visibly
     snapped shorter for a frame before growing. Transitioning it keeps
     both moving together. */
  transition: padding-bottom 0.4s ease;
}

.accordion:not(.accordion--expanded) .accordion__trigger {
  padding-bottom: var(--space-2xl); /* 24px */
}

.accordion__icon {
  flex-shrink: 0;
  margin-top: 5px; /* optically centres the 16px icon against the 25.2px title line-height */
}

.accordion__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-xl); /* 20px */
  flex: 1 1 0%;
  min-width: 0;
}

.accordion__title {
  flex: 1 1 0%;
  min-width: 0;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 18px;
  line-height: 25.2px;
  color: var(--colour-header-grey);
}

/* The initially-expanded card's title reads as a slightly darker,
   near-black tone in Figma than the collapsed cards' header-grey —
   another raw, untokenised value. */
.accordion--expanded .accordion__title {
  color: #2A2C2E;
}

.accordion__chevron {
  flex-shrink: 0;
  margin-top: 6px;
  transition: transform 0.2s ease;
}

.accordion--expanded .accordion__chevron {
  transform: rotate(180deg);
}

/* Indented to sit flush under the title (icon width 16px + the
   trigger's 12px gap), matching Figma's nested icon/text-column layout.

   The 8px gap down to the body copy is padding here rather than a margin
   on .accordion__body, which renders identically: as a margin it simply
   collapsed straight back out through this element's own top edge, so
   the visible gap was the same either way. As padding it is part of this
   element's measured height, which is what the open/close height
   animation (js/motion.js) tweens — with the margin, the panel measured
   8px taller mid-animation (overflow: hidden suppresses the collapse)
   than it did at rest, and visibly snapped shut by that much on the last
   frame. */
/* Side/bottom padding here replaces what .accordion used to contribute
   (20px sides, 24px bottom) now that it carries no padding of its own —
   see .accordion__trigger above. Left is that same 20px plus the 28px
   that lines the body copy up under the title (icon width 16px + the
   trigger's 12px gap), unchanged from before. */
.accordion__panel {
  padding: var(--space-s) var(--space-xl) var(--space-2xl) calc(var(--space-xl) + 28px);
  /* 8px 20px 24px 48px */
  box-sizing: border-box;
}

.accordion__panel[hidden] {
  display: none;
}

.accordion__body {
  margin: 0; /* the 8px above the body copy is .accordion__panel's padding-top */
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 16px;
  line-height: 25.6px;
  color: var(--colour-body-grey);
}

.accordion__body + .accordion__body {
  margin-top: var(--space-s);
}

/* ---- Responsive ----
   Column count follows the site-wide breakpoints: three independent
   stacks on desktop and tablet landscape (each still ~300px+ wide at
   1024px), two at tablet portrait, one on phones. The tab pills stay a
   scrollable/wrapping row rather than turning into a different control. */

@media (max-width: 1023px) {
  /* Two independent columns instead of three — items still flow
     column-by-column (source order), each column still its own
     independent vertical stack. */
  .accordion-grid {
    flex-wrap: wrap;
  }

  .accordion-column {
    flex-basis: calc(50% - var(--space-2xl) / 2);
  }
}

@media (max-width: 767px) {
  /* Segmented control, not a wrapping pill row — 3 tabs is a fixed,
     known count here, so a 3-column grid keeps them on one line at any
     phone width instead of flex-wrap dropping the third tab onto its
     own row (which read as accidental/broken). */
  .tab-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    gap: var(--space-xs); /* 4px — tight, since all 3 need to fit one row */
    padding: var(--space-xs);
  }

  .tab {
    padding: var(--space-s) var(--space-xs); /* 8px 4px */
    font-size: 13px; /* down from 16px so "Optional cover" fits its 1/3 share */
    line-height: 1.3;
    white-space: normal; /* longer labels wrap to a second line within their own segment rather than forcing the row wider */
    text-align: center;
  }

  /* Single column: the three independent stacks collapse into one
     flow, in normal reading order. align-items: stretch overrides the
     base row layout's flex-start (which only ever affected cross-axis
     vertical alignment there) — once this container is flex-direction:
     column, flex-start instead shrinks each column to its own widest
     item's width, which is why "Watersports equipment" et al were
     visibly wider than the shorter labels next to them. Stretching
     makes every column, and so every accordion inside it, the same
     full width. */
  .accordion-grid {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-l); /* 16px */
  }

  .accordion-column {
    flex-basis: auto;
    width: 100%;
    gap: var(--space-l); /* 16px */
  }

  .accordion {
    width: 100%;
    box-sizing: border-box;
  }

  .accordion__trigger {
    padding: var(--space-xl) var(--space-l) 0; /* 20px 16px 0 */
  }

  .accordion:not(.accordion--expanded) .accordion__trigger {
    padding-bottom: var(--space-xl); /* 20px */
  }

  .accordion__panel {
    padding: var(--space-s) var(--space-l) var(--space-xl) calc(var(--space-l) + 28px);
    /* 8px 16px 20px 44px */
  }
}