/**
 * Brother Tours landing templates.
 *
 * Support for the Elementor landing-page kit. The templates carry the theme's
 * own classes -- .section, .wrap, .eyebrow, .btn -- and this file adds only the
 * handful of patterns those templates need that the theme did not already have.
 *
 * Every value resolves to a token from brand-tokens.css. Nothing here declares
 * a colour, a font family or a corner radius of its own, which is what makes
 * light and dark mode work without a second rule set.
 *
 * All selectors are namespaced bt-landing-* so nothing collides with the theme,
 * Elementor or WordPress core.
 */

/* ====================================================== editor-only notes */
.bt-landing-verify { display: none; }

body.elementor-editor-active .bt-landing-verify,
body.bt-show-verify .bt-landing-verify {
	display: block;
	margin: 12px 0;
	padding: 10px 14px;
	border-left: 3px solid var(--gold);
	background: color-mix(in srgb, var(--gold) 10%, transparent);
	font-family: var(--mono);
	font-size: 12px;
	line-height: 1.6;
	letter-spacing: .02em;
	color: var(--ink);
}

body.elementor-editor-active .bt-landing-verify strong,
body.bt-show-verify .bt-landing-verify strong {
	display: block;
	margin-bottom: 4px;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-size: 10px;
	color: var(--gold-ink, var(--gold));
}

/* ============================================================== stacking */
@media (max-width: 1024px) {
	.bt-landing-hero__copy,
	.bt-landing-hero__media { flex-basis: auto; width: 100%; }
}

@media (max-width: 479px) {
	.bt-landing-ctas .elementor-widget-button,
	.bt-landing-ctas .btn { width: 100%; justify-content: center; }
}

/* ================================================================== hero */
.bt-landing-hero__copy  { flex: 1 1 52%; min-width: 0; }
.bt-landing-hero__media { flex: 1 1 40%; min-width: 0; }

.bt-landing-hero__image img {
	width: 100%; height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--radius);
}

.bt-landing-badges ul {
	display: flex; flex-wrap: wrap;
	gap: 10px 22px; margin: 4px 0 0; padding: 0; list-style: none;
}

.bt-landing-badges .elementor-icon-list-text {
	font-family: var(--mono);
	font-size: .62rem; font-weight: 600;
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--ink-muted);
}

.bt-landing-ctas { margin-top: 12px; }

/* ========================================================= quick answer */
.bt-landing-quick__body p {
	max-width: 68ch;
	font-size: 1.0625rem; line-height: 1.75;
	color: var(--ink-soft);
}
.bt-landing-quick__body p + p { margin-top: 1em; }

/* ================================================================ cards */
.bt-landing-cards { margin-top: 12px; }

.bt-landing-card {
	flex: 1 1 calc((100% - 48px) / 3);
	min-width: 0; padding: 26px 24px;
	background: var(--bg-card);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
}

.bt-landing-card__title {
	font-family: var(--serif);
	font-size: 1.125rem; font-weight: 500; line-height: 1.3;
	color: var(--ink);
}

.bt-landing-card__body p { font-size: .9375rem; line-height: 1.7; color: var(--ink-soft); }

