/* ==========================================================================
   zd-laminat.css — stranica „Laminat" (Laminat.html), Zlatiborski dom
   Referenca: referentne slike/laminat-reference.png
     hero + traka prednosti  → varijanta 1
     katalog i kartice       → varijanta 2 (bez filtera iz varijante 4)
   Učitava se POSLE zd-foundation.css i zd-home.css. Sve klase su .zd-lam-*,
   pa ništa ne može da se umeša u header, footer ili druge stranice.
   Tipografija: globalni tokeni iz zd-typography.css (Montserrat + Inter).
   ========================================================================== */

.zd-lam{
  --lam-max:      var(--zd-max-content);   /* 1280 — isti kontejner kao ostatak sajta */
  --lam-gap:      clamp(12px, 1.4vw, 20px);
  --lam-cream:    #F6F1E8;                 /* tekstualni deo heroja */
  --lam-page:     #FBF9F5;                 /* podloga stranice */
  --lam-card:     #FFFFFF;
  --lam-edge:     #E7E0D2;                 /* ista porodica kao okviri kartica keramike */
  --lam-edge-2:   #D9D0BE;
  --lam-chip:     #F4EFE6;
  --lam-ink:      var(--zd-ink);
  --lam-ink-2:    var(--zd-ink-soft);
  --lam-gold:     var(--zd-accent);
  --lam-gold-txt: var(--zd-accent-dark);
  --lam-r:        12px;
  --lam-r-img:    8px;
  --lam-sh:       0 1px 2px rgba(24,20,14,.04), 0 8px 24px rgba(24,20,14,.06);
  --lam-sh-hi:    0 2px 4px rgba(24,20,14,.05), 0 14px 32px rgba(24,20,14,.10);
  background: var(--lam-page);
  color: var(--lam-ink);
}

/* Mobirise theme skripta (assets/theme/js/script.js) dodaje .hidden i
   animate__ klase proizvoljnim <p>/<li>/<img>. Sadržaj mora biti odmah vidljiv
   (ista zaštita kao na keramici i vratima). */
.zd-lam #zd-lam-main .hidden,
.zd-lam .zd-lam-dialog .hidden{ visibility: visible; }
.zd-lam #zd-lam-main .animate__animated,
.zd-lam .zd-lam-dialog .animate__animated{ animation: none; opacity: 1; }

.zd-lam .zd-lam-shell{
  width: 100%;
  max-width: calc(var(--lam-max) + 2 * var(--zd-gutter));
  margin-inline: auto;
  padding-inline: var(--zd-gutter);
}

/* --------------------------------------------------------------------------
   1. Hero — varijanta 1: tekst na krem podlozi levo, fotografija desno do
      ivice ekrana. Kompaktan, nije fullscreen. Počinje ispod fiksnog headera.
   -------------------------------------------------------------------------- */
.zd-lam .zd-lam-hero{
  padding-top: var(--zd-header-h);
  background: var(--lam-cream);
}
.zd-lam .zd-lam-hero__grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  min-height: clamp(340px, 30vw, 440px);
}
/* Leva kolona počinje na osi kontejnera (ista leva ivica kao katalog). */
.zd-lam .zd-lam-hero__copy{
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(1.75rem, 3vw, 2.75rem);
  padding-left: max(var(--zd-gutter), calc((100vw - var(--lam-max)) / 2));
  padding-right: clamp(1.5rem, 3.5vw, 3.5rem);
}
.zd-lam .zd-lam-crumb ol{
  list-style: none; margin: 0 0 clamp(.9rem, 1.6vw, 1.35rem); padding: 0;
  display: flex; flex-wrap: wrap; gap: .45rem;
  font-size: var(--zd-fs-micro); color: var(--lam-ink-2);
}
.zd-lam .zd-lam-crumb li + li::before{ content: "›"; margin-right: .45rem; color: var(--lam-edge-2); }
.zd-lam .zd-lam-crumb a{ color: var(--lam-ink-2); text-decoration: none; border-bottom: 1px solid transparent; }
.zd-lam .zd-lam-crumb a:hover{ color: var(--lam-gold-txt); border-bottom-color: currentColor; }
.zd-lam .zd-lam-crumb [aria-current]{ color: var(--lam-ink); }

