@font-face {
  font-family: 'Bethany Elingston';
  src: url('./fonts/BethanyElingston.woff2') format('woff2'),
    url('./fonts/BethanyElingston.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Red Hat Display';
  src: url('./fonts/RedHatDisplay-Medium.woff2') format('woff2'),
    url('./fonts/RedHatDisplay-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Red Hat Display';
  src: url('./fonts/RedHatDisplay-Bold.woff2') format('woff2'),
    url('./fonts/RedHatDisplay-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Red Hat Display';
  src: url('./fonts/RedHatDisplay-Regular.woff2') format('woff2'),
    url('./fonts/RedHatDisplay-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Red Hat Display';
  src: url('./fonts/RedHatDisplay-Light.woff2') format('woff2'),
    url('./fonts/RedHatDisplay-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Creato Display';
  src: url('./fonts/CreatoDisplay-ExtraBold.woff2') format('woff2'),
    url('./fonts/CreatoDisplay-ExtraBold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Creato Display';
  src: url('./fonts/CreatoDisplay-Medium.woff2') format('woff2'),
    url('./fonts/CreatoDisplay-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Creato Display';
  src: url('./fonts/CreatoDisplay-Bold.woff2') format('woff2'),
    url('./fonts/CreatoDisplay-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Creato Display';
  src: url('./fonts/CreatoDisplay-Regular.woff2') format('woff2'),
    url('./fonts/CreatoDisplay-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Creato Display';
  src: url('./fonts/CreatoDisplay-Black.woff2') format('woff2'),
    url('./fonts/CreatoDisplay-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* THEME */
  --bg: #000;
  --accent: #00e6ff;

  /* GALLERY LAYOUT (help)
     - Use the column variables to control how many cards per row at each size.
     - Change the breakpoints below if your screens differ.
     - --grid-gap controls spacing between cards.
  */
  --cols-mobile: 2;
  /* phones: min resolution */
  --cols-tablet: 4;
  /* tablets */
  --cols-desktop: 5;
  /* large screens: max */
  --grid-gap: 16px;
  /* space between cards */
  --map-max-width: 960px;
}

html,
body {
  height: 100%;
  margin: 0;
  /* Use map texture instead of flat black */
  background: white;
  color: black;
  font-family: 'Creato Display', sans-serif;
  /* Use normal block flow so header doesn't appear in the middle while content loads */
  display: flex;
  flex-direction: column;
  /* Allow scrolling when there are many cards */
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  /* smooth iOS scrolling */
  /* Hide stray text caret that can appear after modal interactions */
  caret-color: transparent;
}

/* Credit names: ensure consistent appearance and readable size */
#juan-gonzalez,
.info-frame a[href*="chela.agenda"], #juana-tenembaum {
  color: black; /* visible on idle */
  text-decoration: none; /* no underline by default */
  display: inline-block;
  transition: background-color 160ms ease, color 160ms ease;
  /*padding: 2px 8px; /* keep padding constant to avoid movement on hover */
  border-radius: 0; /* square corners */
  box-sizing: border-box;
  font-weight: 500;
  font-style: italic;
  font-size: 16px; /* ensure both names render at 16px */
}

/* Credit link should be plain inline text in the credits column — remove button-like padding */
.info-frame .info-column a#juan-gonzalez {
  padding: 0 !important;
  display: inline;
}

#juan-gonzalez:hover,
#juan-gonzalez:focus,
.info-frame a[href*="chela.agenda"]:hover,
.info-frame a[href*="chela.agenda"]:focus {
  color: white; /* white text on dark bg */
  background-color: black;
  text-decoration: none; /* remove underline on hover */
  border-radius: 0; /* keep square */
  outline: none;
}

/* Remove padding specifically for the inline @chela.agenda link in the intro paragraph
   so it doesn't get the button-like padding applied to the credit links below. */
.info-frame p a[href*="chela.agenda"] {
  padding: 0 !important;
  display: inline; /* ensure no inline-block spacing */
}

/* Particle canvas fills background */
#particleCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  /* ensure full viewport coverage */
  height: 100vh;
  z-index: 0;
  /* Do not intercept clicks or scroll */
  pointer-events: none;
}

/* Header bar in document flow (not overlay). Three parts: left buttons, center title, right button */
header.site-header {
  position: sticky;
  /* stay visible when scrolling */
  top: 0;
  /* stay in flow */
  z-index: 40;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  box-sizing: border-box;
  /* Keep header readable – stays solid; not replaced with map */
  background: rgba(255, 255, 255, 0);
}

.header-left,
.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-title {
  margin: 0;
  flex: 1 1 auto;
  /* take remaining space so text can center */
  text-align: center;
  font-size: clamp(16px, 2.4vw, 22px);
  font-family: 'Creato Display', 'Red Hat Display', system-ui, sans-serif;
  font-weight: 700;
}

.site-title a {
  color: black;
  text-decoration: none;
}

/* Keep content clear of the fixed header using simple padding on <main>.
   - Edit the padding-top value if you change the button size or spacing.
   - This avoids the first row of cards being cut under the header,
     even when the browser isn't in full screen. */
main {
  padding-top: 0;
  background: transparent;
  color: #000;
  height: auto;
  flex: 1;
  overflow-y: auto;
}

.ambient-toggle,
.close-btn {
  background: transparent;
  border: 1px solid black;
  color: black;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Creato Display', sans-serif;
}

/* Header icon sizing: keep icon proportional to other header buttons */
.header-icon {
  display: block;
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.header-right .ambient-toggle .header-icon,
.header-left .ambient-toggle .header-icon {
  /* slightly smaller on very small screens */
  width: 16px;
  height: 16px;
}

.ambient-toggle:disabled {
  opacity: 0.45;
  cursor: default;
}

.ambient-toggle:hover {
  background: rgba(255, 60, 0, 0.3);
}

.start-btn:hover {
  background: rgba(255, 60, 0, 0.3);
}

.close-btn:hover {
  background: rgba(255, 60, 0, 0.2);
}

/* (Removed header overrides) header stays on dark background; default button styles apply */

.grid {
  /* Grid/Flex help: we use CSS Grid for a strict number of columns per breakpoint.
     Adjust --cols-* above to change counts; tweak breakpoints below as needed. */
  display: grid;
  grid-template-columns: repeat(var(--cols-desktop), 1fr);
  gap: var(--grid-gap);
  align-items: start;
  width: 100%;
  padding: 24px 24px 600px 24px;
  /* extra bottom padding for scroll space */
  box-sizing: border-box;
  z-index: 5;
  max-width: 1600px;
  /* center the grid on large screens */
  margin: 0 auto;
}

.is-hidden {
  display: none !important;
}

.back-button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Main view containers */
.map-page,
.room-page,
.schedule-page,
.main-menu-page,
.choose-map-page {
  padding: 28px 24px 32px;
  box-sizing: border-box;
  gap: 24px;
  align-items: center;
  justify-content: center;
  display: none;
  width: 100%;
  min-height: 100%;
  position: relative;
  z-index: 5;
}

.map-page,
.schedule-page {
  justify-content: flex-start;
  align-items: center;
  padding-top: 48px;
  padding-bottom: 48px;
}

body.view-room .room-page,
body.view-schedule .schedule-page,
body.view-menu .main-menu-page,
body.view-chooseMap .choose-map-page,
body.view-plantaAltaMap #plantaAltaMapPage,
body.view-plantaBajaMap #plantaBajaMapPage,
body.view-subsueloMap #subsueloMapPage {
  display: flex;
  flex-direction: column;
}

body:not(.view-room) .room-page,
body:not(.view-schedule) .schedule-page,
body:not(.view-menu) .main-menu-page,
body:not(.view-chooseMap) .choose-map-page,
body:not(.view-plantaAltaMap) #plantaAltaMapPage,
body:not(.view-plantaBajaMap) #plantaBajaMapPage,
body:not(.view-subsueloMap) #subsueloMapPage {
  display: none;
}

.map-page-header,
.schedule-page-header,
.room-page-header {
  text-align: center;
  max-width: 760px;
  width: min(960px, 92vw);
  margin: 0 auto 16px;
  color: #000;
}

.map-page-header h2,
.schedule-page-header h2,
.room-page-header h2 {
  margin: 0 0 8px 0;
  font-size: clamp(22px, 3vw, 34px);
}

.map-page-header p,
.schedule-page-header p,
.room-page-header p {
  margin: 0;
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.5;
}

.map-wrapper {
  position: relative;
  width: min(var(--map-max-width, 960px), 92vw);
  margin: 0 auto;
  border-radius: 14px;
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.18);
  background: #f4f4f4dc;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.map-base {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
}

.map-wrapper.is-constrained .map-base {
  height: 100%;
  max-height: 100%;
  object-fit: contain;
}

.choose-map-page {
  gap: 32px;
  text-align: center;
}

.choose-map-options {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: auto;
  align-items: center;
}

.map-choice-btn {
  width: auto;
  transition: background 0.2s ease;
}

.map-hotspots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-family: 'Creato Display', sans-serif;
}

.map-room {
  position: absolute;
  pointer-events: auto;
  /*border: 2px solid var(--room-color, rgba(0, 230, 255, 0.7));
  background: var(--room-rest, rgba(0, 230, 255, 0.18));*/
  color: #000;
  /*border-radius: 12px;*/
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  font-size: clamp(13px, 1.4vw, 16px);
  letter-spacing: 0.2px;
}

.map-room span {
  pointer-events: none;
}

.map-room:hover,
.map-room:focus-visible {
  /* no transform/zoom on hover - keep visual feedback subtle */
  transform: none;
  background: var(--room-hover, rgba(0, 230, 255, 0.42));
  box-shadow: none;
  outline: none;
}

.map-room:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}

.map-room[data-empty="true"] {
  opacity: 0.55;
}

.empty-room-message {
  text-align: center;
  font-size: 15px;
  background: rgba(0, 0, 0, 0.04);
  padding: 12px 16px;
  border-radius: 10px;
  margin: 0 auto;
  max-width: 540px;
}

.room-page .grid {
  padding-top: 0;
}

/* Main menu page */
.main-menu-page {
    display: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
  position: relative;
  z-index: 5;
}

.menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: auto;
    align-items: center;
}

.menu-btn,
.map-choice-btn,
.start-btn {
    background: transparent;
    border: 1px solid black;
    color: black;
    padding: 18px;
    border-radius: 10px;
    cursor: pointer;
    font-family: 'Creato Display', sans-serif;
    font-size: 20px;
    font-weight: 500;
    transition: background 0.2s ease;
    width: auto;
}

.menu-btn:hover,
.menu-btn:focus-visible,
.map-choice-btn:hover,
.map-choice-btn:focus-visible,
.start-btn:hover {
  background: rgba(255, 60, 0, 0.3);
}

/* Schedule page */
.schedule-page-header {
    text-align: center;
  max-width: 760px;
  width: min(960px, 92vw);
  margin: 0 auto 24px;
}

.schedule-page-header h2 {
    margin: 0 0 8px 0;
    font-size: clamp(22px, 3vw, 34px);
}

.schedule-page-header p {
    margin: 0;
    font-size: clamp(14px, 1.6vw, 16px);
    line-height: 1.5;
}

#scheduleContainer {
  width: min(960px, 92vw);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  color: #000;
}

.schedule-day {
  background: #fff;
  border-radius: 12px;
  padding: 16px 20px;
}

/* Center schedule table and make it adapt to device width */
.schedule-table {
  width: min(900px, 100%);
  margin: 0 auto;
  border-collapse: collapse;
  border-spacing: 0;
}

.schedule-table th,
.schedule-table td {
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

/* On very narrow viewports keep table fluid but centered */
@media (max-width: 420px) {
  .schedule-table {
    width: 100%;
    margin: 0 auto;
  }
}

/* Very small devices: only reduce schedule font-size by ~2px; avoid using flex
   or additional layout overrides so styling remains simple and predictable. */
@media (max-width: 400px) {
  /* Use calc against 1rem so the result is ~2px smaller than the root size.
     This reduces all table text without adding layout/spacing overrides. */
  .schedule-table,
  .schedule-table th,
  .schedule-table td {
    font-size: calc(1rem - 2px);
  }
}

.schedule-date {
  margin: 0 0 12px;
  font-size: 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 8px;
}

.schedule-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.schedule-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 12px;
  align-items: start;
}

.schedule-time {
  font-weight: bold;
}

.schedule-title {
  font-weight: 500;
}

.schedule-description {
  grid-column: 2 / 3;
  font-size: 14px;
  color: #333;
  margin: -8px 0 0;
  padding: 0;
}

.card {
  width: 100%;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform 220ms, box-shadow 220ms;
  background: white;
  aspect-ratio: 1 / 1;
}

.card:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 0 15px rgba(0, 149, 255, 0.35));
}

