/* Promo panel — generic, reusable rounded photographic banner shell.
   Built from Figma node 18658:16897 (the homepage instance — see
   index.html/css/home.css for `.promo__benefits`/`.promo__visual`'s
   image+tags children, which stay homepage-specific there). This file
   holds only the genuinely shared shell: the panel/background/overlay
   treatment, the text column, and the heading typography — the pieces
   Figma node 18695:11925 (the Emergency Assistance / region-map variant,
   see css/region-map.css) reuses unchanged.

   Extracted out of css/home.css (where it previously lived alongside the
   rest of the homepage) specifically so it can be shared across pages
   without duplicating it — the homepage's own panel is untouched, still
   the exact same classes with the exact same rules, just relocated. */

.promo {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-bottom: var(--space-section-l); /* 144px — same top/bottom rhythm as .self-service */
  /* Side gutter so the panel (capped at the site's 1280px measure) never
     runs its rounded corners into the viewport edge below that width. No
     effect at desktop — see --page-gutter, css/variables.css. */
  padding-inline: var(--page-gutter);
  box-sizing: border-box;
  /* Claims' instance is a deep-link target (Search's "Emergency
     assistance" popular search, see js/navigation.js) — clears
     .site-header's fixed offset the same way every other anchor target on
     the site does (see css/form.css's own comment on this value). No
     effect on instances that are never jumped to directly. */
  scroll-margin-top: 200px;

  /* Background behind the card: independently settable top/bottom colours
     with a hard (non-gradient) horizontal split between them. Defaults
     reproduce the previous solid white background exactly — override per
     instance with inline custom properties, e.g.
     style="--promo-bg-top: #14849D; --promo-bg-bottom: #063F49; --promo-bg-split: 60%;" */
  --promo-bg-top: var(--colour-white);
  --promo-bg-bottom: var(--colour-white);
  --promo-bg-split: 50%;
  background: linear-gradient(
    to bottom,
    var(--promo-bg-top) 0%,
    var(--promo-bg-top) var(--promo-bg-split),
    var(--promo-bg-bottom) var(--promo-bg-split),
    var(--promo-bg-bottom) 100%
  );
}

/* ---- Background colour modifiers ----
   .promo defaults its own section background (--promo-bg-top/-bottom,
   independent of .promo__panel's own photographic background) to white.
   These modifiers only change the BOTTOM half — the panel sits across a
   horizontal transition between the page's existing preceding-section
   colour above and a grey below (split at the default --promo-bg-split:
   50%, i.e. behind the middle of the panel itself, since .promo has no
   padding-top/-bottom of its own once --no-pad-bottom is applied — the
   section box exactly wraps the panel). Home/Renew's instances transition
   to --colour-grey-101, Boat Insurance Claims Form's to --colour-grey-200
   — modifiers rather than hardcoding either into the default, same
   reasoning as this project's other --grey-101/--grey-200 section
   modifiers (e.g. css/category-page.css's .content-columns--grey-101).
   Where the preceding section isn't already white (Boat Insurance Claims
   Form's is --colour-grey-101), --promo-bg-top is overridden per-instance
   inline instead — see that page's own section tag. */
.promo--grey-101 {
  --promo-bg-bottom: var(--colour-grey-101);
}

.promo--grey-200 {
  --promo-bg-bottom: var(--colour-grey-200);
}

/* ---- No bottom padding modifier ----
   Some instances (Home, Renew, Boat Insurance Claims Form) sit as the very
   last section above .site-endcap and want zero gap beneath the panel
   instead of the default --space-section-l rhythm. Compound selector
   (.promo.promo--no-pad-bottom) so this wins over the responsive
   padding-bottom steps below regardless of source order/viewport. */
.promo.promo--no-pad-bottom {
  padding-bottom: 0;
}

.promo__panel {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-section-l); /* 144px between the text and image columns */
  width: 100%;
  max-width: 1280px; /* Figma's own frame is ~1290px; 1280 matches this
                         project's one established container width instead
                         of introducing a second one-off value */
  padding: var(--space-6xl) 90px; /* 64px vertical (matches --space-6xl exactly); 90px horizontal has no matching token, so it's literal */
  box-sizing: border-box;
  border-radius: 12px;
  overflow: hidden;
  color: var(--colour-white);
}

/* ---- Split variant ----
   Figma node 18695:11925 (region-map instance) uses the same panel shell
   but lays its two columns out with justify-content: space-between and no
   large fixed gap, since both columns there are their own natural/near-
   fixed width (~528px) rather than evenly flexing to fill the space like
   the homepage's image+tags composition does. A modifier rather than a
   change to .promo__panel itself, so the homepage instance is completely
   unaffected. */
.promo__panel--split {
  gap: 0;
  justify-content: space-between;
  flex-wrap: wrap; /* only engages once the two ~528px columns can no longer both fit — see the 860px breakpoint below */
}

.promo__panel--split .promo__text,
.promo__panel--split .promo__visual {
  flex: 0 1 528px;
}

/* Layer 1: photographic background. Figma composites it heavily
   cropped/enlarged within the panel rather than a straightforward cover
   fit — reproduced with the same literal offsets so the crop matches
   exactly, instead of approximating with background-size/position. */
.promo__bg {
  position: absolute;
  top: -168.26%;
  left: 0;
  width: 100%;
  height: 436.51%;
  max-width: none;
  z-index: 0;
  pointer-events: none;
}

/* Layer 2: dark teal gradient overlay, exact Figma angle/stops. */
.promo__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(82.998deg, #013743 32.315%, rgba(20, 132, 157, 0.7) 114.63%);
  pointer-events: none;
}

