/* ─────────────────────────────────────────────────────────────────────
   Rakija Ona Naša — home.css
   Samo početna strana: hero slajder, kolekcija proizvoda, česta pitanja.
   ───────────────────────────────────────────────────────────────────── */

:root{ --slide-ms:6500ms; }

/* ── HERO SLAJDER ────────────────────────────────────────────────── */
.hero{
  position:relative;
  width:100%;
  height:clamp(400px,62vh,640px);
  display:grid;
  overflow:hidden;
  background:var(--ink);
}

.slide{
  grid-area:1/1;
  position:relative;
  display:grid;
  align-items:center;
  opacity:0;
  visibility:hidden;
  transition:opacity 1.1s var(--ease),visibility 0s linear 1.1s;
}
.slide.on{
  opacity:1;visibility:visible;
  transition:opacity 1.1s var(--ease),visibility 0s;
}

.slide-bg{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 45%;
}
/* Na uskom ekranu se slika jako seče po širini (vidi se svega ~40%), pa se
   kadar pomera udesno gde je proizvod. Tačka fokusa se zadaje po slajdu
   preko --focus, jer proizvod nije na istom mestu na sve tri fotografije. */
@media(max-width:760px){
  .slide-bg{object-position:var(--focus,88%) 45%}
}
/* tamno levo gde je tekst, čisto desno preko proizvoda */
.slide::before{
  content:"";
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(98deg,
    rgba(8,7,6,.93) 0%,
    rgba(8,7,6,.8) 27%,
    rgba(8,7,6,.34) 52%,
    rgba(8,7,6,.1) 72%,
    rgba(8,7,6,.34) 100%);
}
@media(max-width:760px){
  .slide::before{
    background:linear-gradient(to top,
      rgba(8,7,6,.95) 6%,
      rgba(8,7,6,.78) 42%,
      rgba(8,7,6,.36) 74%,
      rgba(8,7,6,.5) 100%);
  }
}

/* topljenje u crno po sve četiri ivice — slika nema vidljiv rub */
.slide::after{
  content:"";
  position:absolute;inset:0;z-index:1;
  pointer-events:none;
  background:
    linear-gradient(to right,  var(--ink) 0%, rgba(8,7,6,.72) 2.5%, rgba(8,7,6,.28) 6.5%, transparent 11%),
    linear-gradient(to left,   var(--ink) 0%, rgba(8,7,6,.72) 2.5%, rgba(8,7,6,.28) 6.5%, transparent 11%),
    linear-gradient(to bottom, var(--ink) 0%, rgba(8,7,6,.72) 2.5%, rgba(8,7,6,.28) 7%,   transparent 12%),
    linear-gradient(to top,    var(--ink) 0%, rgba(8,7,6,.72) 2.5%, rgba(8,7,6,.28) 7%,   transparent 12%);
}

.slide-in{
  position:relative;z-index:2;
  width:100%;
  padding:0 var(--pad) clamp(78px,8.5vw,96px);
}
.slide-copy{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(12px,1.6vw,17px);
  max-width:27rem;
}
@media(max-width:760px){
  /* Tekst ide na sredinu visine. Razmak je isti gore i dole da centriranje
     bude i vizuelno tacno, a donji deo ujedno cuva mesto za kontrole slajdera. */
  .slide{align-items:center}
  .slide-in{padding-block:clamp(84px,16vw,104px)}
  .slide-copy{max-width:none;gap:12px}
}

.slide-label{
  margin:0;
  font-size:12px;font-weight:500;
  letter-spacing:.17em;text-transform:uppercase;
  color:var(--gold);
}
.slide-title{
  margin:0;
  font-size:clamp(30px,4.2vw,48px);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-.005em;
  text-wrap:balance;
}
.slide-line{
  margin:0;
  font-size:clamp(16px,1.5vw,18px);
  line-height:1.68;
  color:var(--dim);
  max-width:34ch;
}
.slide-btn{
  display:inline-flex;align-items:center;
  font-family:var(--f);
  cursor:pointer;
  margin-top:4px;
  padding:12px 24px;
  font-size:12.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:#0B0904;
  background:var(--gold);
  border:1px solid var(--gold);
  transition:background .35s ease,border-color .35s ease;
}
.slide-btn:hover{background:var(--gold-hi);border-color:var(--gold-hi)}

