/* ============================================================
   page-single.css — Pojedinačni članak
   Signature: topli magazin + drop-cap
   Reuse: .hero .hero-bg .step .eyebrow .btn
   Sve boje kroz var(--...). Klase prefiks: .single-
   ============================================================ */

/* ---------- HEADER ---------- */
.single-hero{padding-bottom:clamp(30px,4vw,52px);text-align:center}
.single-head{max-width:820px;margin-inline:auto;position:relative;z-index:1}
.single-cat{justify-content:center;margin-bottom:1rem}
.single-cat:hover{color:var(--aqua-bright)}
.single-head h1{font-size:clamp(2.1rem,5.4vw,3.9rem);margin-bottom:1.4rem;text-wrap:balance}

.single-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.7rem;
  font-size:.9rem;color:var(--muted)}
.single-author{display:inline-flex;align-items:center;gap:.6rem;text-align:left}
.single-avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;flex:none;
  background:color-mix(in srgb,var(--aqua) 16%,transparent);color:var(--aqua);font-size:1rem}
.single-author b{display:block;font-family:'Manrope';font-weight:700;font-size:.9rem;color:var(--fg);line-height:1.2}
.single-author em{display:block;font-style:normal;font-size:.78rem;color:var(--muted)}
.single-meta time{color:var(--aqua);font-weight:600}
.single-dot{opacity:.5}

/* ---------- COVER ---------- */
.single-cover-wrap{margin-top:.4rem}
.single-cover{margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);
  max-width:1000px;margin-inline:auto;aspect-ratio:16/9;position:relative;isolation:isolate}
.single-cover img{width:100%;height:100%;object-fit:cover}
.single-cover::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 62%,color-mix(in srgb,var(--teal) 20%,transparent));
  mix-blend-mode:multiply;opacity:.45}

/* ---------- SADRŽAJ (tipografija) ---------- */
.single-content{max-width:68ch;margin:clamp(2.4rem,5vw,3.6rem) auto 0;
  font-size:1.12rem;line-height:1.82;color:var(--ink)}
.single-content > *{margin-bottom:1.35rem}
.single-content > *:last-child{margin-bottom:0}

/* drop-cap (signature) */
.single-content > p:first-of-type::first-letter{
  font-family:'Fraunces',Georgia,serif;font-weight:600;
  float:left;font-size:4.4rem;line-height:.78;padding:.35rem .7rem 0 0;color:var(--aqua)}

.single-content p{color:var(--ink)}
.single-content a{color:var(--aqua);font-weight:600;border-bottom:1px solid color-mix(in srgb,var(--aqua) 40%,transparent);
  transition:border-color .2s,color .2s}
.single-content a:hover{color:var(--aqua-bright);border-color:var(--aqua)}

.single-content h2{font-size:clamp(1.55rem,3vw,2.05rem);margin-top:2.6rem;margin-bottom:1rem;line-height:1.12}
.single-content h3{font-size:clamp(1.24rem,2.2vw,1.55rem);margin-top:2.1rem;margin-bottom:.7rem}
.single-content h4{font-size:1.16rem;margin-top:1.6rem;margin-bottom:.6rem}

.single-content ul,.single-content ol{padding-left:1.3rem;display:flex;flex-direction:column;gap:.55rem}
.single-content li{padding-left:.3rem}
.single-content ul li::marker{color:var(--aqua)}
.single-content ol li::marker{color:var(--aqua);font-family:'Fraunces',serif;font-weight:600}

.single-content img,.single-content figure img,.single-content .wp-block-image img{
  border-radius:var(--r-md);box-shadow:var(--shadow-sm);width:100%;height:auto}
.single-content figure{margin:2rem 0}
.single-content figcaption{margin-top:.6rem;text-align:center;font-size:.84rem;color:var(--muted);font-style:italic}

/* blockquote / pull-quote (signature) */
.single-content blockquote,.single-content .wp-block-quote{
  margin:2.2rem 0;padding:.4rem 0 .4rem 1.6rem;border-left:3px solid var(--aqua);
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:clamp(1.28rem,2.6vw,1.6rem);
  line-height:1.42;color:var(--fg);position:relative}
