/* =============================================================
   ABOUT US — css/about-us.css
   -------------------------------------------------------------
   PORTING-MAP §E, E2. Decision: **restyle**.

   Rewriting was ruled out: the page carries hand-written JSON-LD
   in its content (Organization, Service ×3, Offer ×3, Brand ×5,
   GeoCircle, PostalAddress). Rewriting in the block editor would
   delete that structured data silently — INSTRUCTIONS.md §6.

   A verbatim port was ruled out too, for two reasons:
   1. v1's file is built on #0073aa / #00838f / #001e3c and
      Poppins, all retired by the mockup palette (§5).
   2. Its first 25 lines are GeneratePress plumbing —
      `.inside-article`, `#content > .inside-content-area`,
      `.site.grid-container` — elements this theme never renders.
      They are dropped, not translated: `page.php` puts no width
      or padding on `.entry-content` at all, so the full-bleed
      hero works without any override.

   Card and section language follows `_mockup/WOW Supplies
   About.dc.html`: 1px hairline borders and 18–22px radii instead
   of v1's drop shadows, and one white page instead of v1's
   white / grey banding.

   **The hero photo is set inline in the page content**
   (`Hero-aboutus-page.webp` as a `background-image` on
   `.about-hero`). An inline style beats any stylesheet, so the
   photo cannot be swapped or removed from CSS — only scrimmed.

   **The scrim is now light, not dark.** v1 put white text over a
   navy-teal wash. The mockup's Contact hero and this theme's
   homepage hero (style.css §9) both ramp white in from the left
   and keep the copy in ink, so the same treatment is used here:
   one hero pattern across the site rather than two. The copy
   moves from centred to left-aligned to sit inside the ramp.
   css/contact-us.css §1 is the twin of this block.

   0. Page container   1. Hero            2. Company intro
   3. What we do       4. Our products    5. Showroom gallery
   6. Responsive
   ============================================================= */


/* ==============================================
   0. PAGE CONTAINER
   ============================================== */

/* The content supplies its own <h1> in .about-hero-inner. */
.entry-header {
	display: none;
}

.entry-content > p:empty {
	display: none;
	margin: 0;
	padding: 0;
}

.about-section-inner {
	max-width: var(--wows-container);
	margin: 0 auto;
	padding: 0 var(--wows-gutter);
}


/* ==============================================
   1. HERO
   ============================================== */
.about-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--wows-hero-min);
	overflow: hidden;
	/* Longhands, not the `background` shorthand: the inline style on the
	   section sets background-image and would override a shorthand's
	   image layer while leaving this colour stranded. */
	background-color: var(--wows-tint-1);
	background-size: cover;
	background-position: 70% 50%;
	background-repeat: no-repeat;
}

/*
 * The scrim ramps in px, not %, as the mockup specifies — a percentage ramp
 * slides under the headline as the viewport narrows and the copy loses
 * contrast at mid widths. Same values as style.css §9 and contact-us.css §1.
 */
.about-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg,
			var(--wows-white) 0px,
			rgba(255, 255, 255, 0.96) calc(var(--wows-scrim-x) + 420px),
			rgba(255, 255, 255, 0.65) calc(var(--wows-scrim-x) + 620px),
			rgba(255, 255, 255, 0.15) calc(var(--wows-scrim-x) + 800px),
			rgba(255, 255, 255, 0) calc(var(--wows-scrim-x) + 960px));
}

.about-hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--wows-container);
	margin: 0 auto;
	padding: var(--wows-section-xl) var(--wows-gutter);
	animation: wows-rise .7s ease both;
}

/* The copy column, not the section: the scrim clears the left ~520px. */
.about-hero-inner > * {
	max-width: 560px;
}

.about-hero-inner h1 {
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-hero);
	font-weight: 700;
	line-height: var(--wows-lh-hero);
	letter-spacing: var(--wows-ls-hero);
	color: var(--wows-ink);
	margin: 0 0 var(--wows-sp-6);
	text-wrap: balance;
}

