/**
 * Blog archive — layout tiers only.
 *
 * Typography and spacing scale fluidly via clamp() in hero.css and grid.css.
 * This file handles column counts, hero stacking, tab scroll, card aspect-ratio
 * switches, and line-clamp adjustments.
 *
 * Column tiers:
 *   >1200px   3 columns
 *   993-1200  2 columns
 *   <=992px   1 column (large portrait cards)
 */

/* ---------------------------------------------------------------------------
 * Narrow desktop — two columns (aligned with work archive tier).
 * ------------------------------------------------------------------------- */

@media (max-width: 1200px) {
	.sp-blog-grid__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------------------------
 * Tablet — hero stacks, tabs scroll horizontally, single-column grid.
 * Portrait cards drop fixed aspect ratio in favour of min-height.
 * ------------------------------------------------------------------------- */

@media (max-width: 992px) {
	.sp-blog-hero__header {
		flex-direction: column;
		align-items: flex-start;
	}

	.sp-blog-hero__tabs {
		justify-content: flex-start;
		width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
		flex-wrap: nowrap;
		padding-bottom: 7px;
	}

	.sp-blog-grid__list {
		grid-template-columns: 1fr;
	}

	.sp-blog-grid__card {
		aspect-ratio: auto;
		min-height: clamp(320px, 68vw, 520px);
	}
}

/* ---------------------------------------------------------------------------
 * Mobile — refine card min-heights and title line-clamp.
 * ------------------------------------------------------------------------- */

@media (max-width: 768px) {
	.sp-blog-grid__card {
		min-height: clamp(300px, 72vw, 480px);
	}

	.sp-blog-grid__title {
		-webkit-line-clamp: 3;
		line-clamp: 3;
	}
}

/* ---------------------------------------------------------------------------
 * Small phones — card min-height ramp and tighter truncation.
 * ------------------------------------------------------------------------- */

@media (max-width: 640px) {
	.sp-blog-grid__card {
		min-height: clamp(280px, 74vw, 440px);
	}
}

@media (max-width: 480px) {
	.sp-blog-grid__card {
		min-height: clamp(260px, 78vw, 400px);
	}

	.sp-blog-grid__title {
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}

	.sp-blog-grid__excerpt {
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}
}