/* ============================================================
   LUCANIA IS MORE — Archivio Storie
   Editorial, magazine-grade: full-bleed cover + dark image tiles.
   Builds on styles.css.
   ============================================================ */

/* tints — Basilicata palette */
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-oliva  { background:linear-gradient(150deg,#8a8a5a 0%,#55552f 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%); }

/* ============================================================
   COVER — la storia in copertina, full-bleed
   ============================================================ */
.cover{ position:relative; height:92vh; min-height:640px; overflow:hidden; background:#1C1C1C; }
.cover image-slot{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.cover .cscrim{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(12,9,6,.55) 0%, rgba(12,9,6,0) 30%),
    linear-gradient(0deg, rgba(12,9,6,.9) 2%, rgba(12,9,6,.5) 30%, rgba(12,9,6,0) 62%); }
.cover .ctop{ position:absolute; top:0; left:0; right:0; z-index:3; padding:calc(78px + 30px) 0 0; }
.cover .ctop .row{ display:flex; align-items:center; justify-content:space-between;
  color:rgba(255,249,227,.72); }
.cover .ctop .ms{ display:inline-flex; align-items:center; gap:13px;
  font:600 11px/1 var(--sans); letter-spacing:.26em; text-transform:uppercase; }
.cover .ctop .ms::before{ content:""; width:30px; height:1px; background:var(--red); }
.cover .ctop .ed{ font:500 11px/1 var(--sans); letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,249,227,.55); }
.cover .cbody{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:0 0 7vh; }
.cover .clab{ display:flex; align-items:center; gap:11px; margin:0 0 22px; }
.cover .clab .rib{ background:var(--red); color:#FFF9E3; font:600 10px/1 var(--sans);
  letter-spacing:.2em; text-transform:uppercase; padding:8px 13px; white-space:nowrap; }
.cover .clab .cat{ color:#F4A200; font:600 11px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; }
.cover .clab .sep{ width:3px; height:3px; border-radius:50%; background:rgba(255,249,227,.5); }
.cover .clab .place{ color:rgba(255,249,227,.62); font:500 11px/1 var(--sans);
  letter-spacing:.22em; text-transform:uppercase; }
.cover h1{ font-family:var(--sans); font-weight:700; color:#FFF9E3;
  font-size:clamp(38px,6vw,90px); line-height:1.0; letter-spacing:-.02em; margin:0;
  max-width:18ch; text-wrap:balance; }
.cover .cdek{ color:rgba(255,249,227,.74); font-size:clamp(16px,1.5vw,19px); line-height:1.55;
  max-width:54ch; margin:26px 0 0; text-wrap:pretty; }
.cover .cgo{ display:flex; align-items:center; gap:20px; margin:34px 0 0; }
.cover .cgo .read{ display:inline-flex; align-items:center; gap:12px; color:#FFF9E3;
  font:600 13px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;
  padding:15px 26px; background:var(--red); transition:.2s; }
.cover .cgo .read .arr{ font-size:15px; }
.cover .cgo .read:hover{ gap:18px; background:#fff; color:var(--ink); }
.cover .cgo .min{ color:rgba(255,249,227,.6); font:500 12px/1 var(--sans);
  letter-spacing:.18em; text-transform:uppercase; }

/* ============================================================
   INTRO BAND — l'archivio (cream, con watermark)
   ============================================================ */
.arc-intro{ position:relative; overflow:hidden; padding:108px 0 78px; border-bottom:1px solid var(--line-strong); }
.arc-intro .wm{ position:absolute; right:-2%; top:50%; transform:translateY(-50%);
  font-family:var(--serif); font-style:italic; font-weight:500; line-height:1;
  font-size:min(34vw,460px); color:rgba(28,28,28,.045); letter-spacing:-.03em;
  white-space:nowrap; z-index:1; pointer-events:none; user-select:none; }
.arc-intro .shell{ position:relative; z-index:2; }
.arc-intro .kick{ color:var(--red); display:inline-flex; align-items:center; gap:13px; }
.arc-intro .kick::before{ content:""; width:32px; height:1px; background:var(--red); }
.arc-intro h2{ font-family:var(--sans); font-weight:800; font-size:clamp(40px,6vw,92px);
  line-height:.98; letter-spacing:-.022em; margin:24px 0 0; max-width:16ch; text-wrap:balance; }
.arc-intro h2 em{ font-style:italic; color:var(--red); }
.arc-intro .lede{ font-family:var(--sans); font-size:clamp(16px,1.5vw,18.5px); line-height:1.6;
  color:var(--ink-70); max-width:50ch; margin:30px 0 0; text-wrap:pretty; }
.arc-intro .stats{ display:flex; gap:54px; margin:48px 0 0; }
.arc-intro .stat .n{ font-family:var(--sans); font-weight:700; font-size:40px; line-height:.9; }
.arc-intro .stat .l{ display:block; margin-top:10px; color:var(--ink-55);
  font:500 11px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; }

/* ============================================================
   CONTROLS — categorie (pillole arrotondate) · ricerca · vista
   ============================================================ */
.controls{ position:sticky; top:78px; z-index:30; background:var(--cream);
  padding:18px 0; border-bottom:1px solid var(--line-strong); }
.controls .row{ display:flex; align-items:center; justify-content:space-between; gap:28px; }
.arc-cats{ display:flex; flex-wrap:wrap; gap:8px; }
.arc-cats button{ background:none; border:1px solid var(--line-strong); border-radius:100px;
  color:var(--ink); font:600 11.5px/1 var(--sans); letter-spacing:.13em; text-transform:uppercase;
  padding:11px 20px; transition:.16s; cursor:pointer; }
.arc-cats button:hover{ border-color:var(--ink); }
.arc-cats button.active{ background:var(--red); border-color:var(--red); color:#fff; }
.ctrl-right{ display:flex; align-items:center; gap:18px; }
.search{ display:flex; align-items:center; gap:10px; border:1px solid var(--line-strong);
  border-radius:100px; padding:10px 18px; min-width:240px; transition:border-color .2s; }
.search:focus-within{ border-color:var(--ink); }
.search svg{ flex:0 0 16px; }
.search svg path, .search svg circle{ stroke:var(--ink-40); }
.search input{ flex:1; background:none; border:0; outline:none; color:var(--ink);
  font-family:var(--sans); font-size:15px; }
.search input::placeholder{ color:var(--ink-40); }
.view{ display:flex; border:1px solid var(--line-strong); border-radius:100px; overflow:hidden; }
.view button{ width:42px; height:42px; background:none; border:0; display:grid; place-items:center;
  color:var(--ink-55); transition:.16s; cursor:pointer; }
.view button.active{ background:var(--ink); color:#fff; }
.view button:not(.active):hover{ color:var(--ink); }

.arc-count{ margin:34px 0 4px; color:var(--ink-55);
  font:500 12px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; }
.arc-count b{ color:var(--ink); font-weight:600; }

/* ============================================================
   TILES + LIST  (the two layout variants)
   ============================================================ */
.archive-wrap{ padding-bottom:120px; }

/* shared pieces */
.acard h3{ font-family:var(--sans); font-weight:700; letter-spacing:-.015em; margin:0;
  text-wrap:balance; transition:color .2s; }
.acard .lab{ display:flex; align-items:center; gap:9px; }
.acard .lab .cat{ font:600 11px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; }
.acard .lab .sep{ width:3px; height:3px; border-radius:50%; }
.acard .lab .place{ letter-spacing:.22em; font:500 11px/1 var(--sans); text-transform:uppercase; }
.acard .meta{ display:flex; align-items:center; gap:12px;
  font:500 11px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; }
.acard.hide{ display:none !important; }

/* ---- VARIANT A · TESSERE (image tiles, overlaid text) ---- */
[data-layout="grid"] .stories{ display:grid; grid-template-columns:repeat(2,1fr); gap:30px; align-items:start; grid-auto-flow:dense; }
[data-layout="grid"] .acard{ position:relative; display:block;
  overflow:hidden; border-radius:20px; background:#1C1C1C; color:#FFF9E3; }
[data-layout="grid"] .acard .media{ position:relative; width:100%; }
[data-layout="grid"] .acard .media image-slot{ display:block; width:100%; aspect-ratio:4/5;
  transition:transform .9s cubic-bezier(.2,.7,.2,1); }
[data-layout="grid"] .acard .media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(11,8,5,.9) 0%, rgba(11,8,5,.5) 30%, rgba(11,8,5,0) 60%);
  transition:opacity .3s; }
[data-layout="grid"] .acard:hover .media image-slot{ transform:scale(1.045); }
[data-layout="grid"] .acard .meta{ position:absolute; top:20px; left:20px; z-index:3;
  color:rgba(255,249,227,.85); }
[data-layout="grid"] .acard .meta .arr{ display:none; }
[data-layout="grid"] .acard .info{ position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:28px 26px 24px; }
[data-layout="grid"] .acard .lab{ margin:0 0 13px; }
[data-layout="grid"] .acard .lab .cat{ color:#F4A200; }
[data-layout="grid"] .acard .lab .sep{ background:rgba(255,249,227,.45); }
[data-layout="grid"] .acard .lab .place{ color:rgba(255,249,227,.6); }
[data-layout="grid"] .acard h3{ color:#FFF9E3; font-size:clamp(22px,2vw,29px); line-height:1.08; }
[data-layout="grid"] .acard:hover h3{ color:#fff; }
[data-layout="grid"] .acard .dek{ display:none; }
[data-layout="grid"] .acard .by{ display:flex; align-items:center; gap:9px; margin:14px 0 0;
  color:rgba(255,249,227,.7); font:500 11px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; }
[data-layout="grid"] .acard .by::before{ content:""; width:18px; height:1px; background:rgba(255,249,227,.45); }
/* a few hero tiles span the full width for editorial rhythm */
[data-layout="grid"] .acard.s-span{ grid-column:1 / -1; }
[data-layout="grid"] .acard.s-span .media image-slot{ aspect-ratio:21/9; }
[data-layout="grid"] .acard.s-span h3{ font-size:clamp(26px,2.8vw,40px); max-width:18ch; }
[data-layout="grid"] .acard.s-span .info{ padding:34px 36px 30px; }

/* ---- VARIANT B · ELENCO (editorial index rows) ---- */
[data-layout="list"] .stories{ display:block; border-top:1px solid var(--line); }
[data-layout="list"] .acard{ display:grid; grid-template-columns:120px minmax(0,1fr) auto;
  gap:36px; align-items:center; padding:32px 0; border-bottom:1px solid var(--line); color:var(--ink); }
[data-layout="list"] .acard .media{ width:120px; order:1; }
[data-layout="list"] .acard .media image-slot{ display:block; width:100%; aspect-ratio:4/3; border-radius:12px; }
[data-layout="list"] .acard .info{ min-width:0; order:2; }
[data-layout="list"] .acard .lab{ margin:0 0 11px; }
[data-layout="list"] .acard .lab .cat{ color:var(--red); }
[data-layout="list"] .acard .lab .sep{ background:rgba(169,16,19,.5); }
[data-layout="list"] .acard .lab .place{ color:var(--ink-40); }
[data-layout="list"] .acard h3{ color:var(--ink); font-size:clamp(24px,2.2vw,32px); line-height:1.06; }
[data-layout="list"] .acard:hover h3{ color:var(--red); }
[data-layout="list"] .acard .dek{ color:var(--ink-55); line-height:1.55; font-size:15px;
  margin:10px 0 0; max-width:54ch; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden; }
[data-layout="list"] .acard .by{ display:block; margin:12px 0 0; color:var(--ink-40);
  font:500 11px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; }
[data-layout="list"] .acard .meta{ order:3; justify-content:flex-end; white-space:nowrap; color:var(--ink-40); }
[data-layout="list"] .acard .meta .arr{ color:var(--red); font-size:15px; opacity:0; transition:.2s; }
[data-layout="list"] .acard:hover .meta .arr{ opacity:1; }

/* hide excerpts tweak (list view) */
body[data-deks="off"] [data-layout="list"] .acard .dek{ display:none; }
/* column-count tweak (tile view) */
[data-layout="grid"][data-cols="3"] .stories{ grid-template-columns:repeat(3,1fr); gap:24px; grid-auto-flow:dense; }
[data-layout="grid"][data-cols="3"] .acard h3{ font-size:clamp(19px,1.5vw,23px); }
[data-layout="grid"][data-cols="3"] .acard.s-span .media image-slot{ aspect-ratio:21/8; }

/* empty state */
.arc-empty{ display:none; padding:80px 0 90px; text-align:center; border-top:1px solid var(--line); }
.arc-empty.show{ display:block; }
.arc-empty h3{ font-family:var(--sans); font-weight:700; font-size:30px; margin:0; color:var(--ink); }
.arc-empty p{ color:var(--ink-55); margin:14px 0 0; font-size:16px; }
.arc-empty button{ margin-top:24px; background:none; border:1px solid var(--line-strong); border-radius:100px;
  color:var(--ink); font:600 11.5px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase;
  padding:13px 24px; transition:.18s; cursor:pointer; }
.arc-empty button:hover{ background:var(--red); border-color:var(--red); color:#fff; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  [data-layout="list"] .acard{ grid-template-columns:96px minmax(0,1fr) auto; gap:24px; }
  [data-layout="list"] .acard .media{ width:96px; }
  [data-layout="list"] .acard .dek{ display:none; }
}
@media (max-width:760px){
  .controls .row{ flex-direction:column; align-items:stretch; gap:16px; }
  .ctrl-right{ justify-content:space-between; }
  .search{ flex:1; min-width:0; }
  .arc-intro .stats{ gap:34px; flex-wrap:wrap; }
}
@media (max-width:560px){
  .cover{ min-height:78vh; }
  .cover .cgo{ flex-direction:column; align-items:flex-start; gap:16px; }
  .arc-intro{ padding:64px 0 54px; }
  [data-layout="grid"] .stories{ grid-template-columns:1fr; }
  [data-layout="grid"] .acard.s-span .media image-slot{ aspect-ratio:4/3; }
  [data-layout="list"] .acard{ grid-template-columns:1fr; gap:14px; padding:26px 0; }
  [data-layout="list"] .acard .media{ display:none; }
  [data-layout="list"] .acard .meta{ justify-content:flex-start; }
  .arc-cats button{ padding:10px 16px; font-size:11px; }
}