/* Horizon Core: the podcast home's baseline (HORIZON-20260926-056, Phase 5, PB-40).

   Loaded only on a podcast tenant's front page (hp_podcast_home_enqueue), after the
   theme, with no dependencies. STRUCTURE only: rows, columns, the phone swipe rows
   and their buttons. Colour and type stay each site's skin; the cards are Core's
   own (hp-episode.css, hp-profile.css). Body-prefixed so a theme's single-class
   rule loses a tie and a theme two-class rule can still restyle it.

   Phones (<=767px): episodes and guests are one swipe row each, not a column of
   full-height cards. Measured at 375 before this: Latest Drops 1,322px and Meet the
   Chaos 1,219px on Trashy Imports. */

/* ── Rows: a grid on wide screens, a swipe row on phones ───────────────────── */
body .hp-carousel { position: relative; }
body .hp-carousel__track {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
body .hp-carousel--people .hp-carousel__track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body .hp-carousel__controls:not([hidden]) {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin: -8px 0 12px;
}
body .hp-carousel__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--hp-border-strong, rgba(255, 255, 255, 0.2));
	border-radius: 999px;
	background: var(--hp-bg-surface, #111);
	color: var(--hp-text, #fff);
	cursor: pointer;
}
body .hp-carousel__btn:disabled { opacity: 0.35; cursor: default; }
body .hp-carousel__btn:focus-visible,
body .hp-carousel__track:focus-visible { outline: 2px solid var(--hp-gold, currentColor); outline-offset: 2px; }

@media (min-width: 768px) {
	/* The grid shows everything; buttons would do nothing. */
	body .hp-carousel__controls:not([hidden]) { display: none; }
}

@media (max-width: 767px) {
	body .hp-carousel__track {
		display: flex;
		gap: 14px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		/* Bleed to the screen edge so the next card peeks in: that is the cue. */
		margin-inline: calc(-1 * var(--hp-content-pad, 16px));
		padding-inline: var(--hp-content-pad, 16px);
		scroll-padding-inline: var(--hp-content-pad, 16px);
		padding-block: 2px;
	}
	body .hp-carousel__track::-webkit-scrollbar { display: none; }
	body .hp-carousel__track > * {
		flex: 0 0 82%;
		min-width: 0;
		margin: 0;
		scroll-snap-align: start;
	}
	body .hp-carousel--people .hp-carousel__track > * { flex-basis: 44%; }
}

/* ── Hosts: the layout follows the head count (1.41.1) ──────────────────────────
   solo (1) and duo (2) are feature PANELS that fill the row: portrait beside the
   words. A 4:5 card per host left one or two 650x820 boxes and an empty third of
   the row at 1280. 3+ is a row of Core's cards (a swipe row on phones). */
body .hp-home-hosts__grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
body .hp-home-hosts__grid--1 { grid-template-columns: minmax(0, 1fr); }
body .hp-host-feature {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--hp-gold, #c9a34e) 18%, transparent);
	border-radius: var(--hp-r-md, 4px);
	background: var(--hp-bg-surface, #111);
}
body .hp-host-feature__media { display: block; aspect-ratio: 4 / 5; min-height: 100%; text-decoration: none; }
/* Wide screens: the portrait column is as tall as the panel, whatever the words need. */
@media (min-width: 768px) { body .hp-host-feature__media { aspect-ratio: auto; height: 100%; min-height: 300px; } }
body .hp-host-feature__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
body .hp-host-feature--no-photo .hp-host-feature__media {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(160deg, color-mix(in srgb, var(--hp-gold, #c9a34e) 22%, var(--hp-bg-surface, #111)), var(--hp-bg-surface, #111));
}
body .hp-host-feature--no-photo .hp-profile-initials { background: none; font-size: clamp(2rem, 5vw, 3.5rem); }
body .hp-host-feature__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 8px;
	padding: clamp(18px, 2.5vw, 32px);
}
body .hp-host-feature__eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--hp-gold, currentColor); }
body .hp-host-feature__name { margin: 0; font-family: var(--hp-font-display, inherit); font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.15; }
body .hp-host-feature__name a { color: inherit; text-decoration: none; }
body .hp-host-feature__location,
body .hp-host-feature__count { font-size: var(--hp-text-sm, 0.875rem); color: var(--hp-text-muted, #9a9a9a); }
body .hp-host-feature__location { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; }
body .hp-host-feature__bio { margin: 4px 0 0; color: var(--hp-text-subtle, inherit); line-height: 1.55; }
body .hp-host-feature__cta { margin-top: 8px; min-height: 44px; }

/* solo: a portrait of fixed width beside a wide text column */
@media (min-width: 768px) {
	body .hp-home-hosts__grid { gap: 20px; }
	body .hp-home-hosts__grid--1 .hp-host-feature { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
	body .hp-home-hosts__grid--1 .hp-host-feature__bio { max-width: 60ch; font-size: 1.0625rem; }
}

/* 3+: Core's cards, one row across the width; four per row from five up */
@media (min-width: 768px) {
	body .hp-carousel--hosts.hp-carousel--cols-3 .hp-carousel__track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	body .hp-carousel--hosts.hp-carousel--cols-4 .hp-carousel__track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Phones: solo stacks, portrait on top; duo is two compact tiles, name only
   (the profile carries the rest); 3+ is a swipe row of cards. */
@media (max-width: 767px) {
	body .hp-home-hosts__grid--1 .hp-host-feature { grid-template-columns: minmax(0, 1fr); }
	body .hp-home-hosts__grid--1 .hp-host-feature__media { aspect-ratio: 4 / 3; min-height: 0; }
	body .hp-home-hosts__grid--2 .hp-host-feature { grid-template-columns: minmax(0, 1fr); }
	body .hp-home-hosts__grid--2 .hp-host-feature__media { min-height: 0; }
	body .hp-home-hosts__grid--2 .hp-host-feature__body { padding: 10px 12px 12px; gap: 2px; }
	body .hp-home-hosts__grid--2 .hp-host-feature__name { font-size: 1rem; }
	/* The whole tile is the name's link (the portrait link is aria-hidden), so the
	   tap target is the tile, not a 1rem line of text. */
	body .hp-home-hosts__grid--2 .hp-host-feature { position: relative; }
	body .hp-home-hosts__grid--2 .hp-host-feature__name a::after { content: ''; position: absolute; inset: 0; }
	/* The link itself is a 44px target too (the probe measures the link, and so does a screen reader's focus ring). */
	body .hp-home-hosts__grid--2 .hp-host-feature__name a { display: flex; align-items: center; min-height: 44px; }
	body .hp-home-hosts__grid--2 .hp-host-feature__location,
	body .hp-home-hosts__grid--2 .hp-host-feature__bio,
	body .hp-home-hosts__grid--2 .hp-host-feature__count,
	body .hp-home-hosts__grid--2 .hp-host-feature__cta { display: none; }
	body .hp-carousel--hosts .hp-carousel__track > * { flex-basis: 44%; }
}

/* ── Person cards at phone size: name and word only ───────────────────────────
   A 4:5 card ~165px wide cannot carry eyebrow, name, count and "View profile" on
   the photo without covering it. The card is still the link; the count and the
   profile keep the rest. */
@media (max-width: 767px) {
	body .hp-home-hosts .hp-profile-card__body,
	body .hp-home-guests .hp-profile-card__body { gap: 2px; padding: 36px 10px 10px; }
	body .hp-home-hosts .hp-profile-card__count,
	body .hp-home-hosts .hp-profile-card__view,
	body .hp-home-hosts .hp-profile-card__location,
	body .hp-home-guests .hp-profile-card__count,
	body .hp-home-guests .hp-profile-card__view,
	body .hp-home-guests .hp-profile-card__location { display: none; }
	body .hp-home-hosts .hp-profile-card__name,
	body .hp-home-guests .hp-profile-card__name { font-size: 1rem; line-height: 1.2; }
	body .hp-home-hosts .hp-profile-card__eyebrow,
	body .hp-home-guests .hp-profile-card__eyebrow { font-size: 0.75rem; } /* 12px: the signed floor (S4), never under */
}

/* ── Merch on the podcast home: three on wide screens, two on a phone ─────────
   ⚠️ !important on purpose: Trashy Imports' hp-responsive.css forces the grid to ONE
   column below 480px with !important. On this page merch is a teaser for /merch/,
   not the shop, so two side by side (the shop-grid pattern) beats two full-width
   cards stacked: measured 1,166px of merch at 375 stacked. Alex, 2026-09-26: a
   better solution wins over the old design. Scoped to the podcast home only; the
   shop and every other page keep the theme's rule. */
body.hp-podcast-home #merch .hp-merch-grid--grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
@media (max-width: 767px) {
	body.hp-podcast-home #merch .hp-merch-grid--grid > :nth-child(n+3) { display: none; }
}
@media (min-width: 768px) {
	body.hp-podcast-home #merch .hp-merch-grid--grid { gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* Tablets are touch screens too (Core 1.41.12, HORIZON-20260927-003). The mobile ratchet --full measured the
   podcast home at 768 with the "All Episodes / All Hosts / All Guests" links 23px tall and the host-name link
   27px, because hp-mobile.css only lifts them below 768. A short name ("Sable") also measured 41px wide at 375.
   The hit area grows; the look does not. */
@media (max-width: 1024px) {
	body.hp-podcast-home .hp-viewall { display: inline-flex; align-items: center; min-height: 44px; }
	body.hp-podcast-home .hp-host-feature__name a { display: inline-flex; align-items: center; min-height: 44px; }
}
body.hp-podcast-home .hp-host-feature__name a { min-width: 44px; }