/**
 * Cork to Fork — page styles.
 *
 * Loaded only on the Cork to Fork page template. Values are taken from the
 * client's comp and the Tennessee Whiskey Trail design system tokens.
 *
 * Fonts: UtileDisplay and ZeitungPro are already declared site-wide by the
 * theme, so no @font-face here. Available weights are UtileDisplay 300/500
 * and ZeitungPro 500/600/700 — the comp asks for 600/700 display weights
 * that do not exist as real faces, so those synthesise.
 */

.ctf-page {
	--ctf-black:      #221D1C;

	/*
	 * Amber contrast, measured 2026-08-10.
	 *
	 * --ctf-amber on white is 4.09:1. That clears WCAG AA for large text (3:1)
	 * but fails it for anything under 24px (4.5:1) — and at 390px the fluid type
	 * scale drops several headings under that line, so the same colour passed at
	 * 1440 and failed on a phone.
	 *
	 * So amber is now a large-text and decorative colour only. Small text picks
	 * by background:
	 *   on light  -> --ctf-amber-dark  5.76:1 on white, 5.31 on paper, 4.80 on cream
	 *   on dark   -> --ctf-oak         7.03:1 on --ctf-black
	 * Darkening would have made the dark-background labels worse, which is why
	 * this goes in two directions rather than one.
	 */
	--ctf-amber:      #A87239;
	--ctf-amber-dark: #8A5B2B;
	--ctf-amber-deep: #6F4922; /* hover for buttons that now sit at amber-dark */
	--ctf-oak:        #C6A27C;
	--ctf-cream:      #F3E9DD;
	--ctf-paper:      #FAF5EE;
	--ctf-ink:        #4A423D;
	--ctf-ink-soft:   #5C534E;
	--ctf-border:     #E4D8C8;
	--ctf-white:      #FFFFFF;

	--ctf-display: UtileDisplay, "Utile Display", sans-serif;
	--ctf-text:    ZeitungPro, "Zeitung Pro", sans-serif;

	/* UtileDisplay exists only at 300 and 500. Requesting 600/700 produced a
	   synthesised faux-bold that read noticeably heavier than the comp. */
	--ctf-display-weight: 500;

	/* Sections are full-bleed; content sits in the site's standard 1300px
	   container (theme body class mkdf-grid-1300, measured on /tn-collective/
	   as 1300px wide / 70px inset at 1440). 100% here resolves against the
	   full-bleed section, so this reproduces that container exactly and
	   collapses to a 20px gutter below 1340. */
	--ctf-content: 1300px;
	--ctf-pad-x: max(20px, calc((100% - var(--ctf-content)) / 2));

	background: #E8E1D7;
	font-family: var(--ctf-text);
	color: var(--ctf-ink);
}

/* Full-bleed sections, like every other row on the site. Backgrounds and
   hero media run edge to edge; text content is held to --ctf-content by the
   gutter padding each section applies.
   NOTE: no background here. `.ctf-page > section` is specificity (0,1,1) and
   would beat every section's own `.ctf-*` rule (0,1,0), silently flattening
   the dark sections. Each section sets its own background instead.
   border-box matters because the gutter is padding: without it, padding would
   add to the width instead of being absorbed by it. */
.ctf-page > section {
	box-sizing: border-box;
	width: 100%;
}

.ctf-page p { margin: 0; }

/* Never let the browser fake a weight we do not have. */
.ctf-page,
.ctf-page * { font-synthesis-weight: none; }

/* ---------------------------------------------------------------------
 * Shared: eyebrow label with the amber triangle from the comp
 * ------------------------------------------------------------------ */

.ctf-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	font-family: var(--ctf-display);
	font-size: 13px;
	font-weight: var(--ctf-display-weight);
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--ctf-amber-dark);
}

.ctf-eyebrow::before {
	content: "";
	flex: none;
	width: 0;
	height: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 12px solid var(--ctf-amber-dark);
}

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

.ctf-hero {
	background: var(--ctf-white);
	overflow: hidden;
}

.ctf-hero__media {
	position: relative;
	/* The comp's 1280x620 ratio. Full-bleed that works out around 700px tall at
	   1440, which pushed the h1 below the fold. The viewport cap keeps the
	   heading visible on short screens; the video is object-fit: cover, so it
	   crops rather than distorts. */
	aspect-ratio: 64 / 31;
	max-height: 44vh;
	/* width must be explicit: with an auto width, max-height makes the browser
	   shrink the WIDTH to preserve the aspect ratio, and the hero stops short
	   of the right edge instead of staying full-bleed. */
	width: 100%;
	background: var(--ctf-black);
	overflow: hidden;
}

