/* ==========================================================================
   FERRO BATTUTO — pages.css
   Sekcije specifične za pojedine stranice.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO — fotografski slajder preko cele visine ekrana
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  /* 100vh je rezerva za pregledače bez svh; svh sprečava da mobilna traka
     pregledača odseče dno. */
  height: 100vh;
  height: 100svh;
  display: grid;
  align-items: center;
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: clamp(4rem, 9vh, 7rem);
  overflow: hidden;
}

/* Osnova ispod fotografija — ostaje vidljiva ako se slika ne učita */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 80% at 78% 30%, rgba(185, 143, 78, 0.08) 0%, transparent 58%),
    radial-gradient(90% 70% at 12% 88%, rgba(42, 53, 64, 0.55) 0%, transparent 60%),
    var(--pitch);
}

.hero__slider {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1100ms var(--ease-out);
}

.hero__slide.is-active { opacity: 1; }

/* Blago prigušenje boje drži tri vrlo različite fotografije u istoj tonskoj
   skali sajta. Svetlinu spušta zastor, ne filter — fotografija treba da
   ostane vidljiva. */
.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transform-origin: 58% 50%;
  filter: saturate(0.82) contrast(1.04);
}

/* Ken Burns ide samo na aktivnom slajdu. Slajd koji odlazi zadržava krajnji
   kadar dok traje pretapanje, da ne "odskoči" nazad na scale(1). */
.hero__slide.is-active img {
  animation: hero-kenburns 6500ms linear forwards;
}

.hero__slide.is-leaving img { transform: scale(1.07); }

@keyframes hero-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}

/* Slika koja se ne učita se sklanja — naslov nikad ne sme da stoji na
   polomljenoj slici, ispod je uvek --pitch. */
.hero__slide.is-broken { display: none; }

/* Zastor je namerno lagan: kovano gvožđe na fotografijama JE proizvod i
   mora da se vidi. Isti recept koriste i zaglavlja podstranica.

   Desktop (≥ 769px): tri sloja —
     1. vrlo tanka osnova preko cele slike
     2. gradijent tegljen ulevo, samo ispod tekstualne kolone
     3. vinjeta pri dnu za dugmad i pokazivače slajdova
   Desna polovina slike ostaje skoro netaknuta. Slojevi su iste boje, pa
   redosled ne menja rezultat. */
.hero__scrim,
.page-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to top,
      rgba(13, 17, 22, 0.55) 0%,
      rgba(13, 17, 22, 0) 28%),
    linear-gradient(to right,
      rgba(13, 17, 22, 0.70) 0%,
      rgba(13, 17, 22, 0.45) 32%,
      rgba(13, 17, 22, 0.12) 62%,
      rgba(13, 17, 22, 0) 100%),
    linear-gradient(rgba(13, 17, 22, 0.12), rgba(13, 17, 22, 0.12));
}

/* Telefon (≤ 768px): tekst ide preko cele širine, pa tegljenje ulevo ne
   pomaže. Sadržaj se spušta na dno ekrana, gornja polovina ostaje
   fotografiji, a tamni gradijent postoji samo ispod teksta. */
