/* ═════════════════════════════════════════════════════════════
   ZASEBE NEWS — sdílené styly (hub + detail stránky)
   Barevnost: černá / zlatá / krémová — shodně s ostatními weby ZASEBE.
═════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/cormorant.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url('/fonts/cormorant-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/fonts/montserrat.woff2') format('woff2');
}

:root {
  --gold:   #C9A84C;
  --gold-l: #E8C96A;
  --bg:     #070706;
  --bg2:    #0A0908;
  --text:   #F2EDE4;
  --dim:    rgba(242,237,228,0.45);
  --line:   rgba(201,168,76,0.13);
  --ease:   cubic-bezier(0.16,1,0.3,1);
  --std:    cubic-bezier(0.4,0,0.2,1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { max-width:100%; display:block; }
:focus-visible { outline: 1px solid rgba(201,168,76,0.6); outline-offset: 3px; }

.reveal { opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { .reveal { opacity:1; transform:none; transition:none; } }

/* ═════════════════════════════
   SITE HEADER
═════════════════════════════ */
.site-header {
  position: sticky; top:0; z-index: 200;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding: 20px clamp(20px,4vw,48px);
  background: rgba(7,7,6,0.85);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.sh-logo {
  font-size:14px; font-weight:700; letter-spacing:4px; text-indent:4px;
  text-transform:uppercase; color: rgba(201,168,76,0.85);
  transition: color .3s; white-space:nowrap;
}
.sh-logo:hover { color: var(--gold-l); }

/* ═════════════════════════════
   HERO
═════════════════════════════ */
.news-hero {
  text-align:center;
  padding: clamp(48px,7vh,84px) clamp(20px,5vw,40px) clamp(28px,4vh,44px);
  max-width: 780px; margin:0 auto;
}
.news-hero h1 {
  font-family:'Cormorant Garamond', serif;
  font-weight:300; letter-spacing: 2px;
  font-size: clamp(40px, 7vw, 78px);
  color: var(--text);
  opacity:0; animation: upIn .9s .1s var(--ease) forwards;
}
.news-hero h1 em { font-style:italic; color:var(--gold-l); }
.news-hero p {
  margin-top:14px;
  font-family:'Cormorant Garamond', serif;
  font-style:italic; font-weight:400;
  font-size: clamp(15px,2vw,20px);
  color: rgba(242,237,228,0.55);
  opacity:0; animation: upIn .9s .3s var(--ease) forwards;
}
@keyframes upIn { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }

/* ═════════════════════════════
   CATEGORY TABS
═════════════════════════════ */
.news-tabs {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:10px;
  padding: 0 clamp(20px,5vw,40px) clamp(36px,5vh,52px);
  max-width: 1080px; margin:0 auto;
}
.news-tab {
  font-family:'Montserrat', sans-serif;
  font-size:11px; font-weight:700; letter-spacing:2px; text-indent:2px;
  text-transform:uppercase; color: rgba(242,237,228,0.5);
  background:transparent; border:1px solid rgba(201,168,76,0.28);
  padding:10px 22px; cursor:pointer; border-radius:999px;
  transition: background .3s var(--std), color .3s, border-color .3s;
}
.news-tab:hover { color: var(--text); border-color: rgba(201,168,76,0.55); }
.news-tab.active {
  background: linear-gradient(135deg, var(--gold-l), var(--gold));
  color:#070706; border-color: transparent;
}
.news-tab.active:hover { color:#070706; }

/* ═════════════════════════════
   FEATURED CARD
═════════════════════════════ */
.news-main {
  max-width: 1080px; margin:0 auto;
  padding: 0 clamp(20px,4vw,40px) clamp(56px,7vh,84px);
}

.news-featured {
  display:grid; grid-template-columns: 1.15fr 1fr;
  gap:0; border:1px solid rgba(201,168,76,0.25);
  background: var(--bg2); overflow:hidden;
  margin-bottom: clamp(28px,4vh,44px);
  transition: border-color .4s var(--std), transform .4s var(--std), box-shadow .4s var(--std);
}
.news-featured:hover {
  border-color: rgba(201,168,76,0.55);
  transform: translateY(-3px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.4);
}
.nf-media { position:relative; min-height: 240px; overflow:hidden; }
.nf-body { padding: clamp(24px,3vw,42px); display:flex; flex-direction:column; justify-content:center; }
.nf-title {
  font-family:'Cormorant Garamond', serif; font-weight:400;
  font-size: clamp(24px, 2.6vw, 36px); line-height:1.2;
  color: var(--text); margin: 10px 0 12px;
}
.nf-desc { font-size:14px; line-height:1.6; color: var(--dim); margin-bottom:20px; }

/* ═════════════════════════════
   GRID + CARDS
═════════════════════════════ */
.news-grid {
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px,2.2vw,28px);
}
.news-card {
  display:flex; flex-direction:column;
  border:1px solid rgba(201,168,76,0.22);
  background: var(--bg2); overflow:hidden;
  transition: border-color .4s var(--std), transform .4s var(--std), box-shadow .4s var(--std);
}
.news-card:hover {
  border-color: rgba(201,168,76,0.5);
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.38);
}
.nc-media { position:relative; height: 168px; overflow:hidden; }
.nc-body { padding: 18px 20px 20px; display:flex; flex-direction:column; flex:1; }
.nc-title {
  font-family:'Cormorant Garamond', serif; font-weight:400;
  font-size:19px; line-height:1.28; color:var(--text); margin: 8px 0 8px;
}
.nc-desc { font-size:12.5px; line-height:1.55; color:var(--dim); margin-bottom:14px; flex:1; }

