/* ==========================================================================
   awards.css - Awards & Certifications section (the parent page and its child
   pages), linked from each page's <head> region, always AFTER about.css.
   aw- = shared/parent page rules, bh- = Belgard Hardscape Hero page (at the end).
   - The page wrapper carries both .about and .awards, so it inherits the
     About foundation from about.css: color tokens (--ab-*), h2 underline bar,
     h3 style, icon badges (.ab-ico), buttons (.ab-btn), text links (.ab-link),
     figure frame (.ab-fig), cards (.ab-card) and the CTA shell (.ab-cta).
     Only what is new for this page lives here (aw- prefix).
   - Layout follows the width of .about (container queries), so the same
     rules serve the desktop template and the phone/tablet template.
   ========================================================================== */

.aw-intro p + p { margin-top: 14px; }

/* at-a-glance highlight cards ------------------------------------------------ */
.about .aw-proof { display: grid; gap: 16px; }
.aw-proof li {
	display: grid;
	grid-template-columns: 52px 1fr;
	gap: 6px 16px;
	align-items: center;
	padding: 20px 22px;
	background: #fff;
	border: 1px solid var(--ab-line);
	border-top: 4px solid var(--ab-green);
	border-radius: var(--ab-r);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.aw-proof strong {
	color: var(--ab-forest);
	font: 1.375rem/1.15 'Londrina Solid', cursive;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.aw-proof p { grid-column: 1 / -1; margin: 6px 0 0; color: var(--ab-ink); font-size: .9375rem; line-height: 1.55; }

/* recognition rows: photo + text, stacked one under another ------------------- */
.aw-list { display: grid; gap: 20px; margin-top: 22px; }
.aw-item {
	display: grid;
	gap: 16px;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--ab-line);
	border-left: 4px solid var(--ab-green);
	border-radius: var(--ab-r);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.aw-item > * { min-width: 0; }
.aw-fig { max-width: 420px; }
.aw-fig a { display: block; }
.aw-body h3 { margin: 0 0 .4em; }
.aw-body h3 a { color: inherit; text-decoration: none; }
.aw-body h3 a:hover { color: #826e54; text-decoration: underline; text-underline-offset: 4px; }
.aw-body p { margin-bottom: 10px; }

/* "View ..." link: always underlined, warms up on hover */
.aw-more {
	display: inline-block;
	padding: 6px 0;
	color: var(--ab-forest);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--ab-green);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}
.aw-more:after { content: "\2192"; display: inline-block; margin-left: 6px; }
.aw-more:hover, .aw-more:focus-visible { color: #826e54; text-decoration-color: #826e54; }

/* what it means for your project ------------------------------------------------ */
.aw-benefits { display: grid; gap: 20px; margin-top: 22px; }
.about .aw-after { margin-top: 32px; }

/* questions ---------------------------------------------------------------------- */
.aw-faq { margin-top: 22px; }
.aw-faq h3 { margin-bottom: .3em; }
.aw-faq > div { padding-bottom: 20px; border-bottom: 1px dotted #cfc8b4; }

/* closing call to action: reuses .ab-cta with a different photo ------------------ */
.aw-cta:before { background-image: url(images/slider/slide3.webp); }

@media (prefers-reduced-motion: no-preference) {
	.aw-more:after { transition: transform .2s; }
	.aw-more:hover:after, .aw-more:focus-visible:after { transform: translateX(4px); }
	.aw-more, .aw-body h3 a { transition: color .2s, text-decoration-color .2s; }
}

@container (max-width: 599px) {
	.aw-cta:before { background-image: url(images/slider-mob/slide3.webp); }
}

/* tablet and up: photo beside text */
@container (min-width: 600px) {
	.aw-proof { grid-template-columns: repeat(2, 1fr); }
	.aw-proof li { display: block; padding: 24px; }
	.aw-proof .ab-ico { margin-bottom: 14px; }
	.aw-proof p { margin-top: 8px; }

	.aw-item { grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: center; padding: 24px; }
	.aw-fig { max-width: none; }
	.aw-faq > div { padding-bottom: 24px; }
}

@container (min-width: 900px) {
	.aw-proof { grid-template-columns: repeat(4, 1fr); gap: 20px; }
	.aw-item { grid-template-columns: 300px minmax(0, 1fr); gap: 36px; padding: 28px; }
	.aw-benefits { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   Belgard Hardscape Hero page (bh- prefix)
   ========================================================================== */

/* a bit less space above these sections than the page's standard 48px (about 34px) */
.bh-tight { margin-top: -14px; }

/* numbered cards (any .ab-steps in the awards section) sit on a slim grey panel,
   like the About page, so the panel just "embraces" the cards */
.awards .ab-steps { gap: 14px; padding: 14px; background: var(--ab-sand); border: 1px solid var(--ab-line); border-radius: var(--ab-r); }

/* three-step "how it works": one column until there is room for three */
.bh-steps { margin-top: 22px; }
.bh-steps h3 { margin-bottom: .3em; }
.about .bh-after { margin-top: 24px; }

/* date label above an award title */
.bh-chip {
	display: inline-block;
	margin: 0 0 10px;
	padding: 4px 14px 3px;
	border-radius: 999px;
	background: var(--ab-moss);
	color: var(--ab-yellow);
	font: 1.0625rem/1.3 'Londrina Solid', cursive;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* lightbox photos: as big as the screen allows, never taller than it
   (the site's gallery popup is set to verticalFit:false, so tall photos used to scroll) */
img.mfp-img { max-height: 100vh; max-height: 100dvh; }

/* intro: smaller announcement photo so it does not tower over the text */
.bh-intro .ab-fig--frame { max-width: 280px; }

/* award cards: small trophy photo beside the text (centered above it on a phone) */
.bh-trophy { max-width: 210px; margin-inline: auto; }

/* the check sits centered under the text of its award */
.bh-check { max-width: 360px; margin: 20px auto 0; }
.bh-check a { display: block; }
.about .bh-check img { border: 1px solid var(--ab-line); border-radius: 6px; }

/* award video: same size as the old page (500px, centered) */
.bh-video { max-width: 500px; margin: 32px auto 0; }
.bh-video video { display: block; width: 100%; height: auto; background: #000; }

/* project photo mosaic: two across, a wide photo opening and closing it */
.bh-work { margin-bottom: 22px; }
.bh-mosaic { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.bh-mosaic a { display: block; overflow: hidden; border-radius: var(--ab-r); aspect-ratio: 3 / 2; cursor: zoom-in; }
.bh-mosaic .bh-wide { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
.about .bh-mosaic img { width: 100%; height: 100%; object-fit: cover; }

.bh-cta:before { background-image: url(images/slider/slide5.webp); }

@media (prefers-reduced-motion: no-preference) {
	.bh-mosaic img { transition: transform .35s; }
	.bh-mosaic a:hover img, .bh-mosaic a:focus-visible img { transform: scale(1.04); }
}

@container (max-width: 599px) {
	.bh-cta:before { background-image: url(images/slider-mob/slide5.webp); }
}

@container (min-width: 600px) {
	/* side by side: the caption hangs below the photo without adding to its height,
	   so the text beside it centers on the photo itself */
	.bh-work { margin-bottom: 80px; }
	.bh-work .ab-fig { position: relative; }
	.bh-work figcaption { position: absolute; top: 100%; left: 0; right: 0; }
	.bh-intro { grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; }
	.bh-intro .ab-fig--frame { max-width: none; justify-self: end; }
	.bh-award { grid-template-columns: 170px minmax(0, 1fr); }
	.bh-steps { grid-template-columns: 1fr; }
	.bh-mosaic { gap: 14px; }
}

@container (min-width: 900px) {
	.bh-work { margin-bottom: 64px; }
	.bh-award { grid-template-columns: 200px minmax(0, 1fr); }
	.bh-steps { grid-template-columns: repeat(3, 1fr); }
	.bh-mosaic { gap: 16px; }
}

/* ==========================================================================
   Daily Courier Readers' Choice page (rc- prefix). It also reuses the bh-
   pieces above: bh-steps, bh-chip, bh-award, bh-trophy, bh-tight, bh-after.
   ========================================================================== */

/* 2024 card: small plaque + certificate side by side under the text, spanning the card.
   Both are shown at the same height; the plaque photo has wide white margins, so it is
   cropped to a tall frame (object-fit) to keep the plaque itself and trim the empty space */
.rc-proof { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 6px 36px; margin: -6px auto 0; }
.rc-proof figure { flex: none; }
.rc-proof a { display: block; }
.about .rc-proof img { width: auto; height: 130px; }
.about .rc-proof .rc-plaque { width: 104px; object-fit: cover; }
.rc-proof figcaption { margin-top: 6px; }

.rc-cta:before { background-image: url(images/slider/slide2.webp); }

@container (max-width: 599px) {
	.rc-cta:before { background-image: url(images/slider-mob/slide2.webp); }
}

@container (min-width: 600px) {
	/* intro: text beside the team photo; caption hangs below so the text centers on the photo */
	.rc-intro { grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; margin-bottom: 34px; }
	.rc-intro .ab-fig { position: relative; }
	.rc-intro figcaption { position: absolute; top: 100%; left: 0; right: 0; }
	.about .rc-proof img { height: 170px; }
	.about .rc-proof .rc-plaque { width: 136px; }
	.rc-proof { margin-top: -18px; }
	.rc-press { grid-template-columns: 340px minmax(0, 1fr); gap: 40px; margin-bottom: 36px; }
	.rc-press .ab-fig { position: relative; }
	.rc-press figcaption { position: absolute; top: 100%; left: 0; right: 0; }
}

@container (min-width: 900px) {
	.rc-press { grid-template-columns: 380px minmax(0, 1fr); }
}

/* ==========================================================================
   More Awards page: ICPI Hardscape Awards (ma- prefix). It also reuses the
   bh- pieces above: bh-chip, bh-tight, bh-after and bh-mosaic.
   ========================================================================== */

/* at-a-glance numbers under the intro */
.about .ma-tally { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: -14px; }
.ma-tally li {
	padding: 16px 10px 14px;
	background: #fff;
	border: 1px solid var(--ab-line);
	border-top: 4px solid var(--ab-green);
	border-radius: var(--ab-r);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
	text-align: center;
	line-height: 1.2;
}
.ma-tally strong { display: block; color: var(--ab-forest); font: 2.75rem/1 'Londrina Solid', cursive; letter-spacing: 1px; }
.ma-tally span { display: block; margin-top: 4px; color: var(--ab-ink); font-size: .875rem; }

/* "how to read a plaque": one plaque beside the details it carries */
.ma-read { margin-top: 22px; }
.ma-read-fig { max-width: 220px; justify-self: center; }
.ma-read-fig a { display: block; }
.ma-dl { margin: 0 0 1em; padding: 4px 18px; background: var(--ab-sand); border: 1px solid var(--ab-line); border-radius: var(--ab-r); }
.ma-dl > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px dotted #cfc8b4; }
.ma-dl > div:last-child { border-bottom: 0; }
.ma-dl dt { margin: 0; color: var(--ab-moss); font: 1.0625rem/1.5 'Londrina Solid', cursive; letter-spacing: 1px; text-transform: uppercase; }
.ma-dl dd { margin: 0; color: #222; font-weight: 700; }

/* category blocks */
.ma-cat { margin-top: 28px; }
.ma-cat + .ma-cat { margin-top: 44px; padding-top: 34px; border-top: 1px dotted #cfc8b4; }
.about .ma-cat h3 { margin-bottom: .4em; }

/* plaque cards: same size everywhere, wrapping to fit */
.about .ma-plaques { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 16px; margin: 24px 0; }
.ma-plaques li { flex: 0 0 calc((100% - 16px) / 2); text-align: center; }
.ma-plaques a { display: block; margin-bottom: 10px; cursor: zoom-in; }
.about .ma-plaques img { width: 100%; border: 1px solid var(--ab-line); border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.ma-plaques .bh-chip { margin-bottom: 6px; font-size: 1rem; }
.ma-plaques strong { display: block; color: var(--ab-forest); font-size: .9375rem; line-height: 1.3; }

/* project photos under a category */
.ma-shots { display: grid; gap: 18px; margin-top: 26px; }
.ma-pair { display: grid; gap: 18px; }
/* every project photo in these rows gets the same 3:2 frame, whatever its original shape */
.ma-shots a, .ma-pair a { display: block; overflow: hidden; border-radius: var(--ab-r); box-shadow: var(--ab-shadow); aspect-ratio: 3 / 2; cursor: zoom-in; }
.about .ma-shots img, .about .ma-pair img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; }
.ma-drive { margin-top: 26px; }

/* patio and pool: the two plaques beside one project photo */
.ma-patio { display: grid; gap: 22px; margin: 24px 0; }
.about .ma-patio .ma-plaques { margin: 0; justify-content: center; }
.ma-patio .ma-plaques li { flex-basis: calc((100% - 16px) / 2); }

.ma-repeat { margin-top: 22px; }
.ma-mosaic { margin-top: 22px; }

.ma-cta:before { background-image: url(images/slider/slide4.webp); }

@media (prefers-reduced-motion: no-preference) {
	.ma-plaques img { transition: transform .25s, box-shadow .25s; }
	.ma-plaques a:hover img, .ma-plaques a:focus-visible img { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(0, 0, 0, .2); }
}

@container (max-width: 599px) {
	.ma-cta:before { background-image: url(images/slider-mob/slide4.webp); }
}

@container (min-width: 600px) {
	/* intro: text beside the photo; the caption hangs below so the text centers on the photo */
	.ma-intro { grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; margin-bottom: 34px; }
	.ma-intro .ab-fig { position: relative; }
	.ma-intro figcaption { position: absolute; top: 100%; left: 0; right: 0; }
	.about .ma-tally { grid-template-columns: repeat(4, 1fr); gap: 16px; }
	.ma-read { grid-template-columns: 220px minmax(0, 1fr); gap: 40px; }
	.ma-plaques li { flex-basis: calc((100% - 32px) / 3); }
	.ma-shots { grid-template-columns: repeat(3, 1fr); }
	.ma-drive { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 40px; }
	.ma-pair { grid-template-columns: 1fr 1fr; }
	.ma-patio { grid-template-columns: 340px minmax(0, 1fr); gap: 40px; align-items: center; }
	.ma-patio .ab-fig { width: 100%; max-width: 620px; justify-self: center; }
	.ma-repeat { grid-template-columns: repeat(2, 1fr); }
}

@container (min-width: 900px) {
	.ma-plaques { gap: 24px 18px; }
	.ma-plaques li { flex-basis: calc((100% - 90px) / 6); }
}

/* ==========================================================================
   Certifications page (ce- prefix). It also reuses: bh-tight, bh-after,
   ma-dl (definition list), aw-faq, aw-more and the numbered .ab-steps panel.
   ========================================================================== */

/* the two credential logos on one sand panel (white logo backgrounds blend in) */
.ce-badges { display: grid; gap: 22px; justify-items: center; }
.about .ce-badges img { box-shadow: none; border-radius: 0; mix-blend-mode: multiply; }
.about .ce-badges img:nth-child(1) { width: 170px; }
.about .ce-badges img:nth-child(2) { width: 240px; }
.ce-badges figcaption { margin-top: 0; }

/* sub-headings inside a section */
.about .ce-sub { margin: 30px 0 14px; }

/* the two requirement lists */
.ce-steps { margin-top: 0; }
.ce-cmha { align-items: start; }
.ce-certs { display: grid; gap: 22px; }
.ce-certs a { display: block; }
.ce-dl > div { grid-template-columns: 124px minmax(0, 1fr); }

.ce-links { margin-top: 22px; }
.ce-faq { margin-top: 22px; }

.ce-cta:before { background-image: url(images/slider/slide6.webp); }

@container (max-width: 599px) {
	.ce-cta:before { background-image: url(images/slider-mob/slide6.webp); }
}

@container (min-width: 600px) {
	/* intro: text beside the logo panel */
	.ce-intro { grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; }
	.ce-intro .ab-fig--frame { max-width: none; justify-self: end; width: 300px; }
	.ce-faq { grid-template-columns: 1fr; }
	.ce-certs .ab-fig { width: 100%; max-width: 380px; justify-self: center; }
	/* the caption hangs below the certificate without adding to its height,
	   so the text beside it centers on the certificate itself */
	.ce-belgard { margin-bottom: 64px; }
	.ce-belgard .ab-fig { position: relative; }
	.ce-belgard figcaption { position: absolute; top: 100%; left: 0; right: 0; }
	.ce-dl > div { grid-template-columns: 162px minmax(0, 1fr); }
}

@container (min-width: 900px) {
	/* column exactly as wide as the certificate, so no empty space beside it */
	.ce-belgard { grid-template-columns: 440px minmax(0, 1fr); }
	.ce-faq { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   BBB Accreditation page (bb- prefix). It also reuses: ma-tally (stat cards),
   bh-tight, ma-dl + ce-dl (definition list), the numbered .ab-steps panel,
   ab-cards and the .ab-btn--dark button.
   ========================================================================== */

/* the live BBB seal on a sand panel, small beside the intro text */
.bb-seal { max-width: 260px; }
.bb-seal a { display: block; }
.about .bb-seal img { width: 187px; margin-inline: auto; border-radius: 0; box-shadow: none; }

/* eight standards: numbered cards, one column on a phone, two, then four across */
.bb-steps { margin-top: 22px; }
.bb-steps h3 { margin-bottom: .3em; }

/* the one idea to remember: set apart with a green edge */
.about .bb-callout {
	margin-top: 24px;
	padding: 22px 24px;
	background: var(--ab-sand);
	border: 1px solid var(--ab-line);
	border-left: 6px solid var(--ab-green);
	border-radius: var(--ab-r);
	color: #222;
	font-size: 1.0625rem;
}
.bb-callout strong { display: block; margin-bottom: 4px; color: var(--ab-forest); font: 1.5rem/1.2 'Londrina Solid', cursive; letter-spacing: 1px; text-transform: uppercase; }

.bb-cards { margin-top: 22px; }
.bb-dl { margin-top: 22px; }
.about .bb-link { margin-top: 22px; }

.bb-cta:before { background-image: url(images/slider/slide7.webp); }

@container (max-width: 599px) {
	.bb-cta:before { background-image: url(images/slider-mob/slide7.webp); }
}

@container (min-width: 600px) {
	.bb-intro { grid-template-columns: minmax(0, 1fr) 260px; gap: 40px; }
	.bb-intro .ab-fig--frame { max-width: none; justify-self: end; width: 260px; }
}