/* ============================================================
   Events & Catering pages (UX Builder) — look copied from the live
   boqueriarestaurant.com/location/nyc/events/ (measured at 1360px).
   Sections carry .boq-ev-* classes (Section → Advanced → Class).
   ============================================================ */
.boq-ev-hero, .boq-ev-diff, .boq-ev-other, .boq-ev-hero-m { --ev-red: #c11f31; }
html body [class*="boq-ev-"] p { max-width: none; }

/* Buttons: square, Avant Garde caps — red fill / red outline / cream with red border */
html body .button.boq-ev-btn:not(#boq) {
	display: inline-flex; align-items: center; justify-content: center; min-height: 47px; margin: 0 14px 18px 0; padding: 0 20px;
	border: 2px solid #c11f31; border-radius: 0; background: #c11f31; color: #fff; box-shadow: none;
	font-family: var(--font-nav); font-weight: 600; font-size: 14px; letter-spacing: 0.04em; line-height: 1.2; text-transform: uppercase;
}
html body .button.boq-ev-btn:not(#boq):hover { background: #a3182a; border-color: #a3182a; color: #fff; }
html body .button.boq-ev-btn.is-ev-outline:not(#boq) { background: transparent; color: #c11f31; }
html body .button.boq-ev-btn.is-ev-outline:not(#boq):hover { background: #c11f31; color: #fff; }
html body .button.boq-ev-btn.is-ev-light:not(#boq) { background: var(--cream); color: #c11f31; }
html body .button.boq-ev-btn.is-ev-light:not(#boq):hover { background: #c11f31; color: #fff; }

/* Shared text */
html body [class*="boq-ev-"] .text p, html body [class*="boq-ev-"] .text li { font-family: var(--font-body); font-size: 17px; line-height: 27px; }

/* ---------- 1) Hero (desktop): text 40% | photo ---------- */
html body .boq-ev-hero .row { max-width: none; }
html body .boq-ev-hero .col.boq-ev-hero__text { flex: 0 0 42.6%; max-width: 42.6%; padding: 45px 100px 45px 92px !important; } /* collapse rows force 0 padding */
html body .boq-ev-hero .col.boq-ev-hero__media { flex: 0 0 57.4%; max-width: 57.4%; padding: 0 !important; }
html body .boq-ev-hero__media .col-inner, html body .boq-ev-hero__img, html body .boq-ev-hero__img .img-inner { height: 100%; }
html body .boq-ev-hero__img { margin: 0; }
html body .boq-ev-hero__img img { width: 100%; height: 100%; min-height: 605px; object-fit: cover; display: block; }
html body .boq-ev-title { font-family: var(--font-display); font-size: 47px; line-height: 1.05; color: var(--ev-red); text-transform: uppercase; margin: 0 0 14px; text-wrap: wrap; }
html body .boq-ev-kicker { font-size: 17px !important; letter-spacing: 0.02em; color: var(--charcoal); margin: 0 0 16px; }
html body .boq-ev-hero .text p { color: var(--charcoal); margin-bottom: 30px; }

/* 1b) Hero (mobile) */
html body .boq-ev-hero-m { padding-top: 30px !important; }
html body .boq-ev-hero-m .boq-ev-title { font-size: 40px; }
html body .boq-ev-cta-m .button.boq-ev-btn:not(#boq) { width: 100%; margin: 0 0 12px; }

/* ---------- 2) Private dining (charcoal, red bar on the left) ---------- */
html body .boq-ev-dining { padding: 32px 0 65px !important; }
html body .row.boq-ev-barred { position: relative; }
html body .row.boq-ev-barred::before { content: ''; display: block; position: absolute; left: -50px; top: 0; bottom: 30px; width: 16px; background: #c11f31; }
@media (max-width: 1279px) { html body .row.boq-ev-barred::before { left: 0; width: 10px; } html body .row.boq-ev-barred { padding-left: 24px; } }
html body .boq-ev-dining__title { font-family: var(--font-display); font-size: 47px; line-height: 1.05; color: var(--churro) !important; text-transform: uppercase; margin: 0 0 6px; text-wrap: wrap; }
html body .boq-ev-dining .text p { color: var(--cream); }
html body .boq-ev-checks { list-style: none; margin: 4px 0 0; padding: 0; }
html body .boq-ev-dining .boq-ev-checks li { position: relative; margin: 0 0 10px; padding-left: 30px; color: var(--cream); }
.boq-ev-checks li::before { content: '✓'; position: absolute; left: 0; top: 5px; width: 14px; height: 14px; background: var(--churro); color: var(--charcoal); font-size: 11px; line-height: 14px; text-align: center; border-radius: 2px; }
.boq-ev-contact { display: none; } /* live hides the email line in the list (kept here for editors) */
html body .boq-ev-dining__ctas .col-inner { display: flex; flex-direction: column; padding-top: 50px; }
html body .boq-ev-dining__ctas .button.boq-ev-btn:not(#boq) { width: 100%; margin: 0 0 15px; }

/* Tabs (both tab groups): plain labels, active underlined */
html body .boq-ev-tabs .nav { border: 0; margin: 0 0 24px; gap: 0 28px; justify-content: flex-start; }
html body .boq-ev-tabs .nav > li { margin: 0; }
html body .boq-ev-tabs .nav > li > a { padding: 0 0 2px; font-family: var(--font-body); font-size: 17px; font-weight: 400; letter-spacing: 0; text-transform: uppercase; color: var(--cream); border-bottom: 2px solid transparent; min-height: 0; }
html body .boq-ev-tabs .nav > li > a::before { display: none; }
html body .boq-ev-tabs .nav > li.active > a { border-bottom-color: currentColor; }
html body .boq-ev-tabs .tab-panels { padding: 0; border: 0; background: none; }
html body .boq-ev-tabs.is-light .nav > li > a { color: var(--charcoal); }
html body .boq-ev-tabs.is-light .nav > li.active > a { color: var(--ev-red, #c11f31); }

/* ---------- 3) The Boqueria Difference ---------- */
html body .boq-ev-diff { padding: 45px 0 59px !important; }
html body .boq-ev-diff__title { font-family: var(--font-display); font-size: 47px; line-height: 1.05; color: var(--charcoal); text-transform: uppercase; margin: 0; text-align: right; text-wrap: nowrap; }
/* Intro row: heading ends 30px before the text column (live: heading 362–740, text 770–1215), red bar from the far left */
html body .row.boq-ev-diff__intro { position: relative; flex-wrap: nowrap; }
html body .row.boq-ev-diff__intro > .col:first-child { flex: 0 0 675px; max-width: 675px; padding-right: 30px; }
html body .row.boq-ev-diff__intro > .col:last-child { flex: 1 1 auto; max-width: none; }
html body .row.boq-ev-diff__intro::before { content: ''; position: absolute; left: -50px; top: 26px; width: 275px; height: 9px; background: #c11f31; }
@media (max-width: 1279px) { html body .row.boq-ev-diff__intro::before { left: var(--gutter); width: 120px; } }
html body .boq-ev-diff .boq-ev-diff__intro .text p { color: var(--charcoal); max-width: 445px; }
html body .row.boq-ev-diff__grid { margin-top: 40px; }
html body .boq-ev-square { margin: 0 0 22px; }
html body .boq-ev-diff__cap { font-family: var(--font-display); font-size: 31px; line-height: 1.1; color: #c11f31 !important; text-transform: uppercase; margin: 0; }

/* ---------- 4) Event spaces + 5) Other spaces ---------- */
html body .boq-ev-spaces { padding: 50px 0 100px !important; }
html body .boq-ev-spaces__title { font-family: var(--font-display); font-size: 30px; line-height: 1.1; color: #c11f31 !important; text-transform: uppercase; margin: 0 0 14px; }
html body .boq-ev-space-row .col { padding-bottom: 40px; }
html body .boq-ev-hoverbox { margin-bottom: 18px; }
html body .boq-ev-hoverbox .box-text { padding: 20px 26px; }
html body .boq-ev-hoverbox .box-text p { font-size: 15px !important; line-height: 19px !important; color: #fff; margin: 0; }
html body .boq-ev-space__name { font-family: var(--font-display); font-size: 26px; letter-spacing: 0; line-height: 1.1; color: #c11f31 !important; text-transform: uppercase; margin: 0 0 6px; }
html body [class*="boq-ev-"] .text .boq-ev-space__meta { font-size: 16px; line-height: 23px; color: var(--charcoal); margin: 0; }
.boq-ev-space__meta strong { font-weight: 700; color: var(--charcoal); }

html body .boq-ev-other { padding: 40px 0 71px !important; }
html body:has(.boq-ev-spaces) .section.boq-site-footer { margin-top: 0 !important; } /* live: footer follows directly */
html body .row.boq-ev-other__intro { position: relative; margin-bottom: 32px; }
html body .row.boq-ev-other__intro > .col { padding-bottom: 0 !important; }
html body .row.boq-ev-other__intro .text > :last-child { margin-bottom: 0; }
html body .row.boq-ev-other__intro::before { content: ''; position: absolute; left: -50px; top: 0; bottom: 0; width: 20px; background: #c11f31; }
@media (max-width: 1279px) { html body .row.boq-ev-other__intro::before { left: 0; width: 10px; } html body .row.boq-ev-other__intro { padding-left: 24px; } }
html body .boq-ev-other__kicker { font-family: var(--font-nav); font-weight: 600; font-size: 28px !important; line-height: 1.2 !important; letter-spacing: 0.02em; color: var(--charcoal); margin: 0 0 4px; }
html body .boq-ev-other__title { font-family: var(--font-display); font-size: 44px; line-height: 1.05; color: var(--charcoal); text-transform: uppercase; margin: 0 0 6px; }
html body .boq-ev-other .boq-ev-other__intro .text p:last-child { color: var(--charcoal); max-width: 760px; }
html body .row.boq-ev-other__ctas { margin-top: 20px; }
html body .boq-ev-other__ctas .col-inner { padding-left: 10px; }
html body .row.boq-ev-bookbar .button.boq-ev-btn:not(#boq) { width: 100%; margin: 20px 0 0; min-height: 56px; font-size: 16px; }

/* Smaller screens */
@media (max-width: 849px) {
	html body .boq-ev-title, html body .boq-ev-dining__title, html body .boq-ev-diff__title, html body .boq-ev-other__title { font-size: 38px; }
	html body .boq-ev-diff__title { text-align: left; }
	html body .row.boq-ev-diff__intro { flex-wrap: wrap; }
	html body .row.boq-ev-diff__intro > .col:first-child { flex-basis: 100%; max-width: 100%; }
	html body .row.boq-ev-diff__intro::before { display: none; }
	html body .boq-ev-diff__title { text-wrap: wrap; }
}

/* ---------- Live page measures: 1170px content (95–1265 at 1360) ---------- */
html body :is(.boq-ev-dining, .boq-ev-diff, .boq-ev-spaces, .boq-ev-other) > .section-content > .row { max-width: 1200px; }

/* Difference: 4 squares (270px), 30px gaps */
html body .row.boq-ev-diff__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 30px; row-gap: 30px; padding-inline: 15px; }
html body .row.boq-ev-diff__grid::before, html body .row.boq-ev-diff__grid::after { content: none; display: none; }
html body .row.boq-ev-diff__grid > .col { max-width: none; flex: none; width: auto; padding: 0; }
html body .boq-ev-square .img-inner { aspect-ratio: 1 / 1; padding-top: 0 !important; overflow: hidden; }
html body .boq-ev-square .img-inner img { position: static; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 850px) { html body .row.boq-ev-diff__intro > .col:last-child { padding-left: 0; } }
html body .boq-ev-diff .boq-ev-diff__intro .text p { max-width: 445px !important; }

/* Space cards: 3 × 370px, 31px gaps (tabs + other spaces) */
html body .row.boq-ev-space-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 31px; margin-left: 0; margin-right: 0; width: 100%; }
html body .boq-ev-other > .section-content > .row.boq-ev-space-row { padding-inline: 15px; }
html body .row.boq-ev-space-row::before, html body .row.boq-ev-space-row::after { content: none; display: none; }
html body .row.boq-ev-space-row > .col { max-width: none; flex: none; width: auto; padding: 0 0 40px; }
/* Hover (as live): a dark panel turns in from the centre of the photo (card turn), the photo stays
   in place and shows through it, white description centred. Turns back on mouse-out. */
html body .boq-ev-hoverbox { perspective: 1200px; }
html body .boq-ev-hoverbox .overlay { display: none; }                 /* Flatsome's own overlay: not used */
html body .boq-ev-hoverbox .box-text,
html body .boq-ev-hoverbox .box-text.show-on-hover {
	position: absolute !important; inset: 0 !important; top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
	display: flex; align-items: center; justify-content: center; padding: 20px 26px !important; margin: 0 !important;
	background: rgba(14, 13, 13, 0.78); opacity: 1 !important; visibility: visible !important;
	transform: rotateY(90deg) !important; transform-origin: 50% 50%; transition: transform 0.20s ease;
	backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
html body .boq-ev-hoverbox .box-text .box-text-inner { width: 100%; padding: 0; transform: none; position: static; }
html body .box.boq-ev-hoverbox.box-text-middle:hover .box-text.show-on-hover,
html body .box.boq-ev-hoverbox:hover .box-text.box-text,
html body .box.boq-ev-hoverbox:focus-within .box-text.box-text { transform: rotateY(0deg) !important; }
@media (hover: none) { /* touch screens: tap shows it (no hover) */
	html body .box.boq-ev-hoverbox.box-text-middle:active .box-text.show-on-hover { transform: rotateY(0deg) !important; }
}
@media (prefers-reduced-motion: reduce) { html body .boq-ev-hoverbox .box-text { transition: none; } }

@media (max-width: 849px) {
	html body .row.boq-ev-diff__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: var(--gutter); }
	html body .row.boq-ev-space-row { grid-template-columns: 1fr; }
}
@media (min-width: 850px) and (max-width: 1099px) { html body .row.boq-ev-space-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
html body .tab-panels .row.boq-ev-space-row { margin-left: 0 !important; margin-right: 0 !important; }
html body .boq-ev-other > .section-content > .row.boq-ev-space-row { margin-left: auto; margin-right: auto; }
html body .tab-panels .row.boq-ev-space-row { max-width: none; }

/* Pages whose spaces section is the last one (all but NYC): buttons + mobile bar inside it */
html body .boq-ev-spaces.is-last { padding-bottom: 60px !important; }
html body .boq-ev-spaces .row.boq-ev-other__ctas { margin-top: 30px; }
html body .row.boq-ev-tab-ctas { margin: 10px 0 0 !important; max-width: none; }
html body .row.boq-ev-tab-ctas > .col { padding: 0; }
/* DC: buttons inside each tab */
html body .boq-ev-dining .col_inner.boq-ev-dining__ctas .col-inner, html body .boq-ev-dining .row-inner .boq-ev-dining__ctas .col-inner { padding-top: 0; }


/* ============================================================
   Fixes 0.6.5 — measured against the live site (desktop + mobile recording)
   ============================================================ */

/* Body text 18px, as live (was 17px) */
html body [class*="boq-ev-"] .text p, html body [class*="boq-ev-"] .text li { font-size: 18px; line-height: 27px; }

/* Hero (desktop): content 1200px wide and centred, as live; only the cream background is full width.
   Columns 5/12 (text) + 7/12 (photo) of 1200px. */
html body .boq-ev-hero > .section-content > .row, html body .boq-ev-hero .row.row-full-width { max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; }
html body .boq-ev-hero .col.boq-ev-hero__text { flex: 0 0 41.667%; max-width: 41.667%; padding: 45px 40px 45px 15px !important; }
html body .boq-ev-hero .col.boq-ev-hero__media { flex: 0 0 58.333%; max-width: 58.333%; }

/* No full-width "BOOK AN EVENT" bar — live doesn't show it */
html body .row.boq-ev-bookbar { display: none !important; }

/* ---------- Mobile (as live) ---------- */
@media (max-width: 849px) {
	/* Title 38px */
	html body .boq-ev-title, html body .boq-ev-hero-m .boq-ev-title { font-size: 38px; line-height: 1.05; }
	html body .boq-ev-dining__title { font-size: 38px; line-height: 36px; }

	/* Hero buttons: natural width, side by side (wrapping), 52px tall */
	html body .boq-ev-cta-m .col-inner { display: flex; flex-wrap: wrap; gap: 22px 20px; }
	html body .section.boq-ev-cta-m { padding: 15px 0 !important; }
	html body .boq-ev-cta-m .button.boq-ev-btn:not(#boq) { width: auto; min-height: 52px; margin: 0; padding: 0 20px; font-size: 15px; letter-spacing: 0.02em; }

	/* Private dining: the "Email us … call us …" line is shown as a fifth checklist item */
	html body .boq-ev-dining .text p.boq-ev-contact { display: block; position: relative; padding-left: 30px; margin: 0 0 10px; color: var(--cream); }
	html body .boq-ev-dining .text p.boq-ev-contact::before { content: '✓'; position: absolute; left: 0; top: 5px; width: 14px; height: 14px; background: var(--churro); color: var(--charcoal); font-size: 11px; line-height: 14px; text-align: center; border-radius: 2px; }
	html body .boq-ev-dining .text p.boq-ev-contact a { color: var(--cream); text-decoration: underline; }

	/* …followed by one button: View Event Menus (Email Us / Call Us stay desktop-only) */
	html body .col.boq-ev-dining__ctas.hide-for-medium { display: block !important; }
	html body .boq-ev-dining__ctas .col-inner { padding-top: 10px; align-items: flex-start; }
/* Post 17563: show first 2 buttons only */
html body.postid-17563 .boq-ev-dining__ctas .button.boq-ev-btn:nth-child(n+3) {
    display: none !important;
}

/* Everything else: show first button only */
html body:not(.postid-17563) .boq-ev-dining__ctas .button.boq-ev-btn:not(:first-child) {
    display: none !important;
}
	html body .boq-ev-dining__ctas .button.boq-ev-btn:not(#boq) { width: auto; min-height: 52px; padding: 0 30px; font-size: 15px; }

	/* The Boqueria Difference: one photo per row, landscape */
	html body .row.boq-ev-diff__grid { grid-template-columns: 1fr; }
	html body .boq-ev-square .img-inner { aspect-ratio: 3 / 2; }

	/* Bottom buttons: stacked, natural width, left-aligned */
	html body .row.boq-ev-other__ctas .col-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; padding-left: 0; }
	html body .row.boq-ev-other__ctas .button.boq-ev-btn:not(#boq) { width: auto; margin: 0; min-height: 52px; font-size: 15px; }
}









/* ============================================================
   Fixes 0.6.8 — hero photo as live (#hero-events img, min-width 992px)
   ============================================================ */

/* Desktop hero from 992px up, mobile hero below (live's breakpoint; Flatsome's own is 850px) */
@media (min-width: 850px) and (max-width: 991px) {
	html body .section.boq-ev-hero.hide-for-medium { display: none !important; }
	html body .section.show-for-medium[class*="boq-ev-"], html body .section.show-for-medium:not([class*="boq-ev-"]):has(+ .boq-ev-cta-m) { display: block !important; }
	html body .section.boq-ev-hero-m, html body .section.boq-ev-cta-m { display: block !important; }
}

@media (min-width: 992px) {
	/* The photo is out of the flow: pinned top-left in its column at its natural size, running past the
	   screen edge; the section clips it. The hero's height comes from the text column. */
	html body .section.boq-ev-hero { overflow: hidden; position: relative; z-index: 0; }
	html body .boq-ev-hero .col.boq-ev-hero__media { position: relative; overflow: visible; }
	html body .boq-ev-hero__media .col-inner, html body .boq-ev-hero__img, html body .boq-ev-hero__img .img-inner { position: static; height: auto; overflow: visible; margin: 0; padding: 0; }
	html body .boq-ev-hero__img img {
		position: absolute; top: 0; left: 0; z-index: -1; display: block;
		width: auto !important; max-width: max-content !important; height: auto !important; min-height: 0 !important;
		object-fit: initial; pointer-events: none;
	}
}
/* Text column: wide enough for two buttons side by side (as live) */
html body .boq-ev-hero .col.boq-ev-hero__text { padding-right: 75px !important; }
/* Button widths as live (Book an Event 172px, Order Catering 182px): 18px side padding, tighter letter spacing */
html body .button.boq-ev-btn:not(#boq) { padding: 0 18px; letter-spacing: 0.02em; }
/* Hero: 26px more space above the buttons; buttons indented 5px (as live) */
html body .boq-ev-hero .boq-ev-hero__text .col-inner > .text { padding-bottom: 16px; }
html body .boq-ev-hero .boq-ev-hero__text .button.boq-ev-btn:not(#boq) { margin-left: 5px; margin-right: 16px; }
html body .boq-ev-hero .boq-ev-kicker { margin-bottom: 16px !important; }










/* ============================================================
   Fixes 0.6.9 — sticky "BOOK AN EVENT" (live: .bottom-book-btn) replaces "Book a table" on events pages
   ============================================================ */
@media (max-width: 899px) {
	/* Site-wide "Book a table" sticky bar: not on events pages */
	html body:has(.boq-ev-bookbar) .boq-sticky-bar { display: none !important; }

	/* The page's own BOOK AN EVENT button (each city's Tripleseat link), fixed to the bottom */
	html body .row.boq-ev-bookbar {
		display: block !important; position: fixed; left: 0; right: 0; bottom: 0; z-index: 180; margin: 0 !important; max-width: none !important;
		padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom)) !important;
		background: linear-gradient(to top, rgba(14, 13, 13, 0.28), transparent);
	}
	html body .row.boq-ev-bookbar > .col { padding: 0 !important; }
	html body .row.boq-ev-bookbar .button.boq-ev-btn:not(#boq) {
		display: flex; width: 100%; min-height: 52px; margin: 0 !important; justify-content: center;
		background: #fff; border-color: #fff; color: #c11f31; box-shadow: 0 8px 22px rgba(23, 21, 21, 0.28);   /* live: btn__white */
	}
	html body .row.boq-ev-bookbar .button.boq-ev-btn:not(#boq):hover { background: #c11f31; border-color: #c11f31; color: #fff; }
	/* Keep the page's last content clear of the fixed button */
	html body:has(.boq-ev-bookbar) #main { padding-bottom: 70px; }
	/* Hidden while the mobile menu or the booking popup is open (as the site's sticky bar) */
	html.has-off-canvas body .row.boq-ev-bookbar, html[data-sheet-open] body .row.boq-ev-bookbar { display: none !important; }
}






/* Fixes 0.6.10 — sticky BOOK AN EVENT styled exactly like the site's sticky "Book a table" button */
@media (max-width: 899px) {
	html body .row.boq-ev-bookbar .button.boq-ev-btn:not(#boq) {
		background: var(--red); border: 2px solid var(--red); color: var(--cream);
		border-radius: 999px; min-height: 52px; padding: 0.35em 1.7em 0.25em;
		font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; line-height: 1.6; letter-spacing: 0.06em;
		box-shadow: 0 8px 22px rgba(23, 21, 21, 0.28);
	}
	html body .row.boq-ev-bookbar .button.boq-ev-btn:not(#boq):hover { background: var(--red-hover); border-color: var(--red-hover); color: var(--cream); }
}