/**
 * Diane Bridal Landing Blocks - front-end styles.
 *
 * Every rule is scoped to the plugin markup (.dbl and its children). There is
 * no html/body/tag-level selector, so nothing here can reach the rest of the
 * Avada site. Colours and fonts are exposed as custom properties, which can be
 * overridden from Avada > Global Options > Custom CSS.
 */

.dbl {
	/* Palette. */
	--dbl-ink: #181713;
	--dbl-muted: #68645d;
	--dbl-ivory: #f8f6f1;
	--dbl-paper: #fff;
	--dbl-dark: #1d1b18;

	/* Champagne comes in three tones: decorative, text-safe and hover-safe.
	   The two darker tones clear 4.5:1 contrast, the light one never carries text. */
	--dbl-champagne: #b59a70;
	--dbl-champagne-ink: #7a6440;
	--dbl-champagne-deep: #8a6f47;

	--dbl-line: rgba(24, 23, 19, .14);
	--dbl-shadow: 0 28px 80px rgba(31, 27, 21, .15);

	/* Typography. */
	--dbl-head: "Italiana", "Cormorant Garamond", Georgia, serif;
	--dbl-body: "DM Sans", "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Layout. */
	--dbl-shell: 1180px;
	--dbl-gutter: 40px;
	--dbl-vw: 100vw;

	color: var(--dbl-ink);
	font-family: var(--dbl-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.dbl *,
.dbl *::before,
.dbl *::after {
	box-sizing: border-box;
}

.dbl a {
	color: inherit;
}

.dbl p {
	margin: 0;
}

/**
 * Theme-proofing.
 *
 * Avada sets heading typography from Global Options with selectors that can be
 * more specific than a plain class. These few declarations are forced so the
 * section always looks the same, while still resolving the custom properties
 * above - overriding a token still works.
 */
.dbl .dbl-title,
.dbl .dbl-pillar__title {
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--dbl-head) !important;
	font-weight: 400 !important;
	line-height: 1.03 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: inherit !important;
	text-wrap: balance;
}

/* Full-bleed helper. --dbl-vw is set by the script to the document width, so
   the breakout never creates a horizontal scrollbar. */
.dbl-bleed {
	width: var(--dbl-vw);
	max-width: none;
	margin-left: calc(50% - var(--dbl-vw) / 2);
	margin-right: calc(50% - var(--dbl-vw) / 2);
}

.dbl .dbl-shell {
	width: min(var(--dbl-shell), calc(100% - var(--dbl-gutter)));
	margin-inline: auto;
}

.dbl .dbl-eyebrow {
	margin: 0 0 20px;
	font-family: var(--dbl-body);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .22em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------- Buttons */

.dbl .dbl-btn {
	display: inline-flex;
	min-height: 54px;
	align-items: center;
	justify-content: center;
	padding-inline: 27px;
	border: 1px solid var(--dbl-ink);
	border-radius: 0;
	background: var(--dbl-ink);
	color: #fff;
	font-family: var(--dbl-body);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .14em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}

.dbl .dbl-btn:hover,
.dbl .dbl-btn:focus-visible {
	border-color: var(--dbl-champagne-deep);
	background: var(--dbl-champagne-deep);
	color: #fff;
	transform: translateY(-2px);
}

.dbl .dbl-btn:focus-visible {
	outline: 3px solid var(--dbl-champagne-deep);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------- Hero */

.dbl-hero {
	position: relative;
	display: grid;
	align-items: center;
	overflow: hidden;
	min-height: var(--dbl-hero-h, 760px);
	background: #5e5953;
}

.dbl-hero__bg {
	position: absolute;
	inset: 0;
	background-image: var(--dbl-ov, linear-gradient(90deg, rgba(17, 15, 13, .75), rgba(17, 15, 13, .1))), var(--dbl-img, none);
	background-position: var(--dbl-focal, center center);
	background-repeat: no-repeat;
	background-size: cover;
}

.dbl-hero__copy {
	position: relative;
	z-index: 1;
	width: min(620px, 54%);
	padding-block: 150px 205px;
	color: #fff;
}

.dbl-hero .dbl-eyebrow {
	color: rgba(255, 255, 255, .82);
}

.dbl .dbl-hero__title {
	max-width: 8ch;
	font-size: clamp(3.4rem, 6.7vw, 6.6rem);
}

.dbl .dbl-hero__text {
	max-width: 520px;
	margin: 26px 0 34px;
	color: rgba(255, 255, 255, .88);
	font-size: 1.08rem;
}

.dbl-hero .dbl-btn {
	border-color: #fff;
	background: #fff;
	color: var(--dbl-ink);
}

.dbl-hero .dbl-btn:hover,
.dbl-hero .dbl-btn:focus-visible {
	border-color: var(--dbl-champagne-deep);
	background: var(--dbl-champagne-deep);
	color: #fff;
}

.dbl-hero .dbl-btn:focus-visible {
	outline-color: #fff;
}

/* ---------------------------------------------------------------- Booking */

.dbl-booking {
	position: relative;
	z-index: 3;
}

.dbl-booking.is-overlap {
	margin-top: -130px;
}

.dbl-booking__grid {
	display: grid;
	grid-template-columns: .78fr 1.22fr;
	min-height: 420px;
	background: var(--dbl-paper);
	box-shadow: var(--dbl-shadow);
}

.dbl-booking__intro {
	padding: 64px 54px;
	background: var(--dbl-dark);
	color: #fff;
}

.dbl-booking__intro .dbl-eyebrow {
	color: #cbb997;
}

.dbl .dbl-booking__title {
	font-size: clamp(2.5rem, 4vw, 4rem);
}

.dbl-booking__intro p {
	margin-top: 23px;
	color: rgba(255, 255, 255, .78);
}

.dbl-booking__slot {
	display: grid;
	min-height: 420px;
	padding: 40px;
	place-items: center;
}

.dbl-booking__slot > * {
	width: 100%;
}

.dbl-embed-empty {
	display: grid;
	width: 100%;
	min-height: 340px;
	border: 1px dashed #bdb7ae;
	background: #fbfaf7;
	color: var(--dbl-muted);
	place-items: center;
	text-align: center;
}

.dbl-embed-empty strong {
	display: block;
	margin-bottom: 6px;
	color: var(--dbl-ink);
	font-family: var(--dbl-head);
	font-size: 1.7rem;
	font-weight: 400;
}

/* ------------------------------------------------------------- Experience */

.dbl-experience {
	padding: 130px 0 110px;
	background: var(--dbl-exp-bg, var(--dbl-ivory));
	text-align: center;
}

.dbl-experience .dbl-eyebrow {
	color: var(--dbl-champagne-ink);
}

.dbl .dbl-experience__title {
	max-width: 760px;
	margin-inline: auto !important;
	font-size: clamp(2.6rem, 5vw, 4.8rem);
}

.dbl-pillars {
	display: grid;
	grid-template-columns: repeat(var(--dbl-cols, 3), minmax(0, 1fr));
	margin-top: 70px;
	border-block: 1px solid var(--dbl-line);
}

.dbl-pillar {
	padding: 40px 30px;
}

.dbl-pillar + .dbl-pillar {
	border-inline-start: 1px solid var(--dbl-line);
}

.dbl-pillar__num {
	display: block;
	color: var(--dbl-champagne-ink);
	font-family: var(--dbl-head);
	font-size: 1.2rem;
	line-height: 1;
}

.dbl .dbl-pillar__title {
	margin: 13px 0 9px !important;
	font-size: 1.65rem;
	line-height: 1.2 !important;
}

.dbl-pillar p {
	max-width: 285px;
	margin-inline: auto;
	color: var(--dbl-muted);
}

/* -------------------------------------------------------------- Final CTA */

.dbl-cta {
	padding: 90px 20px;
	background: var(--dbl-cta-bg, #d7d0c4);
	text-align: center;
}

.dbl .dbl-cta__title {
	max-width: 720px;
	margin-inline: auto !important;
	font-size: clamp(2.7rem, 5vw, 5rem);
}

.dbl .dbl-cta__text {
	max-width: 620px;
	margin: 22px auto 30px;
	color: var(--dbl-cta-text, #56514a);
}

/* Sticky mobile booking button. Hidden on desktop. */
.dbl-sticky {
	display: none;
}

/* -------------------------------------------------------------- Responsive */

@media (max-width: 800px) {
	.dbl {
		--dbl-gutter: 28px;
		--dbl-shell: 680px;
	}

	.dbl-hero {
		align-items: end;
	}

	.dbl-hero__bg {
		background-image: var(--dbl-ov-m, linear-gradient(0deg, rgba(17, 15, 13, .82), rgba(17, 15, 13, .1))), var(--dbl-img, none);
		background-position: 65% center;
	}

	.dbl-hero__copy {
		width: 100%;
		padding-block: 190px 160px;
	}

	.dbl .dbl-hero__title {
		max-width: 9ch;
		font-size: clamp(3.25rem, 15vw, 5rem);
	}

	.dbl-booking.is-overlap {
		margin-top: -90px;
	}

	.dbl-booking__grid {
		grid-template-columns: 1fr;
	}

	.dbl-booking__intro {
		padding: 42px 30px;
	}

	.dbl-booking__slot {
		min-height: 390px;
		padding: 20px;
	}

	.dbl-experience {
		padding: 90px 0;
	}

	.dbl-pillars {
		grid-template-columns: 1fr;
	}

	.dbl-pillar + .dbl-pillar {
		border-inline-start: 0;
		border-top: 1px solid var(--dbl-line);
	}

	/* Keep the last section clear of the sticky button. */
	.dbl-sticky {
		position: fixed;
		z-index: 8;
		right: 14px;
		bottom: 14px;
		left: 14px;
		display: flex;
		box-shadow: 0 12px 30px rgba(0, 0, 0, .24);
	}

	.dbl-sticky__btn {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dbl .dbl-btn {
		transition: none;
	}

	.dbl .dbl-btn:hover,
	.dbl .dbl-btn:focus-visible {
		transform: none;
	}
}