.nc-tags { display:flex; align-items:center; gap:9px; }
.nc-cat {
  font-size:9.5px; font-weight:700; letter-spacing:1.6px; text-indent:1.6px;
  text-transform:uppercase; color: var(--gold-l);
}
.nc-date { font-size:11px; color: rgba(242,237,228,0.32); }
.nc-date::before { content:'·'; margin-right:9px; color: rgba(201,168,76,0.35); }

.nc-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.nc-meta { font-size:11px; color: rgba(242,237,228,0.35); }
.nc-cta {
  font-size:10px; font-weight:700; letter-spacing:1.6px; text-indent:1.6px;
  text-transform:uppercase; color: var(--gold); white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px;
}
.nc-cta span { transition: transform .3s var(--std); }
.news-card:hover .nc-cta span, .news-featured:hover .nc-cta span { transform: translateX(4px); }

/* ── Cover art gradient placeholder ── */
.cover-gradient {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(201,168,76,0.16) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 85%, rgba(201,168,76,0.08) 0%, transparent 45%),
    linear-gradient(150deg, #17130a 0%, #100d07 55%, #0a0908 100%);
}
.cover-gradient::before {
  content:''; position:absolute; inset:0; opacity:.06; pointer-events:none;
  background-image: repeating-linear-gradient(135deg, var(--gold) 0 1px, transparent 1px 24px);
}
.cover-gradient svg { position:relative; width:34px; height:34px; color: rgba(201,168,76,0.55); }

