/* ===== INTERVJU – FINAL STABLE CSS ===== */

/* Sekcija */
.iv{
  position:relative;
  overflow:hidden;
  z-index:1;
  color:#fff;
}

/* Pozadina (pattern + tamni veo) */
.iv.iv-sasha{
  background-image:url('../img/pattern.jpg');   /* proveri path */
  background-repeat:repeat;
  background-size:560px;                      /* po potrebi 420–680px */
  background-position:top left;
  background-color:rgba(11,11,13,.88);
}
.iv.iv-sasha::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(0,0,0,.60), rgba(0,0,0,.48) 28%,
    rgba(0,0,0,.48) 72%, rgba(0,0,0,.60));
  pointer-events:none;
  z-index:0;
}

/* Unutrašnji kontejner */
.iv-inner{
  position:relative;
  z-index:1;                 /* iznad overlaya */
  max-width:1000px;
  margin:0 auto;
  padding:80px 18px 120px;
}

/* Kartice */
.iv-card{
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(6px);
  border-radius:16px;
  padding:24px;
  margin:22px 0 32px;
}

/* Naslov / meta */
.iv-head h2{
  margin:0 0 6px;
  font-size:28px;
  letter-spacing:.02em;
  color:#fff;
  text-shadow:0 0 6px rgba(0,0,0,.35);
}
.iv-sub{margin:0 0 10px; opacity:.92}
.iv-sub{
  opacity: 0.88;
  color: rgba(220,220,220,0.52); /* благо светлија сива, видљива на свим позадинама */
  text-shadow: 0 0 2px rgba(0,0,0,0.4);
}
.iv-foot{margin-top:10px; opacity:.9}
.iv-foot small strong{color: #e60073}
.iv-foot small a{color: #e60073}


/* ===== Q & A ===== */
.qa .q{position:relative; margin:14px 0 18px; padding-bottom:8px;}
.qa h3{
  margin:0 0 8px;
  font-size:.95rem;
  font-weight:600;
  color:rgba(255,255,255,.92);
  text-shadow:0 0 3px rgba(0,0,0,.25);
  letter-spacing:.01em;
}

/* ---------- NOTE SISTEM (odgovori na notnim linijama) ---------- */
:root{
  --clef-w:42px;      /* širina violinskog ključa */
  --staff-h:46px;     /* visina „sistema“ (5 linija) za 1 red teksta */
  --ans-indent:10px;  /* razmak ključa do teksta */
  --staff-opacity:.32;
}

/* Svaki red odgovora je poseban „stave“ kontejner */
.ans-wrap{
  position:relative;
  min-height:var(--staff-h);
  /* centriraj 1 red teksta unutar staff-a:
     (visina staff-a – visina reda teksta) / 2 */
  padding-top:calc((var(--staff-h) - 1em)/2);
  padding-bottom:calc((var(--staff-h) - 1em)/2);
  margin:4px 0 8px;
}

/* Tekst odgovora — iznad linija, uvučen da se vidi ključ */
.ans-wrap .ans{
  position:relative;
  z-index:2;
  margin:0;
  padding-left:calc(var(--clef-w) + var(--ans-indent));
  color:#FFE59E;
  font-size:1.08rem;
  line-height:1;                 /* ključna vrednost da se poklopi sa staff-om */
  font-style:italic;
  text-shadow:0 0 4px rgba(0,0,0,.30);
}

/* Notne linije (bez ključa) – tačno iza teksta */
.ans-wrap .note-line{
  position:absolute;
  left:0; top:0;                 /* počinju od vrha kontejnera */
  width:100%;
  height:var(--staff-h);
  background:url('../img/note-lines-only.png') repeat-x left center /
             auto calc(var(--staff-h) - 2px);
  opacity:var(--staff-opacity);
  filter:brightness(.95);
  z-index:1;
  pointer-events:none;
}

/* Samo PRVI red ima violinski ključ */
.ans-wrap--first .note-line::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:var(--clef-w);
  height:var(--staff-h);
  background:url('../img/clef.png') no-repeat left center / contain;
  opacity:.66;
}

/* Zbij redove višerednog odgovora */
.ans-wrap + .ans-wrap{margin-top:2px;}

/* ===== Dijalog Čatко ↔ Pesma ===== */
.dialog .line{margin:12px 0 18px; padding-left:10px; border-left:2px solid rgba(255,255,255,.2)}
.dialog .line p{color:rgba(255,255,255,.92); font-size:.95rem; margin:6px 0 0;}
.dialog .ans{color:#FFE59E; font-size:1.06rem; line-height:1.75; font-style:italic; text-shadow:0 0 4px rgba(0,0,0,.30);}
.who{display:inline-block; min-width:64px; font-weight:700;}
.who-chatko{color:#BEE3F8;}

/* Epilog */
.iv-epilog{
  margin-top:24px;
  background:rgba(0,0,0,.26);
  border:1px dashed rgba(255,255,255,.28);
  border-radius:14px;
  padding:16px;
}
.iv-epilog p{margin:.3rem 0; line-height:1.6}
.iv-epilog .curtain{opacity:.85; font-style:italic}

/* Kopiranje (opciono) */
.iv-tools{margin-top:16px}
.iv-copy{padding:8px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.30); color:#fff; cursor:pointer}

/* Accessibility helper */
.visually-hidden{
  position:absolute!important; width:1px; height:1px; margin:-1px; border:0; padding:0;
  clip:rect(0 0 0 0); overflow:hidden;
}

/* ===== Mobilno ===== */
@media (max-width:640px){
  .iv-head h2{font-size:22px}
  .iv-card{padding:16px; background:rgba(0,0,0,.62)}
  .iv.iv-sasha{background-size:680px; background-color:rgba(11,11,13,.92)}
  .qa h3{font-size:.92rem}
  .ans-wrap .ans{font-size:1.04rem}
  :root{--clef-w:38px; --staff-h:42px}
}


/* ===== PATCH: vraćen violinski ključ + zbijenije linije ===== */

/* fino zbijanje visine reda i prostora između redova */
:root{
  --clef-w: 42px;
  --staff-h: 38px;
  --ans-indent: 8px;
  --staff-opacity: .58;
}

/* kompaktno vertikalno poravnanje */
.ans-wrap{
  position: relative;
  min-height: var(--staff-h);
  padding-top: calc((var(--staff-h) - 1em)/2.1);
  padding-bottom: calc((var(--staff-h) - 1em)/2.1);
  margin: 0 0 2px;
}

/* tekst tačno na sredini linija */
.ans-wrap .ans{
  position: relative;
  z-index: 2;
  margin: 0;
  padding-left: calc(var(--clef-w) + var(--ans-indent));
  color: #FFE59E;
  font-size: 1.06rem;
  line-height: 1;
  font-style: italic;
  text-shadow: 0 0 4px rgba(0,0,0,.3);
}

/* notne linije */
.ans-wrap .note-line{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--staff-h);
  background: url('../img/note-lines-only.png') repeat-x left center /
             auto calc(var(--staff-h) - 2px);
  opacity: var(--staff-opacity);
  filter: brightness(.95);
  z-index: 1;
  pointer-events: none;
}

/* prikaži ključ samo na prvom redu */
.ans-wrap--first .note-line::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--clef-w);
  height: var(--staff-h);
  background: url('../img/clef.png') no-repeat left center / contain;
  opacity: .66;
}

