/*! SALAMANDRA cards — container-driven templates. The grid COLUMN is the — copied verbatim from the demo's app.css lines 1530–1927 (commit 7df0d35). Phase 1 of demo-port: do not retype values here. */

.sala-column{container-type:inline-size;container-name:card;}

/* --- shared card primitives (Figma card/label, card/meta, card/lockup) --- */
.card-label{display:inline-block;padding:var(--sp-card-label-py) var(--sp-card-label-px);background:var(--bg-component-card-label);border-bottom:var(--bw-card-label) solid var(--border-normal);border-radius:var(--radius-default);color:var(--content-label);}
/* meta row keeps the Figma child order (date · divider · byline, avatar at the
   end), so the row itself is LTR and Hebrew fragments self-isolate */
.card-lockup{display:flex;direction:ltr;align-items:center;justify-content:center;gap:var(--sp-tight);}
.card-meta{display:flex;direction:ltr;align-items:center;}
.card-meta .card-meta__date{color:var(--content-date);}
.card-meta .card-meta__divider{font:var(--ts-icon-xs);color:var(--content-primary);}
.card-meta .card-meta__byline{direction:rtl;unicode-bidi:isolate;color:var(--content-byline);}
.card-avatar{flex:0 0 auto;border-radius:50%;}
.card-avatar img{display:block;width:40px;height:40px;border-radius:50%;object-fit:cover;}
/* the whole card is a link; no hover styling until Figma defines it */
.card-link{display:block;text-decoration:none;}
/* ink on media is ALWAYS the dark-context resolution (the mask is always
   black): the -inverse tokens under light theme, the regular ones under dark.
   The swap is defined ON THE THEME SCOPES, never as an any-dark-ancestor
   selector on the card: the tokens it swaps between resolve at the NEAREST
   [data-theme] scope, so the swap must be decided at that same scope — or a
   dark page over a theme-locked light block answers the two questions
   differently and paints dark ink on a photo (the bug Ronen caught
   2026-08-05). */
[data-theme="light"]{--ink-on-media:var(--content-primary-inverse);--ink2-on-media:var(--content-secondary-inverse);--ink3-on-media:var(--content-tertiary-inverse);--byline-on-media:var(--content-byline-inverse);--label-bg-on-media:var(--bg-component-card-label-inverse);--label-ink-on-media:var(--content-label-inverse);--label-border-on-media:var(--border-normal-inverse);}
[data-theme="dark"]{--ink-on-media:var(--content-primary);--ink2-on-media:var(--content-secondary);--ink3-on-media:var(--content-tertiary);--byline-on-media:var(--content-byline);--label-bg-on-media:var(--bg-component-card-label);--label-ink-on-media:var(--content-label);--label-border-on-media:var(--border-normal);}


/* --- card/news-large — one DOM for every width -----------------------
   hierarchy A: <280 display/sm, no underline, no author image ·
   ≥280 display/md + underline + author image (1-1 media) · ≥480 media
   16-9 + display/lg · ≥768 display/xl · ≥1024 label+headline overlay the
   media bottom on the hero-bottom mask (padding 30, display/2xl)
   hierarchy B: <240 headline/sm, no underline, no author image ·
   ≥240 display/md + underline + author image · ≥480 display/lg + 16-9 (FINAL) */
.card-news{max-width:var(--maxw-news-lg);border-radius:var(--radius-default);}
.card-news--large{position:relative;display:grid;grid-template-columns:100%;text-align:center;}
.card-news--large .card-news__media{grid-row:1;grid-column:1;aspect-ratio:1/1;border-radius:var(--radius-card-media);overflow:hidden;}
.card-news--large .card-news__media img{display:block;width:100%;height:100%;object-fit:cover;}
.card-news--large .card-news__head{grid-row:2;grid-column:1;display:flex;flex-direction:column;align-items:center;gap:var(--sp-tight);margin-block-start:var(--sp-normal);}
.card-news--large .card-news__headline{margin:0;max-width:var(--maxw-article-top-hero);color:var(--content-primary);font:var(--ts-display-sm);letter-spacing:var(--ts-display-sm-ls);}
.card-news--large .card-news__foot{grid-row:3;grid-column:1;display:flex;flex-direction:column;align-items:center;gap:var(--sp-tight);margin-block-start:var(--sp-tight);}/* client 2026-08-26 (Shuki + Itamar): the card underline ran to 84 characters
   per line on feature-center at 1440 — outside the 45-75 readable band. It was
   borrowing the article hero's 944; it now has its own measure, max-width/underline
   = 720. The headlines beside it deliberately keep the hero's width. */


