/* ==========================================================================
   STRATO MELBOURNE — Round 2: live-site fixes, 23 September 2026
   Loaded after brand.css. See ROUND-2-ROADMAP.md for the issue each block
   answers.
   ========================================================================== */

/* --------------------------------------------------------------------------
   R2.1  NO SCROLL REVEALS
   AOS, GSAP and animations.js are gone. This is the safety net for any
   attribute or class left behind, so nothing can ever render invisible.
   -------------------------------------------------------------------------- */
[data-aos],
.reveal-line,
.hero__line,
.line-inner {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  clip-path: none !important;
  animation: none !important;
}
.reveal-line,
.hero__line { display: block; overflow: visible; }

/* --------------------------------------------------------------------------
   R2.2  NAVIGATION
   Six menu items plus the logo and Book a Table need more room than 992px.
   -------------------------------------------------------------------------- */
@media (min-width: 62em) and (max-width: 74.99em) {
  /* Below 1200px the inline nav is forced back to the burger. */
  .nav {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    z-index: var(--z-nav);
    display: flex;
    flex-direction: column;
    padding: var(--space-xl) var(--gutter) var(--space-2xl);
    background: var(--color-navy-deep);
    transform: translateY(-100%);
    visibility: hidden;
    overflow-y: auto;
    transition: transform var(--t-mid), visibility var(--t-mid);
  }
  .nav.is-open { transform: translateY(0); visibility: visible; }
  .nav__list { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
  .nav__link { font-size: 1.25rem; letter-spacing: 0.02em; }
  .nav__foot { display: block; margin-top: auto; }
  .burger { display: block; }
}
@media (min-width: 75em) {
  .nav__list { gap: clamp(1rem, 0.4rem + 1vw, 1.75rem); flex-wrap: nowrap; }
  .nav__link { white-space: nowrap; }
  .nav__foot { display: none; }
  .burger { display: none; }
}

/* --------------------------------------------------------------------------
   R2.3  HERO — centred
   -------------------------------------------------------------------------- */
.hero__inner {
  align-items: center;
  text-align: center;
  max-width: 52rem;
  margin-inline: auto;
}
.hero__sub { max-width: 46ch; margin-inline: auto; }
.hero__cta { justify-content: center; }
.hero .crumbs { justify-content: center; }
.hero__scrim {
  background:
    linear-gradient(to bottom, rgba(11, 18, 32, 0.5) 0%, rgba(11, 18, 32, 0.32) 45%, rgba(11, 18, 32, 0.82) 100%),
    radial-gradient(75% 60% at 50% 45%, rgba(11, 18, 32, 0.45), transparent 78%);
}

/* --------------------------------------------------------------------------
   R2.4  LOGO — new-logo.gif is wider and shorter than the previous artwork
   -------------------------------------------------------------------------- */
.logo--img img { height: clamp(1.6rem, 1.25rem + 0.9vw, 2.1rem); }
.logo--footer.logo--img img { height: clamp(1.9rem, 1.5rem + 1vw, 2.4rem); }

/* --------------------------------------------------------------------------
   R2.5  TEXT + IMAGE SECTIONS — one square image, 1 / 1
   The stacked main-plus-inset figure is retired: the inset was unreadable and
   rendered as an empty box when it failed to paint.
   -------------------------------------------------------------------------- */
.pillar__media--square { display: block; }
.pillar__media--square .pillar__figure {
  position: static;
  margin: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-lg);
  transform: none;
  box-shadow: none;
  border: 0;
}
.pillar__media--square .pillar__figure img,
.pillar__media--square .pillar__figure video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   R2.6  CTA SECTIONS — compact, and three distinct treatments so that two
   bands never look the same back to back.
   -------------------------------------------------------------------------- */
.finale,
.tour,
.band {
  min-height: 0;
  padding-block: var(--space-2xl);
}

