/* ============================================================================
   Planetary Health Check 2026 — the public companion page only.
   Loaded after phc2026.css on /phc2026/, never by the gated PIK demo.

   Two jobs:
     1. make the PHC figure page sit correctly inside the GLOBAÏA Layout
        (fixed 80px site header, site footer, the reading theme on the page
        surface only — the site chrome stays dark);
     2. carry the components the companion page adds and the demo has not —
        the partnership lockup, the hero reading controls, the source line.

   Everything here is prefixed .phcp- or scoped under html[data-theme="light"],
   so nothing in this file can reach the gated demo.
   ========================================================================== */

/* ── Sitting inside the Layout ────────────────────────────────────────────── */

/* The site header is fixed and 80px tall. The hero runs underneath it on
   purpose (it is transparent until scrolled), but anything the page scrolls TO
   has to clear it. */
.phc-companion #phc-band { scroll-margin-top: 92px; }

/* phc2026.css paints the body for a standalone document; inside the Layout the
   Tailwind `bg-black` utility on <body> wins on specificity, which is right in
   dark mode and wrong in light. Restore the page's own surface in both. */
html[data-theme="light"] body { background: var(--phc-bg); color: var(--phc-text); }

/* ── The site chrome stays dark, always ───────────────────────────────────────
   Light mode here is the figure's reading theme, not a site theme: GLOBAÏA's
   header and footer keep their pitch-black identity over a light page, the way
   they do on every other page. Only the page surface follows the toggle. */

/* ── Hero: the launch artwork, walked by the Tessellarium ────────────────────
   The mosaic still runs here; it just walks a two-image chain (the launch
   artwork, then the Earth view) instead of the demo's three. These rules dress
   the still <img> the mosaic starts from and falls back to — phc2026.css frames
   the demo's photograph at 38% height and half opacity, neither of which suits
   an artwork whose subject is dead centre. */
/* The still only shows until the mosaic takes over: phc2026.css hides it under
   .has-mosaic, and an unscoped rule here would outrank that (same specificity,
   later sheet) and leave BOTH the photograph and the canvas on screen, each
   half-transparent — which is exactly what two overlapping heroes look like. */
.phc-companion .phc-hero-media:not(.has-mosaic) img { object-position: center center; opacity: 0.85; }
/* The canvas is dimmed to 50% for the demo, whose hero is a backdrop for the
   title. Here it carries the launch artwork, so it runs at the same strength
   as the still it replaces — otherwise the swap to the mosaic dims the page. */
.phc-companion .phc-hero-canvas { opacity: 0.85; }

/* Wide screens: the type takes the left and leaves the planet the right. The
   artwork is centred in the frame, so centred text would sit straight on the
   globe — which reads as neither.

   The type is then sized against THE COLUMN, not the viewport. phc2026.css
   scales the hero in vw for a full-width centred block; in a column of 46vw
   that double-counts, and at 1024–1280px it produced a three-line title, a
   wrapped alarm line and a standfirst at a 27-character measure — a stack so
   tall it pushed its own first line up under the fixed site header. The column
   is a container, so `cqi` is the honest unit: 1cqi = 1% of the measure the
   words actually have. */
@media (min-width: 1024px) {
  .phc-companion .phc-hero-inner {
    justify-self: start;
    text-align: left;
    /* an explicit width, not a max-width: inline-size containment needs a
       definite size, or a content-sized container collapses */
    width: min(40rem, 46vw);
    max-width: none;
    margin-left: clamp(24px, 6vw, 104px);
    container-type: inline-size;
  }
  .phc-companion .phc-hero-title {
    /* The rem ceilings in these three rules only bite above 1921px: under it
       the column caps at 640px, so cqi caps the type by itself — 52.7px title,
       25.5 alarm, 18.9 standfirst. The lockup then sits at about four fifths
       of the column rather than against both edges. */
    font-size: clamp(2.4rem, 8.9cqi, 4.3rem);
    line-height: 1.05;
    /* the centred hero's penumbra is drawn for 70px type; under 50px type that
       much shadow reads as mud, so the stack tightens with the size */
    text-shadow:
      0 1px 2px rgba(0, 0, 0, 0.55),
      0 4px 10px rgba(0, 0, 0, 0.42),
      0 10px 22px rgba(0, 0, 0, 0.34),
      0 20px 42px rgba(0, 0, 0, 0.22);
  }
  .phc-companion .phc-hero-alarm {
    margin: 0.62em 0 0.3em;
    font-size: clamp(1.15rem, 4.3cqi, 2rem);
    text-shadow:
      0 1px 2px rgba(0, 0, 0, 0.6),
      0 3px 9px rgba(0, 0, 0, 0.4),
      0 8px 20px rgba(0, 0, 0, 0.26);
  }
  .phc-companion .phc-hero-sub {
    font-size: clamp(1rem, 3.2cqi, 1.5rem);
    line-height: 1.5;
    text-shadow:
      0 1px 2px rgba(0, 0, 0, 0.62),
      0 3px 9px rgba(0, 0, 0, 0.44),
      0 8px 20px rgba(0, 0, 0, 0.28);
  }
  /* the standfirst's hard break was cut for a centred column; here it wraps */
  .phc-companion .phc-hero-sub br { display: none; }
  .phc-companion .phcp-eyebrow { font-size: clamp(10.5px, 2.1cqi, 15px); }
}

