/* Gutschein-Block mit eingebettetem gastronovi-Shop.
   Seitenunabhängig: Farben und Layout folgen den Gutschein-Blöcken auf
   Yoga und Activity Painting, die Widget-URL kommt per data-Attribut. */

.voucher {
  background-color: var(--color-midnight);
  padding-block: var(--section-py-mobile);
  overflow: hidden;
  scroll-margin-top: calc(var(--nav-height) + 24px);
}

@media (min-width: 768px) {
  .voucher {
    padding-block: var(--section-py-desktop);
  }
}

.voucher__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

@media (min-width: 768px) {
  .voucher__grid {
    grid-template-columns: 55% 45%;
  }
}

/* Auf Mobile steht die Illustration über dem Text, wie in den
   Gutschein-Blöcken auf Yoga und Activity Painting. */
@media (max-width: 767px) {
  .voucher__art {
    order: -1;
  }

}

.voucher__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .voucher__copy {
    padding-inline-end: var(--space-3xl);
  }
}

.voucher__eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--font-size-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--baby-pink-60);
}

.voucher__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 52px;
  line-height: 1.1;
  color: var(--color-off-white);
}

.voucher__title em {
  font-style: italic;
  color: var(--color-baby-pink);
}

.voucher__text {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.8;
  color: var(--off-white-55);
  max-width: 32rem;
}

.voucher__cta {
  align-self: flex-start;
  margin-top: var(--space-sm);
}

.voucher__hint {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--font-size-xs);
  line-height: 1.6;
  color: var(--off-white-55);
  max-width: 28rem;
}

.voucher__hint a {
  color: var(--baby-pink-60);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.voucher__art {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  min-height: 280px;
}

/* Die Illustration ist weisse Line-Art auf transparentem Grund. screen
   lässt den Midnight-Ton durchscheinen statt einen Kasten zu setzen. */
.voucher__art img {
  width: 100%;
  max-width: 360px;
  height: auto;
  object-fit: contain;
  mix-blend-mode: screen;
  opacity: 0.9;
}

/* Das Panel liegt ausserhalb des Containers und läuft deshalb über die
   volle Breite. Es trägt exakt den Hintergrundton des Formulars im Iframe
   (--color-voucher-form), damit links und rechts davon keine Kante entsteht,
   sondern eine durchgehende Fläche unter dem Textblock. */
.voucher__panel {
  display: none;
  background-color: var(--color-voucher-form);
  margin-top: var(--space-3xl);
  /* Der Weiter-Button sitzt am unteren Rand des Iframes und stiesse sonst
     direkt an die helle Sektion darunter. */
  padding-bottom: var(--space-2xl);
  /* Entspricht der Starthöhe des Iframes, damit der Klick nicht in einen
     leeren Container springt, bevor gastronovi geantwortet hat. */
  min-height: 400px;
}

/* Das gastronovi-Formular ist im Iframe fest 1000px breit und zentriert
   sich auf weissem Grund. Der Mount deckelt den Iframe auf genau diese
   Breite, dann füllt das Formular ihn randlos und vom weissen Grund bleibt
   nichts stehen. Eingebettet wird ohnehin erst ab 1024px Viewport. */
.voucher__mount {
  width: min(1000px, 100%);
  margin-inline: auto;
}

/* Sobald der Iframe hängt, bestimmt allein dessen Höhe das Panel.
   gastronovi liefert an mobile User-Agents statt des Formulars einen
   kompakten Aufklapp-Button (rund 196px); die reservierte Ladehöhe stünde
   sonst als leere weisse Fläche darunter. */
.voucher__panel:has(iframe) {
  min-height: 0;
}

.voucher.is-open .voucher__panel {
  display: block;
}

/* Die Formularfläche schliesst den Abschnitt nach unten ab. Bliebe das
   Sektions-Padding stehen, läge unter dem Petrol noch ein Streifen
   Midnight, und aus einer Fläche würden zwei Blöcke. */
.voucher.is-open {
  padding-bottom: 0;
}

/* Das Panel bekommt den Fokus nur programmatisch, damit die Tastatur nach
   dem Öffnen nicht ins Leere springt. Ein Fokusring wäre hier irreführend. */
.voucher__panel:focus {
  outline: none;
}

.voucher.is-open .voucher__cta {
  display: none;
}