.zd-lam .zd-lam-hero__title{
  margin: 0;
  font-family: var(--zd-font-display);
  font-weight: var(--zd-fw-display, 600);
  font-size: clamp(2.5rem, 4.4vw, 4rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--lam-ink);
}
.zd-lam .zd-lam-hero__sub{
  margin: .45rem 0 0;
  font-family: var(--zd-font-display);
  font-weight: 500;
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  line-height: 1.25;
  color: var(--lam-ink);
}
.zd-lam .zd-lam-hero__lead{
  margin: .85rem 0 0;
  max-width: 50ch;
  font-size: var(--zd-fs-lead);
  line-height: 1.6;
  color: var(--lam-ink-2);
}

.zd-lam .zd-lam-hero__media{
  position: relative;
  margin: 0;
  min-height: 100%;
  overflow: hidden;
  background: #2A231B;
}
.zd-lam .zd-lam-hero__media img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 55%;
  display: block;
}
/* Diskretan urednički citat u uglu fotografije (kao u referenci 1). Blagi
   donji gradijent čuva čitljivost bez tamnjenja cele slike. */
.zd-lam .zd-lam-hero__media::after{
  content: ""; position: absolute; inset: auto 0 0 0; height: 55%;
  background: linear-gradient(to top, rgba(20,15,10,.55), rgba(20,15,10,0));
  pointer-events: none;
}
.zd-lam .zd-lam-hero__quote{
  position: absolute; z-index: 1;
  right: clamp(1.25rem, 3vw, 2.5rem); bottom: clamp(1.1rem, 2.4vw, 2rem);
  margin: 0; max-width: 22ch;
  font-family: var(--zd-font-display); font-weight: 300;
  font-size: clamp(.95rem, 1.35vw, 1.25rem); line-height: 1.35;
  letter-spacing: .01em; text-align: right;
  color: rgba(255,255,255,.92);
}

/* --------------------------------------------------------------------------
   2. Traka prednosti — varijanta 1: pet stavki u redu, tanke linijske ikonice.
   -------------------------------------------------------------------------- */
.zd-lam .zd-lam-strip{
  background: #FFFFFF;
  border-top: 1px solid var(--lam-edge);
  border-bottom: 1px solid var(--lam-edge);
}
.zd-lam .zd-lam-strip__list{
  list-style: none; margin: 0 auto; padding: clamp(1rem, 1.8vw, 1.35rem) 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(.75rem, 1.6vw, 1.5rem);
}
.zd-lam .zd-lam-strip__item{
  display: flex; align-items: center; gap: .8rem;
  min-width: 0;
  font-size: var(--zd-fs-small); line-height: 1.35; color: var(--lam-ink);
}
.zd-lam .zd-lam-strip__ico{
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--lam-chip);
  color: var(--lam-gold);
}
.zd-lam .zd-lam-strip__ico svg{ width: 22px; height: 22px; }

/* --------------------------------------------------------------------------
   3. Katalog — varijanta 2: mali red sa brojem proizvoda, pa mreža 4 kolone.
   -------------------------------------------------------------------------- */
.zd-lam .zd-lam-cat{
  padding-block: clamp(2rem, 3.6vw, 3.25rem) clamp(3rem, 6vw, 5.5rem);
}
.zd-lam .zd-lam-cat__head{
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: .35rem 1.5rem;
  margin-bottom: clamp(1rem, 1.8vw, 1.5rem);
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--lam-edge);
}
.zd-lam .zd-lam-cat__title{
  margin: 0;
  font-family: var(--zd-font-display); font-weight: 600;
  font-size: clamp(1.125rem, 1.4vw, 1.3rem); line-height: 1.3;
  color: var(--lam-ink);
}
.zd-lam .zd-lam-cat__intro{
  margin: .25rem 0 0; max-width: 70ch;
  font-size: var(--zd-fs-small); line-height: 1.55; color: var(--lam-ink-2);
}
.zd-lam .zd-lam-cat__note{
  margin: 0; font-size: var(--zd-fs-micro); color: var(--lam-ink-2);
  letter-spacing: .02em; white-space: nowrap;
}

