/* ==========================================================================
   Eleganz Kids International Preschool — Gallery page
   Loads after style.css. The page banner and the closing CTA band are shared
   components and live there; the photo grid is all this file does.

   Built to the approved reference: the grid starts almost flush under the
   banner with no heading above it — the banner's own <h1> is the only title
   the page needs, and a section head here would just delay the photographs.
   ========================================================================== */

/* Tighter than a standard .section, so the first row sits close under the
   banner the way the reference does. */
.gallery-section { padding-block: clamp(26px, 3.2vw, 46px); }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 24px);
}

/* Every tile is the same gentle portrait, whatever shape the source photo
   happens to be, so the grid stays a grid. 4:5 rather than the taller frame
   the reference uses: several of these photographs are landscape, and a
   properly tall crop starts cutting the children out of them. */
.gallery-item {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-md);
  /* The card's dotted tint shows through as the placeholder while the photo
     loads, and is what an empty slot below is made of. */
  background:
    radial-gradient(var(--tint-deep) 2.2px, transparent 2.3px) 0 0 / 34px 34px,
    radial-gradient(var(--tint-deep) 1.6px, transparent 1.7px) 17px 17px / 34px 34px,
    var(--tint);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t-base) var(--ease-out);
}
.gallery-item:hover { box-shadow: 0 18px 36px var(--tint-glow); }

.gallery-item img,
.gallery-item picture {
  display: block;
  width: 100%;
  height: 100%;
}
.gallery-item img {
  object-fit: cover;
  /* Faces sit at or above the middle in most of these, so the crop is held a
     little high — the same bias the programme photos use. */
  object-position: center 42%;
  transition: transform var(--t-slow) var(--ease-out);
}
.gallery-item:hover img { transform: scale(1.06); }

/* -------------------------------------------------------------- empty slot */
/* A slot waiting for a photograph. Delete the whole <span> and put the <img>
   in its place — the tile needs no other change. */
.gallery-slot {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sp-3);
  color: var(--tint-ink);
  opacity: .8;
}
.gallery-slot svg { width: clamp(34px, 3.6vw, 44px); height: clamp(34px, 3.6vw, 44px); }
.gallery-slot b {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  /* One tall photo at a time rather than two postage stamps. */
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-item { aspect-ratio: 5 / 4; }
}