.about-hero-inner p {
	font-size: var(--wows-fs-lede);
	line-height: var(--wows-lh-lede);
	color: var(--wows-text);
	margin: 0;
}


/* ==============================================
   2. COMPANY INTRO
   ============================================== */
.about-intro-section {
	padding: var(--wows-section-xl) 0;
	background: var(--wows-white);
}

.about-intro-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: var(--wows-sp-10);
	align-items: start;
}

.about-intro-text h2 {
	position: relative;
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-section);
	font-weight: 700;
	line-height: var(--wows-lh-heading);
	letter-spacing: var(--wows-ls-h2);
	color: var(--wows-ink);
	margin: 0 0 var(--wows-sp-6);
	padding-bottom: var(--wows-sp-3);
}

/* v1's accent underline, kept: the mockup marks its section heads with an
   uppercase eyebrow, but there is no eyebrow element in the page content
   and adding one would mean editing the page in the DB. */
.about-intro-text h2::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 60px;
	height: 3px;
	background: var(--wows-accent);
	border-radius: var(--wows-r-pill);
}

.about-intro-text p {
	font-size: var(--wows-fs-md);
	line-height: var(--wows-lh-lede);
	color: var(--wows-text);
	margin: 0 0 var(--wows-sp-4);
}

.about-intro-text p:last-child {
	margin-bottom: 0;
}

.about-highlights {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wows-sp-2);
}

.about-highlights li {
	background: var(--wows-accent-tint-2);
	border-left: 2px solid var(--wows-accent);
	border-radius: 0 var(--wows-r-md) var(--wows-r-md) 0;
	padding: var(--wows-sp-5) var(--wows-sp-6);
}

/* Not every highlight has a <strong> label — some are a bare <span>. */
.about-highlights li strong {
	display: block;
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--wows-ls-eyebrow);
	color: var(--wows-ink);
	margin-bottom: 4px;
}

.about-highlights li span {
	font-size: var(--wows-fs-base);
	line-height: var(--wows-lh-body);
	color: var(--wows-text);
}


/* ==============================================
   3. WHAT WE DO — SERVICE CARDS
   ============================================== */
.about-services-section {
	padding: 0 0 var(--wows-section-xl);
	background: var(--wows-white);
}

.about-services-section h2,
.about-products-section h2,
.about-showroom-section h2 {
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-section);
	font-weight: 700;
	line-height: var(--wows-lh-heading);
	letter-spacing: var(--wows-ls-h2);
	color: var(--wows-ink);
	text-align: center;
	margin: 0 0 var(--wows-sp-4);
}

.about-services-grid {
	/* "What We Do" has no lede under its h2, so the grid carries the gap. */
	margin-top: var(--wows-sp-9);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wows-sp-5);
}

/* Mockup value card: hairline border, 18px radius, no shadow at rest. */
.about-service-card {
	background: var(--wows-white);
	border: 1px solid var(--wows-border);
	border-radius: var(--wows-r-lg);
	padding: var(--wows-sp-8);
	transition: border-color var(--wows-t-base), box-shadow var(--wows-t-base), transform var(--wows-t-base);
}

.about-service-card:hover {
	transform: translateY(-4px);
	border-color: var(--wows-border-hover);
	box-shadow: var(--wows-shadow-card);
}

/* The chip is the mockup's 46px accent-tint square. The emoji that used to
   sit in it comes from the page's post_content and is swapped for an inline
   SVG at render time — see wows_about_service_icons(). If that swap ever
   fails to match, the emoji renders here as it always did, which is why the
   font-size stays. */
.about-service-card .service-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: var(--wows-sp-5);
	background: var(--wows-accent-tint);
	border-radius: var(--wows-r-md);
	color: var(--wows-accent);
	font-size: var(--wows-fs-xl);
	line-height: 1;
}

.about-service-card .service-icon .wows-icon {
	width: 23px;
	height: 23px;
}

