/* premium-article.css — wave 12: full-bleed magazine article (agent Q)
   Loaded AFTER strama / premium-global / premium-home / premium-pages / premium-refine.
   All rules prefixed .a- and/or scoped under .a-article. The article template
   emits a- classes only, so nothing here touches CMS content or blocks/image_text.
   Visual language deliberately echoes the decor configurator (dx-*) on
   /panele-scienne/: one edge-to-edge scene, two-sided legibility scrim,
   light-blue eyebrow, white weight-300 display title with a soft shadow. */

.a-article{
  --a-read:820px;          /* reading measure (spec: 820, not 680-720) */
  --a-fig:1280px;          /* breakout figures                          */
  --a-table:1100px;        /* breakout tables                           */
  --a-gut:clamp(20px,5vw,48px);
  --a-ink:#23262a;
  --a-body:#33362f;
  color:var(--a-ink);
}

/* ==================================================================== HERO
   Edge-to-edge cover scene. The <article> is a full-width block inside
   <main>, so width:100% here is the whole viewport — the image is NOT in a
   .shell, only the overlay copy is. Hero sits in normal flow directly under
   the sticky header, so it never hides behind it. */
.a-hero{
  position:relative;
  width:100%;
  min-height:clamp(520px,68vh,800px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
  background:var(--p-navy-deep);
}
.a-hero-img{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
  transform:translateZ(0);
}

/* two-sided scrim — guarantees AA on light covers regardless of the photo.
   Strong from the bottom (where the copy lives), a touch at the top so the
   sticky header reads against bright images. */
.a-hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(6,18,28,.34) 0%,rgba(6,18,28,0) 26%),
    linear-gradient(0deg,
      rgba(6,18,28,.86) 0%,
      rgba(6,18,28,.60) 22%,
      rgba(6,18,28,.24) 46%,
      rgba(6,18,28,0) 72%);
}

.a-hero-overlay{
  position:relative;z-index:2;
  width:100%;
  padding-block:clamp(64px,11vw,132px) clamp(34px,4.6vw,60px);
}
.a-hero-inner{
  width:min(1320px, 100% - (2 * var(--a-gut)));
  margin:0 auto;
}

/* image-source credit, bottom-right of the frame */
.a-hero-credit{
  position:absolute;z-index:2;right:var(--a-gut);bottom:clamp(16px,2vw,22px);
  font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.62);
  text-shadow:0 1px 3px rgba(6,18,28,.6);
}

