/* ======================================
   STORY DETAIL – HERO + ARTICLE
   (konzistence se Stories / O nás)
   ====================================== */

:root{
  --ink:#0b1f2a;
  --brand-yellow:#f3c33b;
  --brand-green:#34b36a;
  --section-soft:#f6f4ef;
}

.font-display{ font-family:"Oswald", system-ui, sans-serif; }
.font-script{ font-family:"Kolker Brush", cursive; }

.btn-cta{
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:800;
}

/* ===========================
   HERO
   =========================== */
.story-hero{
  position:relative;
  min-height:86vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background-image:var(--story-hero-img);
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.story-hero__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(0,0,0,.68), rgba(0,0,0,.52));
}
.story-hero__content{
  position:relative;
  z-index:2;
  max-width:980px;
  padding:140px 18px 80px;
  color:#fff;
}
.story-hero__kicker{
  display:inline-block;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:2px;
  color:rgba(255,255,255,.70);
  margin-bottom:14px;
}
.story-hero__title{
  margin:0;
  font-weight:700;
  letter-spacing:1.3px;
  text-transform:uppercase;
  line-height:1.25;
  font-size:clamp(42px, 6vw, 84px);
}
.story-hero__titleRow{
  display:inline-flex;
  align-items:baseline;
  gap:14px;
}
.story-hero__script{
  font-weight:500;
  color:var(--brand-yellow);
  text-transform:none;
  font-size:clamp(3.8rem, 9vw, 9.5rem);
  line-height:.9;
  letter-spacing:-0.02em;
}
.story-hero__subtitle{
  margin:14px auto 0;
  color:rgba(255,255,255,.82);
  font-size:16px;
  line-height:1.7;
  max-width:72ch;
}

/* ===========================
   DETAIL – background & spacing
   =========================== */
.story-detail{
  background:#fff;
  position:relative;
  padding:clamp(70px, 9vw, 120px) 0;
  overflow:hidden;
}
.story-detail::before{
  content:"";
  position:absolute;
  inset:-22%;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 22%, rgba(243,195,59,.10), transparent 55%),
    radial-gradient(circle at 78% 18%, rgba(52,179,106,.10), transparent 52%),
    radial-gradient(circle at 70% 78%, rgba(11,31,42,.06), transparent 58%);
}

.story-detail__meta{
  max-width: 980px;
  position: relative;
  z-index: 2;
  padding: 0 10px;
  margin-top: -18px; /* jemné přiblížení k hero */
  text-align: center;
}

.story-meta__row{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}

/* status tag */
.story-meta__tag{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(11,31,42,.86);
  background: rgba(11,31,42,.06);
  border: 1px solid rgba(11,31,42,.10);
}
.story-meta__tag--green{
  background: rgba(52,179,106,.16);
  border-color: rgba(52,179,106,.35);
}
.story-meta__tag--yellow{
  background: rgba(243,195,59,.22);
  border-color: rgba(243,195,59,.45);
}
.story-meta__tag--red{
  background: rgba(225, 76, 76, .14);
  border-color: rgba(225, 76, 76, .28);
}
.story-meta__tag--blue{
  background: rgba(39,118,171,.14);
  border-color: rgba(39,118,171,.25);
}

.story-meta__place{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(11,31,42,.55);
}

/* brush script under meta */
.story-meta__script{
  margin:20px 0px 14px;
  font-weight:700;
  font-size:clamp(28px, 3.2vw, 44px);
  line-height:1.12;
  color:var(--ink);
}

/* ===========================
   Article typography
   =========================== */
.story-article{
  max-width: 74ch;
  margin: clamp(34px, 5vw, 54px) auto 0;
  position: relative;
  z-index: 2;
  padding: 0 10px;
}

.story-lead{
  font-size: 18px;
  line-height: 1.9;
  color: rgba(11,31,42,.74);
  font-weight: 600;
  margin: 0 0 18px;
}

.story-paragraph{
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.95;
  color: rgba(11,31,42,.68);
}
.story-paragraph:last-child{ margin-bottom: 0; }

.story-divider{
  height: 1px;
  background: rgba(11,31,42,.12);
  margin: clamp(26px, 4vw, 40px) 0;
}

/* CTAs */
.story-actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.story-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 14px 18px;
  border-radius: 12px;
  text-decoration:none;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 13px;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.story-action:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
}
.story-action--yellow{
  background: var(--brand-yellow);
  color: var(--ink);
}
.story-action--green{
  background: var(--brand-green);
  color: #fff;
}

.story-note{
  margin-top: 18px;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(11,31,42,.58);
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
}

/* responsive tweaks */
@media (max-width: 575.98px){
  .story-paragraph{ line-height: 1.85; }
  .story-actions .story-action{ width: 100%; }
}