/* MYB News v2: page rules for the front page (/) and the story lists (/news, /news/<topic>).
   The design system is /css/myb2.css; this file only adds what these pages need. Scoped under .page-home / .page-news.
   No text-transform, no caps, no glass on content. Cache-busted as /css/front2.css?v=N. */

/* ======================================================================= shared */
/* a feature always carries its summary; it shows only when there is no picture (or the page script removed one) */
.feature .pic + .feature__body .dek{ display:none; }
.meta time{ font:inherit; color:inherit; }

/* ======================================================================= front page */
.page-home .hm-col{ display:grid; gap:14px; align-content:start; }
.page-home .hm-stack{ display:grid; gap:12px; margin-top:12px; }
.page-home .lt__date{ min-height:20px; }

/* phone market strip: tiles wait for /api/prices; if prices cannot load, the strip is taken away */
.page-home .tk.wait .tk__v, .page-home .tk.wait .tk__c{ color:transparent; background:var(--fill-2); border-radius:6px; }
.page-home .tk.wait .tk__v{ width:78%; margin:2px 0 3px; height:18px; }
.page-home .tk.wait .tk__c{ width:52%; height:13px; }
.page-home .tk__c .up, .page-home .tk__c .down{ font:inherit; }

/* phone Latest box: time first, then the headline */
.hm-latest .hm-latest__rows{ padding-bottom:2px; }
.hm-latest .row{ padding:11px 14px 12px 16px; grid-template-columns:minmax(0,1fr) auto; gap:12px; }
.hm-latest .row .pic{ width:64px; height:64px; border-radius:11px; }
.hm-latest .row .hl{ font-size:16px; line-height:21px; }
.hm-latest .hm-at{ font-weight:600; color:var(--ink); }

/* closing soon */
.cs__rows{ padding-bottom:4px; }
.cd b.cd__today{ font-size:15px; }

/* Shabbos table: the town is a row header */
.shab tbody th{ text-align:left; font:500 15px/20px var(--sans); color:var(--ink); padding:10px 8px 10px 16px; border-top:.5px solid var(--hair); white-space:nowrap; }

/* markets module (desktop): values wait for /api/prices */
.hm-mk.wait .mkmod .v, .hm-mk.wait .mkmod .c{ color:transparent; background:var(--fill-2); border-radius:6px; }
.hm-mk.wait .mkmod .v{ width:76%; height:21px; margin:2px 0; }
.hm-mk.wait .mkmod .c{ width:48%; height:13px; }
.hm-mk .mk-fail{ margin:0; padding:6px 16px 18px; font:400 15px/21px var(--sans); color:var(--ink-2); }

/* the Watch band rail is drawn after load */
.page-home .band .rail:empty{ min-height:0; }

/* section views (the tabs other than Top stories) */
.hm-view{ margin-top:16px; }
.hm-view .sec__grid.two{ align-items:start; }
.hm-view .hm-colv{ display:grid; gap:10px; align-content:start; }
.hm-view .hm-more{ display:flex; justify-content:center; margin-top:16px; }
.hm-view .latest .row{ padding:11px 14px 12px 16px; grid-template-columns:minmax(0,1fr) auto; gap:12px; }
.hm-view .latest .row .pic{ width:64px; height:64px; border-radius:11px; }
.hm-view .latest .row .hl{ font-size:16px; line-height:21px; }
.hm-view .latest .hm-at{ font-weight:600; color:var(--ink); }
.hm-view .sec__h{ align-items:baseline; }
.hm-view .hm-aside{ font:400 13px/18px var(--sans); color:var(--ink-2); }

