/* Bici Bistro — pages.css
   Layout for story, gallery, events, contact, privacy and 404, plus the shared
   additions (longer nav, footer columns, lightbox). Loaded after style.css and
   only uses its tokens. */

/* ---------- Shared: header nav, mobile menu, footer ---------- */
.nav { gap: clamp(16px, 2.4vw, 40px); }

.mobile-menu { overflow-y: auto; gap: 32px; }
.mobile-menu__links a, .mobile-menu__links button { font-size: clamp(34px, 9.5vw, 56px); line-height: 1.2; }
.mobile-menu__links a[aria-current="page"] { color: var(--sand); }
/* style.css styles the 5th entry as the booking button; there are six entries now */
.menu-open .mobile-menu__links > a:nth-child(5) span { font-style: normal; color: inherit; }
.menu-open .mobile-menu__links > :nth-child(6) span { transition-delay: 0.3s; }
.mobile-menu__links > button span { font-style: italic; color: var(--sand); }

.footer__top { grid-template-columns: 1.3fr repeat(4, 1fr); }
.footer__base a { text-decoration: underline; text-underline-offset: 3px; }
.newsletter { position: relative; }
.newsletter:empty { display: none; }
.newsletter:not(:empty) { padding-bottom: clamp(40px, 5vw, 72px); }

/* ---------- Heroes ---------- */
.page-hero--short { min-height: 58vh; }
.page-hero--text { min-height: 0; }
.page-hero--text .page-hero__inner { padding-top: calc(var(--header-h) + clamp(72px, 10vw, 150px)); padding-bottom: clamp(44px, 6vw, 88px); }
.page-hero--text .display { font-size: clamp(46px, 7.4vw, 112px); }

/* ---------- Editorial split (story) ---------- */
.statement { max-width: 1480px; margin: 0 auto; }
.statement .intro__statement { max-width: 21em; }

.split { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(20px, 3vw, 48px); align-items: center; }
.split > * { grid-row: 1; }
.split__media { grid-column: 1 / span 5; }
.split__copy { grid-column: 7 / span 5; display: grid; gap: 22px; align-content: start; }
.split--flip .split__media { grid-column: 7 / span 6; }
.split--flip .split__copy { grid-column: 1 / span 5; }
.split__copy .h2 { margin-bottom: 6px; }
.split__copy .link, .split__copy .btn { justify-self: start; margin-top: 10px; }
.split__copy p { max-width: 34em; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.8vw, 28px); align-items: start; }
.duo > :nth-child(2) { margin-top: clamp(40px, 7vw, 120px); }
.duo .media { aspect-ratio: 2 / 3; }

.band { position: relative; height: clamp(340px, 78vh, 860px); overflow: hidden; background: var(--ink); }
.band__media { position: absolute; inset: -14% 0; will-change: transform; }
.band__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Gallery grid ---------- */
.gal { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(10px, 1.6vw, 28px); grid-auto-flow: dense; }
.gal__item { grid-column: span 2; min-width: 0; }
.gal__item a { display: block; height: 100%; }
.gal__item .media { aspect-ratio: 2 / 3; height: 100%; }
.gal__item--wide { grid-column: span 4; }
.gal__item--wide .media { aspect-ratio: auto; }
.gal__item--full { grid-column: 1 / -1; }
.gal__item--full .media { aspect-ratio: 2 / 1; }
.gal__item--wide .media img, .gal__item--full .media img { position: absolute; inset: 0; }
.js .gal__item a:hover .img-reveal.is-in img, .js .gal__item a:focus-visible .img-reveal.is-in img { transform: scale(1.05); }
.gal__note { margin-top: clamp(32px, 4vw, 56px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; padding-top: 28px; border-top: 1px solid var(--line); }
.gal__note p { font-family: var(--serif); font-weight: 300; font-size: clamp(20px, 1.9vw, 28px); }

/* ---------- Lightbox (markup is created by main.js) ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 250;
  display: grid; place-items: center;
  padding: clamp(60px, 7vw, 96px) clamp(16px, 8vw, 128px);
  background: rgba(30, 21, 17, 0.96);
  color: var(--cream);
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0s 0.5s;
}
.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity 0.5s var(--ease), visibility 0s; }
.lightbox img {
  max-width: 100%;
  max-height: calc(100vh - clamp(120px, 14vw, 192px));
  max-height: calc(100svh - clamp(120px, 14vw, 192px));
  width: auto; height: auto; object-fit: contain;
  transform: scale(0.96);
  transition: transform 0.8s var(--ease), opacity 0.35s;
  user-select: none; -webkit-user-drag: none;
}
.lightbox.is-open img { transform: none; }
.lightbox img.is-loading { opacity: 0; }
.lightbox__close, .lightbox__prev, .lightbox__next {
  position: absolute;
  width: 48px; height: 48px;
  border: 1px solid var(--line-light); border-radius: 50%;
  color: var(--cream);
  font-size: 0; line-height: 0;
  transition: background 0.4s, color 0.4s, border-color 0.4s, transform 0.6s var(--ease);
}
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover,
.lightbox__close:focus-visible, .lightbox__prev:focus-visible, .lightbox__next:focus-visible { background: var(--sand); border-color: var(--sand); color: var(--espresso-deep); }
.lightbox__close { top: clamp(12px, 2vw, 24px); right: clamp(12px, 2vw, 24px); }
.lightbox__close:hover { transform: rotate(90deg); }
.lightbox__close::before, .lightbox__close::after { content: ""; position: absolute; left: 15px; right: 15px; top: 50%; height: 1px; background: currentColor; }
.lightbox__close::before { transform: rotate(45deg); }
.lightbox__close::after { transform: rotate(-45deg); }
.lightbox__prev, .lightbox__next { top: 50%; margin-top: -24px; }
.lightbox__prev { left: clamp(12px, 2vw, 32px); }
.lightbox__next { right: clamp(12px, 2vw, 32px); }
.lightbox__prev::before, .lightbox__next::before { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; }
.lightbox__prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.lightbox__next::before { transform: translate(-70%, -50%) rotate(45deg); }
.lightbox__count { position: absolute; left: 0; right: 0; bottom: clamp(16px, 2.4vw, 30px); text-align: center; font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--sand); pointer-events: none; }

/* ---------- Enquiry layouts (events, contact) ---------- */
.enquire { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 110px); align-items: start; }
.enquire__copy { display: grid; gap: 22px; align-content: start; min-width: 0; }
.enquire__copy .h2 { margin: 0 0 6px; }
.enquire__copy p { max-width: 34em; }
.enquire__copy p a { text-decoration: underline; text-underline-offset: 3px; }
.enquire__media { position: sticky; top: calc(var(--header-h) + 24px); }
.enquire__media .media { aspect-ratio: 4 / 5; }
.form-slot { min-width: 0; }
.form-slot:empty { display: none; }
.enquire__copy .form-slot { margin-top: clamp(8px, 1.6vw, 24px); }

