/* Section: Voucher / gift card */

.voucher { padding-block: var(--space-2xl); }

.voucher__layout {
  display: flex;
  align-items: stretch;
  min-height: 520px;
  background: var(--color-grey-100);
  border-radius: var(--radius-s);
  overflow: hidden;
}
.voucher__layout--media-right { flex-direction: row-reverse; }

.voucher__media { flex: 1 1 0; min-width: 0; }
/* Media fill / ratio / controls / scrim: assets/css/media-embed.css (.smedia). */

.voucher__content {
  flex: 1 1 0;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2xl);
  padding: var(--space-3xl);
  /* alignment comes from the .u-align-* utility (ACF "align" field) */
}
.voucher__header { display: flex; flex-direction: column; gap: var(--space-l); width: 100%; }
.voucher__heading-group { display: flex; flex-direction: column; gap: var(--space-2x); }
.voucher__eyebrow {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: 500;
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--color-grey-900);
}
.voucher__heading { color: var(--color-grey-900); }
.voucher__heading em { font-style: italic; }
.voucher__text { font-size: var(--fs-body-m); line-height: var(--lh-body-m); color: var(--color-grey-900); }
.voucher__btn { min-width: 237px; }

/* Stack image on top only below tablet — Figma keeps the 50/50 split on tablet (894px). */
@media (max-width: 768px) {
  .voucher__layout, .voucher__layout--media-right { flex-direction: column; }
  .voucher__media { width: 100%; flex: 0 0 auto; }
  .voucher__media.smedia--cover { min-height: 320px; }
  .voucher__media.smedia--ratio { align-self: stretch; }
  .voucher__content { padding: var(--space-2xl) var(--space-l); }
}
@media (max-width: 600px) {
  .voucher__heading { font-size: var(--fs-h-l); line-height: var(--lh-h-l); }
  .voucher__btn { width: 100%; }
}