/* pozornice.hr — Početna section layouts
   Requires poz-tokens.css + poz-components.css. Behaviour in poz-nav.js.
   These are LAYOUTS, not content: the staging copy drops straight in. */

.poz-wrap { max-width: 2040px; margin: 0 auto; padding: 0 clamp(20px, 3.4vw, 56px); }
.poz-section { padding: clamp(56px, 5vw, 88px) 0; }
.poz-section--tight { padding: clamp(40px, 3.4vw, 60px) 0; }

/* ============================ 01 · HERO ============================
   Full-viewport slider. One slide per category; nine ticks on a rail.
   Photo is graded and scrimmed so white Michroma sits on it cleanly. */

.poz-hero {
  position: relative; height: 100vh; min-height: 780px; overflow: hidden;
  background: var(--poz-page);
}
.poz-hero__slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1.1s cubic-bezier(0.2,0.8,0.2,1);
}
.poz-hero__slide.is-current { opacity: 1; }
.poz-hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 44%;
  filter: contrast(1.04) saturate(0.94) brightness(1.02);
  transform: scale(1.0);
}
/* Ken-burns while the slide is showing. */
.poz-hero__slide.is-current .poz-hero__img {
  transform: scale(1.075); transition: transform 11s linear;
}
.poz-hero__veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.72) 34%, rgba(255,255,255,0) 62%),
    linear-gradient(0deg,  rgba(255,255,255,0.86) 0%, rgba(255,255,255,0) 46%);
}
/* One copy block per slide, stacked and crossfaded by poz-nav.js in step
   with the imagery. Only the current one is visible and focusable. */
.poz-hero__copy {
  position: absolute; left: clamp(20px, 3.4vw, 56px); bottom: clamp(120px, 14vh, 190px);
  max-width: min(680px, 48vw);
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity 0.7s cubic-bezier(0.2,0.8,0.2,1), transform 0.8s cubic-bezier(0.2,0.8,0.2,1);
}
.poz-hero__copy.is-current { opacity: 1; transform: none; pointer-events: auto; }
.poz-hero__kicker { display: flex; align-items: center; gap: 14px; }
.poz-hero__kicker span:first-child { display: block; width: 34px; height: 2px; background: var(--acc); }
.poz-hero__kicker span:last-child {
  font: var(--poz-eyebrow); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--acc-ink); white-space: nowrap;
}
.poz-hero__title {
  margin: clamp(18px, 2vw, 30px) 0 0; max-width: 18ch;
  font: 400 clamp(28px, 4.2vw, 68px)/1.1 var(--poz-font-display);
  letter-spacing: 0.005em; color: var(--poz-text); text-wrap: pretty;
}
.poz-hero__lead {
  margin: clamp(16px, 1.6vw, 24px) 0 0; max-width: 44ch;
  font: 400 clamp(14px, 1.05vw, 17px)/1.75 var(--poz-font-body); color: var(--poz-text-2);
}
.poz-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(22px, 2.2vw, 34px); }

/* Rotated index on the left edge, and the scroll cue on the right. Both are
   chrome for the slider — hidden below 1080px where the copy takes the width. */
.poz-hero__meta {
  position: absolute; left: clamp(20px, 3.4vw, 56px); top: 44%;
  display: flex; align-items: center; gap: 12px;
  transform: rotate(-90deg); transform-origin: left center; white-space: nowrap;
}
.poz-hero__meta-index { font: var(--poz-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--poz-text); }
.poz-hero__meta-rule { display: block; width: 40px; height: 1px; background: var(--poz-line); }
.poz-hero__meta-total { font: var(--poz-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--poz-text-2); }