.card-news--large .card-news__underline{display:none;margin:0;max-width:var(--maxw-underline);color:var(--content-secondary);}
.card-news--large .card-avatar{display:none;}
[data-hierarchy="b"] .card-news--large .card-news__headline{font:var(--ts-headline-sm);letter-spacing:var(--ts-headline-sm-ls);}
@container card (min-width:240px){/* row-reverse under RTL renders the DOM-first media on the LEFT, matching
     the Figma layer order. Ronen's rule: content exactly one third, media
     two thirds, no minimum — the ratio holds until the layout breaks
     back to a single column. B reaches the row first, at 540 */

  [data-hierarchy="b"] .card-news--large .card-news__headline{font:var(--ts-display-md);letter-spacing:var(--ts-display-md-ls);}
  [data-hierarchy="b"] .card-news--large .card-news__underline{display:block;}
  [data-hierarchy="b"] .card-news--large .card-avatar{display:block;}
}
@container card (min-width:280px){
  [data-hierarchy="a"] .card-news--large .card-news__headline{font:var(--ts-display-md);letter-spacing:var(--ts-display-md-ls);}
  [data-hierarchy="a"] .card-news--large .card-news__underline{display:block;}
  [data-hierarchy="a"] .card-news--large .card-avatar{display:block;}
}
@container card (min-width:480px){
  .card-news--large .card-news__media{aspect-ratio:16/9;}
  [data-hierarchy="a"] .card-news--large .card-news__headline,
[data-hierarchy="b"] .card-news--large .card-news__headline{font:var(--ts-display-lg);letter-spacing:var(--ts-display-lg-ls);}
}
@container card (min-width:768px){
  [data-hierarchy="a"] .card-news--large .card-news__headline{font:var(--ts-display-xl);letter-spacing:var(--ts-display-xl-ls);}
}
@container card (min-width:1024px){/* the mask sits in the media's grid cell as a SIBLING, so it must repeat
     the media's bottom corners itself — otherwise the gradient squares off
     the card's bottom edge */

  
  [data-hierarchy="a"] .card-news--large .card-news__head{grid-row:1;grid-column:1;align-self:end;z-index:1;margin-block-start:0;padding:var(--sp-loose);background:linear-gradient(var(--bg-alpha-mask-0), var(--bg-alpha-mask-100));border-end-start-radius:var(--radius-card-media);border-end-end-radius:var(--radius-card-media);}
  [data-hierarchy="a"] .card-news--large .card-news__foot{margin-block-start:var(--sp-normal);}
  [data-hierarchy="a"] .card-news--large .card-news__headline{color:var(--ink-on-media);font:var(--ts-display-2xl);letter-spacing:var(--ts-display-2xl-ls);}
  [data-hierarchy="a"] .card-news--large .card-news__head .card-label{background:var(--label-bg-on-media);border-color:var(--label-border-on-media);color:var(--label-ink-on-media);}
}


/* --- card/news-regular — one DOM for every width ---------------------
   hierarchy A: <280 display/xs, no underline, no author image ·
   ≥280 stacked, display/sm + underline + author image · ≥540 display/md ·
   ≥768 horizontal row — content exactly one third, media two thirds, no
   minimum · ≥1024 card gap 40 · ≥1160 display/lg
   hierarchy B: NEVER shows the underline · <240 headline/sm, no author
   image, gap 10 · ≥240 stacked display/xs + author image, gap 20 ·
   ≥540 horizontal row (same 1/3 : 2/3 ratio), display/sm — FINAL
   media is 16-9 at every width; text start-aligned (side variant) */
