/* ─────────────────────────────────────────
   RRP Canvas — hero + illustrated pages
   Logo, pick CTA, illustratie, page-header
   Geïmporteerd via rrp.css (na tokens)
   ───────────────────────────────────────── */

/* ─── Hero logo (canvas) ─── */
.hero-logo {
  position: absolute;
  top: -1.375rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 101;
  text-align: center;
}

.hero-logo a { display: block; text-decoration: none; cursor: pointer; }

.hero-logo:not(.hero-logo--lottie) svg {
  width: var(--logo-size);
  height: auto;
  aspect-ratio: 1;
  display: block;
  filter: var(--drop-shadow-hero);
}

.hero-logo--lottie .hero-logo__link {
  display: block;
  text-decoration: none;
  cursor: pointer;
}

.hero-logo--lottie .hero-logo__anchor {
  position: relative;
  width: var(--logo-lottie-clip-size);
  height: var(--logo-lottie-anchor-height);
  overflow: visible;
}

.hero-logo--lottie .hero-logo__crop {
  position: absolute;
  left: calc(50% - var(--logo-lottie-frame-size) / 2 + var(--logo-lottie-crop-sides));
  top: var(--logo-lottie-crop-offset-y);
  width: var(--logo-lottie-crop-width);
  height: var(--logo-lottie-crop-height);
  overflow: hidden;
}

.hero-logo--lottie .hero-logo__lottie {
  position: absolute;
  left: calc(-1 * var(--logo-lottie-crop-sides));
  top: calc(-1 * var(--logo-lottie-crop-top));
  width: var(--logo-lottie-frame-size);
  height: var(--logo-lottie-frame-size);
  display: block;
}

.hero-logo--lottie .hero-logo__lottie canvas,
.hero-logo--lottie .hero-logo__lottie svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* Lottie crop extends outside SVG box — don't clip in hero */
.hero:has(.hero-logo--lottie) {
  overflow-x: visible;
}

.hero-logo.hero-logo--lottie {
  overflow: visible;
  height: auto;
  width: auto;
  top: calc(-1 * var(--logo-lottie-crop-offset-y));
}

/* Geen clipping — hero, subpagina's, artboard, contact-result */
.hero:has(.hero-logo--lottie),
.page-header:has(.hero-logo--lottie),
.page-illustrated:has(.hero-logo--lottie),
.page-artboard:has(.hero-logo--lottie),
.page-contact-result:has(.hero-logo--lottie) {
  overflow: visible;
}

.page-illustrated:has(.hero-logo--lottie) {
  overflow-x: visible;
}

.hero:has(.hero-logo--lottie) .hero-content {
  top: calc(var(--logo-lottie-crop-height) + var(--space-sm));
}

/* Subpagina's — page-header padding i.p.v. SVG logo-size */
.page-header:has(.hero-logo--lottie) {
  padding-top: calc(var(--logo-lottie-crop-height) + var(--space-lg));
}

.pick-cta {
  position: absolute;
  right: var(--pick-cta-inset-x);
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  cursor: pointer;
  text-decoration: none;
  display: block;
  color: inherit;
  perspective: 700px;
  perspective-origin: center center;
}

.pick-cta svg,
.pick-cta img {
  width: var(--pick-cta-size);
  height: auto;
  display: block;
  filter: var(--drop-shadow-display);
  transform-origin: center center;
  transform-style: preserve-3d;
}

.pick-cta:hover svg,
.pick-cta:hover img,
.pick-cta:focus-visible svg,
.pick-cta:focus-visible img {
  animation: pick-kick 0.24s cubic-bezier(0.34, 1.45, 0.64, 1) forwards;
}

@keyframes pick-kick {
  0% {
    transform: translateZ(0) scale(1);
  }
  18% {
    transform: translateZ(56px) scale(1.14, 1.18);
  }
  42% {
    transform: translateZ(14px) scale(1.05, 1.07);
  }
  100% {
    transform: translateZ(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pick-cta:hover svg,
  .pick-cta:hover img,
  .pick-cta:focus-visible svg,
  .pick-cta:focus-visible img {
    animation: none;
  }
}

/* ─── Illustration layer ─── */
.rrp-illustration {
  position: absolute;
  top: var(--rrp-illustration-inset-top);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
}

.rrp-illustration-img {
  width: 100%;
  height: 100%;
  object-fit: var(--canvas-illustration-fit);
  object-position: center bottom;
  transform: scale(var(--canvas-illustration-scale));
  transform-origin: center bottom;
  display: block;
  pointer-events: none;
}

/* Hotel / bandfoto — altijd cover, geen scale */
.rrp-illustration-img--photo {
  object-fit: cover;
  object-position: var(--canvas-illustration-photo-position);
  transform: none;
}

/* ─── Illustrated page shell ─── */
.page-illustrated {
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
}

.page-illustrated-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--bg);
  pointer-events: none;
}

/* Phase B: illustratieband krimpt niet — scroll bij korte viewport */
.page-illustrated > .rrp-illustration {
  bottom: auto;
  height: max(
    var(--canvas-illustration-height-min),
    calc(100svh - var(--rrp-illustration-inset-top))
  );
}

.page-illustrated > .page-header,
.page-illustrated > main {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--layout-artboard-ceiling);
  margin-inline: auto;
}

.page-illustrated--hero > .page-artboard {
  position: relative;
  z-index: 2;
  min-height: max(100svh, var(--canvas-scroll-min-height));
}

.page-illustrated--hero {
  min-height: max(100svh, var(--canvas-scroll-min-height));
}

