/* /pribehy/ — additions on top of /styles.css.
   Common chrome (header, footer, buttons, type, color vars) lives in
   /styles.css which is loaded first in pribehy/index.html. */

/* ===== Stories index =====
   These elements use both .container and their own class. Use padding-top/bottom
   only (not shorthand) so .container's `padding:0 32px` (20px on mobile) keeps
   the horizontal side-padding — same trick as the hero. */
.stories-hero{padding-top:96px;padding-bottom:80px;border-bottom:1px solid var(--hairline)}
.crumb{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:32px}
.crumb a:hover{color:var(--ink)}
.stories-hero h1{font-family:"Inter Tight";font-weight:900;font-size:clamp(64px,11vw,160px);letter-spacing:-.045em;line-height:.88}
.stories-hero h1 em{font-style:italic;font-weight:700}
.stories-hero .sub{font-size:18px;line-height:1.55;max-width:600px;margin-top:40px;color:var(--ink-soft)}

.stories-toolbar{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-top:32px;padding-bottom:32px;border-bottom:1px solid var(--hairline);background:var(--bg);position:relative;z-index:10}
.stories-toolbar .filters{display:flex;gap:8px;flex-wrap:wrap}
.stories-toolbar .filters button{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:10px 18px;border:1px solid var(--hairline);color:var(--ink-muted);transition:border-color .2s,color .2s,background .2s}
.stories-toolbar .filters button:hover{border-color:var(--ink-faint);color:var(--ink)}
.stories-toolbar .filters button.active{border-color:var(--ink);color:var(--ink)}
.stories-toolbar .count{font-family:"Inter Tight";font-weight:800;font-size:14px;letter-spacing:.05em;color:var(--ink-muted)}

.stories-full-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 28px;padding-top:72px;padding-bottom:160px}
.stories-full-grid .story-card .story-thumb{aspect-ratio:4/5}
@media (min-width: 1280px){.stories-full-grid{grid-template-columns:repeat(5,1fr);gap:40px 32px}}

/* ===== Story detail ===== */
.detail{background:var(--cream);min-height:100vh}
.detail-back{padding:48px 0 32px;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;color:var(--ink-muted);transition:color .2s,gap .25s}
.detail-back:hover{color:var(--ink);gap:14px}
.detail-hero{padding:32px 0 120px;display:grid;grid-template-columns:1fr 1.1fr;gap:96px;align-items:start}
/* Outer frame for the detail-page portrait. No border; soft brand-tinted
   shadow matching the hero photos + story-thumb (rgba 154,41,60 = vínový). */
.detail-portrait{width:100%;aspect-ratio:4/5;position:relative;box-shadow:0 18px 48px -16px rgba(154,41,60,.10),0 4px 14px -4px rgba(154,41,60,.05)}
.detail-meta{display:flex;flex-direction:column;gap:28px;padding-top:16px}
.detail-meta .ord{font-family:"Inter Tight";font-weight:900;font-size:14px;letter-spacing:.05em;color:var(--ink-muted)}
.detail-meta h1{font-family:"Inter Tight";font-weight:900;font-size:clamp(56px,9vw,140px);letter-spacing:-.04em;line-height:.85;color:var(--ink);margin:-8px 0}
.detail-meta h1 em{font-style:italic;font-weight:700}
.detail-meta .role{font-family:"Inter Tight";font-weight:600;font-size:24px;letter-spacing:-.01em;color:var(--ink-soft);line-height:1.25}
/* Nickname row replaces the old age/city/generace facts strip.
   Italic Inter Tight, brand red, sits just under the role line. */
.detail-nickname{
  font-family:"Inter Tight";
  font-style:italic;
  font-weight:500;
  font-size:20px;
  letter-spacing:-.005em;
  color:var(--ink-muted);
  margin-top:-12px;
}

.detail-body{max-width:720px;margin:0 auto;padding-top:96px;padding-bottom:160px;scroll-margin-top:80px}

/* Detail-hero cue → anchors to #medailonek (= .detail-body). Replaces the
   old paragraph hint about reading the trilingual variants. Desktop only —
   hidden on mobile (≤600px) where the body sits right below the meta and
   no scroll cue is needed. */
