/*
 * One mobile contact/footer surface across every page.
 *
 * The page photo stays owned by the page itself.  Contact and Agencies are
 * the two exceptions: their old photo lived inside <main>, so it stopped
 * before the footer in Chromium.  They now use the same fixed .shell canvas
 * as About.  The document remains paper-coloured outside .shell, which keeps
 * native overscroll free of imagery.
 */
@layer mobile-footer {
  @media (max-width: 959px) {
    /* Keep every footer composition in normal document flow.  The guide pages
       previously forced a 360px contact row, which made their photo band
       visibly taller than the other pages. */
    html body .mobile-footer-composition,
    html body .mobile-footer-composition--with-contact {
      height: auto !important;
      min-height: 0 !important;
      grid-template-rows: auto auto auto !important;
      background: transparent !important;
      background-color: transparent !important;
      background-image: none !important;
      color: #fff !important;
    }

    html body .mobile-footer-composition > .site-contact-cta {
      height: auto !important;
      min-height: 0 !important;
      max-height: none !important;
      background-color: transparent !important;
      background-image: none !important;
    }

    /* Article and destination pages used a more specific minimum height than
       the shared footer.  Override it explicitly so their contact photograph
       starts at the same point as About, Services and Tours. */
    html body:is([data-page="blog-article"], [data-page="destination"]) .mobile-footer-composition--with-contact {
      height: auto !important;
      min-height: 0 !important;
      grid-template-rows: auto auto auto !important;
    }

    html body:is([data-page="blog-article"], [data-page="destination"]) .mobile-footer-composition--with-contact > section.site-contact-cta {
      min-height: 0 !important;
    }

    html body .mobile-footer-composition :is(nav.prefooter-nav, footer.site-footer),
    html body .mobile-footer-composition :is(
      nav.prefooter-nav .prefooter-nav__inner,
      nav.prefooter-nav .prefooter-nav__links,
      nav.prefooter-nav .prefooter-nav__destinations,
      nav.prefooter-nav .prefooter-nav__contact,
      footer.site-footer .footer-grid,
      footer.site-footer .footer-meta
    ) {
      background: transparent !important;
      background-color: transparent !important;
      background-image: none !important;
      color: #fff !important;
    }

    html body .mobile-footer-composition :is(nav.prefooter-nav, footer.site-footer),
    html body .mobile-footer-composition :is(nav.prefooter-nav, footer.site-footer) :is(
      a,
      p,
      span,
      small,
      strong,
      div,
      address,
      b
    ) {
      color: #fff !important;
      -webkit-text-fill-color: #fff !important;
    }

    html body .mobile-footer-composition :is(nav.prefooter-nav, footer.site-footer) svg,
    html body .mobile-footer-composition :is(nav.prefooter-nav, footer.site-footer) svg :is(path, circle, rect, line, polyline) {
      color: #fff !important;
      fill: currentColor !important;
      stroke: currentColor !important;
    }

    html body .mobile-footer-composition footer.site-footer .footer-brand > img {
      filter: brightness(0) invert(1) !important;
    }

    html body .mobile-footer-composition footer.site-footer :is(
      .footer-mobile-company,
      .footer-company--legal,
      .footer-meta,
      .footer-meta p
    ) {
      color: #fff !important;
      -webkit-text-fill-color: #fff !important;
    }

    /* The payment strip is an image and should retain its payment-brand
       colours while every surrounding footer surface remains transparent. */
    html body .mobile-footer-composition footer.site-footer .footer-payments--mobile img {
      filter: none !important;
    }

    /* Contact and Agencies had their fixed image attached to <main>, while
       their footer was a sibling of <main>.  Move the one photo canvas to the
       shell, matching About, then remove the old competing canvas. */
    html body[data-page="contact"] {
      --unified-mobile-footer-photo: url("/assets/contact-desert.webp?v=asset-q85-20260928");
      --unified-mobile-footer-photo-position: center;
    }

    html body[data-page="agencies"] {
      --unified-mobile-footer-photo: url("/assets/agencies-coast.webp?v=asset-q85-20260928");
      --unified-mobile-footer-photo-position: 70% center;
    }

    html body:is([data-page="contact"], [data-page="agencies"]) .shell {
      position: relative !important;
      isolation: isolate !important;
    }

    html body:is([data-page="contact"], [data-page="agencies"]) .shell::before {
      content: "" !important;
      display: block !important;
      position: fixed !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100lvh !important;
      z-index: -1 !important;
      pointer-events: none !important;
      background-image: linear-gradient(rgba(0, 0, 0, .19), rgba(0, 0, 0, .24)), var(--unified-mobile-footer-photo) !important;
      background-position: center, var(--unified-mobile-footer-photo-position, center) !important;
      background-size: cover, cover !important;
      background-repeat: no-repeat, no-repeat !important;
      filter: brightness(.95) contrast(1.1) saturate(.94) !important;
      transform: translateZ(0) !important;
      backface-visibility: hidden !important;
    }

    html body:is([data-page="contact"], [data-page="agencies"]) :is(.contact-page, .agencies-page)::before {
      content: none !important;
      display: none !important;
    }

    /* Legal is the other page that did not own its image on .shell.  Its
       existing hero image is reused so its contact/footer has no generic
       substitute image underneath it. */
    html body[data-page="legal"] .shell {
      position: relative !important;
      isolation: isolate !important;
    }

    html body[data-page="legal"] .shell::before {
      content: "" !important;
      display: block !important;
      position: fixed !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100lvh !important;
      z-index: -1 !important;
      pointer-events: none !important;
      background-image: linear-gradient(rgba(0, 0, 0, .28), rgba(0, 0, 0, .36)), var(--alq-regular-hero-image) !important;
      background-position: center, var(--alq-regular-hero-position, center) !important;
      background-size: cover, cover !important;
      background-repeat: no-repeat, no-repeat !important;
      transform: translateZ(0) !important;
      backface-visibility: hidden !important;
    }

    html body[data-page="legal"] .mobile-footer-composition--with-contact::before {
      content: none !important;
      display: none !important;
    }

    /* Mobile footer navigation: three compact, left-aligned columns centered
       as a group.  The contact controls remain in the contact section above. */
    html body .mobile-footer-composition nav.prefooter-nav {
      padding: 12px 16px 6px !important;
    }

    html body .mobile-footer-composition nav.prefooter-nav .prefooter-nav__inner {
      display: grid !important;
      /* Sit slightly inside the contact box.  The flexible middle track
         keeps Tours to the left while the two destination columns sit together
         at the right. */
      grid-template-columns: max-content minmax(0, 1fr) max-content max-content !important;
      grid-template-rows: repeat(4, auto) !important;
      justify-content: stretch !important;
      align-items: start !important;
      column-gap: 12px !important;
      row-gap: 0 !important;
      width: calc(100vw - 64px) !important;
      max-width: calc(100vw - 64px) !important;
      margin-inline: auto !important;
    }

    /* A single editorial divider sits in the open track between the
       left navigation column and the grouped destination columns. */
    html body .mobile-footer-composition nav.prefooter-nav .prefooter-nav__inner::before {
      content: "" !important;
      display: block !important;
      grid-column: 2 !important;
      grid-row: 1 / 5 !important;
      justify-self: center !important;
      align-self: stretch !important;
      width: 1px !important;
      min-height: 100% !important;
      background: rgba(255, 255, 255, .42) !important;
    }

    html body .mobile-footer-composition nav.prefooter-nav :is(
      .prefooter-nav__links,
      .prefooter-nav__destinations
    ) {
      display: contents !important;
    }

    html body .mobile-footer-composition nav.prefooter-nav .prefooter-nav__links > :is(
      .mobile-footer__heading,
      a:nth-of-type(1),
      a:nth-of-type(5),
      a:nth-of-type(6)
    ),
    html body .mobile-footer-composition nav.prefooter-nav .prefooter-nav__contact {
      display: none !important;
    }

    html body .mobile-footer-composition nav.prefooter-nav :is(
      .prefooter-nav__links > a,
      .prefooter-nav__destinations > span,
      .prefooter-nav__destinations > a
    ) {
      display: block !important;
      width: auto !important;
      min-height: 0 !important;
      margin: 0 !important;
      padding: 3px 0 !important;
      justify-self: start !important;
      align-self: start !important;
      text-align: left !important;
    }

    html body .mobile-footer-composition nav.prefooter-nav .prefooter-nav__links > a {
      font: 400 14px/1.4 Arial, Helvetica, sans-serif !important;
    }

    /* Column 1: Tours, About, Services, Legal. */
    html body .mobile-footer-composition nav.prefooter-nav .prefooter-nav__links > a:nth-of-type(2) {
      grid-column: 1 !important;
      grid-row: 1 !important;
    }
    html body .mobile-footer-composition nav.prefooter-nav .prefooter-nav__links > a:nth-of-type(4) {
      grid-column: 1 !important;
      grid-row: 2 !important;
    }
    html body .mobile-footer-composition nav.prefooter-nav .prefooter-nav__links > a:nth-of-type(3) {
      grid-column: 1 !important;
      grid-row: 3 !important;
    }
    html body .mobile-footer-composition nav.prefooter-nav .prefooter-nav__links > a:nth-of-type(7) {
      grid-column: 1 !important;
      grid-row: 4 !important;
    }
    html body .mobile-footer-composition nav.prefooter-nav .prefooter-nav__links > :is(
      a:nth-of-type(2),
      a:nth-of-type(3),
      a:nth-of-type(4),
      a:nth-of-type(7)
    ) {
      font: 700 14px/1.4 Arial, Helvetica, sans-serif !important;
    }

    /* Columns 2 and 3: destinations. */
    html body .mobile-footer-composition nav.prefooter-nav .prefooter-nav__destinations > span {
      grid-column: 2 !important;
      grid-row: 1 !important;
      color: #fff !important;
      -webkit-text-fill-color: #fff !important;
      font: 700 14px/1.4 Arial, Helvetica, sans-serif !important;
    }
    html body .mobile-footer-composition nav.prefooter-nav .prefooter-nav__destinations > a {
      font: 700 14px/1.4 Arial, Helvetica, sans-serif !important;
    }
    html body .mobile-footer-composition nav.prefooter-nav .prefooter-nav__destinations > a:nth-of-type(1) {
      grid-column: 2 !important;
      grid-row: 2 !important;
    }
    html body .mobile-footer-composition nav.prefooter-nav .prefooter-nav__destinations > a:nth-of-type(2) {
      grid-column: 2 !important;
      grid-row: 3 !important;
    }
    html body .mobile-footer-composition nav.prefooter-nav .prefooter-nav__destinations > a:nth-of-type(3) {
      grid-column: 2 !important;
      grid-row: 4 !important;
    }
    html body .mobile-footer-composition nav.prefooter-nav .prefooter-nav__destinations > a:nth-of-type(4) {
      grid-column: 3 !important;
      grid-row: 1 !important;
    }
    html body .mobile-footer-composition nav.prefooter-nav .prefooter-nav__destinations > a:nth-of-type(5) {
      grid-column: 3 !important;
      grid-row: 2 !important;
    }
    html body .mobile-footer-composition nav.prefooter-nav .prefooter-nav__destinations > a:nth-of-type(6) {
      grid-column: 3 !important;
      grid-row: 3 !important;
    }
    html body .mobile-footer-composition nav.prefooter-nav .prefooter-nav__destinations > a:nth-of-type(7) {
      grid-column: 3 !important;
      grid-row: 4 !important;
    }

    html body .mobile-footer-composition footer.site-footer .footer-brand > img {
      width: 192px !important;
      height: auto !important;
      filter: brightness(0) invert(1) !important;
    }

    /* Keep the first navigation column on the contact box's left edge while
       grouping the two destination columns on its right edge. */
    html body .mobile-footer-composition nav.prefooter-nav .prefooter-nav__destinations > :is(
      span,
      a:nth-of-type(1),
      a:nth-of-type(2),
      a:nth-of-type(3)
    ) {
      grid-column: 3 !important;
    }

    html body .mobile-footer-composition nav.prefooter-nav .prefooter-nav__destinations > :is(
      a:nth-of-type(4),
      a:nth-of-type(5),
      a:nth-of-type(6),
      a:nth-of-type(7)
    ) {
      grid-column: 4 !important;
    }
  }
}