/*! FLASH TICKER (Figma 5716:11228 · item card/feeder-item Property 1=flash) — — copied verbatim from the demo's app.css lines 2153–2289 (commit 7df0d35). Phase 1 of demo-port: do not retype values here. */

.flash-ticker{display:flex;align-items:flex-end;gap:var(--sp-x-tight);min-width:0;padding:var(--sp-micro) var(--sp-tight) var(--sp-x-tight);border-radius:var(--radius-pill);background:var(--bg-signal-marker);color:var(--content-primary);}
/* label and pause control travel together at the reading start */
.flash-title{flex:none;order:-1;display:flex;align-items:center;gap:var(--sp-x-tight);}
.flash-label{flex:none;}
.flash-window{flex:1;min-width:0;overflow:hidden;padding-inline-end:var(--sp-micro);}
.flash-run{display:flex;width:max-content;gap:var(--sp-snug);animation:flash-run 40s linear infinite;}
.flash-run-copy{display:flex;gap:var(--sp-snug);}
.flash-ticker.is-paused .flash-run{animation-play-state:paused;}
@media (prefers-reduced-motion:reduce){ .flash-run{animation:none;} }
/* the headlines move toward the reading start; the copy trailing the run makes
   the wrap invisible */
@keyframes flash-run{ from{transform:translateX(0);} to{transform:translateX(50%);} }
/* flex-END is the LEFT under RTL — the date belongs at the reading START,
   which is flex-start here (Figma puts it at the item's right edge). This
   is the documented trap; never read start/end as left/right. */
/* the rule sits at each item's reading START — before every item, the first
   one included, so the run is also separated from the label beside it */
.flash-item{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:0;padding-inline-start:var(--sp-snug);border-inline-start:var(--bw-thin) solid var(--border-strong);}
.flash-date{color:var(--content-breaking);}
.flash-headline{white-space:nowrap;}
.flash-toggle{flex:none;width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;font-family:var(--typo-font-icon);font-size:var(--typo-icon-md-font-size);line-height:var(--typo-icon-md-line-height);}
.flash-toggle::before{content:"\e05f";}                 /* pause-circle-fill */
.flash-ticker.is-paused .flash-toggle::before{content:"\e061";}  /* play-circle-fill */


/*! FEEDER (Figma 5620:4221) — a stream of articles by post-type or tag. — copied verbatim from the demo's app.css lines 2077–2092 (commit 7df0d35). Phase 1 of demo-port: do not retype values here. */

/* the breakpoints are the feeder's OWN width, which is the column's width —
   so it queries the column's existing container. Its own box is padded, and a
   container query measures the CONTENT box: keying off itself would compare
   620 against 580, and worse, the padding that changes under 280 would move
   the very boundary that decides it */
/* NO radius here. A radius on a background-less box still rounds its BORDERS,
   and the column gives every sibling an item divider as a border — so the
   divider above the module curled at both ends. The radius belongs to whoever
   actually carries the surface, and only there. */
.feeder{display:flex;flex-direction:column;gap:var(--grid-row-gap-snug);min-width:0;}
.feeder > .section-title{flex:none;}
/* the column feeder and the SMALL row feeder sit on a surface; the medium row
   feeder has none, because there each card carries its own background */
.feeder--column,
.feeder--row-sm{padding:var(--sp-normal);background:var(--bg-surface-1);border-radius:var(--radius-card);}
/* ...and where a module carries BOTH the surface's radius and the column's
   dotted divider, the divider is DRAWN above the box instead of being its
   border — a border follows the radius and curls into a smile at both ends.
   The transparent border keeps the 1px the padding math already accounts for.
   Same principle as the feeder's own dividers: a line between two things is
   never a property of one of them. */
/* A module that carries its own SURFACE cannot host the divider as a border:
   the line would sit on the coloured box's own top edge instead of floating in
   the space between the two items (Ronen 2026-08-06: "it should be the same
   divider the items have"). So the module takes a margin the size of the row
   gap, and the line is drawn in the middle of the resulting space — leaving
   exactly grid/row-gap-normal above it and below it, which is what an item
   divider looks like everywhere else. The module keeps its own inner padding. */
.grid .column-a > * + .feeder--column,
.grid .column-a > * + .promotion-module,
.grid .column-b > * + .feeder--column,
.grid .column-b > * + .promotion-module{position:relative;border-block-start:0;margin-block-start:var(--grid-row-gap-normal);}
.grid .column-a > * + .feeder--column::before,
.grid .column-a > * + .promotion-module::before,
.grid .column-b > * + .feeder--column::before,
.grid .column-b > * + .promotion-module::before{content:"";position:absolute;inset-inline:0;inset-block-start:calc(var(--grid-row-gap-normal) * -1);border-block-start:var(--bw-thin) solid var(--divider-ink);}
/* each keeps the top padding its own design gives it */
.grid .column-a > * + .promotion-module,
.grid .column-b > * + .promotion-module{padding-block-start:var(--sp-loose);}
.grid .column-a > * + .feeder--column,
.grid .column-b > * + .feeder--column{padding-block-start:var(--sp-normal);}
/* A SLIDER CARRIES NO DIVIDER ABOVE IT (Ronen 2026-08-06). The scrolling rows
   and the flash pill are self-contained bands — a rule glued to the top edge
   of a band reads as debris, not as a separation. They also take back the top
   padding the divider rule would have overwritten. */
