/* =============================================================================
   Homepage (flexible template) overrides — Asana feedback (Mark, 2026-09-07)
   Scoped to .page-template-page-flexible so only the new homepage is affected.
   ============================================================================= */

/* ── 1. Consistent heading sizes ─────────────────────────────────────────────
   The H1 "Leading Tile Specialist…" uses .custom-h1-after-banner, which had no
   CSS, so it fell back to the 77px base <h1> — larger than the 34–40px section
   headings. Normalise the H1, the section headings and the Design Hub / Tile
   Visualiser headings (h3.custom-h3-white) to one consistent size. */
.page-template-page-flexible h1.custom-h1-after-banner,
.page-template-page-flexible .collections-carousel__heading,
.page-template-page-flexible .style-grid__heading,
.page-template-page-flexible .showroom-locator__heading,
.page-template-page-flexible .custom-h3-white {
	font-size: 34px;
	line-height: 1.25;
}

@media (min-width: 960px) {
	.page-template-page-flexible h1.custom-h1-after-banner,
	.page-template-page-flexible .collections-carousel__heading,
	.page-template-page-flexible .style-grid__heading,
	.page-template-page-flexible .showroom-locator__heading,
	.page-template-page-flexible .custom-h3-white {
		font-size: 40px;
	}
}

/* ── 2. Consistent, tighter spacing between ALL sections ─────────────────────
   Every flexible section gets the same vertical padding so the gaps are uniform
   and smaller. Covers the section-padding utility classes (tb / top / bottom —
   e.g. Tile Visualiser used top-only) and the per-block carousels/grids.
   Section rhythm was 100px (.section-padding-tb) / 88px (per-block). */
.page-template-page-flexible .section-padding-tb,
.page-template-page-flexible .section-padding-top,
.page-template-page-flexible .section-padding-bottom,
.page-template-page-flexible .collections-carousel,
.page-template-page-flexible .style-grid,
.page-template-page-flexible .trending-products,
.page-template-page-flexible .on-sale-carousel,
.page-template-page-flexible .featured-carousel,
.page-template-page-flexible .contact-section,
.page-template-page-flexible .testimonial-carousel {
	padding-top: 40px !important;
	padding-bottom: 40px !important;
}

@media (max-width: 800px) {
	.page-template-page-flexible .section-padding-tb,
	.page-template-page-flexible .section-padding-top,
	.page-template-page-flexible .section-padding-bottom,
	.page-template-page-flexible .collections-carousel,
	.page-template-page-flexible .style-grid,
	.page-template-page-flexible .trending-products,
	.page-template-page-flexible .on-sale-carousel,
	.page-template-page-flexible .featured-carousel,
	.page-template-page-flexible .contact-section,
	.page-template-page-flexible .testimonial-carousel {
		padding-top: 28px !important;
		padding-bottom: 28px !important;
	}
}

/* ── 3. Get Inspired: full-width cards below 640px ───────────────────────────
   Below the 2-up carousel breakpoint the single project cards should span the
   full screen width — drop the container side padding so they go edge to edge. */
@media (max-width: 639px) {
	.page-template-page-flexible .flexible-projects .grid-container {
		padding-left: 0;
		padding-right: 0;
	}
}

/* ── 4. Project cards: consistent light-grey border ──────────────────────────
   A dark border was appearing on one/two project cards at some widths. Force the
   light-grey border in every state, and replace any dark focus ring with a
   subtle grey one (keeps keyboard focus visible without the black outline). */
.page-template-page-flexible .flexible-projects .card-2 {
	border: 1px solid #f4f4f4 !important;
}

.page-template-page-flexible .flexible-projects .card-2-outer a:focus,
.page-template-page-flexible .flexible-projects .card-2-outer a:active {
	outline: none;
}

.page-template-page-flexible .flexible-projects .card-2-outer a:focus-visible {
	outline: 2px solid #cfcfcf;
	outline-offset: 2px;
}