/* zbijenost između redova */
.ans-wrap + .ans-wrap{ margin-top: 1px; }

/* mobilno podešavanje */
@media (max-width:640px){
  :root{ --clef-w: 34px; --staff-h: 38px; }
  .ans-wrap .ans{ font-size: 1.02rem; }
}


/* === Stihovi: uvek 1 red + fluidno smanjenje fonta === */
.ans-wrap .ans{
  /* 1 red preko notnih linija */
  white-space: nowrap;
  word-break: keep-all;
  line-height: 1;
  /* fluidno smanjenje: između 0.94rem i 1.08rem */
  font-size: clamp(0.94rem, 0.55rem + 0.7vw, 1.08rem);
}

/* Kompaktniji ključ i staff na užim širinama */
@media (max-width: 1060px){
  :root{
    --clef-w: 40px;
    --staff-h: 46px;
    --ans-indent: 8px;
  }
  .ans-wrap{ margin: 4px 0 8px; }
}

/* Kritična tačka ~855px: još malo smanji stih i H3 */
@media (max-width: 880px){
  .ans-wrap .ans{ font-size: clamp(0.90rem, 0.6rem + 0.6vw, 0.98rem); }
  .qa h3{ font-size: 0.92rem; }
}

/* Mali ekrani – dodatno zbijanje da ništa ne prelomi */
@media (max-width: 740px){
  :root{ --clef-w: 36px; --staff-h: 42px; }
  .ans-wrap .ans{ font-size: clamp(0.88rem, 0.52rem + 0.7vw, 0.96rem); }
}
/* === Naslov i pitanja: fluidno smanjenje za uže ekrane === */

