/*
 * About us (page-templates/full-width.php, inc/about.php, parts/ds-about.php).
 *
 * Laid out after thebrandbrew.in/about-us, section for section:
 *   dark banner (title, one line, rule, Home | About us)
 *   light band: small caps eyebrow, bold lead, paragraph, big mark on the right,
 *               two photos side by side, story paragraphs
 *   dark FAQ band: "FAQs" / "KNOW THE PROCESS", pill rows with a round chevron
 * in the D Story palette (ink, cream, gold) and type (Inter, Fira Sans).
 *
 * Both renderings share these rules: the Elementor layout and the theme's own
 * markup use the same class names. Selectors stay at low specificity so the
 * style controls in Elementor (per-element CSS) still override them.
 */

.dsa-page {
	--dsa-gutter: 40px;
	--dsa-pad: var(--dsa-gutter);
	--dsa-dark: #242820;
	--dsa-dark-2: #2d3129;
	--dsa-light: #fffcf6;
	--dsa-on-dark: #eee7da;
	--dsa-on-dark-soft: rgba(238, 231, 218, 0.72);
	--dsa-line-dark: rgba(238, 231, 218, 0.4);
}

.dsa-page > .elementor,
.dsa-native {
	width: 100%;
}

/* ---------- Full-width bands ----------
 * As on the reference, every band runs edge to edge; the text inside keeps to
 * the site's 1200px grid. 100vw includes the scrollbar, hence the clip. */

body.page-template-page-templates-full-width {
	overflow-x: clip;
}

.dsa-page.dsa-page :is(.dsa-hero, .dsa-intro, .dsa-gallery, .dsa-story, .dsa-faq),
.dsa-page.dsa-page .ds-dark {
	--dsa-pad: max(var(--dsa-gutter), calc(50vw - 600px + var(--dsa-gutter)));
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.dsa-page .ds-dark {
	padding-inline: var(--dsa-pad);
}

/* ---------- Containers ---------- */

.dsa-page .e-con {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--gap: 0px;
	/* Elementor spaces widgets with its own row/column gap (20px by default);
	   tie them to --gap so both renderings space things the same way. */
	--row-gap: var(--gap);
	--column-gap: var(--gap);
	--widgets-spacing-row: var(--gap);
	--widgets-spacing-column: var(--gap);
}

/* Elementor lays out its own containers; the theme's markup needs the same box. */
.dsa-native .e-con {
	display: flex;
	flex-direction: var(--flex-direction, column);
	align-items: var(--align-items, stretch);
	justify-content: var(--justify-content, flex-start);
	gap: var(--gap);
	width: 100%;
	padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
}

.dsa-page .elementor-widget:not(:last-child) {
	margin-block-end: 0;
}

.dsa-page .elementor-heading-title {
	margin: 0;
}

.dsa-page :is(.dsa-body, .dsa-hero__lead, .dsa-crumbs) p {
	margin: 0;
}

.dsa-page .dsa-body p + p {
	margin-top: 14px;
}

/* ---------- Dark banner ---------- */

.dsa-page .dsa-hero {
	--padding-top: 132px;
	--padding-right: var(--dsa-pad);
	--padding-bottom: 0px;
	--padding-left: var(--dsa-pad);
	background: var(--dsa-dark);
	color: var(--dsa-on-dark);
}

.dsa-page .dsa-hero__title .elementor-heading-title {
	font: 700 clamp(40px, 5vw, 60px) / 1.1 var(--ds-inter);
	letter-spacing: -0.025em;
	color: var(--dsa-on-dark);
}

.dsa-page .dsa-hero__lead {
	margin-top: 14px;
	font: 400 18px/1.5 var(--ds-fira);
	color: var(--dsa-on-dark);
}

.dsa-page .dsa-crumbs {
	/* The rule runs on to the right edge of the band, as on the reference. */
	--container-widget-width: calc(100% + var(--dsa-pad));
	width: calc(100% + var(--dsa-pad));
	max-width: none;
	margin: 36px 0 0;
	padding: 22px 0 24px;
	border-top: 1px solid var(--dsa-line-dark);
	font: 700 13px/1 var(--ds-fira);
	color: var(--dsa-on-dark);
}

/* Elementor caps widgets at max-width:100% with a four-class selector. */
.dsa-page.dsa-page .dsa-hero .dsa-crumbs.dsa-crumbs {
	max-width: none;
}

.dsa-page .dsa-crumbs a {
	color: var(--dsa-on-dark);
	text-decoration: none;
	transition: color 0.2s ease;
}

.dsa-page .dsa-crumbs a:hover {
	color: var(--ds-gold);
}

.dsa-page .dsa-crumbs span::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 13px;
	margin: 0 20px;
	background: var(--dsa-line-dark);
	vertical-align: -2px;
}

