/**
 * @file
 * Panel card frame.
 *
 * ## The frame is the SILVER GRADIENT, not a flat grey
 *
 * Canonical Figma `PMOumVEsuQEHJFYkbGBD84`, `Cards` set `10195:14314`, read by
 * Caroline Casals. Figma reports the border as:
 *
 *     border: 8px solid var(--SILVER-GRADIENT, #DEE1E3);
 *
 * `SILVER GRADIENT` is a real named swatch in the canonical palette (`4212:636`,
 * DONI-701), so that `var()` is Figma binding the border to a style — `#DEE1E3`
 * is only codegen's fallback, and it happens to be the gradient's own first stop.
 * `--silver-gradient` (`css/base/variables.css:68-75`) already holds those exact
 * stops, so no new token is needed and the flat hex is never used.
 *
 * ⚠️ `border: 8px solid <gradient>` is NOT valid CSS — a gradient cannot be a
 * border-color. The border is therefore transparent and the gradient is painted
 * as the border-box background layer, with an opaque padding-box layer masking it
 * inside. Technique taken from the two legacy implementations that kept the
 * gradient: `dawnzera_full/css/pages/about-hae.css:20` and `.../homepage.css:423`.
 * The flat-`#dee1e3` files (`events.css:431`, `taking-dawnzera.css:739`) are the
 * ones that lost it.
 *
 * ## 🔴 UNRESOLVED — deliberately not implemented here
 *
 * Caroline could not locate the panel the AC describes, and the `Cards` set's
 * desktop variants (500×423, 373.3×439, 362.7×383 — census §5.4) match none of
 * its dimensions, so it is likely not a `Cards` variant at all. Nothing below is
 * derived from the AC's numbers:
 *
 * - **Bottom padding opt-out** — `panel-card--flush-bottom` via the
 *   `flush_bottom` prop. Side and top padding unchanged. Full four-side `--flush`
 *   is still not implemented.
 * - **Padding, all four sides (full flush)** — not set. The AC's `840×263` outer
 *   / `760×239` content case, and the 40px/12px band geometry it implies, are a
 *   HYPOTHESIS, not a measurement. Not encoded.
 * - **The inset-ring variant** — where the 8px ring must not consume layout.
 *   Unresolved, so this file uses a real border, which is what the "Figma's
 *   padding includes the stroke" case calls for.
 * - **The six variant treatments** — `--plain --soft --support --refer
 *   --everystep --ambassador` appear nowhere on disk and none has been measured.
 *   🔴 Their classes are emitted by the Twig but style nothing. Whether to cut
 *   those props is with the MO (DONI-729-11).
 *
 * ## ✅ RESOLVED — Caroline Casals, DONI-729
 *
 * - **`border-radius: 1.5rem`.** Expressed as `var(--radius-2xl)`, which holds
 *   exactly `1.5rem` (`variables.css:203`). The token is used because the measured
 *   value and the token coincide EXACTLY — not because it looked close. The same
 *   value appears on legacy `.stats-card`, but that was not the source and was
 *   deliberately not copied on its own authority.
 * - **The icon geometry** — see `.panel-card__icon` below.
 *
 * Scoped as a bare BEM block, matching all six existing `dtc_nxt` components.
 * The `/canvas` skill's `.layout-container` wrapper rule describes
 * `dawnzera_full` and is not this theme's convention.
 *
 * This component adds no width cap: it is a frame placed inside a layout, not a
 * layout primitive. Neither the legacy `.container` nor FND-4's `.l-container`
 * belongs here.
 */