.ctf-hero__poster,
.ctf-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% 50%;
}

.ctf-hero__poster {
	opacity: 0.82;
	transition: opacity 400ms ease;
}

/*
 * Once the video is actually playing, take the poster out. Both layers were
 * sitting at 0.82, so the still bled through the semi-transparent video and
 * read as a ghost image. The poster still covers the pre-playback moment, and
 * mobile — where the video is never loaded — is unaffected.
 */
.ctf-hero__media.is-playing .ctf-hero__poster { opacity: 0; }

/* Video fades in once it is actually playing, so there is no flash of black
   between the poster and the first decoded frame. */
.ctf-hero__video {
	opacity: 0;
	transition: opacity 400ms ease;
}

.ctf-hero__media.is-playing .ctf-hero__video { opacity: 0.82; }

.ctf-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(34, 29, 28, 0.62) 0%,
		rgba(34, 29, 28, 0.12) 34%,
		rgba(34, 29, 28, 0.52) 74%,
		rgba(34, 29, 28, 0.92) 100%
	);
}

.ctf-hero__body {
	display: grid;
	gap: 26px;
	padding: 42px var(--ctf-pad-x) 40px;
}

.ctf-hero__heading {
	margin: 0;
	max-width: 1040px;
	font-family: var(--ctf-display);
	font-size: clamp(34px, 4.8vw, 62px);
	font-weight: var(--ctf-display-weight);
	line-height: 1.02;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	color: var(--ctf-black);
	text-wrap: balance;
}

.ctf-hero__kicker {
	font-family: var(--ctf-display);
	font-size: clamp(20px, 2.3vw, 30px);
	font-weight: var(--ctf-display-weight);
	line-height: 1.15;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ctf-amber-dark);
}

.ctf-hero__intro {
	max-width: 1000px;
	font-size: clamp(17px, 1.9vw, 28px);
	line-height: 1.42;
	color: var(--ctf-ink);
	text-wrap: pretty;
}

.ctf-hero__intro p { margin: 0; }
.ctf-hero__intro .ctf-accent,
.ctf-hero__intro span { color: var(--ctf-amber-dark); }

@media (max-width: 767px) {
	.ctf-hero__media { aspect-ratio: 4 / 3; }
}

/* ---------------------------------------------------------------------
 * Start at the Still
 * ------------------------------------------------------------------ */

.ctf-sits {
	padding: 8px var(--ctf-pad-x) 72px;
	background: var(--ctf-white);
}

.ctf-sits__heading {
	margin: 0 0 40px;
}

.ctf-sits__steps {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 84px; /* the comp's dead centre column */
	align-items: start;
}

.ctf-sits__step {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.ctf-sits__media {
	height: 340px;
	overflow: hidden;
	background: var(--ctf-black);
}

.ctf-sits__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ctf-sits__step--1 .ctf-sits__media img { object-position: 62% 50%; }
.ctf-sits__step--2 .ctf-sits__media img { object-position: 50% 58%; }

.ctf-sits__step-heading {
	margin: 0;
	font-family: var(--ctf-display);
	font-size: clamp(20px, 2vw, 26px);
	font-weight: var(--ctf-display-weight);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ctf-black);
}

.ctf-sits__step-body {
	font-size: clamp(16px, 1.4vw, 19px);
	line-height: 1.6;
	color: var(--ctf-ink);
	text-wrap: pretty;
}

@media (max-width: 900px) {
	.ctf-sits__steps { gap: 48px; }
}

@media (max-width: 767px) {
	.ctf-sits__steps { grid-template-columns: 1fr; gap: 40px; }
	.ctf-sits__media { height: 240px; }
}

/* ---------------------------------------------------------------------
 * Digital Passport
 * ------------------------------------------------------------------ */

.ctf-eyebrow--on-dark { color: var(--ctf-oak); }

.ctf-passport {
	position: relative;
	background: var(--ctf-black);
	overflow: hidden;
	color: var(--ctf-cream);
}

.ctf-passport__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0.22;
}

.ctf-passport::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		rgba(34, 29, 28, 0.97) 0%,
		rgba(34, 29, 28, 0.88) 52%,
		rgba(34, 29, 28, 0.62) 100%
	);
}

