/* ============================================================================
   AMADO — komponente
   ==========================================================================*/

/* --- Dugmad --------------------------------------------------------------- */

.btn {
  --btn-fg: var(--bone);
  --btn-bg: var(--forest);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  min-block-size: 3.25rem;
  padding: .9rem clamp(1.5rem, 3vw, 2.4rem);
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--step--1); letter-spacing: var(--track-button);
  text-transform: uppercase; white-space: nowrap;
  color: var(--btn-fg);
  border: 1px solid var(--btn-fg);
  border-radius: var(--radius-pill);
  overflow: hidden; isolation: isolate;
  transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-fg);
  transform: translateY(101%);
  transition: transform var(--dur-2) var(--ease);
}
.btn:hover, .btn:focus-visible { color: var(--btn-bg); }
.btn:hover::before, .btn:focus-visible::before { transform: none; }

/* Puno dugme: na hover se ne prazni (tekst bi ostao na goloj fotografiji),
   nego se prevrće u tamnu podlogu sa svijetlim slovima. Uvijek čitljivo. */
.btn--solid { color: var(--btn-bg); }
.btn--solid::before { transform: none; }
.btn--solid::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-bg);
  transform: translateY(101%);
  transition: transform var(--dur-2) var(--ease);
}
.btn--solid:hover, .btn--solid:focus-visible { color: var(--btn-fg); }
.btn--solid:hover::after, .btn--solid:focus-visible::after { transform: none; }

.btn--forest { --btn-fg: var(--forest); --btn-bg: var(--bone); }
.btn--sm { min-block-size: 2.75rem; padding: .65rem 1.5rem; font-size: var(--step--2); }
.btn .ico { inline-size: 1.05em; block-size: 1.05em; flex: none; }

/* Tekstualni link sa linijom koja se povlači pri hoveru. */
.link-line {
  position: relative;
  display: inline-flex; align-items: center; gap: .75rem;
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--step--1); letter-spacing: var(--track-button);
  text-transform: uppercase; padding-block: .4rem;
}
.link-line::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 0;
  block-size: 1px; background: currentColor;
  transform: scaleX(var(--x, 1)); transform-origin: right;
  transition: transform var(--dur-2) var(--ease);
}
.link-line:hover::after, .link-line:focus-visible::after { --x: 0; }
.link-line .ico { inline-size: 1.05em; block-size: 1.05em; flex: none; }
.link-line .arrow { transition: transform var(--dur-2) var(--ease); }
.link-line:hover .arrow, .link-line:focus-visible .arrow { transform: translateX(.4rem); }

/* --- Zaglavlje ------------------------------------------------------------ */

.site-header {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
  block-size: var(--header-h);
  display: flex; align-items: center;
  color: var(--bone);
  border-block-end: 1px solid transparent;
  transition: transform var(--dur-3) var(--ease), background-color var(--dur-3) var(--ease),
              border-color var(--dur-3) var(--ease), backdrop-filter var(--dur-3) var(--ease);
}
.site-header[data-scrolled="true"] {
  background: rgb(3 34 23 / .88);
  backdrop-filter: blur(14px) saturate(1.2);
  border-block-end-color: var(--hair-dark);
}
.site-header[data-hidden="true"] { transform: translateY(-102%); }

.site-header__inner {
  inline-size: 100%; max-inline-size: var(--shell); margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
}

.brand { display: flex; align-items: center; gap: .9rem; color: var(--bone); }
.brand__wordmark { inline-size: clamp(6.5rem, 9vw, 8.75rem); block-size: auto; }

.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.6vw, 2.5rem); }
.nav__link {
  position: relative;
  font-size: var(--step--2); font-weight: 500;
  letter-spacing: var(--track-label); text-transform: uppercase;
  padding-block: .5rem;
  color: var(--on-dark-soft);
  transition: color var(--dur-1) var(--ease);
}
.nav__link:hover, .nav__link:focus-visible, .nav__link[aria-current] { color: var(--bone); }
.nav__link::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: .1rem;
  block-size: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-2) var(--ease);
}
.nav__link:hover::after, .nav__link:focus-visible::after { transform: none; }