.card img {
  width: 100%;
  height: 100%;
  /* aspect ratio comes from parent card */
  display: block;
  object-fit: cover;
  border-radius: 12px;
  /* card provides rounding */
  /* Use map texture instead of flat black while image loads */
  background: black;
  /* keep black while loading */
  opacity: 0;
  /* hide until the real image has loaded */
  transition: opacity 0.3s ease, transform 0.4s ease, filter 0.4s ease;
}

/* Reveal thumbnail only after JS adds .loaded on the <img> load event */
.card img.loaded {
  opacity: 1;
}

/* Title overlay on hover/focus */
.card-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /*top: 0;*/
  padding: 8px 10px 10px;
  color: #fff;
  text-align: center;
  font-family: 'Creato Display', sans-serif;
  font-size: clamp(12px, 1.5vw, 12px);
  font-weight: 600;
  letter-spacing: 0.2px;
  /*background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.0));*/
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 160ms ease, transform 180ms ease;
  pointer-events: none;
  /* avoids blocking clicks */
  z-index: 2;
}

.card:hover .card-title,
.card:focus-within .card-title {
  opacity: 1;
  transform: translateY(0);
}

.video-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  z-index: 60;
}

.video-modal.open {
  display: flex;
}

.video-frame {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* prevent centering while video loads */
  /* reserve final width via a cap; let content size naturally */
  max-width: 80vw;
  max-height: calc(100vh - 160px);
  max-height: calc(100dvh - 160px);
  height: auto;
  /* Use map texture with a subtle dark veil for readability */
  background: white;
  border-radius: 8px;
  /* Disable internal scrolling: content should resize to fit the frame */
  overflow: visible;
  -webkit-overflow-scrolling: auto;
}