.ctf-passport__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 64px;
	align-items: center;
	padding: 76px var(--ctf-pad-x) 56px;
}

.ctf-passport__body {
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.ctf-passport__heading {
	margin: 0;
	max-width: 700px;
	font-family: var(--ctf-display);
	font-size: clamp(32px, 4.4vw, 58px);
	font-weight: var(--ctf-display-weight);
	line-height: 1.02;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	color: var(--ctf-paper);
	text-wrap: balance;
}

.ctf-passport__intro {
	max-width: 560px;
	font-size: clamp(16px, 1.4vw, 19px);
	line-height: 1.55;
	color: #D5D4CC;
	text-wrap: pretty;
}

.ctf-passport__steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	margin: 6px 0 0;
	padding: 26px 0 0;
	list-style: none;
	border-top: 1px solid rgba(198, 162, 124, 0.4);
}

.ctf-passport__step {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0 28px;
}

.ctf-passport__step:first-child { padding-left: 0; }
.ctf-passport__step + .ctf-passport__step { border-left: 1px solid rgba(198, 162, 124, 0.28); }

.ctf-passport__step-label {
	font-family: var(--ctf-display);
	font-size: 14px;
	font-weight: var(--ctf-display-weight);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ctf-oak);
}

.ctf-passport__step-text {
	font-size: 17px;
	line-height: 1.45;
	color: #E6DDD2;
	text-wrap: pretty;
}

/* Phone illustration */
.ctf-passport__device {
	display: flex;
	justify-content: center;
}

.ctf-passport__device-screen {
	position: relative;
	width: 300px;
	aspect-ratio: 1 / 2;
	box-sizing: border-box;
	border-radius: 42px;
	background: #100D0C;
	padding: 10px;
	box-shadow: 0 34px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(198, 162, 124, 0.28);
}

.ctf-passport__device-screen img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 33px;
	object-fit: cover;
	object-position: 50% 0%;
	background: var(--ctf-cream);
}

.ctf-passport__device-notch {
	position: absolute;
	top: 13px;
	left: 50%;
	transform: translateX(-50%);
	width: 98px;
	height: 25px;
	border-radius: 13px;
	background: #100D0C;
}

@media (max-width: 900px) {
	.ctf-passport__inner { grid-template-columns: 1fr; gap: 48px; }
	.ctf-passport__device { order: -1; }
}

@media (max-width: 600px) {
	.ctf-passport__steps { grid-template-columns: 1fr; gap: 22px; }
	.ctf-passport__step { padding: 0; }
	.ctf-passport__step + .ctf-passport__step {
		border-left: 0;
		border-top: 1px solid rgba(198, 162, 124, 0.28);
		padding-top: 22px;
	}
}

/* ---------------------------------------------------------------------
 * Passport Sign Up — Bandwango modules + registration form
 *
 * The cards inside .ctf-signup__bandwango are rendered by Bandwango's own
 * script. We only constrain and centre them; their internals are not ours
 * to restyle beyond what the client already overrides inline.
 * ------------------------------------------------------------------ */

.ctf-signup {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 64px;
	padding: 92px var(--ctf-pad-x) 108px;
	background: var(--ctf-white);
}

.ctf-signup .ctf-eyebrow { justify-content: center; }

.ctf-signup__bandwango,
.ctf-signup__form {
	width: 100%;
	max-width: 900px;
}

.ctf-signup__bandwango { text-align: center; }

/* Registration form (CF7 11320). The form ships with a .two-row-flex
   wrapper around the name fields; everything else is a plain paragraph. */
.ctf-signup__form {
	max-width: 720px;
	padding: 36px clamp(20px, 4vw, 44px) 40px;
	background: var(--ctf-paper);
	border: 1px solid var(--ctf-border);
}

.ctf-signup__form .two-row-flex {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 20px;
}

.ctf-signup__form p { margin: 0 0 18px; }

.ctf-signup__form label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--ctf-display);
	font-size: 12px;
	font-weight: var(--ctf-display-weight);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ctf-ink-soft);
}

.ctf-signup__form input[type="text"],
.ctf-signup__form input[type="email"],
.ctf-signup__form input[type="tel"] {
	width: 100%;
	box-sizing: border-box;
	padding: 13px 14px;
	font-family: var(--ctf-text);
	font-size: 16px;
	color: var(--ctf-black);
	background: var(--ctf-white);
	border: 1px solid var(--ctf-border);
	border-radius: 3px;
}