.about-service-card h3 {
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-lg);
	font-weight: 600;
	letter-spacing: var(--wows-ls-tight);
	color: var(--wows-ink);
	margin: 0 0 var(--wows-sp-1);
}

.about-service-card p {
	font-size: var(--wows-fs-base);
	line-height: var(--wows-lh-body);
	color: var(--wows-text);
	margin: 0;
}


/* ==============================================
   4. OUR PRODUCTS
   ============================================== */
.about-products-section {
	padding: 0 0 var(--wows-section-xl);
	background: var(--wows-white);
}

/* The section's own lede, not the ones inside the tag list. */
.about-products-section > .about-section-inner > p,
.about-showroom-section > .about-section-inner > p {
	text-align: center;
	font-size: var(--wows-fs-md);
	line-height: var(--wows-lh-lede);
	color: var(--wows-text);
	max-width: 760px;
	margin: 0 auto var(--wows-sp-9);
}

.about-products-tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wows-sp-2);
}

/* Real category links — these are internal links to live URLs, so they
   stay links and keep their href (INSTRUCTIONS.md §7). */
.about-products-tags a {
	display: inline-block;
	padding: var(--wows-sp-2) var(--wows-sp-6);
	background: var(--wows-surface-2);
	border: 1px solid var(--wows-border);
	border-radius: var(--wows-r-pill);
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-base);
	font-weight: 600;
	color: var(--wows-ink);
	text-decoration: none;
	transition: background var(--wows-t-base), color var(--wows-t-base),
		border-color var(--wows-t-base), transform var(--wows-t-base);
}

.about-products-tags a:hover {
	background: var(--wows-accent);
	border-color: var(--wows-accent);
	color: var(--wows-white);
	transform: translateY(-2px);
}


/* ==============================================
   5. SHOWROOM GALLERY
   ============================================== */
.about-showroom-section {
	padding: 0 0 var(--wows-section-xl);
	background: var(--wows-white);
}

.about-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wows-sp-5);
}

.about-gallery-item {
	position: relative;
	border-radius: var(--wows-r-lg);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--wows-surface);
	border: 1px solid var(--wows-border-soft);
}

.about-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--wows-t-slow);
}

.about-gallery-item:hover img {
	transform: scale(1.05);
}

/* First image is the feature tile — 2×2 of the 3-column grid. */
.about-gallery-item:first-child {
	grid-column: span 2;
	grid-row: span 2;
	aspect-ratio: auto;
}


/* ==============================================
   6. RESPONSIVE
   ----------------------------------------------
   Breakpoints are the theme's 1040 / 900 / 680,
   from _mockup/responsive mobile view version/.
   v1 used 900 / 768 / 480.
   ============================================== */
@media (max-width: 1040px) {
	/* The px-ramped scrim is tuned to a 1240px container; below that the
	   copy would start sitting on the photo. */
	.about-hero::before {
		background: linear-gradient(90deg,
				var(--wows-white) 0px,
				rgba(255, 255, 255, 0.95) 420px,
				rgba(255, 255, 255, 0.55) 600px,
				rgba(255, 255, 255, 0) 820px);
	}
}

