/* شهاب — four hero fronts after the New York Times (styles 1707-1710,
   _parts/sections/hero-nyt.blade.php), 2026-10-25.

   Paper, not the navy band of the other fronts: the managing editor's
   reference is a newspaper's first page — ruled columns, a framed box of top
   stories, headline and lede before the picture. Colours are the theme's
   tokens only, so «الوضع الليلي» (which re-points the tokens) turns the page
   with the rest of the site; the few things a token cannot say are at the
   end, under html[data-theme="dark"].

   Nothing sits on a news photo but the reels' small play mark in the bottom
   corner (the managing editor: the top of a picture holds the face). Sizes
   follow «حجم الخط» through --k, as the other fronts do. */

.sh-ny{--k:1;padding:26px 0 14px;background:var(--color-surface);color:var(--color-text);font-family:var(--devlo-font, var(--sh-font))}
html[data-sh-type="sm"] .sh-ny{--k:.92}
html[data-sh-type="lg"] .sh-ny{--k:1.12}
.sh-ny a{color:inherit;text-decoration:none;display:block}
.sh-ny a:hover .sh-ny__h,.sh-ny a:focus-visible .sh-ny__h{color:var(--color-brand-blue)}
.sh-ny ul{list-style:none;margin:0;padding:0}
.sh-ny figure{margin:0}