/* tekst ulazi kad slajd postane aktivan */
.slide-copy > *{opacity:0;transform:translateY(14px)}
.slide.on .slide-copy > *{
  opacity:1;transform:none;
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.slide.on .slide-copy > :nth-child(1){transition-delay:.2s}
.slide.on .slide-copy > :nth-child(2){transition-delay:.3s}
.slide.on .slide-copy > :nth-child(3){transition-delay:.4s}
.slide.on .slide-copy > :nth-child(4){transition-delay:.5s}

/* ── kontrole: sve dole desno, dalje od teksta ───────────────────── */
.ui{
  position:absolute;z-index:5;
  left:var(--pad);
  bottom:clamp(18px,2.6vw,26px);
  width:max-content;
  display:flex;flex-direction:row;align-items:center;gap:clamp(9px,1.1vw,13px);
}
@media(max-width:760px){
  .ui{left:50%;transform:translateX(-50%);gap:10px;bottom:18px}
}

/* sličice slajdova */
.dots{display:flex;gap:9px}
.dot{
  position:relative;
  width:clamp(56px,6.4vw,74px);
  height:clamp(36px,4.2vw,47px);
  padding:0;
  border:1px solid rgba(243,239,231,.24);
  background:#000;
  cursor:pointer;
  opacity:.5;
  transition:opacity .35s ease,border-color .35s ease;
}
.dot img{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
}
.dot:hover{opacity:1;border-color:rgba(243,239,231,.55)}
.dot.on{opacity:1;border-color:var(--gold)}

/* oblačić sa nazivom */
.dot::after{
  content:attr(data-tip);
  position:absolute;
  left:0;bottom:calc(100% + 10px);
  z-index:2;
  padding:8px 12px;
  white-space:nowrap;
  font-size:12.5px;
  letter-spacing:.02em;
  color:var(--cream);
  background:rgba(8,7,6,.95);
  border:1px solid #3A3128;
  box-shadow:0 10px 26px -10px #000;
  opacity:0;
  transform:translateY(5px);
  pointer-events:none;
  transition:opacity .28s var(--ease),transform .28s var(--ease);
}
.dot:hover::after,.dot:focus-visible::after{opacity:1;transform:none}
@media(max-width:760px){
  .dot:nth-last-child(-n+2)::after{left:auto;right:0}
}

/* napunjena traka pokazuje koliko je ostalo do sledećeg */
.dot i{
  position:absolute;
  left:-1px;right:-1px;bottom:-1px;
  height:2px;
  background:var(--gold);
  transform:scaleX(0);transform-origin:left;
}
.dot.on i{animation:fill var(--slide-ms) linear forwards}
.hero.paused .dot.on i{animation-play-state:paused}
@keyframes fill{to{transform:scaleX(1)}}

.arrow{
  width:clamp(36px,4.2vw,47px);
  height:clamp(36px,4.2vw,47px);
  flex:none;
  display:grid;place-items:center;
  padding:0;
  border:1px solid rgba(243,239,231,.24);
  background:rgba(8,7,6,.34);
  backdrop-filter:blur(6px);
  color:var(--cream);
  cursor:pointer;
  transition:background .35s ease,border-color .35s ease,color .35s ease;
}
.arrow:hover{background:var(--gold);border-color:var(--gold);color:#0B0904}
.arrow svg{width:15px;height:15px}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .slide-copy > *{opacity:1;transform:none}
  .dot.on i{transform:scaleX(1)}
}

/* ── KOLEKCIJA ───────────────────────────────────────────────────── */
.shop{
  margin-inline:calc(50% - 50vw);
  padding-block:clamp(46px,6vw,74px) clamp(54px,7vw,86px);
  padding-inline:var(--bleed-pad);
  /* Nijansu svetlije i neutralnije od --ink (koji je topao), da se sekcija
     lagano odvoji od ostatka strane. Ista boja je i na strani proizvoda. */
  background:var(--panel);
}
.shop-head{
  display:flex;flex-direction:column;gap:12px;
  margin-bottom:clamp(26px,3.4vw,40px);
  max-width:56ch;
}
.shop-head h2{
  margin:0;
  font-size:clamp(28px,3.4vw,40px);
  font-weight:400;
  line-height:1.14;
  letter-spacing:-.005em;
}
.shop-head p{margin:0;font-size:17px;color:var(--dim);line-height:1.72}

.grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.5vw,20px);
}
@media(max-width:1120px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid{grid-template-columns:1fr}}