@media (max-width: 900px) {
	/* Ramp flips vertical and the copy drops onto the lower part of the
	   photo — style.css §17's reasoning, mirrored in contact-us.css §6. */
	.about-hero {
		align-items: flex-end;
		min-height: 560px;
	}

	.about-hero::before {
		background: linear-gradient(180deg,
				rgba(255, 255, 255, 0) 0%,
				rgba(255, 255, 255, 0.06) 20%,
				rgba(255, 255, 255, 0.72) 32%,
				rgba(255, 255, 255, 0.97) 42%,
				var(--wows-white) 50%);
	}

	.about-hero-inner > * {
		max-width: none;
	}

	.about-intro-grid {
		grid-template-columns: 1fr;
		gap: var(--wows-sp-9);
	}

	.about-services-grid {
		grid-template-columns: 1fr;
		max-width: 460px;
		margin: 0 auto;
	}

	.about-gallery {
		grid-template-columns: repeat(2, 1fr);
	}

	.about-gallery-item:first-child {
		grid-column: span 2;
		grid-row: span 1;
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 680px) {
	.about-hero {
		min-height: 480px;
	}

	/* Px stops, not %, tuned to this fixed 480px height: the 900px block's
	   ramp reaches .97 opacity by 202px, but the H1 here (measured, not
	   guessed) starts at 199px — a 480px box left almost no clear photo
	   before the fade began. This keeps the same ~0.95 opacity at the H1's
	   199px top (so the text contrast the H1 colour was tuned against is
	   unchanged) but delays the ramp's start, so the photo reads clearly for
	   longer above it. */
	.about-hero::before {
		background: linear-gradient(180deg,
				rgba(255, 255, 255, 0) 0px,
				rgba(255, 255, 255, 0.10) 140px,
				rgba(255, 255, 255, 0.75) 175px,
				rgba(255, 255, 255, 0.94) 199px,
				var(--wows-white) 230px);
	}

	.about-hero-inner {
		padding-top: var(--wows-section);
		padding-bottom: var(--wows-section);
	}

	.about-intro-section {
		padding: var(--wows-section) 0;
	}

	.about-services-section,
	.about-products-section,
	.about-showroom-section {
		padding-bottom: var(--wows-section);
	}

	.about-gallery {
		grid-template-columns: 1fr;
	}

	.about-gallery-item:first-child {
		grid-column: span 1;
		aspect-ratio: 16 / 9;
	}
}


/* ==============================================
   7. MOCKUP SECTIONS (added 16 Aug 2026)
   ----------------------------------------------
   Three blocks Eddy asked for from
   `_mockup/WOW Supplies About.dc.html` that the
   live page never had: the dark stats strip, the
   brands panel, and the showroom + CTA row.

   Rendered by page-about-us.php around the page's
   own content, which is unchanged — so these use
   new `about-stat*` / `about-brands*` /
   `about-card*` names rather than extending the
   database's `about-*` classes above.
   ============================================== */

.about-section {
	padding-top: var(--wows-section-lg);
}


/* --- Stats strip ---------------------------------------- */

/* Full-bleed dark band directly under the hero, per the mockup. The
   accent left rule is the same device as the value band on the homepage
   and the Why Buy trust strip. */
.about-stats {
	background: var(--wows-ink);
	padding: var(--wows-section-sm) 0;
}

.about-stats__inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wows-sp-8);
}

.about-stat {
	border-left: 2px solid var(--wows-value-rule);
	padding-left: var(--wows-sp-5);
}

/* Clamped, not fixed: "Klang Valley" is four times the width of "5+" and
   a fixed 34px wraps it mid-tile at laptop widths. */
.about-stat__value {
	font-family: var(--wows-font-display);
	font-size: clamp(22px, 2.6vw, 34px);
	font-weight: 700;
	letter-spacing: var(--wows-ls-h2);
	line-height: 1.1;
	color: var(--wows-white);
}

.about-stat__label {
	margin-top: 4px;
	font-size: var(--wows-fs-sm);
	color: var(--wows-on-dark-body);
}


/* --- Brands panel --------------------------------------- */

.about-brands {
	border: 1px solid var(--wows-border);
	border-radius: var(--wows-r-xl);
	padding: var(--wows-sp-9);
}

.about-brands__head {
	margin-bottom: var(--wows-sp-7);
}

.about-brands__eyebrow {
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--wows-ls-eyebrow);
	color: var(--wows-accent);
	margin: 0 0 var(--wows-sp-2);
}

.about-brands__title {
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-section);
	font-weight: 700;
	line-height: var(--wows-lh-heading);
	letter-spacing: var(--wows-ls-h2);
	color: var(--wows-ink);
	margin: 0;
}

