/* ============================================================
   CONTEXTUAL RESOURCE TEMPLATE — two global fixes
   Production package, 2 September 2026.

   WHAT THIS IS
   A delta stylesheet for the existing internal Contextual
   Resource template (`custom-contextual.hbs` →
   `partials/editorial-page.hbs`). It changes no template markup
   and introduces no new class, token or selector.

   HOW TO INSTALL
   Append the rules below to `assets/css/screen.css`, or load this
   file AFTER `screen.css`. Load order matters: fix 2 overrides an
   existing rule of identical specificity
   (`.contextual-page-header__image`), so it only wins when it
   comes later in the cascade.

   Q12 NOTE
   No identifier is renamed, added or normalised here. Every
   selector already exists in the theme or in Ghost's own card
   output (`.kg-embed-card`).
   ============================================================ */


/* ------------------------------------------------------------
   FIX 1 · Responsive embedded videos
   Ghost's embed card ships unstyled in v1.0.9 — there is no
   `.kg-embed-card` rule anywhere in screen.css — so a YouTube or
   Vimeo iframe renders at the provider's hard-coded width and
   height attributes and overflows the article column on narrow
   viewports. These rules make the embed fill the column and hold
   16:9 at every width.

   `!important` is deliberate: the width and height arrive as
   inline HTML attributes and inline styles on provider markup
   the theme does not control.
   ------------------------------------------------------------ */

.contextual-page .article-content .kg-embed-card {
  width: 100%;
  /* DEV-40, measured. `width: 100%` on a <figure> is not enough on its
     own: the UA stylesheet gives every figure `margin: 1em 40px`, and
     screen.css does not reset it for this card. With the side margins
     left in place the card sits 40px right of the column and its right
     edge lands 397px into a 390px viewport — the supplied fix
     introduces 7px of horizontal overflow at mobile width. Zeroing the
     inline margins is what makes `width: 100%` mean the column.
     Block margin is deliberately untouched, so vertical rhythm is
     whatever the theme already gives a card. */
  margin-inline: 0;
}

.contextual-page .article-content .kg-embed-card iframe {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
}


/* ------------------------------------------------------------
   FIX 2 · Legacy feature images
   The header is a two-column grid: copy left, feature image
   right at `minmax(300px, 0.78fr)`. The existing rule crops the
   image to `aspect-ratio: 16 / 10`, which on a portrait source
   throws away the top and bottom of the picture and leaves a
   short, wide band beside a tall copy column.

   4 / 5 is the portrait crop the header column was drawn for.
   `object-fit: cover` keeps any source ratio filling the box
   without distortion, and `align-self: start` pins the image to
   the top of the grid row so it aligns with the eyebrow rather
   than floating against a taller copy column.

   WHERE THE 750px ACTUALLY LIVES — measured, not assumed.
   `editorial-page.hbs` writes `width="1200" height="750"` onto
   EVERY contextual feature image, whatever the source ratio is.
   Because the height is specified, the existing
   `aspect-ratio: 16 / 10` rule never applies — aspect-ratio is
   ignored when the other dimension is not auto. So the live
   behaviour is not a 16:10 crop at all: it is
   `width: 100%; height: 750px`, a 750px-tall band at every
   viewport, on every Contextual Resource. That is the fixed
   height the brief asks to remove, and `height: auto` is what
   removes it. There is no CSS rule to delete.

   STACKED STATE — see the clause below. 4/5 is right for the
   side column and wrong once the header is one column, where a
   full-width 4:5 crop measures 969px tall at 834px. Recorded as
   a deviation rather than applied silently.
   ------------------------------------------------------------ */

.contextual-page-header__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  align-self: start;
}


/* ------------------------------------------------------------
   WHAT IS DELIBERATELY NOT TOUCHED
   - `.contextual-page--text-led` — a Resource with no feature
     image already collapses to a single reading column. Neither
     fix applies to it: there is no image, and the embed rules are
     scoped to `.article-content`, which is unchanged.
   - The 1020px rule that drops the header to one column.
   - The 560px rule that removes the image's border radius.
   - Every other `.contextual-page-header*` declaration.
   ------------------------------------------------------------ */


/* ------------------------------------------------------------
   FIX 2a · The stacked header — DEV-39, measured
   Below 1021px the theme collapses `.contextual-page-header` to
   a single column, so the image stops being a side column and
   becomes a full-width band. A 4:5 crop there measures
   **776 × 969px at 834px** and **341 × 427px at 390px** — at
   tablet width that is taller than the copy it accompanies and
   taller than the 750px band the fix was written to remove.

   So the portrait crop is scoped to the two-column header, and
   the stacked header takes a landscape crop with the same
   `height: auto` neutralising the `height="750"` attribute.
   Measured after: **776 × 485px at 834px**, **341 × 213px at
   390px** — better than the live behaviour at every width, and
   balanced against the copy at all three.

   This clause is NOT in the supplied fix. It is applied because
   the supplied fix regresses the tablet state it was tested
   against, and it is recorded as DEV-39 in 25 v13 so the
   decision is visible rather than buried in a stylesheet.
   ------------------------------------------------------------ */

@media (max-width: 1020px) {
  .contextual-page-header__image {
    aspect-ratio: 16 / 10;
  }
}