/* ---- shared pieces -------------------------------------------------------- */
.sh-ny__h{margin:0;font-weight:800;letter-spacing:0;text-wrap:balance;color:var(--color-text);transition:color .15s ease}
.sh-ny__h--lead{font-size:calc(27px * var(--k));line-height:1.5}
.sh-ny__h--rel{font-size:calc(18px * var(--k));line-height:1.65}
.sh-ny__h--side{font-size:calc(22px * var(--k));line-height:1.5;margin-top:12px}
.sh-ny__h--row{font-size:calc(16px * var(--k));line-height:1.7}
.sh-ny__h--follow{font-size:calc(15.5px * var(--k));line-height:1.7}
.sh-ny__h--text{font-size:calc(18.5px * var(--k));line-height:1.6}
.sh-ny__h--small{font-size:calc(16px * var(--k));line-height:1.65}
.sh-ny__h--op{font-size:calc(15.5px * var(--k));line-height:1.65}
.sh-ny__dek{margin:8px 0 0;color:var(--color-text-2);font-size:calc(14.5px * var(--k));line-height:1.85;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.sh-ny__pic{display:block;position:relative;overflow:hidden;background:var(--color-surface-soft)}
.sh-ny__pic img{display:block;width:100%;height:100%;object-fit:cover}
.sh-ny__cap{margin:8px 0 0;padding-inline-start:10px;border-inline-start:3px solid var(--color-brand-blue);
  color:var(--color-text);font-size:calc(14.5px * var(--k));font-weight:700;line-height:1.7}
.sh-ny__rel{border-top:1px solid var(--color-border);padding-top:14px;margin-top:14px}
.sh-ny__label,.sh-ny__topic,.sh-ny__frame-name{margin:0;font-size:calc(15px * var(--k));font-weight:800;color:var(--color-text);line-height:1.4}
.sh-ny__topic{display:flex;align-items:center;gap:8px;margin-bottom:12px;color:var(--color-brand-blue)}
.sh-ny__topic::before{content:"";width:8px;height:8px;background:currentColor;flex:none}
.sh-ny__tag{display:block;margin-top:10px;font-size:calc(12.5px * var(--k));font-weight:800;color:var(--color-brand-blue)}
.sh-ny__byline{display:block;font-size:calc(12.5px * var(--k));font-weight:700;color:var(--color-text-muted);margin-top:4px}

/* the frame: a hairline box with its name standing on the top line */
.sh-ny__frame{position:relative;border:1px solid var(--color-text);padding:26px 18px 18px}
.sh-ny__frame-name{position:absolute;top:0;inset-inline-start:50%;transform:translate(50%,-50%);
  background:var(--color-surface);padding:0 14px;white-space:nowrap}
[dir="ltr"] .sh-ny__frame-name{transform:translate(-50%,-50%)}

/* a headline with its square thumb at the line's end */
.sh-ny .sh-ny__row{display:grid;grid-template-columns:minmax(0,1fr) 84px;gap:14px;align-items:start}
.sh-ny__thumb{width:84px;height:84px}
.sh-ny__thumb--sm{width:72px;height:72px}

/* «المزيد للقراءة» */
/* its rule is the brand blue (the managing editor, 2026-10-25: «خط أزرق»), on the site and in the app */
.sh-ny__more{border-top:2px solid var(--color-brand-blue);margin-top:18px;padding-top:12px}
.sh-ny__more .sh-ny__label{margin-bottom:4px}
/* the label as a small box (the managing editor, 2026-10-25: «بدها تمييز…
   بوكس صغير», like the blue «أخبار فلسطين» chip): white on the brand blue,
   standing on the blue rule */
.sh-ny__more{padding-top:0}
.sh-ny__more .sh-ny__label{display:inline-block;margin:0 0 4px;padding:7px 14px 8px;background:var(--color-brand-blue);color:#fff;font-size:calc(14px * var(--k));line-height:1.2}
.sh-ny__more-grid{display:grid;grid-template-columns:1fr 1fr}
.sh-ny__more-grid > li{padding:14px 0;border-bottom:1px solid var(--color-border)}
.sh-ny__more-grid > li:nth-last-child(-n+2):nth-child(odd),.sh-ny__more-grid > li:last-child{border-bottom:0}
.sh-ny__more-grid > li:nth-child(odd){padding-inline-end:18px;border-inline-end:1px solid var(--color-border)}
.sh-ny__more-grid > li:nth-child(even){padding-inline-start:18px}

/* reels: the whole poster, a small play mark in its bottom corner */
.sh-ny__reel{position:relative;display:block;overflow:hidden;aspect-ratio:9/16;background:var(--color-brand-navy-2)}
.sh-ny__reel img{display:block;width:100%;height:100%;object-fit:cover}
.sh-ny__play{position:absolute;inset-inline-end:8px;bottom:8px;width:30px;height:30px;border-radius:50%;
  background:rgba(10,26,51,.72);display:grid;place-items:center}
.sh-ny__play::after{content:"";border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #fff;margin-inline-start:3px}
[dir="rtl"] .sh-ny__play::after{margin-inline-start:0;margin-inline-end:-3px}

/* an opinion piece: the writer on a tinted card */
.sh-ny__op-face{aspect-ratio:1/1;background:var(--color-surface-blue)}
.sh-ny__op-face.is-cut img,.sh-ny__face.is-cut img{object-fit:contain;object-position:50% 100%}

/* ---- 11 «الصفحة الأولى» ------------------------------------------------------ */
.sh-ny11{display:grid;grid-template-columns:minmax(0,2.45fr) minmax(0,1fr);align-items:start}
.sh-ny11.is-solo{grid-template-columns:minmax(0,1fr)}
.sh-ny11__top{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.32fr);gap:22px}
.sh-ny11__pic{aspect-ratio:16/10.3}
.sh-ny11__side{padding-inline-start:18px;margin-inline-start:18px;border-inline-start:1px solid var(--color-border)}
.sh-ny11__side-pic{aspect-ratio:3/2}
.sh-ny11__side > .sh-ny__card + .sh-ny11__duo{border-top:1px solid var(--color-border);margin-top:14px;padding-top:14px}
.sh-ny11__duo{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
/* the reel stands exactly as tall as the opinion card beside it (the managing
   editor, 2026-10-25: a full-height reel threw the column off balance); its
   poster is cropped about its middle, where the face and the words sit */
.sh-ny11__duo .sh-ny11__reel{aspect-ratio:auto;height:100%;min-height:220px}
.sh-ny11__duo .sh-ny11__reel img{position:absolute;inset:0;object-position:50% 12%}
.sh-ny11__duo.is-one .sh-ny11__reel{aspect-ratio:9/16;height:auto}
.sh-ny11__duo.is-one .sh-ny11__reel img{position:static}
.sh-ny11__duo > :first-child{padding-inline-end:12px;border-inline-end:1px solid var(--color-border)}
.sh-ny11__duo > :last-child{margin-inline-start:12px}
.sh-ny11__duo.is-one{grid-template-columns:minmax(0,1fr)}
.sh-ny11__duo.is-one > *{padding:0;margin:0;border:0}
.sh-ny11__duo.is-one .sh-ny11__reel{max-width:60%}

/* ---- 12 «العناقيد» ------------------------------------------------------------ */
.sh-ny12{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,.82fr);border-top:3px solid var(--color-text);padding-top:14px}
.sh-ny12[style*="--ny-cols:2"]{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.sh-ny12[style*="--ny-cols:1"]{grid-template-columns:minmax(0,1fr)}
.sh-ny12__col{padding:0 20px;border-inline-start:1px solid var(--color-border)}
.sh-ny12__col:first-child{padding-inline-start:0;border-inline-start:0}
.sh-ny12__col:last-child{padding-inline-end:0}
.sh-ny12__pic{aspect-ratio:16/10}
.sh-ny12__col.is-big .sh-ny__h--lead{font-size:calc(28px * var(--k));margin-top:14px}
.sh-ny12__follow{margin-top:12px}
.sh-ny12__follow li{border-top:1px solid var(--color-border);padding:10px 0}
.sh-ny12__follow .sh-ny__h{position:relative;padding-inline-start:16px}
.sh-ny12__follow .sh-ny__h::before{content:"";position:absolute;inset-inline-start:0;top:.75em;width:6px;height:6px;background:var(--color-text-faint)}
.sh-ny .sh-ny12__writer{display:grid;grid-template-columns:minmax(0,1fr) 64px;gap:12px;align-items:start;padding:12px 0;border-top:1px solid var(--color-border)}
.sh-ny12__op .sh-ny__topic + .sh-ny12__writer{border-top:0;padding-top:0}
.sh-ny12__by .sh-ny__byline{margin:0 0 3px}
.sh-ny__face{display:block;width:64px;height:72px;overflow:hidden;background:var(--color-surface-blue)}
.sh-ny__face img{display:block;width:100%;height:100%;object-fit:cover}

/* ---- 13 «النص أولاً» ---------------------------------------------------------- */
.sh-ny13{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.95fr);
  border-top:1px solid var(--color-text);border-bottom:1px solid var(--color-text);padding:18px 0}
.sh-ny13__col{padding:0 18px;border-inline-start:1px solid var(--color-border)}
.sh-ny13__col:first-child{padding-inline-start:0;border-inline-start:0}
.sh-ny13__col:last-child{padding-inline-end:0}
.sh-ny13__lead .sh-ny__h--lead{font-size:calc(32px * var(--k));line-height:1.45}
.sh-ny13__lead .sh-ny__dek{font-size:calc(15.5px * var(--k))}
.sh-ny13__lead .sh-ny__fig{margin-top:14px}
.sh-ny13__pic{aspect-ratio:3/2}
.sh-ny13__text{padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--color-border)}
.sh-ny13__text:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.sh-ny13__text .sh-ny__dek{font-size:calc(14px * var(--k));-webkit-line-clamp:3}
.sh-ny13__side-pic{aspect-ratio:4/3}
.sh-ny13__list > li{padding:12px 0;border-top:1px solid var(--color-border)}
.sh-ny13__list > li:first-child{border-top:0;padding-top:0}
.sh-ny13__list .sh-ny__row{grid-template-columns:minmax(0,1fr) 72px}
.sh-ny13__list .sh-ny__h--row{font-size:calc(15px * var(--k))}

/* ---- 14 «الشاشة» -------------------------------------------------------------- */
.sh-ny14{display:grid;grid-template-columns:minmax(0,1fr) 312px minmax(0,1fr);padding-top:18px}
.sh-ny14.no-reel{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.sh-ny14.no-side{grid-template-columns:minmax(0,1fr) 312px}
.sh-ny14.no-reel.no-side{grid-template-columns:minmax(0,1fr)}
.sh-ny14 > *{padding:0 20px}
.sh-ny14 > :first-child{padding-inline-start:0}
.sh-ny14 > :last-child{padding-inline-end:0}
.sh-ny14__side{border-inline-start:1px solid var(--color-border)}
.sh-ny14__strip{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.sh-ny14__mini{aspect-ratio:9/14}
.sh-ny14__mini .sh-ny__play{width:24px;height:24px;inset-inline-end:5px;bottom:5px}
.sh-ny14__mini .sh-ny__play::after{border-width:5px 0 5px 8px}
.sh-ny14__side-pic{aspect-ratio:16/10}
.sh-ny14__rows{margin-top:12px}
.sh-ny14__rows > li{padding:12px 0;border-top:1px solid var(--color-border)}
.sh-ny__more .sh-ny14__rows{margin-top:4px}
.sh-ny__more .sh-ny14__rows > li:first-child{border-top:0}

/* ---- a tablet: the side column goes under ------------------------------------- */
@media (max-width:1100px){
  .sh-ny11{grid-template-columns:minmax(0,1fr)}
  .sh-ny11__side{padding:18px 0 0;margin:18px 0 0;border-inline-start:0;border-top:1px solid var(--color-text);
    display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px}
  .sh-ny11__side > .sh-ny__card + .sh-ny11__duo{border-top:0;margin-top:0;padding-top:0}
  .sh-ny12{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  .sh-ny12__op{grid-column:1/-1;padding:18px 0 0!important;margin-top:18px;border-inline-start:0!important;border-top:1px solid var(--color-border)}
  .sh-ny13{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
  .sh-ny13__col:nth-child(3){padding-inline-start:0;border-inline-start:0}
  .sh-ny13__col:nth-child(n+3){margin-top:18px;padding-top:18px;border-top:1px solid var(--color-border)}
  .sh-ny14{grid-template-columns:minmax(0,1fr) 260px}
  .sh-ny14 .sh-ny14__side{grid-column:1/-1;padding:18px 0 0;margin-top:18px;border-inline-start:0;border-top:1px solid var(--color-text)}
}

/* ---- a phone: one column, the picture first --------------------------------- */
@media (max-width:640px){
  .sh-ny{padding-top:20px}
  .sh-ny__frame{padding:22px 14px 14px}
  .sh-ny__h--lead,.sh-ny12__col.is-big .sh-ny__h--lead,.sh-ny13__lead .sh-ny__h--lead{font-size:calc(23px * var(--k))}
  .sh-ny11__top{grid-template-columns:minmax(0,1fr);gap:14px}
  .sh-ny11__top > .sh-ny__fig{order:-1;margin:0 -14px}
  .sh-ny11__top > .sh-ny__fig .sh-ny__cap{margin-inline:14px}
  .sh-ny__more-grid{grid-template-columns:minmax(0,1fr)}
  .sh-ny__more-grid > li{padding:12px 0!important;border-inline-end:0!important;border-bottom:1px solid var(--color-border)!important}
  .sh-ny__more-grid > li:last-child{border-bottom:0!important}
  .sh-ny11__side{display:block}
  .sh-ny11__side > .sh-ny__card + .sh-ny11__duo{border-top:1px solid var(--color-border);margin-top:14px;padding-top:14px}
  .sh-ny12{grid-template-columns:minmax(0,1fr)!important}
  .sh-ny12__col{padding:18px 0 0!important;margin-top:18px;border-inline-start:0!important;border-top:1px solid var(--color-border)}
  .sh-ny12__col:first-child{padding-top:0!important;margin-top:0;border-top:0}
  .sh-ny13{grid-template-columns:minmax(0,1fr)}
  .sh-ny13__col{padding:16px 0 0!important;margin-top:16px;border-inline-start:0!important;border-top:1px solid var(--color-border)}
  .sh-ny13__col:first-child{padding-top:0!important;margin-top:0;border-top:0}
  .sh-ny14{grid-template-columns:minmax(0,1fr)!important}
  .sh-ny14 > *{padding:0!important}
  .sh-ny14__screen{margin:16px 0;display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:8px}
  .sh-ny14.no-reel .sh-ny14__screen{display:none}
  .sh-ny14__strip{grid-template-columns:minmax(0,1fr);margin-top:0}
  .sh-ny14 .sh-ny14__side{margin-top:16px;padding-top:16px!important;border-inline-start:0;border-top:1px solid var(--color-text)}
}

/* ---- «الوضع الليلي» — what the tokens cannot say -------------------------------
   The brand blue on the night page reads 2.6:1: the small words in blue (the
   topic, the labels, the hover) take the sky instead, as the focus ring does. */
html[data-theme="dark"] .sh-ny__topic,
html[data-theme="dark"] .sh-ny__tag,
html[data-theme="dark"] .sh-ny a:hover .sh-ny__h,
html[data-theme="dark"] .sh-ny a:focus-visible .sh-ny__h{color:var(--sh-sky, #7ea8dd)}
html[data-theme="dark"] .sh-ny__cap{border-inline-start-color:var(--sh-sky, #7ea8dd)}
html[data-theme="dark"] .sh-ny__more{border-top-color:var(--sh-sky, #7ea8dd)}
html[data-theme="dark"] .sh-ny__more .sh-ny__label{background:var(--color-brand-blue);color:#fff}