@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════
   KLETNO — podstrona: Historia (kronika z osią czasu + pocztówki)
   Style TYLKO dla tej podstrony (wspólne: css/style.css)
   ═══════════════════════════════════════════════════════════════ */

/* archiwalny ton zdjęcia w nagłówku */
.subhero--hist .subhero__bg img{ filter:grayscale(.12) sepia(.14) contrast(1.03); }

/* ── LEAD ──────────────────────────────────────────────────── */
.hist-lead{ max-width:60ch; }
.hist-lead p{ font-size:clamp(1.05rem,1.4vw,1.28rem); color:var(--ink-soft); font-weight:300; line-height:1.8; margin-bottom:1em; }
.hist-lead .drop{ float:left; font-family:var(--serif); font-size:4em; line-height:.72; padding:.06em .12em 0 0; color:var(--clay); font-weight:500; }
.hist-stats{ display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,52px); margin-top:clamp(30px,4vh,44px); padding-top:clamp(24px,3vh,34px); border-top:1px solid var(--line); }
.hist-stats .s b{ display:block; font-family:var(--serif); font-size:clamp(1.9rem,3vw,2.6rem); color:var(--clay); line-height:1; }
.hist-stats .s span{ font-size:12px; color:var(--ink-muted); letter-spacing:.03em; }

/* ── KRONIKA — narracja z osią czasu ───────────────────────── */
.chron{ position:relative; max-width:1000px; margin:0 auto; }
.chron::before{ content:''; position:absolute; left:172px; top:12px; bottom:12px; width:1px; background:var(--clay); opacity:.3; }
.era{ display:grid; grid-template-columns:172px 1fr; gap:clamp(30px,4vw,60px); padding-bottom:clamp(52px,8vh,100px); }
.era:last-child{ padding-bottom:0; }
.era__aside{ position:relative; text-align:right; padding-right:26px; }
.era__aside.sticky{ position:sticky; top:110px; }
.era__period{ font-family:var(--serif); font-weight:500; font-size:clamp(1.5rem,2.4vw,2.15rem); color:var(--clay); line-height:1.05; }
.era__period small{ display:block; font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-muted); margin-top:9px; }
.era__aside::after{ content:''; position:absolute; right:-6px; top:12px; width:12px; height:12px; border-radius:50%; background:var(--clay); box-shadow:0 0 0 4px var(--cream-deep); }
.era__body{ min-width:0; }
.era__body h2{ font-family:var(--serif); font-weight:500; font-size:clamp(1.7rem,2.9vw,2.5rem); color:var(--ink); line-height:1.12; margin-bottom:.55em; letter-spacing:-0.01em; }
.era__body p{ font-size:clamp(1rem,1.05vw,1.08rem); color:var(--ink-soft); font-weight:300; line-height:1.82; margin-bottom:1.1em; }
.era__body p:last-child{ margin-bottom:0; }
.era__body .drop{ float:left; font-family:var(--serif); font-size:3.3em; line-height:.72; padding:.05em .11em 0 0; color:var(--clay); font-weight:500; }
.era__body b{ color:var(--ink); font-weight:600; }

/* figura z pocztówką */
.hfig{ margin:26px 0 28px; }
.hfig--wide{ margin-inline:0; }
.hfig img{ width:100%; display:block; border-radius:12px; border:1px solid var(--line); box-shadow:var(--shadow-md); filter:sepia(.14) contrast(1.02); }
.hfig figcaption{ margin-top:11px; font-size:12px; color:var(--ink-muted); font-style:italic; display:flex; gap:9px; align-items:baseline; }
.hfig figcaption::before{ content:''; width:18px; height:1px; background:var(--clay); flex:0 0 auto; position:relative; top:-4px; }
.hfig--split{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.hfig--split img{ aspect-ratio:4/3; height:auto; object-fit:cover; }
.hfig--split figcaption{ grid-column:1 / -1; }

/* callout (Marianna Orańska, Jakub Sądej) */
.hcallout{ margin:26px 0; padding:22px 26px; background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--clay); border-radius:0 14px 14px 0; }
.hcallout .eyebrow{ color:var(--clay); }
.hcallout h3{ font-family:var(--serif); font-weight:500; font-size:1.45rem; color:var(--ink); margin:.4em 0 .35em; }
.hcallout p{ font-size:14px; color:var(--ink-soft); font-weight:300; line-height:1.7; margin:0; }
.hcallout p + p{ margin-top:.7em; }

/* ── KALENDARIUM (zwięzła oś na koniec) ────────────────────── */
.kal{ max-width:780px; margin:0 auto; }
.kal__row{ display:grid; grid-template-columns:110px 1fr; gap:24px; padding:15px 0; border-bottom:1px solid var(--line); }
.kal__row:last-child{ border-bottom:none; }
.kal__row.hl .kal__year, .kal__row.hl .kal__ev b{ color:var(--clay); }
.kal__year{ font-family:var(--serif); font-weight:600; color:var(--ink); font-size:1.05rem; letter-spacing:.01em; }
.kal__ev{ font-size:13.5px; color:var(--ink-soft); font-weight:300; line-height:1.55; }
.kal__ev b{ color:var(--ink); font-weight:600; }

