/*! MOST READ (Figma 5629:6817) — the feeder's sibling: the same column — copied verbatim from the demo's app.css lines 2290–2320 (commit 7df0d35). Phase 1 of demo-port: do not retype values here. */

/* no surface, so no radius — see the note on .feeder */
.most-read{display:flex;flex-direction:column;gap:var(--grid-row-gap-snug);min-width:0;}
ip-most-read-item{display:block;}/* sides are measured, not mirrored: photo left, headline beside it, rank hard
   against the right edge */


.most-read-item__link{display:flex;flex-direction:row-reverse;align-items:flex-start;gap:var(--sp-tight);text-decoration:none;}
.most-read-item{display:flex;flex-direction:row-reverse;align-items:flex-start;justify-content:flex-end;gap:var(--sp-tight);flex:1;min-width:0;}
.most-read-item__media{display:block;flex:none;width:75px;height:75px;overflow:hidden;border-radius:var(--radius-card-media);}
.most-read-item__media img{display:block;width:100%;height:100%;object-fit:cover;}
.most-read-item__content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-x-tight);flex:1;min-width:0;}
.most-read .most-read-item__headline{display:block;margin:0;font:var(--ts-headline-sm);color:var(--content-primary);}/* the rank reads as a number, not as text: label colour, display type */


.most-read-item__rank{flex:none;width:44px;font:var(--ts-display-lg);letter-spacing:var(--ts-display-lg-ls);color:var(--content-breaking);text-align:center;}
/* under 280 the photo goes and the numeral moves above the headline —
   column-reverse, because in the row state the numeral comes last */
@container card (max-width:279.98px){
  .most-read-item__link{flex-direction:column-reverse;gap:var(--sp-tight);}
  .most-read-item__media{display:none;}
  .most-read-item__rank{font:var(--ts-display-md);letter-spacing:var(--ts-display-md-ls);text-align:start;}
}
/* the same 620 step the feeder makes */
@container card (min-width:620px){
  .most-read .most-read-item__headline{font:var(--ts-headline-md);}
}