/* Overgenomen uit AI Revolution-catalogus: component 17, pages.css. Aanpassingen staan in kennismaken.css. */
.booking-suite {
  padding-block: clamp(5.5rem, 4rem + 9vw, 12rem);
  /* Vangnet voor #kennismaking: springt de browser zelf naar het fragment
     (dat doet hij op een trage verbinding nog eens over, zie initHashLanding
     in app.js), dan landt de sectie hier onder de zwevende nav in plaats van
     eronder weg. Zelfde 84px die app.js als nav-offset aanhoudt. */
  scroll-margin-top: 84px;
}
.booking-suite__intro {
  max-width: 48rem;
  margin: 0 auto clamp(2.6rem, 1.8rem + 3vw, 4.5rem);
  text-align: center;
}
.booking-suite__eyebrow {
  color: var(--accent-deep);
  justify-content: center;
  margin-bottom: 1.2rem;
}
.booking-suite__title {
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 20ch;
  margin-inline: auto;
}
.booking-suite__title em {
  font-style: normal;
  background-image: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.booking-suite__lead {
  margin: 1.3rem auto 0;
  max-width: 48ch;
  font-size: var(--fs-lead);
  /* zelfde regelafstand als .lead: op --lh-body (1.6) staan de regels
     veel verder uit elkaar dan bij de leads elders op de pagina */
  line-height: 1.36;
  letter-spacing: -0.018em;
  color: var(--ink-soft);
  /* gelijkmatige regelverdeling: houdt de lead op een nette 2 regels i.p.v.
     een lange regel + één los woord ("liggen.") op een derde regel */
  text-wrap: balance;
}
/* the suite card */
.suite {
  position: relative;
  width: min(100%, 68rem);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  border-radius: clamp(24px, 1.5rem + 1.4vw, 40px);
  border: 1px solid var(--glass-border);
  box-shadow:
    var(--shadow-lift),
    0 40px 130px -45px var(--accent-glow);
}
@media (min-width: 900px) {
  .suite {
    grid-template-columns: 0.84fr 1.16fr;
  }
}
/* photographic pane */
.suite__visual {
  position: relative;
  min-height: 15rem;
  overflow: hidden;
}
.suite__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% 30%;
  display: block;
}
/* depth + legibility scrim */
.suite__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 8, 14, 0.12) 0%, transparent 28%, rgba(4, 8, 14, 0.5) 100%),
    linear-gradient(90deg, transparent 72%, rgba(4, 8, 14, 0.4) 100%);
  pointer-events: none;
}
.suite__proof {
  position: absolute;
  left: clamp(1rem, 0.6rem + 1vw, 1.6rem);
  bottom: clamp(1rem, 0.6rem + 1vw, 1.6rem);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.95rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  color: #f3f6fb;
  background: rgba(8, 12, 20, 0.46);
  border: 1px solid rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
}
.suite__proof-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
/* booking pane: a controlled dark surface so the calendar always integrates */
.suite__booking {
  --ink: #f3f6fb;
  --ink-soft: #c2cad4;
  --ink-faint: #8a93a0;
  /* Het paneel is in beide thema's donker, dus --ink-invert moet mee omdraaien.
     Zonder deze regel erft een .btn hier in light mode de lichte --ink-invert
     van :root: witte tekst op de witte pil van het agenda-vangnet. */
  --ink-invert: #0a0e16;
  position: relative;
  padding: clamp(1.3rem, 0.9rem + 1.6vw, 2.4rem);
  color: var(--ink);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.07), transparent 55%),
    radial-gradient(120% 80% at 100% 0%, rgba(102, 198, 255, 0.1), transparent 60%),
    #070b12;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.07);
}
.suite__booking-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: clamp(0.9rem, 0.6rem + 0.8vw, 1.4rem);
  margin-bottom: clamp(1rem, 0.7rem + 0.8vw, 1.5rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.suite__booking-title {
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 560;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.suite__meta {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.suite .calendar-embed {
  margin-top: 0;
}
.suite__reassure {
  margin-top: clamp(1rem, 0.7rem + 0.8vw, 1.4rem);
  font-size: var(--fs-small);
  color: var(--ink-faint);
  text-align: center;
}
/* Uitwijkroutes onderaan de boekingskaart. Spiegelt .suite__booking-head:
   dezelfde haarlijn, label links, actie rechts. Geen accentkleur, want die
   is hier voor de knoppen; deze regels mogen de agenda niet beconcurreren. */
.suite__routes {
  display: grid;
  gap: 0.55rem;
  margin-top: clamp(1rem, 0.7rem + 0.8vw, 1.5rem);
  padding-top: clamp(0.9rem, 0.6rem + 0.8vw, 1.4rem);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.suite__route {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.2rem 1.2rem;
  /* geen lopende tekst: de leesbreedte uit base.css zou de rij afknijpen
     en de rechterkolom halverwege de kaart laten stranden */
  max-width: none;
  font-size: var(--fs-small);
}
.suite__route-label {
  color: var(--ink-faint);
}
.suite__route-link {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.suite__route-link:hover,
.suite__route-link:focus-visible {
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.55);
}
/* Smal: label en link passen niet naast elkaar. Ze stapelen dan allebei,
   ook de rij die op het randje nog wel zou passen. Anders valt de ene rij
   om en de andere niet, en dat leest als een fout. */
@media (max-width: 560px) {
  .suite__routes {
    gap: 0.85rem;
  }
  .suite__route {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
  }
}