/* =========================================
   RESPONSIVE PHOTO GALLERY
   Base styles
   ========================================= */
.rsp-photo-gallery-block {
  width: 100%;
}

.rsp-photo-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  margin: 24px auto 0;
}


/* =========================================
   GALLERY ITEM
   ========================================= */

.rsp-photo-gallery__item {
  flex-grow: var(--image-ratio);
  flex-shrink: 1;
  flex-basis: 0;
  min-width: 180px;
  margin: 0;
  text-align: center;
}


/* =========================================
   IMAGE
   ========================================= */

.rsp-photo-gallery__image {
  width: 100%;
}

.rsp-photo-gallery__item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
}

.rsp-photo-gallery__image img{
  object-position: var(--image-focus, center center);
}

/* =========================================
   CAPTION
   ========================================= */

.rsp-photo-gallery__caption {
  margin-top: 6px;
  padding: 0 4px;
  font-size: 12px;
  line-height: 1.35;
  color: #666;
  text-align: center;
}

.rsp-photo-gallery__group-caption {
  margin: 8px 0 20px;
  padding: 0 8px;
  font-size: 13px;
  line-height: 1.4;
  color: #666;
  text-align: center;
  font-style: italic;
}

/* =========================================
   3 IMAGE GALLERY
   ========================================= */

.rsp-photo-gallery--3 {
  display: grid;
  gap: 12px;
}

.rsp-photo-gallery--3 .rsp-photo-gallery__item {
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

.rsp-photo-gallery--3 .rsp-photo-gallery__image {
  width: 100%;
  min-height: 0;
  overflow: hidden;
}

.rsp-photo-gallery--3 .rsp-photo-gallery__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* =========================================
   3 IMAGES:
   TWO LANDSCAPE + ONE PORTRAIT

   Portrait = tall left tile
   Landscapes = stacked right tiles
   ========================================= */

.rsp-photo-gallery.rsp-photo-gallery--3.rsp-photo-gallery--l2-p1 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 12px;
  width: 100%;
  aspect-ratio: 1.75 / 1;
}

/* Each figure fills its assigned grid area */
.rsp-photo-gallery--l2-p1 .rsp-photo-gallery__item {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Portrait occupies the full left side */
.rsp-photo-gallery--l2-p1 .rsp-photo-gallery__item--portrait {
  grid-column: 1;
  grid-row: 1 / 3;
}

/* Landscapes occupy the two right-hand rows */
.rsp-photo-gallery--l2-p1 .rsp-photo-gallery__item--landscape {
  grid-column: 2;
  min-height: 0;
}

/* Image area fills the available figure space */
.rsp-photo-gallery--l2-p1 .rsp-photo-gallery__image {
  width: 100%;
  min-height: 0;
  flex: 1 1 0;
  overflow: hidden;
}

/* Photographs completely fill their tile */
.rsp-photo-gallery--l2-p1 .rsp-photo-gallery__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Caption does not shrink the photograph */
.rsp-photo-gallery--l2-p1 .rsp-photo-gallery__caption {
  flex: 0 0 auto;
  margin-top: 6px;
}


/* =========================================
   3 IMAGES:
   ONE LANDSCAPE + TWO PORTRAIT

   Landscape = full-width upper tile
   Portraits = two lower tiles
   ========================================= */

.rsp-photo-gallery.rsp-photo-gallery--3.rsp-photo-gallery--l1-p2 {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  grid-template-rows:
    minmax(0, 0.8fr)
    minmax(0, 1.2fr);

  gap: 12px;

  width: 100%;
  aspect-ratio: 1.6 / 1;
}


/* Landscape spans the top */

.rsp-photo-gallery--l1-p2
.rsp-photo-gallery__item--landscape {
  grid-column: 1 / 3;
  grid-row: 1;
}


/* Portraits occupy lower row */

.rsp-photo-gallery--l1-p2
.rsp-photo-gallery__item--portrait {
  grid-row: 2;
}


/* Let images fill their tiles */

.rsp-photo-gallery--l1-p2
.rsp-photo-gallery__image {
  flex: 1;
  min-height: 0;
}

.rsp-photo-gallery--l1-p2
.rsp-photo-gallery__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================
   3 IMAGES:
   THREE PORTRAITS

   Three equal portrait tiles in one row
   ========================================= */

.rsp-photo-gallery.rsp-photo-gallery--3.rsp-photo-gallery--l0-p3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto;
  gap: 12px;
  width: 100%;
  aspect-ratio: auto;
}

.rsp-photo-gallery--l0-p3 .rsp-photo-gallery__item {
  min-width: 0;
  min-height: 0;
  height: auto;
  display: flex;
  flex-direction: column;
}

