/* ---------------------------------------------------------------------------
   Layout rules for AUTHORED pages — pages with no upstream original to mirror.

   Everything visual here is expressed in the live site's own custom properties
   (--dxcl-*) or repeats a measurement taken from the Figma frame. No colour is
   written as a literal: if a value is not a live token, it is a length.

   Loaded only by src/layouts/Authored.astro, after the captured stylesheets, so
   it can position authored sections without touching any mirrored page.
   ------------------------------------------------------------------------- */

/* The rhythm the live pages use between sections: 120px, 80px on phones.
   Matches the donor page's own <main> so an authored page sits at the same
   pace as a captured one. */
.dz-authored {
  display: flex;
  flex-direction: column;
  gap: 80px;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

@media (min-width: 992px) {
  .dz-authored { gap: 120px; }
}

/* --- Full-bleed band backdrop -------------------------------------------
   Same shape as the live FullBleedBgSplitPanel_backdrop* variants: set the
   background variable the component already reads, and dim it with the same
   multiply overlay so white text holds its contrast. */
.dz-backdrop-honeycomb {
  --fbbsp-bg-mobile: url(/images/rebrand/risk-engine/bg-honeycomb.webp);
}


/* --- The dim over every authored full-bleed band -------------------------
   The live FullBleedBgSplitPanel_backdrop* variants each carry their own
   multiply overlay so white text holds contrast over a photograph. Authored
   bands need the same thing, and it was copy-pasted into all six backdrops
   before this rule existed. One selector, one alpha, overridable per band
   with --dz-dim. */
[class*="dz-backdrop-"]:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  background: rgb(0 0 0 / var(--dz-dim, .45));
}

.dz-ticks li { align-items: flex-start; }
.dz-ticks li > span:first-child { height: 1.6em; }

/* --- Three-up illustrated cards -----------------------------------------
   Desktop: three equal cards across the content width, as drawn.
   Phones: the Figma shows them as a strip that bleeds off both edges, so they
   scroll natively with snap points. Native scrolling rather than the site's
   drag carousel — no JavaScript, and it is what a phone user expects. */
.dz-card-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
}

.dz-card {
  background-color: var(--dxcl-c-quaternary-blue-100);
  border-radius: 24px;
  box-sizing: border-box;
  height: 100%;
}

.dz-card-media {
  overflow: hidden;
  border-radius: 16px;
  aspect-ratio: 346 / 380;
}

.dz-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 992px) {
  .dz-card { border-radius: 40px; }
}

@media (max-width: 991px) {
  .dz-card-strip {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-inline: 24px;
    gap: 16px;
  }

  .dz-card-strip::-webkit-scrollbar { display: none; }

  .dz-card-strip > * {
    flex: 0 0 min(280px, 72vw);
    scroll-snap-align: center;
  }
}

/* --- "What it doesn't do" grid ------------------------------------------
   Three cards, then two — drawn on a six-column field so both rows share one
   set of gutters. Single column on phones. */
.dz-doesnt-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 32px;
}

.dz-doesnt-grid > * { grid-column: span 2; }
.dz-doesnt-grid > :nth-child(4),
.dz-doesnt-grid > :nth-child(5) { grid-column: span 3; }

@media (max-width: 991px) {
  .dz-doesnt-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .dz-doesnt-grid > *,
  .dz-doesnt-grid > :nth-child(4),
  .dz-doesnt-grid > :nth-child(5) { grid-column: auto; }
}

/* --- Testimonials -------------------------------------------------------
   Desktop: quote above, person below, side by side.
   Phones: the Figma puts the person FIRST, so the order flips. */
.dz-testimonials {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 120px;
  align-items: stretch;
}

.dz-testimonial {
  border-radius: 24px;
  justify-content: space-between;
  box-sizing: border-box;
}

.dz-testimonial-media {
  width: 248px;
  max-width: 100%;
  aspect-ratio: 248 / 259;
  overflow: hidden;
  border-radius: 16px;
}

