/*! SALAMANDRA layout grids — page-level. The spec is viewport-driven; the — copied verbatim from the demo's app.css lines 1928–2076 (commit 7df0d35). Phase 1 of demo-port: do not retype values here. */

.page-surface{container-type:inline-size;container-name:page;}
.grid-container{box-sizing:content-box;max-width:var(--maxw-salamandra);margin-inline:auto;padding-inline:var(--grid-margin-mobile);}
/* a block spans the FULL page width (its background bleeds edge to edge);
   the 1280 constraint lives on the grid-container inside it */
/* 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{padding-block:var(--grid-block-y-padding-mobile);}
/* two stacked blocks in the SAME rendered colour fuse into one surface: the
   second drops its padding-start so the shared colour runs continuous. The
   class is derived (components.js compares rendered backgrounds) — never
   authored, never published */
.grid-block.is-merged{padding-block-start:0;}
/* every block has a background — paper by default, which is why a block with
   no colour of its own can still be switched to a different theme. Explicit
   colours are picker TOKENS only, so every brand and both themes stay right.
   The theme a colour needs is resolved in components.js */
.grid-block{background:var(--surface, var(--bg-basic-paper));}
.grid-block[data-theme]{background:var(--bg-basic-paper);}
.grid-block[data-bg="special-1"]{background:var(--bg-picker-special-1);}
.grid-block[data-bg="special-2"]{background:var(--bg-picker-special-2);}
.grid-block[data-bg="special-3"]{background:var(--bg-picker-special-3);}
.grid-block[data-bg="special-4"]{background:var(--bg-picker-special-4);}
.grid-block[data-bg]{color:var(--content-primary);}
.grid-block > .grid-container{display:flex;flex-direction:column;gap:var(--grid-row-gap-x-loose);}
/* the row gap is what sits ABOVE a columns-break divider, and the padding
   below it is --grid-row-gap-normal — so the gap has to be the SAME token,
   or one line ends up with two different numbers around it. It used to be
   --grid-margin-mobile, which is the page's SIDE MARGIN borrowed as a row
   gap: 20 above, 30 below, on every stacked boundary. (Ronen 2026-08-05) */
.grid{display:grid;grid-template-columns:100%;row-gap:var(--grid-row-gap-normal);column-gap:var(--grid-column-gap-normal);}
/* the card hosts are plain block elements. This lives HERE, not as an inline
   style injected by the component, because the editor persists the page's HTML
   verbatim — runtime styling must never end up in published markup */
ip-card-news-large,
ip-card-news-regular,
ip-card-news-small,
ip-card-opinion,
ip-card-feature-offset,
ip-card-feature-center{display:block;width:100%;}
/* a grid column IS the card container — the whole card system keys off it */
/* --divider-ink is resolved HERE, on the column, so a divider drawn above a
   module never takes its colour from that module's own theme: a promotion
   stamped dark resolved border/hairline to near-white and the line vanished
   against the light page above it (Ronen 2026-08-06). A line between two
   things belongs to neither of them — not its geometry, not its colour. */
.grid .column-a,
.grid .column-b{display:flex;flex-direction:column;gap:var(--grid-row-gap-normal);min-width:0;container-type:inline-size;container-name:card;--divider-ink:var(--border-hairline);}
/* THE THREE DIVIDERS, one Figma component each (MASTERS, 2026-08-03). The
   split exists so a change to one role can never reach another:
     grid-divider -> basic-line/normal    solid border/normal    .grid-divider
     item-divider -> basic-line/hairline  solid border/hairline  the rules here
     list-divider -> basic-line/dotted    dotted border/hairline .feed-column ...
   stacked items in one column are separated by the ITEM divider, with
   --grid-row-gap-normal on each side of it */
.grid .column-a > * + *,
.grid .column-b > * + *{border-block-start:var(--bw-thin) solid var(--border-hairline);padding-block-start:var(--grid-row-gap-normal);}
/* COLUMNS-BREAK RULE (Figma `columns-break`): when a grid's columns fall
   one under the other, the boundary between COLUMNS behaves exactly like
   the boundary between items — the same ITEM divider with the same
   20px on each side. Cleared as soon as the columns sit side by side. */
.grid > * + *{border-block-start:var(--bw-thin) solid var(--border-hairline);padding-block-start:var(--grid-row-gap-normal);}
.grid-a > .column-a{grid-column:1 / -1;}
.grid-divider{border:0;border-top:var(--bw-thin) solid var(--border-normal);margin:0;}
/* SECTION TITLE module (Figma `section-title`, 5606:5099) — a row with the
   title at the start and an OPTIONAL "see more" link at the end. Three sizes;
   the editor picks the default from where it lands: column → sm, grid → md,
   block → lg. A bare <h2 class="section-title">text</h2> still renders right. */