/* Above 1921px phc2026.css grows the page through --phc-lg (a 0→0.4px
   multiplier). The column grows with it, and because the type is sized in cqi
   it follows without a second scale. */
@media (min-width: 1921px) {
  .phc-companion .phc-hero-inner { width: min(calc(640px + 640 * var(--phc-lg)), 46vw); }
}

/* Narrow screens: the globe fills the frame and the type has to sit on it, so
   the artwork is pooled down behind the words. A little top room as well — the
   site header is fixed, and the eyebrow would otherwise tuck under it.

   The pool has to be a pseudo-element, not .phc-hero-scrim: the scrim carries
   z-index -1 inside .phc-hero-media, while the mosaic canvas is appended later
   with z-index auto, so the canvas paints OVER the scrim and deepening it does
   nothing once the Tessellarium is running. ::after is last in paint order, so
   it covers the still and the canvas alike. */
@media (max-width: 1023px) {
  .phc-companion .phc-hero-inner { padding-top: clamp(56px, 9vh, 96px); }
  .phc-companion .phc-hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(118% 54% at 50% 46%, rgba(2, 6, 18, 0.62), rgba(2, 6, 18, 0.12) 78%),
      linear-gradient(to bottom, rgba(2, 6, 18, 0.5) 0%, rgba(2, 6, 18, 0) 34%, rgba(2, 6, 18, 0) 72%, rgba(6, 8, 16, 0.42) 100%);
  }
}

/* ── The title's break is fixed, not balanced ────────────────────────────────
   "Planetary" holds line one on its own; "Health Check 2026" takes line two.
   The regular-weight span is already the second half of the lockup, so making
   it a block sets the break with no extra markup — and balance/14ch, both of
   which decide the wrap by measure, have to go or they fight it. The sizes
   below then keep the second line inside the column: it is the long one, and
   if it ever fails to fit the lockup degrades to three lines rather than
   overflowing, which is why there is no white-space: nowrap here. */
.phc-companion .phc-hero-title {
  max-width: none;
  text-wrap: normal;
}
.phc-companion .phc-hero-title-reg { display: block; }

/* Phones: the hierarchy has to come from contrast, not from size. At the base
   scale the eyebrow, alarm, standfirst and CTA all land within a few pixels of
   each other and the stack fills the frame — four paragraphs shouting at once.
   The title keeps its weight; everything under it steps back, which also pulls
   the standfirst from four lines to three. */
@media (max-width: 640px) {
  /* the fixed break puts "Health Check 2026" on one line, and that line is
     what the phone has to fit — at the base 33.6px it cleared a 360px screen
     by 7px, which is no margin at all */
  .phc-companion .phc-hero-title { font-size: clamp(1.7rem, 8.4vw, 2.1rem); }
  .phc-companion .phc-hero-alarm { margin: 0.5em 0 0.25em; font-size: 19.5px; }
  .phc-companion .phc-hero-sub { font-size: 17px; line-height: 1.46; }
  .phc-companion .phcp-eyebrow { font-size: 10.5px; letter-spacing: 0.13em; margin-bottom: 12px; }
  .phc-companion .phc-cta { margin-top: 26px; padding: 12px 18px; font-size: 13.5px; }
}