.dz-testimonial-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 991px) {
  .dz-testimonials {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .dz-testimonial-person { order: -1; }
}

/* --- FAQs ---------------------------------------------------------------
   848px column, centred, as drawn. The accordion itself is the live component;
   only the answer body is authored, because on the live site the answers never
   reach the DOM at all. */
.dz-faqs {
  width: 100%;
  max-width: 848px;
  margin-inline: auto;
}

.dz-answer {
  padding: 0 24px 24px;
  color: var(--dxcl-c-quaternary-beige-1000);
  font-size: 14px;
  line-height: 1.5;
}

.dz-answer p { margin: 0 0 12px; }
.dz-answer p:last-child { margin-bottom: 0; }
.dz-answer ul { margin: 0 0 12px; padding-left: 20px; }
.dz-answer li { margin-bottom: 8px; }

/* The second band reuses production's forest photograph, but as WebP rather
   than the 1.4 MB JPEG the live CSS points at — 1,404 kB → 488 kB on a page
   that is mostly photograph. Same image, same overlay as the live variant.
   (The JPEG is still what the captured pages load; converting it there would
   mean rewriting mirrored CSS, which is a separate job.) */
.dz-backdrop-forest {
  --fbbsp-bg-mobile: url(/images/rebrand/risk-engine/bg-forest-river.webp);
}


/* --- Icon cards ---------------------------------------------------------
   A lime symbol above centred copy, three or two across, stacking on phones.
   Same card tokens as the illustrated strip above; only the count differs. */
.dz-icon-grid {
  display: grid;
  gap: 24px;
  width: 100%;
}

.dz-icon-grid--3 { grid-template-columns: repeat(3, 1fr); }
.dz-icon-grid--2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 991px) {
  .dz-icon-grid--3,
  .dz-icon-grid--2 { grid-template-columns: 1fr; gap: 16px; }
}

/* --- Copy beside a picture ----------------------------------------------
   Two equal columns on desktop, picture under the copy on phones. */
.dz-split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 80px;
  align-items: center;
}

.dz-split-media {
  border-radius: 24px;
  overflow: hidden;
}

.dz-split-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 991px) {
  .dz-split { grid-template-columns: 1fr; gap: 32px; }
}

.dz-ordered { padding-left: 20px; list-style: decimal; }
.dz-ordered li { margin: 0; }

/* Six cards do not fit a row at any width the site supports, so this variant
   scrolls at every breakpoint — which is what the Figma frame draws: six
   416px cards inside a 1280px band. */
.dz-card-strip--six {
  display: flex;
  grid-template-columns: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.dz-card-strip--six::-webkit-scrollbar { display: none; }

.dz-card-strip--six > * {
  flex: 0 0 min(340px, 80vw);
  scroll-snap-align: center;
}

/* --- Mountain-range band, lighter ---------------------------------------
   Same photograph and same overlay as the live backdropMountainRange variant,
   but 1920px wide at q62 instead of 2560 at full quality: 705 kB → 258 kB.
   It is the LCP element on both pages that use it, and both were failing the
   3s LCP budget on its account (3.26s and 3.39s, reproducible on an idle
   machine). Behind a 45% black overlay the difference is not visible.

   Same reasoning, and the same limit, as .dz-backdrop-forest below: only the
   authored pages benefit. Giving the captured pages the saving means rewriting
   mirrored CSS, which is a separate job. */
.dz-backdrop-mountain {
  --fbbsp-bg-mobile: url(/images/rebrand/bg-mountain-range-lite.webp);
}


/* --- Path to capital -----------------------------------------------------
   The DarwinIA band. Same shape as the live FullBleedBgSplitPanel_backdrop*
   variants and the two above it: set the variable the component already reads,
   then dim it. The Figma darkens this one with a 40% black fill rather than the
   45% the other bands use, so the overlay matches that. */
.dz-backdrop-darwinia {
  --fbbsp-bg-mobile: url(/images/rebrand/path-to-capital/bg-darwinia-gold.webp);
  --dz-dim: .4;   /* the Figma darkens this one slightly less than the others */
}


/* The Figma alternates which side the picture sits on down the three
   milestones. Only the desktop order flips: on phones the picture always
   follows its copy, which is what the mobile frame draws. */
@media (min-width: 992px) {
  .dz-split--flip > :first-child { order: 2; }
  .dz-split--flip > :last-child { order: 1; }
}

/* Two video stills side by side, each with its caption underneath. Stacks on
   phones, as the mobile frame does. */
.dz-video-pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  width: 100%;
}

@media (max-width: 991px) {
  .dz-video-pair { grid-template-columns: 1fr; gap: 24px; }
}

/* The path-to-capital testimonial photograph is 294x259, not the 248x259 the
   other testimonial portraits use — two people rather than one. */
