/* Booking choice modal — extracted from BookingChoiceModal.astro and loaded
   asynchronously by Base.astro to keep it off the critical render path.
   The modal is invisible until JS calls dialog.showModal() on a booking
   trigger click, so deferred styling is safe. */

.booking-modal {
  width: min(1040px, calc(100vw - 32px));
  max-height: min(760px, calc(100dvh - 32px));
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-white);
  overflow: visible;
}

.booking-modal::backdrop {
  background: rgba(23, 23, 25, 0.38);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.booking-modal[open]::backdrop {
  animation: booking-backdrop-in 360ms ease both;
}

.booking-modal[data-state='closing']::backdrop {
  animation: booking-backdrop-out 420ms ease both;
}

.booking-modal__shell {
  position: relative;
  border-radius: clamp(30px, 4vw, 48px);
  overflow: hidden;
  isolation: isolate;
  padding: clamp(20px, 3vw, 36px);
  box-shadow: 0 34px 110px rgba(23, 23, 25, 0.28);
  transform-origin: center 42%;
  scrollbar-width: none;
}

.booking-modal__shell::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.booking-modal__shell:focus {
  outline: none;
}

.booking-modal[open] .booking-modal__shell {
  animation: booking-modal-in 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.booking-modal[data-state='closing'] .booking-modal__shell {
  animation: booking-modal-out 420ms cubic-bezier(0.55, 0, 0.45, 1) both;
}

.booking-modal[data-state='closing'] .booking-modal__media img {
  animation: booking-image-away 420ms cubic-bezier(0.55, 0, 0.45, 1) both;
}

.booking-modal[data-state='closing'] .booking-modal__head,
.booking-modal[data-state='closing'] .booking-modal__choices {
  animation: booking-content-out 320ms ease both;
}

.booking-modal__media {
  position: absolute;
  inset: 0;
}

.booking-modal__media {
  z-index: 0;
  background: transparent;
}

.booking-modal__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.14);
}

.booking-modal[open] .booking-modal__media img {
  animation: booking-image-pull 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.booking-modal__close {
  position: absolute;
  z-index: 4;
  top: clamp(18px, 2.6vw, 30px);
  right: clamp(18px, 2.6vw, 30px);
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255,255,255,0.32);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--color-white);
  background: rgba(255,255,255,0.16);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  transition:
    transform 180ms ease,
    background 220ms ease,
    border-color 220ms ease;
}

.booking-modal__close:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.24);
  border-color: rgba(255,255,255,0.52);
}

.booking-modal__close:focus-visible {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.24);
  border-color: rgba(255,255,255,0.52);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 0 0 3px rgba(255,255,255,0.24);
}

.booking-modal__close:active {
  transform: translateY(1px) scale(0.98);
}

.booking-modal__close svg {
  width: 22px;
  height: 22px;
}

.booking-modal__content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto 1fr auto;
  gap: clamp(18px, 2.4vw, 32px) clamp(28px, 4.5vw, 76px);
  align-content: center;
}

.booking-modal__head {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.7fr);
  gap: clamp(10px, 1.2vw, 18px) clamp(22px, 4vw, 64px);
  align-items: end;
}

.booking-modal__title {
  grid-column: 1;
  margin: 0;
  max-width: 22ch;
  color: var(--color-white);
  font-size: clamp(2.6rem, 4.2vw, 4.4rem);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.booking-modal__head .section-label {
  grid-column: 1;
}

.booking-modal__lead {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  margin: 0;
  max-width: 31ch;
  justify-self: end;
  color: rgba(255,255,255,0.86);
  font-size: clamp(1.1rem, 1.5vw, 1.32rem);
  line-height: 1.34;
  letter-spacing: -0.02em;
}

.booking-modal__choices {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  align-items: stretch;
}

.booking-modal__choice {
  position: relative;
  min-height: 200px;
  border-radius: clamp(24px, 3vw, 34px);
  padding: clamp(18px, 2.4vw, 26px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  color: var(--color-ink);
  text-decoration: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.07));
  border: 1px solid rgba(255,255,255,0.32);
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 16px 44px rgba(23, 23, 25, 0.04);
  transition:
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    background 320ms ease,
    border-color 220ms ease;
}

.booking-modal__choice::before {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.18), transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,0.1), transparent 62%);
}

.booking-modal__choice:hover,
.booking-modal__choice:focus-visible {
  transform: translateY(-4px);
  background: linear-gradient(135deg, rgba(255,255,255,0.26), rgba(255,255,255,0.1));
  border-color: rgba(255,255,255,0.52);
}

.booking-modal__eyebrow,
.booking-modal__choice-title,
.booking-modal__copy,
.booking-modal__action {
  position: relative;
  z-index: 2;
}

