/* ============================================================
   GENOVIA.PHOTO — portfolio pages (index + category galleries)
   Loaded in addition to style.css; new file so /assets/ 30d
   immutable caching never serves stale styles to these pages.
   ============================================================ */

.folio-page { background: var(--night); color: var(--ivory); color-scheme: dark; }
.folio-page main { min-height: 60vh; }
.folio-page h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  letter-spacing: .01em;
}

.crumb-link { color: inherit; text-decoration: none; }
.crumb-link:hover { color: var(--ivory); text-decoration: underline; text-underline-offset: .25em; }

/* ---------- Category cards (portfolio index) ---------- */
.cat-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1.4rem;
}
.cat-grid .cat-card { flex: 0 1 21rem; min-width: 15rem; }
.cat-card {
  display: flex; flex-direction: column;
  background: var(--night-soft);
  border: 1px solid var(--night-line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none; color: var(--ivory);
}
.cat-card figure { margin: 0; }
.cat-card img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
}
.cat-card-text { padding: 1.1rem 1.2rem 1.3rem; }
.cat-card h2 {
  font-size: 1.35rem; text-transform: none; letter-spacing: .01em;
  margin: 0 0 .35em;
}
.cat-card p { margin: 0 0 .8em; color: var(--ivory-dim); font-size: .95rem; }
.cat-meta { font-size: .8rem; letter-spacing: .08em; color: var(--mist); }
.cat-card:hover { border-color: var(--mist); }
.cat-card:hover h2 { color: var(--rose-mist); }
.cat-card:focus-visible { outline: 2px solid var(--rose-mist); outline-offset: 3px; }

/* ---------- Gallery (category pages) ---------- */
/* Centered wrapping rows: balanced for 1 photo or 40, any orientation. */
.gallery {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: flex-start; gap: .8rem;
}
.gallery a {
  display: block; flex: 0 1 calc(50% - .4rem);
  border-radius: var(--radius); overflow: hidden;
  background: var(--night-soft);
}
@media (min-width: 760px) {
  .gallery { gap: 1rem; }
  .gallery a { flex-basis: calc(33.333% - .67rem); }
}
.gallery img {
  display: block; width: 100%; height: auto;
}
.gallery a:focus-visible { outline: 2px solid var(--rose-mist); outline-offset: 3px; }

.folio-foot { border-top: 0; }

/* PhotoSwipe counter/UI inherits its own styles; keep zoom cursor subtle */
.gallery a { cursor: zoom-in; }