.ctf-signup__form input:focus-visible,
.ctf-signup__form input[type="submit"]:focus-visible {
	outline: 3px solid var(--ctf-amber);
	outline-offset: 2px;
}

.ctf-signup__form .wpcf7-list-item { margin: 0 0 8px; }

.ctf-signup__form .wpcf7-list-item-label {
	font-size: 15px;
	line-height: 1.5;
	color: var(--ctf-ink);
}

.ctf-signup__form input[type="submit"] {
	font-family: var(--ctf-display);
	font-size: 15px;
	font-weight: var(--ctf-display-weight);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ctf-white);
	background: var(--ctf-amber-dark);
	border: 0;
	border-radius: 2px;
	padding: 17px 32px;
	cursor: pointer;
	transition: background 150ms ease;
}

.ctf-signup__form input[type="submit"]:hover { background: var(--ctf-amber-dark); }

@media (max-width: 600px) {
	.ctf-signup__form .two-row-flex { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
 * Plan Your Journey
 * ------------------------------------------------------------------ */

.ctf-plan {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
	padding: 72px var(--ctf-pad-x) 84px;
	background: var(--ctf-cream);
}

.ctf-plan__body {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.ctf-plan__heading {
	margin: 0;
	font-family: var(--ctf-display);
	font-size: clamp(28px, 3.6vw, 46px);
	font-weight: var(--ctf-display-weight);
	line-height: 1.04;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	color: var(--ctf-black);
	text-wrap: balance;
}

.ctf-plan__intro {
	max-width: 480px;
	font-size: clamp(16px, 1.4vw, 19px);
	line-height: 1.6;
	color: var(--ctf-ink);
	text-wrap: pretty;
}

.ctf-plan__bullets {
	display: flex;
	flex-direction: column;
	gap: 13px;
	margin: 0;
	padding: 22px 0 0;
	list-style: none;
	border-top: 1px solid #DCCDB8;
}

.ctf-plan__bullet {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 17px;
	color: #3A332F;
}

.ctf-plan__bullet span { display: block; }

/* No dot: the comp uses the icon alone as the marker. */

.ctf-plan__cta-wrap { margin-top: 6px; }

.ctf-plan__cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: var(--ctf-amber-dark);
	color: var(--ctf-white);
	font-family: var(--ctf-display);
	font-size: 15px;
	font-weight: var(--ctf-display-weight);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 19px 32px;
	border-radius: 2px;
	text-decoration: none;
	transition: background 150ms ease;
}

.ctf-plan__cta:hover,
.ctf-plan__cta:focus { background: var(--ctf-amber-deep); color: var(--ctf-white); }

.ctf-plan__cta:focus-visible {
	outline: 3px solid var(--ctf-black);
	outline-offset: 3px;
}

.ctf-plan__media {
	height: 460px;
	overflow: hidden;
	background: var(--ctf-black);
}

.ctf-plan__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 900px) {
	.ctf-plan { grid-template-columns: 1fr; gap: 40px; }
	.ctf-plan__media { height: 300px; }
}

/* ---------------------------------------------------------------------
 * Participating restaurant partners
 * ------------------------------------------------------------------ */

.ctf-restaurants {
	display: flex;
	flex-direction: column;
	gap: 48px;
	padding: 84px var(--ctf-pad-x) 92px;
	background: var(--ctf-black);
}

.ctf-restaurants__heading {
	margin: 0;
	font-family: var(--ctf-display);
	font-size: clamp(28px, 3.6vw, 46px);
	font-weight: var(--ctf-display-weight);
	line-height: 1.04;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	color: var(--ctf-paper);
	text-wrap: balance;
}

.ctf-restaurants > .ctf-eyebrow,
.ctf-restaurants__heading,
.ctf-restaurants__intro { max-width: 720px; }

.ctf-restaurants > .ctf-eyebrow {
	color: var(--ctf-oak);
	margin-bottom: -32px; /* pull the heading up under its label */
}

.ctf-restaurants__intro {
	font-size: 18px;
	line-height: 1.6;
	color: #CFC7BE;
	text-wrap: pretty;
}

.ctf-restaurants__regions {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0 56px;
	align-items: start;
}

.ctf-restaurants__region-heading {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(198, 162, 124, 0.55);
	font-family: var(--ctf-display);
	font-size: 15px;
	font-weight: var(--ctf-display-weight);
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--ctf-oak);
}

