/* =========================================================================
   Home — a mode-select hub for the three Motijheel ventures. Full-bleed
   panels, one per venture; hovering (or focusing, for keyboard users) one
   grows it and dims its neighbours, the classic "choose your mode" feel,
   translated into the site's own Navy & Gold register rather than a loud
   game-menu look.
   ========================================================================= */

html, body.mode-select { height: 100%; }
body.mode-select {
  margin: 0; overflow-x: hidden;
  display: flex; flex-direction: column;
  /* A visible field behind the cards — without this the panels read as one
     continuous strip rather than distinct tiles sitting on a surface. A
     second glow in the same greenish-gold as the Park panel, low from the
     right, echoes it into the surrounding page rather than confining that
     colour to one card. */
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 70%),
    radial-gradient(ellipse 60% 50% at 100% 100%, color-mix(in srgb, #9CAA42 14%, transparent), transparent 70%),
    var(--ink-deep);
}

.mode-select__top {
  position: relative; z-index: 5;
  display: flex; align-items: center; justify-content: center; gap: 1.25rem;
  flex-wrap: wrap;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 4vw, 2.5rem);
  text-align: center;
  background: var(--ink-deep);
  border-bottom: 1px solid var(--line-dark);
}
.mode-select__brand {
  position: absolute; left: clamp(1.25rem, 4vw, 2.5rem); top: 50%; translate: 0 -50%;
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none; color: var(--on-dark);
  font-family: var(--caps); text-transform: uppercase; font-size: .78rem; letter-spacing: .16em;
}
.mode-select__brand svg { width: 1.6rem; height: auto; color: var(--gold); }
@media (max-width: 700px) { .mode-select__brand span { display: none; } }
.mode-select__tagline {
  font-family: var(--display); font-weight: 500; color: var(--on-dark);
  font-size: clamp(1.1rem, 2.4vw, 1.5rem); letter-spacing: .01em;
}

.panels {
  flex: 1; display: flex; gap: clamp(.6rem, 1.4vw, 1rem); min-height: 0;
  padding: 0 clamp(.6rem, 1.4vw, 1rem) clamp(.6rem, 1.4vw, 1rem);
}

/* Shared visual treatment for every panel — position, border, hover glow.
   Sizing (flex-grow/basis) is deliberately NOT here; see the top-level
   sizing rule below. */
.panel {
  position: relative; min-width: 0; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--panel-accent) 45%, var(--line-dark));
  border-top: 3px solid var(--panel-accent);
  box-shadow: 0 0 0 0 transparent;
  transition: flex-grow .55s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.panel:hover, .panel:focus-within {
  box-shadow: 0 1.5rem 3rem -1rem color-mix(in srgb, var(--panel-accent) 55%, transparent);
}

/* ---- Top-level sizing: Hotel, Moti Mahal and Events lay out side by side,
   equal width at rest — the hover/focus expand-and-dim below is the only
   thing that changes any one panel's share. ---- */
.panels > .panel {
  flex: 1 1 0%;
  min-width: 0;
  transition: flex-grow .55s var(--ease);
}

.panels > .panel:hover, .panels > .panel:focus-within { flex-grow: 1.55; }
.panels:has(> .panel:hover, > .panel:focus-within)
  > .panel:not(:hover):not(:focus-within) { flex-grow: .78; }

.panel__media {
  position: absolute; inset: 0;
  background-image: var(--panel-img); background-size: cover; background-position: center;
  transition: scale .6s var(--ease), filter .6s var(--ease);
}
.panel:hover .panel__media, .panel:focus-within .panel__media { scale: 1.07; }
.panels:has(.panel:hover) .panel:not(:hover) .panel__media,
.panels:has(.panel:focus-within) .panel:not(:focus-within) .panel__media { filter: brightness(.55) saturate(.6); }

/* Tinted toward each panel's own accent rather than a flat navy wash — this
   is the main thing that made all four read as "the same photo": a heavy
   uniform dark overlay was crushing what's actually quite different
   colouring in each photograph (warm brick, red banquet linen, warm
   restaurant light, a dusky green-and-rose lake). */
.panel__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--panel-accent) 30%, var(--ink-deep) 85%) 2%,
    color-mix(in srgb, var(--panel-accent) 20%, transparent 70%) 40%,
    transparent 75%
  );
}

.panel__content {
  position: absolute; z-index: 2; left: 0; right: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2.5vw, 1.5rem);
  text-align: center; color: var(--on-dark);
  /* Bottom-anchored via top:100% + a full-height pull-up, not flex
     align-items — so the anchor point is exact regardless of how tall the
     content box is, and all three panels' text lines up at the same
     bottom position as each other (equal panel heights + this identical
     rule, rather than each panel's own varying content height). At rest,
     lifted a little clear of that line; hovering settles it flush, the
     same spot the buttons revealed below it occupy. */
  top: 100%; transform: translateY(calc(-100% - 1.5rem));
  transition: transform .5s var(--ease);
}
.panel:hover .panel__content, .panel:focus-within .panel__content {
  transform: translateY(-100%);
}
/* The short label (Hotel/Restaurant/Events) — small and accent-coloured,
   always, and always the smaller of the pair. Hovering (or focusing) only
   nudges it up slightly; the branded name below it stays the visually
   dominant one in both states — see .panel__subtitle. */
