/* ──────────────────────────────────────────────────────────────
   Our Services page (page-our-services.php)
   Depends on product-lister.css + fabrics-materials.css for the
   reused ac/fm-hero block styling (--ac-* vars, .ac-fm-hero etc.),
   auto-loaded by ac_plp_assets() whenever the page contains that
   block. This file only sizes the page's own wrapper.
   ────────────────────────────────────────────────────────────── */

.ac-our-services {
	flex        : 1 1 100%;   /* fill Astra's flex .ast-container, same fix as .ac-blog-page */
	width       : 100%;
	min-width   : 0;
	--ac-green  : #E3E8D6;
}

/* Astra's WooCommerce compatibility CSS sets .woocommerce-js h2 { margin-bottom: .7em },
   which otherwise adds unwanted space under every h2 on this page. Scoped
   here rather than touching the parent theme file. */
.ac-our-services h2 { margin-bottom: 0 !important; }

/* Misty Green hover fill — border stays Charcoal Black, only the fill + text
   swap (per Figma "Type=Primary, State=Hover"), same treatment as the
   homepage (homepage.css) and product page (product-single.css). Scoped to
   .ac-our-services so it doesn't affect other pages using the shared
   product-lister.css .ac-btn--dark:hover (plain opacity fade). */
.ac-our-services .ac-btn { transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.ac-our-services .ac-btn--dark:hover {
	background   : var(--ac-green);
	color        : var(--ac-dark) !important;
	border-color : var(--ac-dark);
	opacity      : 1;
}

/* ── Feature split (image gallery + text) ───────────────────────
   Repeats per service (Sofas, Rugs, Wood Furniture, Trade Program).
   Fluid throughout: fr-based grid, aspect-ratio images, clamp() for
   spacing that needs to scale between breakpoints. */
.ac-os-feature {
	display               : grid;
	grid-template-columns : 1fr 1fr;
	gap                   : clamp(24px, 3.5vw, 50px);
	padding               : clamp(40px, 6vw, 60px) clamp(20px, 11vw, 160px);
	background            : var(--ac-cream);
	align-items           : center;
}

.ac-os-feature--reverse { grid-template-columns : 1fr 1fr; }
.ac-os-feature--reverse .ac-os-feature-media { order : 2; }
.ac-os-feature--reverse .ac-os-feature-text  { order : 1; }

.ac-os-feature-media {
	display        : flex;
	flex-direction : column;
	gap            : clamp(10px, 1.5vw, 20px);
	width          : 100%;
}

.ac-os-feature-main {
	width               : 100%;
	aspect-ratio        : 47 / 36;
	background-size     : cover;
	background-position : center;
	background-color    : #ddd;
}

.ac-os-feature-thumbs {
	display : flex;
	gap     : clamp(10px, 1.5vw, 20px);
}

.ac-os-feature-thumb {
	flex                : 1 1 0;
	aspect-ratio        : 15 / 13;
	background-size     : cover;
	background-position : center;
	background-color    : #ddd;
}

.ac-os-feature-text {
	display        : flex;
	flex-direction : column;
	align-items    : flex-start;
	gap            : clamp(20px, 2.5vw, 30px);
	width          : 100%;
}

.ac-os-feature-title {
	font-family : var(--ac-font-h);
	font-size   : var(--ac-h3-size);
	font-weight : 700;
	line-height : var(--ac-h3-lh);
	color       : var(--ac-dark);
	margin      : 0;
}

.ac-os-feature-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-dark);
	margin      : 0;
}

.ac-os-feature-list {
	list-style     : none;
	margin         : 0;
	padding        : 0;
	display        : flex;
	flex-direction : column;
	gap            : 10px;
}

.ac-os-feature-item {
	display     : flex;
	align-items : center;
	gap         : 10px;
	font-family : var(--ac-font-b);
	font-size   : var(--ac-h5-size);
	font-weight : 500;
	color       : var(--ac-dark);
}

.ac-os-feature-check {
	flex-shrink : 0;
	width       : 25px;
	height      : 25px;
}

@media (max-width: 768px) {
	.ac-os-feature, .ac-os-feature--reverse {
		grid-template-columns : 1fr;
		padding               : 32px 16px;
	}
	/* Text first, image below — regardless of the desktop reverse setting. */
	.ac-os-feature-text  { order : 1; }
	.ac-os-feature-media { order : 2; }
	.ac-os-feature-main  { aspect-ratio : 36 / 36; }
	.ac-os-feature-thumb { aspect-ratio : 14 / 13; }
}

/* ── Fabric Kit promo (dark banner: text + checklist row + image) ── */
.ac-os-promo {
	display         : flex;
	flex-wrap       : wrap;
	justify-content : center;
	align-items     : center;
	gap             : clamp(24px, 3.5vw, 50px);
	padding         : clamp(40px, 6vw, 60px) clamp(20px, 11vw, 160px);
	background      : var(--ac-dark);
}