/* (a) feature — image-backed and centred, but a third of the old height */
.finale {
  display: block;
  text-align: center;
}
.finale__inner { max-width: 44rem; margin-inline: auto; }
.finale__title { margin-bottom: var(--space-sm); font-size: var(--fs-h2); }
.finale__scrim {
  background: linear-gradient(to bottom, rgba(11, 18, 32, 0.72), rgba(11, 18, 32, 0.88));
}
.finale .btn-row { margin-top: var(--space-md); }

/* (b) cta-bar — a single compact strip: copy left, buttons right, no image */
.cta-bar {
  padding-block: var(--space-xl);
  background: var(--color-navy-soft);
  border-block: 1px solid var(--color-navy-line);
}
.cta-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.cta-bar__copy { flex: 1 1 22rem; }
.cta-bar__title { margin-bottom: var(--space-3xs); font-size: var(--fs-h3); }
.cta-bar__copy p { margin: 0; color: var(--color-muted); font-size: var(--fs-small); }
.cta-bar .btn-row { flex: 0 0 auto; margin-top: 0; }

/* (c) cta-split — square image one side, copy the other */
.cta-split { padding-block: var(--space-2xl); }
.cta-split__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: center;
}
@media (min-width: 52em) {
  .cta-split__grid { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
  .cta-split--reverse .cta-split__media { order: 2; }
}
.cta-split__media {
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.cta-split__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cta-split__title { margin-bottom: var(--space-xs); }
.cta-split__meta { margin-top: var(--space-sm); font-size: var(--fs-small); color: var(--color-muted); }

/* Virtual tour band — keeps its image but loses the full-screen height */
.tour__inner { max-width: 46rem; }
.tour__title { font-size: var(--fs-h3); }

/* --------------------------------------------------------------------------
   R2.7  STATEMENT SECTION — full viewport, slider fills what the copy leaves
   The section is a column: heading and body sit at the top, the slider grows
   into the remaining height, and every slide is object-fit: cover so the crop
   is always right whatever the viewport shape.
   -------------------------------------------------------------------------- */
.statement {
  display: flex;
  flex-direction: column;
  /* A definite height, not just min-height: the slider's children size
     themselves with height:100%, which only resolves against a definite box. */
  height: 100svh;
  min-height: 100svh;
  padding-block: var(--space-xl) 0;
}
.statement > .container { flex: 0 0 auto; }

/* The copy is tightened so the image keeps the larger share of the viewport:
   a wider measure drops the heading from three lines to two. */
.statement__title {
  max-width: 26ch;
  margin: 0 auto var(--space-sm);
  font-size: var(--fs-h2);
}
.statement__body { max-width: 68ch; }
.statement__body p { font-size: var(--fs-body); }
.statement__body p + p { margin-top: var(--space-2xs); }

.statement__slider {
  position: relative;
  flex: 1 1 auto;
  /* min-height:0 lets the flex child shrink; without it the intrinsic image
     height would push the section past the viewport. */
  min-height: 0;
  /* A definite height so the 100% chain below resolves, and a fair share of
     the viewport rather than a strip under the copy. */
  height: 46svh;
  /* The section is a column flex container — be explicit about the cross axis
     so the slider can never collapse to its content width. */
  align-self: stretch;
  width: 100%;
  margin-top: var(--space-lg);
  overflow: hidden;
}
.statement__slider .swiper-wrapper { height: 100%; }
.statement__slider .swiper-slide {
  position: relative;
  height: 100%;
  /* No aspect ratio — the slide takes the height the flex row gives it. */
  aspect-ratio: auto;
}
/* The image stays in flow. Taking it out with position:absolute left the
   slide with no in-flow content, which collapsed the whole slider to 0 wide. */
.statement__slider .swiper-slide img {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Before Swiper initialises, only the first slide shows. */
.statement__slider:not(.swiper-initialized) .swiper-slide + .swiper-slide { display: none; }

/* On short screens a full-viewport section squeezes the copy, so let it grow. */
/* On short screens a full-viewport section squeezes the copy, so let it grow. */
@media (max-height: 40rem) {
  .statement { height: auto; min-height: auto; }
  .statement__slider { height: 22rem; flex: 0 0 22rem; }
}

.statement__slider .swiper-pagination {
  position: absolute;
  bottom: var(--space-sm);
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}
.statement__slider .swiper-pagination-bullet {
  width: 28px;
  height: 3px;
  border-radius: 0;
  background: rgba(244, 239, 232, 0.4);
  opacity: 1;
  transition: background-color var(--t-fast);
}
.statement__slider .swiper-pagination-bullet:hover { background: rgba(244, 239, 232, 0.75); }
.statement__slider .swiper-pagination-bullet-active { background: var(--color-gold); }

/* The caption used to be absolutely positioned inside .statement__figure.
   The figure is gone, so it has to become a normal block or it floats to the
   top of the page. */
.statement__caption {
  position: static;
  flex: 0 0 auto;
  margin: 0;
  padding: var(--space-sm) var(--gutter);
  background: none;
  backdrop-filter: none;
  text-align: center;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

/* --------------------------------------------------------------------------
   R2.8  EVENT ROOM CARDS — image slider, clear click target
   The previous card wrapped paragraphs inside a <button> (invalid markup, and
   a vague click target). It is now an <article> with one explicit toggle.
   -------------------------------------------------------------------------- */
.roomgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 52em) {
  .roomgrid { grid-template-columns: repeat(2, 1fr); }
}
/* A grid item's default min-width is auto, so Swiper sizing its slides from
   the track and the track sizing itself from the content feed each other and
   the card runs away to millions of pixels. min-width: 0 breaks the loop. */
.roomgrid > li,
.roomcard2,
.roomcard2__media,
.roomcard2__media .swiper-wrapper,
.roomcard2__media .swiper-slide { min-width: 0; max-width: 100%; }
.roomcard2__media { width: 100%; }

.roomcard2 {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--color-navy-soft);
  border: 1px solid var(--color-navy-line);
  border-radius: var(--radius-lg);
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.roomcard2:hover { border-color: var(--color-gold-deep); transform: translateY(-2px); }
.roomcard2.is-open { border-color: var(--color-gold); }

.roomcard2__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.roomcard2__media .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.roomcard2__media:not(.swiper-initialized) .swiper-slide + .swiper-slide { display: none; }

/* The room name sits permanently over the image — no hover needed to read it */
.roomcard2__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: var(--space-lg) var(--space-md) var(--space-sm);
  background: linear-gradient(to top, rgba(11, 18, 32, 0.92), transparent);
  color: var(--color-cream);
  font-family: var(--font-accent);
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.35rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.roomcard2__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: var(--space-md);
}
.roomcard2__body > p { color: var(--color-text); }
.roomcard2__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin: var(--space-sm) 0 0;
  padding: 0;
  list-style: none;
}
.roomcard2__facts li {
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--color-navy-line);
  border-radius: var(--radius-md);
  background: rgba(11, 18, 32, 0.5);
  font-size: 0.85rem;
  color: var(--color-muted);
}
.roomcard2__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: auto;
  padding-top: var(--space-md);
}
.roomcard2__toggle::after {
  content: "\2193";
  display: inline-block;
  margin-left: 0.5em;
  transition: transform var(--t-fast);
}
.roomcard2__toggle[aria-expanded="true"]::after { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   R2.9  HOMEPAGE EVENTS — premium treatment
   -------------------------------------------------------------------------- */
.events-premium {
  position: relative;
  padding-block: var(--space-3xl);
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(232, 163, 92, 0.1), transparent 60%),
    linear-gradient(180deg, var(--color-navy) 0%, #0D1A22 55%, var(--color-navy) 100%);
  border-block: 1px solid var(--color-navy-line);
}
.events-premium__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}
@media (min-width: 58em) {
  .events-premium__grid {
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(2.5rem, 1rem + 4vw, 4.5rem);
  }
}