.panel__title {
  margin-top: 0; font-family: var(--caps); text-transform: uppercase; font-weight: 500;
  font-size: .78rem; letter-spacing: .18em; color: var(--panel-accent);
  transition: font-size .5s var(--ease);
}
.panel:hover .panel__title, .panel:focus-within .panel__title {
  font-size: clamp(1rem, 1.8vw, 1.35rem);
}
/* The panel's full branded name — a huge display headline at rest, filling
   from just below the label down toward the panel's bottom edge (the
   content block is bottom-anchored, so growing its height pushes the
   whole block upward rather than off the panel). Hovering shrinks it, but
   it stays the bigger of the pair — "a bit big", not a caption. */
.panel__subtitle {
  margin-top: .3rem; font-family: 'Fraunces', var(--display); font-weight: 600;
  line-height: 1.02; text-wrap: balance; color: var(--on-dark);
  font-size: clamp(2.1rem, 7vw, 4.5rem);
  transition: font-size .5s var(--ease);
}
.panel:hover .panel__subtitle, .panel:focus-within .panel__subtitle {
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
}

/* Action buttons: collapsed to zero height at rest (not just hidden) so the
   label+name above has nothing reserved below it and sits flush on the
   panel's bottom edge. Hovering (or focusing) expands them back open,
   which — since the content block is bottom-anchored — pushes the whole
   label+name upward at the same time its own font-size transition runs,
   landing it exactly where it already sits once hovered. Kept in normal
   flow (no display:none) so keyboard users tabbing onto a button still
   trigger the expand via :focus-within. */
.panel__actions {
  margin-top: 0; max-height: 0; overflow: hidden; opacity: 0;
  display: grid; gap: .65rem;
  transition: max-height .5s var(--ease), margin-top .5s var(--ease), opacity .35s var(--ease);
}
.panel:hover .panel__actions, .panel:focus-within .panel__actions {
  margin-top: 1.5rem; max-height: 14rem; opacity: 1;
}
/* A caveat sitting right above its action button (currently just Events'
   "no standard price" note) — set apart from the buttons below it rather
   than styled as one of them. */
.panel__notice {
  margin: 0; padding: .55rem .8rem;
  border: 1px dashed color-mix(in srgb, var(--panel-accent) 55%, var(--line-dark));
  background: color-mix(in srgb, var(--panel-accent) 12%, transparent);
  font-size: .78rem; line-height: 1.4; font-style: italic; color: var(--on-dark-mute);
}
.panel__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .8rem 1.2rem; border: 1px solid var(--line-dark);
  background: color-mix(in srgb, var(--ink-deep) 55%, transparent);
  backdrop-filter: blur(6px);
  color: var(--on-dark); text-decoration: none; cursor: pointer;
  font-family: var(--caps); text-transform: uppercase; font-size: .76rem; letter-spacing: .13em;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.panel__btn:hover { border-color: var(--gold); color: var(--gold-lit); }
.panel__btn--primary { background: var(--gold); color: var(--ink-deep); border-color: var(--gold-dim); }
.panel__btn--primary:hover { background: var(--gold-lit); border-color: var(--gold-lit); color: var(--ink-deep); }
.panel__btn--ghost { border-style: dashed; color: var(--on-dark-mute); }
.panel__btn--ghost:hover { color: var(--gold-lit); border-color: var(--gold); }

/* Not-yet-available actions (Room Service, Delivery) — greyed out rather
   than reading as a normal live action, since there's nothing behind them
   yet. Still clickable for the "Coming soon" swap-text feedback below. */
.panel__btn[data-soon] { opacity: .5; color: var(--on-dark-mute); cursor: not-allowed; }
.panel__btn[data-soon]:hover { opacity: .65; border-color: var(--line-dark); color: var(--on-dark-mute); }

/* "Coming soon" swap-text feedback — see home.js */
.panel__btn[data-soon].is-soon-active { pointer-events: none; opacity: .85; }

/* This backup snapshot ships without Room Service / Delivery — their
   buttons stay in place but sit under a permanent "Out of order" stamp
   rather than a live (or even a coming-soon) action. */
.panel__btn--outoforder {
  position: relative; overflow: hidden;
  color: var(--on-dark-mute); opacity: .55; cursor: not-allowed;
  pointer-events: none; user-select: none;
}
.panel__btn-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--ink-deep) 85%, transparent);
  border: 1px solid color-mix(in srgb, #C1495A 60%, var(--line-dark));
  color: var(--on-dark);
  font-family: var(--caps); text-transform: uppercase;
  font-size: .72rem; letter-spacing: .12em;
}

@media (max-width: 860px) {
  .panels { flex-direction: column; padding: 0 clamp(.6rem, 3vw, 1rem) clamp(.6rem, 3vw, 1rem); }
  /* Same equal share, reused for height instead of width. */
  .panels > .panel { flex: none; height: 46svh; }

  /* Neutralize the hover/focus expand-and-dim — mobile is a plain static
     stack, no pointer to hover with anyway. */
  .panels > .panel:hover, .panels > .panel:focus-within { flex-grow: 0; }

  .panel:hover .panel__media, .panel:focus-within .panel__media { scale: 1; }
  .panels:has(.panel:hover) .panel:not(:hover) .panel__media,
  .panels:has(.panel:focus-within) .panel:not(:focus-within) .panel__media { filter: none; }

  /* No pointer to hover with — show the buttons statically, expanded,
     instead of gating them behind :hover/:focus-within like the desktop
     reveal does. */
  .panel__actions { margin-top: 1.5rem; max-height: 14rem; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .panel, .panel__media { transition-duration: .01ms; }
}