.tag.map-btn {
  background: rgba(255, 60, 0, 0.15);
  border: 1px solid rgba(255, 60, 0, 0.3);
  color: black;
}

.tag.map-btn:hover {
  background: rgba(255, 60, 0, 0.35);
}

/* Info modal layout */
.info-frame {
  position: relative;
  background: white;
  color: black;
  border-radius: 10px;
  /* increase bottom padding so external close button doesn't overlap content */
  padding: 20px 22px 96px;
  width: min(720px, 92vw);
  /*box-shadow: 0 0 40px rgba(0, 149, 255, 0.35);*/
  max-width: 70%;
}

.info-frame h2 {
  margin: 8px 0 10px;
  font-size: 22px;
}

.info-frame p {
  margin: 8px 0;
  line-height: 1.5;
}

/* Two-column layout for the info modal's small attribution blocks
   Use flex for responsiveness; each column behaves like an inline-block
   on larger viewports while stacking on narrow screens. */
.info-frame .info-columns {
  display: flex;
  /* small gutter between the two columns (like a table gutter) */
  gap: 8px;
  align-items: flex-start;
  flex-wrap: nowrap; /* keep columns on one row when possible */
  margin-top: 4px;
}
.info-frame .info-column {
  display: inline-block;
  vertical-align: top;
  flex: 0 0 auto;
  padding-right: 28px; /* emulate a table gutter */
  min-width: 140px;
}
.info-frame .info-column h3 {
  margin: 0 0 2px; /* tighter spacing between heading and name */
  font-size: 15px;
  display: block;
}
.info-frame .info-column p,
.info-frame .info-column a {
  margin: 0;
  padding: 0;
  line-height: 1.2; /* more compact lines */
}