.nc-play {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.nc-play svg { width:44px; height:44px; }
.nf-play svg { width:56px; height:56px; }

/* ═════════════════════════════
   FOOTER (shodné s ostatními weby ZASEBE)
═════════════════════════════ */
footer.site-footer {
  padding:clamp(20px,3vh,34px) clamp(28px,8vw,110px);
  border-top:1px solid rgba(201,168,76,0.22);
  background:var(--bg);
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.fc { font-size:11px; color:rgba(242,237,228,.2); }
.fe { font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:rgba(242,237,228,.28); transition:color .3s; }
.fe:hover { color:var(--gold); }

/* ═════════════════════════════
   DETAIL STRÁNKA
═════════════════════════════ */
.post-wrap { max-width: 760px; margin:0 auto; padding: clamp(40px,6vh,64px) clamp(20px,5vw,40px) clamp(64px,8vh,96px); }

.post-back {
  display:inline-flex; align-items:center; gap:8px;
  font-size:10px; font-weight:700; letter-spacing:1.8px; text-indent:1.8px;
  text-transform:uppercase; color: var(--gold);
  margin-bottom: clamp(28px,4vh,40px);
  transition: color .3s;
}
.post-back:hover { color: var(--gold-l); }
.post-back span { transition: transform .3s var(--std); }
.post-back:hover span { transform: translateX(-4px); }

.post-tags { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.post-cat {
  font-size:10.5px; font-weight:700; letter-spacing:2px; text-indent:2px;
  text-transform:uppercase; color: var(--gold-l);
  border:1px solid rgba(201,168,76,0.4); padding:5px 14px;
}
.post-date { font-size:12px; color: rgba(242,237,228,0.4); }

.post-title {
  font-family:'Cormorant Garamond', serif; font-weight:300;
  font-size: clamp(30px, 5vw, 50px); line-height:1.15;
  color: var(--text); margin-bottom:18px;
}
.post-intro {
  font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:400;
  font-size: clamp(17px,2vw,21px); line-height:1.55;
  color: rgba(242,237,228,0.6);
  margin-bottom: clamp(28px,4vh,40px);
}
.post-meta-row {
  display:flex; align-items:center; gap:14px; margin-bottom: clamp(28px,4vh,40px);
  font-size:11px; color: rgba(242,237,228,0.4);
}

.post-cover { position:relative; height: clamp(200px, 32vw, 380px); margin-bottom: clamp(28px,4vh,40px); overflow:hidden; }
.post-cover .cover-gradient svg { width:52px; height:52px; }

.post-gallery {
  display:grid; grid-template-columns: repeat(2, 1fr); gap:10px;
  margin-bottom: clamp(28px,4vh,40px);
}
.post-gallery-item { position:relative; height: clamp(140px,18vw,220px); overflow:hidden; }
.post-gallery-item .cover-gradient svg { width:32px; height:32px; }
@media (max-width:480px) { .post-gallery { grid-template-columns: 1fr; } }

.post-body { font-size:15.5px; line-height:1.85; color: rgba(242,237,228,0.82); }
.post-body p { margin-bottom: 22px; }
.post-body h2 {
  font-family:'Cormorant Garamond', serif; font-weight:500;
  font-size: clamp(21px,2.6vw,28px); color: var(--gold-l);
  margin: 34px 0 16px;
}
.post-body blockquote {
  border-left: 2px solid var(--gold);
  padding: 4px 0 4px 22px; margin: 28px 0;
  font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:400;
  font-size: clamp(18px,2.2vw,23px); color: var(--gold-l); line-height:1.5;
}
.post-body blockquote cite {
  display:block; margin-top:10px; font-family:'Montserrat',sans-serif; font-style:normal;
  font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color: rgba(242,237,228,0.4);
}
.post-body ul { margin: 0 0 26px; padding-left: 0; list-style:none; }
.post-body ul li {
  position:relative; padding-left:26px; margin-bottom:12px;
  color: rgba(242,237,228,0.78);
}
.post-body ul li::before {
  content:''; position:absolute; left:0; top:9px;
  width:6px; height:6px; background:var(--gold); transform:rotate(45deg);
}
.post-body figure { margin: 30px 0; }
.post-body figure .cover-gradient { position:relative; height: clamp(160px,26vw,280px); }
.post-body figcaption { margin-top:10px; font-size:12.5px; color: rgba(242,237,228,0.4); text-align:center; }

.post-video-placeholder {
  position:relative; height: clamp(200px,32vw,380px);
  display:flex; align-items:center; justify-content:center;
}
.post-video-placeholder .cover-gradient svg { width:52px; height:52px; }
.post-video-placeholder .nc-play svg { width:64px; height:64px; }

/* ── Related posts ── */
.post-related { max-width: 1080px; margin: 0 auto; padding: 0 clamp(20px,4vw,40px) clamp(64px,8vh,96px); }
.post-related h3 {
  font-size:11px; font-weight:700; letter-spacing:2.5px; text-indent:2.5px;
  text-transform:uppercase; color: rgba(201,168,76,0.6);
  margin-bottom: 22px; text-align:center;
}
.post-related .news-grid { grid-template-columns: repeat(3, 1fr); }

/* ═════════════════════════════
   RESPONSIVE
═════════════════════════════ */
@media (max-width: 980px) {
  .news-grid, .post-related .news-grid { grid-template-columns: repeat(2, 1fr); }
  .news-featured { grid-template-columns: 1fr; }
  .nf-media { height: 220px; }
}

@media (max-width: 640px) {
  .news-grid, .post-related .news-grid { grid-template-columns: 1fr; }
  .news-tabs { gap:8px; }
  .news-tab { padding:9px 16px; font-size:10px; }
  .site-header { padding: 16px 20px; }
  .post-wrap { padding-top: 32px; }
}