.lang { display: flex; align-items: center; gap: .55rem; font-size: var(--step--2); letter-spacing: .12em; }
.lang__sep { opacity: .3; }
.lang__item {
  display: inline-flex; align-items: center; justify-content: center;
  min-inline-size: 1.75rem; min-block-size: 1.75rem;   /* cilj ≥ 24 px */
  color: var(--on-dark-faint); transition: color var(--dur-1) var(--ease);
}
.lang__item:hover, .lang__item:focus-visible { color: var(--bone); }
/* Tekući jezik je podvučen, ne samo svjetliji — preko videa su svi jezici iste boje. */
.lang__item[aria-current="true"] {
  color: var(--bone);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .45em;
}

/* Dok zaglavlje stoji providno na vrhu strane, ispod njega je video — mjestimično
   bijel (stakleni lusteri). Tekst tada ide punom bojom i sa tamnim oreolom. */
.site-header[data-scrolled="false"] .nav__link,
.site-header[data-scrolled="false"] .lang { text-shadow: 0 0 .8rem rgb(3 34 23 / .8), 0 0 .25rem rgb(3 34 23 / .6); }
.site-header[data-scrolled="false"] .nav__link,
.site-header[data-scrolled="false"] .lang__item { color: var(--bone); }

/* Traka napretka skrolovanja — jedva vidljiva, ali daje osjećaj dubine strane. */
.scroll-rail {
  position: absolute; inset-block-end: -1px; inset-inline-start: 0;
  block-size: 1px; inline-size: 100%;
  background: var(--bone); opacity: .5;
  transform: scaleX(var(--progress, 0)); transform-origin: left;
}

/* Hamburger */
.burger { display: none; inline-size: 2.75rem; block-size: 2.75rem; place-items: center; }
.burger__box { position: relative; inline-size: 1.375rem; block-size: .625rem; }
.burger__box i {
  position: absolute; inset-inline: 0; block-size: 1px; background: currentColor;
  transition: transform var(--dur-2) var(--ease);
}
.burger__box i:nth-child(1) { inset-block-start: 0; }
.burger__box i:nth-child(2) { inset-block-end: 0; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(.3125rem) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { transform: translateY(-.3125rem) rotate(-45deg); }

.mobile-nav {
  position: fixed; inset: 0; z-index: 99;
  display: grid; align-content: center; gap: var(--sp-4);
  padding: var(--header-h) var(--gutter) var(--sp-8);
  background: var(--forest-deep);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-3) var(--ease), visibility var(--dur-3);
}
.mobile-nav[data-open="true"] { opacity: 1; visibility: visible; }
.mobile-nav a {
  font-family: var(--font-display); font-size: var(--step-2);
  letter-spacing: var(--track-title); text-transform: uppercase;
  padding-block: .75rem; border-block-end: 1px solid var(--hair-dark);
  opacity: 0; transform: translateY(.75rem);
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}
.mobile-nav[data-open="true"] a { opacity: 1; transform: none; }
.mobile-nav[data-open="true"] a:nth-child(1) { transition-delay: 90ms; }
.mobile-nav[data-open="true"] a:nth-child(2) { transition-delay: 150ms; }
.mobile-nav[data-open="true"] a:nth-child(3) { transition-delay: 210ms; }

@media (max-width: 56rem) {
  .nav { display: none; }
  .burger { display: grid; }
}

/* --- Vrata: vinska karta i meni ------------------------------------------- */

.door {
  position: relative; display: block;
  aspect-ratio: 3 / 4; overflow: hidden;
  color: var(--bone); isolation: isolate;
}
.door img {
  inline-size: 100%; block-size: 100%; object-fit: cover;
  transition: transform 1.3s var(--ease), clip-path 1s var(--ease);
}
.door::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top,
    rgb(3 34 23 / .92) 0%, rgb(3 34 23 / .55) 38%,
    rgb(3 34 23 / .10) 72%, rgb(3 34 23 / .30) 100%);
  transition: opacity var(--dur-3) var(--ease);
}
.door::before {
  content: ""; position: absolute; inset: 0; z-index: 3;
  border: 1px solid var(--bone); opacity: 0;
  transition: opacity var(--dur-3) var(--ease);
  pointer-events: none;
}
.door:hover img, .door:focus-visible img { transform: scale(1.055); }
.door:hover::after, .door:focus-visible::after { opacity: .82; }
.door:hover::before, .door:focus-visible::before { opacity: .5; }