@media (max-width: 520px) {
  .info-frame .info-column { flex-basis: 100%; }
}

#player {
  width: 100%;
  height: auto;
  /* Reduce max-height so room remains for clip info and tags without scrolling */
  max-height: 50vh;
  aspect-ratio: auto;
  /* reserve space so layout doesn't jump */
  background: black;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: opacity 0.4s;
  opacity: 1;
}

#player.fade-out {
  opacity: 0;
}

.fade-overlay {
  position: fixed;
  inset: 0;
  /* Fade overlay now uses a dark veil over map */
  background:
    linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)),
    url('img/map.png') center center / cover no-repeat;
  animation: fadeIn 0.4s forwards;
  z-index: 200;
}

.fade-overlay.fade-out {
  animation: fadeOut 0.4s forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* ---- video info section ---- */
.video-info {
  position: relative;
  /* bottom: 0;
  left: 0; */
  width: 100%;
  height: auto;
  /* don't stretch to full frame height */
  background: white;
  color: black;
  text-align: left;
  padding: 12px 16px 16px;
  font-size: 13px;
  box-sizing: border-box;
  font-family: 'Creato Display', sans-serif;
  font-weight: normal;
  /* Ensure the info area doesn't create an inner scroll — allow it to wrap and expand */
  overflow: visible;
  max-height: none;
}

.video-info h2 {
  margin: 0 0 2px;
  font-size: 16px;
  font-family: 'Creato Display', sans-serif;
  font-weight: bold;
}

.video-info h3 {
  margin: 0 0 6px;
  font-size: 14px;
  font-family: 'Creato Display', sans-serif;
  font-weight: normal;
  color: #555;
}

.tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

/* Push the Mapa tag button to the far right within the info bar */
.tag-container .map-btn {
  margin-left: auto;
}

.tag {
  background: rgba(0, 230, 255, 0.15);
  border: 1px solid rgba(0, 230, 255, 0.3);
  border-radius: 6px;
  padding: 3px 6px;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.2s;
  font-family: 'Creato Display', sans-serif;
}

.tag:hover {
  background: rgba(0, 230, 255, 0.35);
}

/* ---- noisy lowres background overlay ---- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.10;
  z-index: 1;
  mix-blend-mode: overlay;
  image-rendering: pixelated;
}

.close-btn {
  position: absolute;
  top: auto;
  right: auto;
  border: none;
  background: white;
  color: black;
  font-size: 18px;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  z-index: 80;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Close button for Video Modal: Fixed at bottom center of viewport */
#closeVideo {
  position: fixed;
  top: auto;
  right: auto;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
}

/* Close button for Info Modal: Absolute at bottom center of the card */
#closeInfo {
  /* Place the close button fully outside the info card (below it),
     without overlapping the panel. Keep it centered under the card. */
  position: absolute;
  top: auto;
  right: auto;
  bottom: -72px; /* moved further below the card to avoid overlap */
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Info modal positioning override */
#infoModal {
  align-items: flex-start;
  padding-top: 25vh;
}

/* Remove default focus outline/blue ring for the info panel and its container
   so the panel doesn't show a browser-specific focus ring when opened. */
#infoModal:focus,
#infoModal:focus-visible,
.info-frame:focus,
.info-frame:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.close-btn h2 {
  text-align: center;
}

.start-overlay {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
  /* no dark veil — shows only over the background animation */
  z-index: 50;
  text-align: center;
}