@media (max-width: 768px) {
  .hero__scrim,
  .page-hero__scrim {
    /* Tekstualni blok zauzima donjih ~50% ekrana, pa srednje tačke
       gradijenta sežu do njegovog vrha (eyebrow/putanja); gornja četvrtina
       fotografije ostaje čista. */
    background:
      linear-gradient(to top,
        rgba(13, 17, 22, 0.86) 0%,
        rgba(13, 17, 22, 0.64) 38%,
        rgba(13, 17, 22, 0.48) 56%,
        rgba(13, 17, 22, 0.16) 72%,
        rgba(13, 17, 22, 0) 84%),
      linear-gradient(rgba(13, 17, 22, 0.10), rgba(13, 17, 22, 0.10));
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide.is-active img,
  .hero__slide.is-leaving img { animation: none; transform: none; }
}

.hero__in {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: clamp(1.1rem, 2.6vw, 1.9rem);
  font-size: var(--t-xs);
  color: var(--zinc);
  letter-spacing: 0.06em;
  opacity: 0;
}

body.is-ready .hero__eyebrow { animation: hero-fade 1s var(--ease-out) 0.15s forwards; }

.hero__eyebrow i {
  display: block;
  width: clamp(30px, 6vw, 62px);
  height: 1px;
  background: var(--brass);
  transform-origin: left;
  transform: scaleX(0);
}

body.is-ready .hero__eyebrow i { animation: hero-rule 1.1s var(--ease-forge) 0.2s forwards; }

@keyframes hero-fade { to { opacity: 1; } }
@keyframes hero-rule { to { transform: scaleX(1); } }

.hero__title {
  font-family: var(--font-display);
  font-size: var(--t-4xl);
  line-height: 0.88;
  letter-spacing: -0.038em;
  max-width: 15ch;
}

body.is-ready .hero__title .line-mask > span { transform: translateY(0); opacity: 1; }
.hero__title .line-mask > span { transition-duration: 1.25s; }
.hero__title .line-mask:nth-child(1) > span { transition-delay: 0.20s; }
.hero__title .line-mask:nth-child(2) > span { transition-delay: 0.31s; }
.hero__title .line-mask:nth-child(3) > span { transition-delay: 0.42s; }

.hero__title em {
  font-style: italic;
  letter-spacing: -0.02em;
}

.hero__foot {
  margin-top: clamp(1.8rem, 4vw, 3.2rem);
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
  align-items: end;
  opacity: 0;
  transform: translateY(20px);
}

body.is-ready .hero__foot { animation: hero-up 1.1s var(--ease-forge) 0.85s forwards; }

@keyframes hero-up { to { opacity: 1; transform: none; } }

@media (min-width: 780px) {
  .hero__foot { grid-template-columns: minmax(0, 34ch) auto; gap: var(--sp-6); }
}

.hero__lede {
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--zinc);
  max-width: 34ch;
}

.hero__lede b { color: var(--spangle); font-weight: 500; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }

/* --- Pokazivači slajdova ---------------------------------------------------
   Stoje u tekstualnoj koloni, ispod dugmadi. Dole levo bi ih preklopilo
   dugme pomoćnika ("Pitajte nas"), koje je fiksirano u istom uglu. */

.hero__dots {
  display: flex;
  gap: 0.55rem;
  margin-top: clamp(0.8rem, 2.6vh, 2.1rem);
  opacity: 0;
}

body.is-ready .hero__dots { animation: hero-fade 1s var(--ease-out) 1.25s forwards; }

/* Meta za prst je 44px visoka; vidljiva traka ostaje tanka i centrirana */
.hero__dot {
  width: 58px;
  height: 44px;
  display: grid;
  align-items: center;
  padding: 0;
  background: none;
}

.hero__dot i {
  display: block;
  height: 2px;
  width: 100%;
  background: rgba(230, 235, 239, 0.26);
  position: relative;
  overflow: hidden;
  transition: background-color var(--dur-1) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .hero__dot:hover i { background: rgba(230, 235, 239, 0.45); }
}

.hero__dot i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
}

/* Aktivna traka se puni tokom zadržavanja slajda (6500ms) */
.hero__dot.is-active i::after {
  animation: hero-dot-fill 6500ms linear forwards;
}

/* Kada je autoplay pauziran (hover, skriven tab) traka staje s njim */
.hero.is-paused .hero__dot.is-active i::after { animation-play-state: paused; }

@keyframes hero-dot-fill { to { transform: scaleX(1); } }

@media (max-width: 560px) {
  .hero__dot { width: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__dots { display: none; }
}

/* --- Kontrole za tastaturu -------------------------------------------------
   Prstenovi kursora postoje samo za miša, pa slajder mora da bude upotrebljiv
   i bez njega: prava dugmad, nevidljiva dok ne dobiju fokus. */

.hero__sr-nav { display: flex; gap: 0.5rem; }

.hero__sr-btn {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.hero__sr-btn:focus-visible {
  position: static;
  width: auto; height: auto;
  margin: 0.9rem 0.5rem 0 0;
  overflow: visible;
  clip: auto;
  padding: 0.55rem 1rem;
  border: 1px solid var(--brass);
  color: var(--spangle);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  background: rgba(13, 17, 22, 0.8);
}

/* Pokazivač skrola */
.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(1.4rem, 3vh, 2.4rem);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-direction: row-reverse;
  font-size: var(--t-xs);
  color: var(--zinc-dim);
  letter-spacing: 0.08em;
  opacity: 0;
}

body.is-ready .hero__scroll { animation: hero-fade 1s var(--ease-out) 1.5s forwards; }

.hero__scroll i {
  display: block;
  width: 1px;
  height: 34px;
  background: linear-gradient(to bottom, var(--brass), transparent);
  position: relative;
  overflow: hidden;
}

.hero__scroll i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--brass);
  animation: scroll-tick 2.1s var(--ease-in-out) infinite;
}

