/**
 * Styles for the MRB Certificate Grid widget (Certificates page, Figma
 * frame 449:273).
 *
 * Loaded by Elementor only on pages using the widget (get_style_depends).
 * Section rhythm (--mrb-pd-gap / --mrb-pd-head-gap) comes from
 * section-rhythm.css, loaded as a dependency of this stylesheet.
 *
 * @package MRB
 */

/* Section band: white, 1344px content box shared with every other custom
   section (!important beats the width saved in the Elementor editor's post
   CSS, which loads after this file).

   Vertical padding is deliberately NOT set here. It is owned site-wide by
   spacing.css, which puts it on the inner .mrb-section (the block that
   paints the band). This file used to add its own --mrb-cert-pad padding to
   the OUTER section as well, so the page rendered both — 80px outside plus
   80px inside, i.e. 160px top and bottom. */
/* Desktop side gutter.
 *
 * 40px rather than the 24px minimum the narrower sections use. This grid caps
 * at 1522px instead of the site's 1352px, so it meets the edge of the screen
 * ~170px sooner and would sit on a thin 24px margin across the whole 13"/14"
 * laptop range — the tiles are large, light-edged images, and they need more
 * air than a column of text does. 40px also lands next to the 44px the rest
 * of the site happens to show at 1440, so the pages look related.
 *
 * Only the desktop tier is declared here: from 1199px down, spacing.css
 * already makes every container on the site fluid with one shared
 * --mrb-gutter (24px tablet / 16px phone), and it is enqueued after this file
 * so it wins. Repeating those tiers here would be dead code that looks
 * authoritative. */
:root {
	--mrb-cert-gutter: 40px;
}

.e-con:has(.mrb-certificate-grid),
.elementor-section:has(.mrb-certificate-grid) {
	background-color: #ffffff;
}

/* Side gutter.
 *
 * This page does NOT use the site-wide 1352px content box. Figma draws the
 * certificate rows on their own, wider rule — 1522px starting at x=199
 * (frame 449:720), which is exactly the 3 × 486px tiles plus their two 32px
 * gaps. So the width is owned here rather than by containers.css.
 *
 * It has to be a *responsive* box, not a fixed one. The Elementor editor had
 * saved a flat max-width of 1505px with no gutter, which looks fine on a large
 * monitor but leaves nothing at the sides once the viewport is near that
 * figure: between roughly 1200px and 1520px — every 13" and 14" laptop — the
 * grid ran hard against both edges of the screen, with the tiles bleeding off
 * at 1440, 1366 and 1280. min() keeps the Figma width while guaranteeing the
 * gutter never collapses.
 *
 * !important beats the per-section width in the Elementor post CSS, which
 * loads after this file. */
.e-con:has(.mrb-certificate-grid) > .e-con-inner,
.elementor-section:has(.mrb-certificate-grid) > .elementor-container {
	width: min(100% - (var(--mrb-cert-gutter) * 2), 1522px) !important;
	max-width: min(100% - (var(--mrb-cert-gutter) * 2), 1522px) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	padding-top: 0;
	padding-bottom: 0;
}

.elementor-section:has(.mrb-certificate-grid) .elementor-widget-wrap {
	padding: 0 !important;
}

/* Tile grid: 3 × 486px columns, 32px column gap, ~46px row gap per Figma. */
.mrb-certificate-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 32px;
	row-gap: 46px;
}

.mrb-cert-item {
	margin: 0;
}

.mrb-cert-link {
	display: block;
}

/* Image: covers its 486×339 box; hairline so white certificate scans keep
   an edge against the white band. */
.mrb-cert-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 486 / 339;
	object-fit: cover;
	border: 1px solid #e5e5e8;
}

/* Caption row: Albert Sans 500 22/26.4 #2d2d2d, name left / standard right,
   10px under the image per Figma. */
.mrb-cert-caption {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	margin-top: 10px;
	font-family: "Albert Sans", sans-serif;
	font-weight: 500;
	font-size: 22px;
	line-height: 1.2;
	color: #2d2d2d;
}

.mrb-cert-standard {
	text-align: right;
	white-space: nowrap;
}

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

@media (max-width: 1199px) {
	.mrb-certificate-grid {
		grid-template-columns: repeat(2, 1fr);
		column-gap: 24px;
		row-gap: 36px;
	}

	.mrb-cert-caption {
		font-size: 20px;
	}
}

@media (max-width: 767px) {
	.mrb-certificate-grid {
		grid-template-columns: 1fr;
		row-gap: 28px;
	}

	.mrb-cert-caption {
		font-size: 18px;
	}
}