/* ==========================================================================
   Otherwise — homepage
   ========================================================================== */

/* ---- Section 3 / 6 — editorial breaks ------------------------------------ */

.ow-home-editorial-2 .ow-editorial__body {
	min-height: clamp(440px, 72vh, 780px);
}

/* ---- Section 4 — featured drop ------------------------------------------- */

.ow-featured {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	grid-template-areas:
		"intro media"
		"products products";
	gap: clamp(1.5rem, 3vw, 3rem) clamp(2rem, 4vw, 4rem);
	/* Content-driven: the intro row is only ever as tall as the taller of the
	   two columns, and both are centred against each other. */
	align-items: center;
}

.ow-featured__intro {
	grid-area: intro;
}

.ow-featured__title { margin-bottom: var(--ow-space-5); }
.ow-featured__intro .ow-lead { margin-bottom: var(--ow-space-6); }

/* No vertical nudge: the image is landscape and vertically centred against the
   copy, so offsetting it only reopens dead space under one column or the other. */
.ow-featured__media {
	grid-area: media;
	position: relative;
}

.ow-featured__products { grid-area: products; }

.ow-featured__products .ow-grid-products {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
	.ow-featured {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"intro"
			"media"
			"products";
	}

	.ow-featured__products .ow-grid-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Section 5 — custom tee feature -------------------------------------- */

.ow-home-custom {
	background: var(--ow-surface);
	border-block: var(--ow-hairline);
	overflow: hidden;
}

.ow-custom-feature {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}

.ow-custom-feature__title { margin-bottom: var(--ow-space-5); }
.ow-custom-feature .ow-lead { margin-bottom: var(--ow-space-6); }

.ow-custom-feature__media { position: relative; }

.ow-doodle--arrow {
	width: clamp(72px, 9vw, 120px);
	top: -3%;
	left: -5%;
	transform: rotate(-8deg);
}

.ow-doodle--star {
	width: clamp(34px, 4vw, 58px);
	right: -3%;
	bottom: 8%;
	transform: rotate(12deg);
}

@media (max-width: 900px) {
	.ow-custom-feature { grid-template-columns: minmax(0, 1fr); }

	/* Stacked, the image would otherwise land under the CTAs and read as an
	   afterthought. Leading with it matches the desktop pairing, where the
	   picture sits alongside the pitch rather than after it. */
	.ow-custom-feature__media {
		order: -1;
		margin-bottom: var(--ow-space-6);
	}

	/* Now that nothing sits above the image, the arrow has to point from
	   inside the frame instead of hanging off the top of the section. */
	.ow-doodle--arrow { left: auto; right: 4%; top: 4%; }
}

/* ---- Section 9 — community grid ------------------------------------------ */

/* The statement and the community grid are both pure background, so without a
   rule here the two run together as one black mass. Every other seam on the
   page is already carried by a photo edge, a surface change or the marquee. */
.ow-community {
	border-top: var(--ow-hairline);
}

/* A straight editorial wall: six equal 16:9 tiles, three up. The earlier
   mosaic gave two tiles a square/2:1 crop, which is where the dead space came
   from — the source photography is 16:9, so anything else left the tile taller
   than the picture it held. */
.ow-community__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(0.75rem, 1.1vw, 1.25rem);
}

.ow-community__tile .ow-slot { aspect-ratio: 16 / 9; }

@media (max-width: 860px) {
	.ow-community__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* One up on phones: two 16:9 tiles across a 375px screen would land at roughly
   175x98, too small for the photography to carry anything. */
@media (max-width: 560px) {
	.ow-community__grid { grid-template-columns: minmax(0, 1fr); }
}