.rsp-photo-gallery--l0-p3 .rsp-photo-gallery__image {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.rsp-photo-gallery--l0-p3 .rsp-photo-gallery__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--image-focus, center center);
}

.rsp-photo-gallery--l0-p3 .rsp-photo-gallery__caption {
  flex: 0 0 auto;
  margin-top: 6px;
}

/* =========================================
   4 IMAGES:
   FEATURE TOP

   Featured image = large full-width image
   Remaining 3 images = supporting row below
   ========================================= */

.rsp-photo-gallery.rsp-photo-gallery--4.rsp-photo-gallery--layout-feature-top {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: 12px;
  width: 100%;
}


/* Featured image spans the full top row */

.rsp-photo-gallery--4.rsp-photo-gallery--layout-feature-top
.rsp-photo-gallery__item--featured {
  grid-column: 1 / -1;
  grid-row: 1;
}


/* All gallery items remain flexible */

.rsp-photo-gallery--4.rsp-photo-gallery--layout-feature-top
.rsp-photo-gallery__item {
  min-width: 0;
  min-height: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}


/* Give the featured photograph plenty of impact */

.rsp-photo-gallery--4.rsp-photo-gallery--layout-feature-top
.rsp-photo-gallery__item--featured
.rsp-photo-gallery__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}


/* Supporting images use a consistent shape */

.rsp-photo-gallery--4.rsp-photo-gallery--layout-feature-top
.rsp-photo-gallery__item:not(.rsp-photo-gallery__item--featured)
.rsp-photo-gallery__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}


/* Images fill their allocated tiles */

.rsp-photo-gallery--4.rsp-photo-gallery--layout-feature-top
.rsp-photo-gallery__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--image-focus, center center);
}


/* Captions sit below photographs */

.rsp-photo-gallery--4.rsp-photo-gallery--layout-feature-top
.rsp-photo-gallery__caption {
  flex: 0 0 auto;
  margin-top: 6px;
}

/* =========================================
   4 IMAGES:
   FEATURE LEFT

   Featured image = large left tile
   Remaining 3 images = supporting stack right
   ========================================= */

.rsp-photo-gallery.rsp-photo-gallery--4.rsp-photo-gallery--layout-feature-left {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  grid-template-rows: repeat(3, minmax(0, 1fr));
  column-gap: 12px;
  row-gap: 12px;
  width: 100%;
  aspect-ratio: 1.5 / 1;
}


/* All items fill their allocated grid area */

.rsp-photo-gallery--4.rsp-photo-gallery--layout-feature-left
.rsp-photo-gallery__item {
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  margin: 0;

  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}


/* Featured image fills the entire left column */

.rsp-photo-gallery--4.rsp-photo-gallery--layout-feature-left
.rsp-photo-gallery__item--featured {
  grid-column: 1;
  grid-row: 1 / 4;
}


/* Supporting images automatically stack in the right column */

.rsp-photo-gallery--4.rsp-photo-gallery--layout-feature-left
.rsp-photo-gallery__item:not(.rsp-photo-gallery__item--featured) {
  grid-column: 2;
}


/* Image area fills the available figure space */

.rsp-photo-gallery--4.rsp-photo-gallery--layout-feature-left
.rsp-photo-gallery__image {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}


/* Images fill their tile and honour Image Focus */

.rsp-photo-gallery--4.rsp-photo-gallery--layout-feature-left
.rsp-photo-gallery__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--image-focus, center center);
}


/* Caption remains separate from image area */

.rsp-photo-gallery--4.rsp-photo-gallery--layout-feature-left
.rsp-photo-gallery__caption {
  margin-top: 6px;
}}

/* =========================================
   NATURAL LAYOUT

   Preserves original image proportions
   No cropping
   Maximum 3 images per row
   ========================================= */

.rsp-photo-gallery.rsp-photo-gallery--layout-natural {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  aspect-ratio: auto;
}


/* Natural gallery items */

.rsp-photo-gallery--layout-natural
.rsp-photo-gallery__item {
  flex-grow: var(--image-ratio);
  flex-shrink: 1;
  flex-basis: 0;

  min-width: 0;
  max-width: 100%;

  height: auto;
  margin: 0;

  display: flex;
  flex-direction: column;

  grid-column: auto;
  grid-row: auto;
}


/* Natural image geometry */

.rsp-photo-gallery--layout-natural
.rsp-photo-gallery__image {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  overflow: visible;
  flex: none;
}


/* Never crop Natural images */

.rsp-photo-gallery--layout-natural
.rsp-photo-gallery__image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}


/* Natural captions */

.rsp-photo-gallery--layout-natural
.rsp-photo-gallery__caption {
  flex: 0 0 auto;
  margin-top: 6px;
}

/* =========================================
   2-COLUMN GRID

   Works with 2+ images
   ========================================= */

