/* Lookbook pages (Track D)
   The real theme sets the image-gallery grid variables inline per-section via
   <style data-shopify>. We reproduce those values here so the already-linked
   section-image-gallery.css renders a clean 2-col mobile / 3-col desktop grid
   with full-width cover images. Mobile-first. */

/* ---- Rich-text intro section ---- */
.rich-text-section .rich-text.section-lookbook__rich-text-padding {
  padding-top: 4rem;
  padding-bottom: 1.5rem;
}

@media screen and (min-width: 750px) {
  .rich-text-section .rich-text.section-lookbook__rich-text-padding {
    padding-top: 6rem;
    padding-bottom: 2rem;
  }
}

/* ---- Image gallery section ---- */
.image-gallery-section .image-gallery.section-lookbook__gallery-padding {
  /* Grid configuration consumed by section-image-gallery.css */
  --gallery-desktop-columns: 3;
  --gallery-mobile-columns: 2;
  --gallery-side-margin: 16px;
  --gallery-image-gap: 8px;

  padding-top: 1.2rem;
  padding-bottom: 0;
}

/* Keep the intro paragraph readable on mobile */
.rich-text-section .rich-text__text.rte > p {
  margin: 0 0 1em;
}

.rich-text-section .rich-text__text.rte > p:last-child {
  margin-bottom: 0;
}

/* Full-bleed cover images, consistent aspect on every tile */
.image-gallery-section .image-gallery__image {
  aspect-ratio: 0.8;
}

.image-gallery-section .image-gallery__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Heading group spacing tweak for mobile */
.image-gallery-section .image-gallery__heading-group {
  margin-bottom: 1.25rem;
}

@media screen and (min-width: 750px) {
  .image-gallery-section .image-gallery__heading-group {
    margin-bottom: 2rem;
  }
}