/* ============================================================
   ROOMS & RATES — 3D CAROUSEL (index.html)
   A dedicated stylesheet — kept separate from css/style.css so the
   grid-menu.html poster is never touched by this page's rules.
   Reuses the tokens/fonts declared in style.css's :root (loaded
   first). Sharp corners throughout (no border-radius anywhere).
   Card navigation/fullscreen state is driven by js/home.js via the
   data-pos attribute and .is-fullscreen/.has-fullscreen classes —
   CSS only renders whatever state JS sets, it doesn't decide it.
   Single branch (Dasmariñas) — no branch switcher, only the
   carousel/grid view-mode toggle, driven by plain radio+CSS.
   ============================================================ */

:root {
  /* single solid brand red — replaces the multi-color gradient on
     interactive controls (tabs, arrows, links, focus states). */
  --primary: #fc0c15;
  --primary-dark: #c40910;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  margin: 0;
}

body {
  font-family: "Comfortaa", sans-serif;
  background: var(--ktv-bg);
  color: var(--text-on-dark);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.carousel-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background:
    radial-gradient(circle at 50% 0%, rgba(252, 12, 21, .08), transparent 55%),
    var(--ktv-bg);
}

/* PAGE HEADER — back-link left, logo centered, view switcher right, all
   sharing one row so the carousel stage below keeps as much vertical
   room as possible. A 3-column grid (instead of space-between flex)
   keeps the logo truly centered regardless of how wide the back-link
   or view-switcher end up being. */
.page-header {
  flex: 0 0 auto;
  width: 100%;
  max-width: 72rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-2);
}

.back-link {
  justify-self: start;
}

.page-logo-link {
  justify-self: center;
}

.view-switcher {
  justify-self: end;
}

.page-logo {
  flex: 0 0 auto;
  width: clamp(8rem, 13vw, 12rem);
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .5));
}

.view-switcher {
  display: flex;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .02);
}

.switch-tab {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .65em 1.2em;
  font-family: "Comfortaa", sans-serif;
  font-weight: 600;
  font-size: var(--fs-tiny);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-on-dark-muted);
  cursor: pointer;
  border-right: 1px solid var(--line);
  transition: color .2s ease, background-color .2s ease;
}

.view-switcher .switch-tab:last-child {
  border-right: none;
}

.switch-tab:hover {
  color: var(--text-on-dark);
}

main:has(#view-carousel:checked) label[for="view-carousel"],
main:has(#view-grid:checked) label[for="view-grid"] {
  color: #fff;
  background: var(--primary);
}

.branch-view {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
}

/* CAROUSEL STAGE */
.carousel-stage {
  flex: 1 1 auto;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  perspective: 1800px;
}

.carousel-arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-on-dark-muted);
  font-size: 1.1rem;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

.carousel-arrow:hover {
  color: #fff;
  border-color: var(--primary);
  background: var(--primary);
}

.carousel-track {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  max-height: 42rem;
  cursor: grab;
  touch-action: pan-y;
}

.carousel-track.is-dragging {
  cursor: grabbing;
}

.carousel-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(16rem, 25vw, 22rem);
  aspect-ratio: 3 / 4;
  display: block;
  margin: 0;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel-dark);
  font: inherit;
  color: inherit;
  text-align: left;
  transform: translate(-50%, -50%) scale(.78);
  filter: brightness(.5) saturate(.9);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), filter .5s ease, width .5s ease, box-shadow .3s ease;
  z-index: 1;
}

.carousel-card[data-pos="active"] {
  width: clamp(19rem, 30vw, 27rem);
  transform: translate(-50%, -50%) translateZ(50px) scale(1.12);
  filter: brightness(1) saturate(1.05);
  border-color: var(--accent, var(--primary));
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .04) inset;
  z-index: 3;
}

.carousel-card[data-pos="next"] {
  transform: translate(-50%, -50%) translateX(72%) translateZ(-40px) rotateY(-14deg) scale(.8);
  z-index: 2;
}

.carousel-card[data-pos="prev"] {
  transform: translate(-50%, -50%) translateX(-72%) translateZ(-40px) rotateY(14deg) scale(.8);
  z-index: 2;
}

/* Extra cards sharing the "prev" slot when there are more than 3 rooms
   (see js/home.js) — demoted behind the real adjacent-prev card and
   taken out of the click/tab path so they can't swallow its input.
   Scoped to carousel mode only: render() marks these regardless of
   view mode, but grid view lays every card out flat with no overlap,
   so there's nothing to protect against there — leaving pointer-events
   unscoped would just make most grid cards untappable. */
main:has(#view-carousel:checked) .carousel-card.is-buried {
  z-index: 1;
  pointer-events: none;
}