.start-overlay p {
  margin: 0px 0px 36px 0px;
  color: black;
}

body.view-start .start-overlay {
    display: flex;
}

body:not(.view-start) .start-overlay {
    display: none;
}

/* While locked (before pressing Start), hide the page UI so the overlay sits only above the background canvas */
body.view-start .site-header,
body.view-start main > .view {
  display: none;
}

/* responsive gallery spacing */
.grid {
  padding: 24px;
}

/* MEDIA QUERIES: fixed column counts by device class */
/* Phones (min resolution): 2 columns */


/* Extra small devices (e.g., very small phones like 300x600 or iPhone SE) */
@media (max-width: 360px) {
  /* Reduce map-room label and button text to fit tiny widths */
  .map-room {
    font-size: 8px !important;
    padding: 6px 8px !important;
    font-weight: 200 !important;
  }
  .map-room .map-room-label,
  .map-room > span {
    font-size: 7px !important;
    font-weight: 200 !important;
    white-space: normal;
    word-break: break-word;
    padding: 4px 6px;
    line-height: 1.05;
  }

  /* Header: make title and buttons slightly smaller on tiny screens */
  .site-title { font-size: 14px !important; }
  .ambient-toggle, .close-btn, .menu-btn, .map-choice-btn, .start-btn {
    padding: 8px 12px !important;
    font-size: 14px !important; /* 1px smaller than typical */
  }

  /* Gallery: keep CSS Grid layout on very small screens so we can control
     placement via grid-column-start from JS. Show two logical columns so
     cards are large and consistent with medium-mobile appearance. */
  .grid {
    display: grid !important;
    grid-template-columns: repeat(1, 1fr) !important;
    gap: calc(var(--grid-gap) * 0.8) !important;
    padding: 8px !important;
    justify-items: center;
  }
  .grid .card {
    width: 100%;
    max-width: 92%;
    box-sizing: border-box;
  }

  /* If gallery is flagged .few-projects, it uses the same grid sizing
     but the JS will set grid-column-start to center the items. */
  .grid.few-projects { display: grid !important; grid-template-columns: repeat(2,1fr) !important; gap: calc(var(--grid-gap) * 0.8); }
  .grid.few-projects .card { width: 100%; max-width: 92%; }

  /* Override tecnico label transform on mobile (per request) */
  .map-room[data-room-id="room-tecnico"] .map-room-label {
    transform: translateY(-12px) !important;
  }
}

/* Short viewports: ensure info modal fits when the available height is small
   (e.g. mobile devices with height < 800px). Pin the modal toward the top,
   reduce vertical spacing and slightly reduce text so the whole card can
   be visible without the page itself scrolling. */
@media (max-height: 800px) {
  /* ensure the overlay aligns to the top area so the card is visible */
  #infoModal { align-items: flex-start; padding-top: 4vh; padding-bottom: 4vh; }

  .info-frame {
    width: min(680px, 94vw);
    max-width: 94vw;
    /* cap height to viewport minus small margins so the frame itself
       always sits fully inside the screen */
    max-height: calc(100vh - 32px);
    box-sizing: border-box;
    padding: 10px 12px 64px;
    overflow: auto; /* allow internal scroll only when absolutely needed */
    margin: 6px auto;
  }

  /* Slightly reduce heading and body sizes to help fit content */
  .info-frame h2 { font-size: 20px; margin-bottom: 6px; }
  .info-frame p { font-size: 14px; line-height: 1.36; }

  /* Stack columns and keep them compact */
  .info-frame .info-columns { flex-direction: column; gap: 6px; }
  .info-frame .info-column { padding-right: 0; min-width: 0; }

  /* Keep the close button centered near the bottom of the viewport on
     short viewports. Use fixed positioning so it remains visible even
     if the card shifts. */
  #closeInfo {
    position: fixed;
    bottom: 44px;
    left: 50%;
    transform: translateX(-50%);
    width: 38px;
    height: 38px;
    z-index: 320;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
  }
}

/* Make map-room labels allowed to overlap their buttons globally */
.map-room {
  overflow: visible; /* allow labels/images to extend outside */
}

/* Ensure labels themselves do not wrap as flex children (prevent multi-line flex wrap) */
.map-room .map-room-label {
  flex-wrap: nowrap;
  white-space: nowrap; /* enforce single line */
  word-break: normal;
}

/* When rotate overlay is visible, block header interactions fully */
body.show-rotate .site-header {
  pointer-events: none !important;
  user-select: none !important;
}

/* Per-room tecnico overrides removed so galleries use the default
   `.grid`/.card sizing (same behavior as room-taller). */

@media (max-width: 450px) {
  .grid {
    grid-template-columns: repeat(var(--cols-mobile), 1fr);
  }

  :root {
    --grid-gap: 10px;
  }

  .video-frame {
    max-width: 80vw;
  }

  #player {
    max-height: 60vh;
  }

  /* Replace header Mapa y Programación text with an icon on mobile */

  /* Slightly reduce map label and room text on small phones */
  .map-room {
    font-size: 11px;
    padding: 8px 10px;
    font-weight: 200;
  }
  .map-room .map-room-label,
  .map-room > span {
    font-size: 7px;
    font-weight: 200;
  }
}