/* fallback (no cover_image): navy gradient scene + stacked-logo watermark */
.a-hero--fallback{
  background:linear-gradient(150deg,#0d3155,#0b2540);
}
.a-hero--fallback .a-hero-scrim{
  background:linear-gradient(0deg,rgba(6,18,28,.66) 0%,rgba(6,18,28,.10) 60%,rgba(6,18,28,0) 100%);
}
.a-hero-watermark{
  position:absolute;z-index:0;
  top:50%;left:50%;transform:translate(-50%,-58%);
  width:min(52vw,440px);height:auto;
  opacity:.06;
  filter:brightness(0) invert(1);
  pointer-events:none;
}

/* ---------------------------------------------------- breadcrumbs (on img) */
.a-breadcrumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  margin:0 0 clamp(18px,2.4vw,26px);
  font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
  text-shadow:0 1px 3px rgba(6,18,28,.5);
}
.a-breadcrumbs a{color:rgba(255,255,255,.72);transition:color .3s var(--p-ease)}
.a-breadcrumbs a:hover{color:#fff}
.a-breadcrumbs .a-crumb-sep{opacity:.45}
.a-breadcrumbs [aria-current=page]{color:#fff;font-weight:700}

/* ------------------------------------------------------- meta line (on img) */
.a-kicker{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  margin:0 0 clamp(18px,2.4vw,28px);
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;
  text-shadow:0 1px 3px rgba(6,18,28,.5);
}
.a-kicker-cat{color:#cfe4f5}
.a-kicker time{color:rgba(255,255,255,.82)}
.a-kicker-dot{width:4px;height:4px;border-radius:999px;background:rgba(255,255,255,.5)}
.a-readtime{display:inline-flex;align-items:center;gap:14px;color:rgba(255,255,255,.82)}
.a-readtime::before{content:"";width:4px;height:4px;border-radius:999px;background:rgba(255,255,255,.5)}
.a-readtime[hidden]{display:none}

/* ------------------------------------------------------------ display title */
.a-title{
  font-family:var(--sans);
  max-width:18ch;
  font-size:clamp(44px,6vw,92px);
  font-weight:300;letter-spacing:-.045em;line-height:1.02;
  color:#fff;
  margin:0;
  text-wrap:balance;
  text-shadow:0 2px 18px rgba(6,18,28,.42), 0 1px 3px rgba(6,18,28,.5);
}

/* ==================================================================== LEAD
   Stand-first: generous vertical air, ~860px, navy, weight 300. */
.a-lead{width:100%}
.a-lead-inner{
  width:min(860px, 100% - (2 * var(--a-gut)));
  margin:0 auto;
  padding:clamp(46px,6.4vw,84px) 0 clamp(6px,1.6vw,18px);
}
.a-lead-text{
  margin:0;
  font-size:clamp(21px,2.05vw,26px);
  font-weight:300;line-height:1.5;letter-spacing:-.012em;
  color:var(--p-navy);
  text-wrap:pretty;
}

/* ============================================================== BODY ===
   The StreamField renders image_text blocks:
   .w-block-image_text > .section > .shell.image-text > .h-imgtext-panel [+ .h-imgtext-media]
   We flatten each block into a single reading column with breakout media. */

.a-article-body{
  width:100%;
  margin:clamp(30px,4vw,50px) 0 0;
  counter-reset:a-sec;
}

/* neutralise the home/base block chrome inside the article */
.a-article-body .section{padding:0;background:none}
.a-article-body .shell{width:100%;margin:0}
.a-article-body .image-text{
  display:block;
  width:min(var(--a-read), 100% - (2 * var(--a-gut)));
  margin:0 auto;
  gap:0;background:transparent;grid-template-columns:none;align-items:initial;
}
.a-article-body .h-imgtext-panel{
  padding:0;overflow:visible;isolation:auto;position:relative;
  counter-increment:a-sec;
}
/* kill the repeated decorative frame + domain watermark; repurpose the
   pseudo-element as a big faint section numeral (design-tokens: 80-140px). */
.a-article-body .h-imgtext-panel::before{
  content:counter(a-sec, decimal-leading-zero);
  position:static;inset:auto;display:block;
  font:200 clamp(56px,7vw,104px)/.82 var(--sans);
  letter-spacing:-.05em;color:var(--p-navy);opacity:.11;
  margin:0 0 16px;
  background:none;border:0;
}
.a-article-body .h-imgtext-panel .h-imgtext-mark{display:none}

/* rhythm between sections */
.a-article-body .w-block-image_text + .w-block-image_text{
  margin-top:clamp(56px,7vw,104px);
}

/* eyebrow (section overline) */
.a-article-body .h-imgtext-panel .eyebrow{
  display:block;margin:0 0 16px;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--p-blue);
}
.a-article-body .h-imgtext-panel .eyebrow::before{
  content:"";display:inline-block;width:22px;height:2px;
  background:var(--p-blue);vertical-align:middle;margin-right:12px;
}

/* section heading (spec: ~30-34px) */
.a-article-body .h-imgtext-panel h2{
  font-family:var(--sans);
  font-size:clamp(28px,3.3vw,34px);font-weight:300;letter-spacing:-.035em;line-height:1.1;
  color:var(--p-ink);margin:0 0 24px;
}

/* body copy — 18px / 1.75 */
.a-article-body .h-imgtext-body{
  max-width:none;
  font-size:18px;line-height:1.75;color:var(--a-body);
}
.a-article-body .h-imgtext-body p{margin:0 0 24px}
.a-article-body .h-imgtext-body > *:last-child{margin-bottom:0}
.a-article-body .h-imgtext-body strong{color:var(--p-ink);font-weight:700}
.a-article-body .h-imgtext-body a{
  color:var(--p-blue);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;transition:color .25s var(--p-ease);
}
.a-article-body .h-imgtext-body a:hover{color:var(--p-navy)}

/* lists — elegant markers */
.a-article-body .h-imgtext-body ul,
.a-article-body .h-imgtext-body ol{margin:0 0 24px;padding:0;list-style:none}
.a-article-body .h-imgtext-body li{
  position:relative;margin:0 0 13px;padding-left:30px;line-height:1.66;
}
.a-article-body .h-imgtext-body ul li::before{
  content:"";position:absolute;left:2px;top:.72em;
  width:14px;height:2px;background:var(--p-blue);
}
.a-article-body .h-imgtext-body ol{counter-reset:a-li}
.a-article-body .h-imgtext-body ol li{counter-increment:a-li}
.a-article-body .h-imgtext-body ol li::before{
  content:counter(a-li);position:absolute;left:0;top:.05em;
  font-size:12px;font-weight:700;color:var(--p-blue);
  font-variant-numeric:tabular-nums;
}

/* blockquote (if editors add one) */
.a-article-body .h-imgtext-body blockquote{
  margin:34px 0;padding:4px 0 4px 26px;border-left:2px solid var(--p-blue);
  font-size:clamp(20px,2.2vw,25px);font-weight:300;line-height:1.42;
  letter-spacing:-.02em;color:var(--p-navy);
}

/* ------------------------------------------------ breakout table (→1100) */
.a-article-body .h-imgtext-body table{
  width:min(var(--a-table), 100vw - (2 * var(--a-gut)));
  margin-left:50%;transform:translateX(-50%);
  border-collapse:collapse;margin-top:8px;margin-bottom:32px;
  font-size:14.5px;line-height:1.55;
  box-shadow:var(--p-shadow);background:#fff;
}
.a-article-body .h-imgtext-body th,
.a-article-body .h-imgtext-body td{
  text-align:left;padding:14px 18px;border-bottom:1px solid var(--p-line);
  vertical-align:top;
}
.a-article-body .h-imgtext-body thead th,
.a-article-body .h-imgtext-body tr:first-child th{
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--p-navy);border-bottom:1.5px solid var(--p-navy);
}
.a-article-body .h-imgtext-body tbody tr:nth-child(even),
.a-article-body .h-imgtext-body tr:nth-child(even){background:rgba(17,55,95,.028)}
.a-article-body .h-imgtext-body td:first-child{font-weight:500;color:var(--p-ink)}

/* CTA button inside a section */
.a-article-body .h-imgtext-panel .button{
  margin-top:28px;border-radius:0;
}

/* ---------------------------------------------- breakout figure (→1280) */
.a-article-body .h-imgtext-media{
  position:relative;height:auto;overflow:visible;
  width:min(var(--a-fig), 100vw - (2 * var(--a-gut)));
  margin:clamp(32px,4vw,48px) 0 0;
  margin-left:50%;transform:translateX(-50%);
}
.a-article-body .h-imgtext-media img{
  width:100%;height:clamp(320px,44vw,600px);object-fit:cover;
  min-height:0;box-shadow:var(--p-shadow);
}
.a-article-body .h-imgtext-media figcaption,
.a-article-body .h-imgtext-media .h-imgtext-caption{
  margin-top:14px;font-size:12px;letter-spacing:.02em;color:var(--p-muted);
}

/* ---------------------------------------------------------- signature */
.a-signature{
  display:flex;align-items:center;justify-content:center;gap:26px;
  width:min(var(--a-read), 100% - (2 * var(--a-gut)));
  margin:clamp(64px,8vw,110px) auto 0;
}
.a-signature-rule{flex:1;height:1px;background:var(--p-line)}
.a-signature-mark{width:auto;height:38px;opacity:.6;flex:0 0 auto}

/* ================================================= READING PROGRESS === */
.a-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:120;
  background:var(--p-blue);transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;pointer-events:none;
}

