/* ============================================================
   PAGES — sekcije pojedinačnih stranica:
   split layout, digitalni album, custom, koraci, galerija,
   lightbox, FAQ, kontakt forma, finalni CTA
   ============================================================ */

/* split layout (tekst + slika) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:4.5rem;align-items:center}
.split .frame{aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius)}
.split .frame.tall-arch{border-radius:200px 200px 8px 8px}
.split img{width:100%;height:100%;object-fit:cover;transition:transform 700ms ease}
.split .frame:hover img{transform:scale(1.04)}
.split .h2{margin-bottom:1.4rem}

/* ---------- digitalni album ---------- */
.album-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:4.5rem;align-items:center}
.qr-card{
  max-width:330px;margin:0 auto;
  text-align:center;box-shadow:0 40px 70px -45px rgba(62,53,55,.45);
  position:relative;transform:rotate(-2deg);
}
.qr-card::before{content:"";position:absolute;inset:10px;border:1px solid var(--color-rose-soft);border-radius:9px;pointer-events:none}
.qr-card .names{font-family:var(--font-serif);font-size:1.6rem;margin-bottom:.2rem}
.qr-card .names em{font-style:italic;color:var(--color-rose-dark)}
.qr-card .date{font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--color-muted);margin:.4rem 0 1.4rem}
.qr-box{width:150px;height:150px;margin:0 auto 1.3rem;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius);padding:14px}
.qr-box svg{width:100%;height:100%}
.qr-card .hint{font-size:.72rem;color:var(--color-muted);line-height:1.6}

.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;margin-top:2.4rem}
.steps-4{grid-template-columns:repeat(4,1fr);margin-top:0}
.step{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius);padding:1.5rem 1.4rem;transition:var(--transition)}
.step:hover{border-color:var(--color-rose);transform:translateY(-3px)}
.step .num{font-family:var(--font-serif);font-size:1.9rem;color:var(--color-rose);display:block;line-height:1;margin-bottom:.6rem}
.step h3,.step h4{font-size:1.15rem;margin-bottom:.25rem}
.step p{font-size:.82rem;color:var(--color-muted);font-weight:300;line-height:1.6}

/* ---------- custom collage ---------- */
/* eksplicitan raspored bez rupa — 3 kolone × 3 reda, 7 slika */
.custom-collage{
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,150px);gap:1rem;
  grid-template-areas:
    "a b c"
    "a d c"
    "e d f";
}
.custom-collage .c{overflow:hidden;border-radius:var(--radius-sm)}
.custom-collage .c img{width:100%;height:100%;object-fit:cover;transition:transform 700ms ease}
.custom-collage .c:hover img{transform:scale(1.06)}
.custom-collage .c1{grid-area:a}
.custom-collage .c2{grid-area:b}
.custom-collage .c3{grid-area:c}
.custom-collage .c4{grid-area:d}
.custom-collage .c5{grid-area:e}
.custom-collage .c6{grid-area:f}
.custom-collage .c7{display:none}

/* ---------- kako naručiti ---------- */
.order-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}
.order-step{text-align:center;padding:2.2rem 1.4rem;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius);transition:var(--transition)}
.order-step:hover{transform:translateY(-4px);border-color:var(--color-rose)}
.order-step .num{
  width:52px;height:52px;margin:0 auto 1.1rem;border-radius:50%;border:1px solid var(--color-rose);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-serif);
  font-size:1.3rem;color:var(--color-rose-dark);
}
.order-step h3{font-size:1.2rem;margin-bottom:.4rem}
.order-step p{font-size:.82rem;color:var(--color-muted);font-weight:300;line-height:1.6}
.order-cta{text-align:center;margin-top:3.5rem}
.order-cta h3{font-size:1.6rem;margin-bottom:.6rem}
.order-cta p{color:var(--color-muted);font-weight:300;max-width:30rem;margin:0 auto 1.8rem}

/* ---------- finalni CTA ---------- */
.final-cta{background:var(--color-rose-soft);text-align:center}
.final-cta .h2{margin-bottom:1rem}
.final-cta .lead{margin:0 auto 2.2rem}

/* ---------- galerija (masonry) ---------- */
.gallery{columns:3;column-gap:1.1rem}
.gallery-item{
  position:relative;display:block;width:100%;margin-bottom:1.1rem;overflow:hidden;border-radius:var(--radius-sm);
  break-inside:avoid;padding:0;
}
.gallery-item img{width:100%;transition:transform 700ms ease}
.gallery-item:hover img{transform:scale(1.05)}
.gallery-item .tag{
  position:absolute;left:0;right:0;bottom:0;padding:2rem 1rem .9rem;text-align:center;
  background:linear-gradient(180deg,transparent,rgba(62,53,55,.55));color:#fff;
  font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;opacity:0;transition:var(--transition);
}
.gallery-item:hover .tag,.gallery-item:focus-visible .tag{opacity:1}

/* lightbox */
.lightbox{
  position:fixed;inset:0;z-index:90;background:rgba(30,24,26,.9);display:flex;align-items:center;justify-content:center;
  padding:2rem;opacity:0;visibility:hidden;transition:opacity 300ms ease,visibility 300ms ease;
}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox img{max-height:84vh;max-width:100%;border-radius:var(--radius-sm)}
.lightbox-close{position:absolute;top:1.2rem;right:1.6rem;color:#fff;font-size:2rem;line-height:1;padding:.5rem}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-size:2.4rem;padding:1rem;opacity:.8}
.lightbox-nav:hover{opacity:1}
.lightbox-prev{left:.6rem}
.lightbox-next{right:.6rem}
.lightbox-caption{position:absolute;bottom:1.4rem;left:0;right:0;text-align:center;color:#fff;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase}

/* ---------- FAQ ---------- */
.faq{max-width:720px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--color-border)}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.4rem .2rem;text-align:left;font-family:var(--font-serif);font-size:1.25rem;transition:color 300ms ease;
}
.faq-q:hover{color:var(--color-rose-dark)}
.faq-q .icon{font-family:var(--font-sans);font-size:1.2rem;color:var(--color-rose);transition:transform 300ms ease;flex-shrink:0}
.faq-q[aria-expanded="true"] .icon{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height 400ms ease}
.faq-a p{padding:0 .2rem 1.5rem;color:var(--color-muted);font-weight:300;font-size:.92rem}

/* ---------- kontakt ---------- */
.contact-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:4rem;align-items:start}
.contact-info .h2{margin-bottom:1.2rem}
.contact-info .lead{margin-bottom:2rem}
.contact-detail{padding:1rem 0;border-top:1px solid var(--color-border);font-size:.9rem}
.contact-detail strong{display:block;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--color-rose-dark);font-weight:500;margin-bottom:.2rem}
/* stilovi forme su u css/forms.css */