/* Square image with a gold hairline offset behind it */
.events-premium__media { position: relative; margin: 0; aspect-ratio: 1 / 1; }
.events-premium__media img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.events-premium__media::before {
  content: "";
  position: absolute;
  inset: 1.25rem -1.25rem -1.25rem 1.25rem;
  z-index: 0;
  border: 1px solid rgba(232, 163, 92, 0.45);
  border-radius: var(--radius-lg);
}
@media (max-width: 40em) {
  .events-premium__media::before { inset: 0.75rem -0.75rem -0.75rem 0.75rem; }
}

.events-premium__title { margin-bottom: var(--space-sm); }
.events-premium__lead { color: var(--color-cream); }

/* Two room spaces sitting under the copy — editorial presentation */
.events-premium__spaces {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  margin: var(--space-lg) 0 0;
  padding: var(--space-md) 0;
  border-top: 1px solid rgba(232, 163, 92, 0.25);
  border-bottom: 1px solid var(--color-navy-line);
}
.events-premium__space {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.events-premium__space:first-child {
  padding-right: var(--space-md);
  border-right: 1px solid var(--color-navy-line);
}
.events-premium__space-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
}
.events-premium__space-tier {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.events-premium__space-title {
  margin: 0;
  font-family: var(--font-accent);
  font-size: var(--fs-h4);
  font-weight: 400;
  color: var(--color-cream);
  line-height: 1.2;
}
.events-premium__space-desc {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--color-muted);
  line-height: 1.5;
}