/* Slightly larger phones but still mobile: keep labels smaller than desktop */
@media (min-width: 361px) and (max-width: 768px) {
  /* Reduce label font-size by 2px (was 11px) for this breakpoint */
  .map-room { font-size: 10px; font-weight: 200; }
  .map-room .map-room-label, .map-room > span { font-size: 8px; font-weight: 200; }
  .site-title { font-size: 16px; }
  .ambient-toggle, .close-btn, .menu-btn, .map-choice-btn, .start-btn { padding: 9px 14px; font-size: 15px; }
  /* For few-projects on small tablets/phones, show 2 columns layout for readability */
  .grid.few-projects .card { flex: 0 0 calc(50% - (var(--grid-gap) * 0.6)); max-width: calc(50% - (var(--grid-gap) * 0.6)); }
}

/* Tablets: 4 columns */
@media (min-width: 451px) and (max-width: 1241px) {
  .grid {
    grid-template-columns: repeat(var(--cols-tablet), 1fr);
  }

  :root {
    --grid-gap: 14px;
  }

  .video-frame {
    max-width: 80vw;
  }

}

/* Desktops and larger: 8 columns (max) */
@media (min-width: 1242px) {
  .grid {
    grid-template-columns: repeat(var(--cols-desktop), 1fr);
  }

  :root {
    --grid-gap: 16px;
  }

}

/* Widescreen / TV: allow map wrappers to become larger and use more of the viewport */
@media (min-width: 1600px) {
  :root { --map-max-width: 1400px; }
  .map-wrapper {
    width: min(var(--map-max-width), 96vw);
  }
}

/* When gallery has few projects, present fewer columns and larger cards */
.grid.few-projects {
  /* Switch to a centered flex layout when there are few projects so
     items are not stretched across the whole page. The JS sets
     --few-cols to 3 for 1–3 projects; width calculation below uses
     that value as a target column count. */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: calc(var(--grid-gap) * 1.25);
  max-width: 1200px;
  margin: 0 auto;
}

.grid.few-projects .card {
  /* Each card should take approximately 1/--few-cols of the available
     width but allow a sensible min so cards don't become too small. */
  flex: 0 0 calc((100% / var(--few-cols, 3)) - (var(--grid-gap) * 0.66));
  max-width: calc((100% / var(--few-cols, 3)) - (var(--grid-gap) * 0.66));
}

@media (min-width: 768px) {
  .grid.few-projects .card {
    flex: 0 0 calc((100% / var(--few-cols, 3)) - (var(--grid-gap) * 0.5));
    max-width: calc((100% / var(--few-cols, 3)) - (var(--grid-gap) * 0.5));
  }
}

@media (min-width: 1242px) {
  .grid.few-projects .card {
    flex: 0 0 calc((100% / var(--few-cols, 3)) - (var(--grid-gap) * 0.4));
    max-width: calc((100% / var(--few-cols, 3)) - (var(--grid-gap) * 0.4));
  }
}

/* interactive area around cards for closing modal */
.video-modal {
  align-items: center;
  justify-content: center;
}

.video-modal .video-frame {
  z-index: 210;
}

/* Hotspot image + label styling: makes room PNGs fill the colored area
   and displays a small label overlay for readability. */
.map-room {
  overflow: hidden; /* ensure image doesn't escape button area */
}

.map-room .room-map-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
  transition: transform 260ms ease, opacity 220ms ease;
  pointer-events: none;
}

.map-room .map-room-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000; /* default: black */
  z-index: 3;
  pointer-events: none;
  font-size: 13px;
  font-weight: 200;
  text-align: center;
}

.map-room:hover .room-map-img {
  /* keep image static on hover to avoid seams shifting */
  transform: none;
}

/* When no image is provided the existing span remains visible and above the
   background; ensure it stays above images when present. */
.map-room > span {
  box-sizing: border-box;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  pointer-events: none;
  font-size: 13px;
  font-weight: 200;
}

.map-room .room-map-img { box-sizing: border-box; }


/* Image-backed hotspots: remove colored backgrounds, borders, shadows and
   rounded corners so PNGs can fully define the visual. Padding is removed
   to make the image area match the button's geometry exactly. */