.about-brands__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--wows-sp-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Wordmarks as text, not logo files — the live site has no brand logo
   assets, and setting them in the display face reads as deliberate
   rather than as ten missing images. */
.about-brands__item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--wows-sp-6);
	background: var(--wows-surface-2);
	border: 1px solid var(--wows-border-soft);
	border-radius: var(--wows-r-md);
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-lg);
	font-weight: 600;
	color: var(--wows-text);
	text-align: center;
}


/* --- Showroom + CTA row --------------------------------- */

.about-closing {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wows-sp-5);
	padding-bottom: var(--wows-section-xl);
}

.about-card {
	border: 1px solid var(--wows-border);
	border-radius: var(--wows-r-xl);
	padding: var(--wows-sp-9);
}

.about-card__title,
.about-cta__title {
	font-family: var(--wows-font-display);
	font-weight: 700;
	letter-spacing: var(--wows-ls-tight);
	margin: 0 0 var(--wows-sp-5);
}

.about-card__title {
	font-size: var(--wows-fs-xl);
	color: var(--wows-ink);
}

.about-card__address,
.about-card__contact {
	font-style: normal;
	font-size: var(--wows-fs-md);
	line-height: 1.8;
	color: var(--wows-text);
	margin: 0;
}

.about-card__contact {
	margin-top: var(--wows-sp-2);
	font-weight: 600;
}

.about-card__contact a {
	color: var(--wows-ink);
	text-decoration: none;
}

.about-card__contact a:hover {
	text-decoration: underline;
}

.about-card__wa {
	color: var(--wows-accent-dark) !important;
}

.about-card__hours {
	list-style: none;
	margin: var(--wows-sp-5) 0 0;
	padding: 0;
}

.about-card__hours li {
	display: flex;
	justify-content: space-between;
	gap: var(--wows-sp-2);
	padding: var(--wows-sp-1) 0;
	border-bottom: 1px solid var(--wows-border-soft);
	font-size: var(--wows-fs-sm);
	color: var(--wows-text-muted);
}

.about-card__hours li:last-child {
	border-bottom: none;
}

.about-card__hours li span:last-child {
	font-weight: 600;
	color: var(--wows-ink);
	text-align: right;
}

.about-cta {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--wows-gradient-accent);
	border-radius: var(--wows-r-xl);
	padding: var(--wows-sp-9);
	color: var(--wows-white);
	box-shadow: var(--wows-shadow-accent);
}

.about-cta__title {
	font-size: var(--wows-fs-2xl);
	line-height: 1.15;
	color: var(--wows-white);
	margin-bottom: var(--wows-sp-2);
}

.about-cta__body {
	font-size: var(--wows-fs-md);
	line-height: var(--wows-lh-body);
	color: var(--wows-on-accent);
	margin: 0 0 var(--wows-sp-7);
}

.about-cta__actions {
	display: flex;
	gap: var(--wows-sp-2);
	flex-wrap: wrap;
}

.about-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--wows-sp-3) var(--wows-sp-7);
	border-radius: var(--wows-r-md);
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-md);
	font-weight: 600;
	text-decoration: none;
	transition: background var(--wows-t-base), color var(--wows-t-base);
}

.about-btn--light {
	background: var(--wows-white);
	color: var(--wows-accent-dark);
	font-weight: 700;
}

.about-btn--light:hover {
	background: var(--wows-white);
	color: var(--wows-accent-dark);
}

.about-btn--ghost {
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: var(--wows-white);
}

.about-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.24);
	color: var(--wows-white);
}


/* --- Responsive ----------------------------------------- */

@media (max-width: 1040px) {
	.about-brands__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 900px) {
	.about-stats__inner {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--wows-sp-7);
	}

	.about-brands__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.about-closing {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 680px) {
	.about-brands__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.about-brands,
	.about-card,
	.about-cta {
		padding: var(--wows-sp-7);
	}

	.about-closing {
		padding-bottom: var(--wows-section);
	}

	.about-btn {
		flex: 1 1 100%;
	}
}