/**
 * Fireside Tennessee — page styles.
 *
 * Loaded only on the Fireside page template. Tokens are the Tennessee Whiskey
 * Trail palette used on Cork to Fork, pushed toward the dark, firelit end for
 * the winter season.
 *
 * Fonts: UtileDisplay and ZeitungPro are declared site-wide. Real weights are
 * UtileDisplay 300/500 and ZeitungPro 500/600/700 — never ask for Utile 600.
 *
 * Contrast (WCAG AA, small text):
 *   on light  -> --fs-amber-dark #8A5B2B (5.76:1 on white)
 *   on dark   -> --fs-oak        #CDA877 (passes on --fs-black)
 *   --fs-amber #A87239 is decorative / large-text only.
 */

.fs-page {
	--fs-black:      #221D1C;
	--fs-char:       #2E2725;
	--fs-amber:      #A87239;
	--fs-amber-dark: #8A5B2B;
	--fs-oak:        #CDA877;
	--fs-oak-hi:     #E0C29B;
	--fs-cream:      #F3E9DD;
	--fs-paper:      #FAF5EE;
	--fs-ink:        #4A423D;
	--fs-ink-soft:   #5C534E;
	--fs-border:     #E4D8C8;
	--fs-white:      #FFFFFF;

	--fs-display: UtileDisplay, "Utile Display", sans-serif;
	--fs-text:    ZeitungPro, "Zeitung Pro", sans-serif;
	--fs-display-weight: 500;

	--fs-content: 1300px;
	--fs-pad-x: max(20px, calc((100% - var(--fs-content)) / 2));

	background: var(--fs-paper);
	/* Body copy follows the site: the theme sets p/a/span to Utile Display
	   500 site-wide, so anything inheriting from here matches it. */
	font-family: var(--fs-display);
	color: var(--fs-ink);
}

.fs-page > section {
	box-sizing: border-box;
	width: 100%;
	position: relative;
}

.fs-page p { margin: 0; }
.fs-page ul[role="list"] { list-style: none; margin: 0; padding: 0; }

.fs-page,
.fs-page * { font-synthesis-weight: none; }

/* ---------------------------------------------------------------------
 * Shared
 * ------------------------------------------------------------------ */

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

/* Trail triangle marker, as on Cork to Fork. */
.fs-page .fs-eyebrow::before {
	content: "";
	flex: none;
	width: 0;
	height: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 12px solid currentColor;
}

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

.fs-page .fs-h2 {
	margin: 0;
	font-family: var(--fs-display);
	font-size: clamp(30px, 3.6vw, 48px);
	font-weight: var(--fs-display-weight);
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--fs-black);
	text-wrap: balance;
}

.fs-page .fs-h2--on-dark { color: var(--fs-cream); }

/* Small flame glyph (pure CSS, no icon font). */
.fs-flame {
	flex: none;
	display: inline-block;
	width: 10px;
	height: 14px;
	background: linear-gradient(180deg, #F2C27A 0%, var(--fs-amber) 70%);
	border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
	transform: rotate(0deg);
	box-shadow: 0 0 10px rgba(242, 160, 80, 0.55);
}

/* Links styled as buttons. These are <a>, not <button> — the theme forces a
   filled style on every bare <button> with !important. */
.fs-page a.fs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 30px;
	border-radius: 3px;
	font-family: var(--fs-text);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.fs-page a.fs-btn--ember {
	background: var(--fs-oak);
	color: var(--fs-black);
	box-shadow: 0 0 0 0 rgba(242, 160, 80, 0);
}

.fs-page a.fs-btn--ember:hover,
.fs-page a.fs-btn--ember:focus-visible {
	background: var(--fs-oak-hi);
	color: var(--fs-black);
	box-shadow: 0 0 28px rgba(242, 160, 80, 0.35);
}

.fs-page a.fs-btn:focus-visible,
.fs-page a.fs-stop__link:focus-visible {
	outline: 2px solid var(--fs-oak);
	outline-offset: 3px;
}

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

.fs-hero {
	display: flex;
	align-items: flex-end;
	min-height: min(82vh, 820px);
	background: var(--fs-black);
	overflow: hidden;
	isolation: isolate;
}

.fs-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 35%;
	z-index: -2;
}

/* Functional overlay: holds cream text legible over the lower half. */
.fs-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(34, 29, 28, 0.78) 0%, rgba(34, 29, 28, 0.35) 55%, rgba(34, 29, 28, 0) 80%),
		linear-gradient(180deg, rgba(34, 29, 28, 0.35) 0%, rgba(34, 29, 28, 0) 30%, rgba(34, 29, 28, 0.55) 70%, rgba(34, 29, 28, 0.95) 100%);
}

