/* Brand page, design B (venue-v2-brand.body.php). Loaded after venue-v2.css and venue-v2-b.css, only on brand pages that switch it on.
   Phone: a clean photo with the words and two buttons under it, then one photo tile per location (2 a row), menu and events tiles.
   Desktop (900 px+): the words over the photo's dark left side; locations 4 a row; photo + text tiles side by side. */

/* Display lettering is Ogg (Katsuya's custom.176.css sets Domaine on every #content element at ID strength).
   NOTE: the 'ogg' @font-face is only declared in Katsuya's custom.176.css. Any other brand that switches this page on needs its own
   @font-face for 'ogg' (in its custom.<id>.css), or the headings fall back to Georgia. */
body #content .uvbr h1, body #content .uvbr .uvbr-nm { font-family: 'ogg', Georgia, serif; }

/* ----- Hero ----- */
/* Photo rules are scoped to .uvbr-hero-photo: EWWW wraps every <img> (the logo too) in a <picture>, so ".uvbr-hero picture img"
   would also crop / pin the logo (same patch as css/venue-v2-b.css, .uvb-logo) */
.uvbr-hero { padding: 0; overflow: hidden; background: var(--uvb-tile); }
.uvbr-hero-photo, .uvbr-hero-photo picture, .uvbr-hero-photo img { display: block; width: 100%; }
.uvbr-hero-photo img { height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.uvbr-hero-text { padding: var(--uvb-pad); }
/* Extra main photos (v2_brand_slides): stacked on the first photo, one fades in at a time (js/venue-v2.js) */
.uvbr-hero-photo { position: relative; }
.uvbr-hero-photo .uvbr-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.uvbr-hero-photo .uvbr-slide.is-on { opacity: 1; }
.uvbr-hero-photo .uvbr-slide picture, .uvbr-hero-photo .uvbr-slide img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .uvbr-hero-photo .uvbr-slide { transition: none; } }
/* Phones (under 600 px): square photo, smaller logo, Reserve / Menus straight under the headline, so they're on the first screen */
@media (max-width: 599px) {
	.uvbr-hero-photo > picture img, .uvbr-hero-photo > img { aspect-ratio: 1; }
	.uvbr-hero-text { display: flex; flex-direction: column; padding-top: 18px; }
	.uvbr .uvbr-hero-text .uvbr-logo { width: min(40vw, 160px); margin-bottom: 12px; }
	.uvbr h1 { margin-bottom: 14px; }
	.uvbr-acts { order: 3; margin-top: 0; }
	.uvbr .uvbr-acts .uvv2-btn:first-child { flex-basis: 100%; } /* Reserve a table on its own row, Menus + Plan an event under it */
	.uvbr-intro { order: 4; margin-top: 16px; }
	.uvbr .uvbr-intro p:last-child { margin-bottom: 0; }
}
/* Small laptops (900-1199 px): the words panel is narrow, so Reserve a table gets its own row and Menus + Plan an event share the next */
@media (min-width: 900px) and (max-width: 1199px) { article.uvbr .uvbr-acts .uvv2-btn { flex: 1 1 0; } article.uvbr .uvbr-acts .uvv2-btn:first-child { flex-basis: 100%; } }
/* Tablets (600-899 px): a wider photo frame, so the words and Reserve / Menus stay on the first screen */
@media (min-width: 600px) and (max-width: 899px) { .uvbr-hero-photo > picture img, .uvbr-hero-photo > img { aspect-ratio: 3 / 2; } }
.uvbr .uvbr-hero-text picture { display: block; position: static; }
.uvbr .uvbr-hero-text .uvbr-logo { position: static; display: block; width: min(52vw, 220px); max-width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; margin: 0 0 18px; }
.uvbr h1 { margin: 0 0 12px; font-size: clamp(32px, 8.4vw, 60px); line-height: 1.04; font-weight: 400; color: var(--uvv2-stone); text-align: left; text-wrap: balance; letter-spacing: -.01em; }
.uvbr .uvbr-intro p { margin: 0 0 1em; max-width: 46ch; color: rgba(234, 230, 225, .86); text-align: left; }
.uvbr-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.uvbr .uvbr-acts .uvv2-btn { margin: 0; flex: 1 1 140px; text-align: center; display: flex; align-items: center; justify-content: center; white-space: nowrap; padding-left: 12px; padding-right: 12px; }
@media (min-width: 900px) {
	/* Split hero: the words on the dark panel (left), the photos centred in their own frame (right), so no photo ever sits behind
	   the text and every slide is centred. The hero grows with its text (min-height, not a fixed height). */
	.uvbr-hero { display: grid; grid-template-columns: minmax(360px, 40%) 1fr; min-height: min(72vh, 680px); background: var(--uvb-tile); }
	.uvbr-hero-photo { position: relative; grid-column: 2; grid-row: 1; min-height: 100%; }
	.uvbr-hero-photo > picture, .uvbr-hero-photo > picture img, .uvbr-hero-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
	.uvbr-hero-text { grid-column: 1; grid-row: 1; align-self: end; padding: clamp(32px, 4vw, 56px); }
	.uvbr .uvbr-acts .uvv2-btn { flex: 0 0 auto; }
}

