/* ==========================================================================
   WTF Tasting Notes — single note, hub grid, and embed variants
   FILE LOCATION: css/wtf-tasting-notes.css

   Follows the same visual language as wtf-events.css and wtf-digest.css:
   yellow title bars, #e2e2e2 borders, 6px radius, shadow lift on hover,
   #a67c00 for secondary links.
   ========================================================================== */

/* ==========================================================================
   HUB — browse links and grid
   ========================================================================== */

.wtf-tn-hub {
	margin: 20px 0 60px;
}

.wtf-tn-browse {
	margin-bottom: 2rem;
	padding: 1.1rem 1.25rem;
	background: #f4f1ea;
	border-radius: 6px;
}

.wtf-tn-browse__group {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem 1rem;
	padding: 0.35rem 0;
}

.wtf-tn-browse__heading {
	flex: 0 0 5rem;
	color: #6b5b3e;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.wtf-tn-browse__links {
	flex: 1 1 14rem;
}

.wtf-tn-browse__links a {
	display: inline-block;
	margin: 0 0.9rem 0.2rem 0;
	color: #a67c00;
	font-size: 0.95rem;
	font-weight: 600;
}

.wtf-tn-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 2rem;
}

/* ==========================================================================
   CARD
   ========================================================================== */

.wtf-tn-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 6px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	transition: box-shadow 0.15s ease;
}

.wtf-tn-card:hover {
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.wtf-tn-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.wtf-tn-card__link:hover,
.wtf-tn-card__link:focus,
.wtf-tn-card__link:visited,
.wtf-tn-card__link:active {
	text-decoration: none;
	color: inherit;
}

.wtf-tn-card__link:focus-visible {
	outline: 3px solid #ffcc00;
	outline-offset: -3px;
}

/* --------------------------------------------------------------------------
   Bottle image

   Unlike the event and digest cards, this uses `contain` rather than `cover`.
   Bottle shots are portrait and vary a lot in proportion, and a cover crop
   takes the neck or the base off, which looks like a mistake in a way a
   cropped landscape photo does not. The fixed 3:4 ratio still keeps every
   row in the grid aligned, which is what cover was buying elsewhere.
   -------------------------------------------------------------------------- */

.wtf-tn-card__image {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 4;
	padding: 1rem;
	overflow: hidden;
	background: #f4f1ea;
}

.wtf-tn-card__image img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* No bottle shot: a titled panel rather than a broken-looking empty box,
   same treatment as the digest cards. Absolutely positioned so it fills the
   image panel edge to edge, ignoring the padding that insets a real bottle. */
.wtf-tn-card__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background: #f4f1ea;
	color: #6b5b3e;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-align: center;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Card body
   -------------------------------------------------------------------------- */

.wtf-tn-card__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 1.25rem;
}

.wtf-tn-card__title {
	margin: -1.25rem -1.25rem 1rem -1.25rem;
	padding: 0.75rem 1.25rem;
	background: #ffcc00;
	color: #000;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
}

.wtf-tn-card:hover .wtf-tn-card__title {
	background: #e6b800;
}

/* Overlaid on the image rather than sitting above the title, which the title
   bar's negative top margin would otherwise pull up over it. Dark translucent
   rather than grey, which would barely register on the tinted image panel. */
.wtf-tn-card__guest {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	padding: 0.2rem 0.6rem;
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.72);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.wtf-tn-card__distillery {
	margin: 0 0 0.35rem;
	color: #555;
	font-size: 0.95rem;
}

.wtf-tn-card__spec {
	margin: 0 0 0.75rem;
	color: #888;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.wtf-tn-card .wtf-tn-labels {
	margin-bottom: 0.75rem;
}

.wtf-tn-card .wtf-tn-label {
	padding: 0.15rem 0.5rem;
	font-size: 0.68rem;
}

/* Clamped so cards stay level regardless of excerpt length. */
.wtf-tn-card__excerpt {
	display: -webkit-box;
	margin: 0 0 1rem;
	overflow: hidden;
	color: #444;
	font-size: 0.95rem;
	line-height: 1.55;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
}

/* ==========================================================================
   SINGLE NOTE
   ========================================================================== */