/* ---------- Light band: intro, photos, story ---------- */

.dsa-page :is(.dsa-intro, .dsa-gallery, .dsa-story) {
	background: var(--dsa-light);
	color: var(--ds-ink);
}

.dsa-page .dsa-intro {
	--flex-direction: row;
	--align-items: flex-start;
	--justify-content: space-between;
	--padding-top: 56px;
	--padding-right: var(--dsa-pad);
	--padding-bottom: 20px;
	--padding-left: var(--dsa-pad);
	--gap: 40px;
}

.dsa-page .dsa-intro__copy {
	--flex-direction: column;
	--width: auto;
	flex: 1 1 0;
	max-width: 640px;
}

.dsa-page .dsa-eyebrow .elementor-heading-title {
	font: 700 12px/1.3 var(--ds-fira);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ds-ink);
}

.dsa-page .dsa-intro__lead {
	margin-top: 36px;
}

.dsa-page .dsa-intro__lead .elementor-heading-title {
	font: 700 16px/1.45 var(--ds-fira);
	letter-spacing: 0;
	color: var(--ds-ink);
}

.dsa-page .dsa-intro .dsa-body {
	margin-top: 36px;
}

.dsa-page .dsa-body {
	font: 400 16px/1.7 var(--ds-fira);
	color: rgba(36, 40, 32, 0.84);
}

.dsa-page .dsa-intro__mark {
	--container-widget-width: 230px;
	flex: 0 0 230px;
	width: 230px;
	line-height: 0;
}

.dsa-page .dsa-intro__mark img {
	width: 100%;
	height: auto;
	opacity: 0.35;
	filter: grayscale(1);
	transition: opacity 0.5s ease, filter 0.5s ease;
}

.dsa-page .dsa-intro__mark:hover img {
	opacity: 1;
	filter: none;
}

.dsa-page .dsa-gallery {
	--flex-direction: row;
	--padding-top: 12px;
	--padding-right: var(--dsa-pad);
	--padding-left: var(--dsa-pad);
	--gap: 12px;
}

.dsa-page .dsa-gallery__img {
	--container-widget-width: auto;
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	border-radius: 4px;
	line-height: 0;
}

.dsa-page .dsa-gallery__img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: scale 0.8s ease;
}

.dsa-page .dsa-story {
	--padding-top: 44px;
	--padding-right: var(--dsa-pad);
	--padding-bottom: 44px;
	--padding-left: var(--dsa-pad);
}

/* ---------- FAQ band ---------- */

.dsa-page .dsa-faq {
	--padding-top: 40px;
	--padding-right: var(--dsa-pad);
	--padding-bottom: 96px;
	--padding-left: var(--dsa-pad);
	background: var(--dsa-dark-2);
	color: var(--dsa-on-dark);
}

.dsa-page .dsa-faq__title .elementor-heading-title {
	font: 700 44px/1.1 var(--ds-inter);
	letter-spacing: -0.02em;
	color: var(--dsa-on-dark);
}

.dsa-page .dsa-faq__sub .elementor-heading-title {
	font: 700 30px/1.15 var(--ds-inter);
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--dsa-on-dark);
}

.dsa-page .dsa-accordion {
	margin-top: 40px;
}

.dsa-page .dsa-accordion :is(.elementor-accordion, .elementor-toggle) {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.dsa-page .dsa-accordion :is(.elementor-accordion-item, .elementor-toggle-item),
.dsa-page .dsa-accordion .elementor-accordion-item + :is(.elementor-accordion-item, .elementor-toggle-item) {
	margin: 0;
	border: 1px solid var(--dsa-line-dark);
	border-radius: 30px;
	overflow: hidden;
	transition: border-color 0.3s ease, background-color 0.3s ease;
}

.dsa-page .dsa-accordion :is(.elementor-accordion-item, .elementor-toggle-item):has(.elementor-active),
.dsa-page .dsa-accordion :is(.elementor-accordion-item, .elementor-toggle-item)[open] {
	border-color: var(--ds-gold);
	background: rgba(238, 231, 218, 0.04);
}

.dsa-page .dsa-accordion .elementor-tab-title {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 56px;
	padding: 8px 9px 8px 38px;
	border: 0;
	font: 700 16px/1.35 var(--ds-fira);
	color: var(--dsa-on-dark);
	cursor: pointer;
	list-style: none;
}

.dsa-page .dsa-accordion summary::-webkit-details-marker {
	display: none;
}

.dsa-page .dsa-accordion :is(.elementor-accordion-title, .elementor-toggle-title) {
	color: var(--dsa-on-dark);
	text-decoration: none;
}

.dsa-page .dsa-accordion :is(.elementor-accordion-icon, .elementor-toggle-icon) {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--dsa-line-dark);
	border-radius: 50%;
	font-size: 12px;
	color: var(--dsa-on-dark);
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, rotate 0.3s ease;
}