.section-title{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-normal);margin:0;color:var(--content-section-title);font:var(--ts-section-md);}
.section-title--lg{font:var(--ts-section-lg);}
.section-title--sm{font:var(--ts-section-sm);}
.section-title-text{margin:0;min-width:0;}
/* the see-more link: label then arrow, so RTL puts the arrow on the outside */
.section-more{display:inline-flex;align-items:center;gap:var(--sp-x-tight);flex:none;color:var(--content-primary);text-decoration:none;font:var(--ts-label-md);}
.section-more i{font:var(--ts-icon-sm);}
/* a title INSIDE a grid spans it and sits above the columns */
.grid > .section-title{grid-column:1 / -1;}
/* a title gets spacing only — never a divider line. This has to be said at
   BOTH levels: a grid-level title is a child of .grid, so the columns-break
   rule was drawing a line directly under it whenever the columns stacked. */
.grid > .section-title + *,
.grid .column-a > .section-title + *,
.grid .column-b > .section-title + *{border-block-start:0;padding-block-start:0;}
@container page (min-width:768px){
  .grid-container{padding-inline:var(--grid-margin-tablet);}
  .grid{grid-template-columns:repeat(9, 1fr);}
  /* columns are side by side again — no column-break divider */
  .grid > * + *{border-block-start:0;padding-block-start:0;}
  .grid-b-a > .column-a{grid-column:span 6;}
  .grid-b-a > .column-b{grid-column:span 3;}
  .grid-b-b-b > .column-b{grid-column:span 3;}
  /* grid-b-a-b at tablet: A takes a row of its own and the two B columns
     split the row below it. A therefore sits ABOVE them, so the
     columns-break divider applies to both (Ronen: the rule stands) */
  .grid-b-a-b{grid-template-columns:repeat(2, 1fr);}
  .grid-b-a-b > .column-a{grid-row:1;grid-column:1 / -1;}
  .grid-b-a-b > .column-b-r{grid-row:2;grid-column:1;}
  .grid-b-a-b > .column-b-l{grid-row:2;grid-column:2;}
  .grid-b-a-b > .column-b{border-block-start:var(--bw-thin) solid var(--border-hairline);padding-block-start:var(--grid-row-gap-normal);}
  /* a section title inside this preset takes row 1, so its pinned rows shift */
  .grid-b-a-b:has(> .section-title) > .column-a{grid-row:2;}
  .grid-b-a-b:has(> .section-title) > .column-b-r,
.grid-b-a-b:has(> .section-title) > .column-b-l{grid-row:3;}
  /* four and six B columns wrap at tablet — 2 per row and 3 per row. The
     rows below the first sit under other columns, so they carry the
     columns-break divider (same rule as grid-b-a-b's tablet state) */
  .grid-b-b-b-b{grid-template-columns:repeat(2, 1fr);}
  .grid-b-b-b-b > .column-b:nth-child(n+3),
.grid-b-b-b-b-b-b > .column-b:nth-child(n+4){border-block-start:var(--bw-thin) solid var(--border-hairline);padding-block-start:var(--grid-row-gap-normal);}
  .grid-b-b-b-b-b-b > .column-b{grid-column:span 3;}
}
@container page (min-width:768px) and (max-width:1023px){
  .grid-b-b{grid-template-columns:repeat(2, 1fr);}
}
@container page (min-width:1024px){
  .grid-container{padding-inline:var(--grid-margin-desktop);}
  .grid-block{padding-block:var(--grid-block-y-padding-desktop);}
  .grid{grid-template-columns:repeat(12, 1fr);column-gap:var(--grid-column-gap-x-loose);}
  .grid-b-a > .column-a{grid-column:span 8;}
  .grid-b-a > .column-b{grid-column:span 4;}
  .grid-b-b > .column-b{grid-column:span 6;}
  .grid-b-b-b > .column-b{grid-column:span 4;}
  /* grid-b-a-b: the three columns line up — B · A · B. Explicit placement
     (not source order), so the DOM can stay in stacking order: under RTL
     column 1 is the RIGHT edge, so b-r opens the row and b-l closes it */
  .grid-b-a-b{grid-template-columns:repeat(12, 1fr);}
  .grid-b-a-b > .column-b-r{grid-row:1;grid-column:1 / span 3;}
  .grid-b-a-b > .column-a{grid-column:4 / span 6;}
  .grid-b-a-b > .column-b-l{grid-row:1;grid-column:10 / span 3;}
  .grid-b-a-b:has(> .section-title) > .column-b-r,
.grid-b-a-b:has(> .section-title) > .column-a,
.grid-b-a-b:has(> .section-title) > .column-b-l{grid-row:2;}
  .grid-b-a-b > .column-b{border-block-start:0;padding-block-start:0;}
  /* one row again: 4 columns = span 3 each, 6 columns = span 2 each */
  .grid-b-b-b-b{grid-template-columns:repeat(12, 1fr);}
  .grid-b-b-b-b > .column-b{grid-column:span 3;}
  .grid-b-b-b-b-b-b > .column-b{grid-column:span 2;}
  /* the reset must repeat the tablet selector, pseudo-class and all, or the
     wrapped-row divider keeps winning on specificity */
  .grid-b-b-b-b > .column-b:nth-child(n+3),
.grid-b-b-b-b-b-b > .column-b:nth-child(n+4){border-block-start:0;padding-block-start:0;}
}