.wtf-tn--full {
	margin: 2rem 0 0;
}

/* --------------------------------------------------------------------------
   Guest byline
   -------------------------------------------------------------------------- */

.wtf-tn-byline {
	margin: 0 0 1.5rem;
	padding: 0.75rem 1.1rem;
	background: #f4f1ea;
	border-left: 4px solid #ffcc00;
	font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   Specification table
   -------------------------------------------------------------------------- */

.wtf-tn-spec {
	margin: 0 0 1.5rem;
	border-top: 1px solid #e2e2e2;
}

.wtf-tn-spec__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid #e2e2e2;
}

.wtf-tn-spec__label {
	flex: 0 0 11rem;
	color: #888;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.wtf-tn-spec__value {
	flex: 1 1 14rem;
	color: #1a1a1a;
}

/* --------------------------------------------------------------------------
   Info tooltip

   No JS: the bubble shows on hover and on focus, and because the trigger is
   a real button, tapping it on mobile focuses it and opens the bubble. The
   !important overrides neutralise the theme's generic button:hover rule
   (background #3f4047, white text), same problem the event cards hit.
   -------------------------------------------------------------------------- */

.wtf-tn-info {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin-left: 0.4rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: help;
	vertical-align: middle;
}

.wtf-tn-info:hover,
.wtf-tn-info:focus,
.wtf-tn-info:active {
	background-color: transparent !important;
}

.wtf-tn-info__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.05rem;
	height: 1.05rem;
	border-radius: 50%;
	background: #ffcc00;
	color: #000;
	font-size: 0.7rem;
	font-style: italic;
	font-weight: 700;
	line-height: 1;
}

.wtf-tn-info__bubble {
	position: absolute;
	bottom: calc(100% + 0.5rem);
	left: 50%;
	z-index: 20;
	width: 17rem;
	max-width: 70vw;
	padding: 0.7rem 0.85rem;
	border-radius: 6px;
	background: #1a1a1a;
	color: #fff;
	font-size: 0.8rem;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.45;
	text-align: left;
	text-transform: none;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%);
	transition: opacity 0.12s ease, visibility 0.12s ease;
}

.wtf-tn-info__bubble::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border: 5px solid transparent;
	border-top-color: #1a1a1a;
}

.wtf-tn-info:hover .wtf-tn-info__bubble,
.wtf-tn-info:focus .wtf-tn-info__bubble {
	opacity: 1;
	visibility: visible;
}

/* --------------------------------------------------------------------------
   Production labels
   -------------------------------------------------------------------------- */

.wtf-tn-labels {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.5rem;
}

