/*
 * Nur & Nafs — photo art direction, reviewed image by image.
 * Load after design.css and responsive.css.
 * Instagram collages carry their own typography: retain the complete source
 * instead of filling a landscape/cropped box inherited from the first site.
 */

/* Native proportions prevent faces, prayer mats and embedded captions being cut. */
.care-editorial .care-photo > img[data-media-slot],
.service-hero > img[data-media-slot^="service-"],
.wide-image > img[data-media-slot="approach"],
.wide-image > img[data-media-slot="experience"],
.retreat-story img[data-media-slot="retreat-story"],
.full-bleed > img[data-media-slot="retreat-wide"],
.retreat-closing img[data-media-slot="retreat-closing"],
.portrait-intro > img[data-media-slot="melissa"],
.contact-information img[data-media-slot="contact"],
.gallery-photo > img[data-media-slot^="gallery-"],
img[data-media-slot^="journal-"] {
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
}

/* Four movement/sisterhood collages: keep both halves and their small captions. */
.care-editorial .care-photo:has(> img[data-media-slot]) {
  align-self: center;
}

/* Put the site's card copy beneath the source's own copy and faces. */
.destination:has(> img[data-media-slot="home-movement"]),
.destination:has(> img[data-media-slot="home-retreat"]) {
  color: var(--ink);
  background: #f2f0ea;
}
.destination:has(> img[data-media-slot="home-movement"])::after,
.destination:has(> img[data-media-slot="home-retreat"])::after {
  display: none;
}
.destination > img[data-media-slot="home-movement"],
.destination > img[data-media-slot="home-retreat"] {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
}
.destination:has(> img[data-media-slot="home-movement"]) > div,
.destination:has(> img[data-media-slot="home-retreat"]) > div {
  position: static;
  padding: clamp(24px, 3vw, 40px);
}
.destination:has(> img[data-media-slot]) h2 {
  margin-top: 16px;
  margin-bottom: 22px;
}

/* The chalet is a two-part portrait, not a 375px panorama. */
.map-block:has(> img[data-media-slot="home-editions"]) {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  align-items: center;
  gap: 9%;
  max-width: 1400px;
  margin-inline: auto;
}
.map-block:has(> img[data-media-slot="home-editions"]) .map-caption {
  display: block;
  margin: 0;
}
.map-block:has(> img[data-media-slot="home-editions"]) .map-caption > a {
  display: inline-flex;
  margin-top: 22px;
}
.map-block > img[data-media-slot="home-editions"] {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  background: transparent;
}

/* The sunset is decorative here; keep its horizon in the visible background. */
.topics-photo {
  background-position: center 61%;
}

/* Dedicated portrait frames replace the old forced horizontal banners. */
.wide-image:has(> img[data-media-slot="approach"]),
.wide-image:has(> img[data-media-slot="experience"]),
.full-bleed:has(> img[data-media-slot="retreat-wide"]) {
  width: min(720px, calc(100% - 2 * var(--page-gutter, 24px)));
  max-width: none;
  margin-inline: auto;
}

/* Service pages get a flexible portrait column rather than a stretched crop. */
.service-hero:has(> img[data-media-slot^="service-"]) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  min-height: 0;
  align-items: center;
  gap: 7%;
  padding: 64px var(--page-gutter, 24px);
}
.service-hero:has(> img[data-media-slot^="service-"]) > div {
  padding: 0;
}
.service-hero > img[data-media-slot^="service-"] {
  align-self: center;
  justify-self: center;
  max-width: 640px;
}

/* A 360x640 sunset stays near its source size, beside the retreat introduction. */
.immersive-heading:has(> img[data-media-slot="retreat-cover"]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  align-items: center;
  gap: 8%;
  height: auto;
  min-height: 0;
  padding: 64px 8%;
  color: var(--ink);
  background: #f2f0ea;
}
.immersive-heading:has(> img[data-media-slot="retreat-cover"])::after {
  display: none;
}
.immersive-heading > img[data-media-slot="retreat-cover"] {
  position: static;
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
}
.immersive-heading:has(> img[data-media-slot="retreat-cover"]) > div {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  max-width: 680px;
}
.immersive-heading:has(> img[data-media-slot="retreat-cover"]) h1 {
  font-size: clamp(42px, 5.6vw, 80px);
}

/* All four interior views stay visible, with no artificial minimum height. */
.retreat-story:has(img[data-media-slot="retreat-story"]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: 9%;
  padding: 100px 8%;
}
.retreat-story:has(img[data-media-slot="retreat-story"]) .retreat-text {
  width: auto;
}
.retreat-story:has(img[data-media-slot="retreat-story"]) figure {
  width: 100%;
  min-height: 0;
  margin: 0;
  align-self: center;
}
.retreat-closing:has(img[data-media-slot="retreat-closing"]) > figure {
  align-self: center;
}

/* Full portrait: Mélissa's face, seated pose and pool all remain in the frame. */
.portrait-intro > img[data-media-slot="melissa"] {
  max-width: 640px;
  justify-self: center;
}

/* The riad collage is meaningful on small screens too. */
.contact-information img[data-media-slot="contact"] {
  display: block;
  max-width: 520px;
  margin-inline: auto;
}

/* Four complete collages, large enough to read rather than four tiny columns. */
.complete-gallery:has(img[data-media-slot^="gallery-"]) {
  columns: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(20px, 3vw, 40px);
  max-width: 1320px;
  margin-inline: auto;
  padding: 0 var(--page-gutter, 24px) 100px;
}
.complete-gallery:has(img[data-media-slot^="gallery-"]) .gallery-photo {
  margin: 0;
}

@media (max-width: 900px) {
  .immersive-heading:has(> img[data-media-slot="retreat-cover"]) {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
    gap: 6%;
    padding-inline: var(--page-gutter, 24px);
  }
}

@media (max-width: 700px) {
  .care-editorial .care-photo > img[data-media-slot] {
    height: auto;
    aspect-ratio: auto;
  }
  .destination:has(> img[data-media-slot="home-movement"]),
  .destination:has(> img[data-media-slot="home-retreat"]) {
    width: calc(100% - 48px);
    margin-inline: 24px;
  }
  .destination:has(> img[data-media-slot="home-movement"]) {
    margin-top: 0;
    margin-bottom: 32px;
  }
  .map-block:has(> img[data-media-slot="home-editions"]) {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding-inline: 24px;
  }
  .map-block > img[data-media-slot="home-editions"] {
    max-width: 520px;
    justify-self: center;
  }
  .service-hero:has(> img[data-media-slot^="service-"]) {
    display: flex;
    flex-direction: column-reverse;
    gap: 32px;
    padding: 32px 24px 48px;
  }
  .service-hero > img[data-media-slot^="service-"] {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
  }
  .immersive-heading:has(> img[data-media-slot="retreat-cover"]) {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 32px;
    padding: 48px 24px;
  }
  .immersive-heading > img[data-media-slot="retreat-cover"] {
    width: min(100%, 320px);
    align-self: center;
  }
  .retreat-story:has(img[data-media-slot="retreat-story"]) {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 64px 24px;
  }
  .retreat-story:has(img[data-media-slot="retreat-story"]) figure {
    width: 100%;
    max-width: 520px;
    margin: 0;
  }
  .complete-gallery:has(img[data-media-slot^="gallery-"]) {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding-inline: 24px;
    padding-bottom: 64px;
  }
}