.panel-card {
  /* `position: relative` here is the containing block for `__icon`, which must
     straddle the top border. It declares NO `z-index`, so it creates no stacking
     context — only `position` plus a non-`auto` `z-index` does that. Safe for the
     ISI tray on two independent grounds: no stacking context is created, and a
     stacking context only scopes its own DESCENDANTS, while `.isi-section` is a
     footer region and never a descendant of a panel card. Measured for the
     record: `.isi-section` is `position: relative; z-index: 999999`
     (css/base/isi-tray.css:110-111) — relative, not fixed. */
  position: relative;
  border: 8px solid transparent;
  border-radius: var(--radius-2xl);
  background:
    linear-gradient(var(--color-white), var(--color-white)) padding-box,
    var(--silver-gradient) border-box;

  /* 🔴 2.5rem is measured from the PADDING BOX (the inner edge of the border),
     ruled by Caroline Casals. It is therefore LITERAL — do not subtract the 8px
     border from it. The total visual inset from the outer border edge is
     2.5rem + 8px = 48px at a 16px root, and that is correct and intended.
     This note exists because the ticket warns that Figma's padding elsewhere in
     this file INCLUDES the stroke (32px → 24px + 8px), and applying that pattern
     here would be wrong. Subtracting 8px is the bug, not the fix. */
  padding: 2.5rem;
}

/* Top padding grows to make room for the circle straddling the top border.
   2rem is padding-box-relative like the base value, so 2rem + 8px = 40px from
   the outer edge to the first content.

   Driven by a Twig-emitted class rather than `:has()` — see panel-card.twig. */
.panel-card--has-icon {
  padding-block-start: 2rem;
}

/* Bottom inset only — side and top padding stay at the base values above.
   The frame's bottom padding is removed so left-column artwork can sit flush,
   but copy in an image-card keeps the same 2.5rem inset via its body slot. */
.panel-card--flush-bottom {
  padding-block-end: 0;
}

.panel-card--flush-bottom .image-card__body {
  padding-block-end: 2.5rem;
}

@media (max-width: 1023px) {
  /* Body-first mobile stacks copy above art. Bottom inset on the body slot
     lands BETWEEN the button and the image — drop it; image-card gap holds. */
  .panel-card--flush-bottom .image-card--body-first-mobile > .image-card__body {
    padding-block-end: 0;
  }
}

@media (min-width: 1024px) {
  .panel-card--has-icon.panel-card-block-space {
    padding-block-start: 1rem;
  }

  .panel-card--flush-bottom.panel-card-block-space .image-card__body {
    padding-block-end: 1rem;
  }
}

@media (min-width: 1024px) {
  .panel-card--flush-bottom .image-card--horizontal {
    align-items: stretch;
  }

  .panel-card--flush-bottom .image-card--horizontal > .image-card__media {
    justify-content: flex-end;
  }
}

/**
 * Icon — a fixed-size circle straddling the top border.
 *
 * Geometry measured by Caroline Casals (DONI-729), NOT read from a node by
 * either the SO or the MO — so it is attributed to her rather than to a node id.
 * `5.385rem` is recorded exactly as given; 86.16px at a 16px root is a sanity
 * check only, never the source value.
 *
 * 🔴 POSITIONING BASELINE — the reading this implements, and the alternatives.
 * An absolutely-positioned child is laid out against the containing block's
 * PADDING box, so `top: 0` is the INNER edge of the 8px border, not the outer.
 * Relative to that origin the border band spans -8px to 0.
 *
 * Caroline: "the border BISECTS THE CIRCLE VERTICALLY — half above the border
 * line, half below." The border is an 8px BAND, not a line, and the band's own
 * centre line is the only one of the three candidates that yields exactly half
 * above and half below. That is why the centre sits at -4px:
 *
 *   band centre  → top: -4px  + translateY(-50%)   ← IMPLEMENTED
 *   outer edge   → top: -8px  + translateY(-50%)
 *   inner edge   → top: 0     + translateY(-50%)
 *
 * Derived from her wording, not chosen between: confirmation requested via
 * outbox. If she meant the outer edge, the single change is -4px → -8px.
 */
.panel-card__icon {
  position: absolute;
  top: -4px; /* half the 8px border: the band's centre line */
  left: 50%;
  transform: translate(-50%, -50%);
  inline-size: 5.385rem;
  block-size: 5.385rem;
  border-radius: 50%;
  overflow: hidden; /* the shape is fixed even when the artwork is not */
}

/* No `:empty` rule is needed: the wrapper is omitted entirely when the slot is
   unset (Twig conditional, confirmed by Caroline Casals), so there is never an
   empty circle to collapse. */