/**
 * Project card grid — layout tiers.
 *
 * Card sizing is fluid in work/grid.css, so only genuine layout changes live
 * here: how many columns the grid has, and the switch from hover-reveal to
 * always-visible card content on touch-sized viewports.
 *
 * Column tiers:
 *   >1200px   3 columns  (small 1, large 2, full 3)
 *   769-1200  2 columns  (small 1, large 2, full 2)
 *   <=768px   1 column   (everything spans 1)
 */

/* ---------------------------------------------------------------------------
 * Laptop — shorter cards so the three-column grid does not read as a wall of
 * tall portrait tiles against narrower columns.
 * ------------------------------------------------------------------------- */

@media (max-width: 1440px) {
	:root {
		--sp-work-card-tall: clamp(280px, calc(680 / var(--spaciefy-artboard) * 100vw), 680px);
		--sp-work-card-short: clamp(240px, calc(610 / var(--spaciefy-artboard) * 100vw), 610px);
	}
}

/* ---------------------------------------------------------------------------
 * Tablet — two columns.
 *
 * Previously the grid went straight from 3 columns to 1 at 992px, which left
 * 1024px rendering three ~310px columns against a much taller min-height.
 * ------------------------------------------------------------------------- */

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

	.sp-work-grid__item--variant-large,
	.sp-work-grid__item--variant-full {
		grid-column: span 2;
	}

	.sp-work-grid__item--variant-small {
		grid-column: span 1;
	}

	.sp-work-grid__item--variant-small .sp-work-grid__card,
	.sp-work-grid__item--variant-large .sp-work-grid__card,
	.sp-work-grid__item--variant-full .sp-work-grid__card {
		min-height: clamp(260px, 32vw, 480px);
	}
}

/* ---------------------------------------------------------------------------
 * Touch viewports — content is always visible rather than hover-revealed.
 *
 * The card's text and CTA are absolutely positioned for the desktop hover
 * treatment. Once both are permanently on screen that stacking causes long
 * titles and tag lists to run underneath the CTA, so the card becomes a flex
 * column and both children return to normal flow. The image, tint and overlay
 * stay absolute behind them.
 * ------------------------------------------------------------------------- */

@media (max-width: 992px) {
	.sp-work-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-work-grid__card {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		gap: var(--sp-work-card-content-pad);
		padding: var(--sp-work-card-content-pad);
	}

	.sp-work-grid__content {
		position: static;
		inset: auto;
		padding: 0;
		opacity: 1;
		transform: none;
		pointer-events: auto;
		justify-content: flex-end;
	}

	.sp-work-grid__cta {
		position: static;
		inset: auto;
		flex-wrap: wrap;
		opacity: 1;
		visibility: visible;
		transform: none;
		pointer-events: auto;
	}

	.sp-work-grid__overlay {
		opacity: 1;
	}
}

/* ---------------------------------------------------------------------------
 * Mobile — single column.
 * ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * Mobile — single column, and the card stops being an overlay.
 *
 * The mobile design reads the card as an image with a caption underneath
 * rather than text floating over artwork: media on top at roughly 1:1, then
 * title, category pills and description on the section background. The
 * per-card CTA is hidden on the Our Works archive; cards on the homepage
 * selected-work section keep their own mobile treatment.
 * ------------------------------------------------------------------------- */

@media (max-width: 768px) {
	:root {
		--sp-work-tab-gap: clamp(24px, 6vw, 32px);
		--sp-work-hero-title-grid-gap: clamp(28px, 7vw, 40px);
	}

	.sp-work-hero__header {
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 0;
	}

	.sp-work-hero__tabs {
		position: sticky;
		top: 0;
		z-index: 90;
		justify-content: flex-start;
		width: 100%;
		margin-bottom: clamp(32px, 8vw, 48px);
		padding-top: clamp(20px, 5vw, 28px);
		padding-bottom: clamp(18px, 4.5vw, 26px);
		background-color: var(--spaciefy-black);
		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;
		gap: var(--sp-work-tab-gap);
		scroll-padding-inline: var(--spaciefy-container-pad-x);
	}

	.sp-work-hero__tab {
		display: inline-flex;
		align-items: center;
		min-height: var(--sp-tap-min);
		padding: clamp(10px, 2.5vw, 14px) 0;
	}

	/* Caption metrics from the 402px artboard, growing to the 768px boundary. */
	.sp-work-grid__list {
		--sp-work-card-caption-gap: clamp(24px, calc(1.4207vw + 20.29px), 31.2px);
		--sp-work-card-title-size: clamp(26px, calc(1.5301vw + 21.85px), 33.6px);
		--sp-work-card-title-lh: 1.28;
		--sp-work-card-title-bottom: clamp(12px, calc(0.765vw + 10.93px), 16.8px);
		--sp-work-card-tags-bottom: clamp(12px, calc(0.765vw + 10.93px), 16.8px);
		--sp-work-card-tag-gap: clamp(10px, calc(0.7103vw + 10.15px), 15.6px);
		--sp-work-card-tag-size: clamp(12px, calc(0.6557vw + 9.36px), 14.4px);
		--sp-work-card-tag-pad-y: clamp(7px, calc(0.4644vw + 6.63px), 10.2px);
		--sp-work-card-tag-pad-x: clamp(12px, calc(0.7376vw + 10.53px), 16.2px);
		--sp-work-card-text-size: clamp(12px, calc(0.7103vw + 10.15px), 15.6px);
		--sp-work-card-text-lh: 1.6;

		grid-template-columns: 1fr;
		gap: clamp(40px, calc(2.1858vw + 31.21px), 48px);
	}

	.sp-work-grid__item--variant-small,
	.sp-work-grid__item--variant-large,
	.sp-work-grid__item--variant-full {
		grid-column: span 1;
	}

	.sp-work-grid__item--variant-small .sp-work-grid__card,
	.sp-work-grid__item--variant-large .sp-work-grid__card,
	.sp-work-grid__item--variant-full .sp-work-grid__card,
	.sp-work-grid__card {
		position: relative;
		display: flex;
		flex-direction: column;
		height: auto;
		min-height: 0;
		gap: var(--sp-work-card-caption-gap);
		padding: 0;
		border-radius: 0;
		background-color: transparent;
	}

	.sp-work-grid__card::before {
		display: none;
	}

	.sp-work-grid__media {
		position: static;
		inset: auto;
		width: 100%;
		height: auto;
		aspect-ratio: 358 / 367;
		border-radius: 12px;
	}

	.sp-work-grid__overlay {
		display: none;
	}

	.sp-work-grid__content {
		position: static;
		inset: auto;
		display: flex;
		flex-direction: column;
		padding: 0;
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}

	/* Markup order is title, description, tags; the design shows the pills
	   between the title and the description. */
	.sp-work-grid__tags {
		order: 1;
		gap: var(--sp-work-card-tag-gap);
		margin: 0 0 var(--sp-work-card-tags-bottom);
	}

	.sp-work-grid__text {
		order: 2;
		max-width: none;
		margin: 0;
		opacity: 0.7;
	}

	/* Pills are neutral on the dark section rather than brand yellow. */
	.sp-work-grid__tag {
		border-radius: 6px;
		color: #ffffff;
		background-color: rgba(255, 255, 255, 0.12);
	}

	.site-main--work .sp-work-grid__entry .sp-work-grid__cta {
		display: none;
	}

	.site-main--work .sp-work-grid__link {
		display: block;
	}

	.site-main--work .sp-work-grid__entry {
		cursor: pointer;
	}
}