.ac-os-promo-text {
	display        : flex;
	flex-direction : column;
	align-items    : center;
	text-align     : center;
	gap            : clamp(20px, 2.5vw, 40px);
	flex           : 1 1 45%;
	max-width      : 650px;
}

/* .ac-btn defaults to align-self: flex-start (product-lister.css), so it
   needs an explicit override to center inside this text block. */
.ac-os-promo-text .ac-btn { align-self: center; }

.ac-os-promo-title {
	font-family : var(--ac-font-h);
	font-size   : var(--ac-h3-size);
	font-weight : 700;
	line-height : var(--ac-h3-lh);
	color       : var(--ac-cream);
	margin      : 0;
}

.ac-os-promo-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-os-promo-list {
	list-style      : none;
	margin          : 0;
	padding         : 0;
	display         : flex;
	flex-wrap       : wrap;
	justify-content : center;
	gap             : clamp(16px, 2vw, 20px);
}

.ac-os-promo-item {
	display     : flex;
	align-items : center;
	gap         : 10px;
	font-family : var(--ac-font-b);
	font-size   : var(--ac-h5-size);
	font-weight : 500;
	color       : var(--ac-cream);
	white-space : nowrap;
}

.ac-os-promo-check {
	flex-shrink : 0;
	width       : 25px;
	height      : 25px;
}

.ac-os-promo-media {
	flex                : 0 1 27%;
	max-width           : 350px;
	aspect-ratio        : 35 / 40;
	background-size     : cover;
	background-position : center;
	background-color    : #333;
}

@media (max-width: 768px) {
	.ac-os-promo { padding: 32px 16px; }
	.ac-os-promo-media { flex: 1 1 100%; max-width: 100%; order: 1; }
	.ac-os-promo-list { flex-direction: column; align-items: center; }
}

/* ── Browse Example Set Ups bar (identical to homepage.css .ac-home-browse-bar) ── */
.ac-home-browse-bar {
	display         : flex;
	align-items     : center;
	justify-content : space-between;
	gap             : 20px;
	padding         : 20px;
	background      : var(--ac-dark);
}

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

@media (max-width: 768px) {
	.ac-home-browse-bar       { flex-direction: column; align-items: flex-start; padding: 16px; gap: 12px; }
	.ac-home-browse-bar-title { font-size: 16px; line-height: 20px; }
	.ac-home-browse-bar .ac-btn { flex-shrink: 0; padding-left: 14px; padding-right: 14px; white-space: nowrap; }
}

/* ── Built From the Finest Materials (identical to homepage.css .ac-home-materials*) ── */
.ac-our-services .ac-home-materials {
	display        : flex;
	flex-direction : column;
	align-items    : center;
	gap            : 32px;
	padding        : clamp(40px, 8vw, 80px) clamp(20px, 8vw, 160px) 60px;
	background     : var(--ac-sand);
}

.ac-our-services .ac-home-materials-title {
	font-family : var(--ac-font-h);
	font-weight : 700;
	font-size   : var(--ac-h2-size);
	line-height : var(--ac-h2-lh);
	color       : var(--ac-dark);
	text-align  : center;
	margin      : 0;
}

.ac-our-services .ac-home-materials-grid {
	display               : grid;
	grid-template-columns : repeat(3, 1fr);
	gap                   : 24px;
	width                 : 100%;
	max-width             : 1120px;
}

.ac-our-services .ac-home-material {
	display         : flex;
	flex-direction  : column;
	align-items     : center;
	gap             : 18px;
	padding         : 20px 24px;
	text-align      : center;
}

.ac-our-services .ac-home-material-icon { width: 75px; height: 75px; display: flex; align-items: center; justify-content: center; }
.ac-our-services .ac-home-material-icon svg { width: 100%; height: 100%; }

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

.ac-our-services .ac-home-material-desc {
	font-family : var(--ac-font-b);
	font-size   : 16px;
	line-height : 26px;
	color       : rgba(43,42,41,0.68);
	margin      : 0;
}

@media (max-width: 768px) {
	.ac-our-services .ac-home-materials       { padding: 60px 16px 24px; gap: 40px; background: var(--ac-cream); }
	.ac-our-services .ac-home-materials-title { font-size: 24px; line-height: 32px; }
	.ac-our-services .ac-home-materials-grid  {
		display               : flex;
		flex-direction         : column;
		grid-template-columns  : none;
		gap                    : 6px;
	}
	.ac-our-services .ac-home-material {
		display               : grid;
		grid-template-columns : 44px 1fr;
		column-gap            : 16px;
		row-gap               : 6px;
		align-items           : center;
		text-align            : left;
		padding               : 24px 16px;
		background            : var(--ac-sand);
	}
	.ac-our-services .ac-home-material-icon  { grid-column: 1; grid-row: 1 / 3; width: 44px; height: 44px; flex-shrink: 0; }
	.ac-our-services .ac-home-material-title { grid-column: 2; grid-row: 1; font-size: 20px; line-height: 30px; }
	.ac-our-services .ac-home-material-desc  { grid-column: 2; grid-row: 2; font-size: 16px; line-height: 21px; }
}