@keyframes scroll-tick {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

@media (max-width: 620px) { .hero__scroll { display: none; } }

/* --------------------------------------------------------------------------
   2. MANIFEST — uvodni tekstualni blok
   -------------------------------------------------------------------------- */

.manifest__grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}

@media (min-width: 980px) {
  .manifest__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gutter);
    align-items: start;
  }
  .manifest__side { grid-column: 1 / 4; position: sticky; top: calc(var(--header-h) + 3rem); }
  .manifest__main { grid-column: 5 / 13; }
}

.manifest__side { display: grid; gap: var(--sp-3); align-content: start; }

.manifest__year {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 9vw, 6.2rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--spangle);
  font-variant-numeric: lining-nums;
}

.manifest__year span { color: var(--brass); }

.manifest__note { font-size: var(--t-sm); color: var(--zinc); max-width: 26ch; line-height: 1.65; }

.manifest__main h2 {
  font-size: var(--t-2xl);
  line-height: 1.02;
  margin-bottom: var(--sp-4);
  max-width: 20ch;
}

.manifest__cols {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}

@media (min-width: 720px) { .manifest__cols { grid-template-columns: 1fr 1fr; gap: var(--sp-5); } }

.manifest__cols h4 {
  font-size: var(--t-md);
  font-family: var(--font-text);
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 0.5rem;
}

.manifest__cols p { font-size: var(--t-sm); color: var(--zinc); line-height: 1.7; }

/* --------------------------------------------------------------------------
   3. NASLOV SEKCIJE
   -------------------------------------------------------------------------- */

.sec-head {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: clamp(2rem, 4.5vw, 3.6rem);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .sec-head {
    grid-template-columns: 1.4fr 1fr;
    align-items: end;
    gap: var(--sp-6);
  }
}

.sec-head h2 { max-width: 17ch; }
.sec-head p { color: var(--zinc); max-width: 44ch; font-size: var(--t-sm); line-height: 1.7; }

.sec-rule {
  height: 1px;
  background: var(--slate);
  margin-bottom: var(--sp-4);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s var(--ease-forge);
}
.sec-rule.is-in { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   4. PROCES — stvarni redosled operacija, zato je numerisan
   -------------------------------------------------------------------------- */

.proc { display: grid; gap: 0; }

@media (min-width: 1000px) {
  .proc {
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--sp-6);
    align-items: start;
  }
}

.proc__sticky {
  display: none;
}

@media (min-width: 1000px) {
  .proc__sticky {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + 5rem);
  }
}

.proc__stage {
  aspect-ratio: 1;
  border: 1px solid var(--slate);
  background: var(--iron);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}

.proc__art {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--slate-2);
  opacity: 0;
  transform: scale(0.9) rotate(-4deg);
  transition: opacity 0.6s var(--ease-out), transform 0.9s var(--ease-forge), color 0.6s var(--ease-out);
}

.proc__art.is-on { opacity: 1; transform: none; color: var(--brass-lo); }
.proc__art svg { width: 56%; height: auto; }

.proc__stage-n {
  position: absolute;
  left: var(--sp-4);
  bottom: var(--sp-3);
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 5.2rem);
  line-height: 1;
  color: var(--slate);
  font-variant-numeric: lining-nums;
  transition: color 0.5s var(--ease-out);
}

.proc__list { display: grid; }

.proc__step {
  border-top: 1px solid var(--slate);
  padding-block: clamp(1.8rem, 4vw, 3.2rem);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3) var(--sp-4);
  align-items: start;
  transition: border-color 0.5s var(--ease-out);
}

.proc__step:last-child { border-bottom: 1px solid var(--slate); }

.proc__step.is-active { border-top-color: var(--brass-lo); }

.proc__n {
  font-family: var(--font-display);
  font-size: var(--t-sm);
  color: var(--zinc-dim);
  font-variant-numeric: tabular-nums;
  padding-top: 0.55rem;
  transition: color 0.4s var(--ease-out);
  min-width: 2.4ch;
}