/* The stat row that anchors the section */
.events-premium__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-xl);
  margin: var(--space-lg) 0 0;
  padding: var(--space-md) 0 0;
  border-top: 1px solid var(--color-navy-line);
  list-style: none;
}
.events-premium__stats li { display: flex; flex-direction: column; gap: 0.15rem; }
.events-premium__stats strong {
  color: var(--color-gold);
  font-family: var(--font-accent);
  font-size: var(--fs-h4);
  font-weight: 400;
}
.events-premium__stats span { font-size: var(--fs-small); color: var(--color-muted); }

/* --------------------------------------------------------------------------
   R2.10  OUR STORY — the three spaces, rebuilt
   -------------------------------------------------------------------------- */
.spaces-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}
.space-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  align-items: center;
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-navy-line);
}
.spaces-list > li:last-child .space-row { padding-bottom: 0; border-bottom: 0; }
@media (min-width: 52em) {
  .space-row { grid-template-columns: 1fr 1.15fr; gap: var(--space-xl); }
  .space-row--reverse .space-row__media { order: 2; }
}
.space-row__media {
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.space-row__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-mid);
}
.space-row:hover .space-row__media img { transform: scale(1.03); }
.space-row__title { margin-bottom: var(--space-2xs); }
.space-row__body p { color: var(--color-text); }

/* --------------------------------------------------------------------------
   R2.11  HOVER PASS
   Every interactive surface gets a visible, consistent hover.
   -------------------------------------------------------------------------- */
.btn {
  transition: color 160ms var(--ease), background-color 160ms var(--ease),
              border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.btn--metal:hover,
.btn--metal:focus-visible { box-shadow: 0 6px 18px -8px rgba(232, 163, 92, 0.65); }
.btn--outline:hover,
.btn--ghost:hover { box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.8); }

/* Secondary button hover — the readable state, in every context.

   brand.css gives these buttons a darker fill where they sit over photography
   so the outline reads against an image:

     .hero .btn--ghost { background-color: rgba(16,24,39,0.35); }  (0,2,0)
     .btn--ghost:hover { background-color: var(--color-cream); }   (0,2,0)

   Both are specificity (0,2,0) — a class plus a class, versus a class plus a
   pseudo-class — and the context rule comes later in the file, so it won on
   hover. The fill stayed dark while only `color` flipped to dark navy, leaving
   dark text on a dark button: a contrast ratio of about 1:1.

   Doubling up the class (.btn.btn--ghost, three classes = 0,3,0) outranks any
   single-descendant context rule — .hero, .finale, .band, and anything added
   later — without having to enumerate sections one at a time. */
.btn.btn--ghost:hover,
.btn.btn--ghost:focus-visible,
.btn.btn--outline:hover,
.btn.btn--outline:focus-visible {
  color: #12192A;
  background-color: var(--color-cream);
  border-color: var(--color-cream);
}