.contact .visit__info .hours { margin: 0; }

/* ---------- Home additions ---------- */
.gallery__more { display: flex; justify-content: flex-end; padding: clamp(24px, 3vw, 40px) var(--pad) 0; }
.teaser { padding-top: clamp(64px, 9vw, 130px); padding-bottom: clamp(64px, 9vw, 130px); }
.teaser__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(24px, 6vw, 110px); align-items: end; }
.teaser__copy { display: grid; gap: 22px; justify-items: start; }

/* ---------- Prose (privacy) ---------- */
.prose { max-width: 720px; margin: 0 auto; }
.prose__meta { font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; opacity: 0.6; margin-bottom: clamp(28px, 4vw, 48px); }
.prose h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.2; margin: clamp(40px, 5vw, 64px) 0 14px; }
.prose p { margin: 0 0 16px; }
.prose ul { margin: 0 0 16px; border-top: 1px solid var(--line); }
.prose li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.prose strong { font-weight: 500; }
.prose a { text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.prose address { font-style: normal; font-family: var(--serif); font-size: clamp(20px, 1.8vw, 26px); line-height: 1.4; margin: 0 0 16px; }

/* ---------- 404 ---------- */
.e404 { min-height: 100vh; min-height: 100svh; justify-content: center; }
.e404 .ribbon { top: 18%; height: 64%; opacity: 0.6; }
.e404 .page-hero__inner { padding-bottom: calc(var(--header-h) + 40px); }
.e404 .display { font-size: clamp(56px, 11vw, 180px); }
.e404 .hero__actions { margin-top: clamp(10px, 2vw, 24px); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .nav { gap: 18px; }
  .nav a:not(.btn) { letter-spacing: 0.2em; }
  .footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .split > * { grid-row: auto; }
  .split__media, .split__copy, .split--flip .split__media, .split--flip .split__copy { grid-column: 1 / -1; }
  .split__media { width: 86%; }
  .split--flip .split__media { width: 100%; order: 2; margin-top: 16px; }
  .gal { grid-template-columns: 1fr 1fr; }
  .gal__item { grid-column: span 1; }
  .gal__item--wide, .gal__item--full, .gal__item--lead { grid-column: 1 / -1; }
  .gal__item--wide .media, .gal__item--full .media { aspect-ratio: 3 / 2; }
  .gal__item--lead .media { aspect-ratio: 4 / 5; }
  .enquire, .teaser__grid { grid-template-columns: 1fr; }
  .enquire__media { position: static; }
  .lightbox { padding: 64px 12px 84px; }
  .lightbox img { max-height: calc(100vh - 160px); max-height: calc(100svh - 160px); }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 16px; margin-top: 0; width: 44px; height: 44px; }
  .lightbox__count { bottom: 26px; }
}
@media (max-width: 520px) {
  .footer__top { grid-template-columns: 1fr; }
  .e404 .hero__actions .btn { flex: 1; padding: 0 18px; }
}