/*
  hotel-night.com/partners/<slug> · de partnerpagina
  Bovenop /css/site.css en /css/hotel.css (briefing partnerdetailpagina v2).
  Alleen wat afwijkt van de hotelpagina: de cover, de staande beelden en het
  slotpaneel. Geen nieuwe kleuren; nieuwe maten als tokens.

  Net als hotel.css voorbereid op animatie: geen opacity: 0 en geen transform
  in de basis-CSS, wel de data-block- en data-anim-haakjes in de HTML.
*/

:root {
  --pp-cover-h:      70svh;      /* hoogte van het beeld op de cover, mobiel */
  --pp-logo:         200px;      /* het logo als H1, 320px vanaf 900px */
  --pp-logo-paneel:  140px;
  --pp-staand-max:   90svh;      /* een staand beeld nooit hoger dan het scherm */
}
@media (min-width: 900px) {
  :root { --pp-logo: 320px; }
}

/* ─────────────────────────────────────────────
   B. COVER — logo en beeld naast of onder elkaar
   De beelden zijn licht en het logo is wit: niets over de foto (§7.B).
───────────────────────────────────────────── */
.pp-cover {
  background: var(--black);
  display: flex;
  flex-direction: column;
}
.pp-cover__media {
  height: 70vh;
  height: var(--pp-cover-h);
  min-height: 360px;
  overflow: hidden;
  background: var(--card);
}
.pp-cover__media picture,
.pp-cover__media img { display: block; width: 100%; height: 100%; }
.pp-cover__media img {
  object-fit: cover;
  object-position: var(--focus-portrait, 50% 50%);
}
.pp-cover__content {
  padding: 40px var(--hb-gutter) 8px;
}
/* Volgorde logo, label, tagline (Jan, 20 oktober 2026) */
.pp-cover .mono-label { margin: 28px 0 0; line-height: 1.5; }
.pp-cover__logo { line-height: 0; }
.pp-cover__logo img {
  display: block;
  width: var(--pp-logo);
  height: auto;
}
/* De tagline als zin, in de serif cursief (§7.B) */
.pp-cover .hb-cover__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  text-shadow: none;
  margin-top: 16px;
}

@media (min-width: 900px) {
  .pp-cover {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100vh;
    height: 100svh;
    min-height: 560px;
  }
  .pp-cover__media { order: 2; height: auto; min-height: 0; }
  .pp-cover__media img { object-position: var(--focus, 50% 50%); }
  /* Links de tekstmarge van de site: dezelfde lijn als het tekstblok op de
     cover van een hotelpagina (--hb-wide, gecentreerd) */
  .pp-cover__content {
    order: 1;
    align-self: center;
    padding: 0 clamp(32px, 5vw, 80px) 0 max(var(--hb-gutter), calc(50vw - var(--hb-wide) / 2));
  }
}

/* ─────────────────────────────────────────────
   D. HET VERHAAL — staande beelden
───────────────────────────────────────────── */
/* Productbeelden, staand 2:3; geen onderschriften */
.pp-story .hb-media__frame { aspect-ratio: 2 / 3; }

/* staand: van rand tot rand op mobiel, 5/12 rechts in het grid op desktop */
.pp-staand {
  width: 100%;
  max-width: calc(var(--hb-wide) + 2 * var(--hb-gutter));
  margin: 0 auto;
}
@media (min-width: 900px) {
  .pp-staand {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: clamp(24px, 3vw, 48px);
    padding: 0 var(--hb-gutter);
  }
  .pp-staand > .hb-media {
    grid-column: 8 / span 5;
    justify-self: end;
    width: 100%;
    max-width: calc(var(--pp-staand-max) * 2 / 3);
  }
}

/* ─────────────────────────────────────────────
   E. SLOTPANEEL — meer over de partner
───────────────────────────────────────────── */
.pp-slot {
  width: 100%;
  max-width: calc(var(--hb-col) + 2 * var(--hb-gutter));
  margin: var(--hb-space) auto var(--hb-space-m);
  padding: 0 var(--hb-gutter);
}
.pp-panel__logo {
  display: block;
  width: var(--pp-logo-paneel);
  height: auto;
  margin-bottom: 24px;
}
.pp-panel__regel {
  font-size: var(--hb-body);
  line-height: var(--hb-leading);
  color: var(--text-primary);
}
/* Waar je de partner tijdens het weekend tegenkomt; tot dat bekend is een
   tijdelijke regel ("… maken we begin december bekend") */
.pp-panel__weekend { margin-top: 12px; font-size: var(--hb-body); line-height: var(--hb-leading); color: var(--text-secondary); }
.pp-panel__link { margin-top: 20px; }
.pp-panel__link .text-link,
.pp-verder .text-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }
.pp-verder { margin-top: 24px; }