.fs-hero__body {
	display: grid;
	justify-items: start;
	gap: 22px;
	width: 100%;
	box-sizing: border-box;
	padding: 140px var(--fs-pad-x) 72px;
}

.fs-hero__dates {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 8px 16px;
	border: 1px solid rgba(205, 168, 119, 0.55);
	border-radius: 999px;
	background: rgba(34, 29, 28, 0.55);
	font-family: var(--fs-display);
	font-size: 14px;
	font-weight: var(--fs-display-weight);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--fs-oak);
}

.fs-page .fs-hero__heading {
	margin: 0;
	max-width: 900px;
	font-family: var(--fs-display);
	font-size: clamp(46px, 8vw, 112px);
	font-weight: var(--fs-display-weight);
	line-height: 0.94;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--fs-cream);
	text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
	text-wrap: balance;
}

.fs-hero__kicker {
	max-width: 640px;
	font-size: clamp(19px, 2vw, 26px);
	line-height: 1.35;
	color: var(--fs-cream);
	text-wrap: pretty;
}

@media (max-width: 767px) {
	.fs-hero { min-height: 640px; }
	.fs-hero__img { object-position: 62% 40%; }
	.fs-hero::after {
		background: linear-gradient(180deg, rgba(34, 29, 28, 0.3) 0%, rgba(34, 29, 28, 0.2) 30%, rgba(34, 29, 28, 0.75) 62%, rgba(34, 29, 28, 0.96) 100%);
	}
	.fs-hero__body { padding-bottom: 48px; }
}

/* ---------------------------------------------------------------------
 * Intro
 * ------------------------------------------------------------------ */

.fs-intro {
	padding: 96px var(--fs-pad-x) 88px;
	background: var(--fs-paper);
}

.fs-intro__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 72px;
	align-items: start;
}

.fs-intro__body {
	font-size: clamp(18px, 1.5vw, 21px);
	line-height: 1.6;
	color: var(--fs-ink);
}

.fs-intro__body p + p { margin-top: 1em; }

/* Lead-in for the three menu highlights. */
.fs-menu-intro {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 72px;
	align-items: baseline;
	margin-top: 80px;
	padding-top: 40px;
	border-top: 1px solid var(--fs-border);
}

.fs-page .fs-menu-intro__heading {
	margin: 0;
	font-family: var(--fs-display);
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: var(--fs-display-weight);
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--fs-black);
}

.fs-menu-intro__text {
	font-size: clamp(17px, 1.4vw, 20px);
	line-height: 1.55;
	color: var(--fs-ink);
}

.fs-pillars {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	margin-top: 36px !important;
}

/* With no lead-in, keep the original breathing room above the cards. */
.fs-intro__grid + .fs-pillars { margin-top: 72px !important; }

.fs-pillar {
	padding: 30px 30px 32px;
	border-top: 3px solid var(--fs-amber);
	background: var(--fs-white);
	box-shadow: 0 6px 22px rgba(34, 29, 28, 0.06);
}

.fs-pillar__num {
	display: block;
	margin-bottom: 14px;
	font-family: var(--fs-display);
	font-size: 15px;
	font-weight: var(--fs-display-weight);
	letter-spacing: 0.2em;
	color: var(--fs-amber-dark);
}

.fs-page .fs-pillar__title {
	margin: 0 0 10px;
	font-family: var(--fs-display);
	font-size: 24px;
	font-weight: var(--fs-display-weight);
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--fs-black);
}

.fs-pillar__text {
	font-size: 17px;
	line-height: 1.55;
	color: var(--fs-ink-soft);
}

@media (max-width: 900px) {
	.fs-intro { padding-block: 64px; }
	.fs-intro__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.fs-menu-intro { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 52px; padding-top: 32px; }
	.fs-pillars { grid-template-columns: minmax(0, 1fr); margin-top: 24px !important; gap: 18px; }
	.fs-intro__grid + .fs-pillars { margin-top: 44px !important; }
}

/* ---------------------------------------------------------------------
 * Passport — dark band with ember glow, Bandwango card on the right
 * ------------------------------------------------------------------ */

.fs-passport {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
	gap: 72px;
	align-items: center;
	padding: 104px var(--fs-pad-x);
	background:
		radial-gradient(ellipse 60% 70% at 85% 100%, rgba(168, 114, 57, 0.38) 0%, rgba(168, 114, 57, 0) 70%),
		radial-gradient(ellipse 40% 50% at 10% 0%, rgba(168, 114, 57, 0.14) 0%, rgba(168, 114, 57, 0) 70%),
		var(--fs-black);
	color: var(--fs-cream);
	scroll-margin-top: 90px;
}

.fs-passport__body {
	margin-top: 24px;
	font-size: clamp(18px, 1.5vw, 21px);
	line-height: 1.6;
	color: var(--fs-cream);
}