/* ----- Locations: one photo tile each, no buttons ----- */
.uvbr .uvbr-board h2 { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.08; margin: 18px 0 14px; }
.uvbr-locs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--uvb-gap); }
.uvbr-locs li { margin: 0; padding: 0; min-width: 0; }
.uvbr .uvbr-loc { display: flex; flex-direction: column; height: 100%; background: var(--uvb-tile); box-shadow: inset 0 0 0 1px var(--uvb-line); border-radius: 3px; overflow: hidden; color: var(--uvv2-stone); text-decoration: none; }
.uvbr a.uvbr-loc:hover { background: var(--uvb-tile-hi); }
.uvbr a.uvbr-loc:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.uvbr-loc img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #1a1412; }
.uvbr-nm { display: block; padding: 12px 14px 2px; font-size: clamp(19px, 4.6vw, 24px); line-height: 1.15; }
.uvbr-st { display: flex; align-items: center; gap: 7px; padding: 0 14px 14px; font-size: 13px; line-height: 1.3; color: var(--uvv2-ash); }
.uvbr-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--uvv2-ash); }
.uvbr-dot.is-open { background: #6fbf8b; }
.uvbr-dot.is-soon { background: #e0a94a; }
.uvbr-dot.is-next { background: var(--uvv2-stone); }
@media (min-width: 900px) { .uvbr-locs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ----- Menu and events: photo tile + text tile ----- */
.uvbr-photo { padding: 0; overflow: hidden; }
.uvbr-photo img { display: block; width: 100%; height: 100%; min-height: 240px; aspect-ratio: 4 / 3; object-fit: cover; }
.uvbr .uvbr-text h2 { font-size: clamp(30px, 4.4vw, 42px); line-height: 1.08; margin: 0 0 10px; }
.uvbr-text .uvv2-btn { margin-top: 16px; }
@media (min-width: 900px) {
	.uvbr-photo img { aspect-ratio: auto; min-height: 340px; }
	.uvbr-text { display: flex; flex-direction: column; justify-content: center; }
	.uvbr-text .uvv2-btn { align-self: flex-start; }
}

/* ----- Kept from the old page: email sign-up, gallery, gift cards (on the dark ground, light text) ----- */
.uvbr-kept { padding: var(--uvb-gap) 0 0; color: var(--uvv2-stone); }
.uvbr-kept > * { background-color: transparent; }
.uvbr-kept h1, .uvbr-kept h2, .uvbr-kept h3, .uvbr-kept p, .uvbr-kept label { color: var(--uvv2-stone); }
.uvbr-kept a:not([class*="btn"]) { color: var(--uvv2-stone); }

/* ----- Booking bar: Reserve · Menus (shows once the hero's buttons have scrolled away; js/venue-v2.js) ----- */
@media (min-width: 768px) { article.uvbr .uvv2-bar.uvb-bar { width: 400px; } }

/* ----- Menu section: same dish tiles as the location pages; the brand's words sit between the heading and the tiles ----- */
.uvbr .uvbr-dishes-intro { margin: 0 0 16px; color: rgba(234, 230, 225, .86); }

/* Kept gallery block: the social handle sits centred under the logo (design B's left-aligned text rule must not reach it) */
.uvbr .uv-gallery-center, .uvbr .uv-gallery-center p { text-align: center; }