/* ---- Left: text column ---- */

.promo__text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl); /* 32px between heading and the content beneath it */
  flex: 1 1 0%;
  min-width: 0;
}

.promo__heading {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 600;
  /* Fluid 28px (mobile) → 42px (desktop) — same technique as the other
     section headings (css/home.css). Shared component (also used by the
     region-map split variant), so this benefits every page that reuses
     it, not just Home. */
  font-size: clamp(28px, 21.87px + 1.573vw, 42px);
  line-height: clamp(36.4px, 29.21px + 1.843vw, 52.8px);
}

.promo__heading-white {
  color: var(--colour-white);
}

.promo__heading-accent {
  color: var(--colour-sky-teal);
}

/* Second colour modifier — the region-map instance's "Call now!" run
   (Figma: #F58634, this project's --colour-orange). Generic (a colour, not
   "emergency"-specific), so any future .promo__heading can reuse it. */
.promo__heading-orange {
  color: var(--colour-orange);
}

/* ---- Right column shell ---- */
/* Generic positioning/sizing only — its content (image+tags on the
   homepage, css/home.css; the region map, css/region-map.css) is
   instance-specific. */
.promo__visual {
  position: relative;
  z-index: 2;
  flex: 1 1 0%;
  min-width: 0;
}

/* ---- Responsive (--split variant) ----
   The two ~528px columns need roughly 1150px plus the panel's own side
   padding to sit side by side, so they stack from tablet landscape down —
   the same point the default panel already steps at (below). */
@media (max-width: 1023px) {
  .promo__panel--split {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6xl); /* 64px between the stacked columns */
    padding: var(--space-6xl) var(--space-2xl); /* 90px side padding is too wide once the columns stack narrow */
  }

  .promo__panel--split .promo__text,
  .promo__panel--split .promo__visual {
    flex-basis: auto;
    width: 100%;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  /* Still side by side here, but the 90px side padding is desktop-scale
     against a container that no longer has 1280px to give. */
  .promo__panel--split {
    padding: var(--space-6xl) var(--space-3xl);
  }
}

@media (max-width: 767px) {
  .promo__panel--split {
    gap: var(--space-3xl); /* 32px */
    padding: var(--space-3xl) var(--space-xl); /* 32px 20px */
  }
}

/* ---- Section padding-bottom ----
   .promo's own 144px padding-bottom (matches --space-section-l, the
   desktop section rhythm) was never stepped down at smaller widths, unlike
   every other section built on that same rhythm (.card-grid,
   .content-columns, .text-columns, etc. — see css/category-page.css). Left
   alone, that meant a fixed 144px gap below the panel on top of the next
   section's own (correctly reduced) top padding — an oversized, clearly
   unintentional gap on mobile/tablet. Same two steps as everywhere else. */
@media (max-width: 1279px) {
  .promo {
    padding-bottom: var(--space-section-s); /* 96px, down from 144px */
  }
}

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

/* ---- Mobile ----
   Covers the DEFAULT .promo__panel (the homepage's own image+tags
   instance, css/home.css) — the --split variant above already collapses
   at 860px and needs nothing further here. Same stack-the-columns move,
   just against the default panel's own 144px gap/90px padding instead of
   the split variant's. */
@media (max-width: 767px) {
  .promo__panel {
    flex-direction: column;
    gap: var(--space-3xl); /* 32px between the stacked columns */
    padding: var(--space-2xl) var(--space-l);
  }

  /* Stacked columns need an explicit width here, same as
     .promo__panel--split's own stacked rule above — without it,
     .promo__visual's flex:1 1 0% (tuned for the desktop row, where it's
     the main-axis property) governs the cross-axis instead once the
     panel is a column, and .promo__panel's align-items: center lets it
     shrink-to-fit instead of filling the column. That leaves
     .promo__image's own width: 100% (css/home.css) with nothing real to
     resolve against, and .promo__image collapses along with it — which
     is also what was silently undersizing the image even back when the
     tags were a simple static list beneath it. */
  .promo__text {
    flex-basis: auto;
    width: 100%;
  }

  .promo__visual {
    flex-basis: auto;
    width: 100%;
  }
}

/* ---- Tablet (768–1023px) ----
   The default (non-split) panel's 144px inter-column gap + 90px side
   padding is desktop-scale — at genuine tablet widths that leaves too
   little room for the two ~fluid columns before something overflows, so
   it stacks here too, just with roomier tablet padding than the mobile
   rule above. 1024px+ keeps the desktop side-by-side composition — the
   text column is prose-width (~450–550px at that width) and the image
   column has enough of its own room, so it isn't a cramped fit the way
   .self-service's fixed-px claim card is (see css/home.css). */
@media (min-width: 768px) and (max-width: 1023px) {
  .promo__panel {
    flex-direction: column;
    gap: var(--space-6xl); /* 64px between the stacked columns */
    padding: var(--space-3xl) var(--space-2xl);
  }

  /* Same fix as the mobile rule above, and for the same reason: a
     stacked column needs an explicit width, or .promo__visual
     shrink-to-fits around content instead of filling the column, and
     .promo__image's width: 100% (css/home.css) has nothing to resolve
     against. */
  .promo__text,
  .promo__visual {
    flex-basis: auto;
    width: 100%;
  }
}

/* Tighten the desktop 144px gap down to something the 1024–1279px range
   can actually spare, without stacking — .promo__text/.promo__visual are
   both flex: 1 1 0% already, so they just share whatever's left. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .promo__panel {
    gap: var(--space-6xl); /* 64px, down from the desktop 144px */
    padding: var(--space-6xl) var(--space-2xl);
  }
}