/* ============================================================ PAGER ====
   Full-bleed editorial band: adjacent articles as immersive cover panels
   with directional cues. Falls back to a quiet "index" panel. */

.a-pager{
  display:grid;grid-template-columns:1fr 1fr;
  width:100%;margin:clamp(70px,9vw,120px) 0 0;
  border-top:1px solid var(--p-line);
  background:var(--p-navy-deep);
}
.a-pager-panel{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;min-height:clamp(240px,26vw,340px);
  padding:clamp(30px,4vw,52px);
  color:#fff;text-decoration:none;
  transition:background .5s var(--p-ease);
}
.a-pager-prev{align-items:flex-end;text-align:left}
.a-pager-next{align-items:flex-end;justify-content:flex-end;text-align:right}
.a-pager-next .a-pager-inner{align-items:flex-end}
.a-pager-panel + .a-pager-panel{border-left:1px solid rgba(255,255,255,.14)}

/* cover media */
.a-pager-media{position:absolute;inset:0;z-index:-2}
.a-pager-media img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.04);
  transition:transform 1.1s var(--p-ease);
  filter:grayscale(.15);
}
.a-pager-panel::after{        /* legibility scrim, matched to hero tone */
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(150deg,rgba(11,37,64,.62),rgba(6,18,28,.88));
}
.a-pager-prev::after{
  background:linear-gradient(30deg,rgba(11,37,64,.62),rgba(6,18,28,.88));
}