.proc__step.is-active .proc__n { color: var(--brass); }

.proc__step h3 {
  font-size: clamp(1.5rem, 3.6vw, 2.35rem);
  line-height: 1.05;
  margin-bottom: 0.6rem;
  transition: color 0.4s var(--ease-out);
}

.proc__step p { color: var(--zinc); max-width: 52ch; line-height: 1.75; font-size: var(--t-sm); }

.proc__spec {
  margin-top: var(--sp-3);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
}

.proc__spec span {
  font-size: var(--t-xs);
  color: var(--zinc-dim);
  letter-spacing: 0.03em;
}

.proc__spec b { color: var(--zinc); font-weight: 500; }

/* --------------------------------------------------------------------------
   5. CINKOVANJE — jedini deo sajta gde ulazi toplota
   -------------------------------------------------------------------------- */

.zinc-sec {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--pitch) 0%, #16110d 46%, var(--pitch) 100%);
}

.zinc-sec__embers {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
}

.zinc-sec__in { position: relative; z-index: 1; }

.zinc-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 980px) {
  .zinc-grid { grid-template-columns: 1.05fr 1fr; gap: var(--sp-7); }
}

.zinc-temp {
  display: grid;
  gap: 0.4rem;
  justify-items: start;
}

.zinc-temp__n {
  font-family: var(--font-display);
  font-size: clamp(4rem, 13vw, 9.5rem);
  line-height: 0.82;
  letter-spacing: -0.045em;
  font-variant-numeric: lining-nums tabular-nums;
  background: linear-gradient(180deg, #f0d9b8 0%, var(--heat) 62%, var(--oxide) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.zinc-temp__n sup {
  font-size: 0.3em;
  vertical-align: super;
  letter-spacing: 0;
}

.zinc-temp__l { font-size: var(--t-sm); color: var(--zinc); max-width: 30ch; line-height: 1.65; }

.zinc-bar {
  width: 100%;
  max-width: 340px;
  height: 3px;
  margin-top: var(--sp-3);
  background: var(--slate);
  position: relative;
  overflow: hidden;
}

.zinc-bar i {
  position: absolute;
  inset: 0 100% 0 0;
  background: linear-gradient(90deg, var(--oxide), var(--heat), #f0d9b8);
  transition: inset 2.4s var(--ease-forge);
}

.zinc-bar.is-in i { inset: 0 0 0 0; }

.zinc-copy h2 { margin-bottom: var(--sp-4); max-width: 16ch; }

.zinc-facts {
  margin-top: var(--sp-5);
  display: grid;
  gap: 1px;
  background: rgba(185, 143, 78, 0.22);
  border: 1px solid rgba(185, 143, 78, 0.22);
}

@media (min-width: 620px) { .zinc-facts { grid-template-columns: 1fr 1fr; } }

.zinc-fact {
  background: rgba(13, 17, 22, 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  padding: var(--sp-4);
}

.zinc-fact b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  line-height: 1;
  color: var(--spangle);
  margin-bottom: 0.4rem;
  font-weight: 400;
}

.zinc-fact span { font-size: var(--t-sm); color: var(--zinc); line-height: 1.55; display: block; }

/* --------------------------------------------------------------------------
   6. DASPI
   -------------------------------------------------------------------------- */

.daspi { position: relative; }

.daspi__grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}

@media (min-width: 980px) {
  .daspi__grid { grid-template-columns: 1fr 1.1fr; gap: var(--sp-7); align-items: center; }
}

.daspi__seal {
  border: 1px solid var(--slate);
  padding: clamp(1.6rem, 4vw, 2.8rem);
  display: grid;
  gap: var(--sp-3);
  background: var(--iron);
  position: relative;
  overflow: hidden;
}

.daspi__seal::after {
  content: "";
  position: absolute;
  right: -30%;
  top: -40%;
  width: 70%;
  aspect-ratio: 1;
  border: 1px solid var(--slate);
  border-radius: 50%;
  pointer-events: none;
}

.daspi__seal-k {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.daspi__seal-k span { color: var(--brass); }

.daspi__seal p { font-size: var(--t-sm); color: var(--zinc); line-height: 1.7; max-width: 38ch; }

.daspi__list { display: grid; gap: 1px; background: var(--slate); border: 1px solid var(--slate); }

.daspi__row {
  background: var(--pitch);
  padding: clamp(1rem, 2.4vw, 1.5rem) clamp(1rem, 2.4vw, 1.6rem);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-2) var(--sp-3);
  align-items: baseline;
  transition: background-color 0.4s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .daspi__row:hover { background: var(--iron); }
}

.daspi__row b { font-size: var(--t-base); font-weight: 600; color: var(--spangle); }
.daspi__row span { font-size: var(--t-sm); color: var(--zinc); grid-column: 1 / -1; line-height: 1.6; }
.daspi__row i {
  font-style: normal;
  font-size: var(--t-xs);
  color: var(--brass);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   7. CTA blok
   -------------------------------------------------------------------------- */

.cta {
  position: relative;
  border-top: 1px solid var(--slate);
  padding-block: clamp(4rem, 10vw, 8.5rem);
  overflow: hidden;
}

.cta__in {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
  position: relative;
  z-index: 1;
}

@media (min-width: 900px) {
  .cta__in { grid-template-columns: 1.3fr 1fr; align-items: end; gap: var(--sp-7); }
}

.cta h2 { font-size: var(--t-3xl); line-height: 0.95; max-width: 13ch; }

.cta__side { display: grid; gap: var(--sp-4); }

.cta__lines { display: grid; gap: 0.55rem; }

.cta__lines a, .cta__lines p {
  font-size: var(--t-md);
  color: var(--spangle);
  font-variant-numeric: tabular-nums;
  display: inline-block;
  width: fit-content;
}

.cta__ghost {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(6rem, 26vw, 22rem);
  line-height: 1;
  color: var(--slate);
  opacity: 0.16;
  pointer-events: none;
  white-space: nowrap;
  z-index: 0;
  letter-spacing: -0.04em;
}

/* --------------------------------------------------------------------------
   8. KONTAKT
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}

@media (min-width: 980px) {
  .contact-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: start; }
}

.contact-block { display: grid; gap: var(--sp-5); align-content: start; }

.contact-card {
  border: 1px solid var(--slate);
  padding: clamp(1.4rem, 3.4vw, 2.2rem);
  display: grid;
  gap: var(--sp-2);
  background: var(--iron);
  transition: border-color 0.4s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .contact-card:hover { border-color: var(--slate-2); }
}

.contact-card h4 {
  font-family: var(--font-text);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--zinc-dim);
}

.contact-card a, .contact-card p {
  font-size: var(--t-md);
  color: var(--spangle);
  line-height: 1.45;
  width: fit-content;
}

.contact-card .sub { font-size: var(--t-sm); color: var(--zinc); }

.map-frame {
  border: 1px solid var(--slate);
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--iron);
  position: relative;
}

.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) invert(0.92) contrast(0.86) brightness(0.94) hue-rotate(180deg);
}

/* --------------------------------------------------------------------------
   9. PROIZVODI — detaljne kategorije
   -------------------------------------------------------------------------- */

.prod { border-top: 1px solid var(--slate); padding-block: clamp(2.5rem, 6vw, 5rem); }

.prod__in {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

@media (min-width: 980px) {
  .prod__in { grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-6); align-items: start; }
}

.prod__head { display: grid; gap: var(--sp-3); align-content: start; }

@media (min-width: 980px) {
  .prod__head { position: sticky; top: calc(var(--header-h) + 3rem); }
}

.prod__head h2 { font-size: var(--t-xl); line-height: 1.02; }
.prod__head p { color: var(--zinc); font-size: var(--t-sm); line-height: 1.75; max-width: 42ch; }

.prod__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }

.prod__tags span {
  font-size: var(--t-xs);
  color: var(--zinc);
  border: 1px solid var(--slate);
  padding: 0.3rem 0.65rem;
}

.prod__art {
  border: 1px solid var(--slate);
  background: var(--iron);
  aspect-ratio: 5 / 4;
  display: grid;
  place-items: center;
  color: var(--slate-2);
  overflow: hidden;
  position: relative;
  transition: color 0.6s var(--ease-out), border-color 0.6s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .prod__art:hover { color: var(--brass-lo); border-color: var(--slate-2); }
}.prod__art svg { width: 62%; height: auto; }

.prod__art img {
  opacity: 0;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.35) brightness(0.85);
  transition: transform 1.1s var(--ease-forge), filter 0.6s var(--ease-out);
}