@media (max-width: 1023px) { .bt-landing-card { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 767px)  { .bt-landing-card { flex-basis: 100%; } }

/* ======================================================== planning grid */
.bt-landing-planning__item {
	flex: 1 1 calc((100% - 32px) / 2);
	min-width: 0; padding-top: 18px;
	border-top: 1px solid var(--rule);
}

.bt-landing-planning__label {
	font-family: var(--mono);
	font-size: .68rem; font-weight: 600;
	letter-spacing: .18em; text-transform: uppercase;
	color: var(--gold-ink, var(--gold));
}

.bt-landing-planning__item p { font-size: .9375rem; line-height: 1.7; color: var(--ink-soft); }

@media (max-width: 767px) { .bt-landing-planning__item { flex-basis: 100%; } }

/* ======================================================== process steps */
.bt-landing-steps {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 28px; margin: 12px 0 0; padding: 0; list-style: none;
}

.bt-landing-step {
	display: flex; flex-direction: column; gap: 8px;
	padding-top: 18px; border-top: 1px solid var(--rule);
}

.bt-landing-step__n {
	font-family: var(--mono);
	font-size: .68rem; font-weight: 600; letter-spacing: .18em;
	color: var(--gold-ink, var(--gold));
}

.bt-landing-step__title { font-family: var(--serif); font-size: 1.0625rem; line-height: 1.3; color: var(--ink); }
.bt-landing-step__body  { font-size: .875rem; line-height: 1.65; color: var(--ink-soft); }

@media (max-width: 1023px) { .bt-landing-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px)  { .bt-landing-steps { grid-template-columns: 1fr; } }

/* ============================================================== insight */
.bt-landing-insight__body p {
	max-width: 62ch;
	font-family: var(--serif);
	font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
	font-style: italic; line-height: 1.65;
	color: var(--on-dark);
}
.bt-landing-insight__body p + p { margin-top: .8em; }

.bt-landing-insight__attribution p {
	font-family: var(--mono);
	font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
	color: var(--on-dark-muted);
}

/* ================================================================== faq */
.bt-landing-faq .elementor-accordion-item { border: 0; border-bottom: 1px solid var(--rule); }

.bt-landing-faq .elementor-tab-title {
	font-family: var(--serif);
	font-size: 1.0625rem; font-weight: 500;
	color: var(--ink); background: transparent; padding: 20px 0;
}

.bt-landing-faq .elementor-tab-title a { color: inherit; }

.bt-landing-faq .elementor-tab-content {
	border: 0; padding: 0 0 20px; background: transparent;
	font-size: .9375rem; line-height: 1.75; color: var(--ink-soft);
}

/* ============================================================== related */
.bt-landing-related__links ul {
	display: flex; flex-wrap: wrap; gap: 10px 28px;
	margin: 0; padding: 0; list-style: none;
}

.bt-landing-related__links a {
	font-size: .9375rem; color: var(--ink-soft); text-decoration: none;
	border-bottom: 1px solid var(--rule-strong); padding-bottom: 2px;
	transition: color .3s var(--ease), border-color .3s var(--ease);
}

.bt-landing-related__links a:hover,
.bt-landing-related__links a:focus-visible { color: var(--ink); border-color: currentColor; }

/* =============================================================== places */
.bt-landing-places ul {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 32px; margin: 0; padding: 0; list-style: none;
}

.bt-landing-places li {
	padding-top: 12px; border-top: 1px solid var(--rule);
	font-size: .9375rem; line-height: 1.6;
}

.bt-landing-places a { color: var(--ink-soft); text-decoration: none; }
.bt-landing-places a:hover,
.bt-landing-places a:focus-visible { color: var(--ink); }

@media (max-width: 767px) { .bt-landing-places ul { grid-template-columns: 1fr; } }

/* ============================================================== generic */
.bt-landing-hero .wrap, .bt-landing-quick .wrap, .bt-landing-why .wrap,
.bt-landing-journeys .wrap, .bt-landing-destinations .wrap,
.bt-landing-planning .wrap, .bt-landing-resource .wrap,
.bt-landing-insight .wrap, .bt-landing-process .wrap,
.bt-landing-faq-section .wrap, .bt-landing-related .wrap {
	max-width: var(--max); margin-inline: auto; padding-inline: 40px;
}

@media (max-width: 767px) {
	.bt-landing-hero .wrap, .bt-landing-quick .wrap, .bt-landing-why .wrap,
	.bt-landing-journeys .wrap, .bt-landing-destinations .wrap,
	.bt-landing-planning .wrap, .bt-landing-resource .wrap,
	.bt-landing-insight .wrap, .bt-landing-process .wrap,
	.bt-landing-faq-section .wrap, .bt-landing-related .wrap { padding-inline: 20px; }
}

.bt-landing-invitation { padding: 0; }

@media (prefers-reduced-motion: reduce) { .bt-landing-related__links a { transition: none; } }


/* ===========================================================================
 * Elementor bridge
 * ===========================================================================
 *
 * Two structural mismatches between the landing kit and Elementor 4.x, fixed
 * here rather than by editing the templates.
 *
 * 1. Elementor renders a button as
 *      <div class="elementor-element ... btn btn--primary elementor-widget-button">
 *        <a class="elementor-button">…</a>
 *      </div>
 *    The kit's `btn` / `btn--primary` classes land on the WRAPPER, so the
 *    theme's button rules — which target the anchor — never reached the
 *    control. Every CTA was rendering as an Elementor default button.
 *
 * 2. Elementor's container base sets padding and max-width from its own custom
 *    properties at .e-con specificity. The theme's .section and .wrap can lose
 *    that race depending on stylesheet order, which flattens the page to the
 *    viewport edge. Re-asserted below, scoped to landing pages only.
 * ========================================================================= */

/* ---- buttons ----------------------------------------------------------- *
 *
 * Elementor renders a button as a wrapper <div> containing the <a>. The kit
 * puts `btn` / `btn--primary` on the WRAPPER, so the theme styled the wrapper
 * — producing a bordered box around a second bordered box, and squeezing the
 * label until it wrapped.
 *
 * Fix: strip the wrapper back to a layout box with no decoration, and put the
 * real button on the anchor using the child theme's own metrics from
 * brand-tokens.css, so a landing CTA is pixel-identical to one in a PHP
 * template.
 * ----------------------------------------------------------------------- */

.elementor-widget-button.btn,
.elementor-widget-button.btn--primary,
.elementor-widget-button.btn-solid {
	display: inline-flex;
	padding: 0;
	margin: 0;
	gap: 0;
	border: 0;
	background: none;
	min-height: 0;
	box-shadow: none;
}

.elementor-widget-button .elementor-button-wrapper { display: inline-flex; }

.elementor-widget-button.btn .elementor-button,
.elementor-widget-button.btn .elementor-button:visited {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 18px 36px;
	border: 1px solid var(--gold);
	border-radius: 0;
	background: transparent;
	color: var(--gold);
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .22em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: none;
	transition: background-color .3s var(--ease, ease), color .3s var(--ease, ease), border-color .3s var(--ease, ease);
}

.elementor-widget-button.btn .elementor-button .elementor-button-content-wrapper,
.elementor-widget-button.btn .elementor-button .elementor-button-text {
	white-space: nowrap;
	flex-grow: 0;
}

.elementor-widget-button.btn .elementor-button:hover,
.elementor-widget-button.btn .elementor-button:focus-visible {
	border-color: var(--gold-fill);
	background: var(--gold-fill);
	color: var(--on-gold);
}

/* Primary — the solid gold conversion action, per brand-tokens.css. */
.elementor-widget-button.btn--primary .elementor-button,
.elementor-widget-button.btn--primary .elementor-button:visited,
.elementor-widget-button.btn-solid .elementor-button {
	border-color: var(--gold-fill);
	background: var(--gold-fill);
	color: var(--on-gold);
}

.elementor-widget-button.btn--primary .elementor-button:hover,
.elementor-widget-button.btn--primary .elementor-button:focus-visible,
.elementor-widget-button.btn-solid .elementor-button:hover {
	background: transparent;
	border-color: var(--gold);
	color: var(--gold);
}

/* The CTA row: keep the two actions side by side, wrapping only when narrow. */
.bt-landing-ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 12px;
}