/* ── MINI-GALERIA POCZTÓWEK ────────────────────────────────── */
.pgal{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.pgal button{ padding:0; border:none; background:none; cursor:pointer; border-radius:10px; overflow:hidden; aspect-ratio:4/3;
  box-shadow:var(--shadow-sm); position:relative; }
.pgal button::after{ content:''; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(19,28,22,.08); border-radius:10px; pointer-events:none; }
.pgal img{ width:100%; height:100%; object-fit:cover; filter:sepia(.14) contrast(1.02); transition:transform .8s var(--spring), filter .5s ease; display:block; }
.pgal button:hover img{ transform:scale(1.06); filter:sepia(0) contrast(1.04); }
.pgal__note{ margin-top:16px; font-size:12px; color:var(--ink-muted); display:flex; align-items:center; gap:8px; }
.pgal__note i{ font-size:15px; color:var(--clay); }

/* ── LIGHTBOX ──────────────────────────────────────────────── */
.lightbox{ position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:clamp(16px,5vw,64px);
  background:rgba(9,14,11,.88); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; visibility:hidden; transition:opacity .4s var(--spring), visibility .4s; }
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox__img{ max-width:100%; max-height:84vh; border-radius:8px; box-shadow:0 30px 90px rgba(0,0,0,.55); }
.lightbox__close{ position:absolute; top:20px; right:24px; width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(251,248,241,.3); background:rgba(251,248,241,.1); color:var(--cream); display:grid; place-items:center; cursor:pointer;
  transition:background .3s ease; }
.lightbox__close:hover{ background:rgba(251,248,241,.2); }
.lightbox__nav{ position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(251,248,241,.3); background:rgba(251,248,241,.1); color:var(--cream); display:grid; place-items:center; cursor:pointer;
  transition:background .3s ease; }
.lightbox__nav:hover{ background:rgba(251,248,241,.2); }
.lightbox__nav i, .lightbox__close i{ font-size:22px; }
.lightbox__nav.prev{ left:clamp(10px,2vw,24px); }
.lightbox__nav.next{ right:clamp(10px,2vw,24px); }
.lightbox__cap{ position:absolute; left:0; right:0; bottom:20px; text-align:center; color:rgba(251,248,241,.75); font-size:12.5px; padding:0 20px; }

/* ── HISTORIA GÓRNICTWA (szczegółowo) ──────────────────────── */
.mine-sub{ margin-top:clamp(8px,2vh,20px); }
.mine-sub h3{ font-family:var(--serif); font-weight:500; font-size:clamp(1.5rem,2.6vw,2.1rem); color:var(--ink); line-height:1.12; margin-bottom:.6em; letter-spacing:-0.01em; }
.mine-med{ display:grid; grid-template-columns:1fr clamp(230px,32%,340px); gap:clamp(28px,4vw,56px); align-items:start; }
.mine-prose{ min-width:0; }
.mine-prose p{ font-size:clamp(1rem,1.05vw,1.08rem); color:var(--ink-soft); font-weight:300; line-height:1.82; margin-bottom:1.1em; }
.mine-prose p:last-child{ margin-bottom:0; }
.mine-prose b{ color:var(--ink); font-weight:600; }
.mine-prose .drop{ float:left; font-family:var(--serif); font-size:3.3em; line-height:.72; padding:.05em .11em 0 0; color:var(--clay); font-weight:500; }
.mine-med__figs{ display:flex; flex-direction:column; gap:20px; position:sticky; top:104px; }
.mine-fig img{ width:100%; display:block; border-radius:12px; border:1px solid var(--line); box-shadow:var(--shadow-md); filter:sepia(.1) contrast(1.02); }
.mine-fig figcaption{ margin-top:9px; font-size:11.5px; color:var(--ink-muted); font-style:italic; line-height:1.5; }

/* część o uranie — grafitowe tło */
.mine-uran .sec__head h2, .mine-uran .mine-sub h3{ color:var(--cream); }
.mine-uran .eyebrow{ color:#B7C9AE; }
.mine-uran .mine-cont{ max-width:820px; }
.mine-uran .mine-prose p{ color:rgba(251,248,241,.72); }
.mine-uran .mine-prose b{ color:var(--cream); }
.mine-uran .mine-prose .drop{ color:#C4B4E0; }
.mine-photo{ margin:28px 0; }
.mine-photo img{ width:100%; display:block; border-radius:14px; box-shadow:var(--shadow-lg); border:1px solid rgba(251,248,241,.1); filter:grayscale(.12) contrast(1.05); }
.mine-photo figcaption{ margin-top:11px; font-size:12px; color:rgba(251,248,241,.5); font-style:italic; }
.hcallout--dark{ background:rgba(251,248,241,.05); border:1px solid rgba(251,248,241,.12); border-left:3px solid var(--fluoryt); }
.hcallout--dark .eyebrow{ color:#C4B4E0; }
.hcallout--dark h3{ color:var(--cream); }
.hcallout--dark p{ color:rgba(251,248,241,.72); }
.mine-uran .btn-ghost{ margin-top:8px; }

/* ── RESPONSYWNOŚĆ ─────────────────────────────────────────── */
@media (max-width:820px){
  .mine-med{ grid-template-columns:1fr; }
  .mine-med__figs{ position:static; flex-direction:row; }
  .mine-med__figs .mine-fig{ flex:1; }
}
@media (max-width:820px){
  .chron::before{ display:none; }
  .era{ grid-template-columns:1fr; gap:12px; }
  .era__aside{ text-align:left; }
  .era__aside.sticky{ position:static; }
  .era__aside::after{ display:none; }
  .era__period{ display:inline-flex; align-items:baseline; gap:12px; }
  .era__period small{ margin-top:0; }
  .pgal{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:560px){
  .pgal{ grid-template-columns:repeat(2,1fr); }
  .hfig--split{ grid-template-columns:1fr; }
  .kal__row{ grid-template-columns:76px 1fr; gap:14px; }
  .lightbox__nav{ width:44px; height:44px; }
}