/* =========================================================================
   National homes — PW-21

   A national home is the same product wearing the community's colour. The
   layout, spacing, type and components are identical everywhere; what changes
   is the palette and one piece of geometry.

   THE HERO BAND is where the impact lives, and it is the only place the
   national colour is allowed to be loud. It is filled with the country's
   primary and carries a CSS-drawn motif. Everything below it is the ordinary
   product on the ordinary ground.

   That containment is not caution for its own sake. It is what lets the band
   be genuinely bold: the only text inside it is the claim, on a colour pair
   the contrast tool verifies for every country in both themes. No body copy,
   no cards, no form control ever sits on a national fill, so no amount of
   saturation up there can make anything harder to read down here.

   Motifs are gradients — no images, no requests, nothing for the CSP to block
   and nothing extra to download on a phone.

   PHOTOGRAPHS. A country may also supply a photograph, and the band carries it
   full-bleed. The contrast problem that usually comes with a background photo
   is solved by geometry rather than by tuning an overlay opacity:

     wide screens — the scrim is 100% opaque national colour across the text
       column and only fades to translucent past it. Text therefore sits on
       exactly the same colour it sits on with no photo at all, so the pairing
       the contrast tool already verifies is the pairing that ships. The photo
       is fully itself on the outer third.

     narrow screens — the photo becomes a band above the text rather than
       behind it. No overlap at all.

   Either way NO TEXT EVER SITS ON A PARTIALLY TRANSPARENT SCRIM, which is what
   makes the guarantee hold for a photograph nobody has chosen yet. An overlay
   tuned until it looked right against one image would break against the next.

   What this must never become: a government portal. No flag as a background
   or a fill, no state emblem, no seal, no monument as national symbol.
   See DESIGN_SYSTEM.md §2 for what a national photograph may show.
   ========================================================================= */

.pw-national-hero {
  position: relative;
  overflow: hidden;
  padding: var(--pw-space-8) var(--pw-gutter);
  border-radius: var(--pw-radius-xl);
  background-color: var(--pw-primary);
  color: var(--pw-primary-contrast);
  isolation: isolate;
}

/* The motif layer. Drawn behind the content, never over it. */
.pw-national-hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.5;
  content: "";
}

/* --- The five motifs ----------------------------------------------------- */

/* Arches — vaults and colonnades. Rome, and everywhere Rome reached. */
[data-motif="arch"] .pw-national-hero::before {
  background-image: radial-gradient(
    circle at 50% 100%,
    rgb(255 255 255 / 0.22) 0 38%,
    transparent 38.5%
  );
  background-size: 120px 120px;
  background-position: 0 100%;
}

/* Rays — light thrown from one corner. */
[data-motif="rays"] .pw-national-hero::before {
  background-image: repeating-conic-gradient(
    from 200deg at 8% 108%,
    rgb(255 255 255 / 0.16) 0deg 4deg,
    transparent 4deg 11deg
  );
}

/* Grid — modular, orthogonal, unfussy. */
[data-motif="grid"] .pw-national-hero::before {
  background-image:
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.16) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.16) 0 1px, transparent 1px 44px);
}

/* Tile — an interlocking lattice, the geometry of tilework. */
[data-motif="tile"] .pw-national-hero::before {
  background-image:
    repeating-linear-gradient(45deg, rgb(255 255 255 / 0.18) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(-45deg, rgb(255 255 255 / 0.18) 0 1px, transparent 1px 34px);
}

/* Wave — layered water. */
[data-motif="wave"] .pw-national-hero::before {
  background-image: radial-gradient(
    ellipse 200px 60px at 50% 0,
    transparent 0 58%,
    rgb(255 255 255 / 0.18) 58% 60%,
    transparent 60%
  );
  background-size: 200px 60px;
}

/* --- The photograph ------------------------------------------------------ */

/* An <img> rather than a background-image: it takes loading and decoding
   hints, it can be sized responsively, and a failed load leaves the coloured
   band rather than nothing. Focal point comes from --pw-photo-position, set
   through setProperty() — a DOM call, not an inline style attribute, so the
   CSP stays intact. */
.pw-national-hero__photo {
  position: absolute;
  z-index: -3;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: var(--pw-photo-position, 50% 50%);
}

/* The scrim. Solid across the text column, fading only past it — see the note
   at the top of this file for why that is the whole contrast argument. */
.pw-national-hero--photo::after {
  position: absolute;
  z-index: -2;
  inset: 0;
  /* Opaque across the text column, then out of the way entirely. Fading to
     `transparent` rather than to a translucent black matters: interpolating an
     opaque colour into a dark overlay washes the whole transition, and the
     picture ends up looking like a mistake instead of a photograph. */
  background-image: linear-gradient(
    to right,
    var(--pw-primary) 0%,
    var(--pw-primary) 60%,
    color-mix(in srgb, var(--pw-primary) 45%, transparent) 80%,
    transparent 100%
  );
  content: "";
}

[dir="rtl"] .pw-national-hero--photo::after {
  background-image: linear-gradient(
    to left,
    var(--pw-primary) 0%,
    var(--pw-primary) 60%,
    color-mix(in srgb, var(--pw-primary) 45%, transparent) 80%,
    transparent 100%
  );
}

/* The motif is decoration on colour, not on a photograph — two textures
   fighting each other is worse than either alone. */
.pw-national-hero--photo::before {
  display: none;
}

/* Narrow screens: the photo moves above the text instead of behind it. No
   overlap, so nothing to guarantee. */
@media (max-width: 767px) {
  .pw-national-hero--photo {
    padding-block-start: 0;
  }

  .pw-national-hero--photo .pw-national-hero__photo {
    position: static;
    z-index: auto;
    block-size: 12rem;
    margin-block-end: var(--pw-space-6);
    margin-inline: calc(var(--pw-gutter) * -1);
    inline-size: calc(100% + var(--pw-gutter) * 2);
    /* base.css caps every image at 100% of its container, which would clamp
       this back and leave a gutter-wide strip of colour down one side. The
       band is meant to bleed. */
    max-inline-size: none;
  }

  .pw-national-hero--photo::after {
    display: none;
  }
}

/* --- Hero content -------------------------------------------------------- */

.pw-national-hero__inner {
  position: relative;
  max-inline-size: var(--pw-measure);
  margin-inline: auto;
}

.pw-national-hero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pw-space-2);
  align-items: center;
  margin: 0 0 var(--pw-space-4);
  font-size: var(--pw-text-sm);
  font-weight: var(--pw-weight-semibold);
  letter-spacing: var(--pw-tracking-wide);
  text-transform: uppercase;
}