.single-content blockquote::before{content:"\201C";position:absolute;left:-.1rem;top:-1.3rem;
  font-family:'Fraunces',serif;font-size:3.4rem;color:color-mix(in srgb,var(--aqua) 40%,transparent);line-height:1}
.single-content blockquote p{margin-bottom:.6rem}
.single-content blockquote cite,.single-content blockquote .wp-block-quote__citation{
  display:block;font-style:normal;font-family:'Manrope';font-weight:600;font-size:.9rem;color:var(--muted);margin-top:.5rem}

.single-content pre{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:1.1rem 1.3rem;overflow-x:auto;font-size:.92rem}
.single-content code{background:color-mix(in srgb,var(--aqua) 12%,transparent);
  border-radius:6px;padding:.12em .42em;font-size:.9em}
.single-content pre code{background:none;padding:0}
.single-content hr{border:0;height:1px;background:var(--line);margin:2.6rem 0}
.single-content table{width:100%;border-collapse:collapse;font-size:.96rem}
.single-content th,.single-content td{border:1px solid var(--line);padding:.7rem .9rem;text-align:left}
.single-content th{background:color-mix(in srgb,var(--sand) 45%,var(--card))}
.single-pages{margin-top:1.6rem;font-weight:600;color:var(--muted)}

/* ---------- TAGS ---------- */
.single-tags{max-width:68ch;margin:2.2rem auto 0;display:flex;flex-wrap:wrap;gap:.55rem;align-items:center}
.single-tags-lbl{font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.single-tag{font-size:.82rem}
.single-tag a{display:inline-block;padding:.32rem .78rem;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--aqua) 12%,transparent);color:var(--aqua);font-weight:600;transition:background .2s}
.single-tag a:hover{background:color-mix(in srgb,var(--aqua) 22%,transparent)}

/* ---------- CTA ---------- */
.single-cta{position:relative;overflow:hidden;max-width:900px;margin:clamp(3rem,6vw,4.8rem) auto 0;
  border-radius:var(--r-lg);padding:clamp(2.2rem,5vw,3.6rem);text-align:center;
  background:linear-gradient(155deg,#20392f,#2e4a41 52%,#3d6153);color:#eef4ec;box-shadow:var(--shadow)}
.single-cta-glow{position:absolute;inset:-30% 20% auto;height:60%;z-index:0;
  background:radial-gradient(50% 60% at 50% 40%,color-mix(in srgb,var(--aqua) 40%,transparent),transparent);
  filter:blur(30px);animation:singlePulse 6s ease-in-out infinite alternate}
.single-cta-inner{position:relative;z-index:1;max-width:52ch;margin-inline:auto}
.single-cta .eyebrow{justify-content:center}
.single-cta h2{color:#fff;font-size:clamp(1.7rem,3.6vw,2.5rem);margin:.7rem 0 .9rem}
.single-cta p{color:#cfe3d7;margin-bottom:1.8rem}
.single-cta-actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
@keyframes singlePulse{from{opacity:.5;transform:scale(.95)}to{opacity:.95;transform:scale(1.05)}}

/* ---------- POVEZANI (grid kartica, samodovoljno) ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.6rem}
.single-related .blog-card{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.single-related .blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.blog-card-media{display:block;position:relative}
.blog-card-media img{width:100%;height:100%;object-fit:cover}
.blog-card-meta{font-size:.78rem;font-weight:600;color:var(--muted);margin-bottom:.5rem}
.blog-card-meta time{color:var(--aqua)}
.blog-card-title{font-size:var(--fs-h3);line-height:1.16}
.blog-card-title a{color:var(--fg);transition:color .2s var(--ease)}
.single-related .blog-card:hover .blog-card-title a{color:var(--aqua)}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .blog-grid{grid-template-columns:1fr}
  .single-content{font-size:1.06rem}
}
@media (max-width:560px){
  .single-content > p:first-of-type::first-letter{font-size:3.4rem}
}

@media (prefers-reduced-motion:reduce){
  .single-cta-glow{animation:none;opacity:.5}
  .single-cover::after{opacity:.35}
  .single-related .blog-card{transition:none}
}