.map-room.has-img {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.map-room.has-img:hover,
.map-room.has-img:focus-visible {
  /* Keep visual feedback subtle for image-backed hotspots. No overlay.
     Keep transform/box-shadow disabled for seam stability. */
  background: transparent !important;
  transform: none !important;
  box-shadow: none !important;
}

/* change label/text color on hover as requested */
.map-room:hover > span,
.map-room:hover .map-room-label,
.map-room.has-img:hover > span,
.map-room.has-img:hover .map-room-label {
  color: rgba(255,60,0,1); /* orange on hover */
}

.map-room.has-img .map-room-label {
  left: 6px;
  right: 6px;
  bottom: 6px;
}

/* Disable hover/focus visual changes for the static Patio Sur element
   on the Planta Baja map. The element remains in the DOM for visual
   parity but should not show hover highlights. We target the non-
   interactive instance (which has `aria-hidden="true"` set in JS). */
.map-room[data-room-id="room-patio-sur"][aria-hidden="true"]:hover,
.map-room[data-room-id="room-patio-sur"][aria-hidden="true"]:focus {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  outline: none !important;
}
.map-room[data-room-id="room-patio-sur"][aria-hidden="true"]:hover > span,
.map-room[data-room-id="room-patio-sur"][aria-hidden="true"]:hover .map-room-label,
.map-room[data-room-id="room-patio-sur"][aria-hidden="true"]:focus > span,
.map-room[data-room-id="room-patio-sur"][aria-hidden="true"]:focus .map-room-label {
  color: inherit !important;
}

/* Ensure image-backed hotspots allow their labels to overflow the button
   area so long labels can sit over transparent PNG space instead of
   being clipped by the button box. Use !important to override any
   previous constraints set for small-view or fallback states. */
.map-room.has-img {
  overflow: visible !important;
}
.map-room.has-img .map-room-label,
.map-room.has-img > span {
  overflow: visible !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
  z-index: 999; /* keep labels on top of other map elements */
  pointer-events: none; /* labels shouldn't intercept pointer events */
}

/* Desktop and large tablet tweak: reduce label size and allow overlap so
   labels can use transparent PNG space without being clipped. This fixes
   misaligned/misaligned labels when the page is not in full-screen.
*/
@media (min-width: 1024px) {
  .map-room.has-img {
    overflow: visible !important;
  }
  .map-room .map-room-label,
  .map-room > span {
    font-size: 12px; /* slightly smaller on desktop to avoid wrapping */
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    z-index: 6; /* lift above other elements */
    font-weight: 200;
  }
}

/* Rotate specified room labels vertically for screens narrower than 1600px.
   This keeps the map layout readable and lets long labels use vertical
   space without being clipped by hotspot boxes. Adjusts position to
   center the rotated label inside its hotspot; per-room offsets can
   still be applied via `labelOffset` in `ROOM_DEFINITIONS` if needed. */
@media (max-width: 1599px) {
  .map-room[data-room-id="room-tecnico"] .map-room-label,
  .map-room[data-room-id="room-nomade"] .map-room-label,
  .map-room[data-room-id="room-planetario"] .map-room-label,
  .map-room[data-room-id="room-patio-sur"] .map-room-label,
  .map-room[data-room-id="room-app"] .map-room-label {
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) rotate(-90deg) !important;
    transform-origin: center center !important;
    white-space: nowrap !important;
    overflow: visible !important;
    padding: 0 6px !important;
    z-index: 999 !important;
    font-weight: 200 !important;
  }

  /* Nudge tecnico slightly up so its rotated label sits 2px higher */
  .map-room[data-room-id="room-tecnico"] .map-room-label {
    transform: translate(-50%, calc(-50% - 4px)) rotate(-90deg) !important;
  }
}

/* Prevent map-room labels from wrapping and breaking words on most
   viewports so labels remain single-line and respect the hotspot shape.
   Extreme tiny devices (<=360px) allow wrapping and smaller font elsewhere. */
.map-room .map-room-label,
.map-room > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 6px;
  padding-right: 6px;
}

/* Tablet and desktop: prefer single-line labels with ellipsis to avoid
   vertical wrapping inside hotspot buttons at mid and large widths. */