/* ── Hero: the partnership line above the title ───────────────────────────── */
.phcp-eyebrow {
  margin: 0 0 clamp(10px, 1.6vw, 18px);
  font-size: clamp(11px, 1.15vw, 13px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
  /* on a phone the line breaks; balanced, it breaks evenly rather than
     dropping "LAB · PIK" alone onto a second line */
  text-wrap: balance;
}

/* ── Reading controls, in the hero ───────────────────────────────────────────
   They live over the photograph, under the fixed site header — never on the
   gradient band, which is the hero/content divider and carries its own label.
   The hero is always dark, so the icons stay white in both reading themes. */
.phcp-tools {
  position: absolute;
  top: calc(80px + 14px); /* clear of the fixed site header */
  right: clamp(10px, 2.4vw, 26px);
  z-index: 3;
  display: flex;
  gap: 2px;
}
.phcp-tools .phc-icon-btn { color: #fff; opacity: 0.78; }
.phcp-tools .phc-icon-btn:hover { opacity: 1; background: rgba(255, 255, 255, 0.12); }
@media (max-width: 640px) {
  .phcp-tools { top: 72px; }
  .phcp-tools .phc-icon-btn { width: 38px; height: 38px; }
}
/* Landscape phones: the header shrinks and the hero is only a few hundred
   pixels tall, so the controls ride higher. */
@media (orientation: landscape) and (max-height: 500px) {
  .phcp-tools { top: 58px; }
}

/* ── The partnership block ────────────────────────────────────────────────── */
.phcp-partners {
  padding: clamp(40px, 6vw, 76px) clamp(20px, 5vw, 64px) clamp(28px, 4vw, 44px);
  background: var(--phc-bg);
}
.phcp-partners-inner {
  /* Shares the page's measure exactly — including the >1921px growth, where
     phc2026.css widens every other section with --phc-lg. A hard 1180 here
     left the block visibly indented against the citation below it. */
  max-width: calc(1180px + 1180 * var(--phc-lg, 0px));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* the lockup leads the column it belongs to, not a graphic floating above a
     separate paragraph — so the gap is a paragraph's worth, not a section's */
  gap: clamp(16px, 1.6vw, 24px);
}
.phcp-lockup { display: block; }
.phcp-lockup img {
  width: 100%;
  /* The lockup carries the partnership, so it is read at a size that can be
     read: it leads the block rather than sitting in a column beside it. */
  max-width: min(520px, 82vw);
  height: auto;
  opacity: 0.92;
  transition: opacity 0.25s ease;
}
.phcp-lockup:hover img { opacity: 1; }
/* one artwork per surface — the dark-page version, then its light twin */
.phcp-lockup-light { display: none; }
html[data-theme="light"] .phcp-lockup-dark { display: none; }
html[data-theme="light"] .phcp-lockup-light { display: block; }

/* The prose column is set a little wider than the lockup above it, so the two
   read as one block with a common left edge rather than two stray objects. */
.phcp-partners-body { max-width: 62ch; }
.phcp-partners-body p {
  margin: 0 0 1em;
  font-size: clamp(15px, 1.25vw, 17.5px);
  line-height: 1.62;
  color: var(--phc-text-dim);
}
.phcp-partners-body p:last-child { margin-bottom: 0; }
.phcp-partners-body a {
  color: var(--phc-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(87, 182, 236, 0.35);
}
.phcp-partners-body a:hover { border-bottom-color: currentColor; }

@media (max-width: 760px) {
  .phcp-lockup img { max-width: 88vw; }
}

/* ── Source line, just above the site footer ──────────────────────────────── */
.phcp-source {
  max-width: calc(1180px + 1180 * var(--phc-lg, 0px));
  margin: 0 auto;
  padding: clamp(18px, 3vw, 30px) clamp(20px, 5vw, 64px) clamp(34px, 5vw, 56px);
  background: var(--phc-bg);
  text-align: center;
  font-size: clamp(12px, 1vw, 13.5px);
  line-height: 1.6;
  color: var(--phc-text-faint);
}
.phcp-source a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.phcp-source a:hover { color: var(--phc-text); }

/* ══════════════════════════════════════════════════════════════════════════
   Audit pass (2026-09-22) — faults found reading the built page at 1440 and
   390px in BOTH themes, which is the only way these show up.
   ══════════════════════════════════════════════════════════════════════════ */

/* Four figures read as three and a stray. Square the grid: two rows of two,
   one column on phones. (The gated demo keeps the three-up rule — its own
   figure section sits beside a three-card row of design explorations.) */
@media (min-width: 761px) {
  .phc-companion .phc-figures-extra .phc-variants-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 1024–1150px is the tight end of the split: the column takes 46vw and the
   artwork's globe still reaches under the last words. The image overflows
   horizontally at these widths, so nudging its anchor right moves the planet
   clear without cropping anything. */
@media (min-width: 1024px) and (max-width: 1150px) {
  .phc-companion .phc-hero-media img { object-position: 62% center; }
}

/* Same fault, same block: the Explore More cards wrapped 3 + 1. The component's
   own rule is Astro-scoped and its bundle loads after this file, so the
   selector has to carry one more level to win. */
.phc-companion .explore-more .explore-more-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) {
  .phc-companion .explore-more .explore-more-grid { grid-template-columns: 1fr; }
}

/* ── Light mode ───────────────────────────────────────────────────────────── */

/* The cross-links come from a site-wide component drawn for pitch black: on a
   light page its label and descriptions were white on white and its cards had
   no edge at all. An id-free but deeper selector outranks the component's own
   scoped rules without touching a component every other page shares. */
html[data-theme="light"] .phc-companion .explore-more-label { color: rgba(10, 22, 38, 0.45); }
html[data-theme="light"] .phc-companion .explore-more-desc { color: rgba(10, 22, 38, 0.62); }
html[data-theme="light"] .phc-companion .explore-more-title { color: #1266a3; }
html[data-theme="light"] .phc-companion .explore-more-card {
  border-color: rgba(10, 22, 38, 0.14);
  background: rgba(10, 22, 38, 0.025);
}
html[data-theme="light"] .phc-companion .explore-more-card:hover {
  border-color: rgba(18, 102, 163, 0.45);
  background: rgba(18, 102, 163, 0.06);
}

/* The site header and footer stay dark here — that is the decision — but their
   glass is a 55% dark wash, which over a light page renders mid-grey with the
   white type barely on it. Give them a solid dark surface instead. */
html[data-theme="light"] #site-header.header-scrolled {
  background-color: rgba(6, 10, 18, 0.92) !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}
html[data-theme="light"] #site-footer.site-footer-glass {
  background-color: #070b12;
  border-top-color: rgba(255, 255, 255, 0.1);
}