/*
 * Shared "longread" design system for Wagtail-powered special projects.
 * Ports the component vocabulary designed in /design/Water/ and
 * /design/Georgia/ (hero, drop-cap intros, pull-quotes, image breaks,
 * stat rows, video embeds, expert Q&A, chapter-chain navigation) into a
 * single reusable stylesheet driven by CSS custom properties so each
 * project can simply override --accent / --accent-deep.
 */
.specials-page{
  --deep:#0b3a4a;--deep-2:#072631;
  --teal:#1f8a9e;--teal-light:#cfeaee;
  --reed:#5c7a52;--reed-light:#e2ead9;
  --sand:#e3d3ab;
  --ink:#1c2b2c;--ink-2:#54635f;--ink-3:#8b9794;
  --cream:#f5f8f6;--cream-2:#e9f0ec;--line:#dbe5e0;
  --shadow:0 10px 40px rgba(8,40,50,.14);
  --font-ui:'Inter',system-ui,sans-serif;
  --font-serif:'Source Serif 4',Georgia,serif;
  --accent:#1f8a9e;--accent-deep:#0d3340;
  font-family:var(--font-ui);color:var(--ink);background:var(--cream);line-height:1.6;
}
.specials-page a{color:inherit;}
.specials-page img{display:block;max-width:100%;}

.specials-page .topbar{
  background:var(--deep-2);color:rgba(255,255,255,.78);font-size:.8rem;
  padding:14px 28px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;
}
.specials-page .topbar a{text-decoration:none;color:rgba(255,255,255,.78);font-weight:600;letter-spacing:.04em;}
.specials-page .topbar a:hover{color:#fff;}
.specials-page .topbar .crumbs span{opacity:.55;margin:0 6px;}

/* HERO (used on both the project index page and chapter pages) */
.specials-page .s-hero{
  position:relative;min-height:64vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;
  background:
    linear-gradient(180deg, rgba(7,38,49,.3) 0%, rgba(7,38,49,.6) 60%, rgba(7,38,49,.94) 100%),
    linear-gradient(135deg,var(--accent) 0%,var(--accent-deep) 100%);
}
.specials-page .s-hero img.cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;mix-blend-mode:overlay;opacity:.55;}
.specials-page .s-hero-inner{position:relative;z-index:1;max-width:1040px;margin:0 auto;padding:0 28px 70px;width:100%;}
.specials-page .s-kicker{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--teal-light);margin-bottom:18px;}
.specials-page .s-hero h1{font-family:var(--font-serif);font-weight:600;font-size:clamp(2.2rem,5.6vw,3.8rem);line-height:1.12;letter-spacing:-.01em;max-width:880px;margin-bottom:18px;}
.specials-page .s-hero .sub{font-size:clamp(1rem,1.8vw,1.18rem);color:rgba(255,255,255,.86);max-width:680px;font-family:var(--font-serif);}

/* MISSION CALLOUT (project index page) */
.specials-page .mission{
  max-width:1040px;margin:54px auto;padding:32px 36px;border-radius:18px;
  background:linear-gradient(135deg,var(--reed-light),var(--teal-light));
  border:1px solid var(--line);
}
.specials-page .mission .lab{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--accent-deep);margin-bottom:12px;}
.specials-page .mission p{font-family:var(--font-serif);font-size:1.12rem;line-height:1.75;color:var(--deep);}

/* ARTICLE BODY */
.specials-page .article{max-width:1040px;margin:0 auto;padding:54px 28px;}
.specials-page .article h2{font-family:var(--font-serif);font-size:clamp(1.5rem,3vw,2.1rem);font-weight:600;color:var(--deep);margin:46px 0 18px;letter-spacing:-.01em;}
.specials-page .article h2:first-child{margin-top:0;}
.specials-page .article p{font-family:var(--font-serif);font-size:1.12rem;line-height:1.85;color:var(--ink);margin-bottom:22px;max-width:1040px;}
.specials-page .article p strong{color:var(--deep);font-weight:600;}
.specials-page .article .drop-cap > p:first-of-type::first-letter,
.specials-page .article > p:first-of-type::first-letter{
  font-family:var(--font-serif);font-size:4.4rem;font-weight:700;line-height:.78;float:left;
  margin:.07em .2em 0 0;color:var(--accent);
}
.specials-page .article ul{margin:0 0 22px 0;padding-left:0;list-style:none;}
.specials-page .article ul li{
  font-family:var(--font-serif);font-size:1.06rem;line-height:1.7;color:var(--ink);
  padding:12px 0 12px 30px;border-bottom:1px solid var(--line);position:relative;
}
.specials-page .article ul li::before{content:"";position:absolute;left:4px;top:21px;width:9px;height:9px;border-radius:50%;background:var(--accent);}
.specials-page .article ul li b{color:var(--deep);}

