@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:GRAD,ROND,opsz,slnt,wdth,wght@0..100,0..100,6..144,-10..0,25..151,1..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

/* ── Text over image ─────────────────────────────────────────
 *
 * --Overlay-Scrim: the minimum overlay opacity that keeps --Text,
 * --Header and --Eyebrow at their required ratios over ANY image.
 * The strictest of the three sets the value.
 *
 * --Quiet is NOT covered. It is the lowest-contrast text in the system and
 * would push this to ~0.87, hiding the photograph, to protect a role a
 * hero does not use. Putting quiet copy on an image needs its own scrim.
 *
 * This is a FLOOR for the worst possible photograph, not a recommendation.
 * Most images need considerably less; measure against the real image and
 * lower it. Going below this value means some images will fail.
 */
/* Primary: set by --Eyebrow */
[data-theme="Primary"] {
  --Overlay-Scrim: 0.95;
  --Overlay-Scrim-Paint: color-mix(in srgb, var(--Background) 95%, transparent);
}
/* Secondary: set by --Eyebrow */
[data-theme="Secondary"] {
  --Overlay-Scrim: 0.9;
  --Overlay-Scrim-Paint: color-mix(in srgb, var(--Background) 90%, transparent);
}
/* Tertiary: set by --Eyebrow */
[data-theme="Tertiary"] {
  --Overlay-Scrim: 0.91;
  --Overlay-Scrim-Paint: color-mix(in srgb, var(--Background) 91%, transparent);
}
/* Neutral: set by --Eyebrow */
[data-theme="Neutral"] {
  --Overlay-Scrim: 0.85;
  --Overlay-Scrim-Paint: color-mix(in srgb, var(--Background) 85%, transparent);
}
/* Info: set by --Header */
[data-theme="Info"] {
  --Overlay-Scrim: 0.84;
  --Overlay-Scrim-Paint: color-mix(in srgb, var(--Background) 84%, transparent);
}
/* Success: set by --Header */
[data-theme="Success"] {
  --Overlay-Scrim: 0.84;
  --Overlay-Scrim-Paint: color-mix(in srgb, var(--Background) 84%, transparent);
}
/* Warning: set by --Header */
[data-theme="Warning"] {
  --Overlay-Scrim: 0.85;
  --Overlay-Scrim-Paint: color-mix(in srgb, var(--Background) 85%, transparent);
}
/* Error: set by --Header */
[data-theme="Error"] {
  --Overlay-Scrim: 0.82;
  --Overlay-Scrim-Paint: color-mix(in srgb, var(--Background) 82%, transparent);
}
/* App-Bar: set by --Eyebrow */
[data-theme="App-Bar"] {
  --Overlay-Scrim: 0.95;
  --Overlay-Scrim-Paint: color-mix(in srgb, var(--Background) 95%, transparent);
}
/* Nav-Bar: set by --Eyebrow */
[data-theme="Nav-Bar"] {
  --Overlay-Scrim: 0.95;
  --Overlay-Scrim-Paint: color-mix(in srgb, var(--Background) 95%, transparent);
}
/* Status: set by --Eyebrow */
[data-theme="Status"] {
  --Overlay-Scrim: 0.95;
  --Overlay-Scrim-Paint: color-mix(in srgb, var(--Background) 95%, transparent);
}

/* Text-over-image component. Put data-theme on the figure to
   choose its scrim and text pair; both resolve from the system. */
.overlay-figure {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--Background);
  /* Type below sizes in cqw, so the figure has to be the query
     container — without this the clamps read the viewport and a
     figure in a narrow column gets full-page-sized text. */
  container-type: inline-size;
  border-radius: var(--Card-Radius, 0);
}
.overlay-figure > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* The scrim. Opacity comes from --Overlay-Scrim above, which is
   solved per theme for the worst possible image. */
.overlay-figure > .overlay,
.overlay-figure > .overlay-scrim {
  position: absolute; inset: 0;
  background: var(--Overlay-Scrim-Paint, transparent);
  pointer-events: none;
}
.overlay-figure > .overlay-text {
  position: absolute;
  left: 6%; bottom: 8%; width: 74%;
  display: flex; flex-direction: column;
  gap: 8px; align-items: flex-start;
  text-align: left;
  color: var(--Text);
}
/* Eyebrow: the FACE and COLOUR come from Eyebrow, the SIZE and
   TRACKING from Overline. One concept, two token families. */
.overlay-figure .t-eyebrow {
  margin: 0;
  color: var(--Eyebrow, var(--Quiet));
  font-family: var(--Font-Family-Eyebrow, sans-serif);
  font-weight: var(--Font-Weight-Eyebrow, 600);
  letter-spacing: var(--Overline-Medium-Letter-Spacing, 0.1em);
  text-transform: var(--Overline-Medium-Text-Transform, uppercase);
  font-size: clamp(11px, 2.2cqw, var(--Overline-Large-Font-Size, 18px));
  line-height: 1.5;
}
/* Title takes the DISPLAY face — this is a hero, which is the one
   place the expressive face belongs. */
.overlay-figure .t-title {
  margin: 0;
  color: var(--Header, var(--Text));
  font-family: var(--Font-Family-Display, var(--Font-Family-Header, sans-serif));
  font-weight: var(--Set-Font-Family-Decorative-Weight, 400);
  text-transform: var(--Display-Small-Text-Transform, none);
  font-size: clamp(20px, 5cqw, var(--Display-Small-Font-Size, 40px));
  line-height: 1.2;
}