.carousel-card:hover {
  filter: brightness(.7) saturate(1);
}

.carousel-card[data-pos="active"]:hover {
  filter: brightness(1) saturate(1.05);
}

.carousel-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.card-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}

/* status badge — only shown on the active card, so growing the card
   also reveals more information, not just size */
.card-status {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: 2;
  display: none;
  align-items: center;
  gap: .45em;
  padding: .4em .8em;
  background: rgba(6, 4, 8, .85);
  border: 1px solid var(--line);
  font-family: "Comfortaa", sans-serif;
  font-weight: 700;
  font-size: var(--fs-tiny);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-on-dark);
}

.status-dot {
  width: .6em;
  height: .6em;
  flex: 0 0 auto;
  background: var(--primary);
  box-shadow: 0 0 8px var(--primary);
}

.card-status.is-available .status-dot {
  background: #34d17a;
  box-shadow: 0 0 8px #34d17a;
}

.carousel-card[data-pos="active"] .card-status {
  display: flex;
}

.card-expand-hint {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  z-index: 2;
  display: none;
  padding: .35em .7em;
  background: rgba(6, 4, 8, .7);
  border: 1px solid var(--line);
  font-family: "Comfortaa", sans-serif;
  font-weight: 600;
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-on-dark-muted);
}

.carousel-card[data-pos="active"] .card-expand-hint {
  display: block;
}

.card-close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 4;
  display: none;
  align-items: center;
  gap: .4em;
  padding: .6em 1em;
  background: rgba(6, 4, 8, .8);
  border: 1px solid var(--line);
  font-family: "Comfortaa", sans-serif;
  font-weight: 700;
  font-size: var(--fs-tiny);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #fff;
}

.card-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: var(--sp-3) var(--sp-3) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: .25em;
  background: linear-gradient(180deg, transparent, rgba(6, 4, 8, .65) 40%, rgba(6, 4, 8, .95));
}

.card-name {
  font-family: "Comfortaa", sans-serif;
  font-weight: 700;
  font-size: var(--fs-lg);
  letter-spacing: .01em;
  color: #fff;
}

.card-pax,
.card-rate {
  display: none;
  font-family: "Comfortaa", sans-serif;
  font-size: var(--fs-tiny);
  color: var(--text-on-dark-muted);
}

.card-pax {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.card-price {
  display: flex;
  align-items: baseline;
  gap: .3em;
  font-family: "Comfortaa", sans-serif;
  font-weight: 700;
  font-size: var(--fs-md);
  color: #fff;
}

.card-price .check {
  align-self: center;
  font-size: .55em;
  color: var(--accent, var(--primary));
  border: 2px solid var(--accent, var(--primary));
  width: 1.6em;
  height: 1.6em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: .15em;
}

.card-price small {
  font-family: "Comfortaa", sans-serif;
  font-weight: 700;
  font-size: .4em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
}

.card-rate {
  margin-top: .3em;
  padding-top: .5em;
  border-top: 1px dashed var(--line);
}

.card-rate strong {
  font-family: "Comfortaa", sans-serif;
  font-weight: 700;
  color: var(--accent, var(--primary));
  font-size: 1.1em;
}

.carousel-card[data-pos="active"] .card-pax,
.carousel-card[data-pos="active"] .card-rate {
  display: block;
}

/* FULLSCREEN — tapping the active card expands it to fill the
   viewport; tapping again (or Escape) minimizes it back. */
.carousel-card.is-fullscreen {
  position: fixed;
  inset: 0;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  aspect-ratio: auto;
  transform: none;
  filter: none;
  border: none;
  z-index: 999;
  box-shadow: none;
}

.carousel-card.is-fullscreen .card-status,
.carousel-card.is-fullscreen .card-pax,
.carousel-card.is-fullscreen .card-rate {
  display: flex;
}

.carousel-card.is-fullscreen .card-pax {
  display: block;
}

.carousel-card.is-fullscreen .card-expand-hint {
  display: none;
}

.carousel-card.is-fullscreen .card-close {
  display: flex;
}

.carousel-card.is-fullscreen .card-info {
  padding: var(--sp-5) var(--sp-5) var(--sp-5);
}

.carousel-card.is-fullscreen .card-name {
  font-size: clamp(2rem, 5vw, 3.2rem);
}

.carousel-card.is-fullscreen .card-price {
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
}

.page-link {
  flex: 0 0 auto;
  padding: .65em 1.2em;
  border: 1px solid var(--line);
  font-family: "Comfortaa", sans-serif;
  font-weight: 600;
  font-size: var(--fs-tiny);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-on-dark);
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}