.card-news--regular{display:flex;flex-direction:column;gap:var(--sp-normal);}
.card-news--regular .card-news__media{aspect-ratio:16/9;border-radius:var(--radius-card-media);overflow:hidden;}
.card-news--regular .card-news__media img{display:block;width:100%;height:100%;object-fit:cover;}
.card-news--regular .card-news__content{display:flex;flex-direction:column;gap:var(--sp-tight);align-items:flex-start;}
.card-news--regular .card-news__head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-tight);}
.card-news--regular .card-news__headline{margin:0;max-width:var(--maxw-article-top-hero);color:var(--content-primary);font:var(--ts-display-xs);letter-spacing:var(--ts-display-xs-ls);}
.card-news--regular .card-news__foot{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-tight);}
.card-news--regular .card-news__underline{display:none;margin:0;max-width:var(--maxw-underline);color:var(--content-secondary);}
.card-news--regular .card-avatar{display:none;}
.card-news--regular .card-lockup{justify-content:flex-start;}
[data-hierarchy="b"] .card-news--regular{gap:var(--sp-tight);}
[data-hierarchy="b"] .card-news--regular .card-news__headline{font:var(--ts-headline-sm);letter-spacing:var(--ts-headline-sm-ls);}
@container card (min-width:240px){
  [data-hierarchy="b"] .card-news--regular{gap:var(--sp-normal);}
  [data-hierarchy="b"] .card-news--regular .card-news__headline{font:var(--ts-display-xs);letter-spacing:var(--ts-display-xs-ls);}
  [data-hierarchy="b"] .card-news--regular .card-avatar{display:block;}
}
@container card (min-width:280px){
  [data-hierarchy="a"] .card-news--regular .card-news__headline{font:var(--ts-display-sm);letter-spacing:var(--ts-display-sm-ls);}
  [data-hierarchy="a"] .card-news--regular .card-news__underline{display:block;}
  [data-hierarchy="a"] .card-news--regular .card-avatar{display:block;}
}
@container card (min-width:540px){
  
  [data-hierarchy="a"] .card-news--regular .card-news__headline{font:var(--ts-display-md);letter-spacing:var(--ts-display-md-ls);}
  [data-hierarchy="b"] .card-news--regular{flex-direction:row-reverse;align-items:flex-start;}
  [data-hierarchy="b"] .card-news--regular .card-news__media{flex:2 1 0;}
  [data-hierarchy="b"] .card-news--regular .card-news__content{flex:1 1 0;}
  [data-hierarchy="b"] .card-news--regular .card-news__headline{font:var(--ts-display-sm);letter-spacing:var(--ts-display-sm-ls);}
}
@container card (min-width:768px){
  [data-hierarchy="a"] .card-news--regular{flex-direction:row-reverse;align-items:flex-start;}
  [data-hierarchy="a"] .card-news--regular .card-news__media{flex:2 1 0;}
  [data-hierarchy="a"] .card-news--regular .card-news__content{flex:1 1 0;}
}
@container card (min-width:1024px){
  [data-hierarchy="a"] .card-news--regular{gap:var(--sp-x-loose);}
}
@container card (min-width:1160px){
  [data-hierarchy="a"] .card-news--regular .card-news__headline{font:var(--ts-display-lg);letter-spacing:var(--ts-display-lg-ls);}
}


/* --- card/news-small — one DOM for every width -----------------------
   both hierarchies: <300 stacked (16-9 media on top) · ≥300 row 50:50
   with 1-1 media · ≥480 row with fixed 16-9 media (clamp 180-400) and
   headline/md — B stops here (and never shows the author image)
   hierarchy A continues: ≥840 display/sm · ≥1024 display/md + underline,
   gap 40 · ≥1160 display/lg
   content on the LEFT, media on the RIGHT (Figma order), text start-aligned */