@media (min-width: 451px) and (max-width: 1241px) {
  .map-room .map-room-label,
  .map-room > span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (min-width: 1242px) {
  .map-room .map-room-label,
  .map-room > span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Landscape small phones: reduce label size and keep single-line truncation */
/* Small phones: allow labels to overflow the hotspot area so the text
   can occupy adjacent blank space in the PNG and avoid being cut off.
   Also allow wrapping on very small widths so full names can be shown. */
@media (max-width: 400px) {
  .map-room {
    overflow: visible !important;
  }

  .map-room .map-room-label,
  .map-room > span {
    /* keep label on a single line and avoid breaking letters */
    white-space: nowrap !important;
    word-break: normal !important;
    overflow: visible !important; /* allow overflowing into blank PNG area */
    text-overflow: ellipsis !important;
    font-size: 10px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    line-height: 1.05 !important;
  }

  /* Nudge patio sur lower so its label sits fully inside visible area */
  .map-room[data-room-id="room-patio-sur"] .map-room-label {
    transform: translateY(14px) !important;
  }

  /* Allow the room button to extend visually outside its box so text
     can overlap adjacent transparent/blank PNG space. */
  .map-room.has-img { overflow: visible !important; }
}

/* Landscape small phones: keep labels readable, allow overflow and wrapping */
@media (max-width: 568px) and (orientation: landscape) {
  .map-room {
    overflow: visible !important;
  }
  .map-room .map-room-label,
  .map-room > span {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow: visible !important;
    font-size: 9px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    line-height: 1.05 !important;
    font-weight: 200 !important;
  }

  .map-room[data-room-id="room-patio-sur"] .map-room-label {
    transform: translateY(12px) !important;
  }
}

/* Dev tuning helper: when `body` has `.dev-tune`, disable automatic
   object-fit and any wrapper sizing so you can tune `area` values and
   `imgArea` precisely without aspect-ratio constraints. Toggle from
   the console with `toggleDevTune()` (defined in script.js). */
/* (dev tuning styles removed) */

/* Rotate overlay styles: shown on mobile landscape to prompt portrait rotation */
.rotate-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999; /* ensure overlay sits above header and all content */
  pointer-events: auto;
}
.rotate-overlay[aria-hidden="false"], .rotate-overlay.visible {
  display: flex;
}
.rotate-overlay .rotate-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.9);
  padding: 18px 20px;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  color: #000;
}
.rotate-overlay .rotate-icon {
  width: 64px;
  height: 64px;
  color: #222;
}
.rotate-overlay .rotate-text { text-align: center; font-family: 'Creato Display', sans-serif; }
.rotate-overlay .rotate-text strong { display:block; font-size: 16px; }
.rotate-overlay .rotate-text .rotate-sub { font-size: 13px; color:#444; }

/* When overlay is visible, optionally dim page content slightly (particles remain visible) */
body.show-rotate::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.06);
  z-index: 99990; /* dim content but stay below the rotate overlay */
  pointer-events: none;
}

/* Make sure overlay content is compact on very small widths */
@media (max-width: 420px) {
  .rotate-overlay .rotate-content { padding: 12px 14px; }
  .rotate-overlay .rotate-icon { width: 54px; height: 54px; }
  .rotate-overlay .rotate-text strong { font-size: 14px; }
}

/* Small-phone layout: ensure video and info frames fit within viewport
   by capping player height and allowing the modal to scroll internally
   only when necessary. These conservative values keep controls visible.
*/
@media (max-width: 480px) {
  .video-frame {
    max-width: 94vw;
    max-height: calc(100vh - 88px);
    overflow: auto; /* allow internal scroll if content still exceeds */
  }

  /* The embedded player should take a reasonable fraction of the
     viewport; reduce on small phones so description fits below it. */
  #player {
    max-height: 44vh !important;
    width: 100% !important;
  }

  /* Limit video info area so the combined height stays within viewport */
  .video-info {
    max-height: calc(100vh - 88px - 44vh);
    overflow: auto;
  }

  /* Info modal (credits) should fit entirely on small phones without
     internal scroll. Stack the two columns, reduce padding and type
     so the content compresses to the viewport height. */
  .info-frame {
    max-height: calc(100vh - 68px);
    overflow: visible; /* avoid internal scroll */
    display: flex;
    flex-direction: column;
    padding: 14px 12px;
    gap: 8px;
  }

  .info-frame .info-columns {
    display: flex;
    flex-direction: column; /* stack columns vertically on phones */
    gap: 10px;
    align-items: stretch;
  }

  .info-frame .info-column { padding-right: 0; }

  .info-frame h3 { margin: 0 0 6px 0; font-size: 18px; }
  .info-frame p { margin: 0 0 10px 0; font-size: 15px; line-height: 1.38; }

  /* Let the info modal center vertically when it fits, and scale down
     when it doesn't. Avoid snapping to the top by keeping the overlay's
     alignment centered; cap the frame height so it adapts to the
     viewport without deforming its vertical proportions. */
  #infoModal {
    align-items: center;
    padding-top: 4vh;
    padding-bottom: 4vh;
    justify-content: center;
  }

  .info-frame {
    width: min(680px, 94vw);
    max-width: 94vw;
    box-sizing: border-box;
    padding: 12px 12px 76px; /* keep space for the close button area if needed */
    border-radius: 10px;
    /* Cap the height to the viewport and allow the frame to be centered
       by the flex container. Add a small transition so layout changes
       don't snap abruptly when the device rotates or viewport resizes. */
    max-height: calc(100vh - 56px);
    overflow: auto;
    transition: transform 240ms ease, margin 240ms ease, max-height 240ms ease;
  }

  /* Keep the close button centered near the bottom of the viewport on
     small phones (mirror the circular centered button in the reference
     design). Fixed positioning ensures consistent placement. */
  #closeInfo {
    position: fixed;
    bottom: 44px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    z-index: 320;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
  }
}

/* Extra-small phones: tighten player further to avoid overflow on short screens */
@media (max-width: 360px) {
  #player { max-height: 36vh !important; }
  .video-frame { max-height: calc(100vh - 80px); }
  .video-info { max-height: calc(100vh - 80px - 36vh); }
}