/* Sin Yolanda adaptation of the reviewed AccordionGallery pattern.
 * Original: David Haz, 5c73f3d065d4c074ae3c5fa66b4918e07fc999fa.
 * MIT + Commons Clause notice: /licenses/react-bits.txt.
 * Scoped home refinements: the cinematic hero is deliberately untouched.
 */
@font-face {
  font-family: "SY Venue Display";
  src: url("../../fonts/bebas-neue-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Alfa Slab One";
  src: url("../../fonts/alfa-slab-one-latin-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* Full-bleed announcement: the demo's hierarchy, aligned to the official content rail.
 * State/date come from public-data; opening is never inferred from the clock.
 */
.opening-announcement {
  --opening-orange: #b84b16;
  background: var(--opening-orange);
  color: var(--paper);
}
.opening-announcement-inner {
  width: min(100% - 64px, 1280px);
  margin-inline: auto;
  min-height: 126px;
  padding-block: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.opening-announcement-details {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin: 0;
}
.opening-announcement-details > span,
.opening-announcement time { font-size: 15px; line-height: 1.5; }
.opening-announcement strong {
  font: 400 clamp(40px, 4vw, 52px)/1 "SY Venue Display", Impact, sans-serif;
}
.opening-announcement a { color: inherit; }
.opening-announcement strong a { text-decoration: none; }
.opening-announcement strong a:hover { text-decoration: underline; text-underline-offset: 5px; }
.opening-announcement-link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 18px;
  min-height: 44px;
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.opening-announcement-link svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.opening-announcement a:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
@media (max-width: 700px) {
  .opening-announcement-inner { width: calc(100% - 40px); padding-block: 24px; gap: 14px; }
  .opening-announcement-details { display: grid; grid-template-columns: auto auto; gap: 8px 16px; }
  .opening-announcement-details > span { grid-column: 1 / -1; font-size: 12px; }
  .opening-announcement time { font-size: 13px; align-self: center; }
  .opening-announcement strong { font-size: 42px; }
  .opening-announcement-link { font-size: 13px; gap: 10px; }
}
@media (max-width: 460px) {
  .opening-announcement-inner { display: grid; gap: 10px; }
  .opening-announcement-details { grid-template-columns: auto 1fr; gap: 8px 20px; }
  .opening-announcement-link { justify-self: start; min-height: 44px; }
}

.venue-showcase .section-heading { margin-bottom: 0; }
.venue-showcase .filter-chips { margin: 24px 0 32px; }
.venue-showcase .venue-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  height: auto;
  padding: 0;
  margin: 0;
  list-style: none;
  overflow: visible;
  border-radius: 0;
}
.venue-showcase .venue-item {
  position: relative;
  min-width: 0;
  height: clamp(300px, 35vw, 390px);
}
.venue-showcase .venue-item[hidden] { display: none !important; }
.venue-showcase .venue-card {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--maroon);
  border-radius: var(--radius);
  isolation: isolate;
  overflow: hidden;
  color: var(--paper);
  cursor: default;
  text-decoration: none;
  transition: none;
}
.venue-showcase a.venue-card { cursor: pointer; }
.venue-showcase a.venue-card:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}
.venue-showcase .venue-frame {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
}
.venue-showcase .venue-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.venue-showcase .venue-shade {
  background: linear-gradient(180deg, rgb(10 8 7 / 45%), rgb(10 8 7 / 5%) 35%, rgb(10 8 7 / 92%));
  transition: none;
}
.venue-showcase .venue-location {
  z-index: 1;
  inset: 20px 20px auto;
  max-width: none;
  white-space: normal;
  overflow: visible;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .08em;
  text-overflow: clip;
}
.venue-showcase .venue-label {
  z-index: 1;
  inset: auto 22px 24px;
  display: grid;
  gap: 8px;
  white-space: normal;
}
.venue-showcase .venue-label strong {
  font: 400 clamp(36px, 4vw, 58px)/.96 "SY Venue Display", Impact, sans-serif;
  white-space: normal;
  overflow: visible;
  overflow-wrap: normal;
  text-overflow: clip;
}
.venue-showcase .venue-city,
.venue-showcase .venue-invitation {
  opacity: 1;
  transform: none;
  transition: none;
  line-height: 1.4;
}
.venue-showcase .venue-badge {
  max-width: 100%;
  white-space: normal;
  letter-spacing: .02em;
  text-transform: none;
  font-size: 12px;
  line-height: 1.4;
  background: var(--cream);
  color: var(--maroon);
}
.venue-showcase .venue-badge--opening {
  padding: 7px 13px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
}
.venue-showcase .venue-collapsed,
.venue-showcase .venue-opening-date { display: none; }
.venue-showcase .venue-collapsed,
.venue-showcase .venue-opening-date { z-index: 1; }
.venue-showcase .venue-announcement {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  height: 100%;
  padding: 36px 24px 110px;
  color: var(--gold);
  font: 400 36px/1 "SY Venue Display", Impact, sans-serif;
  text-align: center;
}
.venue-showcase .venue-announcement > span {
  font: 400 14px/1.5 Inter, sans-serif;
  color: var(--cream);
}
.venue-showcase .is-media-missing img { display: none; }
.venue-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* One preview only. CSS hover must never compete with the controller's state. */
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  .venue-showcase .venue-gallery:not(.venue-gallery--many) {
    display: flex;
    gap: 10px;
    height: clamp(420px, 56vh, 530px);
  }
  .venue-showcase .venue-gallery:not(.venue-gallery--many) .venue-item {
    flex: 1 1 0;
    height: 100%;
    transition: flex-grow 420ms var(--ease-golden);
  }
  .venue-showcase .venue-gallery:not(.venue-gallery--many) .venue-item.is-open {
    flex-grow: var(--expanded-grow, 4);
  }
  .venue-showcase .venue-gallery:not(.venue-gallery--many) .venue-label,
  .venue-showcase .venue-gallery:not(.venue-gallery--many) .venue-location {
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease;
  }
  .venue-showcase .venue-gallery:not(.venue-gallery--many) .is-open .venue-label,
  .venue-showcase .venue-gallery:not(.venue-gallery--many) .is-open .venue-location {
    opacity: 1;
    transition-delay: 100ms;
  }
  .venue-showcase .venue-gallery:not(.venue-gallery--many) .venue-label strong {
    font-size: clamp(42px, 4.5vw, 66px);
  }
  .venue-showcase .venue-gallery:not(.venue-gallery--many) .venue-collapsed {
    display: block;
    position: absolute;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    font: 400 clamp(30px, 2.6vw, 40px)/1 "SY Venue Display", Impact, sans-serif;
    white-space: nowrap;
    text-shadow: 0 2px 14px #0a0807;
  }
  .venue-showcase .venue-gallery:not(.venue-gallery--many) .is-open .venue-collapsed { opacity: 0; }
  .venue-showcase .venue-gallery:not(.venue-gallery--many) .venue-opening-date {
    display: block;
    position: absolute;
    inset: 22px 0 auto;
    color: var(--cream);
    font: 400 32px/1 "SY Venue Display", Impact, sans-serif;
    text-align: center;
  }
  .venue-showcase .venue-opening-date > span {
    display: block;
    margin-bottom: 5px;
    font: 600 10px/1.3 Inter, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .venue-showcase .venue-gallery:not(.venue-gallery--many) .is-open .venue-opening-date { display: none; }
  .venue-showcase .venue-gallery:not(.venue-gallery--many) .venue-announcement { font-size: 0; }
  .venue-showcase .venue-gallery:not(.venue-gallery--many) .venue-announcement > span { opacity: 0; }
  .venue-showcase .venue-gallery:not(.venue-gallery--many) .is-open .venue-announcement { font-size: 40px; }
  .venue-showcase .venue-gallery:not(.venue-gallery--many) .is-open .venue-announcement > span { opacity: 1; }
}
@media (max-width: 760px) {
  .venue-showcase .venue-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .venue-showcase .venue-item { height: 300px; }
  .venue-showcase .venue-location { inset: 16px 16px auto; }
  .venue-showcase .venue-label { inset: auto 16px 20px; }
  .venue-showcase .venue-label strong { font-size: 38px; }
  .venue-showcase .section-heading { display: block; }
  .venue-showcase .section-heading > p { margin-top: 16px; }
}
@media (max-width: 460px) {
  .venue-showcase .venue-gallery { grid-template-columns: 1fr; }
  .venue-showcase .venue-item { height: clamp(280px, 84vw, 350px); }
  .venue-showcase .venue-label strong { font-size: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .venue-showcase .venue-item,
  .venue-showcase .venue-label,
  .venue-showcase .venue-location { transition: none !important; }
}

/* Luis explicitly retained Karina's tall photo windows. Preserve their published
 * 230 × 1050 proportion, scaling both axes together on narrower screens.
 * The natural media/artwork and its rounded arch treatment remain unchanged.
 */
.rotulo-photos img { height: auto; aspect-ratio: 23 / 105; }
.rotulo-art { max-width: 100%; }
.rotulo-photos { width: 100%; align-items: center; }
@media (min-width: 880px) {
  .rotulo-photos { min-width: 0; }
  .rotulo-photos img { width: min(230px, calc((100% - 14px) / 2)); }
  .rotulo-type { min-width: 0; }
}

/* The home uses experience-media, not the older experience-photo selector.
 * Fill the grid cell without stretching the portrait into a landscape image.
 */
#experiencia .experience-media {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-width: 0;
  min-height: 520px;
}
#experiencia .experience-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
@media (max-width: 900px) {
  #experiencia .experience-media {
    min-height: 0;
    aspect-ratio: 4 / 5;
    max-height: 720px;
  }
}