.booking-modal__eyebrow {
  margin-bottom: 12px;
  color: rgba(23,23,25,0.62);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.booking-modal__choice-title {
  margin-bottom: 12px;
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-size: clamp(1.85rem, 3vw, 2.6rem);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.booking-modal__copy {
  margin-bottom: 24px;
  color: rgba(23,23,25,0.74);
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.32;
  letter-spacing: -0.018em;
}

.booking-modal__action {
  width: fit-content;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px 6px 20px;
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  background: rgba(255,255,255,0.92);
  font-weight: 600;
  line-height: 1.08;
}

.booking-modal__action svg {
  width: 36px;
  height: 36px;
  padding: 9px;
  border-radius: 50%;
  background: var(--color-blush);
  color: var(--color-burgundy-500);
  transition: transform 220ms ease;
}

.booking-modal__choice:nth-child(2) .booking-modal__action svg {
  background: var(--color-gold-50);
  color: var(--color-burgundy-500);
}

.booking-modal__choice:hover .booking-modal__action svg,
.booking-modal__choice:focus-visible .booking-modal__action svg {
  transform: translateX(3px);
}

.booking-modal__status {
  grid-column: 1 / -1;
  justify-self: end;
  margin: 0;
  color: rgba(255,255,255,0.78);
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}

body.booking-modal-open {
  overflow: hidden;
}

@keyframes booking-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes booking-backdrop-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes booking-modal-in {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.965);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes booking-modal-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(28px) scale(0.955);
  }
}

@keyframes booking-image-pull {
  from { transform: scale(1.14) translateY(18px); }
  to { transform: scale(1) translateY(0); }
}

@keyframes booking-image-away {
  from { transform: scale(1) translateY(0); }
  to { transform: scale(1.08) translateY(16px); }
}

@keyframes booking-content-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(10px);
  }
}

@media (max-width: 820px) {
  .booking-modal {
    width: min(100vw - 20px, 520px);
    max-height: calc(100dvh - 20px);
  }

  .booking-modal__shell {
    /* Drop the forced full-viewport min-height. On phones (especially
       iPhone SE at 667px tall) it pushed the shell taller than the
       viewport and the content area scrolled inside, which felt
       broken. Letting the shell size to content keeps the modal at
       its natural height and re-enables backdrop-tap-to-close on
       the strip of dialog around the shell. */
    min-height: auto;
    padding: 22px;
    border-radius: 32px;
    overflow-y: auto;
  }

  .booking-modal__content {
    min-height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    /* Tightened gaps + padding-top so the head, choices and status
       row stack into the available phone viewport without scrolling. */
    gap: 18px;
    align-items: start;
    padding-top: 20px;
  }

  .booking-modal__head {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .booking-modal__title {
    /* Let the title span the full content width on phones. The 10.5ch
       column cap (inherited from the desktop two-col layout) forced
       "eksisterende" -- a 12-char word -- onto its own line, which
       pushed the title to 3 lines and cost ~35px of vertical height.
       Full-width here gives a natural 2-line break ("Ny eller
       eksisterende" / "kunde?"). */
    max-width: none;
    font-size: clamp(2rem, 8.5vw, 2.7rem);
  }

  .booking-modal__head .section-label,
  .booking-modal__title,
  .booking-modal__lead {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }

  .booking-modal__lead {
    max-width: 29ch;
  }

  .booking-modal__choices {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .booking-modal__choice {
    /* min-height was a no-op before -- the card content (eyebrow +
       large title + 3-line copy + 48px action button) is already
       taller than 170, so the floor never kicked in. Tightening
       the *content* below is what actually makes the card shorter. */
    min-height: 0;
    border-radius: 24px;
    padding: 16px 18px;
  }

  /* Mobile-only: smaller per-card title + copy so two cards fit in
     the phone viewport without inner scroll on iPhone 13/14-class
     devices. Combined the per-element margin-bottom values are 12 ->
     8 / 24 -> 14 to claw back ~14px per card. */
  .booking-modal__choice-title {
    font-size: clamp(1.45rem, 5.4vw, 1.85rem);
    margin-bottom: 8px;
  }
  .booking-modal__copy {
    font-size: clamp(0.92rem, 3vw, 1rem);
    line-height: 1.3;
    margin-bottom: 14px;
  }
  .booking-modal__eyebrow {
    font-size: 0.78rem;
    margin-bottom: 8px;
  }
  .booking-modal__action {
    min-height: 42px;
    padding: 4px 8px 4px 16px;
  }
  .booking-modal__action svg {
    width: 32px;
    height: 32px;
    padding: 8px;
  }

  .booking-modal__status {
    grid-column: 1;
    justify-self: start;
  }
}

@media (max-width: 420px) {
  .booking-modal__shell {
    padding: 18px;
    border-radius: 28px;
  }

  .booking-modal__close {
    width: 46px;
    height: 46px;
  }

  .booking-modal__choice {
    padding: 14px 16px;
  }

  .booking-modal__action {
    width: 100%;
    justify-content: space-between;
  }
}

@media (prefers-reduced-motion: reduce) {
  .booking-modal[open]::backdrop,
  .booking-modal[open] .booking-modal__shell,
  .booking-modal[open] .booking-modal__media img,
  .booking-modal[data-state='closing'] .booking-modal__media img {
    animation-duration: 1ms;
  }

  .booking-modal[data-state='closing']::backdrop,
  .booking-modal[data-state='closing'] .booking-modal__shell,
  .booking-modal[data-state='closing'] .booking-modal__head,
  .booking-modal[data-state='closing'] .booking-modal__choices {
    animation-duration: 220ms;
  }

  .booking-modal__choice,
  .booking-modal__action svg {
    transition: none;
  }
}