.card-news--small{display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-normal);}
.card-news--small .card-news__media{flex:0 0 auto;aspect-ratio:16/9;border-radius:var(--radius-card-media);overflow:hidden;}
.card-news--small .card-news__media img{display:block;width:100%;height:100%;object-fit:cover;}
.card-news--small .card-news__content{flex:1 1 0;display:flex;flex-direction:column;gap:var(--sp-tight);align-items:flex-start;}
.card-news--small .card-news__head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-tight);}
.card-news--small .card-news__headline{margin:0;max-width:var(--maxw-article-top-hero);color:var(--content-primary);font:var(--ts-headline-sm);letter-spacing:var(--ts-headline-sm-ls);}
.card-news--small .card-news__foot{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-tight);}
.card-news--small .card-news__underline{display:none;margin:0;max-width:var(--maxw-underline);color:var(--content-secondary);}
.card-news--small .card-avatar{display:none;}
.card-news--small .card-lockup{justify-content:flex-start;}
@container card (min-width:300px){
  .card-news--small{flex-direction:row;align-items:flex-start;}
  .card-news--small .card-news__media{flex:1 1 0;aspect-ratio:1/1;}
}
@container card (min-width:480px){/* Ronen's ratio rule: media one third, content two thirds */

  
  .card-news--small .card-news__media,
[data-hierarchy="b"] .card-news--small .card-news__media{flex:1 1 0;aspect-ratio:16/9;}
  .card-news--small .card-news__content{flex:2 1 0;}
  .card-news--small .card-news__headline{font:var(--ts-headline-md);letter-spacing:var(--ts-headline-md-ls);}
  [data-hierarchy="a"] .card-news--small .card-avatar{display:block;}
}
@container card (min-width:840px){
  [data-hierarchy="a"] .card-news--small .card-news__headline{font:var(--ts-display-sm);letter-spacing:var(--ts-display-sm-ls);}
}
@container card (min-width:1024px){
  [data-hierarchy="a"] .card-news--small{gap:var(--sp-x-loose);}
  [data-hierarchy="a"] .card-news--small .card-news__headline{font:var(--ts-display-md);letter-spacing:var(--ts-display-md-ls);}
  [data-hierarchy="a"] .card-news--small .card-news__underline{display:block;}
}
@container card (min-width:1160px){
  [data-hierarchy="a"] .card-news--small .card-news__headline{font:var(--ts-display-lg);letter-spacing:var(--ts-display-lg-ls);}
}

/* --- card/opinion — one DOM for every width --------------------------
   tinted card (bg/component/card-opinion), centered content, author row
   (70px ringed avatar over the author/label chip), date only — no byline.
   hierarchy A: <280 stacked, display/xs, no underline · ≥280 display/md
   + underline · ≥840 horizontal 50:50 (1-1 media), display/lg, content
   padding 20/40 · ≥1024 display/xl
   hierarchy B: <220 stacked, headline/sm, no avatar, side padding 10 ·
   ≥220 display/sm, avatar + padding 20 · ≥480 horizontal 50:50 (FINAL);
   B never shows the underline. Media radius is radius/none in every state */
.card-opinion{display:flex;flex-direction:column;background:var(--bg-component-card-opinion);max-width:var(--maxw-news-lg);border-radius:var(--radius-default);overflow:hidden;text-align:center;}
/* the editor may tint a card from the same picker tokens a block uses. The
   tint lands on the SURFACE, not on the custom-element host — the host is a
   bare box with no radius and no width cap of its own. data-theme is stamped
   on the host from the colour that actually rendered (components.js), exactly
   as a block does it, so a dark tint never swallows the card's own text. */
/* Opinion cards end at the same line — but ONLY in a row that is entirely
   theirs. Stretching one wherever it stood made it grow to match whatever tall
   neighbour it sat beside, which left a lot of empty tint inside a card: the
   equalisation is a property of the ROW, not of the card. So the grid has to
   be one of the all-b presets AND hold nothing in its columns except opinion
   cards; a mixed row keeps its ragged bottoms, because there is nothing there
   to equalise with. The editor's own drop slot is exempt, or the row would
   un-equalise for the length of a drag.

   Written as "has one, and has nothing else" rather than the shorter "has no
   column without one" — :has() may not be nested inside :has(), and that form
   parses as invalid and silently does nothing at all. */
