/* BRIDGE — homepage-specific layout */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--color-ink-950);
}

.hero__media {
  position: absolute;
  inset: -6% -6%;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  /* Two jobs in one gradient: a fast, near-opaque fade at the very top so the
     transparent header keeps full text contrast (and, as a side effect,
     dims the video's own top-right watermark into the dark), then the
     existing slow build toward the bottom that holds the hero title
     legible. The top darkening is intentionally brief — it must not read as
     a flattened, lifeless video. */
  background: linear-gradient(
    180deg,
    rgba(5, 7, 8, 0.75) 0%,
    rgba(5, 7, 8, 0.42) 8%,
    rgba(11, 21, 18, 0.14) 20%,
    rgba(11, 21, 18, 0.55) 68%,
    rgba(11, 21, 18, 0.86) 100%
  );
}

/* ---- Watermark cover ----
   The source video (home-hero-loop.mp4) carries a small burned-in Bridge
   watermark in its top-right corner. This layer quietly dissolves it into
   the hero scrim — a soft blur + darken with no border, label or shape of
   its own — rather than dressing it up as a visible badge that competes
   with the header. It is positioned independently of the header row (own
   top offset, not flex layout) so it stays aligned with the watermark's
   fixed pixel position in the source video regardless of header height
   changes. Hidden below 960px (see the media query below): the mobile hero
   source (home-hero-loop-mobile.mp4, swapped in below 641px) is a
   separately cropped square clip that never contains the watermark, and
   below 960px the header nav is a hamburger sharing that same corner. */
.hero__watermark-cover {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: none;
  width: clamp(54px, 4vw, 72px);
  height: clamp(40px, 4.2vh, 52px);
  /* Blur/darken strength kept at its previously-measured level — this box's
     size and position were tuned against real extracted video frames (see
     comment above), and the real MaxDiVision mark on top (see
     .dev-credit--hero) is a different shape than the source watermark, so it
     doesn't reliably cover the same footprint on its own. Slightly lighter
     than before since the opaque mark now shares the coverage job. */
  background: radial-gradient(ellipse at top right, rgba(6, 8, 9, 0.5) 0%, rgba(6, 8, 9, 0.27) 55%, transparent 100%);
  -webkit-backdrop-filter: blur(4px) saturate(115%);
  backdrop-filter: blur(4px) saturate(115%);
  pointer-events: none;
}

/* Gated two ways, both confirmed by extracting real frames from
   home-hero-loop.mp4 and measuring where its corner watermark actually
   lands after the browser's own object-fit:cover crop:
   1) min-width: 960px — below that the header nav is a hamburger sharing
      the same corner as the CTA; adding the cover there overlaps the
      hamburger itself (a real usability problem, not just cosmetic).
   2) min-aspect-ratio: 16/9 — the video is 960×540 (16:9). At that ratio or
      wider (1920×1080, 1600×900, 1366×768, ultrawide…) cover-fit crops the
      video only vertically, so its right edge — and the watermark sitting
      on it — survives into frame. Narrower/taller ratios (1440×900,
      1280×800, tablets) crop horizontally instead and pull the visible edge
      in well past where the watermark sits, so it never reaches the frame
      at all; showing the cover there would just collide with the
      "Rezerviši sto" CTA for no reason.
   Where the cover and the CTA do still land close together (e.g. exactly
   1366×768), the CTA — part of the fixed header, z-index: var(--z-header),
   far above the cover's z-index: 2 — simply paints over whatever portion of
   it falls behind it. That's harmless: the CTA is fully opaque, so it's
   already covering the watermark for that overlapping area itself. */
@media (min-width: 960px) and (min-aspect-ratio: 16 / 9) {
  .hero__watermark-cover {
    display: block;
  }
}

.hero__content {
  position: relative;
  z-index: 1;
  padding-bottom: var(--space-2xl);
  color: var(--color-text-inverse);
}

.hero__title {
  font-size: var(--fs-hero);
  color: var(--color-text-inverse);
  margin-top: var(--space-sm);
  max-width: 16ch;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* .hero__scroll-cue moved to components.css (shared across hero-type sections) */

@media (max-width: 720px) {
  .hero__content { padding-bottom: var(--space-xl); }
  .hero__title { max-width: 13ch; }
}

/* ---- Story ---- */
.story__grid {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}

.story__image {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
}

@media (max-width: 959px) {
  .story__grid {
    gap: var(--space-md);
  }
}

@media (min-width: 960px) {
  .story__grid {
    grid-template-columns: 1fr 0.9fr;
  }
}

/* ---- Preview (restaurant / BRIDGOVANJE) ---- */
.preview__grid {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}

.preview__image {
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.preview--bridgovanje .preview__image--bridgovanje {
  aspect-ratio: 4 / 3;
}

@media (max-width: 959px) {
  .preview__grid {
    gap: var(--space-md);
  }
}

@media (min-width: 960px) {
  .preview__grid {
    grid-template-columns: 1.1fr 1fr;
  }
  .preview__grid--reverse {
    grid-template-columns: 1fr 1.1fr;
  }
  .preview__grid--reverse .preview__text { order: 1; }
  .preview__grid--reverse .preview__image { order: 2; }
}

.preview--bridgovanje {
  background: var(--color-ink-950);
  color: var(--color-text-inverse);
}

.preview--bridgovanje .lead {
  color: var(--color-text-inverse-muted);
}

.preview--bridgovanje .eyebrow {
  color: var(--color-accent);
}

/* ---- Atmosphere scroller ---- */
.atmosphere__scroller {
  margin-top: var(--space-lg);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  padding-bottom: var(--space-xs);
}

.atmosphere__track {
  display: flex;
  gap: var(--space-sm);
  width: max-content;
}

.atmosphere__item {
  width: min(78vw, 380px);
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  scroll-snap-align: start;
  flex: none;
  overflow: hidden;
}

.atmosphere__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 960px) {
  .atmosphere__item { width: 320px; }
}

/* ---- Location ---- */
.location__grid {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}

.location__map-slot {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
}

@media (max-width: 959px) {
  .location__grid {
    gap: var(--space-md);
  }
}

@media (min-width: 960px) {
  .location__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- Final CTA ---- */
.final-cta {
  background: var(--color-ink-950);
  color: var(--color-text-inverse);
}

.final-cta__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.final-cta__title {
  font-size: var(--fs-h1);
  max-width: 18ch;
}