.zd-lam .zd-lam-grid{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--lam-gap);
}

/* Diskretan naslov grupe unutar iste mreže (EGGER). Zauzima ceo red, pa ne
   menja raspored kartica ni na jednoj širini. */
.zd-lam .zd-lam-grid__group{
  grid-column: 1 / -1;
  margin-top: clamp(.5rem, 1.4vw, 1.25rem);
  padding-top: clamp(1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--lam-edge);
}
.zd-lam .zd-lam-grid__group-title{
  margin: 0;
  font-family: var(--zd-font-display); font-weight: 600;
  font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.3;
  letter-spacing: .01em;
  color: var(--lam-ink);
}

/* --------------------------------------------------------------------------
   4. Kartica proizvoda
   Cela kartica je klikabilna preko rastegnutog ::after na strelici (pravi
   <button>), pa nema ugnežđenih interaktivnih elemenata.
   -------------------------------------------------------------------------- */
.zd-lam .zd-lam-card{
  position: relative;
  display: flex; flex-direction: column;
  padding: 10px 10px 12px;
  background: var(--lam-card);
  border: 1px solid var(--lam-edge);
  border-radius: var(--lam-r);
  box-shadow: var(--lam-sh);
  transition: box-shadow var(--zd-t) var(--zd-ease), border-color var(--zd-t-fast), transform var(--zd-t) var(--zd-ease);
}
.zd-lam .zd-lam-card__media{
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--lam-r-img);
  background: #EFE8DC;
}
.zd-lam .zd-lam-card__media img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .55s var(--zd-ease);
}
.zd-lam .zd-lam-card__body{
  display: flex; flex-direction: column; flex: 1;
  padding: .8rem .35rem 0;
}
.zd-lam .zd-lam-card__name{
  margin: 0;
  font-family: var(--zd-font-display); font-weight: 600;
  font-size: 1rem; line-height: 1.3; letter-spacing: -.005em;
  color: var(--lam-ink);
}
.zd-lam .zd-lam-card__chips{
  list-style: none; margin: .6rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .35rem;
}
.zd-lam .zd-lam-card__chips li{
  padding: .22rem .55rem;
  background: var(--lam-chip);
  border: 1px solid #EAE3D6;
  border-radius: 999px;
  font-size: .75rem; line-height: 1.3; color: var(--lam-ink-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.zd-lam .zd-lam-card__foot{
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin-top: auto; padding-top: .9rem;
}
.zd-lam .zd-lam-card__price{
  margin: 0;
  font-size: .8125rem; line-height: 1.2; color: var(--lam-ink-2);
  font-variant-numeric: tabular-nums;
}
.zd-lam .zd-lam-card__price b{
  font-family: var(--zd-font-display); font-weight: 700;
  font-size: 1.125rem; color: var(--lam-ink); letter-spacing: -.01em;
}
.zd-lam .zd-lam-card__go{
  flex: none;
  display: grid; place-items: center;
  width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--lam-edge-2); border-radius: 50%;
  background: #FFFFFF; color: var(--lam-ink);
  cursor: pointer;
  transition: background-color var(--zd-t-fast), color var(--zd-t-fast), border-color var(--zd-t-fast);
}
.zd-lam .zd-lam-card__go svg{ width: 16px; height: 16px; }
.zd-lam .zd-lam-card__go::after{ content: ""; position: absolute; inset: 0; border-radius: var(--lam-r); }
.zd-lam .zd-lam-card__go:focus-visible{ outline: 2px solid var(--lam-gold); outline-offset: 2px; }
.zd-lam .zd-lam-card:has(.zd-lam-card__go:focus-visible){ border-color: var(--lam-gold); }

@media (hover: hover) and (pointer: fine){
  .zd-lam .zd-lam-card:hover{ border-color: var(--lam-edge-2); box-shadow: var(--lam-sh-hi); transform: translateY(-2px); }
  .zd-lam .zd-lam-card:hover .zd-lam-card__media img{ transform: scale(1.04); }
  .zd-lam .zd-lam-card:hover .zd-lam-card__go{ background: var(--lam-ink); border-color: var(--lam-ink); color: #FFFFFF; }
}
/* Pun opis modela je u DOM-u (crawlabilan), a prikazuje se u dijalogu. */
.zd-lam .zd-lam-card__spec[hidden]{ display: none; }

/* --------------------------------------------------------------------------
   5. Dijalog sa svim podacima o modelu (nativni <dialog>)
   -------------------------------------------------------------------------- */
.zd-lam-dialog{
  width: min(820px, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0; border: 0; border-radius: 16px;
  background: #FFFFFF; color: var(--zd-ink);
  box-shadow: 0 30px 80px rgba(20,15,10,.28);
  overflow: auto;
}
.zd-lam-dialog::backdrop{ background: rgba(20,17,13,.55); }
.zd-lam-dialog__inner{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}
.zd-lam-dialog__media{ margin: 0; background: #EFE8DC; min-height: 100%; display: flex; flex-direction: column; }
.zd-lam-dialog__media img{ width: 100%; height: auto; object-fit: cover; display: block; aspect-ratio: 1; flex: 1 1 auto; }
/* Drugi kadar (ambijent) — samo kod modela koji ga imaju. */
.zd-lam-dialog__media img[data-lam-img2]{ aspect-ratio: 4 / 3; border-top: 2px solid #FFFFFF; }
.zd-lam-dialog__media img[hidden]{ display: none; }
.zd-lam-dialog__body{ position: relative; padding: clamp(1.25rem, 3vw, 2rem); }
.zd-lam-dialog__close{
  position: absolute; top: .75rem; right: .75rem;
  display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  border: 1px solid #E7E0D2; border-radius: 50%;
  background: #FFFFFF; color: var(--zd-ink); cursor: pointer;
}
.zd-lam-dialog__close svg{ width: 16px; height: 16px; }
.zd-lam-dialog__eyebrow{
  margin: 0 3rem .35rem 0;
  font-size: var(--zd-fs-micro); letter-spacing: var(--zd-ls-eyebrow);
  text-transform: uppercase; color: var(--zd-accent-dark);
}
.zd-lam-dialog__title{
  margin: 0 3rem 0 0;
  font-family: var(--zd-font-display); font-weight: 600;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem); line-height: 1.2;
}
.zd-lam-dialog__price{
  margin: .6rem 0 0; font-size: .875rem; color: var(--zd-ink-soft);
}
.zd-lam-dialog__price b{
  font-family: var(--zd-font-display); font-weight: 700; font-size: 1.35rem; color: var(--zd-ink);
}
.zd-lam-dialog__spec{
  margin: 1.1rem 0 0; padding: 0;
  display: grid; grid-template-columns: auto 1fr; gap: 0;
  font-size: .875rem; line-height: 1.4;
}
.zd-lam-dialog__spec dt, .zd-lam-dialog__spec dd{
  margin: 0; padding: .5rem 0; border-top: 1px solid #EFE9DE;
}
.zd-lam-dialog__spec dt{ padding-right: 1rem; color: var(--zd-ink-soft); }
.zd-lam-dialog__spec dd{ color: var(--zd-ink); font-weight: 500; }
.zd-lam-dialog__actions{
  display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem;
}
.zd-lam-dialog__btn{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .55rem 1rem;
  border: 1px solid var(--zd-ink); border-radius: 8px;
  font-size: .875rem; font-weight: 600; text-decoration: none;
  color: var(--zd-ink); background: transparent;
}
.zd-lam-dialog__btn--solid{ background: var(--zd-ink); color: #FFFFFF; }
.zd-lam-dialog__btn:hover{ background: var(--zd-ink); color: #FFFFFF; }
.zd-lam-dialog__fine{ margin: .9rem 0 0; font-size: var(--zd-fs-micro); color: var(--zd-ink-soft); }

/* --------------------------------------------------------------------------
   6. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px){
  .zd-lam .zd-lam-strip__list{ grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: .9rem; }
  /* Manji laptop / tablet landscape: tri kartice u redu (~300 px na 1024). */
  .zd-lam .zd-lam-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Tablet portrait (768): sa tri kolone kartica je ~225 px, oznake se lome u
   dva reda i slika je mala — zato dve kolone ispod 900 px. */
@media (max-width: 899.98px){
  .zd-lam .zd-lam-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px){
  .zd-lam .zd-lam-hero__grid{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 767.98px){
  /* Hero se slaže: tekst, pa fotografija. */
  .zd-lam .zd-lam-hero__grid{ grid-template-columns: 1fr; min-height: 0; }
  .zd-lam .zd-lam-hero__copy{ padding: 1.4rem var(--zd-gutter) 1.5rem; }
  .zd-lam .zd-lam-hero__media{ aspect-ratio: 16 / 10; min-height: 0; }
  .zd-lam .zd-lam-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zd-lam .zd-lam-cat__note{ white-space: normal; }
  .zd-lam-dialog__inner{ grid-template-columns: 1fr; }
  .zd-lam-dialog__media img{ aspect-ratio: 16 / 9; }
}
@media (max-width: 479.98px){
  .zd-lam .zd-lam-strip__item{ gap: .6rem; font-size: .8125rem; }
  .zd-lam .zd-lam-strip__ico{ width: 38px; height: 38px; }
  .zd-lam .zd-lam-strip__ico svg{ width: 19px; height: 19px; }
  .zd-lam .zd-lam-card{ padding: 7px 7px 9px; }
  .zd-lam .zd-lam-card__body{ padding: .6rem .2rem 0; }
  .zd-lam .zd-lam-card__name{ font-size: .875rem; }
  .zd-lam .zd-lam-card__chips{ gap: .25rem; margin-top: .45rem; }
  .zd-lam .zd-lam-card__chips li{ padding: .16rem .42rem; font-size: .6875rem; }
  .zd-lam .zd-lam-card__foot{ padding-top: .65rem; gap: .35rem; }
  .zd-lam .zd-lam-card__price{ font-size: .6875rem; }
  .zd-lam .zd-lam-card__price b{ display: block; font-size: 1rem; }
  .zd-lam .zd-lam-card__go{ width: 32px; height: 32px; }
}
/* Telefoni (≤600): traka prednosti u 2 kolone — prve četiri stavke 2 × 2,
   peta centrirana ispod preko obe kolone. Reči se nikad ne lome usred reči;
   ispod 360 px se ukida i prelom iz HTML-a (u markup-u je razmak ispred <br>). */
@media (max-width: 600px){
  .zd-lam .zd-lam-strip__list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem 1rem; padding: 1rem 0;
  }
  .zd-lam .zd-lam-strip__item{ overflow-wrap: normal; word-break: normal; hyphens: manual; }
  .zd-lam .zd-lam-strip__item:last-child{ grid-column: 1 / -1; justify-self: center; }
}
@media (max-width: 399.98px){
  .zd-lam .zd-lam-strip__list{ column-gap: .6rem; }
  .zd-lam .zd-lam-strip__item{ gap: .5rem; font-size: .78125rem; }
  .zd-lam .zd-lam-strip__ico{ width: 34px; height: 34px; }
  .zd-lam .zd-lam-strip__ico svg{ width: 18px; height: 18px; }
}
/* Veoma uski ekrani: dimenzija ostaje u dijalogu, na kartici samo debljina i klasa. */
@media (max-width: 359.98px){
  .zd-lam .zd-lam-card__chips li:first-child{ display: none; }
  .zd-lam .zd-lam-strip__item br{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .zd-lam .zd-lam-card,
  .zd-lam .zd-lam-card__media img{ transition: none; }
  .zd-lam .zd-lam-card:hover{ transform: none; }
  .zd-lam .zd-lam-card:hover .zd-lam-card__media img{ transform: none; }
}