/* ──────────────────────────────────────────────────────────────
   Fabrics & Materials page (page-fabrics-materials.php)
   Depends on product-lister.css for --ac-* vars, .ac-signposts,
   .ac-btn, .ac-outdoor-banner, .ac-faq etc.
   Uses %/vh/fr/clamp() so sections stay fluid on resize rather
   than snapping at fixed breakpoints.
   ────────────────────────────────────────────────────────────── */

.ac-fm-hero {
	position            : relative;
	min-height          : 40vh;
	display             : flex;
	align-items         : center;
	justify-content     : center;
	background-size     : cover;
	background-position : center;
	background-color    : #555;
	overflow            : hidden;
}

.ac-fm-hero-overlay {
	position   : absolute;
	inset      : 0;
	background : linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
	             radial-gradient(circle, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
}

.ac-fm-hero-inner {
	position       : relative;
	z-index        : 1;
	display        : flex;
	flex-direction : column;
	align-items    : center;
	gap            : 32px;
	width          : 90%;
	max-width      : 800px;
	padding        : 8% 5%;
	text-align     : center;
}

.ac-fm-hero-inner .ac-btn { align-self: center; }

.ac-fm-hero-title {
	font-family : var(--ac-font-h);
	font-size   : clamp(32px, 4vw, 48px);
	font-weight : 700;
	line-height : 1.2;
	color       : var(--ac-cream);
	margin      : 0;
}

.ac-fm-hero-desc {
	font-family : var(--ac-font-b);
	font-size   : var(--ac-h5-size);
	font-weight : 500;
	line-height : var(--ac-h5-lh);
	color       : var(--ac-cream);
	margin      : 0;
}

.ac-fm-intro {
	padding    : 3.5vw 8%;
	background : var(--ac-cream);
	text-align : center;
}

.ac-fm-intro--premium-materials { padding-top: 80px; }
.ac-fm-intro--usp-band          { padding-top: 40px; padding-bottom: 0; }

.ac-fm-heading {
	font-family    : var(--ac-font-h);
	font-size      : var(--ac-h1-size);
	font-weight    : 700;
	line-height    : var(--ac-h1-lh);
	letter-spacing : var(--ac-ls-h);
	color          : var(--ac-dark);
	margin         : 0;
}

.ac-fm-subtext {
	font-family : var(--ac-font-b);
	font-size   : var(--ac-h5-size);
	line-height : var(--ac-h5-lh);
	color       : var(--ac-dark) !important;
	width       : 90%;
	max-width   : 800px;
	margin      : 16px auto 0 !important;
	text-align  : center !important;
}

/* ── Alternating tall/short tile grid, used for "Curated Upholstery
   Materials" and "Premium Materials in Every Detail". Built to match
   the Figma export directly (bottom-left text, bottom-right button,
   alternating 460/364 tile heights) rather than the generic 3-up
   .ac-signposts component, using aspect-ratio instead of fixed px
   heights so it stays fluid on resize. */
.ac-fm-tiles {
	display         : flex;
	flex-direction  : row;
	background      : rgb(237, 234, 233);
}

.ac-fm-tiles-col {
	display        : flex;
	flex-direction : column;
	flex           : 1 1 50%;
	min-width      : 0;
}

.ac-fm-tile {
	position            : relative;
	overflow            : hidden;
	background-size     : cover;
	background-position : center;
	background-color    : #555;
	border-top          : 1px solid var(--ac-cream);
}

.ac-fm-tiles-col + .ac-fm-tiles-col .ac-fm-tile { border-left: 1px solid var(--ac-cream); }

.ac-fm-tile--tall  { aspect-ratio: 720 / 460; }
.ac-fm-tile--short { aspect-ratio: 720 / 364; }

.ac-fm-tile-overlay {
	position   : absolute;
	inset      : 0;
	background : linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.65) 82%);
}

.ac-fm-tile-body {
	position        : absolute;
	left            : 5%;
	right           : 5%;
	bottom          : 6%;
	display         : flex;
	flex-direction  : row;
	justify-content : space-between;
	align-items     : flex-end;
	gap             : 16px;
}

.ac-fm-tile-text {
	display        : flex;
	flex-direction : column;
	gap            : 6px;
	min-width      : 0;
}

.ac-fm-tile-title {
	font-family : var(--ac-font-h);
	font-size   : 24px;
	font-weight : 600;
	line-height : 29px;
	color       : var(--ac-cream);
	margin      : 0;
}

.ac-fm-tile-desc {
	font-family : var(--ac-font-b);
	font-size   : var(--ac-h5-size);
	font-weight : 400;
	line-height : var(--ac-h5-lh);
	color       : var(--ac-cream);
	margin      : 0;
}

.ac-fm-tile-body .ac-btn { flex-shrink: 0; }

/* ── Fabric collection cards ─────────────────────────────────── */
.ac-fm-collections {
	display               : grid;
	grid-template-columns : repeat(3, 1fr);
	gap                   : 24px;
	padding               : 0% 6% 50px;
	background            : var(--ac-cream);
}

