/* ==========================================================================
   gallery — "On the road". Reads only --eil-* tokens (eil-core/tokens.css).
   ========================================================================== */
.eil-gallery-head{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:end;margin-bottom:36px}
.eil-gallery-head h2{font-size:var(--eil-step3);margin-top:10px}

.eil-g-grid{list-style:none;margin:0;padding:0;display:grid;gap:22px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.eil-g-item[hidden]{display:none}
.eil-g-fig{margin:0;height:100%;display:flex;flex-direction:column;background:var(--eil-surface);
  border:1px solid var(--eil-border);border-radius:var(--eil-radius);overflow:hidden;box-shadow:var(--eil-shadow)}
.eil-g-open{display:block;width:100%;padding:0;border:0;background:var(--eil-surface-2);cursor:zoom-in;
  aspect-ratio:4/3;overflow:hidden;border-radius:0}
.eil-g-open img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.eil-g-open:hover img{transform:scale(1.03)}
.eil-g-open:focus-visible{outline-offset:-4px}
.eil-g-cap{padding:16px 18px 20px;font-size:.95rem;line-height:1.55;color:var(--eil-text)}
/* a photo with no visible caption keeps its own height, so a long caption in
   the same row doesn't leave empty boxes under its neighbours */
.eil-g-fig:not(:has(> .eil-g-cap:not(.eil-vh))){height:auto}

/* a slot waiting for its photo — demo only; the site build leaves these out */
.eil-g-pending{display:grid;place-items:center;aspect-ratio:4/3;background:var(--eil-surface-2);
  color:var(--eil-text-dim);font-family:var(--eil-font-display);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;font-size:.72rem;border-bottom:1px dashed var(--eil-border)}

.eil-g-more{margin-top:30px;text-align:center}

/* --- the larger view ------------------------------------------------------ */
.eil-g-dialog{border:0;padding:0;background:transparent;color:var(--eil-tip-text);
  max-width:min(1100px,94vw);max-height:94vh;width:100%;overflow:visible}
.eil-g-dialog::backdrop{background:rgba(0,0,0,.86)}
.eil-g-dialog figure{margin:0;display:flex;flex-direction:column;gap:14px;align-items:center}
.eil-g-dialog img{max-width:100%;max-height:74vh;width:auto;height:auto;object-fit:contain;border-radius:var(--eil-radius-sm);
  background:var(--eil-tip-bg)}
.eil-g-dialog figcaption{background:var(--eil-tip-bg);color:var(--eil-tip-text);border-radius:var(--eil-radius-sm);
  padding:14px 18px;font-family:var(--eil-font-body);font-size:1rem;line-height:1.55;max-width:70ch}
.eil-g-dialog .eil-g-count{display:block;color:var(--eil-tip-dim);font-size:.8rem;margin-top:6px}
.eil-g-nav{display:flex;gap:12px;justify-content:center;margin-top:14px}
.eil-g-btn{font-family:var(--eil-font-display);font-weight:700;font-size:.95rem;cursor:pointer;
  background:var(--eil-tip-bg);color:var(--eil-tip-text);border:2px solid var(--eil-tip-dim);
  border-radius:var(--eil-radius-pill);padding:10px 20px;min-height:44px}
.eil-g-btn:hover{border-color:var(--eil-tip-text)}
.eil-g-btn:focus-visible{outline:3px solid var(--eil-tip-text);outline-offset:3px}

@media (max-width:760px){
  .eil-gallery-head{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .eil-g-open img{transition:none}
  .eil-g-open:hover img{transform:none}
}