.prod__art.has-photo img { opacity: 1; }
.prod__art img { transition: opacity 0.6s var(--ease-out), transform 1.1s var(--ease-forge), filter 0.6s var(--ease-out); }
.prod__art.no-photo img { display: none; }
.prod__art:not(.no-photo) > svg { display: none; }
@media (hover: hover) and (pointer: fine) {
  .prod__art:hover img { transform: scale(1.04); filter: grayscale(0) brightness(1); }
}

/* --------------------------------------------------------------------------
   10. O NAMA
   -------------------------------------------------------------------------- */

.story {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}

@media (min-width: 980px) {
  .story { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }
  .story__a { grid-column: 1 / 7; }
  .story__b { grid-column: 8 / 13; align-self: end; }
}

.pull {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.6vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--spangle);
  border-left: 1px solid var(--brass);
  padding-left: clamp(1rem, 2.5vw, 1.8rem);
  max-width: 24ch;
}

.tl { border-top: 1px solid var(--slate); }

.tl__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3) var(--sp-4);
  padding-block: clamp(1.2rem, 3vw, 2rem);
  border-bottom: 1px solid var(--slate);
  align-items: baseline;
  transition: background-color 0.4s var(--ease-out);
}

@media (min-width: 720px) {
  .tl__row { grid-template-columns: 7rem 1fr; }
}

