/* ---------- The Gallery: Porta Romana style (edge-to-edge tiles, outlined labels, coloured Featured band) ---------- */
.pg { --gap: 4px; background: #fff; font-family: var(--bn-sans); }
.pg-head { text-align: center; padding: clamp(3rem, 6vw, 5rem) 1rem clamp(1.6rem, 3vw, 2.4rem); }
.pg-head h1 { margin: 0; font: 500 clamp(2.2rem, 4vw, 3.4rem)/1 var(--bn-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--bn-red); }
.pg-head p { margin: .9rem 0 0; color: var(--bn-muted); font-size: .95rem; }

.pg-row { display: grid; gap: var(--gap); margin-bottom: var(--gap); }
.pg-r1 { grid-template-columns: 1fr; }
.pg-r2 { grid-template-columns: 1fr 1fr; }
.pg-r3 { grid-template-columns: repeat(3, 1fr); }
.pg-t { position: relative; margin: 0; overflow: hidden; background: #1a1614; }
.pg-r1 .pg-t { height: min(88vh, 820px); }
.pg-r2 .pg-t { aspect-ratio: 718 / 560; }
.pg-r3 .pg-t { aspect-ratio: 477 / 460; }
.pg-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.pg-t img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); transition: transform 1.6s cubic-bezier(.2,.7,.2,1), filter 1.2s; filter: brightness(.86); }
.pg-t:hover img { transform: scale(1.05); filter: brightness(.74); }
.pg-t figcaption { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.pg-lbl { display: inline-grid; place-items: center; min-width: min(280px, 70%); height: 50px; padding: 0 1.6rem; border: 1px solid #fff; color: #fff; font: 600 clamp(.9rem, 1.3vw, 1.15rem)/1 var(--bn-sans); letter-spacing: .09em; text-transform: uppercase; text-shadow: 0 1px 12px rgba(0,0,0,.25); transition: background .4s, color .4s; }
.pg-t:hover .pg-lbl { background: #fff; color: var(--bn-ink); text-shadow: none; }
.pg-r1 .pg-lbl { margin-top: 38vh; }
@media (max-width: 900px) { .pg-r1 .pg-lbl { margin-top: 0; } }

/* reveal: tiles rise softly as they enter */
.pg-t { opacity: 0; transform: translateY(24px); transition: opacity .9s, transform 1.1s cubic-bezier(.2,.8,.2,1); }
.pg-t.in { opacity: 1; transform: none; }
.pg-row .pg-t:nth-child(2) { transition-delay: .08s; } .pg-row .pg-t:nth-child(3) { transition-delay: .16s; }

/* Featured band, in Bea red (Porta uses its olive here) */
.pg-feat { background: #5d1614; color: #fff; padding: clamp(2.6rem, 5vw, 4.4rem) clamp(1rem, 4.3vw, 4rem) clamp(3rem, 5vw, 4.4rem); }
.pg-feat h2 { margin: 0 0 1.6rem; font: 500 1.6rem/1 var(--bn-sans); }
.pg-feat ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.pg-feat li .pg-open { aspect-ratio: 3 / 4; overflow: hidden; }
.pg-feat li img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.pg-feat li:hover img { transform: scale(1.05); }
.pg-feat li p { margin: .9rem 0 0; font-size: .86rem; font-weight: 600; line-height: 1.4; }
.pg-more { display: inline-grid; place-items: center; height: 46px; padding: 0 1.6rem; margin-top: 2.2rem; border: 1px solid #fff; color: #fff; text-decoration: none; font-weight: 600; font-size: .85rem; letter-spacing: .09em; text-transform: uppercase; transition: background .3s, color .3s; }
.pg-more:hover { background: #fff; color: var(--bn-ink); }

/* lightbox */
.pg-box { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; background: rgba(15,12,11,.94); padding: 3rem 1rem; }
.pg-box[hidden] { display: none; }
.pg-box img { max-width: 100%; max-height: 86vh; margin: auto; object-fit: contain; }
.pg-box button { border: 0; background: none; color: #fff; cursor: pointer; font: 500 1.6rem var(--bn-sans); }
.pg-x { position: absolute; top: 1.2rem; right: 1.6rem; font-size: .85rem !important; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid #fff !important; }

@media (max-width: 900px) {
  .pg-r3 { grid-template-columns: 1fr 1fr; } .pg-r3 .pg-t:nth-child(3) { grid-column: span 2; aspect-ratio: 16 / 10; }
  .pg-r1 .pg-t { height: 70vh; }
  .pg-feat ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .pg-r2, .pg-r3 { grid-template-columns: 1fr; } .pg-r3 .pg-t:nth-child(3) { grid-column: auto; aspect-ratio: 477 / 460; }
  .pg-lbl { height: 44px; min-width: 60%; }
  .pg-box { grid-template-columns: 40px 1fr 40px; padding: 3rem .25rem; }
}
@media (prefers-reduced-motion: reduce) { .pg-t { opacity: 1; transform: none; } }

.pg-more { display: grid; width: fit-content; margin-top: 2.6rem; }

/* gallery page: white page behind the header */
body.gallery-page { background: #fff; }