/* "Just in" arriving while the page is open */
@media (prefers-reduced-motion: no-preference){
  .justin.arrive{ animation:hm-arrive 420ms var(--ease) both; }
  @keyframes hm-arrive{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
}

/* about + questions, at the foot of the front page */
.hm-about{ display:grid; gap:14px; margin-top:40px; }
.hm-about__txt h2{ margin:0 2px 6px; font:700 22px/28px var(--display); letter-spacing:-.018em; }
.hm-about__txt p{ margin:0 2px; font:400 16px/23px var(--sans); color:var(--ink-2); max-width:56ch; text-wrap:pretty; }
.hm-about__links{ display:flex; flex-wrap:wrap; gap:4px 18px; margin-top:12px!important; }
.hm-about__links a{ font:500 15px/34px var(--sans); color:var(--red-text); }
.hm-about__links a:hover{ text-decoration:underline; text-underline-offset:3px; }

@media (min-width:768px){
  .hm-view .sec__grid.two{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
}
/* tablet (768-1099): the phone order, laid out wider. The lead sits beside its picture; lists and sections pair up. */
@media (min-width:768px) and (max-width:1099px){
  .page-home .t-lead .lead{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); }
  .page-home .t-lead .lead .pic{ aspect-ratio:auto; min-height:330px; }
  .page-home .t-lead .lead .pic img{ position:absolute; inset:0; }
  .page-home .t-lead .lead__body{ padding:20px 22px; align-content:center; }
  .page-home .t-lead .lead .hl{ font-size:28px; line-height:33px; }
  .page-home .hm-stack{ grid-template-columns:1fr 1fr; align-items:start; }
  .page-home .hm-stack > :only-child{ grid-column:1 / -1; }
  .page-home .grid4 .sec__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; }
  .page-home .rundown ol{ columns:2; column-gap:0; }
  .page-home .rundown li{ break-inside:avoid; }
}
@media (min-width:1100px){
  /* the rundown runs as long as the lead and More stories beside it: the box takes the column's height and its rows
     share the extra space, so there is no empty strip under it */
  .page-home .top3 .t-run, .page-home .top3 .t-side{ align-content:stretch; }
  .page-home .top3 .t-run .rundown{ display:flex; flex-direction:column; }
  .page-home .top3 .t-run .rundown ol{ flex:1; display:flex; flex-direction:column; justify-content:space-between; }
  .page-home .duo.hm-solo{ grid-template-columns:1fr; }
  .page-home .duo .shab{ align-self:stretch; }
  .page-home .top3 .t-side .latest ol{ padding-bottom:4px; }
  .page-home .hm-also{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .page-home .hm-also .feature .hl{ font-size:18px; line-height:23px; }
  .hm-about{ grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:48px; align-items:start; margin-top:52px; }
  .hm-view{ margin-top:20px; }
}

/* ======================================================================= story lists (/news, /news/<topic>) */
.nl{ max-width:820px; margin:0 auto; }
.nl .lt{ display:block; }
.nl .lt h1{ margin:0; }
.nl .tabs{ margin-top:10px; }
.nl-lead{ margin-top:12px; }
.nl-day{ margin-top:22px; }
.nl-day .vgroup{ margin:0 4px 8px; font:600 15px/20px var(--sans); color:var(--ink); }
.nl-row .row__txt{ gap:4px; }
.nl-row .dek{ font-size:15px; line-height:21px; }
.nl .pager{ margin-top:24px; }
.nl .pager .btn .i{ width:18px; height:18px; stroke-width:2; }
.nl .pager .num{ white-space:nowrap; }
/* every page by number under Newer / Older */
.nl .pages{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:14px 0 0; }
.nl .pages .pg{ min-width:44px; height:44px; padding:0 6px; display:inline-grid; place-items:center; border-radius:999px; font:500 15px/1 var(--sans); color:var(--ink); background:var(--card); box-shadow:var(--card-shadow); font-variant-numeric:tabular-nums; }
.nl .pages a.pg:hover{ background:var(--fill); }
.nl .pages .pg[aria-current="page"]{ background:var(--ink); color:var(--bg); font-weight:600; box-shadow:none; }
.nl .empty-state{ margin-top:16px; background:var(--card); border-radius:var(--r-lg); box-shadow:var(--card-shadow); }
@media (min-width:768px){
  .nl-row .pic{ width:132px; height:88px; border-radius:12px; }
  /* the lead of a list sits beside its picture, so the list starts on the first screen */
  .nl-lead .lead{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); }
  .nl-lead .lead .pic{ aspect-ratio:auto; min-height:300px; }
  .nl-lead .lead .pic img{ position:absolute; inset:0; }
  .nl-lead .lead__body{ padding:22px 24px 22px; align-content:center; }
  .nl-lead .lead .hl{ font-size:30px; line-height:35px; }
}
@media (min-width:1100px){
  .nl .lt{ padding-top:26px; }
  .nl-row{ padding:15px 16px 15px 18px; gap:18px; }
  .nl-row .hl{ font-size:19px; line-height:24px; }
}

/* tablets: the Shabbos table stays a readable width instead of spreading its three columns across the page */
@media (min-width:768px) and (max-width:1099px){
  .page-home .only-phone .shab{ max-width:620px; }
}