/* PULL QUOTE */
.specials-page .pull-quote{
  max-width:1040px;margin:46px auto;padding:8px 0 8px 34px;border-left:4px solid var(--accent);
}
.specials-page .pull-quote .mark{font-family:var(--font-serif);font-size:3.4rem;line-height:.6;color:var(--accent);display:block;margin-bottom:6px;}
.specials-page .pull-quote p{font-family:var(--font-serif);font-size:clamp(1.3rem,2.6vw,1.7rem);font-weight:500;color:var(--deep);line-height:1.5;letter-spacing:-.01em;}
.specials-page .pull-quote .src{margin-top:14px;font-family:var(--font-ui);font-size:.84rem;color:var(--ink-2);letter-spacing:.04em;}

/* IMAGES */
.specials-page .img-break{max-width:1320px;margin:50px auto;padding:0 28px;}
.specials-page .img-break img{width:100%;height:420px;object-fit:cover;border-radius:18px;}
.specials-page .img-pair{max-width:1040px;margin:50px auto;padding:0 28px;display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.specials-page .img-pair img{width:100%;height:300px;object-fit:cover;border-radius:16px;}
.specials-page .cap{font-size:.84rem;color:var(--ink-2);margin-top:10px;line-height:1.55;}

/* STAT ROW */
.specials-page .stat-row{
  max-width:1040px;margin:50px auto;padding:0 28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px;
}
.specials-page .stat-row .s{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 22px;}
.specials-page .stat-row .s .n{font-family:var(--font-serif);font-weight:700;color:var(--accent-deep);font-size:1.9rem;margin-bottom:6px;}
.specials-page .stat-row .s .l{font-size:.86rem;color:var(--ink-2);line-height:1.5;}

/* VIDEO */
.specials-page .video-block{max-width:1040px;margin:54px auto;padding:0 28px;}
.specials-page .video-block .label{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.specials-page .video-block .label span{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--accent-deep);}
.specials-page .video-block .label .line{flex:1;height:1px;background:var(--line);}
.specials-page .video-frame{border-radius:16px;overflow:hidden;box-shadow:var(--shadow);background:#000;}
.specials-page .ratio{position:relative;padding-top:56.25%;}
.specials-page .ratio iframe,.specials-page .ratio embed{position:absolute;inset:0;width:100%;height:100%;border:0;}
.specials-page .video-caption{margin-top:14px;font-size:.86rem;color:var(--ink-2);line-height:1.6;max-width:760px;}

/* Q&A (expert interviews) */
.specials-page .qa{max-width:1040px;margin:46px auto;padding:0 28px;}
.specials-page .qa-item{padding:24px 0;border-bottom:1px solid var(--line);}
.specials-page .qa-item .q{font-family:var(--font-ui);font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;}
.specials-page .qa-item .a{font-family:var(--font-serif);font-size:1.12rem;line-height:1.8;color:var(--deep);}

/* EXPERT HERO */
.specials-page .expert-hero{max-width:1040px;margin:0 auto;padding:54px 28px 0;display:flex;align-items:center;gap:28px;flex-wrap:wrap;}
.specials-page .portrait-badge{width:120px;height:120px;border-radius:50%;overflow:hidden;border:3px solid var(--accent);flex:none;background:linear-gradient(135deg,var(--accent),var(--accent-deep));}
.specials-page .portrait-badge img{width:100%;height:100%;object-fit:cover;}
.specials-page .expert-hero .role{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--accent-deep);margin-bottom:6px;}
.specials-page .expert-hero h1{font-family:var(--font-serif);font-size:clamp(1.6rem,3.4vw,2.2rem);color:var(--deep);font-weight:600;}

/* INDEX PAGE — chapter & expert grids */
.specials-page .grid-section{max-width:1320px;margin:64px auto;padding:0 28px;}
.specials-page .grid-section h2{font-family:var(--font-serif);font-size:clamp(1.6rem,3.2vw,2.3rem);color:var(--deep);margin-bottom:30px;}
.specials-page .card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px;}

/* Special-projects index: nested inside the site-wide .page/.two-col
   layout (sidebar alongside), so drop grid-section's own centering/padding
   and force exactly 2 cards per row instead of the auto-fill above. */