.page-link:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* GRID VIEW — flattens the 3D carousel into a plain, evenly sized row of
   cards with everything visible at once (no single "focused" card).
   Only offered above the mobile breakpoint (see the persist-carousel
   query below) — small screens keep the carousel as the only view, so
   the toggle is hidden there and these rules are guarded out entirely,
   regardless of which radio happens to be checked. */
@media (min-width: 761px) and (min-height: 641px) {
  main:has(#view-grid:checked) .carousel-stage {
    perspective: none;
  }

  main:has(#view-grid:checked) .carousel-arrow {
    display: none;
  }

  /* height:100% + overflow-y:auto is a safety net so the grid scrolls
     internally on short viewports instead of the whole page needing to. */
  main:has(#view-grid:checked) .carousel-track {
    display: flex;
    align-content: flex-start;
    gap: var(--sp-3);
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    position: static;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* legacy Edge */
  }

  main:has(#view-grid:checked) .carousel-track::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
  }

  main:has(#view-grid:checked) .carousel-card:not(.is-fullscreen) {
    position: static;
    flex: 1 1 0;
    width: auto;
    transform: none !important;
    filter: brightness(.85) saturate(1) !important;
    z-index: auto !important;
  }

  main:has(#view-grid:checked) .carousel-card[data-pos="active"]:not(.is-fullscreen) {
    filter: brightness(1) saturate(1.05) !important;
  }

  main:has(#view-grid:checked) .card-status,
  main:has(#view-grid:checked) .card-rate {
    display: flex !important;
  }

  main:has(#view-grid:checked) .card-pax {
    display: block !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-card {
    transition: none;
  }
}

/* Small screens keep the real 3D carousel (swipe + peeking next/prev
   cards) instead of falling back to a flat list — only the sizing
   shrinks. Card width is bounded by min(vw, vh) so it shrinks whichever
   dimension is tighter: a narrow phone (small vw) and a short desktop
   window (small vh) both stay legible and fit with no page scroll. The
   view switcher is hidden and the grid-view rules are guarded out above
   (min-width/min-height), so carousel is the only view on small screens. */
@media (max-width: 760px), (max-height: 640px) {
  .carousel-page {
    padding: var(--sp-2) var(--sp-3);
  }

  /* Height-driven instead of width-driven: on a short landscape phone a
     width-based clamp doesn't know to shrink, and a near-square logo
     would eat a fixed chunk of the scarce vertical budget no matter how
     little of it there is. Sizing off vh instead means the logo — and
     by extension the space it leaves for the card below — scales with
     whichever dimension is actually tight. */
  .page-logo {
    width: auto;
    height: clamp(2.5rem, 9vh, 5rem);
  }

  .carousel-stage {
    gap: var(--sp-2);
  }

  /* The peeking next/prev cards can extend into where the arrow buttons
     sit at narrow widths — rather than fight that overlap, drop the
     arrows here. Swipe and tapping the peeking card itself (already
     wired in js/home.js) remain fully functional as the nav method. */
  .carousel-arrow {
    display: none;
  }

  /* max-width + max-height + aspect-ratio (rather than a vh-guessed
     width) lets the card size itself against whichever dimension is
     actually tighter. max-height resolves against .carousel-track's
     real rendered height — the space left over after the header/link
     chrome and gaps are laid out — so it self-corrects for any chrome
     size instead of needing to predict it via vh. :not(.is-fullscreen)
     keeps this from fighting the tap-to-preview state below, which
     needs to fill the full viewport, not the card's usual box. */
  .carousel-card:not(.is-fullscreen) {
    width: auto;
    min-width: 8rem;
    max-width: 56vw;
    max-height: 78%;
  }

  .carousel-card[data-pos="active"]:not(.is-fullscreen) {
    width: auto;
    min-width: 9rem;
    max-width: 66vw;
    max-height: 92%;
  }

  .carousel-card[data-pos="next"] {
    transform: translate(-50%, -50%) translateX(58%) translateZ(-40px) rotateY(-14deg) scale(.8);
  }

  .carousel-card[data-pos="prev"] {
    transform: translate(-50%, -50%) translateX(-58%) translateZ(-40px) rotateY(14deg) scale(.8);
  }

  /* the status badge and expand hint can collide on narrow cards —
     give each a hard cap and let the status badge truncate instead of
     overlapping the hint. */
  .card-status {
    max-width: 62%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .card-expand-hint {
    font-size: .58rem;
    padding: .3em .55em;
  }

  /* view-switcher is hidden below, so only back-link + logo remain —
     keep them on one compact row (instead of the desktop 3-column grid
     stacking each visible item onto its own row) to leave the carousel
     stage as much vertical room as possible. */
  .page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
  }

  /* Grid view is desktop-only — abolish the toggle on small screens so
     carousel is the only option. */
  .view-switcher {
    display: none;
  }
}