/* ============================================================
   AURA — GLOBAL RESPONSIVE REPAIR
   ------------------------------------------------------------
   Goal: nothing that renders on desktop is hidden on mobile,
   and every control stays reachable and tappable on a phone.
   Loaded last so it wins over style.css and the page stylesheets.
   ============================================================ */

/* ============================================================
   1. SAFETY NETS
   ============================================================ */

/* Long unbroken strings (emails, URLs) must never push the
   layout wider than the screen. */
a[href^="mailto:"],
a[href^="tel:"],
.footer-contact a,
.meet-footer .footer-address,
.footer-address,
.contact-body a,
.co-body a,
.pd-body a,
.ce-body a {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Images and media never exceed their column. */
img,
svg,
video,
iframe {
  max-width: 100%;
}

/* Grid/flex children must be allowed to shrink below their
   content width, otherwise long words force a scrollbar. */
.stacked-images,
.aura-panel,
.aura-glass,
.aura-art,
.aura-intro-right,
.meet-left,
.meet-right,
.hero-content,
.pd-card,
.co-space,
.ce-event,
.pc-team-card,
.ab-intro-left,
.ab-intro-right,
.tm-intro-text-col,
.tm-col--text {
  min-width: 0;
}

/* ============================================================
   2. INDEX — HERO
   Desktop hides the address block and the slide arrows on
   phones. Both come back, laid out so they cannot collide
   with the circular "Reserve" button.
   ============================================================ */

.hero-location {
  display: block;
}

/* Keep the address clear of the reserve orbit on the right. */
@media (max-width: 900px) {
  .hero-location {
    left: 1.4rem;
    bottom: 1.7rem;
    max-width: min(58%, 300px);
  }
  .hero-nav {
    display: flex;
  }
}

@media (max-width: 560px) {
  .hero-location {
    /* reserve room for the 105px orbit + its right margin */
    max-width: calc(100% - 8.8rem);
    bottom: 1.5rem;
  }
  .hero-location .eyebrow {
    font-size: 0.58rem;
    letter-spacing: 0.2em;
    margin-bottom: 0.45rem;
  }
  .hero-location p {
    font-size: 0.8rem;
    line-height: 1.5;
  }
}

/* Slide arrows: restore below 768px and guarantee a 44px target. */
@media (max-width: 767px) {
  .hero-nav {
    display: flex;
    gap: 6px;
  }
  .hero-arrow {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
  }
  .hero-arrow svg {
    width: 20px;
    height: 20px;
  }
}

/* Very narrow phones: stack the arrows above the address so the
   bottom row never overlaps. */
@media (max-width: 380px) {
  .hero-location {
    max-width: calc(100% - 8rem);
  }
  .hero-location p {
    font-size: 0.75rem;
  }
  .reserve-orbit {
    width: 92px;
    height: 92px;
  }
  .hero-nav {
    bottom: calc(1.1rem + 100px);
  }
}

/* ============================================================
   3. INDEX — SECONDARY IMAGES
   The offset "stacked" photos were dropped on tablet and phone.
   They now sit in normal flow under the main photo, so the
   caption ("Pascal Torres") and the image are always visible.
   ============================================================ */

@media (max-width: 1023px) {
  .stacked-small {
    display: block;
    /* `static` so the inline left/top offsets on the markup
       (left:-7vw; top:40vh) are ignored instead of shifting it. */
    position: static;
    left: auto;
    right: auto;
    top: auto;
    width: min(202px, 58%);
    margin: 30px auto 0;
  }

  /* The parallax script writes an inline transform; neutralise it
     now that the element is part of the normal flow. */
  .stacked-images[data-parallax] .stacked-small {
    transform: none !important;
  }

  /* Caption flows under the photo instead of hanging outside it. */
  .stacked-small .chef-name {
    position: static;
    transform: none;
    width: auto;
    max-width: 100%;
    white-space: normal;
    margin-top: 0.7rem;
  }
}

/* ============================================================
   4. INDEX — COCKTAIL ART + INSTAGRAM CAROUSEL
   ============================================================ */

/* The cocktail photo sits inside the bordered panel on every screen.
   On narrow screens the panel stacks and the image becomes a card
   under the copy. */
@media (max-width: 900px) {
  .aura-art {
    width: min(320px, 68%);
    margin: 0 auto;
  }
}

/* The card keeps a sane share of the column as the screen narrows,
   so it never looks oversized on a phone. */
@media (max-width: 576px) {
  .aura-art {
    width: min(280px, 70%);
  }
}

@media (max-width: 380px) {
  .aura-art {
    width: min(240px, 74%);
  }
}

/* Carousel arrows were switched off below 880px, which left the
   Instagram strip with no way to scroll it. Bring them back
   inside the frame with a solid backing so they stay legible. */
@media (max-width: 880px) {
  .insta-nav {
    display: flex;
    width: 42px;
    height: 42px;
    background: rgba(20, 9, 6, 0.6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border-color: rgba(255, 255, 255, 0.6);
  }
  .insta-prev {
    left: 10px;
  }
  .insta-next {
    right: 10px;
  }
}

/* ============================================================
   5. INDEX — BACK TO TOP
   Hidden below 768px. Restored on the free left-hand side so it
   never sits under the floating call button.
   ============================================================ */

@media (max-width: 768px) {
  .back-to-top {
    display: flex;
    left: 16px;
    bottom: 22px;
    padding: 10px 6px;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    background: rgba(20, 9, 6, 0.5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border-radius: 4px;
  }
  .bt-top-text {
    font-size: 10px;
    letter-spacing: 1.5px;
  }
  .bt-border {
    height: 22px;
  }
}

/* ============================================================
   6. INDEX — BACKGROUND GRID LINES
   Switched off below 768px purely to reduce clutter. Restore
   them at a softer opacity.
   ============================================================ */

@media (max-width: 767px) {
  .bg-grid-lines {
    display: block;
    opacity: 0.5;
  }
  .bg-grid-lines .grid-line {
    background: rgba(255, 255, 255, 0.07);
  }
}

/* ============================================================
   7. INNER PAGES — RESTORED DETAILS
   ============================================================ */

/* Chef page: the "Scroll" cue was dropped on phones. */
@media (max-width: 680px) {
  .pc-scroll {
    display: flex;
    bottom: 18px;
  }
  .pc-scroll-line {
    height: 34px;
  }
}

/* Corporate page: the "BRISBANE / 010" marker was dropped. */
@media (max-width: 680px) {
  .co-hero-index {
    display: block;
    top: 18px;
    right: 18px;
    font-size: 9px;
    letter-spacing: 0.22em;
  }
}

/* Celebrations page: two sparkle accents were dropped. */
@media (max-width: 680px) {
  .ce-spark--2,
  .ce-spark--5 {
    display: block;
  }
}

/* ============================================================
   8. MOBILE USABILITY
   ============================================================ */

/* iOS Safari zooms the whole page when a focused field is under
   16px. `max()` only ever raises small fields, so the desktop
   styling of the larger forms is untouched. */
@media (max-width: 768px) {
  input,
  select,
  textarea {
    font-size: max(16px, 1em);
  }
}

/* Comfortable tap targets for the small text links. */
@media (max-width: 768px) {
  .meet-footer .footer-social a,
  .footer-contact a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Block-level address: pad it out rather than inline-flex it,
     so the existing <br> line breaks survive. */
  .meet-footer .footer-address {
    display: block;
    padding: 10px 4px;
  }

  .qodef-newsletter-form .newsletter-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .co-scroll {
    min-height: 44px;
    justify-content: center;
  }
}

/* Full-width submit buttons read better and stop the label from
   being squeezed on narrow screens. */
@media (max-width: 680px) {
  .mv-res-field--book,
  .ce-submit,
  .pd-submit,
  .co-submit,
  .meet-submit,
  .mv-res-btn {
    width: 100%;
    max-width: 100%;
  }
  .mv-res-btn,
  .ce-submit,
  .pd-submit,
  .co-submit {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ============================================================
   9. ORIENTATION / SHORT-SCREEN SAFETY
   Tall fixed-height panels can push their content off a short
   landscape phone. Let them breathe.
   ============================================================ */

@media (max-height: 520px) and (orientation: landscape) {
  .hero {
    min-height: 560px;
  }
  .menu-showcase {
    height: auto;
    min-height: 520px;
    padding: 90px 0;
  }
  .aura-panel {
    min-height: 0;
  }
  .fullscreen-menu .fs-nav > li > a,
  .fullscreen-menu .fs-nav > li > .fs-dropdown-toggle {
    font-size: 30px;
  }
  .fullscreen-menu .fs-nav > li {
    margin: 8px 0;
  }
}

/* Very small phones: trim the widest decorative type so headings
   never need a horizontal scroll. */
@media (max-width: 360px) {
  .hero-title {
    font-size: 2.7rem;
  }
  .aura-title {
    font-size: 2.6rem;
  }
  .ab-goals .ab-title {
    font-size: 26px;
  }
  .ab-art-script {
    width: 180px;
    max-width: 180px;
    font-size: 34px;
    line-height: 40px;
  }
}