.medallion-cue{
  margin-top:32px;
  display:inline-flex;align-items:center;gap:12px;
  font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);
  padding:6px 0;
  transition:color .25s ease;
}
.medallion-cue:hover{color:var(--ink-soft)}
.medallion-cue-arrow{
  font-size:14px;line-height:1;display:inline-block;
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
/* Down-scroll cue — arrow slides down on hover (CTA convention).
   Gap is fixed (no horizontal drift), only the arrow moves vertically. */
.medallion-cue:hover .medallion-cue-arrow{transform:translateY(6px)}

/* Language tab strip — swaps the body section in-place, no scroll. */
.lang-block{margin-bottom:80px}
.lang-tabs{
  display:flex;gap:0;margin-bottom:64px;
  border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
}
.lang-tab{
  flex:1;padding:24px 12px;
  font-family:"Inter Tight";font-weight:800;font-size:14px;
  letter-spacing:.18em;text-transform:uppercase;text-align:center;
  color:var(--ink-muted);cursor:pointer;
  transition:background .25s ease,color .25s ease;
  border:none;background:transparent;
  border-right:1px solid var(--ink-faint);
}
.lang-tab:last-child{border-right:none}
.lang-tab:hover{background:rgba(213,46,53,.06);color:var(--ink)}
.lang-tab.active{background:var(--ink);color:var(--cream)}

/* Sections — only the active one renders. JS toggles class based on URL hash
   / localStorage. Default class="active" on CS section so static HTML works
   without JS too. */
.lang-section{display:none}
.lang-section.active{display:block}
.lang-section p{font-size:18px;line-height:1.75;color:#2A1518;font-weight:400}
.lang-section p + p{margin-top:24px}
.lang-section.active p:first-of-type::first-letter{
  font-family:"Inter Tight";font-weight:900;font-size:72px;line-height:1;
  float:left;margin:8px 16px -4px 0;color:var(--ink);
}

.detail-nav{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:64px 0;border-top:1px solid var(--ink-faint);border-bottom:1px solid var(--ink-faint)}
.detail-nav a{display:flex;flex-direction:column;gap:10px;padding:16px 0;transition:color .2s}
.detail-nav a:hover .name{color:var(--ink-soft)}
.detail-nav .label{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-muted)}
.detail-nav .name{font-family:"Inter Tight";font-weight:900;font-size:32px;letter-spacing:-.02em;color:var(--ink);transition:color .2s}
.detail-nav .next{text-align:right;align-items:flex-end}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .stories-full-grid{grid-template-columns:repeat(2,1fr);gap:32px 20px;padding-top:48px;padding-bottom:96px}
  .stories-hero{padding-top:64px;padding-bottom:56px}
  .detail-hero{grid-template-columns:1fr;gap:40px;padding-top:24px;padding-bottom:80px}
  .detail-meta h1{font-size:64px}
  .detail-meta{padding-top:0}
  .detail-body{padding-top:64px;padding-bottom:96px}
  .lang-tabs{margin-bottom:48px}
  .lang-tab{padding:18px 8px;font-size:12px;letter-spacing:.14em}
  .detail-nav{padding-top:48px;padding-bottom:48px}
  .detail-nav .name{font-size:24px}
}

@media (max-width: 600px){
  .stories-hero{padding-top:48px;padding-bottom:40px}
  .stories-hero .sub{margin-top:24px;font-size:16px}
  .stories-toolbar{padding-top:20px;padding-bottom:20px;gap:16px}
  .stories-toolbar .filters button{padding:8px 14px;font-size:11px}
  .stories-full-grid{padding-top:32px;padding-bottom:64px;gap:24px 16px}
  .detail-back{padding-top:24px;padding-bottom:16px}
  /* Mobile: tighten the hero→body transition. The cue button is hidden on
     mobile (no scroll cue needed when body sits inches below) so we collapse
     the surrounding padding to make it visible that there's content below. */
  .detail-hero{padding-top:8px;padding-bottom:24px;gap:32px}
  .detail-meta{gap:18px}
  .detail-meta h1{font-size:48px}
  .detail-meta .role{font-size:18px}
  .medallion-cue{display:none}
  .detail-body{padding-top:24px;padding-bottom:64px}
  .lang-section p{font-size:16px;line-height:1.7}
  .lang-section.active p:first-of-type::first-letter{font-size:54px;margin:6px 10px -4px 0}
  .detail-nav{padding-top:32px;padding-bottom:32px;gap:16px}
  .detail-nav .name{font-size:20px}
}