.specials-page .grid-section--2col{max-width:none;margin:32px 0;padding:0;}
.specials-page .grid-section--2col .card-grid{grid-template-columns:1fr 1fr;}
@media(max-width:600px){
  .specials-page .grid-section--2col .card-grid{grid-template-columns:1fr;}
}
/* Card proportions matched to the main site's grid card (.gallery-card in
   new-design.css): 3:2 thumb instead of a fixed 190px height, 12px radius,
   tighter body padding/type scale — so this listing looks like the rest
   of uzdaily.uz rather than the taller/rounder specials-project cards. */
.specials-page .grid-section--2col .card{border-radius:12px;}
.specials-page .grid-section--2col .card .thumb{height:auto;aspect-ratio:3/2;}
.specials-page .grid-section--2col .card .body{padding:14px;}
/* Exact match to .gc-title (new-design.css) — same weight, size, color and
   line-clamp as every other card title on uzdaily.uz. The base .card h3
   rule above uses the specials-page teal (--deep) and a larger size, which
   read as a different font at a glance even though the family is the same. */
.specials-page .grid-section--2col .card h3{
  font-size:15px;font-weight:600;line-height:1.4;margin:0 0 8px;color:#111827;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.specials-page .card{
  display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);border-radius:18px;
  overflow:hidden;transition:transform .25s ease, box-shadow .25s ease;
}
.specials-page .card:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.specials-page .card .thumb{height:190px;background:linear-gradient(135deg,var(--accent),var(--reed));}
.specials-page .card .thumb img{width:100%;height:100%;object-fit:cover;}
.specials-page .card .body{padding:22px 24px;}
.specials-page .card .lab{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--teal);margin-bottom:10px;}
.specials-page .card h3{font-family:var(--font-serif);font-size:1.24rem;font-weight:600;color:var(--deep);line-height:1.35;}
.specials-page .card .date{display:block;font-size:.8rem;color:var(--muted,#8a8f98);margin-top:10px;}
.specials-page .grid-section--2col .card .date{font-size:12px;font-weight:500;color:#6b7280;margin-top:0;}

/* NEXT-CHAPTER CHAIN CARD */
.specials-page .next{max-width:1320px;margin:70px auto 0;padding:0 28px 90px;}
.specials-page .next-card{
  display:grid;grid-template-columns:1fr 1.4fr;gap:0;background:#fff;border:1px solid var(--line);
  border-radius:20px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .3s ease, box-shadow .3s ease;
}
.specials-page .next-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.specials-page .next-card .thumb{min-height:240px;background:linear-gradient(135deg,var(--accent),var(--accent-deep));}
.specials-page .next-card .thumb img{width:100%;height:100%;object-fit:cover;}
.specials-page .next-card .body{padding:36px 38px;display:flex;flex-direction:column;justify-content:center;}
.specials-page .next-card .lab{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--teal);margin-bottom:12px;}
.specials-page .next-card h3{font-family:var(--font-serif);font-size:1.6rem;font-weight:600;color:var(--deep);margin-bottom:12px;line-height:1.3;}
.specials-page .next-card p{color:var(--ink-2);font-size:.96rem;line-height:1.65;margin-bottom:0;}

/* BLOCK STYLE VARIANTS — editor-selectable "look" for content blocks
   (see specials/blocks.py BLOCK_STYLE_CHOICES) */
.specials-page .block-style-highlight{
  background:var(--cream-2);border-radius:18px;padding:36px 32px;
}
.specials-page .block-style-light{
  background:#fff;border-radius:18px;padding:36px 32px;box-shadow:var(--shadow);
}
.specials-page .block-style-dark{
  background:var(--deep-2);border-radius:18px;padding:36px 32px;color:#fff;
}
.specials-page .block-style-dark p,
.specials-page .block-style-dark .cap,
.specials-page .block-style-dark .src,
.specials-page .block-style-dark .l,
.specials-page .block-style-dark h2,
.specials-page .block-style-dark h3{color:#fff;}
.specials-page .block-style-dark .n{color:var(--teal-light);}
.specials-page .block-style-dark .s{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);}
.specials-page .block-style-dark .qa-item{border-color:rgba(255,255,255,.14);}
.specials-page .block-style-dark .qa-item .q{color:var(--teal-light);}

.specials-page .block-style-full-bleed{
  max-width:none;width:100vw;margin-left:50%;transform:translateX(-50%);padding-left:0;padding-right:0;
}
.specials-page .block-style-full-bleed.img-break img,
.specials-page .block-style-full-bleed.img-pair img{border-radius:0;}
.specials-page .block-style-full-bleed.img-pair{gap:0;}

@media(max-width:760px){
  .specials-page .img-pair{grid-template-columns:1fr;}
  .specials-page .stat-row{grid-template-columns:1fr;}
  .specials-page .next-card{grid-template-columns:1fr;}
  .specials-page .card-grid{grid-template-columns:1fr;}
}