/* ============================================================
   Doorloom brand-website V2 — full-screen photo gallery page.
   Reuses shared lightbox from components.css.
   ============================================================ */

.chipnav { position: sticky; top: 56px; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--border-subtle); }
.chipnav__in { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 11px var(--pad); max-width: var(--maxw); margin: 0 auto; }
.chipnav__in::-webkit-scrollbar { display: none; }

.cat { padding: 26px 0 4px; scroll-margin-top: 112px; }
.cat h2 { font-size: 1.15rem; margin-bottom: 4px; }
.cat .n { color: var(--text-2); font-size: .85rem; margin-bottom: 14px; }

.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pcell { margin: 0; padding: 0; border: 0; background: var(--surface-2); border-radius: var(--r); overflow: hidden; cursor: pointer; aspect-ratio: 4/3; box-shadow: var(--shadow-card); }
.pcell:first-child { grid-column: 1 / 3; aspect-ratio: 16/10; }
.pcell img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.pcell:hover img { transform: scale(1.04); }
@media (min-width: 760px) {
  .pgrid { grid-template-columns: 1fr 1fr 1fr; }
  .pcell:first-child { grid-column: 1 / 3; grid-row: 1 / 3; aspect-ratio: auto; }
}

.catamen { margin: 16px 0 4px; }
.catamen__l { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); font-weight: 600; margin-bottom: 9px; }
.chipsrow { display: flex; flex-wrap: wrap; gap: 8px; }
.achip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line-2); background: var(--surface); border-radius: 999px; padding: 7px 13px; font-size: .85rem; color: var(--text); }
.achip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }

@media (min-width: 1024px) {
  .cat { padding: 44px 0 6px; }
  .cat h2 { font-size: 1.35rem; }
  .cat .n { font-size: .9rem; margin-bottom: 18px; }
  .pgrid { gap: 14px; }
  .catamen { margin: 22px 0 4px; }
}
@media (min-width: 1280px) { .cat { padding: 52px 0 6px; } .pgrid { gap: 16px; } }