/* ==========================================================================
   home.css — hero, radio feature card, recipe search
   ========================================================================== */

/* --- hero ---------------------------------------------------------------- */

.hero {
	margin-top: var(--s-5);
	padding: var(--s-5);
	background: var(--mint);
	border-radius: var(--r-lg);
}

@media (min-width: 48rem) {
	.hero {
		padding: var(--s-6);
	}
}

.hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-5);
	align-items: center;
}

@media (min-width: 52rem) {
	.hero__inner {
		grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
		gap: var(--s-7);
	}
}

.hero__portrait {
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	aspect-ratio: 4 / 5;
	background: var(--mint-soft);
}

.hero__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%;
}

@media (max-width: 51.99rem) {
	.hero__portrait {
		aspect-ratio: 16 / 10;
		max-width: 22rem;
	}
}

.hero__copy {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: var(--s-4);
}

.hero__title {
	font-size: var(--t-3xl);
}

.hero__title em {
	font-style: normal;
	color: var(--ink-deep);
}

.hero__copy p {
	font-size: var(--t-lg);
	line-height: var(--lh-snug);
	color: var(--ink-muted);
	max-width: 48ch;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-3);
	margin-top: var(--s-1);
}

/* --- social row ---------------------------------------------------------- */

.social {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	list-style: none;
}

.social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--mint-soft);
	color: var(--ink);
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.social a:hover {
	background: var(--ink);
	color: var(--surface);
	transform: translateY(-2px);
	text-decoration: none;
}

.social .icon {
	font-size: 1.05rem;
}

/* On mint grounds the chip reads better as a lightened surface. */
.hero .social a,
.site-footer .social a {
	background: color-mix(in srgb, var(--surface) 70%, transparent);
}

/* --- radio feature ------------------------------------------------------- */

.radio-card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-4);
	margin-top: var(--s-6);
	padding: var(--s-4) var(--s-5);
	background: var(--surface);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-sm);
}

.radio-card__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	flex: none;
	border-radius: 50%;
	background: var(--mint);
	color: var(--ink);
}

.radio-card__badge .icon {
	font-size: 1.25rem;
}

.radio-card__text {
	flex: 1 1 12rem;
}

.radio-card__title {
	font-size: var(--t-md);
	font-weight: 700;
	line-height: 1.3;
}

.radio-card__text .eyebrow {
	margin-top: .15rem;
}

/* --- custom audio player -------------------------------------------------
   The native <audio> control cannot be themed consistently across browsers,
   so it is kept headless and driven by static/js/home.js. The range input
   does the seeking, which keeps keyboard and screen-reader support intact. */

.player {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	flex: 1 1 22rem;
	min-width: 0;
}

.player audio {
	display: none;
}

.player__play,
.player__mute {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.player__play {
	width: 2.75rem;
	height: 2.75rem;
	background: var(--ink);
	color: var(--surface);
	box-shadow: var(--shadow-sm);
}

.player__play .icon {
	font-size: 1.15rem;
}

.player__play:hover {
	background: var(--ink-deep);
	transform: scale(1.05);
}

.player__play:active {
	transform: scale(.97);
}

.player__mute {
	width: 2.25rem;
	height: 2.25rem;
	background: transparent;
	color: var(--ink-muted);
}

.player__mute .icon {
	font-size: 1.05rem;
}

.player__mute:hover {
	background: var(--mint-soft);
	color: var(--ink);
}

.player.is-muted .player__mute {
	color: var(--ink);
	background: var(--mint-soft);
}

/* --- scrubber ------------------------------------------------------------
   The filled portion is painted with a gradient stop that home.js moves via
   the --progress custom property. */

.player__scrub {
	flex: 1 1 auto;
	min-width: 3rem;
	height: .375rem;
	margin: 0;
	padding: 0;
	border-radius: var(--r-pill);
	background: linear-gradient(to right,
			var(--ink) var(--progress, 0%),
			var(--mint-soft) var(--progress, 0%));
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: opacity var(--dur) var(--ease);
}

.player__scrub::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: .875rem;
	height: .875rem;
	border: 2px solid var(--surface);
	border-radius: 50%;
	background: var(--ink);
	box-shadow: 0 1px 3px rgba(0, 100, 0, .35);
	transition: transform var(--dur) var(--ease);
}

.player__scrub::-moz-range-thumb {
	width: .875rem;
	height: .875rem;
	border: 2px solid var(--surface);
	border-radius: 50%;
	background: var(--ink);
	box-shadow: 0 1px 3px rgba(0, 100, 0, .35);
	transition: transform var(--dur) var(--ease);
}

.player__scrub:hover::-webkit-slider-thumb,
.player__scrub:focus-visible::-webkit-slider-thumb {
	transform: scale(1.25);
}

.player__scrub:hover::-moz-range-thumb,
.player__scrub:focus-visible::-moz-range-thumb {
	transform: scale(1.25);
}

.player__scrub:disabled {
	cursor: default;
	opacity: .55;
}

.player__scrub:disabled::-webkit-slider-thumb {
	opacity: 0;
}

.player__scrub:disabled::-moz-range-thumb {
	opacity: 0;
}

.player__time {
	flex: none;
	font-size: var(--t-xs);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--ink-muted);
	letter-spacing: .01em;
}

/* --- states -------------------------------------------------------------- */

/* Buffering: the play button breathes rather than swapping in a spinner. */
.player.is-busy .player__play {
	animation: player-pulse 1.1s var(--ease) infinite;
}

@keyframes player-pulse {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: .55;
	}
}

.player__message {
	display: none;
	align-items: center;
	gap: var(--s-2);
	font-size: var(--t-md);
	color: var(--ink-muted);
}

.player.is-error .player__play,
.player.is-error .player__scrub,
.player.is-error .player__time,
.player.is-error .player__mute {
	display: none;
}

.player.is-error .player__message {
	display: flex;
}

.player__message .icon {
	font-size: 1.05rem;
	color: var(--danger);
}

@media (prefers-reduced-motion: reduce) {
	.player.is-busy .player__play {
		animation: none;
		opacity: .7;
	}
}

/* --- search -------------------------------------------------------------- */

.search {
	position: relative;
	display: flex;
	align-items: center;
	width: min(100%, 22rem);
}

.search__icon {
	position: absolute;
	left: var(--s-4);
	font-size: 1rem;
	color: var(--ink-faint);
	pointer-events: none;
}

.search input {
	padding-left: 2.75rem;
	padding-right: 2.5rem;
}

.search__clear {
	position: absolute;
	right: .4rem;
	display: none;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ink-faint);
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.search__clear:hover {
	background: var(--mint-soft);
	color: var(--ink);
}

.search.is-filled .search__clear {
	display: inline-flex;
}

.search__count {
	font-size: var(--t-sm);
	color: var(--ink-faint);
}

@media (max-width: 47.99rem) {
	.search {
		width: 100%;
	}
}