/* Do 900px */
@media (max-width: 900px){
  .iv-head h2{
    font-size: clamp(1.4rem, 1rem + 0.9vw, 1.8rem);
  }
  .qa h3{
    font-size: clamp(0.92rem, 0.7rem + 0.5vw, 1rem);
  }
}

/* Do 700px */
@media (max-width: 700px){
  .iv-head h2{
    font-size: clamp(1.2rem, 0.8rem + 1vw, 1.5rem);
    letter-spacing: .01em;
  }
  .iv-sub{
    font-size: 0.86rem;
  }
  .qa h3{
    font-size: clamp(0.88rem, 0.6rem + 0.6vw, 0.94rem);
  }
}

/* Do 500px — najkompaktnije */
@media (max-width: 500px){
  .iv-head h2{
    font-size: clamp(1.05rem, 0.8rem + 0.5vw, 1.2rem);
    text-align: center;
    line-height: 1.3;
  }
  .iv-sub{
    text-align: center;
    font-size: 0.8rem;
  }
  .qa h3{
    font-size: 0.86rem;
    line-height: 1.3;
  }
  .ans-wrap .ans{
    font-size: clamp(0.86rem, 0.6rem + 0.6vw, 0.94rem);
  }
}



/* === FIX: ukloni crnu traku i vrati sticky+fade bez pozadine === */
.iv-card header.iv-head,
.iv-card header.iv-head *{
  background: transparent !important;
  box-shadow: none !important;
}

/* gasimo bilo kakve stare overlej-e */
.iv-card header.iv-head::before,
.iv-card header.iv-head::after{
  content: none !important;
}

/* sticky glava kartice – bez pozadine, samo diskretan fade kao senka */
.iv-card header.iv-head{
  position: sticky;
  top: -8px;
  z-index: 3;
  padding-top: 8px;
  background: transparent !important;   /* ključna linija */
  isolation: isolate;                   /* spreči spajanje sa pozadinom kartice */
}

/* nežni fade ispod (ne boji header, samo pravi senku nadole) */
.iv-card header.iv-head::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px;
  height:26px;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,0));
}

/* elementi naslova reaguju na CSS varijable koje puni JS */
.iv-card header.iv-head h2,
.iv-card header.iv-head .iv-sub{
  transition: opacity .22s ease, transform .22s ease;
  opacity: var(--title-opacity, 1);
  transform: translateY(var(--title-shift, 0));
}


/* izraženiji prelaz ispod naslova */
.iv-card header.iv-head::after{
  height: 44px; /* bilo 26px */
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.28),  /* bilo .16 */
    rgba(0,0,0,0)
  );
}

.iv-card header.iv-head h2,
.iv-card header.iv-head .iv-sub{
  filter: blur(calc((1 - var(--title-opacity,1)) * 1.2px));
}

