/* ============================================================
   LUCANIA IS MORE — Articolo (long-form reportage)
   Builds on styles.css. Three opening directions via [data-hero].
   ============================================================ */

/* tints — Basilicata palette (shared with archive) */
image-slot.t-verde  { background:linear-gradient(155deg,#6f7d68 0%,#454f3f 55%,#2c3329 100%); }
image-slot.t-oro    { background:linear-gradient(150deg,#d8a93a 0%,#b07f1f 60%,#7a5512 100%); }
image-slot.t-terra  { background:linear-gradient(150deg,#bd6f43 0%,#8a4526 100%); }
image-slot.t-blu    { background:linear-gradient(150deg,#5586a3 0%,#2f5168 100%); }
image-slot.t-rugg   { background:linear-gradient(150deg,#a8503a 0%,#6e2f22 100%); }
image-slot.t-pietra { background:linear-gradient(150deg,#9c8f7a 0%,#6b5f4d 100%); }
image-slot.t-notte  { background:linear-gradient(150deg,#3a4a5a 0%,#1f2730 100%); }
image-slot.t-argilla{ background:linear-gradient(150deg,#cbb08a 0%,#9a7a55 55%,#6e5234 100%); }

/* ============================================================
   READING PROGRESS — thin bar pinned under the navbar
   ============================================================ */
.read-prog{ position:fixed; left:0; right:0; top:78px; height:3px; z-index:49;
  background:rgba(28,28,28,.10); }
.read-prog span{ display:block; height:100%; width:0; background:var(--red);
  transition:width .08s linear; }
body[data-hero="immersivo"] .read-prog{ background:rgba(255,249,227,.16); }

/* ============================================================
   HERO — shared scaffold, three directions
   ============================================================ */
.ahero{ position:relative; }
.ah-media{ position:relative; overflow:hidden; background:#1C1C1C; }
.ah-media image-slot{ display:block; width:100%; height:100%; }
.ahscrim{ position:absolute; inset:0; pointer-events:none; }
.ah-text .shell{ display:flex; flex-direction:column; align-items:flex-start; }

.ahero .back{ display:inline-flex; align-items:center; gap:9px;
  font:600 11.5px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase;
  padding-bottom:5px; transition:gap .2s; }
.ahero .back .arr{ font-size:14px; }
.ahero .back:hover{ gap:14px; }
.ahero .alab{ display:flex; align-items:center; gap:11px; }
.ahero .alab .cat{ color:var(--red); font:600 11px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; }
.ahero .alab .sep{ width:3px; height:3px; border-radius:50%; background:var(--ink-40); }
.ahero .alab .place{ font:500 11px/1 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:var(--ink-55); }
.ahero h1{ font-family:var(--sans); font-weight:700; letter-spacing:-.02em; margin:0;
  text-wrap:balance; }
.ahero .adek{ font-family:var(--serif); font-style:italic; font-weight:400;
  line-height:1.42; text-wrap:pretty; }
.abyline{ display:flex; align-items:center; gap:13px; flex-wrap:wrap;
  font:500 12.5px/1 var(--sans); letter-spacing:.03em; }
.abyline b{ font-weight:600; }
.abyline .dot{ width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.45; }
.abyline .av{ width:34px; height:34px; border-radius:50%; flex:0 0 34px; margin-right:3px;
  background:linear-gradient(150deg,#bd6f43,#8a4526); }

/* ---- DIRECTION A · IMMERSIVO (full-bleed dark, overlaid) ---- */
body[data-hero="immersivo"] .ahero{ height:92vh; min-height:660px; }
body[data-hero="immersivo"] .ah-media{ position:absolute; inset:0; }
body[data-hero="immersivo"] .ahscrim{
  background:
    linear-gradient(180deg, rgba(12,9,6,.5) 0%, rgba(12,9,6,0) 28%),
    linear-gradient(0deg, rgba(12,9,6,.92) 3%, rgba(12,9,6,.45) 34%, rgba(12,9,6,0) 64%); }
body[data-hero="immersivo"] .ah-text{ position:absolute; left:0; right:0; bottom:0;
  padding:0 0 7vh; }
body[data-hero="immersivo"] .ahero .back{ color:rgba(255,249,227,.78); margin-bottom:26px;
  border-bottom:1px solid rgba(255,249,227,.4); }
body[data-hero="immersivo"] .ahero .alab{ margin-bottom:20px; }
body[data-hero="immersivo"] .ahero .alab .cat{ color:#F4A200; }
body[data-hero="immersivo"] .ahero .alab .sep{ background:rgba(255,249,227,.5); }
body[data-hero="immersivo"] .ahero .alab .place{ color:rgba(255,249,227,.62); }
body[data-hero="immersivo"] .ahero h1{ color:#FFF9E3; font-size:clamp(38px,6vw,86px);
  line-height:1.0; max-width:17ch; }
body[data-hero="immersivo"] .ahero .adek{ color:rgba(255,249,227,.8);
  font-size:clamp(18px,1.8vw,24px); max-width:50ch; margin:26px 0 0; }
body[data-hero="immersivo"] .abyline{ color:rgba(255,249,227,.72); margin:34px 0 0; }
body[data-hero="immersivo"] .abyline b{ color:#FFF9E3; }

/* ---- DIRECTION B · CLASSICO (cream, title over photo band) -- */
body[data-hero="classico"] .ahero{ padding:calc(78px + 64px) 0 0; }
body[data-hero="classico"] .ah-text{ order:0; padding-bottom:54px; }
body[data-hero="classico"] .ah-text .shell{ align-items:center; text-align:center; }
body[data-hero="classico"] .ahero .back{ color:var(--ink-55); align-self:center; margin-bottom:30px;
  border-bottom:1px solid var(--line); }
body[data-hero="classico"] .ahero .back:hover{ color:var(--red); }
body[data-hero="classico"] .ahero .alab{ justify-content:center; margin-bottom:24px; }
body[data-hero="classico"] .ahero h1{ color:var(--ink); font-size:clamp(36px,5.4vw,76px);
  line-height:1.02; max-width:18ch; }
body[data-hero="classico"] .ahero .adek{ color:var(--ink-70); font-size:clamp(19px,1.8vw,25px);
  max-width:54ch; margin:26px 0 0; }
body[data-hero="classico"] .abyline{ color:var(--ink-55); justify-content:center; margin:34px 0 0; }
body[data-hero="classico"] .abyline b{ color:var(--ink); }
body[data-hero="classico"] .ah-media{ order:1; height:clamp(360px,56vh,680px); }

/* ---- DIRECTION C · SPALLA (split: photo left, text right) --- */
body[data-hero="spalla"] .ahero{ display:grid; grid-template-columns:1.05fr .95fr;
  min-height:calc(100vh - 78px); margin-top:78px; }
body[data-hero="spalla"] .ah-media{ height:100%; }
body[data-hero="spalla"] .ah-text{ display:flex; align-items:center;
  padding:64px var(--pad); }
body[data-hero="spalla"] .ah-text .shell{ max-width:none; padding:0; }
body[data-hero="spalla"] .ahero .back{ color:var(--ink-55); margin-bottom:28px;
  border-bottom:1px solid var(--line); }
body[data-hero="spalla"] .ahero .back:hover{ color:var(--red); }
body[data-hero="spalla"] .ahero .alab{ margin-bottom:22px; }
body[data-hero="spalla"] .ahero h1{ color:var(--ink); font-size:clamp(34px,3.6vw,60px);
  line-height:1.04; max-width:15ch; }
body[data-hero="spalla"] .ahero .adek{ color:var(--ink-70); font-size:clamp(18px,1.5vw,22px);
  max-width:42ch; margin:24px 0 0; }
body[data-hero="spalla"] .abyline{ color:var(--ink-55); margin:32px 0 0; }
body[data-hero="spalla"] .abyline b{ color:var(--ink); }

/* ============================================================
   BODY — single reading column
   ============================================================ */
.abody{ padding:84px 0 24px; }
.acol{ max-width:680px; margin:0 auto; padding:0 var(--pad); }
.acol > p{ font-family:var(--read); font-size:21px; line-height:1.72; color:var(--ink); margin:0 0 30px;
  text-wrap:pretty; }
.acol > p a{ color:var(--red); border-bottom:1px solid rgba(169,16,19,.4); }
.acol > p a:hover{ border-color:var(--red); }

/* drop cap on the lead paragraph */
body[data-dropcap="on"] .acol .lead::first-letter{ float:left; font-family:var(--serif);
  font-weight:500; font-size:5.2em; line-height:.78; padding:6px 14px 0 0; color:var(--red); }
.acol .lead{ font-size:23.5px; line-height:1.62; }

.acol h2{ font-family:var(--sans); font-weight:700; font-size:clamp(26px,2.6vw,36px);
  line-height:1.12; letter-spacing:-.01em; margin:54px 0 22px; color:var(--ink); text-wrap:balance; }
.acol h2::before{ content:""; display:block; width:38px; height:2px; background:var(--red);
  margin-bottom:24px; }

.acol blockquote{ margin:48px 0; padding:0 0 0 0; }
.acol blockquote p{ font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(24px,2.6vw,33px); line-height:1.32; color:var(--ink); margin:0;
  text-align:center; text-wrap:balance; }
.acol blockquote cite{ display:block; font-family:var(--sans); font-style:normal;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-40);
  margin-top:22px; text-align:center; }

.acol .aend{ margin:46px 0 0; padding-top:36px; border-top:1px solid var(--line);
  color:var(--ink-40); font:500 12px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; }

/* ============================================================
   GALLERY — full-bleed photo set in the body
   ============================================================ */
.agallery{ margin:64px 0; }
.agallery .gg{ max-width:1180px; margin:0 auto; padding:0 var(--pad);
  display:grid; grid-template-columns:2fr 1fr; grid-template-rows:repeat(2,1fr); gap:14px; }
.agallery .gg image-slot{ display:block; width:100%; height:100%; border-radius:14px; }
.agallery .gg .g1{ grid-row:1 / span 2; aspect-ratio:auto; min-height:480px; }
.agallery .gg .g2,
.agallery .gg .g3{ min-height:233px; }
.agallery figcaption{ max-width:680px; margin:22px auto 0; padding:0 var(--pad);
  color:var(--ink-55); font-size:14px; line-height:1.55; }
.agallery figcaption b{ color:var(--ink); font-weight:600; }

/* ============================================================
   RELATED — continua a leggere
   ============================================================ */
.related{ background:#1C1C1C; color:#FFF9E3; padding:96px 0 108px; margin-top:60px;
  border-top:1px solid rgba(255,249,227,.08); }
.rel-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  padding-bottom:24px; margin-bottom:42px; border-bottom:1px solid rgba(255,249,227,.16); }
.rel-head h3{ font-family:var(--sans); font-weight:700; font-size:clamp(26px,3vw,40px);
  line-height:1; margin:0; color:#FFF9E3; }
.rel-head a{ font:600 12px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,249,227,.7); white-space:nowrap; display:inline-flex; gap:9px; align-items:center;
  padding-bottom:5px; border-bottom:1px solid rgba(255,249,227,.28); transition:.2s; }
.rel-head a:hover{ color:#fff; border-color:var(--red); }
.rel-head a .arr{ color:var(--red); }
.rel-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.rcard{ display:block; }
.rcard image-slot{ display:block; width:100%; aspect-ratio:4/3; border-radius:14px;
  overflow:hidden; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.rcard:hover image-slot{ transform:scale(1.03); }
.rcard .lab{ display:flex; align-items:center; gap:9px; margin:18px 0 12px; }
.rcard .lab .cat{ color:#F4A200; font:600 11px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; }
.rcard .lab .sep{ width:3px; height:3px; border-radius:50%; background:rgba(255,249,227,.45); }
.rcard .lab .place{ color:rgba(255,249,227,.55); font:500 11px/1 var(--sans); letter-spacing:.22em; text-transform:uppercase; }
.rcard h4{ font-family:var(--sans); font-weight:700; font-size:clamp(20px,1.7vw,24px);
  line-height:1.12; margin:0; color:#FFF9E3; text-wrap:balance; transition:color .2s; }
.rcard:hover h4{ color:#fff; }
.rcard .by{ display:flex; align-items:center; gap:9px; margin:14px 0 0;
  color:rgba(255,249,227,.55); font:500 11px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; }
.rcard .by::before{ content:""; width:18px; height:1px; background:rgba(255,249,227,.4); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  body[data-hero="spalla"] .ahero{ grid-template-columns:1fr; min-height:0; }
  body[data-hero="spalla"] .ah-media{ height:clamp(340px,52vh,560px); }
  body[data-hero="spalla"] .ah-text{ padding:48px var(--pad) 56px; }
  .agallery .gg{ grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .agallery .gg .g1{ grid-column:1 / -1; grid-row:auto; min-height:0; aspect-ratio:16/9; }
  .agallery .gg .g2, .agallery .gg .g3{ min-height:0; aspect-ratio:4/3; }
}
@media (max-width:760px){
  .rel-grid{ grid-template-columns:1fr; gap:30px; }
  .rcard image-slot{ aspect-ratio:16/9; }
}
@media (max-width:560px){
  body[data-hero="immersivo"] .ahero{ min-height:84vh; }
  body[data-hero="immersivo"] .ah-text{ padding-bottom:48px; }
  body[data-hero="classico"] .ahero{ padding-top:calc(78px + 40px); }
  body[data-hero="classico"] .ah-media{ height:clamp(240px,42vh,380px); }
  .abody{ padding:54px 0 16px; }
  .acol > p{ font-size:19px; }
  .acol .lead{ font-size:21px; }
  body[data-dropcap="on"] .acol .lead::first-letter{ font-size:4.2em; padding:4px 10px 0 0; }
  .agallery{ margin:44px 0; }
  .agallery .gg{ grid-template-columns:1fr; }
  .agallery .gg .g1{ aspect-ratio:4/3; }
  .related{ padding:64px 0 76px; }
  .rel-head{ flex-direction:column; align-items:flex-start; gap:14px; }
}