.poz-hero__scroll {
  position: absolute; right: clamp(20px, 3.4vw, 56px); bottom: clamp(150px, 16vh, 190px);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.poz-hero__scroll-label { font: var(--poz-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--poz-text-2); writing-mode: vertical-rl; }
.poz-hero__scroll-track { position: relative; display: block; width: 1px; height: 62px; overflow: hidden; background: var(--poz-line); }
.poz-hero__scroll-track::after {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 24px;
  background: var(--acc); animation: pozScrollCue 2.4s cubic-bezier(0.2,0.8,0.2,1) infinite;
}
@keyframes pozScrollCue { 0% { transform: translateY(-24px); } 100% { transform: translateY(62px); } }
@media (prefers-reduced-motion: reduce) { .poz-hero__scroll-track::after { animation: none; } }

@media (max-width: 1080px) {
  .poz-hero__meta, .poz-hero__scroll { display: none; }
  .poz-hero__copy { max-width: none; right: clamp(20px, 3.4vw, 56px); }
}

.poz-hero__rail {
  position: absolute; left: clamp(20px, 3.4vw, 56px); right: clamp(20px, 3.4vw, 56px);
  bottom: 40px; display: flex; gap: 0;
}
.poz-hero__tick {
  flex: 1 1 0; min-width: 0; padding: 14px 0 0;
  border: 0; border-top: 1px solid var(--poz-line); background: none; cursor: pointer;
  text-align: left; font: var(--poz-label); letter-spacing: 0.16em; text-transform: uppercase;
  /* Interactive controls: the rest state stays legible (5.7:1). The current
     tick is signalled by the accent rule and by growing, not by dimming
     the other eight below the contrast floor. */
  color: var(--poz-text-2);
  transition: color 0.4s, border-top-color 0.5s, flex-grow 0.6s cubic-bezier(0.2,0.8,0.2,1);
}
.poz-hero__tick:hover { color: var(--poz-text); }
.poz-hero__tick.is-current { flex-grow: 2.4; border-top-width: 2px; border-top-color: var(--acc); color: var(--poz-text); }
.poz-hero__tick-name { display: none; }
.poz-hero__tick.is-current .poz-hero__tick-name { display: inline; margin-left: 10px; }
@media (max-width: 900px) {
  .poz-hero { min-height: 620px; }
  .poz-hero__rail { display: none; }
}

/* ============================ 02 · STATS ============================
   auto-fit so it drops to 2×2 rather than squeezing Michroma numerals. */

.poz-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border-top: 1px solid var(--poz-line);
}
.poz-stats__cell {
  padding: 26px 22px 26px 0; border-right: 1px solid var(--poz-line-soft);
}
.poz-stats__cell:last-child { border-right: 0; }
.poz-stats__value { display: block; font: 400 clamp(20px, 2.2vw, 34px)/1 var(--poz-font-display); color: var(--poz-text); }
.poz-stats__label { display: block; margin-top: 12px; font: var(--poz-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--poz-text-2); }

/* ============================ 03 · PLANNER BAND ============================
   The dark band. Blueprint grid, counters that run when scrolled into view,
   four numbered rows — one per configurator, each carrying its category hue. */

.poz-planner { position: relative; overflow: hidden; }
.poz-planner__grid {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 80px 80px;
}
.poz-planner__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 110% at 84% 6%, rgba(0,102,204,0.30) 0%, rgba(0,102,204,0) 60%);
}
.poz-planner__rows { position: relative; margin-top: clamp(32px, 3.4vw, 56px); border-top: 1px solid var(--poz-line-dark); }
.poz-planner__row {
  position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: clamp(16px, 2vw, 32px); align-items: center;
  padding: clamp(20px, 2.1vw, 32px) clamp(8px, 1vw, 18px);
  border-bottom: 1px solid var(--poz-line-dark); text-decoration: none;
  transition: background 0.4s cubic-bezier(0.2,0.8,0.2,1), padding-left 0.4s cubic-bezier(0.2,0.8,0.2,1);
}
.poz-planner__row:hover,
.poz-planner__row:focus-visible { background: rgba(255,255,255,0.05); padding-left: 30px; }
.poz-planner__num { font: var(--poz-eyebrow); letter-spacing: 0.16em; color: var(--poz-accent-tint); }
.poz-planner__name { font: 400 clamp(14px, 1.65vw, 27px)/1.24 var(--poz-font-display); letter-spacing: 0.01em; color: #FFFFFF; }
.poz-planner__arrow { font: 400 clamp(14px, 1.4vw, 22px)/1 var(--poz-font-mono); color: var(--poz-text-muted-dark); transition: transform 0.42s cubic-bezier(0.2,0.8,0.2,1), color 0.35s; }
.poz-planner__row:hover .poz-planner__arrow,
.poz-planner__row:focus-visible .poz-planner__arrow { transform: translateX(10px); color: var(--acc-ink); }
.poz-planner__row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--acc); transform: scaleY(0); transition: transform 0.45s cubic-bezier(0.2,0.8,0.2,1);
}
.poz-planner__row:hover::before,
.poz-planner__row:focus-visible::before { transform: scaleY(1); }