/* The flag is an identifier at the size of an identifier — never a banner. */
.pw-national-hero__flag {
  font-size: var(--pw-text-xl);
  line-height: 1;
}

.pw-national-hero__title {
  margin: 0;
  font-size: var(--pw-text-3xl);
  font-weight: var(--pw-weight-bold);
  line-height: var(--pw-leading-tight);
  letter-spacing: var(--pw-tracking-tight);
  text-wrap: balance;
}

.pw-national-hero__lead {
  margin: var(--pw-space-4) 0 0;
  font-size: var(--pw-text-lg);
  line-height: var(--pw-leading-relaxed);
}

.pw-national-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pw-space-3);
  margin-block-start: var(--pw-space-6);
}

/* Buttons sitting on the national fill invert: the surface behind them is the
   primary colour, so a primary button would disappear into it. */
.pw-national-hero__actions .pw-button--primary {
  background: var(--pw-primary-contrast);
  border-color: var(--pw-primary-contrast);
  color: var(--pw-primary);
}

.pw-national-hero__actions .pw-button--ghost {
  border-color: currentcolor;
  color: inherit;
}

/* --- Not open yet -------------------------------------------------------- */

/* A country below the threshold is told where it stands, with a real number.
   "Coming soon" is a promise nobody made; "38 of 100" is a fact somebody can
   act on. */
.pw-national-gate {
  max-inline-size: var(--pw-measure);
  margin-block: var(--pw-space-6);
  padding: var(--pw-space-6);
  border: 1px dashed var(--pw-border-strong);
  border-radius: var(--pw-radius-lg);
}

.pw-national-gate__count {
  display: block;
  font-size: var(--pw-text-3xl);
  font-weight: var(--pw-weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--pw-tracking-tight);
}

.pw-national-gate__meter {
  block-size: 8px;
  margin-block: var(--pw-space-4);
  overflow: hidden;
  border-radius: var(--pw-radius-full);
  background: var(--pw-surface-sunken);
}

.pw-national-gate__fill {
  display: block;
  block-size: 100%;
  background: var(--pw-primary);
}

/* Ten steps rather than a computed width: style attributes are blocked by the
   CSP, so the fill carries a bucket instead of a percentage. */
.pw-national-gate__fill[data-tenth="0"] {
  inline-size: 2%;
}
.pw-national-gate__fill[data-tenth="1"] {
  inline-size: 10%;
}
.pw-national-gate__fill[data-tenth="2"] {
  inline-size: 20%;
}
.pw-national-gate__fill[data-tenth="3"] {
  inline-size: 30%;
}
.pw-national-gate__fill[data-tenth="4"] {
  inline-size: 40%;
}
.pw-national-gate__fill[data-tenth="5"] {
  inline-size: 50%;
}
.pw-national-gate__fill[data-tenth="6"] {
  inline-size: 60%;
}
.pw-national-gate__fill[data-tenth="7"] {
  inline-size: 70%;
}
.pw-national-gate__fill[data-tenth="8"] {
  inline-size: 80%;
}
.pw-national-gate__fill[data-tenth="9"] {
  inline-size: 90%;
}
.pw-national-gate__fill[data-tenth="10"] {
  inline-size: 100%;
}

.pw-national-gate__body {
  margin: 0;
  color: var(--pw-text-secondary);
  line-height: var(--pw-leading-relaxed);
}

.pw-national-gate__note {
  margin: var(--pw-space-4) 0 0;
  color: var(--pw-text-secondary);
  font-size: var(--pw-text-sm);
  line-height: var(--pw-leading-relaxed);
}

@media (min-width: 768px) {
  .pw-national-hero {
    padding: var(--pw-space-9) var(--pw-space-8);
  }

  /* With a photo the text column stops centring and holds the solid side of
     the scrim. 54% keeps it inside the 62% solid stop with room to spare, so
     a long translated headline cannot push a word onto the faded part. */
  .pw-national-hero--photo .pw-national-hero__inner {
    margin-inline: 0;
    max-inline-size: min(var(--pw-measure), 54%);
  }
}