.fs-passport__body p + p { margin-top: 1em; }

/* Plain round bullets. The shared ul[role=list] reset strips markers, so they
   are put back here at higher specificity. */
.fs-page ul.fs-passport__perks {
	display: grid;
	gap: 14px;
	margin-top: 32px !important;
	padding-left: 1.25em !important;
	list-style: disc outside !important;
}

.fs-passport__perks li::marker { color: var(--fs-oak); }

.fs-passport__perks li {
	display: list-item;
	padding-left: 4px;
	/* Matches the site-wide paragraph style (Utile Display 500, 16px). */
	font-family: var(--fs-display);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.4;
	color: var(--fs-cream);
}

.fs-passport__card { min-width: 0; }

/* Bandwango card: presentation only. Their stylesheet loads after ours, hence
   !important on the properties it sets. Hover fix ported from Cork to Fork —
   their wrapper hover yanks the inner button out of flow. */
.fs-passport .bw-ic--item-card {
	max-width: 520px !important;
	margin-inline: auto !important;
	border: 0 !important;
	border-radius: 4px !important;
	box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45), 0 0 80px rgba(168, 114, 57, 0.18) !important;
	background: var(--fs-white) !important;
	overflow: hidden;
}

.fs-passport .bw-ic--product-title,
.fs-passport .bw-ic--product-title * {
	font-family: var(--fs-text) !important;
	font-weight: 700 !important;
	color: var(--fs-black) !important;
}

.fs-passport .bw-ic--highlight-container,
.fs-passport .bw-ic--highlight-container li,
.fs-passport .bw-ic--highlight-container li span {
	font-family: var(--fs-text) !important;
	color: #3A332F !important;
}

.fs-passport .bw-ic--btn-container {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
	gap: 14px !important;
}

.fs-passport .bw-ic--product-button-wrapper,
.fs-passport .bw-ic--learn-more-btn,
.fs-passport .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;
}

.fs-passport .bw-ic--product-button-wrapper {
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
}

.fs-passport .bw-ic-btn.bw-ic-btn-add-to-cart {
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 15px 18px !important;
	border-radius: 3px !important;
	background: var(--fs-amber-dark) !important;
	color: var(--fs-white) !important;
	font-family: var(--fs-text) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
}

.fs-passport .bw-ic--product-button-wrapper:not(.bw-ic--sold-out):not(.bw-ic--learn-more-btn):hover > *,
.fs-passport .bw-ic--product-button-wrapper:hover .bw-ic-btn.bw-ic-btn-add-to-cart,
.fs-passport .bw-ic-btn.bw-ic-btn-add-to-cart:hover,
.fs-passport .bw-ic-btn.bw-ic-btn-add-to-cart:focus {
	background-color: #6F4922 !important;
	color: var(--fs-white) !important;
	position: static !important;
	left: auto !important;
	top: auto !important;
	transform: none !important;
	opacity: 1 !important;
	width: 100% !important;
}

.fs-passport .bw-ic--product-button-wrapper:hover::before,
.fs-passport .bw-ic--learn-more-btn:hover::before {
	content: none !important;
	display: none !important;
}

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

.fs-passport .bw-ic--learn-more-btn:hover > *,
.fs-passport .bw-ic--learn-more-btn:focus > * {
	background: transparent !important;
	color: var(--fs-amber-dark) !important;
	position: static !important;
	transform: none !important;
	opacity: 1 !important;
	width: auto !important;
}

.fs-passport .bw-ic--learn-more-btn:hover,
.fs-passport .bw-ic--learn-more-btn:focus {
	border-color: var(--fs-amber-dark) !important;
	color: var(--fs-amber-dark) !important;
}

@media (max-width: 1000px) {
	.fs-passport { grid-template-columns: minmax(0, 1fr); gap: 48px; padding-block: 72px; }
}

@media (max-width: 500px) {
	.fs-passport .bw-ic--btn-container { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ---------------------------------------------------------------------
 * Distilleries
 * ------------------------------------------------------------------ */

.fs-stops {
	padding: 100px var(--fs-pad-x) 96px;
	background: var(--fs-cream);
}

.fs-stops__head {
	max-width: 760px;
	margin-bottom: 48px;
}

.fs-stops__intro {
	margin-top: 18px !important;
	font-size: 19px;
	line-height: 1.55;
	color: var(--fs-ink);
}

.fs-stops__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
}

.fs-stop { min-width: 0; }

.fs-page a.fs-stop__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--fs-white);
	color: inherit;
	text-decoration: none;
	box-shadow: 0 4px 18px rgba(34, 29, 28, 0.08);
	transition: transform 200ms ease, box-shadow 200ms ease;
}

.fs-page a.fs-stop__link:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 34px rgba(34, 29, 28, 0.16);
}