.grid-b-b:has(> .column-b > ip-card-opinion):not(:has(> .column-b > :not(ip-card-opinion, .ed-slot))) > .column-b > ip-card-opinion,
.grid-b-b-b:has(> .column-b > ip-card-opinion):not(:has(> .column-b > :not(ip-card-opinion, .ed-slot))) > .column-b > ip-card-opinion,
.grid-b-b-b-b:has(> .column-b > ip-card-opinion):not(:has(> .column-b > :not(ip-card-opinion, .ed-slot))) > .column-b > ip-card-opinion,
.grid-b-b-b-b-b-b:has(> .column-b > ip-card-opinion):not(:has(> .column-b > :not(ip-card-opinion, .ed-slot))) > .column-b > ip-card-opinion{flex:1 0 auto;}
.grid-b-b:has(> .column-b > ip-card-opinion):not(:has(> .column-b > :not(ip-card-opinion, .ed-slot))) > .column-b > ip-card-opinion > article,
.grid-b-b-b:has(> .column-b > ip-card-opinion):not(:has(> .column-b > :not(ip-card-opinion, .ed-slot))) > .column-b > ip-card-opinion > article,
.grid-b-b-b-b:has(> .column-b > ip-card-opinion):not(:has(> .column-b > :not(ip-card-opinion, .ed-slot))) > .column-b > ip-card-opinion > article,
.grid-b-b-b-b-b-b:has(> .column-b > ip-card-opinion):not(:has(> .column-b > :not(ip-card-opinion, .ed-slot))) > .column-b > ip-card-opinion > article,
.grid-b-b:has(> .column-b > ip-card-opinion):not(:has(> .column-b > :not(ip-card-opinion, .ed-slot))) > .column-b > ip-card-opinion .card-opinion,
.grid-b-b-b:has(> .column-b > ip-card-opinion):not(:has(> .column-b > :not(ip-card-opinion, .ed-slot))) > .column-b > ip-card-opinion .card-opinion,
.grid-b-b-b-b:has(> .column-b > ip-card-opinion):not(:has(> .column-b > :not(ip-card-opinion, .ed-slot))) > .column-b > ip-card-opinion .card-opinion,
.grid-b-b-b-b-b-b:has(> .column-b > ip-card-opinion):not(:has(> .column-b > :not(ip-card-opinion, .ed-slot))) > .column-b > ip-card-opinion .card-opinion{height:100%;}

ip-card-opinion[data-bg="special-1"] .card-opinion{background:var(--bg-picker-special-1);}
ip-card-opinion[data-bg="special-2"] .card-opinion{background:var(--bg-picker-special-2);}
ip-card-opinion[data-bg="special-3"] .card-opinion{background:var(--bg-picker-special-3);}
ip-card-opinion[data-bg="special-4"] .card-opinion{background:var(--bg-picker-special-4);}
.card-opinion .card-opinion__media{flex:0 0 auto;aspect-ratio:16/9;overflow:hidden;}
.card-opinion .card-opinion__media img{display:block;width:100%;height:100%;object-fit:cover;}
.card-opinion .card-opinion__content{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:var(--sp-tight);padding:var(--sp-normal);}
.card-opinion .card-opinion__author{display:flex;flex-direction:column;align-items:center;gap:var(--sp-x-tight);}
.card-opinion .card-opinion__author .card-avatar img{width:70px;height:70px;}/* the author/label chip keeps the Figma order: author · slash · label */


.card-opinion .card-opinion__author .card-label{display:flex;direction:ltr;align-items:center;gap:var(--sp-x-tight);}
.card-opinion .card-opinion__author .card-opinion__name{direction:rtl;unicode-bidi:isolate;}
.card-opinion .card-opinion__author .card-opinion__slash{font:var(--ts-text-regular-2xs);}
.card-opinion .card-opinion__author .card-opinion__label{direction:rtl;unicode-bidi:isolate;}
.card-opinion .card-opinion__headline{margin:0;max-width:var(--maxw-article-top-hero);color:var(--content-primary);font:var(--ts-display-xs);letter-spacing:var(--ts-display-xs-ls);}
.card-opinion .card-opinion__underline{display:none;margin:0;max-width:var(--maxw-underline);color:var(--content-secondary);}
.card-opinion .card-meta__date{color:var(--content-date);}
[data-hierarchy="b"] .card-opinion .card-opinion__content{padding-block:var(--sp-normal);padding-inline:var(--sp-tight);}
[data-hierarchy="b"] .card-opinion .card-opinion__author .card-avatar{display:none;}
[data-hierarchy="b"] .card-opinion .card-opinion__headline{font:var(--ts-headline-sm);letter-spacing:var(--ts-headline-sm-ls);}
@container card (min-width:220px){
  [data-hierarchy="b"] .card-opinion .card-opinion__content{padding:var(--sp-normal);}
  [data-hierarchy="b"] .card-opinion .card-opinion__author .card-avatar{display:block;}
  [data-hierarchy="b"] .card-opinion .card-opinion__headline{font:var(--ts-display-sm);letter-spacing:var(--ts-display-sm-ls);}
}
@container card (min-width:280px){
  [data-hierarchy="a"] .card-opinion .card-opinion__headline{font:var(--ts-display-md);letter-spacing:var(--ts-display-md-ls);}
  [data-hierarchy="a"] .card-opinion .card-opinion__underline{display:block;}
}
@container card (min-width:480px){
  [data-hierarchy="b"] .card-opinion{flex-direction:row;align-items:center;}
  [data-hierarchy="b"] .card-opinion .card-opinion__media{flex:0 0 50%;aspect-ratio:1/1;}
  [data-hierarchy="b"] .card-opinion .card-opinion__content{flex:0 0 50%;padding-block:var(--sp-normal);padding-inline:var(--sp-x-loose);}
}
@container card (min-width:840px){
  [data-hierarchy="a"] .card-opinion{flex-direction:row;align-items:center;}
  [data-hierarchy="a"] .card-opinion .card-opinion__media{flex:0 0 50%;aspect-ratio:1/1;}
  [data-hierarchy="a"] .card-opinion .card-opinion__content{flex:0 0 50%;padding-block:var(--sp-normal);padding-inline:var(--sp-x-loose);}
  [data-hierarchy="a"] .card-opinion .card-opinion__headline{font:var(--ts-display-lg);letter-spacing:var(--ts-display-lg-ls);}
}
@container card (min-width:1024px){
  [data-hierarchy="a"] .card-opinion .card-opinion__headline{font:var(--ts-display-xl);letter-spacing:var(--ts-display-xl-ls);}
}

