/**
 * Agent cards - Australian Registered Migration Agents and the NZ equivalent.
 *
 * Replaces 22.9 KB of CSS that used to sit inside an Elementor html widget on each of
 * eight pages, roughly 19 KB of which styled a nav bar, mobile menu, hero grid,
 * portrait panel, stats row, contact block and footer those pages do not contain. It
 * also carried '.dhx *{all:revert}' and a Google Fonts @import for Fraunces and Inter
 * on top of the two families the theme already loads.
 *
 * Tokens from the active design system, SMG Navy and Gold Editorial: navy #08122a,
 * ink #151f33, slate #5a6680, hairline #e4e8f1, surface #f4f6fb, gold #c8a24c as the
 * single accent. The old green #1F8A70 and amber #E4A11B are gone.
 *
 * SPECIFICITY, AND WHY THESE SELECTORS LOOK HEAVY
 * These pages render through page.php's article branch, which styles content as
 * running prose: '.esv-article.prose p' sets a 20px bottom margin and
 * '.esv-article.prose h3' sets a 36px top margin, both at specificity (0,2,1). Plain
 * '.smg-agent-role' is (0,1,0) and loses, so the first version of this file was
 * silently overridden and the cards were laid out as article paragraphs: a 36px gap
 * under every portrait and 20px between every line. Card rules therefore qualify to
 * (0,3,1) or higher. Do not simplify them back.
 *
 * Motion is deliberately absent: the dial is 0.15, and the old scroll-reveal script
 * set .reveal{opacity:0}, so the whole page was invisible if the script failed.
 */

/* ---------- grid ---------- */
.smg-agents {
	margin-top: 8px;
	/* The article container measures ~1284px. Uncapped, two columns give 628px cards
	   that are mostly empty space around a 150px portrait. */
	max-width: 940px;
	/* Equal-height cards in a row, so the action buttons line up across them. */
	align-items: stretch;
}

.smg-agents .smg-agent-card {
	background: #fff;
	/* Uniform hairline. The original had a gold left edge that only appeared on
	   hover; making it permanent read as a stray rule once motion was switched off. */
	border: 1px solid #e4e8f1;
	border-radius: 14px;
	padding: clamp(1.15rem, 1.7vw, 1.45rem);
	display: flex;
	flex-direction: column;
	/* No height:100% here. The card class sits on the core/column itself, so an
	 * explicit height overrides the flex container's stretch and then resolves
	 * against an auto-height parent, collapsing each card to its own content. That
	 * left Dennis at 567px and Valerie at 541px and their buttons 26px apart.
	 * Letting the row stretch instead makes the cards equal, and because the blurb
	 * carries flex:1 the buttons settle at the same line in every card. */
}

/* ---------- portraits and registration badges ---------- */
.smg-agents .smg-agent-photo {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 .85rem;
}
.smg-agents .smg-agent-photo figure,
.smg-agents .smg-agent-photo figure.wp-block-image {
	margin: 0;
	padding: 0;
	line-height: 0;
}
.smg-agents .smg-agent-photo img {
	display: block;
	width: 150px;
	max-width: 100%;
	height: auto;
	margin: 0;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: 50% 25%;
	border-radius: 8px;
}
.smg-agents .smg-agent-photo .is-badge img {
	object-fit: contain;
	background: #fff;
	border: 1px solid #e4e8f1;
}

/* ---------- identity ---------- */
.smg-agents .smg-agent-card h3.wp-block-heading,
.smg-agents .smg-agent-card h3 {
	font-family: 'Newsreader', Georgia, serif;
	font-weight: 500;
	font-size: clamp(1.3rem, 1.9vw, 1.6rem);
	line-height: 1.12;
	letter-spacing: -.015em;
	color: #08122a;
	margin: 0 0 .3rem;
}
.smg-agents .smg-agent-card h3.wp-block-heading { margin: 0 0 .3rem; }
.smg-agents .smg-agent-card h3::after { content: none; }

.smg-agents .smg-agent-card p.smg-agent-alias {
	font-size: .86rem;
	color: #5a6680;
	font-weight: 500;
	letter-spacing: .02em;
	line-height: 1.4;
	margin: 0 0 .4rem;
}
.smg-agents .smg-agent-card p.smg-agent-role {
	font-size: .92rem;
	color: #5a6680;
	line-height: 1.5;
	margin: 0 0 .75rem;
}