.card{
  display:flex;flex-direction:column;
  background:var(--card);
}

/* dve slike jedna preko druge — druga se pojavi na prelaz mišem */
.thumb{
  display:block;
  cursor:pointer;
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  background:var(--card);
}
.thumb img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  transition:opacity .55s var(--ease),transform .9s var(--ease);
}
.thumb .b{opacity:0}
.card:hover .thumb .a{opacity:0}
.card:hover .thumb .b{opacity:1}
.card:hover .thumb img{transform:scale(1.045)}

.info{
  display:flex;flex-direction:column;gap:9px;
  padding:clamp(15px,1.7vw,20px);
  flex:1;
}
.info h3{
  margin:0;
  font-size:clamp(17px,1.6vw,20px);
  font-weight:500;
  line-height:1.3;
  letter-spacing:.005em;
}
/* Naslov je link ka strani proizvoda — i jedini koji se hvata tastaturom,
   posto je slika iznad namerno van tab redosleda (tabindex="-1"). */
.info h3 a{transition:color .3s ease}
.info h3 a:hover,
.info h3 a:focus-visible{color:var(--gold)}
.info .spec{
  margin:0;
  font-size:14.5px;
  line-height:1.66;
  color:var(--dim);
  flex:1;
}
.price-row{
  display:flex;align-items:baseline;gap:12px;
  border-top:1px solid var(--line);
  padding-top:12px;margin-top:4px;
}
.price{
  font-size:18px;
  font-variant-numeric:tabular-nums;
  color:var(--cream);
  white-space:nowrap;
}
.order{
  display:flex;align-items:center;justify-content:center;
  width:100%;
  margin-top:13px;
  padding:12px 16px;
  font-family:var(--f);
  font-size:12px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-hi);
  /* Bez okvira — oblik dugmeta nosi jedva primetna podloga, da ostane
     citljiva dodirna meta na telefonu gde nema hovera. */
  background:rgba(243,239,231,.055);
  border:0;
  cursor:pointer;
  transition:background .35s ease,color .35s ease;
}
.order:hover,
.order:focus-visible{background:var(--gold);color:#0B0904}

.price em{
  font-style:normal;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--dim);
  margin-right:5px;
}


/* ── ČESTA PITANJA ───────────────────────────────────────────────── */
.faq{
  /* Ista podloga kao lista proizvoda, i takodje celom sirinom ekrana —
     inace bi se traka suzila na prelazu sa sekcije proizvoda. */
  margin-inline:calc(50% - 50vw);
  padding-block:clamp(44px,6vw,78px) clamp(56px,7vw,92px);
  padding-inline:var(--bleed-pad);
  background:var(--panel);
}
.faq h2{
  margin:0 0 clamp(22px,2.8vw,32px);
  font-size:clamp(28px,3.4vw,40px);
  font-weight:400;
  line-height:1.16;
  letter-spacing:-.005em;
}

.faq-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.4vw,32px) clamp(20px,2.6vw,40px);
}
@media(max-width:900px){.faq-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.faq-grid{grid-template-columns:1fr}}

.qa{
  display:flex;flex-direction:column;gap:9px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.qa h3{
  margin:0;
  font-size:17px;
  font-weight:500;
  line-height:1.4;
  color:var(--cream);
  letter-spacing:.005em;
}
.qa p{
  margin:0;
  font-size:15px;
  line-height:1.74;
  color:var(--dim);
}