.fs-stop__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--fs-black);
}

.fs-page .fs-stop__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}

.fs-page a.fs-stop__link:hover .fs-stop__img { transform: scale(1.04); }

/*
 * Row alignment via subgrid. Each card spans three rows of the parent grid
 * (photo / name / town) and shares those rows with the other cards in the
 * same visual row. A name row is only as tall as the longest name IN THAT
 * ROW, so towns line up across a row without leaving empty space under
 * short names in rows that don't need it. Browsers without subgrid simply
 * fall back to natural heights.
 */
.fs-stop {
	display: grid;
	grid-row: span 3;
	grid-template-rows: subgrid;
	row-gap: 0;
}

.fs-page a.fs-stop__link {
	grid-row: 1 / -1;
	display: grid;
	grid-template-rows: subgrid;
	row-gap: 0;
}

/* Name and town become rows of the card grid. */
.fs-stop__text { display: contents; }

.fs-stop__name {
	display: block;
	padding: 18px 20px 6px;
	border-top: 3px solid var(--fs-amber);
	font-family: var(--fs-display);
	font-size: 19px;
	font-weight: var(--fs-display-weight);
	line-height: 1.15;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--fs-black);
	text-wrap: balance;
}

.fs-stop__town {
	display: block;
	padding: 0 20px 22px;
	font-size: 16px;
	font-weight: 500;
	color: var(--fs-amber-dark);
}

@media (max-width: 1100px) { .fs-stops__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Phones: two cards per row (halves the scroll), with tighter type and padding. */
@media (max-width: 767px) {
	.fs-stops { padding-block: 64px; }
	.fs-stops__head { margin-bottom: 32px; }
	.fs-stops__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.fs-stop__name { padding: 12px 12px 4px; font-size: 15px; letter-spacing: 0; }
	.fs-stop__town { padding: 0 12px 14px; font-size: 14px; }
}

/* ---------------------------------------------------------------------
 * Photo strip
 * ------------------------------------------------------------------ */

.fs-gallery {
	display: grid;
	grid-template-columns: repeat(var(--fs-cols, 3), minmax(0, 1fr));
	gap: 3px;
	background: var(--fs-black);
}

.fs-gallery--1 { --fs-cols: 1; }
.fs-gallery--2 { --fs-cols: 2; }
.fs-gallery--3 { --fs-cols: 3; }
.fs-gallery--4 { --fs-cols: 4; }

.fs-gallery__item {
	margin: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

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

@media (max-width: 767px) {
	.fs-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fs-gallery--3 .fs-gallery__item:first-child { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
}

/* ---------------------------------------------------------------------
 * Closing
 * ------------------------------------------------------------------ */

.fs-close {
	display: grid;
	place-items: center;
	min-height: 560px;
	padding: 110px var(--fs-pad-x);
	background: var(--fs-black);
	text-align: center;
	overflow: hidden;
	isolation: isolate;
}

.fs-close__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 55%;
	z-index: -2;
}

/* The photo is bright snow, so the scrim is heavy. */
.fs-close::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(ellipse at center, rgba(34, 29, 28, 0.72) 0%, rgba(34, 29, 28, 0.86) 100%);
}

.fs-close__body {
	display: grid;
	justify-items: center;
	gap: 22px;
	max-width: 720px;
}

.fs-close__text {
	font-size: clamp(18px, 1.6vw, 22px);
	line-height: 1.55;
	color: var(--fs-cream);
}

/* ---------------------------------------------------------------------
 * Social icons — mirrors the homepage .twt-social row: 42px outlined
 * circles with FontAwesome glyphs (loaded site-wide by the theme).
 * ------------------------------------------------------------------ */

.fs-social__handle { color: var(--fs-oak); }

.fs-page p.fs-social__links {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin: 4px 0 0 !important;
}

.fs-page a.fs-social__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	box-sizing: border-box;
	border: 1px solid rgba(243, 233, 221, 0.28);
	border-radius: 50%;
	color: var(--fs-cream);
	text-decoration: none;
	transition: border-color 150ms ease, color 150ms ease;
}

.fs-page a.fs-social__link::before {
	font-family: FontAwesome !important;
	font-size: 17px;
	line-height: 1;
	font-weight: 400;
}

.fs-page a.fs-social__link--ig::before { content: "\f16d"; }
.fs-page a.fs-social__link--fb::before { content: "\f09a"; }

.fs-page a.fs-social__link:hover,
.fs-page a.fs-social__link:focus {
	border-color: var(--fs-oak);
	color: var(--fs-oak);
}

.fs-page a.fs-social__link:focus-visible {
	outline: 2px solid var(--fs-oak);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.fs-page *,
	.fs-page *::before,
	.fs-page *::after { transition: none !important; }
}