/* === stih se izgovara === */

.ans[role="button"] { cursor: pointer; transition: color .3s ease; }
.ans.svira { color: #FFEEC2; text-shadow: 0 0 6px rgba(255,229,158,.45); }



/* === MOBILNI PRIKAZ STIHOVA (≤ 820px): bez linija, 1 clef, veći i čitljiv tekst === */
@media (max-width: 820px){

  /* 1) Ukloni notne linije i sav "staff" layout */
  .ans-wrap { 
    min-height: auto;
    padding: 6px 0;                  /* zbijeno, ali prozračno */
    margin: 0 0 8px;
  }
  .ans-wrap .note-line { display: none !important; }

  /* 2) Dozvoli prirodno prelamanje stiha, veći font i prored */
  .ans-wrap .ans{
    white-space: normal;              /* NEMA forsiranja u jedan red */
    word-break: normal;
    font-size: clamp(1rem, 0.95rem + 0.6vw, 1.15rem);  /* ≥16px */
    line-height: 1.5;
    display: block;
    padding-left: calc(var(--clef-w, 32px) + 8px);     /* mesto za clef u prvom redu */
    padding-right: 8px;                                /* da ništa ne „beži“ desno */
    /* dovoljno veliki tap-target (Google smernice ~48px) */
    padding-top: 6px; 
    padding-bottom: 6px;
  }

  /* 3) Samo prvi red u Q-bloku nosi violinski ključ */
  .ans-wrap::before{ content: none !important; }      /* sigurnosno: nema ključa svuda */
  .ans-wrap--first{
    position: relative;
  }
  .ans-wrap--first::before{
    content:"";
    position: absolute;
    left: 0;
    top: 0.2em;                                        /* sitno fino poravnanje */
    width: var(--clef-w, 28px);
    height: 32px;
    background: url('../img/clef.png') no-repeat left top / contain;
    opacity: .7;
    pointer-events: none;
  }

  /* 4) Pitanja malo veća radi čitljivosti */
  .qa h3{
    font-size: clamp(1rem, 0.9rem + 0.6vw, 1.2rem);
    line-height: 1.35;
    margin: 14px 0 6px;
  }

  /* 5) Naslov/podnaslov — već si doterao, ovo je samo safety */
  .iv-head h2{ font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); }
  .iv-sub{ font-size: clamp(0.9rem, 0.8rem + 0.4vw, 1rem); }

  /* 6) Isključi mobilno „auto-uvećanje“ teksta koje zna da razbije layout */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
}


/* === MOBILNI PLAY IKONIČIĆ DOK STIH SVIRA === */
@media (max-width: 820px){
  .ans.svira::after{
    content: "🎵";
    display: inline-block;
    margin-left: 6px;
    font-size: 1.05em;
    vertical-align: middle;
    animation: pulseNote 1.2s ease-in-out infinite;
    opacity: .9;
  }

  /* nežno pulsiranje (svetlucanje) */
  @keyframes pulseNote{
    0%,100%{ transform: scale(1); opacity: .9; }
    50%{ transform: scale(1.25); opacity: 1; }
  }
}


/* === MOBILNI PLAY IKONIČIĆ DOK STIH SVIRA (Sašina pink varijanta) === */
@media (max-width: 820px){
  .ans.svira::after{
    content: "🎵";
    display: inline-block;
    margin-left: 6px;
    font-size: 1.05em;
    vertical-align: middle;
    animation: pulseNote 1.2s ease-in-out infinite;
    color: #e60073;             /* Sašina roze nijansa */
    filter: drop-shadow(0 0 4px rgba(230,0,115,.35));
  }

  @keyframes pulseNote{
    0%,100%{ transform: scale(1); opacity: .9; }
    50%{ transform: scale(1.25); opacity: 1; }
  }
}