.a-pager-inner{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px);max-width:22em}
.a-pager-label{
  display:inline-flex;align-items:center;gap:12px;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#9dc4ed;
}
.a-pager-arrow{
  display:inline-block;font-size:16px;line-height:1;
  transition:transform .45s var(--p-ease);
}
.a-pager-heading{
  font-family:var(--sans);
  font-size:clamp(23px,2.9vw,36px);font-weight:300;letter-spacing:-.035em;line-height:1.1;
  color:#fff;text-wrap:balance;
}

/* quiet fallback panel (edges of the list) */
.a-pager-index{background:#132b45}
.a-pager-index::after{background:linear-gradient(150deg,rgba(19,43,69,1),rgba(6,18,28,1))}
.a-pager-index .a-pager-heading{color:#e7eef6;font-style:italic;font-weight:300}

/* hover / focus */
.a-pager-panel:hover .a-pager-media img,
.a-pager-panel:focus-visible .a-pager-media img{transform:scale(1.11)}
.a-pager-prev:hover .a-pager-arrow,
.a-pager-prev:focus-visible .a-pager-arrow{transform:translateX(-6px)}
.a-pager-next:hover .a-pager-arrow,
.a-pager-next:focus-visible .a-pager-arrow{transform:translateX(6px)}
.a-pager-panel:hover,.a-pager-panel:focus-visible{background:var(--p-navy)}
.a-pager-panel:focus-visible{outline:2px solid #9dc4ed;outline-offset:-6px}

/* ========================================================= RESPONSIVE == */
@media (max-width:900px){
  .a-article-body .h-imgtext-media{
    width:min(var(--a-fig), 100vw - (2 * var(--a-gut)));
  }
}
@media (max-width:720px){
  .a-hero{
    min-height:60dvh;
    align-items:flex-end;
  }
  .a-hero-overlay{padding-block:clamp(48px,16vw,90px) clamp(24px,6vw,34px)}
  .a-hero-inner{width:calc(100% - 40px)}
  .a-title{font-size:clamp(32px,9vw,46px);max-width:none}
  .a-lead-inner{width:calc(100% - 40px);padding:clamp(32px,10vw,48px) 0 8px}
  .a-lead-text{font-size:19px}
  /* reading column + breakouts fill the width with a 20px gutter */
  .a-article{--a-gut:20px}
  .a-article-body .image-text{width:calc(100% - 40px)}
  .a-article-body .h-imgtext-body{font-size:17px}
  .a-article-body .h-imgtext-media{
    width:100%;margin-left:0;transform:none;
  }
  .a-article-body .h-imgtext-media img{height:clamp(220px,54vw,360px)}
  /* tables: stop breaking out, scroll horizontally instead of crushing */
  .a-article-body .h-imgtext-body table{
    display:block;width:100%;margin-left:0;transform:none;
    overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;
  }
  .a-signature{gap:16px}
  .a-pager{grid-template-columns:1fr}
  .a-pager-panel{min-height:200px;text-align:left;align-items:flex-end;justify-content:flex-start}
  .a-pager-next{text-align:left;justify-content:flex-start}
  .a-pager-next .a-pager-inner{align-items:flex-start}
  .a-pager-panel + .a-pager-panel{border-left:0;border-top:1px solid rgba(255,255,255,.14)}
}
@media (max-width:430px){
  .a-hero{min-height:58dvh}
}

/* ---------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion:reduce){
  .a-pager-media img,.a-pager-arrow,.a-pager-panel{transition:none}
  .a-pager-panel:hover .a-pager-media img,
  .a-pager-panel:focus-visible .a-pager-media img{transform:scale(1.04)}
  .a-pager-prev:hover .a-pager-arrow,.a-pager-prev:focus-visible .a-pager-arrow,
  .a-pager-next:hover .a-pager-arrow,.a-pager-next:focus-visible .a-pager-arrow{transform:none}
  .a-progress{display:none}
}

/* Orchestrator fix: base image-text styles pad the text panel by 70px,
   squeezing the article column from 820px to 680px — flatten it here. */
.a-article-body .image-text>div:first-child{padding:0}
@media(max-width:720px){.a-article-body .image-text>div:first-child{padding:0}}