/* --- card/feature base (.card-feature) -------------------------------
   Shared implementation base for card/feature-offset + card/feature-center
   (an implementation class, not a Figma component — see SALAMANDRA.md).
   The media is the card; text overlays it on a mask gradient with the
   dark-pinned ink. Shared ladder:
   <260 poster (label+headline overlaid on the media; meta below on a solid
   mask-100 strip, dark mode; A media 9-16 · B media 3-4 with the overlay
   10 above the poster edge; A display/xs · B headline/sm; no underline,
   no author image) · ≥260 A media 2-3 (B stays 3-4), A display/lg ·
   B display/md, underline (A only, on the strip) + author image return
   · ≥480 card 1-1, ALL content moves
   onto the image bottom (hero-bottom) — B FINAL · A continues: ≥840 card
   16-9 · ≥1024 display/xl
   THE UNDERLINE IS HIERARCHY A ONLY — B never shows it, at any width */
.card-feature{position:relative;display:grid;grid-template-columns:100%;max-width:var(--maxw-news-lg);border-radius:var(--radius-card);overflow:hidden;}
.card-feature .card-feature__media{grid-row:1;grid-column:1;aspect-ratio:9/16;overflow:hidden;}
.card-feature .card-feature__media img{display:block;width:100%;height:100%;object-fit:cover;}
.card-feature .card-feature__head{grid-row:1;grid-column:1;align-self:end;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-tight);padding-block:var(--sp-x-spacious) var(--sp-normal);padding-inline:var(--sp-normal) var(--sp-x-spacious);background:linear-gradient(var(--bg-alpha-mask-0), var(--bg-alpha-mask-100));}
.card-feature .card-feature__headline{margin:0;max-width:var(--maxw-article-top-hero);color:var(--ink-on-media);font:var(--ts-display-xs);letter-spacing:var(--ts-display-xs-ls);}
.card-feature .card-feature__head .card-label{background:var(--label-bg-on-media);border-color:var(--label-border-on-media);color:var(--label-ink-on-media);}
.card-feature .card-feature__foot{grid-row:2;grid-column:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-tight);padding-block:0 var(--sp-normal);padding-inline:var(--sp-normal);background:var(--bg-alpha-mask-100);}
.card-feature .card-feature__foot .card-meta__date{color:var(--ink3-on-media);}
.card-feature .card-feature__foot .card-meta__divider{color:var(--ink-on-media);}
.card-feature .card-feature__foot .card-meta__byline{color:var(--byline-on-media);}
.card-feature .card-feature__underline{display:none;margin:0;max-width:var(--maxw-underline);color:var(--ink2-on-media);}
.card-feature .card-avatar{display:none;}
.card-feature .card-lockup{justify-content:flex-start;}
[data-hierarchy="b"] .card-feature .card-feature__headline{font:var(--ts-headline-sm);letter-spacing:var(--ts-headline-sm-ls);}/* hierarchy B posters use a 3-4 media (card/media-slot/3-4), not A's 9-16,
   and the overlay sits 10 above the poster edge in the base state */