@media (max-width: 479px) {
	.bt-landing-ctas { flex-direction: column; align-items: stretch; }
	.bt-landing-ctas .elementor-widget-button,
	.bt-landing-ctas .elementor-widget-button .elementor-button { width: 100%; justify-content: center; }
}
/* ---- section rhythm and measure --------------------------------------- */

.elementor .e-con.section {
	padding-block: var(--section-pad, 100px);
	padding-inline: 0;
}

.elementor .e-con.section.tight {
	padding-block: 72px;
}

.elementor .e-con.wrap {
	max-width: var(--max);
	width: 100%;
	margin-inline: auto;
	padding-inline: 40px;
}

@media (max-width: 1024px) {
	.elementor .e-con.section { padding-block: 72px; }
}

@media (max-width: 767px) {
	.elementor .e-con.section { padding-block: 56px; }
	.elementor .e-con.wrap    { padding-inline: 22px; }
}

/* The invitation widget renders its own full-bleed band, so it opts out. */
.elementor .e-con.section.bt-landing-invitation {
	padding-block: 0;
}

/* Hero framing keyed to the media column rather than the image widget's own
   custom class, which Elementor does not emit reliably on every page. */
.bt-landing-hero__media .elementor-widget-image img,
.bt-landing-hero__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--radius);
}

/* Elementor's image widget wrapper is inline-block by default, which leaves a
   baseline gap under the hero picture. */
.bt-landing-hero__media .elementor-widget-image figure,
.bt-landing-hero__media .elementor-widget-image .elementor-image {
	margin: 0;
	line-height: 0;
}