/**
 * Phone view (owner, 7 Nov 2026: "in mobile view make show well like ace and image shows clear"). Loaded only up to 767px wide
 * (media attribute in functions.php), so the computer view cannot change.
 *
 * ACE's pattern in Absolutely Kili's own colours: a clear photo on top with nothing over it, then the words on a solid band.
 * Before this the hero photos sat behind dark overlays and stretched to the height of everything on them (1,309px on the homepage
 * for a landscape photo), which is why they looked soft. Flat colour, square corners. Browsers without :has() keep the old hero.
 */

/* ---------- Heroes and closing bands: photo, then words ---------- */
:is(section:has(> img.ken-burns), .att-home-hero-pattern, .exh-hero, .akm-hero, .akl-hero, .twx-hero, .twx-cta, .akd-hero, .akb-hero, section:has(> .bg-green-900\/80)) {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  background: var(--ink) !important;
  color: #fff;
  isolation: auto;
}

/* The photo: sharp, full colour, nothing moving, nothing over it. */
:is(section:has(> img.ken-burns), .att-home-hero-pattern, .exh-hero, .akm-hero, .akl-hero, .twx-hero, .twx-cta, .akd-hero, .akb-hero, section:has(> .bg-green-900\/80)) > :is(img.ken-burns, img.absolute, .exh-hero__bg, .akm-hero__bg, .akl-hero__bg, .twx-hero__bg, .twx-cta__bg, .akd-hero__bg, .akb-hero__bg) {
  position: static !important;
  inset: auto !important;
  order: -1;
  display: block !important;
  flex: none !important;
  width: 100% !important;
  height: clamp(230px, 64vw, 320px) !important;
  max-width: none !important;
  object-fit: cover !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
  z-index: auto !important;
}

/* Overlays and veils go; a video behind the words has no place on a phone hero. */
:is(section:has(> img.ken-burns), .att-home-hero-pattern, .exh-hero, .akm-hero, .akl-hero, .twx-hero, .twx-cta, .akd-hero, .akb-hero, section:has(> .bg-green-900\/80)) > :is(.ak-hero-scrim-x, .ak-hero-scrim-y, .att-hero-scrim, .bg-gradient-to-t, .bg-green-900\/80, .exh-hero__veil, .akm-hero__veil, .akl-hero__veil, .twx-hero__veil, .twx-cta__veil, .akd-hero__veil, .hero-video) {
  display: none !important;
}

/* The words: on the band, with room around them. */
:is(section:has(> img.ken-burns), .att-home-hero-pattern, .exh-hero, .akm-hero, .akl-hero, .twx-hero, .akd-hero, .akb-hero, section:has(> .bg-green-900\/80)) > :is(.container-x, .ak-hero-column, .exh-shell, .akm-hero__inner, .akl-hero__inner, .twx-shell, .twx-hero__inner, .akd-hero__inner, .akb-hero__inner) {
  position: relative !important;
  width: 100%;
  min-height: 0 !important;
  padding-top: 1.9rem !important;
  padding-bottom: 2.4rem !important;
}
/* These two page shells set their own width; keep it, so the words keep their margin. */
.twx-hero > .twx-shell,
.twx-cta > .twx-shell,
.exh-hero > .exh-shell { width: 92vw !important; margin-inline: auto !important; }
.twx-cta > .twx-shell { position: relative !important; padding-top: 1.9rem !important; padding-bottom: 2.4rem !important; }

/* Tour pages: the same pattern, built from a background photo and an overlay on ::after. */
.luxp .lx-hero {
  flex-direction: column !important;
  align-items: stretch !important;
  min-height: 0 !important;
  background: var(--ink) !important;
}
.luxp .lx-hero__img {
  position: static !important;
  inset: auto !important;
  order: -1;
  flex: none !important;
  width: 100% !important;
  height: clamp(230px, 64vw, 320px) !important;
  background-position: center !important;
  transform: none !important;
  animation: none !important;
  filter: none !important;
  opacity: 1 !important;
}
.luxp .lx-hero::after,
.luxp .lx-hero::before { display: none !important; }
.luxp .lx-hero__inner { padding: 1.7rem 0 2.2rem !important; }
.luxp .lx-cta {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  background: var(--ink) !important;
}
.luxp .lx-cta__img {
  position: static !important;
  inset: auto !important;
  order: -1;
  flex: none !important;
  width: 100% !important;
  height: clamp(230px, 64vw, 320px) !important;
}
.luxp .lx-cta::after { display: none !important; }
.luxp .lx-cta__in { width: 100%; padding: 1.9rem 1.25rem 2.4rem !important; }

/* A facts card used to overlap the bottom of the photo: with the words on a band it would cover them. */
.akm-facts { margin-top: 0 !important; padding-top: 1.5rem; }

/* The site's stamp sits on the photo, as ACE's seal does. */
:is(section:has(> img.ken-burns), .att-home-hero-pattern, section:has(> .bg-green-900\/80)) > .ak-stamp {
  position: absolute !important;
  top: .9rem !important;
  right: .9rem !important;
  bottom: auto !important;
  left: auto !important;
  width: 84px !important;
  height: 84px !important;
  opacity: .95;
  transform: rotate(8deg);
}
:is(section:has(> img.ken-burns), .att-home-hero-pattern, section:has(> .bg-green-900\/80)) { position: relative !important; }

/* Homepage: the proposal form comes straight after the words. */
.att-home-hero-pattern > .ak-hero-column .att-hero-quote-card { margin-top: .4rem; }

/* ---------- Rhythm: closer to ACE's, so a phone scrolls less ---------- */
.section { padding-top: 2.75rem; padding-bottom: 2.75rem; }

/* ---------- Floating buttons: smaller, so they cover less of what you are reading ---------- */
.att-floating-whatsapp { width: 48px !important; height: 48px !important; min-width: 0 !important; }
.att-floating-whatsapp svg { width: 24px; height: 24px; }
.to-top { width: 36px !important; height: 36px !important; }

/* ---------- Photos inside the page: full width of their card, never squeezed ---------- */
main img { max-width: 100%; }