/* The photographed hero replaces the table scene on phones in both home pages. */
.home-photo .hero-gathering {
  display: none;
}

/* Desktop: the landscape photo fills the hero; the doorway stands over its calm right side. */
@media (width >= 48rem) {
  .home-photo .hero-sufra.hero-door {
    background: var(--sand);
  }

  :root:is([data-theme="dark"], :has(#theme-dark:target)) .home-photo .hero-sufra.hero-door {
    background: var(--navy);
  }

  .home-photo .hero-gathering {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .home-photo .hero-gathering img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 22% 50%;
  }

  .home-photo .hero-door .sufra-field {
    display: none;
  }

  .home-photo .hero-door .table-scene .dish {
    animation: none;
  }

  .home-photo .hero-door .sufra-invitation {
    position: relative;
    z-index: 1;
  }
}

@media (width < 48rem) {
  .home-photo .hero-sufra.hero-door {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
    background: var(--sand);
  }

  .home-photo .hero-door .sufra-field {
    display: none;
  }

  .home-photo .hero-door .table-scene .dish {
    animation: none;
  }

  .home-photo .hero-gathering,
  .home-photo .hero-gathering img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
  }

  .home-photo .hero-gathering img {
    height: auto;
    object-fit: cover;
    object-position: center;
  }

  /* A 3:4 photo is 133.33vw high; the doorway overlaps its lower quarter. */
  .home-photo .hero-door .sufra-invitation {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-block-start: calc(-100vw / 3);
  }

  .home-photo .hero-door .door-shell {
    width: 81%;
    margin-inline: auto;
  }

  /* The warm outline remains visible over the photograph in either theme. */
  .home-photo .hero-door .door-halo > span {
    border-color: var(--stone);
  }
}

/* Shared home promise copy: Mist Blue at night, readable Stone by day. */
:root .home-photo main .preparation-arches .arch-promises p {
  color: var(--muted);
  opacity: 1;
}

/* The home caption motifs use Desert Clay on the navy theme. */
:root:is([data-theme="dark"], :has(#theme-dark:target)) .home-photo .preparation-arches .arch-caption svg {
  color: var(--clay);
}
:root:has(#theme-light:target) .home-photo .preparation-arches .arch-caption svg {
  color: var(--mist);
}

/* English home caption: accepted display face and compact Live scale. */
:root:lang(en) .home-photo main .preparation-arches .arch-caption {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.2;
  gap: .75rem;
}
:root:lang(en) .home-photo main .preparation-arches .arch-caption > span {
  max-inline-size: 38ch;
  text-wrap: balance;
}
@media (min-width: 48rem) {
  :root:lang(en) .home-photo main .preparation-arches .arch-caption {
    font-size: 1.25rem;
  }
}

/* English booking introductions use Mist Blue on the navy theme. */
:root:lang(en):is([data-theme="dark"], :has(#theme-dark:target)) .home-photo .booking-chat :is(.section-intro > p, .what-to-send > div > p:not(.send-lede)) {
  color: var(--mist);
}
:root:lang(en):has(#theme-light:target) .home-photo .booking-chat :is(.section-intro > p, .what-to-send > div > p:not(.send-lede)) {
  color: var(--booking-text);
}