/* ==========================================================================
   Homepage sections
   ========================================================================== */

/* --- Editorial hero: 60/40 -------------------------------------------- */
.hp-hero { padding-block: var(--hp-space-lg) var(--hp-space-xl); }
.hp-hero__grid { display: grid; gap: var(--hp-space-lg); }
.hp-hero__lead .hp-card__media { aspect-ratio: 3 / 2; border-radius: var(--hp-radius-md); }
.hp-hero__title { font-size: clamp(1.9rem, 4.6vw, 3.1rem); margin-block: var(--hp-space-2xs); }
.hp-hero__title a { text-decoration: none; }
.hp-hero__title a:hover { color: var(--hp-color-primary-dark); }
.hp-hero__dek { font-size: var(--hp-text-md); color: var(--hp-color-text-muted); max-width: 60ch; }
.hp-hero__meta { margin-top: var(--hp-space-sm); padding-top: var(--hp-space-2xs); border-top: var(--hp-rule); font-size: var(--hp-text-xs); color: var(--hp-color-text-muted); }
.hp-hero__meta a { font-weight: 650; text-decoration: none; }
.hp-hero__side { display: grid; gap: var(--hp-space-md); align-content: start; }
.hp-hero__side > * + * { padding-top: var(--hp-space-md); border-top: var(--hp-rule); }

@media (min-width: 900px) {
	.hp-hero__grid { grid-template-columns: 60fr 40fr; gap: var(--hp-space-xl); }
	.hp-hero__side { border-left: var(--hp-rule); padding-left: var(--hp-space-lg); }
}

/* --- Trending ---------------------------------------------------------- */
.hp-trending { background-color: var(--hp-color-canvas); }
.hp-trending__card {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-2xs);
	padding: var(--hp-space-sm);
	background-color: var(--hp-color-surface);
	border-radius: var(--hp-radius-md);
	border-top: 3px solid var(--hp-color-signal);
	height: 100%;
}
.hp-trending__card .hp-card__title { font-size: var(--hp-text-sm); font-family: var(--hp-font-body); font-weight: 650; line-height: var(--hp-leading-snug); }

/* --- Explore topics ---------------------------------------------------- */
.hp-topic-card {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-3xs);
	padding: var(--hp-space-md) var(--hp-space-sm);
	border: var(--hp-rule);
	border-radius: var(--hp-radius-md);
	background-color: var(--hp-color-surface);
	text-decoration: none;
	height: 100%;
	transition: border-color var(--hp-transition), background-color var(--hp-transition);
}
.hp-topic-card:hover { border-color: var(--hp-color-primary); background-color: var(--hp-color-primary-soft); }
.hp-topic-card__icon { color: var(--hp-color-primary); }
.hp-topic-card__title { font-family: var(--hp-font-display); font-size: var(--hp-text-md); color: var(--hp-color-text); }
.hp-topic-card__desc { font-size: var(--hp-text-xs); color: var(--hp-color-text-muted); }
.hp-topic-card__count { margin-top: auto; padding-top: var(--hp-space-2xs); font-size: var(--hp-text-2xs); color: var(--hp-color-text-muted); }

/* --- Featured topic hub ------------------------------------------------ */
.hp-featured-topic__grid { display: grid; gap: var(--hp-space-lg); }
.hp-featured-topic__list { display: grid; gap: var(--hp-space-sm); align-content: start; }
.hp-featured-topic__list > * + * { padding-top: var(--hp-space-sm); border-top: var(--hp-rule); }
@media (min-width: 900px) {
	.hp-featured-topic__grid { grid-template-columns: 1.15fr 1fr; gap: var(--hp-space-xl); }
}

/* --- Tools ------------------------------------------------------------- */
.hp-tool-card {
	display: flex;
	gap: var(--hp-space-sm);
	align-items: flex-start;
	padding: var(--hp-space-sm);
	background-color: var(--hp-color-surface);
	border: var(--hp-rule);
	border-radius: var(--hp-radius-md);
	text-decoration: none;
	height: 100%;
}
.hp-tool-card:hover { border-color: var(--hp-color-primary); }
.hp-tool-card__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: var(--hp-radius-sm);
	background-color: var(--hp-color-primary-soft);
	color: var(--hp-color-primary-dark);
}
.hp-tool-card__title { font-family: var(--hp-font-display); font-size: var(--hp-text-base); color: var(--hp-color-text); }
.hp-tool-card__desc { font-size: var(--hp-text-xs); color: var(--hp-color-text-muted); margin-top: 2px; }