.menu-link { transition: border-color var(--t-fast), background-color var(--t-fast); }
.menu-link:hover { border-color: var(--color-gold); background: rgba(232, 163, 92, 0.07); }
.menu-link:hover .menu-link__cta { color: var(--color-gold); }

.pillar__menu-card { transition: border-color var(--t-fast), background-color var(--t-fast); }
.pillar__menu-card:hover { border-color: var(--color-gold); background: rgba(232, 163, 92, 0.07); }
.pillar__menu-card:hover .pillar__menu-name { color: var(--color-gold-light); }

.wo-item__media-link img { transition: transform var(--t-mid); }
.wo-item:hover .wo-item__media-link img { transform: scale(1.04); }
.wo-item__title a { transition: color var(--t-fast); }
.wo-item:hover .wo-item__title a { color: var(--color-gold); }

.gallery__item img { transition: transform var(--t-mid); }
.gallery__item:hover img { transform: scale(1.03); }

.footer__social a,
.footer__col a,
.footer__contact a { transition: color var(--t-fast); }

.occasion-tab:hover { background: rgba(232, 163, 92, 0.1); }
.occasion-tab[aria-selected="true"]:hover {
  background: var(--color-gold-light);
  border-color: var(--color-gold-light);
}

/* --------------------------------------------------------------------------
   R2.12  SMALL FIXES
   -------------------------------------------------------------------------- */
/* .screen-reader-text was used in the templates but never defined anywhere in
   the theme, so "visually hidden" headings were rendering on the page. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus {
  z-index: 100000;
  top: 5px;
  left: 5px;
  width: auto;
  height: auto;
  padding: 0.75rem 1.25rem;
  clip: auto;
  clip-path: none;
  background: var(--color-navy-soft);
  color: var(--color-cream);
  font-size: var(--fs-small);
  text-decoration: none;
}

/* Footer hours were wrapping mid-value. Each time range is its own span
   (strato_hours_list), so a narrow column breaks between "12pm – 2pm" and
   "5pm – 12am" rather than inside either of them. */
.hours > div { gap: var(--space-md); align-items: baseline; }
.hours dt,
.hours dd > span { white-space: nowrap; }
.hours dd { text-align: right; }

.statement__body { max-width: 62ch; margin-inline: auto; }

/* Reduced motion: stop the sliders from auto-advancing (sliders.js also
   disables autoplay, this covers the CSS transitions). */
@media (prefers-reduced-motion: reduce) {
  .swiper-slide,
  .space-row__media img,
  .gallery__item img,
  .wo-item__media-link img { transition: none !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   R2.13  BOOKING OVERLAY — portrait
   The widget is no longer the wide/landscape layout, so the panel narrows to
   suit it instead of leaving dead space either side.
   -------------------------------------------------------------------------- */
/* OpenTable's loader widget (Garamond, gold button) draws a fixed-size iframe
   (224 x 301 for the "standard" type) from its own width/height attributes.
   The body centres it at that size rather than stretching it, which cropped
   the party-size field and the Find a Table button. */
.bookmodal__panel { width: min(22rem, 100%); max-height: 92svh; }
.bookmodal__body {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 21rem;
  max-height: calc(92svh - 7rem);
  padding: var(--space-sm);
  overflow-y: auto;
}
.bookmodal__body iframe {
  opacity: 0;
  transition: opacity 200ms var(--ease);
}
/* The iframe is preloaded on idle, so by the time the overlay opens it is
   usually already there. This only shows while it is still arriving. */
.bookmodal.is-loaded .bookmodal__body iframe { opacity: 1; }
.bookmodal__body::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.75rem;
  height: 1.75rem;
  margin: -0.875rem 0 0 -0.875rem;
  border: 2px solid rgba(16, 24, 39, 0.15);
  border-top-color: var(--color-gold-deep);
  border-radius: 50%;
  animation: bookspin 700ms linear infinite;
}
.bookmodal.is-loaded .bookmodal__body::after { content: none; }
@keyframes bookspin { to { transform: rotate(360deg); } }

@media (max-height: 30rem) {
  .bookmodal__body { height: calc(92svh - 7rem); }
}