/* BarrancoàTable landing page, article box and strip (includes/barrancoatable.php). Brand kit v1.4:
   purple #463769, gold #E6D782 (only on purple/teal, text on gold = teal), teal #143232, cream #F6F1E4. */
.brc-bat {
	--p: #463769;
	--g: #e6d782;
	--t: #143232;
	--c: #f6f1e4;

	color: var(--t);
	font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
	text-align: left;
}

.brc-bat:not(.brc-bat--box, .brc-bat--strip) {
	width: 100vw;
	margin: 0 calc(50% - 50vw);
}

body:has(.brc-bat) {
	overflow-x: clip;
}

.brc-bat * {
	box-sizing: border-box;
}

.brc-bat p,
.brc-bat ul,
.brc-bat ol {
	margin: 0;
}

.brc-bat ul,
.brc-bat ol {
	padding: 0;
	list-style: none;
}

.brc-bat .brc-bat__wrap {
	max-width: 1040px;
	margin: 0 auto;
	padding: 0 16px;
}

/* Hero */
.brc-bat .brc-bat__hero {
	position: relative;
	overflow: hidden;
	padding: calc(var(--brc-header-h, 90px) + 32px) 0 48px;
	background: var(--p);
	color: #fff;
}

.brc-bat .brc-bat__hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.35;
}

.brc-bat .brc-bat__hero::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgb(42 33 64 / 0.95) 0%, rgb(70 55 105 / 0.7) 60%, rgb(70 55 105 / 0.25) 100%);
	content: "";
}

.brc-bat .brc-bat__hero-in {
	position: relative;
	z-index: 1;
}

.brc-bat .brc-bat__eye {
	color: var(--g);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.brc-bat .brc-bat__h1 {
	margin: 10px 0 0;
	color: var(--g);
	font-family: Staatliches, "Arial Narrow", sans-serif;
	font-size: clamp(56px, 15vw, 120px);
	font-weight: 400;
	line-height: 0.92;
}

.brc-bat .brc-bat__h1-sub {
	display: block;
	margin-top: 10px;
	color: #fff;
	font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
	font-size: clamp(20px, 4.5vw, 30px);
	font-weight: 300;
	line-height: 1.2;
}

.brc-bat .brc-bat__lede {
	max-width: 640px;
	margin-top: 16px;
	color: #fff;
	font-size: 20px;
	font-weight: 300;
	line-height: 1.45;
}

.brc-bat .brc-bat__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 24px;
}

.brc-bat .brc-bat__chips li {
	padding: 6px 12px;
	border: 1px solid rgb(230 215 130 / 0.6);
	border-radius: 3px;
	color: #fff;
	font-size: 15px;
}

/* Buttons */
.brc-bat .brc-bat__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

.brc-bat .brc-bat__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 24px;
	border: 2px solid var(--g);
	border-radius: 3px;
	background: var(--g);
	color: var(--t);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: uppercase;
}

.brc-bat .brc-bat__btn:hover,
.brc-bat .brc-bat__btn:focus-visible {
	background: #fff;
	color: var(--t);
}

.brc-bat .brc-bat__btn--o {
	background: transparent;
	color: #fff;
}

.brc-bat .brc-bat__btn--sm {
	min-height: 48px;
	padding: 0 18px;
	font-size: 14px;
}

/* Section titles */
.brc-bat .brc-bat__h2 {
	margin: 0 0 12px;
	color: var(--p);
	font-family: Staatliches, "Arial Narrow", sans-serif;
	font-size: clamp(32px, 7vw, 48px);
	font-weight: 400;
	line-height: 1;
}

.brc-bat .brc-bat__h2--light {
	color: var(--g);
}

.brc-bat .brc-bat__intro {
	max-width: 720px;
	margin-bottom: 28px;
	font-size: 18px;
	line-height: 1.5;
}

/* Menu */
.brc-bat .brc-bat__menu,
.brc-bat .brc-bat__faq {
	padding: 56px 0;
	background: var(--c);
}

.brc-bat .brc-bat__courses {
	display: grid;
	gap: 16px;
}

.brc-bat .brc-bat__course {
	padding: 24px;
	border-top: 6px solid var(--p);
	border-radius: 3px;
	background: #fff;
}

.brc-bat .brc-bat__course-n {
	color: var(--p);
	font-family: Staatliches, "Arial Narrow", sans-serif;
	font-size: 22px;
}

.brc-bat .brc-bat__h3 {
	margin: 0 0 12px;
	color: var(--p);
	font-family: Staatliches, "Arial Narrow", sans-serif;
	font-size: 34px;
	font-weight: 400;
	line-height: 1;
}

