/* ==========================================================
   Mondrian-style photo gallery
   - Thick black lines between cells (grid gap on a black background)
   - Landscape photos span 2 columns, portrait photos span 2 rows
   - "Feature" photos are larger, for a less regular rhythm
   - Small colour blocks (red / blue / yellow / white) fill the gaps
   ========================================================== */

:root {
  --line: 10px;                       /* thickness of the black lines */
  --black: #111;
  --red: #d40920;
  --blue: #1356a2;
  --yellow: #f7d842;
  --white: #f2f0eb;

  --cols: 6;                          /* columns on wide screens */
  --row: clamp(90px, 11vw, 170px);    /* height of one grid row */
}

.gallery-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-auto-rows: var(--row);
  grid-auto-flow: dense;              /* back-fill holes left by big tiles */
  gap: var(--line);
  /* background: var(--black);           the gap colour = Mondrian lines 
  border: var(--line) solid var(--black);*/
}

/* Every tile fills its cell(s) completely */
.gallery > * {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
}

.gallery img {
  object-fit: cover;                  /* crop instead of stretching */
  background: var(--white);           /* shown while the image loads */
  transition: filter 0.2s ease;
}

.gallery img:hover {
  filter: brightness(1.08);
}

/* ---------- Orientation ---------- */
.gallery img.landscape { grid-column: span 2; }
.gallery img.portrait  { grid-row: span 2; }
/* .square stays a single 1x1 cell */

/* ---------- Feature (larger) tiles ---------- */
.gallery img.feature.landscape { grid-column: span 3; grid-row: span 2; }
.gallery img.feature.portrait  { grid-column: span 2; grid-row: span 3; }
.gallery img.feature.square    { grid-column: span 2; grid-row: span 2; }

/* ---------- Colour blocks ---------- */
.gallery .block:nth-of-type(4n + 1) { background: var(--red); }
.gallery .block:nth-of-type(4n + 2) { background: var(--white); }
.gallery .block:nth-of-type(4n + 3) { background: var(--blue); }
.gallery .block:nth-of-type(4n + 4) { background: var(--yellow); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  :root {
    --cols: 4;
    --line: 8px;
    --row: clamp(80px, 18vw, 150px);
  }
  .gallery img.feature.landscape { grid-column: span 2; grid-row: span 1; }
  .gallery img.feature.portrait  { grid-column: span 1; grid-row: span 2; }
}

@media (max-width: 500px) {
  :root {
    --cols: 2;
    --line: 6px;
    --row: 38vw;
  }
  .gallery img.landscape,
  .gallery img.feature.landscape { grid-column: span 2; grid-row: span 1; }
  .gallery img.portrait,
  .gallery img.feature.portrait  { grid-column: span 1; grid-row: span 2; }
  .gallery img.feature.square    { grid-column: span 1; grid-row: span 1; }
}