/* Category-page section patterns — reusable header + content + CTA shells
   first built for the Insurance page, intended to be reused by other
   category-style pages (Claims, Boating Hub, product pages, etc.). */

/* ---- Accordion tabs section ("What boat insurance covers" on Insurance) ----
   Built from Figma node 18669:8842. Sits directly after the shared
   .section-transition (css/section-transition.css), whose
   --transition-fill is set to this same --colour-grey-101 so the wave's
   fill/continuation blends straight into this section's own background.

   A centred header (eyebrow/heading/subcopy) above a .tab-group switching
   between .accordion-grid panels, with a centred CTA underneath. The tabs
   and accordions themselves are the fully generic, reusable components in
   css/accordion-tabs.css + js/accordion-tabs.js — this is just the section
   shell (header + CTA) around them, named for what it structurally is
   rather than this page's own "cover highlights" content. */

.accordion-tabs-section {
  width: 100%;
  padding: var(--space-section-l) 0; /* 144px top/bottom */
  box-sizing: border-box;
  background: var(--colour-grey-101);
}

.accordion-tabs-section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6xl); /* 64px */
  /* Shared container + gutter — see --page-container-outer,
     css/variables.css (content box still 1280px on desktop). */
  max-width: var(--page-container-outer);
  padding-inline: var(--page-gutter);
  margin: 0 auto;
  box-sizing: border-box;
}

.accordion-tabs-section__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xl); /* 24px */
  width: 100%;
}

.accordion-tabs-section__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Typography comes from .text-h2 (css/typography.css). */
.accordion-tabs-section__heading {
  text-align: center;
}

.accordion-tabs-section__heading-dark {
  color: var(--colour-dark-grey);
}

.accordion-tabs-section__heading-accent {
  color: var(--colour-brand-teal);
}

.accordion-tabs-section__subcopy {
  margin: 0;
  max-width: 100%;
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  color: var(--colour-body-grey);
  text-align: center;
}

.accordion-tabs-section__cta {
  width: fit-content;
}

/* ---- Responsive (accordion tabs section) ----
   Section rhythm only — the tab group and accordion grid own their own
   responsive behaviour (css/accordion-tabs.css). */

@media (max-width: 1279px) {
  .accordion-tabs-section {
    padding: var(--space-section-s) 0; /* 96px, down from 144px */
  }

  .accordion-tabs-section__inner {
    gap: var(--space-5xl); /* 42px */
  }
}

@media (max-width: 767px) {
  .accordion-tabs-section {
    padding: var(--space-section-xxs) 0; /* 64px */
  }

  .accordion-tabs-section__inner {
    gap: var(--space-3xl); /* 32px */
  }

  .accordion-tabs-section__header {
    gap: var(--space-l); /* 16px */
  }

  .accordion-tabs-section__subcopy {
    font-size: 16px;
    line-height: 1.5;
  }

  .accordion-tabs-section__cta {
    width: fit-content;
  }
}

/* ---- Text columns ("Why specialist cover matters") ----
   Built from Figma node 18669:8843. Generic, reusable two-column text/list
   pattern — a centred header (same structure as the homepage Testimonials
   header, css/home.css) sits above two columns of heading+body pairs
   separated by a subtle divider, with a centred CTA underneath. Nothing
   here is specific to insurance cover types — reuse for any page that
   needs a header + two columns of text + CTA. */

.text-columns {
  width: 100%;
  padding: var(--space-section-l) 0; /* 144px top/bottom */
  background: var(--colour-grey-101);
  box-sizing: border-box;
}

.text-columns__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-section-xxs); /* 64px */
  max-width: var(--page-container-outer);
  padding-inline: var(--page-gutter);
  margin: 0 auto;
  box-sizing: border-box;
}

.text-columns__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xl); /* 24px */
  width: 100%;
}

.text-columns__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Typography comes from .text-h2 (css/typography.css). */
.text-columns__heading {
  text-align: center;
}

.text-columns__heading-dark {
  color: var(--colour-dark-grey);
}

.text-columns__heading-accent {
  color: var(--colour-brand-teal);
}

/* Typography comes from .text-body-xl (css/typography.css). */
.text-columns__subcopy {
  margin: 0;
  max-width: 100%;
  color: var(--colour-body-grey);
  text-align: center;
}

/* ---- Columns ---- */

.text-columns__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-section-s); /* 96px */
  width: 100%;
  box-sizing: border-box;
}

.text-columns__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-5xl); /* 42px */
  min-width: 0;
}

.text-columns__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-l); /* 16px */
}

/* Typography comes from .text-h5 (css/typography.css). */
.text-columns__item-heading {
  margin: 0;
  color: var(--colour-header-grey);
}