@media (max-width: 900px) {
	.ac-fm-collections { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.ac-fm-collections { grid-template-columns: 1fr; }
}

.ac-fm-card {
	display        : flex;
	flex-direction : column;
	align-items    : center;
	gap            : 24px;
	padding-bottom : 24px;
	background     : var(--ac-sand);
	text-align     : center;
}

.ac-fm-card-img {
	width           : 100%;
	height          : clamp(200px, 22vw, 300px);
	background-size : cover;
	background-position: center;
	background-color: #555;
}

.ac-fm-card-body {
	display        : flex;
	flex-direction : column;
	gap            : 24px;
	padding        : 0 24px;
	align-items    : center;
	width          : 100%;
}

.ac-fm-card-body .ac-btn { align-self: center !important; }

.ac-fm-card-title {
	font-family : var(--ac-font-h);
	font-size   : 24px;
	font-weight : 600;
	line-height : 29px;
	color       : var(--ac-dark);
	margin      : 0;
}

.ac-fm-card-desc {
	font-family : var(--ac-font-b);
	font-size   : var(--ac-h5-size);
	font-weight : 400;
	line-height : var(--ac-h5-lh);
	color       : rgba(43, 42, 41, 0.68);
	margin      : 0;
}

/* ── Light (cream) USP band, reused for the small "Beautiful /
   Durable / Comfortable" trio and the two wide swatch CTAs below it.
   Both bands share a 6-column grid (each card's render_callback sets
   `grid-column: span N` so 3 items = 1/3 width each, 2 items = 1/2
   width each) so the two rows line up edge-to-edge like the Figma
   export, and the adjacent-sibling rule below collapses the vertical
   gap between the two bands down to the same 24px as the column gap. */
.ac-fm-usp-band {
	display                : grid;
	grid-template-columns  : repeat(6, 1fr);
	gap                    : 24px;
	padding                : 2% 4% 0;
	background             : var(--ac-cream);
}

.ac-fm-usp-band:last-of-type { padding-bottom: 6%; padding-top: 50px; }

.ac-fm-usp-band + .ac-fm-usp-band {
	padding-top : 0;
	margin-top  : 24px;
}

.ac-fm-usp-card {
	display        : flex;
	flex-direction : column;
	align-items    : center;
	text-align     : center;
	gap            : 24px;
	min-width      : 0;
	padding        : 24px 32px 43px;
	background     : var(--ac-sand);
}

.ac-fm-usp-icon {
	width  : 75px;
	height : 75px;
	max-width: 20%;
}
.ac-fm-usp-icon svg { width: 100%; height: 100%; }

.ac-fm-usp-title {
	font-family : var(--ac-font-h);
	font-size   : 24px;
	font-weight : 600;
	line-height : 29px;
	color       : var(--ac-dark);
	margin      : 0;
}

.ac-fm-usp-desc {
	font-family : var(--ac-font-b);
	font-size   : var(--ac-h5-size);
	font-weight : 400;
	line-height : 26px;
	color       : rgba(43, 42, 41, 0.68);
	max-width   : 90%;
	margin      : 0;
}

.ac-fm-usp-card .ac-btn { align-self: center !important; margin-top: 4px; }

@media (max-width: 900px) {
	.ac-fm-intro     { padding: 6.5vw 3%; }
	.ac-fm-intro--premium-materials { padding-top: 13vw; }
	.ac-fm-heading   { font-size: 24px; line-height: 32px; }
	.ac-fm-tiles     { flex-direction: column; }
	.ac-fm-tiles-col + .ac-fm-tiles-col .ac-fm-tile { border-left: none; }
	.ac-fm-tile--tall, .ac-fm-tile--short { aspect-ratio: 4 / 3; }
	.ac-fm-tile-title { font-size: 20px; line-height: 26px; }
	.ac-fm-tile-desc  { font-size: 14px; line-height: 19px; }
	.ac-fm-tile-body  { flex-direction: column; align-items: flex-start; gap: 12px; }
	.ac-fm-usp-band + .ac-fm-usp-band { margin-top: 8px; }
	.ac-fm-usp-band:last-of-type { padding-bottom: 40px; padding-top: 0; }

	/* Match the mobile Figma export: icon-left, text-left "stacked" rows
	   on a sand background instead of the desktop's centered card, and
	   no button (the mobile design drops the CTA for this band). */
	/* !important: a 6-item band (Service page) gets an inline
	   grid-template-columns:repeat(3,1fr) from render_callback for its
	   desktop 2x3 layout — inline styles beat a plain class rule regardless
	   of media query, so this needs !important to actually win back to a
	   single full-width column on mobile. */
	.ac-fm-usp-band  { grid-template-columns: 1fr !important; gap: 8px; }
	.ac-fm-usp-card  {
		grid-column           : span 1 !important;
		width                 : 100%;
		max-width             : 100%;
		display               : grid;
		grid-template-columns : 44px 1fr;
		grid-template-rows    : auto auto;
		align-items           : start;
		text-align            : left;
		column-gap            : 16px;
		row-gap               : 4px;
		padding               : 24px 16px;
	}
	.ac-fm-usp-icon  { grid-column: 1; grid-row: 1 / 3; width: 44px; height: 44px; max-width: none; flex-shrink: 0; }
	.ac-fm-usp-title, .ac-fm-usp-desc { grid-column: 2; }
	.ac-fm-usp-title { font-size: 20px; line-height: 30px; text-align: left; }
	.ac-fm-usp-desc  { font-size: 16px; line-height: 21px; text-align: left; max-width: none; }
	.ac-fm-usp-card .ac-btn { display: none; }
}

@media (max-width: 600px) {
	.ac-fm-card-img   { height: 300px; }
	.ac-fm-card-title { font-size: 20px; line-height: 30px; }
	.ac-fm-card-desc  { font-size: 16px; line-height: 21px; }
}