// =============================================================================
// DRAWER — reusable shell, plus drawer-only context overrides
// Right-side slide-in panel + scrim. The shell (.drawer, .drawer__close,
// .drawer__body) is a pure layout container — any content (lodge detail,
// testimonial, contact form, tab-component detail) is plugged into
// .drawer__body as a composition of existing reusable components
// (.content-only-intro, .drawer-slider, form-field/form-layout, .booking__cards
// + .info-card), not drawer-specific markup. This partial holds the shell
// itself plus the minimal `.drawer__body .content-only-intro` context
// overrides needed to keep that component's drawer appearance pixel-identical
// to its previous bespoke implementation. Content-specific styles live in
// their own partial, e.g. _drawer-lodge.scss for the lodge slider.
// Mobile-first: base = 375px, desktop via respond-to('desktop')
// Measurements: design/measurements-v2.json → "drawer-component" / "contact-form"
//   Web:    panel 628px, pt-40 pb-80 px-80; scrim rgba(0,0,0,0.3)
//   Mobile: panel full-width, pt-40 pb-80 px-20; scrim same
//   Dark scrim variant (--dark): rgba(0,0,0,0.8), opt in via data-scrim="dark"
// =============================================================================

@import '../mixins';

// =============================================================================
// SCRIM
// =============================================================================

.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 300;
  background-color: rgba(0, 0, 0, 0.3);  // lodge drawer scrim
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;

  &.is-open {
    opacity: 1;
    pointer-events: auto;
  }
}

.drawer-scrim--dark {
  background-color: rgba(0, 0, 0, 0.8);  // darker scrim variant, e.g. contact form
}

// =============================================================================
// DRAWER PANEL
// =============================================================================

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 310;
  width: 100%;                            // mobile: full-width
  max-width: 100vw;
  background-color: var(--color-white);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.35s ease;
  box-shadow: -12px 0 32px rgba(10, 13, 18, 0.15);

  &.is-open {
    transform: translateX(0);
  }

  @include respond-to('desktop') {
    width: 628px;                         // desktop: 628px
  }
}

// ── Close button — 24px, absolute top-right ────────────────────────────────
.drawer__close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  padding: 0;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: opacity 0.2s ease;

  svg,
  img {
    width: 24px;
    height: 24px;
    display: block;
    flex-shrink: 0;
  }

  &:hover { opacity: 0.6; }

  &:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
    border-radius: 2px;
  }
}

// ── Drawer body ──────────────────────────────────────────────────────────────
.drawer__body {
  display: flex;
  flex-direction: column;
  gap: 40px;                             // gap-40 between blocks
  padding: 40px 20px 80px;               // mobile: pt-40 pb-80 px-20

  @include respond-to('desktop') {
    padding: 40px 80px 80px;             // desktop: pt-40 pb-80 px-80
  }
}

// Contact-form variant: .form-layout is drawer__body's only child, and only
// needs 40px above and below it — not the 80px pb every other variant's
// (photo-heavy) content needs.
.drawer__body:has(> .form-layout) {
  padding-bottom: 40px;
}

// ─── Text blocks ─────────────────────────────────────────────────────────────
// Full-width media block — used by drawer-tab-component (single detail photo).
// The <img class="drawer__media"> can now be wrapped in a <picture> (for
// per-breakpoint <source> variants) — picture is inline by default, but as a
// direct child of .drawer__body's flex column it would otherwise be
// blockified/stretched like any other flex item, so pin it to inline-block
// explicitly rather than let it behave as a flex item.
.drawer__body > picture {
  display: inline-block;
}

// Editors can also drop TYPO3's default Image content element straight into
// the drawer body (sflg_drawer_content is a generic tt_content collection —
// see this template's own header comment). Fill the full body width, height
// auto to preserve the source image's own aspect ratio (no crop/stretch).
.drawer__body .frame-type-image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.drawer__media {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--radius-xs);
  display: block;

  @include respond-to('desktop') {
    height: 320px;
  }
}

// Bare eyebrow label — contact-form variant only (single line, no paired
// title/body, so it doesn't warrant the full content-only-intro component).
.drawer__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: var(--lh-base);
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin: 0;
}

.drawer__eyebrow--muted {
  color: var(--color-nandor);            // #49554c — softer eyebrow color
}

.drawer__stars {
  font-size: var(--fs-base);
  letter-spacing: 0.2em;
  color: var(--color-gold);
  margin: 0;
}

// ─── Reused content-only-intro component (lodge / testimonial / tab-component
// detail variants) ───────────────────────────────────────────────────────────
// The drawer's heading/body text is composed from the shared .content-only-intro
// component (see _content-only-intro.scss) instead of a bespoke drawer-only
// implementation — see .drawer__body for the layout rationale. That component
// is normally a full standalone page section (own vertical padding, type scale
// that grows on desktop); these rules re-scope it to the drawer's own spacing
// and typography contract, which stays flat across every breakpoint.
// content-only-intro is reused twice in the lodge variant — once for the
// drawer's own intro (needs the close-button clearance below) and once for
// the trailing "Learn more" block (a plain sibling in .drawer__body's own
// 40px flow, no extra offset) — the margin-top is scoped to :first-child so
// only the former gets it.
.drawer__body .content-only-intro {
  padding-block: 0;

  &:first-child {
    margin-top: 24px;                    // space after close button
  }

  &__heading {
    gap: 30px;                           // eyebrow → title
  }

  &__eyebrow {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-text-primary);
    max-width: none;
  }

  &__title {
    font-size: var(--fs-display-md);     // 36px, flat at every breakpoint
    line-height: var(--lh-display-md);
    letter-spacing: -0.72px;
  }

  &__body {
    font-size: var(--fs-base);           // 16px, flat at every breakpoint
    line-height: var(--lh-base);
    margin-top: 8px;                     // title → body
    max-width: none;
  }

  .drawer__stars {
    margin-top: 30px;                    // title/body → stars
  }
}

// Body scroll lock. _base.scss sets html,body { overflow-x: hidden } (a
// horizontal-overflow guard) — an explicit overflow-x on the root element
// blocks the usual body→viewport overflow propagation, so the page's real
// scrolling box is <html>, not <body>, and overflow:hidden on body alone
// never actually stops the page from scrolling. :has() lets this stay a
// pure CSS fix instead of also touching the JS that sets the body class.
body.drawer-open {
  overflow: hidden;
}

html:has(body.drawer-open) {
  overflow-y: hidden;
}