.ctf-restaurants__region-heading::before {
	content: "";
	flex: none;
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 10px solid var(--ctf-amber);
}

.ctf-restaurants__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ctf-restaurants__item + .ctf-restaurants__item { border-top: 1px solid rgba(198, 162, 124, 0.22); }

.ctf-restaurants__link {
	display: block;
	padding: 14px 0;
	font-size: 17px;
	line-height: 1.4;
	color: #F0EAE2;
	text-decoration: none;
	transition: color 150ms ease;
}

a.ctf-restaurants__link:hover,
a.ctf-restaurants__link:focus { color: var(--ctf-oak); }

a.ctf-restaurants__link:focus-visible {
	outline: 3px solid var(--ctf-oak);
	outline-offset: -3px;
}

/* No website on file yet — still readable, just not actionable. */
.ctf-restaurants__link--no-url { color: #A79C92; }

.ctf-restaurants__footnote {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 36px;
	font-size: 13px;
	line-height: 1.5;
	color: #A79C92;
	text-wrap: pretty;
}

.ctf-restaurants__footnote-icon {
	flex: none;
	width: 22px;
	height: 22px;
	object-fit: contain;
}

@media (max-width: 900px) {
	.ctf-restaurants__regions { grid-template-columns: repeat(2, 1fr); gap: 0 36px; }
}

@media (max-width: 600px) {
	.ctf-restaurants__regions { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------------------------------------------------------------------
 * Menu Spotlight — wraps the existing FooGallery (id 11399)
 * ------------------------------------------------------------------ */

.ctf-spotlight {
	display: flex;
	flex-direction: column;
	gap: 44px;
	padding: 84px var(--ctf-pad-x) 92px;
	background: var(--ctf-paper);
}

.ctf-spotlight__heading {
	margin: 0;
	max-width: 720px;
	font-family: var(--ctf-display);
	font-size: clamp(28px, 3.6vw, 46px);
	font-weight: var(--ctf-display-weight);
	line-height: 1.04;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	color: var(--ctf-black);
	text-wrap: balance;
}

.ctf-spotlight > .ctf-eyebrow { margin-bottom: -30px; }

/* The comp uses a 3px gutter; the gallery ships with 4px set inline. */
.ctf-spotlight .foogallery.fg-justified .fg-item {
	margin-right: 3px;
	margin-bottom: 3px;
}

/* ---------------------------------------------------------------------
 * Social
 * ------------------------------------------------------------------ */

.ctf-social {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	padding: 72px var(--ctf-pad-x) 80px;
	background: var(--ctf-cream);
	text-align: center;
}

.ctf-social__heading {
	margin: 0;
	font-family: var(--ctf-display);
	font-size: clamp(26px, 3.2vw, 42px);
	font-weight: var(--ctf-display-weight);
	line-height: 1.05;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	color: var(--ctf-black);
}

.ctf-social__links {
	display: flex;
	align-items: center;
	gap: 28px;
	margin: 0;
	padding: 14px 0 0;
	list-style: none;
}

.ctf-social__item + .ctf-social__item {
	border-left: 1px solid #DCCDB8;
	padding-left: 28px;
}

.ctf-social__item,
.ctf-social__link {
	/* icon and label sit on one line, per the comp */
	display: inline-flex;
	align-items: center;
	gap: 11px;
	font-family: var(--ctf-display);
	font-size: 17px;
	font-weight: var(--ctf-display-weight);
	letter-spacing: 0.06em;
	color: var(--ctf-black);
	text-decoration: none;
}

a.ctf-social__link:hover,
a.ctf-social__link:focus { color: var(--ctf-amber); }

a.ctf-social__link:focus-visible {
	outline: 3px solid var(--ctf-amber);
	outline-offset: 3px;
}

@media (max-width: 500px) {
	.ctf-social__links { flex-direction: column; gap: 14px; }
	.ctf-social__item + .ctf-social__item { border-left: 0; padding-left: 0; }
}

/* ---------------------------------------------------------------------
 * Inline icons (Trip Guide bullets, Social)
 * ------------------------------------------------------------------ */

.ctf-icon {
	flex: none;
	display: block;
}

.ctf-plan__bullet-icon,
.ctf-social__icon { color: var(--ctf-amber); }

/* ---------------------------------------------------------------------
 * Register — Free: Bandwango modules restyled to the comp.
 *
 * These target Bandwango's own class names. Their stylesheet loads after
 * ours and is fairly specific, hence the !important on the properties it
 * actually sets. Structure and behaviour are untouched — this is presentation
 * only, and every value below is read off the comp.
 * ------------------------------------------------------------------ */

.ctf-signup__bandwango {
	max-width: none;
	width: 100%;
}

/* --- the pass card: 470px in the comp --- */
.ctf-signup .bw-ic--item-card {
	/* Comp draws this at 470px; widened on review to give the card more
	   presence now that it is the only thing in the upper half. */
	max-width: 560px !important;
	margin-inline: auto !important;
	border: 1px solid var(--ctf-border) !important;
	box-shadow: 0 6px 22px rgba(34, 29, 28, 0.10) !important;
	background: var(--ctf-white) !important;
	overflow: hidden;
}

/*
 * Card header image. Bandwango pins the container to 175px but lets the image
 * render at its own 271px and spill out (overflow visible, object-fit: fill),
 * which both squashes the collage and wastes the card's best asset. The source
 * is 600x300, so a 2:1 box at the card's width shows it undistorted.
 */
.ctf-signup .bw-item-card-img-ctn,
.ctf-signup .bw-item-card-img-ctn > a {
	height: auto !important;
	/* the comp's collage is 1000x681 */
	aspect-ratio: 1000 / 681;
	overflow: hidden !important;
	display: block;
}

/* Bandwango nests a third wrapper in here, also pinned to 175px. */
.ctf-signup .bw-image-card-ctn {
	height: 100% !important;
	overflow: hidden !important;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

/* When an override image is set, hiding Bandwango's <img> is injected from
   inc/enqueue-cork-to-fork.php — it only applies if the field is filled. */

.ctf-signup .bw-ic-image {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block;
}

/* Push the card away from the 'How this Pass Works' heading below it. */
.ctf-signup .bw-offer-module {
	margin-bottom: 76px !important;
}

.ctf-signup .bw-ic--info {
	padding: 32px 34px 14px !important;
	/* Bandwango grows this (min-height 120px, flex 1 1 auto) so cards line up
	   in a multi-card row. There is only one card here, so it just opened a
	   void between the bullets and the price. */
	min-height: 0 !important;
	flex: 0 0 auto !important;
}

.ctf-signup .bw-ic--highlight-container { margin-block: 4px 0 !important; }

.ctf-signup .bw-ic--price-ctn { margin-block: 0 12px !important; }

.ctf-signup .bw-ic--btn-container {
	gap: 14px !important;
	/* same 34px as the price badge, landing at the 43px inset the title,
	   bullets and price all share */
	margin: 8px 34px 30px !important;
	/* they pad this container too, which pushed the buttons 25px inside the
	   43px inset the title, bullets and price share */
	padding: 0 !important;
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
}

/*
 * Buttons. Bandwango pins the Sign Up wrapper with height, min-height AND
 * max-height all at 36px, and its inner div at 30px, so the comp's 15px
 * padding had nowhere to go. All three are released here; the visual styling
 * (fill, padding) lives on the inner div for Sign Up and on the anchor itself
 * for Learn More. flex-basis auto also made them track their label lengths —
 * the comp has them equal, so the container is a 1fr 1fr grid.
 */
.ctf-signup .bw-ic--product-button-wrapper,
.ctf-signup .bw-ic--learn-more-btn,
.ctf-signup .bw-ic-btn.bw-ic-btn-add-to-cart {
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	width: 100% !important;
	flex: initial !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

/* The wrapper is just a hit area — the inner div carries the look. */
.ctf-signup .bw-ic--product-button-wrapper {
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
}

.ctf-signup .bw-ic--product-title {
	font-family: var(--ctf-text) !important;
	font-size: 26px !important;
	font-weight: 700 !important;
	color: var(--ctf-black) !important;
}

/* Their markup nests the label in a span, which was not inheriting the weight. */
.ctf-signup .bw-ic--item-card .bw-ic--product-title,
.ctf-signup .bw-ic--item-card .bw-ic--product-title * {
	font-weight: 700 !important;
	font-family: var(--ctf-text) !important;
}

.ctf-signup .bw-ic--item-card .bw-ic--product-title {
	margin-bottom: 20px !important;
}

.ctf-signup .bw-ic--item-card .bw-ic--highlight-container,
.ctf-signup .bw-ic--item-card .bw-ic--highlight-container li,
.ctf-signup .bw-ic--item-card .bw-ic--highlight-container li span {
	font-family: var(--ctf-text) !important;
	font-size: 19px !important;
	line-height: 1.5 !important;
	color: #3A332F !important;
}

.ctf-signup .bw-ic--item-card .bw-ic--highlight-container li + li { margin-top: 6px !important; }

.ctf-signup .bw-ic--price,
.ctf-signup .bw-ic--price-ctn {
	font-family: var(--ctf-text) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	color: var(--ctf-black) !important;
}

.ctf-signup .bw-ic--price-ctn {
	background: #F1EDE6 !important;
	padding: 11px 14px !important;
	/* Their rule is `margin: 0 30px 10px`, so width:100% overflowed the card by
	   exactly 60px. Auto width fills the space between those margins instead;
	   the margin is retuned to line up with the card's 34px inner padding. */
	width: auto !important;
	margin: 0 34px 14px !important; /* lands at 43px inset, matching the title and bullets above */
	box-sizing: border-box;
	align-items: center !important;
	/* Bandwango pins height:24px here. Combined with border-box, the padding
	   ate into that fixed height instead of adding to it, leaving a 2px
	   content box and a badge that looked like a sliver. */
	height: auto !important;
	min-height: 0 !important;
}

/* Bandwango collapses the price text to zero height (the inner span measured
   0px despite a 19px line-height), which left the badge a 24px sliver. */
.ctf-signup .bw-ic--price,
.ctf-signup .bw-ic--price > * {
	display: block !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1.4 !important;
	overflow: visible !important;
}

.ctf-signup .bw-ic-btn.bw-ic-btn-add-to-cart {
	font-family: var(--ctf-text) !important;
	font-size: 19px !important;
	font-weight: 700 !important;
	color: var(--ctf-white) !important;
	background: #15577F !important;
	border-radius: 3px !important;
	padding: 15px 18px !important;
	/* Bandwango pins height:30px, which clipped the label once the comp's
	   padding went on. Let it size to its content. */
	height: auto !important;
	line-height: 1.2 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	transition: background-color 150ms ease, color 150ms ease !important;
}

/*
 * Hover. Their rule is destructive rather than cosmetic:
 *   .bw-ic--product-button-wrapper:not(.bw-ic--sold-out):hover > *
 *     { background-color: transparent!important; position: absolute;
 *       left: 50%; top: 50%; transform: translate(-50%,-50%); opacity: .85 }
 * plus a white :before overlay at 50% opacity. It yanks the inner button out
 * of flow, so once the wrapper's fixed height was released the whole button
 * collapsed on hover. Everything it sets is put back here, matching their
 * selector specificity, and the overlay is removed.
 */
.ctf-signup .bw-ic--product-button-wrapper:not(.bw-ic--sold-out):not(.bw-ic--learn-more-btn):hover > *,
.ctf-signup .bw-ic--product-button-wrapper:hover .bw-ic-btn.bw-ic-btn-add-to-cart,
.ctf-signup .bw-ic-btn.bw-ic-btn-add-to-cart:hover,
.ctf-signup .bw-ic-btn.bw-ic-btn-add-to-cart:focus {
	background-color: #0F4463 !important;
	color: var(--ctf-white) !important;
	position: static !important;
	left: auto !important;
	top: auto !important;
	transform: none !important;
	opacity: 1 !important;
	width: 100% !important;
	box-shadow: none !important;
}

.ctf-signup .bw-ic--product-button-wrapper:hover::before,
.ctf-signup .bw-ic--product-button-wrapper:not(.bw-ic--sold-out):hover:before {
	content: none !important;
	display: none !important;
	opacity: 0 !important;
}

.ctf-signup .bw-ic--learn-more-btn:hover,
.ctf-signup .bw-ic--learn-more-btn:focus {
	border-color: var(--ctf-amber) !important;
	color: var(--ctf-amber) !important;
	background: var(--ctf-white) !important;
	transform: none !important;
}

/*
 * Learn More carries BOTH .bw-ic--product-button-wrapper and
 * .bw-ic--learn-more-btn, so it inherits their destructive hover as well.
 * It needs the same structural reset as Sign Up — but transparent, since the
 * fill belongs to the anchor itself, not its label.
 */
.ctf-signup .bw-ic--learn-more-btn:hover > *,
.ctf-signup .bw-ic--learn-more-btn:focus > * {
	background-color: transparent !important;
	background: transparent !important;
	color: var(--ctf-amber) !important;
	position: static !important;
	left: auto !important;
	top: auto !important;
	transform: none !important;
	opacity: 1 !important;
	width: auto !important;
}

.ctf-signup .bw-ic--learn-more-btn:hover::before,
.ctf-signup .bw-ic--learn-more-btn:not(.bw-ic--sold-out):hover:before {
	content: none !important;
	display: none !important;
}

.ctf-signup .bw-ic--btn-container,
.ctf-signup .bw-ic--product-button-wrapper {
	height: auto !important;
}

.ctf-signup .bw-ic--learn-more-btn {
	font-family: var(--ctf-text) !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	color: #3A332F !important;
	background: var(--ctf-white) !important;
	border: 1px solid #D8D8D8 !important;
	border-radius: 3px !important;
	padding: 15px 18px !important;
	height: auto !important;
	line-height: 1.2 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
}

/* --- How this Pass Works --- */
.ctf-signup .bw-hiw-title {
	font-family: var(--ctf-text) !important;
	font-size: 28px !important;
	font-weight: 700 !important;
	color: var(--ctf-black) !important;
	/* The comp left-aligns this. Centred on review — it reads as the heading
	   for the three columns below it, which are themselves centred. */
	text-align: center !important;
	margin-bottom: 48px !important;
	width: 100%;
}

.ctf-signup .bw-hiw-main-ctn {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	width: 100%;
}

.ctf-signup .bw-hiw-ctn {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 72px !important;
	width: 100%;
}

.ctf-signup .bw-hiw-card-ctn {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 26px !important;
	width: auto !important;
	/* Bandwango caps these at 30.3333%, sized for their own flex row. Inside a
	   grid that percentage resolves against the TRACK, squeezing each column
	   to ~117px. The grid already does the thirds. */
	max-width: none !important;
	flex: initial !important;
}

.ctf-signup .bw-hiw-card-step {
	font-family: var(--ctf-text) !important;
	font-size: 19px !important;
	font-weight: 700 !important;
	color: var(--ctf-black) !important;
	text-align: center !important;
	margin: 0 !important;
}

.ctf-signup .bw-hiw-card-description {
	font-family: var(--ctf-text) !important;
	font-size: 17px !important;
	line-height: 1.55 !important;
	color: var(--ctf-ink) !important;
	max-width: none !important;
	text-align: center;
}

/*
 * Icon swap. Bandwango ships raster PNGs (hiwphonehold / hiwphonelappy /
 * hiwtouch) at mismatched sizes — 61x100, 113x100, 57x100. The comp uses
 * three uniform 68x68 line icons. We cannot reach inside their DOM, so the
 * <img> is hidden and the same shapes are painted onto its container. The
 * data: URIs are injected from inc/ctf-icons.php so the paths live in one
 * place and cannot drift from the inline SVGs used elsewhere.
 */
.ctf-signup .bw-hiw-img { display: none !important; }

.ctf-signup .bw-hiw-img-ctn {
	width: 68px !important;
	height: 68px !important;
	margin-inline: auto !important;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

@media (max-width: 767px) {
	.ctf-signup .bw-hiw-ctn { grid-template-columns: 1fr !important; gap: 36px !important; }
}

/*
 * Menu Spotlight on mobile — force a single column.
 *
 * FooGallery's justified layout packs to a target row height, so on narrow
 * screens it still pairs the portrait shots two-up. It positions every item
 * with INLINE position/width/height/top/left from JS, and sets an inline
 * height on the container, so each of those has to be overridden with
 * !important (a stylesheet !important beats a non-important inline rule).
 */
@media (max-width: 767px) {

	.ctf-spotlight .foogallery.fg-justified {
		height: auto !important;
		position: static !important;
	}

	.ctf-spotlight .foogallery.fg-justified .fg-item {
		position: static !important;
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		top: auto !important;
		left: auto !important;
		margin: 0 0 3px !important;
		float: none !important;
	}

	.ctf-spotlight .foogallery.fg-justified .fg-item:last-child { margin-bottom: 0 !important; }

	.ctf-spotlight .foogallery.fg-justified .fg-item-inner,
	.ctf-spotlight .foogallery.fg-justified .fg-thumb {
		display: block !important;
		width: 100% !important;
		height: auto !important;
	}

	.ctf-spotlight .foogallery.fg-justified .fg-image {
		width: 100% !important;
		height: auto !important;
		max-width: 100% !important;
		object-fit: cover;
	}
}