[data-hierarchy="b"] .card-feature .card-feature__media{aspect-ratio:3/4;}
[data-hierarchy="b"] .card-feature .card-feature__head{padding-block-end:var(--sp-tight);}/* center modifier: everything centered, symmetric padding */


.card-feature--center{text-align:center;}
.card-feature--center .card-feature__head,
.card-feature--center .card-feature__foot{align-items:center;}
.card-feature--center .card-lockup{justify-content:center;}
.card-feature--center .card-feature__head{padding-inline:var(--sp-normal);}
/* A's poster stands less tall from 260: 2-3, not the 9-16 it keeps below that
   (Figma card/feature-offset, the min-260 A instance, 2026-08-03). The band is
   CLOSED on purpose — [data-hierarchy] adds an attribute to the selector, so
   an open-ended rule here would out-specify the plain `.card-feature .card-feature__media`
   reset at 480 and keep a ratio on the media after the card becomes the 1-1
   hero, which is exactly the state that needs the media to fill it */
@container card (min-width:260px) and (max-width:479.98px){
  [data-hierarchy="a"] .card-feature .card-feature__media{aspect-ratio:2/3;}
}
@container card (min-width:260px){
  [data-hierarchy="a"] .card-feature .card-feature__headline{font:var(--ts-display-lg);letter-spacing:var(--ts-display-lg-ls);}
  [data-hierarchy="b"] .card-feature .card-feature__headline{font:var(--ts-display-md);letter-spacing:var(--ts-display-md-ls);}
  [data-hierarchy="a"] .card-feature .card-feature__underline{display:block;}
  [data-hierarchy="b"] .card-feature .card-feature__head{padding-block-end:var(--sp-normal);}
  .card-feature .card-avatar{display:block;}
}
@container card (min-width:480px){
  /* the whole content moves INTO the media: 1-1 card, bottom overlay */
  .card-feature{aspect-ratio:1/1;grid-template-rows:1fr auto auto;}
  .card-feature .card-feature__media,
[data-hierarchy="b"] .card-feature .card-feature__media{grid-row:1 / -1;aspect-ratio:auto;height:100%;border-radius:var(--radius-card-media);}
  .card-feature::before{content:"";grid-row:2 / 4;grid-column:1;z-index:1;background:linear-gradient(var(--bg-alpha-mask-0), var(--bg-alpha-mask-100));}
  .card-feature .card-feature__head{grid-row:2;align-self:auto;padding-block:var(--sp-x-spacious) 0;background:none;}
  [data-hierarchy="b"] .card-feature .card-feature__head{padding-block-end:0;}
  .card-feature .card-feature__foot{grid-row:3;z-index:1;padding-block:var(--sp-tight) var(--sp-normal);padding-inline:var(--sp-normal) var(--sp-x-spacious);background:none;}
  [data-hierarchy="b"] .card-feature--offset .card-feature__foot{padding-block-end:var(--sp-loose);}
  .card-feature--center .card-feature__head{padding-inline:var(--sp-loose);}
  .card-feature--center .card-feature__foot{padding-inline:var(--sp-loose);}
}
@container card (min-width:840px){
  [data-hierarchy="a"] .card-feature{aspect-ratio:16/9;}/* offset: the content column overlays one side at 50%, pinned to the
     bottom; the side gradient is physical to-right — matches the RTL frame */

  
  [data-hierarchy="a"] .card-feature--offset::before{grid-row:1 / -1;width:50%;justify-self:start;background:linear-gradient(to right, var(--bg-alpha-mask-0), var(--bg-alpha-mask-75) 50%, var(--bg-alpha-mask-100));}
  [data-hierarchy="a"] .card-feature--offset .card-feature__head{width:50%;justify-self:start;box-sizing:border-box;padding-block:var(--sp-loose) 0;}
  [data-hierarchy="a"] .card-feature--offset .card-feature__foot{width:50%;justify-self:start;box-sizing:border-box;padding-block:var(--sp-tight) var(--sp-loose);}
  [data-hierarchy="a"] .card-feature--center .card-feature__head{padding-block:var(--sp-loose) 0;padding-inline:var(--sp-normal) var(--sp-x-spacious);}
  [data-hierarchy="a"] .card-feature--center .card-feature__foot{padding-block:var(--sp-tight) var(--sp-loose);padding-inline:var(--sp-normal) var(--sp-x-spacious);}
}
@container card (min-width:1024px){
  [data-hierarchy="a"] .card-feature .card-feature__headline{font:var(--ts-display-xl);letter-spacing:var(--ts-display-xl-ls);}
  [data-hierarchy="a"] .card-feature--center .card-feature__head{padding-inline:var(--sp-normal);}
  [data-hierarchy="a"] .card-feature--center .card-feature__foot{padding-inline:var(--sp-normal);}
}

