/* ================================
MOBILE-ONLY RESPONSIVE FIXES
Added by Codex
Desktop styles must remain unchanged
================================ */

@media (max-width: 768px) {
  /* Keep short mobile viewports usable when the full-screen menu is open. */
  .nav__menu {
    max-width: 100vw;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Tighten oversized mobile-only hero spacing without changing desktop. */
  .h-content {
    margin-top: 3em;
  }

  /*
   * Mobile venue index:
   * keep a compact thumbnail and add a quiet route cue in place of hover colour.
   */
  .location__link {
    grid-template-columns: minmax(0, 1fr) clamp(5.5rem, 25vw, 7.75rem);
    grid-template-rows: minmax(3.25rem, auto) auto;
    column-gap: clamp(1rem, 4vw, 1.5rem);
    row-gap: 0.6rem;
    align-items: center;
    min-height: 8.5rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    display: grid;
    position: relative;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .location__heading,
  .location__heading[style*="width"] {
    grid-area: 1 / 1 / 2 / 2;
    align-self: center;
    width: 100% !important;
    max-width: 13rem;
    margin-bottom: 0;
    font-size: clamp(1.65rem, 7vw, 2.25rem);
    line-height: 0.95;
  }

  .location__heading img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 3rem;
    object-fit: contain;
    object-position: left center;
  }

  .location__img {
    grid-area: 1 / 2 / 3 / 3;
    display: block !important;
    width: 100%;
    height: clamp(5.5rem, 22vw, 6.75rem);
    object-fit: cover;
    filter: grayscale(100%);
    transition:
      filter 180ms ease,
      transform 180ms ease;
  }

  .location__link::after {
    content: "View venue  ↗";
    grid-area: 2 / 1 / 3 / 2;
    align-self: end;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-family: Brown, sans-serif;
    font-size: 0.65rem;
    line-height: 1;
  }

  .location__link:active {
    background-color: #f2f2f2;
  }

  .location__link:active .location__img {
    filter: grayscale(0%);
    transform: scale(0.98);
  }

  .location__link:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: -7px;
  }

  /* Give the venue contact links comfortable touch targets. */
  .venue__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .contact a[href^="mailto:"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* The exported footer uses inline two-column desktop styles. */
  .footer {
    padding-top: 32px;
  }

  .footer-upper-container {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 28px !important;
    width: 100% !important;
    padding-bottom: 24px !important;
  }

  .footer-upper-left,
  .footer-upper-right {
    width: 100% !important;
    max-width: 100% !important;
  }

  .footer-upper-left {
    display: flex;
    align-items: flex-start;
  }

  .footer-upper-right {
    align-items: stretch !important;
    padding-top: 0 !important;
  }

  .footer__logo {
    width: min(100%, 18rem);
    height: auto;
    margin-bottom: 0;
  }

  .contact-details {
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .contact-details > div {
    width: 100%;
    max-width: 100%;
  }

  .contact-details > div:first-child > div:first-child {
    width: 100%;
  }

  .contact-details > div:first-child > div:last-child {
    display: none !important;
  }

  .contact-details a,
  .address a {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100% !important;
    min-height: 44px;
    font-size: clamp(19px, 4vw, 22px) !important;
    line-height: 1.35 !important;
    word-break: normal !important;
    overflow-wrap: anywhere;
  }

  .address {
    align-items: flex-start !important;
    width: 100%;
    max-width: 100%;
    margin-top: 18px;
  }

  .footer__wrp {
    row-gap: 0;
  }

  .footer__wrp__content {
    align-items: center;
  }

  .footer__wrp__content > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Contain the exported gallery fragment on Heritage Hall at 768px. */
  .venue__gallery {
    max-width: 100%;
    overflow: hidden;
  }

  .venue__gallery__img-wrp {
    min-width: 0;
    font-size: 0;
  }

  .venue__gallery__img,
  .venue__main-img,
  .team__member__fig__img,
  .news__item__fig__img {
    display: block;
    max-width: 100%;
  }

  /* Keep the custom enquiry form inside its mobile container. */
  .ch-enquiry-section input,
  .ch-enquiry-section select,
  .ch-enquiry-section textarea,
  .ch-enquiry-section button {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  /*
   * These three venue pages have fixed inline desktop gallery heights.
   * Once their three columns stack, the fixed height crops or overlaps images.
   */
  .venue__gallery > .grid-cl-3 {
    height: auto !important;
    overflow: visible !important;
  }

  .venue__gallery__img-wrp,
  .venue__gallery__img {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .location__link {
    grid-template-columns: minmax(0, 1fr) 5.5rem;
    min-height: 7.75rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .location__heading,
  .location__heading[style*="width"] {
    max-width: 10.5rem;
    font-size: clamp(1.5rem, 7.5vw, 1.85rem);
  }

  .location__heading img {
    max-height: 2.4rem;
  }

  .location__img {
    height: 5.5rem;
  }

  .footer {
    padding-left: 20px;
    padding-right: 20px;
  }

  .footer-upper-container {
    gap: 22px !important;
  }

  .footer__logo {
    width: min(100%, 15rem);
  }

  .contact-details a,
  .address a {
    font-size: 18px !important;
  }

  .footer__wrp {
    flex-direction: column;
    align-items: stretch;
  }

  .footer__wrp__content {
    justify-content: flex-start;
  }
}