/* ==========================================================================
   Responsive behaviour. Mobile-first defaults live in the component files;
   this layer handles grid step-downs and small-screen specific layouts.
   ========================================================================== */

/* Small phones: 320-479 */
.hp-grid--2,
.hp-grid--3,
.hp-grid--4,
.hp-grid--5 { grid-template-columns: 1fr; }

.hp-grid--cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hp-space-sm); }

@media (min-width: 480px) {
	.hp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hp-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
	.hp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hp-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hp-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hp-mega__features { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
	.hp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.hp-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.hp-grid--cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hp-space-md); }
}

/* Rails collapse to grids on wide screens where a grid reads better */
@media (min-width: 1024px) {
	.hp-rail--desktop-grid {
		grid-auto-flow: row;
		grid-template-columns: repeat(var(--hp-rail-cols, 4), minmax(0, 1fr));
		overflow: visible;
	}
}

/* Cards switch to row layout on small screens where scanning matters */
@media (max-width: 639px) {
	.hp-card--row-mobile { flex-direction: row; align-items: flex-start; gap: var(--hp-space-sm); }
	.hp-card--row-mobile .hp-card__media { flex: 0 0 104px; aspect-ratio: 1 / 1; }
	.hp-card--lead .hp-card__title { font-size: var(--hp-text-xl); }
	.hp-editors-pick__body { grid-template-columns: 1fr; }
	.hp-person { flex-direction: column; }
}

/* Never allow horizontal page overflow */
html, body { max-width: 100%; }
.hp-content > figure,
.hp-content > .wp-block-image { max-width: 100%; }

/* Print: strip chrome, keep the article */
@media print {
	.hp-header, .hp-trustbar, .hp-nav, .hp-sidebar, .hp-footer, .hp-ad, .hp-newsletter, .hp-share, .hp-progress { display: none !important; }
	.hp-article-layout { display: block; }
	body { font-size: 11pt; color: #000; }
	a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}