/* The next opening is explicit in the resting card, without a date or operating claims. */
.opening-announcement--upcoming .opening-announcement-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 370px);
  gap: 24px 48px;
  padding-block: 26px;
}
.opening-announcement--upcoming .opening-announcement-kicker {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.opening-announcement--upcoming .opening-announcement-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  font: 400 clamp(44px, 5vw, 64px)/1 "SY Venue Display", Impact, sans-serif;
  letter-spacing: .01em;
}
.opening-announcement--upcoming .opening-announcement-message { margin: 10px 0 0; max-width: 38ch; font-size: 15px; line-height: 1.55; }
.venue-showcase .venue-coming-soon {
  position: absolute;
  inset: 18px auto auto 18px;
  z-index: 2;
  width: fit-content;
  max-width: calc(100% - 36px);
  padding: 8px 11px;
  border-radius: 4px;
  background: var(--cream);
  color: var(--maroon);
  font: 600 13px/1.3 Inter, sans-serif;
  text-align: center;
  pointer-events: none;
}
.venue-showcase .venue-coming-soon + .venue-location { top: 62px; }
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  .venue-showcase .venue-gallery:not(.venue-gallery--many) .venue-item:not(.is-open) .venue-coming-soon {
    inset: 18px auto auto 10px;
    width: fit-content;
    max-width: calc(100% - 20px);
    padding: 8px 7px;
    font-size: 12px;
  }
}
@media (max-width: 700px) {
  .opening-announcement--upcoming .opening-announcement-inner { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-block: 24px; }
  .opening-announcement--upcoming .opening-announcement-title { font-size: 48px; gap: 8px 18px; }
}