/* ---------- credential chips ---------- */
/* ---------- credential chips ---------- */

/* The chips must start at the same line in every card, or the rows read as ragged.
 * Two things pushed them out of step: whether a card has an alias line (Dennis is
 * the only one, worth 25.4px including its margin) and whether the role runs to one
 * line or two (22px each). Measured, the chips sat at 303, 277, 255 and 255px from
 * the top of their cards.
 *
 * So a slot is reserved for both: the role always occupies two lines, and cards
 * without an alias take that element's height as top margin instead. Any card then
 * reaches the chips at the same point, whatever its name and role happen to be. */
.smg-agents .smg-agent-card {
	--smg-alias-slot: 25.4px;
	--smg-role-two-lines: 44px;
}

.smg-agents .smg-agent-card p.smg-agent-role {
	min-height: var(--smg-role-two-lines);
}

.smg-agents .smg-agent-card:not(:has(p.smg-agent-alias)) p.smg-agent-role {
	margin-top: var(--smg-alias-slot);
}

.smg-agents .smg-agent-card p.smg-agent-chips {
	margin: 0 0 .8rem;
	line-height: 2;
}
.smg-agents .smg-agent-chips .chip {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	background: #f4f6fb;
	border: 1px solid #e4e8f1;
	border-radius: 999px;
	padding: .24rem .62rem;
	font-size: .75rem;
	font-weight: 600;
	color: #151f33;
	letter-spacing: .01em;
	margin-right: .3rem;
	white-space: nowrap;
}
.smg-agents .smg-agent-chips .chip::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #c8a24c;
	flex: none;
}

/* ---------- blurb pushes the actions to the foot ---------- */
.smg-agents .smg-agent-card p.smg-agent-blurb {
	font-size: .94rem;
	line-height: 1.62;
	color: #151f33;
	margin: 0 0 1rem;
	flex: 1 1 auto;
}

/* ---------- actions ---------- */
.smg-agents .smg-agent-card .wp-block-buttons { margin: 0; }
.smg-agents .smg-agent-card .wp-block-button__link { line-height: 1.2; }

/* ---------- closing register note ---------- */
.smg-agent-note {
	margin-top: clamp(1.6rem, 2.6vw, 2.2rem);
	padding-top: 1.2rem;
	border-top: 1px solid #e4e8f1;
	color: #5a6680;
	font-size: .95rem;
	line-height: 1.7;
	max-width: 70ch;
}
.smg-agent-note a { color: #08122a; text-decoration: underline; }

/* ---------- accessibility helper ----------
 * Carried over deliberately: every profile and verify link opens in a new tab and
 * said so for screen readers. Dropping it would make these pages less accessible
 * than they were before the conversion.
 */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 781px) {
	.smg-agents .smg-agent-photo img { width: 128px; }
	.smg-agents .smg-agent-card { border-radius: 12px; }
}

/* ---------- hub page (1349) only ----------
 * The hub merges both country lists into one grid, so two cards carry dual
 * registrations. Both fixes are scoped to this page ID; the single-country index
 * pages keep their tighter rhythm.
 *
 * 1. Role lines here name the Australian registration AND the New Zealand licence,
 *    so they run to three lines, not the two the slot above reserves. Left alone,
 *    Dennis's chips sat a line lower than Valerie's in the same row and the row
 *    read as ragged.
 * 2. Image sizing follows the Australian agents index exactly: every image is the
 *    same 150px square, badges included. An earlier version of this file shrank
 *    badges to 115px to force all three onto one line. That failed twice over. The
 *    card's inner width is about 372px, not the 412px assumed, so the third image
 *    wrapped regardless, and the page ended up showing three different image sizes
 *    where the index pages show one. Uniform sizing is the rule the index pages
 *    set, so the third image wraps into a second row aligned under the first.
 */
.page-id-1349 .smg-agents .smg-agent-card p.smg-agent-role { min-height: 66px; }

/* ---------- Our People (2274): hidden featured image ----------
 * The featured image exists only to give search and social a per-page
 * og:image. page.php would also print it as a full-width hero above the
 * content, which this layout does not want. Same arrangement as postid-29
 * in smg-visa.css: set for SEO, hidden on the page.
 */
.page-id-2274 .esv-article-hero { display: none; }