.tl__y {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  color: var(--brass);
  font-variant-numeric: lining-nums;
  line-height: 1;
}

.tl__row h4 {
  font-family: var(--font-text);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 0.35rem;
}

.tl__row p { color: var(--zinc); font-size: var(--t-sm); line-height: 1.7; max-width: 56ch; }

/* --------------------------------------------------------------------------
   11. PREUZIMANJA
   -------------------------------------------------------------------------- */

.dl { display: grid; gap: 1px; background: var(--slate); border: 1px solid var(--slate); }

.dl__row {
  background: var(--pitch);
  padding: clamp(1rem, 2.4vw, 1.4rem) clamp(1rem, 2.4vw, 1.5rem);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  transition: background-color 0.35s var(--ease-out), padding-left 0.4s var(--ease-forge);
}

@media (hover: hover) and (pointer: fine) {
  .dl__row:hover { background: var(--iron); padding-left: calc(clamp(1rem, 2.4vw, 1.5rem) + 8px); }
}

.dl__row b { font-size: var(--t-base); font-weight: 500; flex: 1; min-width: 0; }
.dl__row i { font-style: normal; font-size: var(--t-xs); color: var(--zinc-dim); letter-spacing: 0.05em; white-space: nowrap; }

.dl__ico {
  width: 32px; height: 32px;
  flex: 0 0 auto;
  display: grid; place-items: center;
  border: 1px solid var(--slate);
  color: var(--zinc);
  transition: color 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .dl__row:hover .dl__ico { color: var(--brass); border-color: var(--brass); }
}.dl__ico svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* --------------------------------------------------------------------------
   12. 404
   -------------------------------------------------------------------------- */

.nf {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: calc(var(--header-h) + 3rem) var(--gutter) 4rem;
}

.nf__n {
  font-family: var(--font-display);
  font-size: clamp(6rem, 22vw, 16rem);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--slate-2);
}

.nf p { color: var(--zinc); max-width: 42ch; margin-inline: auto; }

/* Hero: ako se skriptovanje ne izvrši, sadržaj mora ostati vidljiv */
@media (prefers-reduced-motion: reduce) {
  .hero__eyebrow, .hero__foot, .hero__scroll { opacity: 1; transform: none; }
  .hero__eyebrow i { transform: scaleX(1); }
  .hero__title .line-mask > span { transform: none; opacity: 1; }
}

/* Telefon: sadržaj heroa leži na dnu ekrana, gornja polovina pripada
   fotografiji. Donji razmak čisti pokazivače slajdova i dugme pomoćnika,
   plus traku za povratak na početni ekran (safe-area). */