/* Typography comes from .text-body-lg (css/typography.css). */
.text-columns__item-body {
  margin: 0;
  color: var(--colour-body-grey);
}

.text-columns__divider {
  width: 100%;
  height: 0;
  margin: 0;
  border: none;
  border-top: 1px solid var(--colour-light-grey);
}

.text-columns__cta {
  width: fit-content;
}

/* Background modifier — .text-columns defaults to --colour-grey-101 (its
   first instance, Insurance's "Why specialist cover matters"); the Boat
   Insurance Claim Form's Privacy Collection Statement (Figma node
   18589:9145) sits on --colour-grey-200 instead, so that's a modifier
   rather than a hardcoded default two different pages would fight over. */
.text-columns--grey-200 {
  background: var(--colour-grey-200);
}

/* Alternate column content — plain running paragraphs with no per-item
   heading/divider, used in place of a series of .text-columns__item
   where the source content is just prose (Privacy Collection Statement
   above). 18px is Figma's own paragraph gap here, not one of the
   project's standard spacing tokens (12/16/20), so it's literal rather
   than forced onto the nearest scale value. */
.text-columns__prose p {
  margin: 0 0 18px 0;
  color: var(--colour-body-grey);
}

.text-columns__prose p:last-child {
  margin-bottom: 0;
}

.text-columns__prose a {
  color: var(--colour-orange);
  text-decoration: underline;
}

/* ---- Responsive ----
   Two columns of prose hold up well down to tablet portrait — what
   doesn't survive is the desktop's 96px column gap, which eats a third of
   the available width there. The gap tightens first, and the columns only
   stack on phones. */

@media (max-width: 1279px) {
  .text-columns {
    padding: var(--space-section-s) 0; /* 96px, down from 144px */
  }

  .text-columns__grid {
    gap: var(--space-6xl); /* 64px */
  }
}

@media (max-width: 1023px) {
  .text-columns__inner {
    gap: var(--space-5xl); /* 42px */
  }

  .text-columns__grid {
    gap: var(--space-4xl); /* 40px */
  }

  .text-columns__column {
    gap: var(--space-3xl); /* 32px */
  }
}

@media (max-width: 767px) {
  .text-columns {
    padding: var(--space-section-xxs) 0; /* 64px */
  }

  .text-columns__inner {
    gap: var(--space-3xl); /* 32px */
  }

  .text-columns__grid {
    grid-template-columns: 1fr;
    gap: var(--space-3xl); /* 32px between the stacked columns — the column's own 32px item gap plus the divider already separates them */
  }
}

/* ---- Content columns ("What happens if you need to make a claim?" on Claims) ----
   Built from Figma node 18602:11665. Generic, reusable asymmetric
   two-column pattern — NOT specific to Claims or insurance renewal: an
   intro column (eyebrow/heading/body copy tiers/optional CTA) beside a
   detail column of stacked, repeatable .content-group blocks (see
   css/icon-list.css). Distinct from .text-columns above: that pattern is
   a centred header over two EQUAL, divided columns; this one is
   top-aligned with an unequal 1fr / 592px split and no centred header —
   different enough visually to warrant its own thin shell, even though
   both live in this file as the project's category-page section
   patterns. */

.content-columns {
  width: 100%;
  padding: var(--space-section-s) 0 var(--space-section-l); /* 96px top, 144px bottom */
  background: var(--colour-white);
  box-sizing: border-box;
}

/* Background modifier — .content-columns defaults to white (Claims/Renew's
   own instances); Partner With Us's "What we offer" section (Figma node
   18624:17528) sits on --colour-grey-101 instead, so that's a modifier
   rather than a hardcoded default two different pages would fight over —
   same reasoning as .text-columns--grey-200 above. */
.content-columns--grey-101 {
  background: var(--colour-grey-101);
}

/* Desktop top-padding modifier — .content-columns defaults to a 96px top /
   144px bottom split (Claims/Renew's own instances, which sit directly
   under a hero wave that already supplies some of that top space).
   Partner With Us's "What we offer" section (Figma node 18624:17528) sits
   mid-page instead and wants the full 144px symmetric padding Figma gives
   it. Desktop-only on purpose — below 1280px the shared responsive rhythm
   already brings both instances down to the same collapsed value, same
   convention as .card-grid--pad-top-s (css/card-grid.css). */
@media (min-width: 1280px) {
  .content-columns--pad-top-l {
    padding-top: var(--space-section-l); /* 144px */
  }
}

.content-columns__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-section-s); /* 96px */
  max-width: var(--page-container-outer);
  padding-inline: var(--page-gutter);
  margin: 0 auto;
  box-sizing: border-box;
}

/* ---- Intro column ---- */

