/* ==========================================================================
   Veranda — gallery page
   ========================================================================== */

.gallery-masthead {
  position: relative;
  padding-block: calc(var(--header-h) + var(--sp-7)) var(--sp-7);
  margin-block-start: calc(var(--header-total) * -1);
  overflow: hidden;
  background-color: #100f0a;
  background-image:
    radial-gradient(90% 70% at 78% 0%, rgb(157 177 133 / 0.16), transparent 62%),
    radial-gradient(70% 60% at 8% 100%, rgb(192 86 42 / 0.14), transparent 66%);
}
.gallery-masthead::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.07;
  pointer-events: none;
}
.gallery-masthead__inner { position: relative; z-index: 1; max-width: 44rem; }
.gallery-masthead__title { margin-block: var(--sp-4) var(--sp-4); }

/* ==========================================================================
   Filters
   ========================================================================== */

/* Solid, not blurred — same reasoning as the header (see components.css). */
.gallery-filters {
  position: sticky;
  top: var(--header-h);
  z-index: 30;
  background-color: #12110c;
  border-block-end: 1px solid rgb(243 235 218 / 0.1);
  transform: translateZ(0);
  backface-visibility: hidden;
}
.gallery-filters__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-block: 0.7rem;
}
.gallery-filters__list {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
  padding-block: 0.15rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
}
.gallery-filters__list::-webkit-scrollbar { display: none; }

.filter-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.4rem;
  padding: 0.4rem 0.95rem;
  border-radius: var(--r-pill);
  border: 1px solid rgb(243 235 218 / 0.2);
  font-size: var(--fs-100);
  font-weight: 600;
  white-space: nowrap;
  color: var(--fg-muted);
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}
.filter-btn:hover { color: var(--c-cream); border-color: rgb(243 235 218 / 0.4); }
.filter-btn[aria-pressed='true'] {
  background-color: var(--c-cream);
  border-color: var(--c-cream);
  color: var(--c-ink);
}
.filter-btn__count {
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.65;
}

/* ==========================================================================
   Grid
   --------------------------------------------------------------------------
   A composed grid rather than CSS columns. Every tile shares one 4:5 ratio and
   featured tiles take a 2x2 block, so the wall is gapless at every width and
   still has rhythm. Columns were tried first and rejected: they order items
   top-to-bottom per column, which pushed all the reserved slots into the last
   column and made the page look broken.
   ========================================================================== */

.gallery-body { padding-block: var(--sp-8) var(--sp-9); }

.gallery-grid {
  display: grid;
  gap: clamp(0.45rem, 1.1vw, 0.9rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: dense;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 40em) { .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64em) { .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 90em) { .gallery-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.gallery-item { min-width: 0; }

/* One tile in every few gets a double block, purely for rhythm. */
@media (min-width: 40em) {
  .gallery-item--featured { grid-column: span 2; grid-row: span 2; }
  .gallery-item--featured .gallery-tile,
  .gallery-item--featured .gallery-slot { height: 100%; }
  .gallery-item--featured .media { height: 100%; aspect-ratio: auto; }
  .gallery-item--featured .gallery-slot { aspect-ratio: auto; }
}

.gallery-tile {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 2px;
  background-color: var(--c-ink-2);
  cursor: zoom-in;
  text-align: start;
}
.gallery-tile .media { aspect-ratio: 4 / 5; }
.gallery-tile img { transition: transform 900ms var(--ease-out), filter var(--dur) var(--ease); }
.gallery-tile:hover img { transform: scale(1.045); }

.gallery-tile__veil {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: var(--sp-4);
  background: linear-gradient(180deg, transparent 45%, rgb(10 9 6 / 0.82));
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}
.gallery-tile:hover .gallery-tile__veil,
.gallery-tile:focus-visible .gallery-tile__veil { opacity: 1; }

.gallery-tile__caption {
  font-size: var(--fs-100);
  line-height: 1.4;
  color: var(--c-cream);
  transform: translateY(6px);
  transition: transform var(--dur) var(--ease-out);
}
.gallery-tile:hover .gallery-tile__caption,
.gallery-tile:focus-visible .gallery-tile__caption { transform: none; }

.gallery-tile__zoom {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: rgb(22 21 15 / 0.7);
  color: var(--c-cream);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out);
  pointer-events: none;
}
.gallery-tile:hover .gallery-tile__zoom,
.gallery-tile:focus-visible .gallery-tile__zoom { opacity: 1; transform: none; }
.gallery-tile__zoom svg { width: 0.95rem; height: 0.95rem; }

/* Illustration tiles get the mural's mint wall behind them. */
.gallery-tile--art .media { background-color: var(--c-mint); }

/* ------------------------------------------------------- reserved slots -- */

.gallery-item--slot .gallery-tile { cursor: default; }

/* Same footprint as a photo, but deliberately quiet so a wall of reserved
   slots never out-shouts the real photography. */
.gallery-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: clamp(0.75rem, 2vw, 1.1rem);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px dashed rgb(243 235 218 / 0.2);
  border-radius: 2px;
  background-color: rgb(243 235 218 / 0.018);
  background-image:
    repeating-linear-gradient(-45deg, rgb(243 235 218 / 0.022) 0 10px, transparent 10px 20px);
}
.gallery-slot__badge {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.1rem);
  left: clamp(0.75rem, 2vw, 1.1rem);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(157 177 133 / 0.75);
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  padding: 0.1rem 0.45rem;
}
.gallery-slot__subject {
  font-family: var(--ff-display);
  font-size: var(--fs-200);
  line-height: 1.32;
  color: rgb(243 235 218 / 0.62);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gallery-slot__file {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;
  font-size: 0.625rem;
  letter-spacing: 0.02em;
  color: rgb(243 235 218 / 0.32);
  word-break: break-all;
}

/* --------------------------------------------------------------- empty --- */

.gallery-empty {
  padding: var(--sp-9) var(--sp-4);
  text-align: center;
  color: var(--fg-muted);
  font-family: var(--ff-display);
  font-size: var(--fs-500);
}

/* ==========================================================================
   Reveal — tiles rise as their column scrolls into view
   ========================================================================== */

html.has-js .gallery-item {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity 700ms var(--ease-out),
    transform 700ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
html.has-js .gallery-item.is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.has-js .gallery-item { opacity: 1; transform: none; transition: none; }
}