/* Desktop: hotel-foto full-bleed (PDF optie B) */
@media (min-width: 1201px) {
  .page-illustrated--hotel > .rrp-illustration {
    top: 0;
    height: max(var(--canvas-illustration-height-min), 100svh);
  }
}

/* ─── Page header (sub-pages) ─── */
.page-header {
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: calc(var(--logo-size) - 1.375rem + var(--space-lg)) var(--section-padding-x) var(--section-padding-y);
  position: relative;
  overflow: visible;
}

.page-header-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--bg);
  pointer-events: none;
}

.page-header-content { position: relative; z-index: 1; }

.page-header h1 {
  font-size: var(--text-display);
  font-weight: var(--fw-bold);
  line-height: 0.88;
  text-transform: uppercase;
  color: var(--magenta);
  letter-spacing: -0.01em;
}

.page-header .sub {
  font-size: var(--text-body);
  letter-spacing: var(--tracking-wide);
  color: var(--magenta);
  font-weight: var(--fw-light);
  text-transform: uppercase;
  margin-top: var(--space-xs);
}

/* ─── Canvas responsive ─── */
@media (max-width: 1200px) {
  :root {
    --rrp-illustration-inset-top: var(--nav-bar-height);
  }

  .page-illustrated--hero {
    --hero-inset-top: calc(var(--nav-padding-top) + var(--logo-crop-height) + var(--space-xl));
  }

  /* Full-bleed vanaf bovenkant scherm; nav ligt erover (fixed) */
  .hero .rrp-illustration,
  .page-illustrated > .rrp-illustration {
    top: 0;
    bottom: auto;
    left: 0;
    right: 0;
    height: max(var(--canvas-illustration-height-min), 100svh);
  }

  .page-illustrated--hero {
    min-height: max(100svh, var(--canvas-scroll-min-height));
  }

  .hero-logo {
    overflow: hidden;
    height: var(--logo-crop-height);
  }

  .hero-logo.hero-logo--lottie {
    overflow: visible;
    height: var(--logo-lottie-anchor-height);
    width: var(--logo-lottie-clip-size);
  }

  .hero-logo--lottie .hero-logo__anchor {
    height: var(--logo-lottie-anchor-height);
  }

  .hero-logo--lottie .hero-logo__crop {
    top: 0;
    left: calc(50% - var(--logo-lottie-crop-width) / 2);
  }

  .hero:has(.hero-logo--lottie) {
    overflow: visible;
  }

  .page-illustrated:has(.hero-logo--lottie),
  .page-artboard:has(.hero-logo--lottie) {
    overflow: visible;
  }

  /* Stack T3/T4 — zelfde logo-anker als SVG (absolute onder nav) */
  .hero-logo.hero-logo--lottie {
    top: var(--nav-padding-top);
    left: 50%;
    transform: translateX(-50%);
  }

  .hero:has(.hero-logo--lottie) .hero-logo.hero-logo--lottie {
    top: auto;
    left: auto;
    transform: none;
    margin-top: var(--nav-padding-top);
  }

  .page-header .hero-logo.hero-logo--lottie {
    position: absolute;
    top: var(--nav-padding-top);
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0;
    width: var(--logo-lottie-clip-size);
    height: var(--logo-lottie-anchor-height);
  }

  .hero-logo svg,
  .hero-logo:not(.hero-logo--lottie) .hero-logo__lottie {
    width: var(--logo-size-stack);
    transform: translateY(calc(-1 * var(--logo-crop-shift)));
  }

  .hero-logo--lottie .hero-logo__lottie {
    width: var(--logo-lottie-frame-size);
    height: var(--logo-lottie-frame-size);
    transform: none;
  }

  .hero-logo #ring-0,
  .hero-logo #ring-1,
  .hero-logo #ring-2,
  .hero-logo #ring-3 {
    display: none;
  }

  .page-header {
    overflow: visible;
    padding-top: calc(var(--nav-bar-height) + var(--logo-crop-height) + var(--space-xl));
  }

  .page-header:has(.hero-logo--lottie) {
    padding-top: calc(var(--nav-bar-height) + var(--logo-lottie-crop-height) + var(--space-xl));
  }

  .page-header .hero-logo {
    top: var(--nav-padding-top);
    left: 50%;
    transform: translateX(-50%);
    width: var(--logo-size-stack);
  }

  .page-header .hero-logo.hero-logo--lottie {
    width: var(--logo-lottie-clip-size);
    height: var(--logo-lottie-anchor-height);
  }

  .pick-cta {
    right: var(--pick-cta-inset-x-stack);
    top: 25%;
    transform: none;
  }

  .pick-cta svg,
  .pick-cta img {
    width: var(--pick-cta-size-stack);
  }
}

@media (max-width: 768px) {
  .pick-cta {
    right: var(--pick-cta-inset-x-mobile);
    top: calc(var(--hero-inset-top) - var(--space-xl));
  }

  .pick-cta svg,
  .pick-cta img {
    width: var(--pick-cta-size-mobile);
  }

  .page-header {
    padding-top: calc(var(--nav-bar-height) + var(--logo-crop-height) + var(--space-lg));
  }

  .page-header:has(.hero-logo--lottie) {
    padding-top: calc(var(--nav-bar-height) + var(--logo-lottie-crop-height) + var(--space-lg));
  }
}

/* Homepage hero portrait: pick-top net onder "Will" (regel 2 van line-heavy) */
@media (max-width: 1200px) and (orientation: portrait) {
  .hero .pick-cta {
    top: calc(
      var(--hero-inset-top)
      + 2 * var(--text-display)
      + var(--pick-cta-gap-below-will)
    );
    transform: none;
  }
}