/* --- grid F (Figma column-f, in the feature-center spec 5449:2492) ----
   The one grid that is not bound by the page width: every other grid stops
   at --maxw-salamandra, F runs from screen edge to screen edge. It holds a
   single item and that item is always a feature card (blocks.js).

   The breakout is measured against the PAGE container, never against the
   viewport. A 100vw rule keeps painting the real window while the editor
   pushes the surface narrower, so the card would hang off the side of the
   canvas. The two halves cancel exactly: the container is centred with
   symmetric padding, so the gap on each side is half the difference between
   the page and the container's content box — which is what the negative
   margin gives back. Correct at every page width, capped or not.

   F's card is hierarchy A's feature ladder with three departures, all of
   them consequences of touching the screen edges:
     no width cap — the page cap is the thing F exists to escape
     square corners at every width (Figma: corner-radius 0 on every state)
     from 840 the height stops coming from a ratio and becomes the screen
     minus the header, so the picture fills the crop it is handed instead of
     being cut to 16-9. Below that the ratios take over again exactly as in
     A: 1-1 from 480, the 2-3 poster from 260, and a 3-4 poster under it —
     3-4 is B's poster, not A's 9-16, which is the one place F's ladder
     names a different crop from the hierarchy it otherwise follows. */
.grid-f{width:100cqw;margin-inline:calc(50% - 50cqw);}
.grid-f > .column-f{grid-column:1 / -1;}
.column-f .card-feature{max-width:none;border-radius:var(--radius-none);}
.column-f .card-feature .card-feature__media{border-radius:var(--radius-none);}
/* the band is CLOSED for the same reason A's 2-3 rule is: an open-ended
   rule here carries the same weight as the plain `.card-feature .card-feature__media`
   reset at 480 and would keep a ratio on the media after the card becomes
   the hero, which is exactly the state that needs the media to fill it */
@container card (max-width:259.98px){
  .column-f .card-feature .card-feature__media{aspect-ratio:3/4;}
  .column-f .card-feature .card-feature__headline{font:var(--ts-headline-sm);letter-spacing:var(--ts-headline-sm-ls);}
}
/* --f-hero-h IS THE ESCAPE HATCH, and it is not decoration. A viewport-
   relative height is only safe where the viewport is given. In the editor's
   page map the twin's height is set FROM its own content, so a card measured
   against that viewport feeds straight back into it — taller card, taller
   content, taller frame, taller card, with no fixed point. The map hands the
   hero the real page's figure as a plain number instead, which cannot loop
   (editor.js, syncMapHeroHeight). Anywhere the variable is unset — the live
   page, the library bench — the screen answers for itself. */
@container card (min-width:840px){
  .column-f .card-feature{aspect-ratio:auto;height:var(--f-hero-h, calc(100dvh - var(--header-h, 0px)));}
  .column-f .card-feature .card-feature__headline{font:var(--ts-display-xl);letter-spacing:var(--ts-display-xl-ls);}
}
@container card (min-width:1024px){
  .column-f .card-feature .card-feature__headline{font:var(--ts-display-2xl);letter-spacing:var(--ts-display-2xl-ls);}
}
/* A hero that opens a block opens the PAGE. The block's top padding would
   push a full-bleed picture down off the very edge it exists to reach, so a
   block that starts with F starts flush. */
.grid-block:has(> .grid-container > .grid-f:first-child){padding-block-start:0;}