/*! sticky header (menu-sub) — copied verbatim from the demo's app.css lines 1076–1175 (commit 7df0d35). Phase 1 of demo-port: do not retype values here. */

@media (max-width:1023px){
  .site-header:not(.site-header--overlay):not(.site-header--compact){position:sticky;top:0;z-index:1000;}
}
.site-header--sub{position:fixed;top:0;left:0;right:0;z-index:1000;height:60px;transform:translateY(-100%);transition:transform .3s ease;will-change:transform;}
.site-header--sub.is-visible{transform:none;}
.site-header--sub::after{display:none;}/* the sub is the compact header: drop the nav row + shrink the logo, but let
   every utility (subscribe, lang, …) follow the SAME responsive rules as the
   main header — don't force-hide them, or they vanish where they should stay. */


.site-header--sub .site-header__top{height:60px;padding:var(--sp-tight) var(--sp-normal);}
.site-header--sub .site-nav{display:none;}
.site-header--sub .site-header__logo{bottom:0;}
.site-header--sub .site-header__logo .logo-eye{width:142px;height:36px;}
.site-header--sub .site-header__logo .logo-shakuf{width:77px;height:28px;margin-top:4px;}
/* the sub only rides ≥1024 (below, the main header pins itself) */
@media (max-width:1023px){ .site-header--sub{display:none;} }
/* hero pages: the overlay header itself is the sticky — pinned, transparent over
   the hero, its background fading in once the hero has scrolled past (.is-solid).
   Extra class in the selector so it beats .site-header.site-header--overlay{none}. */
.site-header.site-header--overlay.is-solid{background-color:var(--bg-component-header);}
.site-header--overlay.is-solid .site-header__top{background-color:var(--bg-component-header);}

/* flush container for hero templates (hero starts at y=0 under the header) */
.article-container--flush{padding-top:0;}

/* hero — full (article/full): image fills the viewport, overlay hugs its bottom */
.hero-full{position:relative;width:100%;display:flex;flex-direction:column;gap:var(--sp-tight);}
.hero-full .ratio{position:relative;height:100vh;width:100%;overflow:hidden;}
/* a CLIENT deployment (middleware locks the brand) hides the workshop toolbar —
   the mega-menu is the navigation there */
html.is-client .switchbar{display:none;}

/* the hero PHOTO only — the direct child. The overlay's content can hold
   images of its own (the overline avatar), and a bare `img` here stretched
   them to the photo's rules */
.hero-full .ratio > img{width:100%;height:100%;object-fit:cover;display:block;}
.hero-full .caption{padding:0 var(--sp-normal);}
.hero-mask-top{position:absolute;top:0;left:0;right:0;height:120px;background:linear-gradient(to bottom, var(--b-core-alpha-black-50), var(--b-core-alpha-black-0));pointer-events:none;}
.hero-overlay{position:absolute;bottom:0;left:0;right:0;padding:var(--sp-loose) var(--sp-normal);display:flex;flex-direction:column;align-items:center;background:linear-gradient(to bottom, var(--b-core-alpha-black-0), var(--b-core-alpha-black-75));}
.hero-overlay .article-top{max-width:var(--maxw-article-top-hero);}
.hero-overlay .article-label{width:auto;}
/* full: article-top + underline share the same 944 axis (token) so right-alignment
   lines up — the underline lives in its own column below the hero, not inside
   article-top. max-width override beats .article-col's 840 cap. */
.tpl-full .article-col--wide{width:var(--maxw-article-top-hero);max-width:var(--maxw-article-top-hero);}

/* hero — 50:50 (article/50:50) */
.hero-half{direction:ltr;display:flex;height:896px;width:100%;}
.hero-half > div{flex:1;min-width:1px;display:flex;flex-direction:column;gap:var(--sp-tight);}
.hero-half .imgwrap{flex:1;min-height:1px;overflow:hidden;}
.hero-half .imgwrap img{width:100%;height:100%;object-fit:cover;display:block;}
.hero-half .caption{height:16px;}
/* image-half caption: flush, aligned to the image edge; content-half balancing row keeps side padding */
.hero-half > div:first-child .caption{padding:0;}
.hero-half > div:last-child .caption{padding:0 var(--sp-normal);}
.hero-half .bg{flex:1;min-height:1px;overflow:hidden;background:var(--hero-surface, var(--bg-basic-white));display:flex;align-items:center;justify-content:center;padding:0 var(--sp-normal);}
/* 50:50-light hero picker: separate control (data-hero on <html>). The dark
   variant override below is more specific, so dark stays static-custom-2. */
[data-hero="2"]{--hero-surface:var(--bg-picker-special-2);}
[data-hero="3"]{--hero-surface:var(--bg-picker-special-3);}
[data-hero="4"]{--hero-surface:var(--bg-picker-special-4);}
.hero-half .content-inner{direction:rtl;width:100%;max-width:620px;display:flex;flex-direction:column;gap:var(--sp-normal);align-items:center;}
/* 50:50-dark: content panel is the brand's breaking colour, text runs in dark scope */
.tpl-half-dark .hero-half .bg{background:var(--bg-static-special-5);}

.site-header__subscribe .site-header__subscribe-label--short{display:none;}

/* 1024–1279: narrower subscribe pill with short label */
@media (max-width:1279px){
  .site-header__subscribe .site-header__subscribe-label--long{display:none;}
  .site-header__subscribe:hover:not(.is-active) .site-header__subscribe-label--short{display:none;}
  .site-header__subscribe .site-header__subscribe-label--short{display:inline;}

  /* news-lg: feature image goes full-bleed below 1280; bleed caption gets side padding */
  .tpl-news-lg .media--bleed{width:100%;}
  .tpl-news-lg .media--bleed .caption{padding:0 var(--sp-normal);}

  /* full: hero image drops from 100vh to a fixed 650px */
  .tpl-full .hero-full .ratio{height:650px;}
}