.brc-bat .brc-bat__h3 span {
	color: var(--t);
	font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.brc-bat .brc-bat__dishes {
	display: grid;
	gap: 14px;
}

.brc-bat .brc-bat__dishes li + li {
	padding-top: 14px;
	border-top: 1px solid #e2d9c6;
}

.brc-bat .brc-bat__dish {
	margin: 0;
	color: var(--t);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.brc-bat .brc-bat__veg {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 6px;
	border-radius: 3px;
	background: #1f5b4a;
	color: #fff;
	font-size: 11px;
	letter-spacing: 0.08em;
	vertical-align: middle;
}

.brc-bat .brc-bat__desc {
	margin-top: 4px;
	font-size: 16px;
	line-height: 1.45;
}

.brc-bat .brc-bat__al {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin-top: 6px;
	color: #4a5a5a;
	font-size: 13px;
}

.brc-bat .brc-bat__al span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.brc-bat .brc-bat__al svg {
	width: 16px;
	height: 16px;
}

.brc-bat .brc-bat__price {
	margin-top: 24px;
	padding: 24px;
	border-radius: 3px;
	background: var(--p);
	color: #fff;
	text-align: center;
}

.brc-bat .brc-bat__price-n {
	color: var(--g);
	font-family: Staatliches, "Arial Narrow", sans-serif;
	font-size: 72px;
	line-height: 1;
}

.brc-bat .brc-bat__price p {
	color: #fff;
}

.brc-bat .brc-bat__pair {
	margin-top: 8px;
	font-weight: 700;
}

.brc-bat .brc-bat__small {
	margin-top: 6px;
	font-size: 14px;
	opacity: 0.85;
}

.brc-bat .brc-bat__menu .brc-bat__ctas,
.brc-bat .brc-bat__end .brc-bat__ctas {
	justify-content: center;
}

.brc-bat .brc-bat__menu .brc-bat__btn {
	border-color: var(--p);
	background: var(--p);
	color: #fff;
}

.brc-bat .brc-bat__more {
	margin-top: 16px;
	text-align: center;
}

.brc-bat .brc-bat__more a {
	color: var(--p);
	font-weight: 700;
	text-decoration: underline;
}

/* Photo band */
.brc-bat .brc-bat__band {
	background: var(--t);
}

.brc-bat .brc-bat__band-in {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.brc-bat .brc-bat__band-img {
	display: block;
	width: 100%;
	height: 260px;
	object-fit: cover;
}

/* Why + how */
.brc-bat .brc-bat__why {
	padding: 56px 0;
	background: #fff;
}

.brc-bat .brc-bat__steps {
	display: grid;
	gap: 16px;
}

.brc-bat .brc-bat__step {
	display: grid;
	gap: 4px;
	padding: 20px;
	border-left: 4px solid var(--p);
	background: var(--c);
}

.brc-bat .brc-bat__n {
	color: var(--p);
	font-family: Staatliches, "Arial Narrow", sans-serif;
	font-size: 28px;
}

.brc-bat .brc-bat__steps b {
	font-size: 20px;
}

/* FAQ */
.brc-bat .brc-bat__qa {
	border-bottom: 1px solid #e2d9c6;
}

.brc-bat .brc-bat__qa summary {
	padding: 16px 0;
	color: var(--p);
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
}

.brc-bat .brc-bat__qa p {
	padding-bottom: 16px;
	font-size: 16px;
	line-height: 1.5;
}

/* End */
.brc-bat .brc-bat__end {
	padding: 56px 0 64px;
	background: var(--p);
	color: #fff;
	text-align: center;
}

.brc-bat .brc-bat__end .brc-bat__lede {
	margin: 0 auto;
}

.brc-bat .brc-bat__addr {
	margin-top: 20px;
	color: #fff;
	font-size: 16px;
}

.brc-bat .brc-bat__disc {
	max-width: 640px;
	margin: 16px auto 0;
	color: #d9d2ea;
	font-size: 13px;
	line-height: 1.4;
}

/* Box at the end of the campaign articles */
.brc-bat--box {
	margin: 32px 0 8px;
}

.brc-bat .brc-bat__box {
	padding: 24px;
	border-radius: 3px;
	background: var(--p);
	color: #fff;
}

.brc-bat .brc-bat__box p {
	color: #fff;
}

.brc-bat .brc-bat__box-h {
	margin-bottom: 8px;
	color: var(--g) !important;
	font-family: Staatliches, "Arial Narrow", sans-serif;
	font-size: 32px;
	line-height: 1;
}

.brc-bat .brc-bat__box .brc-bat__more {
	text-align: left;
}

.brc-bat .brc-bat__box .brc-bat__more a {
	color: var(--g);
}

/* Strip on the menu and reservation pages */
.brc-bat--strip {
	margin: 0 0 16px;
}

.brc-bat .brc-bat__strip-in {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-radius: 3px;
	background: var(--p);
}

.brc-bat .brc-bat__strip-in p {
	flex: 1 1 260px;
	color: #fff;
	font-size: 16px;
	line-height: 1.4;
}

.brc-bat .brc-bat__strip-in b {
	color: var(--g);
}

@media (width >= 850px) {
	.brc-bat .brc-bat__hero {
		padding: calc(var(--brc-header-h, 90px) + 72px) 0 80px;
	}

	.brc-bat .brc-bat__courses {
		grid-template-columns: repeat(2, 1fr);
	}

	.brc-bat .brc-bat__steps {
		grid-template-columns: repeat(3, 1fr);
	}

	.brc-bat .brc-bat__band-img {
		height: 420px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.brc-bat * {
		transition: none !important;
	}
}