.rsp-photo-gallery.rsp-photo-gallery--layout-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}


/* Each gallery item fills its grid cell */

.rsp-photo-gallery--layout-grid
.rsp-photo-gallery__item {
  min-width: 0;
  min-height: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}


/* Consistent tile shape */

.rsp-photo-gallery--layout-grid
.rsp-photo-gallery__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}


/* Fill tile while respecting image focus */

.rsp-photo-gallery--layout-grid
.rsp-photo-gallery__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--image-focus, center center);
}

/* Keep captions outside image geometry */
.rsp-photo-gallery--layout-grid
.rsp-photo-gallery__caption {
  flex: 0 0 auto;
  margin-top: 6px;
}

/* Centre the final image when the grid has an odd number */
.rsp-photo-gallery--layout-grid
.rsp-photo-gallery__item:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  width: calc(50% - 6px);
  justify-self: center;
}

/* =========================================
   GRID OVERRIDE FOR 3-IMAGE GALLERIES

   Explicit Grid choice overrides the
   automatic 3-image orientation layouts
   ========================================= */

.rsp-photo-gallery.rsp-photo-gallery--3.rsp-photo-gallery--layout-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto;
  aspect-ratio: auto;
  gap: 12px;
}


/* Reset automatic 3-image positioning */

.rsp-photo-gallery.rsp-photo-gallery--3.rsp-photo-gallery--layout-grid
.rsp-photo-gallery__item {
  grid-column: auto;
  grid-row: auto;
  width: auto;
  height: auto;
}


/* Restore consistent Grid tile geometry */

.rsp-photo-gallery.rsp-photo-gallery--3.rsp-photo-gallery--layout-grid
.rsp-photo-gallery__image {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  flex: none;
}


/* Fill the Grid tile */

.rsp-photo-gallery.rsp-photo-gallery--3.rsp-photo-gallery--layout-grid
.rsp-photo-gallery__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--image-focus, center center);
}


/* Centre the third image */

.rsp-photo-gallery.rsp-photo-gallery--3.rsp-photo-gallery--layout-grid
.rsp-photo-gallery__item:last-child {
  grid-column: 1 / -1;
  width: calc(50% - 6px);
  justify-self: center;
}

/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 600px) {

  /* =========================================
    BASE MOBILE GALLERY
   ========================================= */
  .rsp-photo-gallery {
    flex-direction: column;
    gap: 20px;
    margin: 20px auto;
  }

  .rsp-photo-gallery__item {
    width: 100%;
    min-width: 0;
    min-height: 0;
    flex: none;
  }

  /* =========================================
  3-IMAGE GALLERIES
  Return mosaics to a natural stack
  ========================================= */
  .rsp-photo-gallery--3 {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
    }

  .rsp-photo-gallery--3 .rsp-photo-gallery__image {
    width: 100%;
    height: auto;
    min-height: 0;
    flex: none;
    }
  
    /* Remove the 3:4 desktop crop from 3 portraits */
   .rsp-photo-gallery--l0-p3 .rsp-photo-gallery__image {
    aspect-ratio: auto;
    }
  
  /* =========================================
    FEATURE TOP
    Return to stacked layout
    ========================================= */
  .rsp-photo-gallery--4.rsp-photo-gallery--layout-feature-top {
    display: flex;
    flex-direction: column;
  }

  .rsp-photo-gallery--4.rsp-photo-gallery--layout-feature-top
  .rsp-photo-gallery__image {
    aspect-ratio: auto;
  }
  
  /* =========================================
   FEATURE LEFT
   Return to stacked layout
   ========================================= */
    .rsp-photo-gallery--4.rsp-photo-gallery--layout-feature-left {
      display: flex;
      flex-direction: column;
      aspect-ratio: auto;
    }

    .rsp-photo-gallery--4.rsp-photo-gallery--layout-feature-left
    .rsp-photo-gallery__image {
      width: 100%;
      height: auto;
      min-height: 0;
      flex: none;
    }
  
  /* =========================================
   2-COLUMN GRID
   ========================================= */
  .rsp-photo-gallery--layout-grid {
    display: flex;
    flex-direction: column;
    }

  .rsp-photo-gallery--layout-grid .rsp-photo-gallery__item {
    width: 100%;
  } 

  .rsp-photo-gallery--layout-grid .rsp-photo-gallery__image {
    width: 100%;
    aspect-ratio: auto;
  }
  
  /* =========================================
    ALL MOBILE IMAGES
    restore natural proportions
   ========================================= */
  .rsp-photo-gallery__image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: initial;
  }
 
 /* =========================================
    MOBILE CAPTIONS 
   ========================================= */
  .rsp-photo-gallery__caption {
    margin-top: 6px;
    padding: 0 8px;
    text-align: center;
  }
  
}