.wtf-tn-label {
	display: inline-block;
	padding: 0.25rem 0.7rem;
	background: #ffcc00;
	border-radius: 3px;
	color: #000;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Video — the 16:9 frame overrides oEmbed's fixed iframe dimensions, which
   would otherwise overflow on mobile.
   -------------------------------------------------------------------------- */

.wtf-tn-video {
	margin: 0 0 1.5rem;
}

.wtf-tn-video__frame {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	border-radius: 6px;
	overflow: hidden;
	background: #000;
}

.wtf-tn-video__frame iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.wtf-tn-video__caption {
	margin: 0.5rem 0 0;
	color: #888;
	font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   The tasting
   -------------------------------------------------------------------------- */

.wtf-tn-tasting {
	margin: 0 0 1.5rem;
}

.wtf-tn-tasting__row {
	margin: 0 0 1.2rem;
}

.wtf-tn-tasting__label {
	margin: 0 0 0.3rem;
	color: #a67c00;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.wtf-tn-tasting__value p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Thoughts
   -------------------------------------------------------------------------- */

.wtf-tn-thoughts {
	margin: 0 0 1.5rem;
	padding: 1.25rem 1.5rem;
	background: #f4f1ea;
	border-radius: 6px;
}

.wtf-tn-thoughts__heading {
	margin: 0 0 0.6rem;
	color: #6b5b3e;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.wtf-tn-thoughts__body p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Verdict — the one place a yellow bar appears outside a card title, since
   it is the payoff of the whole page.
   -------------------------------------------------------------------------- */

.wtf-tn-verdict {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	background: #ffcc00;
	border-radius: 6px;
	color: #000;
}

.wtf-tn-verdict__kicker {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.65;
}

.wtf-tn-verdict__label {
	display: block;
	margin-top: 0.2rem;
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.3;
}

/* The bottom two rungs drop the yellow — a bright yellow bar reading
   "Not sure how this got bottled" sends two opposite signals at once. */
.wtf-tn-verdict--1,
.wtf-tn-verdict--0 {
	background: #f0f0f0;
	color: #555;
}

/* --------------------------------------------------------------------------
   Images
   -------------------------------------------------------------------------- */

.wtf-tn-images {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1rem;
	margin: 0 0 1.5rem;
}

.wtf-tn-images__item {
	margin: 0;
}

.wtf-tn-images__item img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

/* --------------------------------------------------------------------------
   Context, featured in, disclosure
   -------------------------------------------------------------------------- */

.wtf-tn-context {
	margin: 0 0 1.5rem;
	color: #888;
	font-size: 0.85rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.wtf-tn-featured-in {
	margin: 0 0 1.5rem;
}

.wtf-tn-featured-in h3 {
	margin: 0 0 0.4rem;
	color: #a67c00;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.wtf-tn-featured-in ul {
	margin: 0;
	padding-left: 1.2rem;
}

.wtf-tn-disclosure {
	margin: 2rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid #e2e2e2;
	color: #777;
	font-size: 0.85rem;
	line-height: 1.6;
}

.wtf-tn-disclosure p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   GLASS VARIANT — In The Glass
   ========================================================================== */

.wtf-tn--glass {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 1.5rem 0;
	padding: 1.25rem;
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 6px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.wtf-tn-glass__image {
	flex: 0 0 140px;
}

.wtf-tn-glass__image img {
	display: block;
	width: 100%;
	height: auto;
}

.wtf-tn-glass__body {
	flex: 1 1 16rem;
}

.wtf-tn-glass__title {
	margin: 0 0 0.2rem;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
}

.wtf-tn-glass__abv {
	margin: 0 0 0.75rem;
	color: #888;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.wtf-tn-glass__thoughts p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   EMBED VARIANT — a note inside a longer article
   ========================================================================== */

.wtf-tn--embed {
	margin: 2rem 0;
	padding: 1.25rem 1.5rem;
	background: #fff;
	border: 1px solid #e2e2e2;
	border-left: 4px solid #ffcc00;
	border-radius: 6px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.wtf-tn-embed__header {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin-bottom: 1rem;
}

.wtf-tn-embed__image {
	flex: 0 0 90px;
}

.wtf-tn-embed__image img {
	display: block;
	width: 100%;
	height: auto;
}

.wtf-tn-embed__heading {
	flex: 1 1 14rem;
}

.wtf-tn-embed__title {
	margin: 0 0 0.2rem;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.3;
}

.wtf-tn-embed__distillery,
.wtf-tn-embed__cask {
	margin: 0;
	color: #555;
	font-size: 0.9rem;
}

.wtf-tn-embed__spec {
	margin: 0.15rem 0;
	color: #888;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.wtf-tn-embed__row {
	margin: 0 0 0.5rem;
	font-size: 0.95rem;
	line-height: 1.55;
}

.wtf-tn-embed__label {
	display: inline-block;
	min-width: 4.5rem;
	color: #a67c00;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ==========================================================================
   INLINE VARIANT AND SHARED CTA
   ========================================================================== */

.wtf-tn-inline__abv {
	color: #888;
	font-size: 0.9em;
}

.wtf-tn-cta {
	display: inline-block;
	margin-top: 0.4rem;
	color: #a67c00;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
}

.wtf-tn-cta::after {
	content: "\2192";
	margin-left: 6px;
}

.wtf-tn-cta:hover {
	text-decoration: underline;
}

/* ==========================================================================
   ALPHABETICAL INDEX
   ========================================================================== */
 
.wtf-tn-index {
	margin: 20px 0 60px;
}
 
/* --------------------------------------------------------------------------
   Jump links
   -------------------------------------------------------------------------- */
 
.wtf-tn-index__jump {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-bottom: 2rem;
	padding: 1rem 1.1rem;
	background: #f4f1ea;
	border-radius: 6px;
}
 
.wtf-tn-index__jump a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	padding: 0 0.4rem;
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 4px;
	color: #6b5b3e;
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.12s ease;
}
 
.wtf-tn-index__jump a:hover,
.wtf-tn-index__jump a:focus {
	background: #ffcc00;
	border-color: #ffcc00;
	color: #000;
	text-decoration: none;
}
 
/* --------------------------------------------------------------------------
   Letter groups
 
   scroll-margin-top keeps the heading clear of a sticky site header when a
   jump link lands on it. Raise the value if your header is taller.
   -------------------------------------------------------------------------- */
 
.wtf-tn-index__group {
	margin-bottom: 2rem;
	scroll-margin-top: 90px;
}
 
.wtf-tn-index__letter {
	margin: 0 0 0.75rem;
	padding-bottom: 0.4rem;
	border-bottom: 3px solid #ffcc00;
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1;
}
 
/* Columns rather than a grid: the list reads down each column in turn, which
   is how an index is meant to be scanned. */
.wtf-tn-index__list {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 2;
	column-gap: 2.5rem;
}
 
.wtf-tn-index__item {
	margin: 0 0 0.45rem;
	padding-left: 0.9rem;
	text-indent: -0.9rem;
	line-height: 1.45;
	break-inside: avoid;
}
 
.wtf-tn-index__item::before {
	content: "\2022";
	margin-right: 0.5rem;
	color: #ffcc00;
	font-weight: 700;
}
 
.wtf-tn-index__abv {
	color: #888;
	font-size: 0.85rem;
	white-space: nowrap;
}
 
.wtf-tn-index__guest {
	display: inline-block;
	margin-left: 0.2rem;
	padding: 0.05rem 0.4rem;
	background: #f0f0f0;
	border-radius: 3px;
	color: #777;
	font-size: 0.68rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	vertical-align: middle;
}

/* ==========================================================================
   TAXONOMY ARCHIVE HEADER
   ========================================================================== */
 
.wtf-term-header {
	margin-bottom: 2.5rem;
}
 
.wtf-term-header__image {
	margin-bottom: 1.5rem;
	border-radius: 6px;
	overflow: hidden;
	background: #f4f1ea;
}
 
/* A fixed 3:1 band rather than the image's own proportions, so every archive
   header is the same height regardless of what gets uploaded. */
.wtf-term-header__image img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 1;
	height: auto;
	object-fit: cover;
	object-position: center;
}
 
.wtf-term-header__intro {
	font-size: 1.05rem;
	line-height: 1.65;
}
 
.wtf-term-header__intro p:last-child {
	margin-bottom: 0;
}
 
/* The archive description is normally centred and muted by the theme; this
   is body copy and should read as such. */
.wtf-term-header__intro,
.wtf-term-header__intro p {
	color: inherit;
	text-align: left;
}

/* ==========================================================================
   SMALL SCREENS
   ========================================================================== */

@media (max-width: 600px) {

	.wtf-tn-spec__row {
		gap: 0;
	}

	.wtf-tn-spec__label {
		flex: 1 1 100%;
		margin-bottom: 0.1rem;
	}

	.wtf-tn-spec__value {
		flex: 1 1 100%;
	}

	.wtf-tn-browse__heading {
		flex: 1 1 100%;
	}

	.wtf-tn-glass__image,
	.wtf-tn-embed__image {
		flex: 0 0 100px;
	}

	.wtf-tn-info__bubble {
		left: 0;
		transform: none;
	}

	.wtf-tn-info__bubble::after {
		left: 1rem;
	}

	.wtf-tn-index__list {
		columns: 1;
	}

	.wtf-term-header__image img {
		aspect-ratio: 2 / 1;
	}
 
	.wtf-term-header__intro {
		font-size: 1rem;
	}
}

@media (max-width: 480px) {

	.wtf-tn-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.wtf-tn-card__excerpt {
		-webkit-line-clamp: 4;
		line-clamp: 4;
	}
}