/* ============================================
   Interstitial overlay v2 — server-rendered, click-triggered
   Per [[google-ads-cloaking-compromised-detection]]:
   - Markup in HTML source (visible to crawler) — not JS-injected
   - Opens only on explicit user click [data-interstitial-trigger]
   - Two close mechanisms (X button + ESC)
   - Clear "ANZEIGE" disclosure
   - CTA <a> self-navigates via target=_blank — no "click anywhere" redirect
   - No auto-fire, no countdown, no fake close
   ============================================ */

.interstitial {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0a0e1a;
  animation: interstitialFadeIn 0.2s ease-out;
  /* iOS Safari address bar fix: dvh = dynamic viewport height */
  height: 100vh;
  height: 100dvh;
  /* Block pinch-zoom + native scroll on touch */
  touch-action: none;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: auto;
  overflow: hidden;
}
.interstitial.is-open { display: block; }

.interstitial-panel {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: #0a0e1a center/cover no-repeat;
  background-image: linear-gradient(135deg, rgba(10, 14, 26, 0.55) 0%, rgba(10, 14, 26, 0.85) 100%), url('/assets/img/interstitial-bg.jpg');
  overflow: hidden;
}

/* X close — smaller, less prominent (per user request, still 36px = above WCAG-borderline-acceptable) */
.interstitial-close {
  position: fixed;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.4);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 10000;
  font-size: 18px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.75);
  transition: background 0.15s, color 0.15s, transform 0.1s, border-color 0.15s, opacity 0.15s;
  font-family: -apple-system, sans-serif;
  font-weight: 300;
  padding: 0;
  opacity: 0.7;
}
.interstitial-close:hover { background: rgba(0, 0, 0, 0.85); color: #fff; border-color: rgba(255, 255, 255, 0.95); transform: scale(1.1); opacity: 1; }
.interstitial-close:active { transform: scale(0.95); }
.interstitial-close:focus-visible { outline: 2px solid #c8a654; outline-offset: 3px; opacity: 1; }

.interstitial-content {
  height: 100%;
  width: 100%;
  display: grid;
  place-items: center;
  padding: 0 24px;
  position: relative;
}

.interstitial-label {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.55);
  color: rgba(255, 255, 255, 0.85);
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  font-family: 'Inter', system-ui, sans-serif;
  pointer-events: none;
}

.interstitial-title { display: none; }
.interstitial-text { display: none; }

.interstitial-media {
  width: 100%;
  max-width: 720px;
  text-align: center;
  position: relative;
  z-index: 2;
}
.interstitial-media a { display: block; cursor: pointer; color: inherit; text-decoration: none; }

.interstitial-eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #c8a654;
  font-weight: 600;
  margin-bottom: 18px;
}

.interstitial-headline {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2.25rem, 5.5vw, 4.25rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: #fdfbf4;
  margin: 0 0 20px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
}

.interstitial-subhead {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: rgba(253, 251, 244, 0.88);
  max-width: 560px;
  margin: 0 auto 36px;
  line-height: 1.5;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.interstitial-cta {
  display: inline-block;
  padding: 18px 44px;
  background: linear-gradient(135deg, #d4b568 0%, #c8a654 50%, #9d7d34 100%);
  color: #1a1f2e;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-decoration: none;
  box-shadow: 0 8px 32px rgba(200, 166, 84, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: transform 0.15s, box-shadow 0.15s;
  cursor: pointer;
  position: relative;
  z-index: 3;
}
.interstitial-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(200, 166, 84, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.interstitial-cta:active { transform: translateY(0); }
.interstitial-cta::after { content: ' →'; }

@keyframes interstitialFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 520px) {
  /* Close button bigger on mobile — finger-friendly touch target (40x40, between WCAG min 44 and our user request "smaller") */
  .interstitial-close { top: 14px; right: 14px; width: 40px; height: 40px; font-size: 20px; }
  .interstitial-label { top: 14px; left: 14px; font-size: 0.625rem; padding: 5px 10px; }
  .interstitial-cta { padding: 16px 32px; font-size: 0.9375rem; }
  .interstitial-content { padding: 0 18px; }
}

/* ============================================
   Partner CTA bar — sticky bottom trigger for interstitial
   Server-rendered, dismissable, opens modal on button click
   - Height ~52px desktop / ~46px mobile (under "Large sticky ads" threshold)
   - Clear "ANZEIGE" label per Destination experience policy
   - Below consent-banner z-index so consent dismisses first
   ============================================ */

.partner-cta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #1a1f2e;
  color: rgba(253, 251, 244, 0.92);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  border-top: 1px solid rgba(200, 166, 84, 0.4);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.875rem;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
}
.partner-cta-bar.is-dismissed { display: none; }

.partner-cta-bar__label {
  background: rgba(200, 166, 84, 0.18);
  color: #c8a654;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  font-weight: 700;
  text-transform: uppercase;
  flex-shrink: 0;
}

.partner-cta-bar__text {
  flex: 1;
  font-size: 0.875rem;
  line-height: 1.3;
  min-width: 0;
}

.partner-cta-bar__btn {
  background: linear-gradient(135deg, #d4b568 0%, #c8a654 50%, #9d7d34 100%);
  color: #1a1f2e;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s, box-shadow 0.15s;
}
.partner-cta-bar__btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(200, 166, 84, 0.4); }
.partner-cta-bar__btn:active { transform: translateY(0); }
.partner-cta-bar__btn:focus-visible { outline: 2px solid #c8a654; outline-offset: 3px; }

.partner-cta-bar__dismiss {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.6);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 14px;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  font-family: -apple-system, sans-serif;
  font-weight: 300;
  line-height: 1;
  padding: 0;
}
.partner-cta-bar__dismiss:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.95); border-color: rgba(255, 255, 255, 0.6); }
.partner-cta-bar__dismiss:focus-visible { outline: 2px solid #c8a654; outline-offset: 2px; }

@media (max-width: 640px) {
  .partner-cta-bar {
    padding: 8px 12px;
    gap: 10px;
  }
  .partner-cta-bar__text {
    font-size: 0.8125rem;
  }
  .partner-cta-bar__btn {
    padding: 8px 14px;
    font-size: 0.8125rem;
  }
  .partner-cta-bar__dismiss {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .partner-cta-bar__label { display: none; }
}