.grid .column-a > * + .feeder--row-sm,
.grid .column-a > * + .feeder--row-md,
.grid .column-a > * + .topic-slider,
.grid .column-a > * + .flash-ticker,
.grid .column-b > * + .feeder--row-sm,
.grid .column-b > * + .feeder--row-md,
.grid .column-b > * + .topic-slider,
.grid .column-b > * + .flash-ticker{border-block-start:0;padding-block-start:0;}
.grid .column-a > * + .feeder--row-sm,
.grid .column-b > * + .feeder--row-sm{padding-block-start:var(--sp-normal);}
.grid .column-a > * + .flash-ticker,
.grid .column-b > * + .flash-ticker{padding-block-start:var(--sp-micro);}

/* --- column feed: a list that can scroll under a title that does not --- */
.feed-column{display:flex;flex-direction:column;gap:var(--grid-row-gap-snug);min-height:0;overflow-y:auto;}
/* a hairline sits ABOVE every item here, the first one included — unlike the
   grid, where a divider only ever separates two things. It belongs to the
   COLUMN, not to one kind of card: the feeder and most-read share this list */
.feed-column > *{border-block-start:var(--bw-thin) dotted var(--border-hairline);padding-block-start:var(--grid-row-gap-snug);}

/* --- row feed: min-width items, the rest scrolls --- */
/* 40 between cards, not 20: in Figma the divider is a child of the same row,
   so the 20 spacing falls on BOTH sides of it and the cards end up 40 apart */
.feed-row{display:flex;gap:var(--sp-x-loose);overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;}
.feed-row > ip-feeder-item{position:relative;flex:1 0 var(--feeder-item-min);min-width:var(--feeder-item-min);scroll-snap-align:start;}
/* the divider is drawn IN the gap, never inside the card: as a border plus
   padding it shrank every item after the first and pushed it onto the line */
.feed-row > ip-feeder-item + ip-feeder-item::before{content:"";position:absolute;inset-block:0;inset-inline-start:calc(var(--sp-x-loose) / -2);border-inline-start:var(--bw-thin) dotted var(--border-hairline);}

/* --- the item itself --- */
ip-feeder-item{display:block;--feeder-item-min:186px;}
.feeder-item__link{display:flex;gap:var(--grid-row-gap-snug);text-decoration:none;}
.feeder-item__link .feeder-item__media{display:block;flex:none;overflow:hidden;border-radius:var(--radius-card-media);}
.feeder-item__link .feeder-item__media img{display:block;width:100%;height:100%;object-fit:cover;}
.feeder-item__content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-x-tight);flex:1;min-width:0;}
.feeder-item__link .feeder-item__headline{display:block;margin:0;font:var(--ts-headline-xs);color:var(--content-primary);}/* --- column direction: square thumb beside the text --- */
/* the photo sits at the READING START — right in Hebrew (Ronen 2026-08-02,
   overriding the Figma side, which has it at x=0). most-read keeps the
   measured side; this one is a deliberate departure */




.feeder--column .feeder-item__link{flex-direction:row;align-items:flex-start;}
.feeder--column .feeder-item__link .feeder-item__media{width:75px;height:75px;}
/* under 280 the feeder runs as a text list: no thumb, no see-more, tighter sides */
@container card (max-width:279.98px){
  .feeder--column{padding-inline:var(--sp-tight);}
  .feeder--column .feeder-item__link .feeder-item__media{display:none;}
  .feeder--column > .section-title .section-more{display:none;}
}
/* from 620 the headline steps up a size — the only thing that breakpoint changes */
@container card (min-width:620px){
  .feeder--column .feeder-item__link .feeder-item__headline{font:var(--ts-headline-md);}
}/* --- row direction: photo above the text --- */



.feeder--row .feeder-item__link{flex-direction:column;}
.feeder--row .feeder-item__link .feeder-item__media{width:100%;height:auto;}
.feeder--row-sm .feeder-item__link .feeder-item__media{aspect-ratio:16/9;}/* medium: a square photo, and the card — not the feeder — carries the surface */
/* medium is the one place the card is the surface: it carries the radius, and
   its photo carries none — the card clips it, so the corners still round.
   The surface and the clip sit on the LINK, not the host: overflow on the
   host also swallowed the divider drawn 20px outside it, in the gap */



.feeder--row-md .feeder-item__link .feeder-item__media{aspect-ratio:1/1;border-radius:var(--radius-none);}
/* every card fills the row's height — the tallest sets it, shorter text just
   leaves a deeper bottom padding, so the surfaces stay equal */
.feeder--row-md ip-feeder-item article{height:100%;}
.feeder--row-md .feeder-item__link{height:100%;background:var(--bg-surface-1);border-radius:var(--radius-card);overflow:hidden;}
.feeder--row-md .feeder-item__content{padding:0 var(--sp-tight) var(--sp-tight);}