.dsa-page .dsa-accordion :is(.elementor-accordion-icon, .elementor-toggle-icon) svg {
	width: 13px;
	height: 13px;
	fill: currentColor;
}

.dsa-page .dsa-accordion :is(.elementor-accordion-icon, .elementor-toggle-icon) > svg {
	fill: none;
}

.dsa-page .dsa-accordion .elementor-active :is(.elementor-accordion-icon, .elementor-toggle-icon),
.dsa-page .dsa-accordion [open] :is(.elementor-accordion-icon, .elementor-toggle-icon) {
	border-color: var(--ds-gold);
	background: var(--ds-gold);
	color: var(--ds-ink);
}

.dsa-page .dsa-accordion [open] :is(.elementor-accordion-icon, .elementor-toggle-icon) {
	rotate: 180deg;
}

.dsa-page .dsa-accordion .elementor-tab-content {
	padding: 0 38px 24px;
	border: 0;
	font: 400 16px/1.65 var(--ds-fira);
	color: var(--dsa-on-dark-soft);
}

.dsa-page .dsa-accordion .elementor-tab-content p {
	margin: 0;
}

.dsa-page .dsa-accordion .elementor-tab-content a {
	color: var(--ds-gold);
}

/* The call-to-action band that follows starts on the same dark, without a seam. */
.dsa-page .ds-dark {
	padding-top: 72px;
}

/* ---------- Motion ---------- */

@media (hover: hover) {
	.dsa-page .dsa-gallery__img:hover img {
		scale: 1.05;
	}

	.dsa-page .dsa-accordion :is(.elementor-accordion-item, .elementor-toggle-item):hover {
		border-color: rgba(185, 144, 61, 0.75);
	}

	.dsa-page .dsa-accordion .elementor-tab-title:hover :is(.elementor-accordion-icon, .elementor-toggle-icon) {
		border-color: var(--ds-gold);
		color: var(--ds-gold);
	}

	.dsa-page .dsa-accordion :is(.elementor-active, [open] > summary):hover :is(.elementor-accordion-icon, .elementor-toggle-icon) {
		color: var(--ds-ink);
	}
}

/* ---------- Tablets ---------- */

@media (max-width: 1199.98px) {
	.dsa-page .dsa-intro__mark {
		--container-widget-width: 180px;
		flex-basis: 180px;
		width: 180px;
	}
}

/* ---------- Phones ---------- */

@media (max-width: 809.98px) {
	.dsa-page {
		--dsa-gutter: 20px;
	}

	.dsa-page .dsa-hero {
		--padding-top: 72px;
	}

	.dsa-page .dsa-hero__lead {
		font-size: 16px;
	}

	.dsa-page .dsa-crumbs {
		margin-top: 28px;
	}

	.dsa-page .dsa-intro {
		--flex-direction: column-reverse;
		--gap: 24px;
		--padding-top: 40px;
		flex-direction: column-reverse;
	}

	.dsa-page .dsa-intro__copy {
		max-width: none;
	}

	.dsa-page .dsa-intro__lead,
	.dsa-page .dsa-intro .dsa-body {
		margin-top: 22px;
	}

	/* The big D mark is decoration; on phones it only pushes the text down. */
	.dsa-page .dsa-intro__mark {
		display: none;
	}

	.dsa-page .dsa-gallery {
		--flex-direction: column;
		flex-direction: column;
		--gap: 12px;
	}

	/* flex-basis 0 in a column would collapse the photos to no height. */
	.dsa-page .dsa-gallery__img {
		flex: 0 0 auto;
	}

	.dsa-page .dsa-story {
		--padding-top: 32px;
		--padding-bottom: 36px;
	}

	.dsa-page .dsa-faq {
		--padding-top: 40px;
		--padding-bottom: 64px;
	}

	.dsa-page .dsa-faq__title .elementor-heading-title {
		font-size: 36px;
	}

	.dsa-page .dsa-faq__sub .elementor-heading-title {
		font-size: 22px;
	}

	.dsa-page .dsa-accordion {
		margin-top: 28px;
	}

	.dsa-page .dsa-accordion .elementor-tab-title {
		padding: 8px 8px 8px 22px;
		font-size: 15px;
	}

	.dsa-page .dsa-accordion :is(.elementor-accordion-item, .elementor-toggle-item) {
		border-radius: 26px;
	}

	.dsa-page .dsa-accordion .elementor-tab-content {
		padding: 0 22px 20px;
		font-size: 15px;
	}
}