/* 50:50 below 1280: hero 614, underline steps sm→xs */
.tpl-half .underline-below{display:none;}
@media (max-width:1279px){
  .tpl-half .hero-half{height:614px;}
  .tpl-half .article-underline{font-family:var(--typo-underline-font-family);font-weight:var(--typo-underline-sm-font-weight);font-size:var(--typo-underline-sm-font-size);line-height:var(--typo-underline-sm-line-height);}
}
/* 50:50 below 1024: underline leaves the content half and sits under the hero */
@media (max-width:1023px){
  .tpl-half .hero-half{height:444px;}
  .tpl-half .content-inner .article-underline{display:none;}
  .tpl-half .underline-below{display:block;}
  .tpl-half .article-col--wide{width:100%;padding:0 var(--sp-normal);}
}
/* 50:50 mobile: hero stacks — content on top, square full-bleed image below; balancing caption gone */
@media (max-width:767px){
  .tpl-half .hero-half{flex-direction:column;height:auto;}
  .tpl-half .hero-half > div:first-child{order:2;}
  .tpl-half .hero-half > div:last-child{order:1;}
  .tpl-half .hero-half .imgwrap{flex:none;aspect-ratio:1/1;}
  .tpl-half .hero-half .bg{flex:none;padding:var(--sp-loose) var(--sp-normal);}
  .tpl-half .hero-half > div:last-child .caption{display:none;}
  /* image stays edge-to-edge when stacked, but its caption takes side padding */
  .tpl-half .hero-half > div:first-child .caption{padding:0 var(--sp-normal);}
}

/* below 1024: header 60px — no nav row, no subscribe; logo steps to the compact
   horizontal lockup 142×36 (Figma header main-min-768, 4411:4041). Scoped to
   768–1023 so the <768 mobile logo (158×40) is untouched. */
@media (min-width:768px) and (max-width:1023px){
  .site-header__logo .logo-eye{width:142px;height:36px;}
  .site-header__logo .logo-shakuf{width:77px;height:28px;margin-top:4px;}
}
@media (max-width:1023px){
  .site-header{height:60px;}
  .site-header__top{height:60px;padding:var(--sp-tight) var(--sp-normal);}
  .site-nav{display:none;}
  .site-header__subscribe{display:none;}
  .site-header__logo{bottom:0;}

  /* news-md / news-lg / op-md / full: feature area leaves the 840 column — full width, 20px margins */
  .tpl-news-md .article-col--wide,
.tpl-news-lg .article-col--wide,
.tpl-op-md .article-col--wide,
.tpl-full .article-col--wide{width:100%;padding:0 var(--sp-normal);}

  /* full ≤1023: hero 450px, overlay padding 20 all around, underline steps sm→xs */
  .tpl-full .hero-full .ratio{height:450px;}
  .tpl-full .hero-overlay{padding:var(--sp-normal);}
  .tpl-full .article-underline{font-family:var(--typo-underline-font-family);font-weight:var(--typo-underline-sm-font-weight);font-size:var(--typo-underline-sm-font-size);line-height:var(--typo-underline-sm-line-height);}
}

/* full 768–1023: hero top mask shrinks to 84px (title steps handled by the
   .ts-hero-title role) */
@media (min-width:768px) and (max-width:1023px){
  .tpl-full .hero-mask-top{height:84px;}
}

/* <768 (mobile): header 60px, compact controls, mobile type scale */
@media (max-width:767px){
  .site-header{justify-content:center;background:var(--bg-component-header);}
  .site-header__top{height:50px;padding:var(--sp-x-tight) var(--sp-snug);background:none;}
  .site-header--compact .site-header__top{padding:var(--sp-x-tight) var(--sp-snug);}
  .site-header .button-primary--donate{padding:0 var(--sp-tight);}
  .site-header .button-primary--donate .ic{display:none;}/* header-scoped: the mega-menu's top bar carries its own lang+theme (Figma 4691:12865) */

  
  .site-header .header-language-toggle{display:none;}
  .site-header__utility > .ic-dark{display:none;}
  .site-header__logo .logo-eye{width:142px;height:36px;}
  .site-header__logo .logo-shakuf{width:77px;height:28px;margin-top:4px;}

  .article-container{padding-top:var(--sp-loose);}
  .article-container--flush{padding-top:0;}
  .article-col{width:100%;padding:0 var(--sp-normal);}

  .article-title{font-family:var(--typo-font-display);font-weight:var(--typo-display-lg-font-weight);font-size:var(--typo-display-lg-font-size);line-height:var(--typo-display-lg-line-height);letter-spacing:var(--typo-display-lg-letter-spacing);}
  .article-underline{font-family:var(--typo-underline-font-family);font-weight:var(--typo-underline-sm-font-weight);font-size:var(--typo-underline-sm-font-size);line-height:var(--typo-underline-sm-line-height);}

  /* news-lg mobile: feature image stays full-bleed, caption keeps side padding */
  .tpl-news-lg .media--bleed{padding:0;}
  /* full mobile: hero image is 80vh */
  .tpl-full .hero-full .ratio{height:80vh;}

  .byline{height:auto;flex-direction:column;align-items:flex-end;gap:var(--sp-normal);}
  .byline .byline__author{order:1;}
  .byline .byline__tools{order:2;}
  .action-chip--print{display:none;}

  .channel-promo .channel-promo__buttons{flex-direction:column;}
}