.door__body {
  position: absolute; z-index: 2; inset-inline: 0; inset-block-end: 0;
  padding: clamp(1.25rem, 2.6vw, 2.25rem);
  display: grid; gap: .55rem;
  transition: opacity var(--dur-3) var(--ease) 260ms, transform var(--dur-3) var(--ease) 260ms;
}
.door__title {
  font-family: var(--font-display); font-size: var(--step-2);
  letter-spacing: var(--track-title); text-transform: uppercase; line-height: 1.1;
  transition: letter-spacing var(--dur-3) var(--ease);
}
.door:hover .door__title, .door:focus-visible .door__title {
  letter-spacing: calc(var(--track-title) + .045em);
}
.door__meta { display: flex; align-items: center; gap: .75rem; color: var(--on-dark-soft); }
.door__rule {
  display: block; block-size: 1px; inline-size: 1.75rem;
  background: currentColor; opacity: .7;
  transition: inline-size var(--dur-3) var(--ease);
}
.door:hover .door__rule, .door:focus-visible .door__rule { inline-size: 3.25rem; }

/* --- Recenzija ------------------------------------------------------------ */

.review { position: relative; padding-block: clamp(1.75rem, 3.2vw, 2.75rem); }
.review + .review { border-block-start: 1px solid var(--hair-light); }
.review__quote {
  position: absolute; inset-block-start: .1rem; inset-inline-start: -.06em;
  font-family: var(--font-body); font-weight: 500;
  font-size: 4.25rem; line-height: 1;
  color: var(--forest); opacity: .11;
  pointer-events: none; user-select: none;
}
.review__text { position: relative; max-inline-size: 58ch; }
.review__foot { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem; margin-block-start: 1.15rem; }
.review__author {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--step--1); letter-spacing: var(--track-button); text-transform: uppercase;
}
.review__src {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--on-light-faint); font-size: var(--step--2);
}
.review__src svg { inline-size: .95rem; block-size: .95rem; flex: none; }

/* --- Footer --------------------------------------------------------------- */

/* Oznaka grupe, sa hairline linijom koja se produžava do kraja kolone. */
.footer__label {
  display: flex; align-items: center; gap: .85rem;
  color: var(--on-dark-faint);
  margin-block-end: clamp(1.15rem, 2vw, 1.6rem);
}
.footer__label::after {
  content: ""; flex: 1 1 auto; block-size: 1px; background: var(--hair-dark);
}

.f-list { display: grid; gap: clamp(.65rem, 1.2vw, .95rem); }

/* Ikonica i tekst dijele istu liniju — vrijednost nije uvučena ispod oznake. */
.f-row {
  display: inline-flex; align-items: flex-start; gap: .8rem;
  min-block-size: 1.75rem;
  color: var(--on-dark-soft);
  transition: color var(--dur-2) var(--ease);
}
.f-row .ico {
  inline-size: 1.05rem; block-size: 1.05rem; flex: none;
  margin-block-start: .3rem; opacity: .6;
  transition: opacity var(--dur-2) var(--ease);
}
.f-row__text { position: relative; }
.f-row__text::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: -.18em;
  block-size: 1px; background: currentColor; opacity: .5;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-2) var(--ease);
}
.f-row .arrow {
  inline-size: .85rem; block-size: .85rem; flex: none;
  margin-block-start: .35rem; opacity: 0;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}

a.f-row:hover, a.f-row:focus-visible { color: var(--white); }
a.f-row:hover .ico, a.f-row:focus-visible .ico { opacity: .9; }
a.f-row:hover .f-row__text::after, a.f-row:focus-visible .f-row__text::after { transform: none; }
a.f-row:hover .arrow, a.f-row:focus-visible .arrow { opacity: .8; transform: translateX(.25rem); }

.social { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.social a {
  display: grid; place-items: center;
  inline-size: 2.875rem; block-size: 2.875rem;
  border: 1px solid var(--hair-dark); border-radius: var(--radius-pill);
  color: var(--on-dark-soft);
  transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
              background-color var(--dur-2) var(--ease);
}
.social a:hover, .social a:focus-visible {
  color: var(--forest); background: var(--bone); border-color: var(--bone);
}
.social svg { inline-size: 1.1rem; block-size: 1.1rem; }