/* Local, opt-in sizing. Preserve the existing typography, photos and one-open-panel behavior. */
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  .venue-showcase .venue-gallery.venue-gallery--capacity {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scrollbar-color: #e8d5b4 #211e1a;
    padding: 8px 0 10px;
    margin-block: -8px -10px;
    box-sizing: content-box;
  }
  .venue-showcase .venue-gallery.venue-gallery--capacity .venue-item {
    flex: 0 0 var(--venue-rail-width);
    transition: flex-basis 420ms var(--ease-golden);
  }
  .venue-showcase .venue-gallery.venue-gallery--capacity .venue-item.is-open {
    flex: 0 0 var(--venue-open-width);
  }
  .venue-showcase .venue-gallery.venue-gallery--capacity .venue-label strong {
    font-size: clamp(42px, 4.5vw, 66px);
  }
  .venue-showcase .venue-gallery.venue-gallery--capacity .venue-coming-soon { max-width: calc(100% - 20px); }
  .venue-showcase .venue-gallery.venue-gallery--capacity .venue-label,
  .venue-showcase .venue-gallery.venue-gallery--capacity .venue-location { transition: none; }
  .venue-showcase .venue-gallery.venue-gallery--capacity .is-open .venue-label,
  .venue-showcase .venue-gallery.venue-gallery--capacity .is-open .venue-location { transition: opacity 160ms ease 100ms; }
  .venue-showcase .venue-gallery.venue-gallery--sizing .venue-item,
  .venue-showcase .venue-gallery.venue-gallery--sizing .venue-label,
  .venue-showcase .venue-gallery.venue-gallery--sizing .venue-location { transition: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .venue-showcase .venue-gallery.venue-gallery--capacity .venue-item { transition: none; }
}

#ubicaciones [data-branch-id="ciudad-juarez"] .venue-coming-soon {
  inset: 22px auto auto 20px;
  padding: 0 0 9px;
  border-radius: 0;
  border-bottom: 2px solid #d4a15f;
  background: none;
  color: #fff4de;
  font: 600 10px/1.4 Inter, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px #000;
  white-space: nowrap;
  text-align: left;
}
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  #ubicaciones .venue-item:not(.is-open) [data-branch-id="ciudad-juarez"] .venue-coming-soon {
    inset: 22px auto auto 14px;
    max-width: none;
    padding: 0;
    border: 0;
    writing-mode: vertical-rl;
    font-size: 9px;
  }
}