.dz-testimonial-media--wide {
  width: 294px;
  aspect-ratio: 294 / 259;
}

/* --- INDX performance ----------------------------------------------------
   A thirteen-column table does not fit a phone at any type size the site uses,
   so it scrolls inside its own box rather than shrinking the type or dropping
   months. The page itself never scrolls sideways. */
.dz-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.dz-returns {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  font-size: 14px;
  color: var(--dxcl-c-tertiary-500);
}

.dz-returns th,
.dz-returns td {
  padding: 8px 10px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--dxcl-c-tertiary-300);
}

.dz-returns thead th,
.dz-returns tbody th {
  text-align: left;
  font-weight: 700;
  color: var(--dxcl-c-tertiary-400);
}

.dz-returns tbody tr:nth-child(odd) { background: var(--dxcl-c-quaternary-blue-100); }

.dz-returns .dz-up { color: var(--dxcl-c-tertiary-400); }
.dz-returns .dz-down { color: var(--dxcl-c-semantic-danger-600); }
.dz-returns .dz-muted { color: var(--dxcl-c-tertiary-300); }
.dz-returns-total { font-weight: 700; }

.dz-returns tfoot th,
.dz-returns tfoot td { border-bottom: 0; font-weight: 700; }

/* Nine statistics, three across as drawn; two across on tablets, one on
   phones — the mobile frame pairs them, so the middle step matches it. */
.dz-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  width: 100%;
}

@media (max-width: 991px) {
  .dz-stat-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

@media (max-width: 543px) {
  .dz-stat-grid { grid-template-columns: 1fr; }
}

/* --- Trader stories bands ------------------------------------------------
   The designed photographs, taken as FILLS (`767:18645` and `770:18879`) rather
   than renders — a render of either frame bakes the band's own headline into
   the picture, and the built page then shows every line twice.

   A murmuration of starlings for the motto band and a shoal for the join band:
   the same flock-moving-as-one idea the page is about. Reshipped at 1920px/q70
   because they sit behind a 45% black overlay, where the difference from full
   quality is not visible. */
.dz-backdrop-motto {
  --fbbsp-bg-mobile: url(/images/rebrand/trader-stories/bg-motto-murmuration.webp);
}

.dz-backdrop-community {
  --fbbsp-bg-mobile: url(/images/rebrand/trader-stories/bg-join-shoal.webp);
}


/* --- Trader stories ------------------------------------------------------
   Five films. The Figma lays them two-up with the third spanning wider; two
   equal columns with the last one full width keeps that rhythm without a
   bespoke row for every count. One column on phones, as the mobile frame. */
.dz-story-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 32px;
  width: 100%;
}

.dz-story-grid > :last-child { grid-column: 1 / -1; max-width: calc(50% - 16px); }

@media (max-width: 991px) {
  .dz-story-grid { grid-template-columns: 1fr; gap: 32px; }
  .dz-story-grid > :last-child { grid-column: auto; max-width: none; }
}

.dz-trustpilot {
  display: block;
  width: 100%;
  max-width: 1280px;
  border-radius: 24px;
  overflow: hidden;
}

.dz-trustpilot img { display: block; width: 100%; height: auto; }

/* --- Careers -------------------------------------------------------------
   The Careers design contains no photography at all: every image slot in it is
   an empty gradient placeholder, including the twelve team cards, the three
   perk cards and the three portraits. Rather than invent pictures, those slots
   render as the site's own card tint — deliberate-looking, and a one-line swap
   to a real <img> when photographs exist. */
.dz-media-placeholder {
  width: 100%;
  border-radius: 16px;
  background: linear-gradient(160deg, var(--dxcl-c-quaternary-blue-100), var(--dxcl-c-quaternary-beige-300));
  border: 1px solid var(--dxcl-c-tertiary-300);
}

/* Twelve teams: three across, two on tablets, one on phones. */
.dz-team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
}

@media (max-width: 991px) {
  .dz-team-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

@media (max-width: 543px) {
  .dz-team-grid { grid-template-columns: 1fr; }
}

.dz-eyebrow { letter-spacing: .14em; }

.dz-role { text-decoration: none; }
.dz-role:hover { filter: brightness(.97); }

/* A caption that belongs to screen readers only — the table needs one, the
   design does not draw one. */
.dz-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}