.content-columns__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-5xl); /* 42px */
  flex: 1 1 0;
  min-width: 0;
}

.content-columns__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}

/* Typography/padding/radius come from .eyebrow (css/style.css) — this
   section sits on a white background, so its eyebrow needs the grey chip
   instead of .eyebrow's white default. Same reasoning/pattern as
   .split-content__eyebrow and .self-service__eyebrow (css/home.css). */
.content-columns__eyebrow {
  background: var(--colour-grey-101);
}

/* .content-columns--grey-101 flips the section background from white to
   grey-101, so its eyebrow chip needs to flip back to .eyebrow's own white
   default to keep contrasting — same reasoning as .card-grid--grey's
   eyebrow override (css/card-grid.css). */
.content-columns--grey-101 .content-columns__eyebrow {
  background: var(--colour-white);
}

/* Typography comes from .text-h2 (css/typography.css). */
.content-columns__heading {
  margin: 0;
  width: 100%;
}

.content-columns__heading-dark {
  color: var(--colour-header-grey);
}

.content-columns__heading-accent {
  color: var(--colour-brand-teal);
}

/* 557px matches the Figma source's own text-block width — kept as a
   max-width rather than a fixed width so it still shrinks naturally on
   narrower columns (same reasoning as .split-content__body). */
.content-columns__body {
  max-width: 557px;
}

/* Typography comes from .text-body-xl (css/typography.css). */
.content-columns__lead {
  margin: 0 0 20px;
  color: var(--colour-body-grey);
}

/* Typography comes from .text-body (css/typography.css). Two of these sit
   back-to-back in the Claims copy with a tighter 14px gap between them —
   the last one in the block needs no trailing margin. */
.content-columns__text {
  margin: 0 0 14px;
  color: var(--colour-body-grey);
}

.content-columns__text:last-child {
  margin-bottom: 0;
}

/* Inline text link inside body copy — same plain-anchor treatment already
   used for inline links elsewhere (.card-grid__card-body a, css/card-grid.css),
   not a new link component. */
.content-columns__text a {
  color: var(--colour-orange);
  text-decoration: underline;
}

.content-columns__cta {
  width: fit-content;
}

/* ---- Detail column ---- */
/* Fixed width (not 1fr) matches the Figma source exactly — with the intro
   column's own flex: 1 1 0 and the 96px gap, this reproduces Figma's
   1fr/592px proportions within the same 1280px container used everywhere
   else, without hardcoding the container itself. */
.content-columns__detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-5xl); /* 42px */
  flex: 0 0 592px;
  padding-top: var(--space-5xl); /* 42px — offsets this column down so its first heading sits clear of the taller heading opposite it */
  min-width: 0;
}

/* ---- Responsive ----
   The desktop split is deliberately asymmetric (a fluid intro column
   beside a fixed 592px detail column). Below the container width that
   fixed track is what runs out of room first, so the two columns become
   balanced/fluid through the tablet-landscape range, then stack at tablet
   portrait — the detail column is a list of headed sub-blocks, and those
   need real measure rather than half a narrow viewport. */

@media (max-width: 1279px) {
  .content-columns {
    padding: var(--space-section-s) 0; /* 96px top and bottom, down from 96/144 */
  }

  /* Renew's instance sits directly under .promo (css/promo-panel.css),
     which already steps its own bottom padding down at these same
     breakpoints to be this section's lead-in gap — without this, the two
     sections' spacers stacked (promo's own bottom padding + this section's
     top padding), reading as a single oversized, unintentional gap between
     the panel and the next heading. Sibling selector rather than a
     per-page override class, so any future page that stacks these two
     sections in this order gets the same fix automatically. */
  .promo + .content-columns {
    padding-top: 0;
  }

  .content-columns__inner {
    gap: var(--space-6xl); /* 64px */
  }

  /* Balanced rather than fixed-width — 592px + the intro column + a 96px
     gap no longer fits once the container itself is under 1280px. */
  .content-columns__detail {
    flex: 1 1 0;
  }
}

@media (max-width: 1023px) {
  .content-columns__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5xl); /* 42px between the stacked columns */
  }

  .content-columns__intro,
  .content-columns__detail {
    flex-basis: auto;
    width: 100%;
  }

  /* Only offsets the column against the heading beside it — meaningless
     once it sits below that heading. */
  .content-columns__detail {
    padding-top: 0;
  }

  /* The Figma measure caps the copy against a 1fr column that no longer
     exists here; full width reads better once stacked. */
  .content-columns__body {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .content-columns {
    padding: var(--space-section-xxs) 0; /* 64px */
  }

  .content-columns__intro,
  .content-columns__detail {
    gap: var(--space-3xl); /* 32px, down from 42px */
  }
}