.poz-counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--poz-line-dark); border: 1px solid var(--poz-line-dark); }
.poz-counters__cell { padding: clamp(18px, 2vw, 28px) clamp(14px, 1.6vw, 24px); background: var(--poz-ink); }
.poz-counters__value { display: block; font: 400 clamp(18px, 2vw, 30px)/1 var(--poz-font-display); color: #FFFFFF; }
.poz-counters__label { display: block; margin-top: 11px; font: var(--poz-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--poz-text-3); }

/* ============================ 04 · BRANDS ============================
   One unbroken row. Cards flex 1 1 0 with min-width 0 so five logos
   always share the width instead of wrapping. */

.poz-brands { display: flex; flex-wrap: nowrap; gap: 0; border: 1px solid var(--poz-line-dark); }
.poz-brands__card {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
  padding: clamp(20px, 2vw, 32px); border-right: 1px solid var(--poz-line-dark);
  text-decoration: none; transition: background 0.4s cubic-bezier(0.2,0.8,0.2,1);
}
.poz-brands__card:last-child { border-right: 0; }
.poz-brands__card:hover { background: rgba(255,255,255,0.04); }
.poz-brands__logo { height: 26px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; opacity: 0.8; transition: opacity 0.35s; }
.poz-brands__card:hover .poz-brands__logo { opacity: 1; }
.poz-brands__role { margin-top: 18px; font: var(--poz-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--poz-text-3); }
/* Origin sits below a hairline. Hierarchy comes from position, not from a
   dimmer grey — anything below --poz-text-3 fails the floor at this size. */
.poz-brands__origin {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--poz-line-dark);
  font: var(--poz-label); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--poz-text-3);
}
@media (max-width: 900px) { .poz-brands { flex-wrap: wrap; } .poz-brands__card { flex: 1 1 46%; } }

/* ============================ 05 · CLIENTS ============================
   Two rails scrolling opposite ways, masked at both edges.
   Each track holds the set TWICE so the loop is seamless. */

.poz-clients__row { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.poz-clients__row + .poz-clients__row { margin-top: 18px; }
.poz-clients__track { display: flex; align-items: center; gap: 56px; width: max-content; animation-timing-function: linear; animation-iteration-count: infinite; }
.poz-clients__track--a { animation-name: pozClientsA; animation-duration: 58s; }
.poz-clients__track--b { animation-name: pozClientsB; animation-duration: 66s; }
.poz-clients__row:hover .poz-clients__track { animation-play-state: paused; }
@keyframes pozClientsA { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes pozClientsB { from { transform: translate3d(-50%,0,0); } to { transform: translate3d(0,0,0); } }
.poz-clients__logo { height: 30px; width: auto; flex: 0 0 auto; opacity: 0.55; transition: opacity 0.3s; }
.poz-clients__logo:hover { opacity: 1; }

/* ============================ 06 · CONTACT ============================
   Built around the email address, not a button: three full-width rows
   that wash accent and slide on hover. */

.poz-contact { position: relative; overflow: hidden; }
.poz-contact__rows { border-top: 1px solid var(--poz-line-dark); margin-top: clamp(44px, 4.6vw, 86px); }
.poz-contact__row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: clamp(16px, 2vw, 32px); align-items: center;
  padding: clamp(20px, 2.1vw, 32px) clamp(8px, 1vw, 18px);
  border-bottom: 1px solid var(--poz-line-dark); text-decoration: none;
  transition: background 0.4s cubic-bezier(0.2,0.8,0.2,1), padding-left 0.4s cubic-bezier(0.2,0.8,0.2,1);
}
.poz-contact__row:hover,
.poz-contact__row:focus-visible { background: rgba(0,102,204,0.09); padding-left: 30px; }
.poz-contact__value { font: 400 clamp(14px, 1.65vw, 27px)/1.24 var(--poz-font-display); color: #FFFFFF; }
.poz-contact__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--poz-line-dark); border: 1px solid var(--poz-line-dark); margin-top: clamp(36px, 3.6vw, 64px); }
.poz-contact__fact { padding: clamp(20px, 2vw, 30px) clamp(16px, 1.6vw, 26px); background: var(--poz-ink); }
.poz-contact__fact-value { display: block; font: 400 clamp(15px, 1.5vw, 23px)/1.2 var(--poz-font-display); color: #FFFFFF; }
.poz-contact__fact-label { display: block; margin-top: 11px; font: var(--poz-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--poz-text-3); }

/* ============================ MOBILE COLLAPSE ============================
   Every page-level grid carries .poz-mcol; it becomes one column at 900px. */
@media (max-width: 900px) {
  .poz-mcol { grid-template-columns: 1fr !important; }
  .poz-section { padding: 48px 0; }
}