/* --- GLP-1 resource centre --------------------------------------------- */
.hp-resource { background-color: var(--hp-color-primary-dark); color: var(--hp-color-text-invert); }
.hp-resource__grid { display: grid; gap: var(--hp-space-lg); }
.hp-resource__intro p { color: rgba(244, 247, 247, 0.82); max-width: 54ch; }
.hp-resource__links { display: flex; flex-wrap: wrap; gap: var(--hp-space-2xs); margin-top: var(--hp-space-md); }
.hp-resource__links a {
	padding: 0.35rem 0.8rem;
	border: 1px solid rgba(255, 255, 255, 0.32);
	border-radius: var(--hp-radius-pill);
	font-size: var(--hp-text-xs);
	text-decoration: none;
}
.hp-resource__links a:hover { background-color: rgba(255, 255, 255, 0.12); color: #fff; }
.hp-resource .hp-card__title a { color: var(--hp-color-text-invert); }
.hp-resource .hp-card__excerpt,
.hp-resource .hp-card__meta { color: rgba(244, 247, 247, 0.72); }
.hp-resource .hp-card--boxed { background-color: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.16); }
@media (min-width: 900px) { .hp-resource__grid { grid-template-columns: 1fr 1.4fr; gap: var(--hp-space-2xl); } }

/* --- Directory strips (conditions / medications) ------------------------ */
.hp-strip { display: grid; gap: var(--hp-space-2xs); }
.hp-strip__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hp-space-2xs);
	padding: 0.65rem var(--hp-space-sm);
	background-color: var(--hp-color-surface);
	border: var(--hp-rule);
	border-radius: var(--hp-radius-sm);
	font-size: var(--hp-text-sm);
	font-weight: 650;
	text-decoration: none;
	color: var(--hp-color-text);
}
.hp-strip__link:hover { border-color: var(--hp-color-primary); color: var(--hp-color-primary-dark); }
.hp-strip__link span:last-child { color: var(--hp-color-border-strong); }

/* --- Programs ---------------------------------------------------------- */
.hp-program-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--hp-radius-md);
	background-color: var(--hp-color-surface);
	border: var(--hp-rule);
	height: 100%;
}
.hp-program-card__media { aspect-ratio: 16 / 9; background-color: var(--hp-color-surface-alt); }
.hp-program-card__media img { width: 100%; height: 100%; object-fit: cover; }
.hp-program-card__body { display: flex; flex-direction: column; gap: var(--hp-space-2xs); padding: var(--hp-space-sm); flex: 1 1 auto; }
.hp-program-card__cta { margin-top: auto; }

/* --- Videos ------------------------------------------------------------ */
.hp-video-grid { display: grid; gap: var(--hp-space-lg); }
.hp-video-thumb { position: relative; border-radius: var(--hp-radius-md); overflow: hidden; background-color: var(--hp-color-surface-alt); aspect-ratio: 16 / 9; }
.hp-video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hp-video-thumb__play {
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-50%, -50%);
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: rgba(14, 59, 67, 0.88);
	color: #fff;
}
.hp-video-thumb__duration {
	position: absolute;
	right: 8px;
	bottom: 8px;
	padding: 2px 6px;
	border-radius: var(--hp-radius-sm);
	background-color: rgba(14, 30, 35, 0.85);
	color: #fff;
	font-size: var(--hp-text-3xs);
	font-variant-numeric: tabular-nums;
}
.hp-video-grid__side { display: grid; gap: var(--hp-space-sm); align-content: start; }
@media (min-width: 900px) { .hp-video-grid { grid-template-columns: 1.4fr 1fr; } }

/* --- News -------------------------------------------------------------- */
.hp-news__grid { display: grid; gap: var(--hp-space-lg); }
@media (min-width: 900px) { .hp-news__grid { grid-template-columns: 2fr 1fr; gap: var(--hp-space-xl); } }
.hp-news__aside { padding: var(--hp-space-md); background-color: var(--hp-color-canvas); border-radius: var(--hp-radius-md); align-self: start; }
.hp-news__date { font-variant-numeric: tabular-nums; }