/* Site-wide interactivity styles — replaces the React-driven hover/reveal/menu/
   lightbox states that used to live in JSX component state. Pure CSS + the
   small enhancements in site.js. Content underneath is always present and
   always visible without this file or JS; this only adds motion and hover. */

/* iOS Safari paints every <button> with its own native look — on current iOS
   a light rounded pill — unless appearance is switched off. background:none
   alone is not enough. That turned each gallery tile and filter into a white
   rounded box with the caption invisible on it. Inline styles still win over
   this element rule, so buttons that set their own background keep it. */
button { -webkit-appearance: none; appearance: none; border-radius: 0; background-color: transparent; color: inherit; font: inherit; }

/* Homepage header: transparent over the hero, then the same dark bar the
   other pages use once scrolled, so the logo stops sitting on top of text. */
.site-header { background: transparent; transition: background-color 280ms var(--ease-editorial), border-color 280ms var(--ease-editorial); border-bottom: 1px solid transparent; }
.site-header.is-scrolled { background: rgba(11,12,10,.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--border-hairline); }

/* Phone-width overflow fixes. Every page scrolled sideways on mobile:
   - .cta-row gives each button width:100%, but the design-system button is
     content-box with 40px side padding, so it came out 80px wider than the
     screen. The size/spacing values are inline styles, hence !important.
   - the homepage intro is a 12-column grid; its 11 gaps alone are wider than
     a phone, even though every child already spans the full row there.
   - single long words in display headings ("UNFORGETTABLE.") cannot wrap at
     320px, so they may hyphenate on the very narrowest screens only. */
@media (max-width: 640px) {
  .btn { box-sizing: border-box; max-width: 100%; padding-left: 20px !important; padding-right: 20px !important; letter-spacing: .2em !important; }
  .btn > span { white-space: normal !important; text-align: center; }
}
@media (max-width: 980px) {
  .intro-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 360px) {
  h1, h2, h3 { hyphens: auto; overflow-wrap: break-word; }
}
/* A 1fr grid track will not shrink below its longest unbreakable word, so a
   town name like WOLVERHAMPTON set the whole column's width. */
.city-grid > * { min-width: 0; }

/* Buttons — matches the design system's hover deltas exactly (same CSS vars) */
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-outline:hover { background: var(--ivory-50); color: var(--ink-900); border-color: var(--ivory-50); }

/* Scroll reveal — progressive enhancement only. Content is opacity:1 unless JS
   has run and added .js-reveal to <html>, so it is never hidden from a crawler
   or a no-JS visitor. */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 900ms var(--ease-out-soft), transform 900ms var(--ease-out-soft); }
.js-reveal [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Header menu button + overlay */
.menu-overlay { position: fixed; inset: 0; z-index: 55; background: rgba(7,8,6,.94); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); display: flex; flex-direction: column; justify-content: center; padding: 0 clamp(20px,5vw,72px); opacity: 0; pointer-events: none; transition: opacity 480ms var(--ease-editorial); }
.menu-overlay.is-open { opacity: 1; pointer-events: auto; }
/* The overlay also carries [hidden] in the HTML, so even if this stylesheet
   fails to load the menu stays out of the page instead of dumping its links
   on top of the hero. The class rule above would otherwise override it. */
.menu-overlay[hidden] { display: none; }

/* Gallery */
.gallery-tile { position: relative; display: block; padding: 0; border: none; background: none; cursor: pointer; text-align: left; width: 100%; }
.gallery-tile .tile-media { position: relative; overflow: hidden; background: var(--surface-card); }
.gallery-tile .tile-media img, .gallery-tile .tile-media video { width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms var(--ease-out-soft); }
.gallery-tile:hover .tile-media img, .gallery-tile:hover .tile-media video, .gallery-tile:focus-visible .tile-media img, .gallery-tile:focus-visible .tile-media video { transform: scale(1.04); }
.gallery-tile .tile-scrim { position: absolute; inset: 0; background: var(--scrim-tile); pointer-events: none; }
.gallery-tile .tile-caption { position: absolute; left: 24px; right: 24px; bottom: 22px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; opacity: .82; transition: opacity 280ms var(--ease-editorial); }
.gallery-tile:hover .tile-caption, .gallery-tile:focus-visible .tile-caption { opacity: 1; }
.gallery-tile .tile-arrow { opacity: 0; transition: opacity 280ms var(--ease-editorial); }
.gallery-tile:hover .tile-arrow, .gallery-tile:focus-visible .tile-arrow { opacity: 1; }
.gallery-tile[hidden] { display: none; }
.gallery-tile .tile-play { position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(7,8,6,.55); border: 1px solid rgba(247,241,232,.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: none; transition: transform 280ms var(--ease-editorial); }
.gallery-tile .tile-play::after { content: ""; position: absolute; left: 22px; top: 17px; border-left: 16px solid var(--ivory-50); border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.gallery-tile:hover .tile-play, .gallery-tile:focus-visible .tile-play { transform: scale(1.08); }

.filter-btn { background: none; border: none; padding: 12px 0; cursor: pointer; font: var(--type-label); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid transparent; transition: color 280ms var(--ease-editorial), border-color 280ms var(--ease-editorial); }
.filter-btn[aria-pressed="true"] { color: var(--ivory-50); border-bottom-color: var(--border-ivory); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(7,8,6,.96); display: flex; flex-direction: column; padding: 20px clamp(20px,5vw,72px) 28px; box-sizing: border-box; outline: none; }
.lightbox[hidden] { display: none; }
.lightbox-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.lightbox-cat { font: var(--type-label); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent-alt); }
.lightbox-nav-btn { display: grid; place-items: center; width: 48px; height: 48px; background: transparent; border: 1px solid var(--border-hairline); color: var(--ivory-50); cursor: pointer; flex: none; }
.lightbox-close-btn { width: 44px; height: 44px; }
.lightbox-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: clamp(12px,3vw,40px); padding: 24px 0; }
.lightbox-media { max-height: 100%; max-width: 100%; object-fit: contain; }
.lightbox-footer { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.lightbox-title { font-family: var(--font-display); font-size: 1.375rem; color: var(--ivory-50); }
.lightbox-count { font: var(--type-label); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); }

/* Journal — expand/collapse. Layout lives here, not inline, so [hidden]
   can actually win; an inline display:flex would override it. */
.post-body { display: flex; flex-direction: column; gap: 14px; }
.post-body[hidden] { display: none; }

/* Enquiry form result panels — hidden must win over the flex layout, so the
   [hidden] rule needs to sit after (and be at least as specific as) the base
   one; nothing here uses inline `display` so this is never fought by it. */
.enquiry-panel { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding-top: 24px; }
.enquiry-panel[hidden] { display: none; }
#enquiry-idle[hidden] { display: none; }

/* Hero video controls — hidden entirely on mobile by site.js, since the
   inline `display:flex` on #hero-video-controls would otherwise beat the
   [hidden] attribute's default styling (same trap as the enquiry panels). */
.hero-ctl-icon[hidden] { display: none; }
#hero-video-controls { display: flex; }
#hero-video-controls[hidden] { display: none; }
#hero-progress-track[hidden] { display: none; }