/* === Mobilni prikaz naslova: <em> u novom redu, centrirano === */
@media (max-width: 700px){
  #iv-sasha-title{
    text-align: center;
    line-height: 1.35;
  }
  #iv-sasha-title em{
    display: block;                 /* prebacuje ga u novi red */
    margin-top: 2px;
    font-style: italic;
    color: #ffe6f2;                 /* svetlo roze nijansa */
    text-shadow: 0 0 4px rgba(230,0,115,.35);
  }
}



/* ===== Dugmad za kopiranje intervjua ===== */

.iv-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
  justify-content: center;
}

.iv-tools button {
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 10px;
  color: #fff;
  font-size: 0.98rem;
  padding: 10px 18px;
  cursor: pointer;
  transition: all 0.25s ease;
  backdrop-filter: blur(4px);
  text-shadow: 0 0 4px rgba(0,0,0,0.25);
}

/* hover/focus efekat */
.iv-tools button:hover,
.iv-tools button:focus {
  background: rgba(255,192,203,0.25); /* lagano roze (Sašin ton) */
  border-color: rgba(255,192,203,0.55);
  box-shadow: 0 0 10px rgba(255,192,203,0.3);
  outline: none;
}

/* aktivno dugme – tokom kopiranja */
.iv-tools button:active {
  transform: scale(0.97);
  background: rgba(255,105,180,0.25);
  border-color: rgba(255,105,180,0.8);
}

/* mobilno – razmak i centriranje */
@media (max-width: 640px) {
  .iv-tools {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .iv-tools button {
    width: 90%;
    font-size: 1rem;
    padding: 12px 0;
  }
}

/* ===== Tooltip za dugmad za kopiranje ===== */
/* ===== Tooltip sa smart fade-out — FIXED ===== */
.iv-tools button{ position:relative }

/* početno stanje: skriveno, bez animacije */
.iv-tools button::after,
.iv-tools button::before{
  opacity:0;
  pointer-events:none;
  transition: opacity .25s ease, transform .25s ease;
  animation: none;               /* ← ključ: nema animacije na load */
}

/* balon */
.iv-tools button::after{
  content: attr(data-hint);
  position:absolute;
  bottom:110%;
  left:50%;
  transform: translateX(-50%) translateY(8px);
background: rgba(230, 0, 115, 0.88);             /* Sašina roze */
border-top-color: rgba(230, 0, 115, 0.88);
box-shadow: 0 0 8px rgba(230, 0, 115, 0.45);     /* blagi glow efekat */
  color:#fff;
  font-size:.78rem;
  line-height:1.4;
  padding:4px 9px;
  border-radius:6px;
  white-space:nowrap;
  z-index:10;
  text-shadow:none;
}

/* strelica */
.iv-tools button::before{
  content:"";
  position:absolute;
  bottom:108%;
  left:50%;
  transform: translateX(-50%);
  border:5px solid transparent;
  border-top-color: rgba(0,0,0,.78);
}

/* aktivacija: prikaži i pokreni fade-out animaciju,
   koja zadrži 1.5–2s pa izbleđuje i dok je kursor iznad */
.iv-tools button:hover::after,
.iv-tools button:focus::after{
  opacity:1;
  transform: translateX(-50%) translateY(0);
  animation: tooltip-fade 2.4s ease forwards;
}
.iv-tools button:hover::before,
.iv-tools button:focus::before{
  opacity:1;
  animation: tooltip-fade 2.4s ease forwards;
}

/* animacija: ostani vidljiv pa izbleđuj */
@keyframes tooltip-fade{
  0%, 60% { opacity:1; }
  100%    { opacity:0; }
}

/* isključi na mobilnim */
@media (max-width:768px){
  .iv-tools button::after,
  .iv-tools button::before{ display:none }
}

/* accessibility: poštuj prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .iv-tools button::after,
  .iv-tools button::before{
    transition:none;
    animation:none !important;
  }
  .iv-tools button:hover::after,
  .iv-tools button:focus::after,
  .iv-tools button:hover::before,
  .iv-tools button:focus::before{
    opacity:1;                   /* bez animacije, samo prikaži */
  }
}