@media (max-width: 768px) {
  .hero {
    align-items: end;
    padding-top: calc(var(--header-h) + 1rem);
    padding-bottom: calc(var(--fab-inset) + 54px + 1rem + env(safe-area-inset-bottom, 0px));
  }

  .hero__eyebrow { margin-bottom: 0.85rem; }

  /* Korak manji od desktop naslova, da ceo blok stane u donjih ~55% */
  .hero__title {
    font-size: clamp(2.3rem, 1.05rem + 5.9vw, 3.6rem);
    line-height: 0.92;
  }

  .hero__title,
  .hero__lede {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 24px rgba(0, 0, 0, 0.35);
  }

  .hero__foot { margin-top: 1.1rem; gap: 1.1rem; }

  .hero__lede {
    font-size: 1rem;
    line-height: 1.5;
    color: #e2e7eb;
    max-width: 40ch;
  }

  /* Dugmad u jednom redu dok staju; na najužim ekranima se sama prelome */
  .hero__actions { flex-wrap: wrap; gap: 0.5rem; }
  .hero__actions .btn {
    flex: 1 1 9.5rem;
    min-height: 48px;
    padding: 0.8rem 0.9rem;
  }

  .hero__dots { margin-top: 0.35rem; }
  .hero__scroll { display: none; }

  /* Kadar po slajdu: vertikalno se na uspravnom ekranu vidi cela slika, pa
     se bira samo vodoravni isečak — tamo gde je kovani deo, ne zid. */
  .hero__slide--1 img { object-position: 50% center; transform-origin: 50% 40%; }
  .hero__slide--2 img { object-position: 40% center; transform-origin: 40% 40%; }
  .hero__slide--3 img { object-position: 24% center; transform-origin: 24% 45%; }
}

/* <picture> je po difoltu inline; slajd i zaglavlje podstranice ga razvlače */
.hero__slide picture,
.page-hero__media picture { display: block; width: 100%; height: 100%; }

/* --- Svetla fotografija (ferro-battuto-1: fasada po suncu) ------------------
   Samo ona dobija dodatni sloj levo, umesto da se zastor pojača za sve tri.
   Sloj je poseban element sa pretapanjem, pa se pri promeni slajda ne
   "prebacuje" naglo dok se slike pretapaju. */
.hero__scrim::after,
.page-hero__scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1100ms var(--ease-out);
  background: linear-gradient(to right,
    rgba(13, 17, 22, 0.46) 0%,
    rgba(13, 17, 22, 0.40) 36%,
    rgba(13, 17, 22, 0.16) 60%,
    rgba(13, 17, 22, 0) 82%);
}

@media (min-width: 769px) {
  .hero[data-slide="0"] .hero__scrim::after,
  .page-hero--bright .page-hero__scrim::after { opacity: 1; }
}

/* Tanka senka ispod naslova je osiguranje za svetle delove fotografije */
.hero__title,
.hero__lede,
.page-hero h1,
.page-hero .body-copy {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 2px 28px rgba(0, 0, 0, 0.3);
}

/* Dugme sa ivicom na fotografiji dobija providnu podlogu, inače se na
   svetlom zidu vidi samo tekst bez okvira */
.hero .btn:not(.btn--solid),
.page-hero .btn:not(.btn--solid) {
  background: rgba(13, 17, 22, 0.42);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-color: rgba(230, 235, 239, 0.34);
}

/* Sitan tekst heroa na fotografiji: skoro beo (vidi napomenu u layout.css) */
.hero__eyebrow {
  color: #f2f5f7;
  text-shadow: 0 1px 2px rgba(13, 17, 22, 0.55), 0 1px 12px rgba(13, 17, 22, 0.5);
}
.hero__lede { color: #e2e7eb; }

/* --- Podloga ispod teksta (desktop) ----------------------------------------
   Meka elipsa samo iza tekstualne kolone. Propisani zastor je dovoljan za
   naslov, ali sitan tekst (lede, uvod) na svetlim zidovima fotografija 2 i 3
   pada ispod 4,5:1 — ovo ga vraća, a desna strana i vrh slike ostaju čisti. */
@media (min-width: 769px) {
  .hero__scrim::before,
  .page-hero__scrim::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 44% 40% at 18% 72%,
      rgba(13, 17, 22, 0.42) 0%,
      rgba(13, 17, 22, 0.26) 52%,
      rgba(13, 17, 22, 0) 100%);
  }

  .page-hero__scrim::before {
    background: radial-gradient(ellipse 50% 60% at 20% 58%,
      rgba(13, 17, 22, 0.44) 0%,
      rgba(13, 17, 22, 0.26) 55%,
      rgba(13, 17, 22, 0) 100%);
  }
}