/**
 * GB Agents — profile archive presentation.
 *
 * In the plugin, against --wp--preset--* rather than --gboneai-*. This is the
 * plain list under the search screen 458:2777; the dependent filters are stage 9.
 */

/* The archive and the profile both need these, so they are declared on both
   roots rather than on the body - a plugin has no business styling the body. */
.gb-agents-archive,
.gb-profile {
	--gb-agents-blue: var(--wp--preset--color--primary, #1043ff);
	--gb-agents-navy: var(--wp--preset--color--dark, #1b2b50);
	--gb-agents-amber: var(--wp--preset--color--accent, #fcac0b);
	--gb-agents-white: var(--wp--preset--color--white, #fff);
	--gb-agents-grey: var(--wp--preset--color--grey, #f3f3f5);
}

.gb-agents-archive {
	box-sizing: border-box;
	inline-size: min(1400px, 100% - 2rem);
	margin-inline: auto;
}

.gb-agents-archive:not(.gb-agents-archive--search) > .gb-agents-grid {
	margin-block-start: 3rem;
}

/* ------------------------------------------------------------ search band --- */

/*
 * 458:2777 - a #F3F3F5 band the full width of the page, 458 tall: the title 56
 * under its top edge, Bold 40 at 1.4; the strapline right under it, Regular 36 at
 * 1.2 on two lines; the fields 56 under that; the chips 20 under the fields; 78
 * to the band's bottom edge, and 78 again to the first row of cards.
 *
 * FULL BLEED WITHOUT OVERFLOW. The band sits inside the 1400 archive column. A
 * `100vw` margin trick counts the scrollbar and scrolls the page sideways by its
 * width; a border-image outset paints the grey past the column as ink overflow,
 * which never adds a scrollbar.
 */
.gb-agent-search {
	padding-block: 56px 78px;
	background: var(--gb-agents-grey);
	border-image: conic-gradient(var(--gb-agents-grey) 0 0) fill 0 / / 0 100vw;
	color: var(--gb-agents-navy);
	text-align: center;
}

.gb-agent-search__title {
	margin: 0;
	font-size: clamp(30px, 1.5rem + 1vw, 40px);
	font-weight: 700;
	line-height: 1.4;
}

.gb-agent-search__lead {
	margin: 0;
	font-size: clamp(22px, 1rem + 1.2vw, 36px);
	line-height: 1.2;
}

.gb-agent-search__form {
	max-inline-size: 1140px;
	margin: 56px auto 0;
}

.gb-agent-search__fields {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: end;
}

.gb-agent-search__field {
	flex: 1 1 240px;
	margin: 0;
	text-align: start;
}

/* 18 Light, drawn - built at weight 100, which resolves to Regular until a Light
   face exists (see CLAUDE.md, Design system). 3 above, 4 between label and field. */
.gb-agent-search__field label {
	display: block;
	margin-block: 3px 4px;
	font-size: 18px;
	font-weight: 100;
	letter-spacing: 0.18px;
	line-height: 1;
}

.gb-agent-search__control {
	position: relative;
	display: block;
}

/* The drawn 9 x 4 chevron, at the end of the field - on the left in RTL. */
.gb-agent-search__control--select::after {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: 21px;
	inline-size: 9px;
	block-size: 4px;
	background-color: var(--gb-agents-navy);
	content: "";
	pointer-events: none;
	transform: translateY(-50%);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 4'%3E%3Cpath d='M.6.4 4.5 3.6 8.4.4' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 4'%3E%3Cpath d='M.6.4 4.5 3.6 8.4.4' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.gb-agent-search__field input,
.gb-agent-search__field select {
	appearance: none;
	box-sizing: border-box;
	inline-size: 100%;
	block-size: 46px;
	padding-inline: 19px;
	border: 0;
	border-radius: 25px;
	background: var(--gb-agents-white);
	box-shadow: 0 0 10px rgb(0 0 0 / 15%);
	color: var(--gb-agents-navy);
	font-family: inherit;
	font-size: 18px;
	font-weight: 100;
	letter-spacing: 0.18px;
}

.gb-agent-search__field select {
	padding-inline-end: 40px;
	cursor: pointer;
}

.gb-agent-search__field input::placeholder {
	color: var(--gb-agents-navy);
	opacity: 1;
}

.gb-agent-search__field input:focus-visible,
.gb-agent-search__field select:focus-visible {
	outline: 2px solid var(--gb-agents-navy);
	outline-offset: 2px;
}

.gb-agent-search__submit {
	margin: 20px 0 0;
}

.gb-agent-search__form.is-live .gb-agent-search__submit {
	display: none;
}

.gb-agent-search__submit button {
	block-size: 45px;
	padding-inline: 1.5rem;
	border: 0;
	border-radius: 999px;
	background: var(--gb-agents-navy);
	color: var(--gb-agents-white);
	cursor: pointer;
	font: inherit;
	font-weight: 700;
}

/* 458:3609 - Regular 17 in a 1px navy pill, 6/12, the cross 8 and 5 after it,
   10 between chips, centred under the fields. */
.gb-agent-search__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.gb-agent-search__chip {
	display: inline-flex;
	gap: 5px;
	align-items: center;
	padding: 6px 12px;
	border: 1px solid var(--gb-agents-navy);
	border-radius: 50px;
	color: var(--gb-agents-navy);
	font-size: 17px;
	line-height: 1.2;
	text-decoration: none;
}

.gb-agent-search__chip-remove {
	inline-size: 8px;
	block-size: 8px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M.7.7l6.6 6.6M7.3.7L.7 7.3' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M.7.7l6.6 6.6M7.3.7L.7 7.3' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.gb-agent-search__chip:hover,
.gb-agent-search__chip:focus-visible {
	background: var(--gb-agents-navy);
	color: var(--gb-agents-white);
}

.gb-agents-results {
	margin-block-start: 78px;
}

/* A search on its way (agent-search.js): the old results dim rather than vanish,
   so the page does not jump while the new ones load. */
.gb-agents-results-slot {
	transition: opacity 0.15s;
}

.gb-agents-results-slot[aria-busy="true"] {
	opacity: 0.45;
}

.gb-agents-empty {
	margin-block: 3rem;
	color: var(--gb-agents-navy);
	text-align: center;
}

/*
 * Five across at the drawn width, not four. 458:2777 puts five 256px cards in
 * the 1400 band with 30px between them - 5x256 + 4x30 is exactly 1400. It was
 * four columns with a 32px gap, which made every card 326 wide.
 */
.gb-agents-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 30px;
}

@media (min-width: 1000px) {
	.gb-agents-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 1400px) {
	.gb-agents-grid {
		grid-template-columns: repeat(5, 1fr);
	}
}

/*
 * 458:3933 - 256 x 460: a 308 photograph, then 20, then the specialty at 18 and
 * the name at 24 five apart, then 15 and a row of 40px icons, then 30. Since
 * 29/09 that is all it carries - the office city line it had is gone, and the
 * three discs are built.
 */
.gb-profile-card {
	padding-block-end: 30px;
	border-radius: 20px;
	background: var(--gb-agents-white);
	box-shadow: 0 0 10px rgb(0 0 0 / 10%);
	text-align: center;
}

/* The ratio is on the image. On the wrapper it loses to the intrinsic height. */
.gb-profile-card__photo {
	display: block;
	inline-size: 100%;
	aspect-ratio: 256 / 308;
	block-size: auto;
	object-fit: cover;
	border-start-start-radius: 20px;
	border-start-end-radius: 20px;
}

.gb-profile-card__name {
	margin: 5px 12px 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
}

.gb-profile-card__name a {
	color: var(--gb-agents-navy);
	/* The theme sets a weight on links through :where(a); the heading is Bold. */
	font-weight: inherit;
	text-decoration: none;
}

.gb-profile-card__name a:hover,
.gb-profile-card__name a:focus-visible {
	color: var(--gb-agents-blue);
	text-decoration: underline;
}

/* The one line above the name, 20 under the photograph. */
.gb-profile-card__specialties {
	margin: 20px 12px 0;
	color: var(--gb-agents-navy);
	font-size: 18px;
	line-height: 1;
}

.gb-profile-card__photo-link {
	display: block;
}

/* LinkedIn, mail, phone - 40px discs, 15 apart, 15 under the name. */
.gb-profile-card__contact {
	display: flex;
	gap: 15px;
	justify-content: center;
	margin: 15px 0 0;
	padding: 0;
	list-style: none;
}

.gb-profile-card__contact a {
	display: block;
	border-radius: 50%;
}

.gb-profile-card__contact img {
	display: block;
	inline-size: 40px;
	block-size: 40px;
}

.gb-profile-card__contact a:hover img,
.gb-profile-card__contact a:focus-visible img {
	opacity: 0.85;
}

/* ------------------------------------------------------------- profile --- */

/*
 * The agent and advisor profile. Figma 1304:9309 and 458:4246.
 *
 * Measured node by node on 26/08. `get_metadata` on this node fails on the
 * design server every time, which is why the first cut of this screen was built
 * from a screenshot - `get_design_context` returns it perfectly well, and every
 * number below is now the drawing's own.
 *
 * Shape: a 370 navy band, the portrait at the start edge overhanging it, the
 * name and the specialties beside it, then a strip of four contact groups at
 * 411, and under it the logo, the about copy, the site link and the social row -
 * all in an 838 column that runs 260..1100. The portrait is out of the flow so
 * its 580 does not become the column's problem.
 */
.gb-profile {
	position: relative;
	z-index: 1;

	/* Up behind the sticky bar, the same way the theme's page band does it, so
	   the navy runs to the top of the page rather than starting under it. */
	margin-block-start: -90px;
	padding-block-start: 90px;
	background: linear-gradient(var(--gb-agents-navy) 0 370px, transparent 370px);
}

.gb-profile__band {
	position: relative;
	box-sizing: border-box;
	inline-size: min(1400px, 100% - 2rem);
	margin-inline: auto;

	/* 90 of header plus 60 puts the portrait and the intro at the drawn 150. */
	padding-block-start: 60px;
}

/*
 * Out of the flow. The portrait is 580 tall against an intro of about 260, and
 * as a grid cell that difference becomes row height - it pushed the contact
 * strip 300px below where the drawing puts it.
 *
 * 28 from the band's start edge: the drawing runs it 1182..1632 inside a band
 * that ends at 1660.
 */
.gb-profile__portrait {
	position: absolute;
	inset-block-start: 60px;
	inset-inline-start: 28px;
	overflow: hidden;
	inline-size: 450px;
	border-radius: 20px;
	box-shadow: 0 0 20px rgb(0 0 0 / 10%);
}

.gb-profile__portrait img {
	display: block;
	inline-size: 100%;
	aspect-ratio: 450 / 580;
	block-size: auto;
	object-fit: cover;
}

/* 560 leaves the drawn 838 column, 260..1100. */
.gb-profile__col {
	margin-inline-start: 560px;
}

/*
 * 34 puts the name at 184 and 261 puts the contact strip at 411 - which is what
 * keeps the strip on the white below the 370 band, where its navy labels are
 * legible. A short profile would otherwise leave it half on the navy.
 */
.gb-profile__intro {
	box-sizing: border-box;
	min-block-size: 261px;
	padding-block-start: 34px;
	color: var(--gb-agents-white);
}

.gb-profile__name {
	margin: 0;
	font-size: 45px;
	font-weight: 700;
	line-height: 0.9;
}

.gb-profile__specialties {
	margin: 3px 0 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
}

.gb-profile__place {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	justify-content: flex-start;
	margin: 3px 0 0;
	font-size: 20px;
	line-height: 1.3;
}

.gb-profile__place-item {
	display: inline-flex;
	gap: 10px;
	align-items: center;
}

/*
 * The drawn marker is an amber arrow pointing down and away (↙), at the START
 * of each item - to the right of "מחוז:" in RTL. Drawn as a mask so its colour
 * stays the token rather than a literal inside an SVG.
 */
.gb-profile__place-item::before {
	inline-size: 12px;
	block-size: 12px;
	flex: 0 0 auto;
	background: var(--gb-agents-amber);
	content: "";
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.8%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M11 1 1.5 10.5M1.5 3.5v7h7%27/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.8%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M11 1 1.5 10.5M1.5 3.5v7h7%27/%3E%3C/svg%3E") center / contain no-repeat;
}

.gb-profile__blurb {
	max-inline-size: 838px;
	margin: 5px 0 0;
	font-size: 20px;
	line-height: 1.3;
}

/* --------------------------------------------------------- contact strip --- */

/*
 * Four groups across the 823 the drawing gives them, each a 45px icon at the
 * start edge with a two-line label beside it: the field name in Bold over the
 * value in Regular, both 20 at leading 1.1.
 */
.gb-profile__contact {
	display: flex;
	flex-wrap: wrap;
	/* No column gap: the drawing spaces the four groups by their own widths
	   across the 823 it gives them, and space-between reproduces that. */
	gap: 20px 0;
	justify-content: space-between;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gb-profile__chip {
	display: inline-flex;
	gap: 15px;
	align-items: center;
	min-inline-size: 0;
	/* Only the address gives way: a phone number or an email must never wrap. */
	flex: 0 0 auto;
	color: var(--gb-agents-navy);
}

.gb-profile__chip--address {
	flex: 0 1 auto;
}

/*
 * One line, as 1304:9309 draws it, but only where the column is wide enough to
 * hold three rigid chips and a shrinking address. The 560 offset is fixed and the
 * band is not, so only at the full 1400 band is the column the drawn 838; at
 * 1280 it is 688 and the address would fold to four lines, so below the full
 * band the row wraps to two lines instead.
 */
@media (min-width: 1432px) {
	.gb-profile__contact {
		flex-wrap: nowrap;
	}
}

.gb-profile__chip-icon {
	display: inline-flex;
	inline-size: 45px;
	block-size: 45px;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
}

.gb-profile__chip-icon img,
.gb-profile__chip-icon svg {
	display: block;
	inline-size: 45px;
	block-size: 45px;
}

.gb-profile__chip-body {
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
	text-align: start;
}

.gb-profile__chip-label {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.1;
}

.gb-profile__chip-value {
	color: inherit;
	font-size: 20px;
	line-height: 1.1;
	text-decoration: none;
}

/* 22px of line box is under the 24 WCAG 2.5.8 asks for. The padding buys it
   and the equal negative margin keeps the chip the height it was. */
a.gb-profile__chip-value {
	display: inline-block;
	padding-block: 1px;
	margin-block: -1px;
}

/* The Waze chip has no value, only its label - and the drawing sets it as one. */
.gb-profile__chip--waze .gb-profile__chip-value {
	font-weight: 700;
}

a.gb-profile__chip-value:hover,
a.gb-profile__chip-value:focus-visible {
	text-decoration: underline;
}

/* ----------------------------------------------------------------- body --- */

/* Strip ends 456, the column is drawn at 509. */
.gb-profile__body {
	margin-block-start: 53px;
	color: var(--gb-agents-navy);
	text-align: start;
}

.gb-profile__logo {
	display: flex;
	box-sizing: border-box;
	inline-size: 360px;
	max-inline-size: 100%;
	block-size: 150px;
	align-items: center;
	justify-content: center;
	padding: 16px;
	border-radius: 20px;
	margin-inline-start: auto;
	background: var(--gb-agents-white);
	box-shadow: 0 0 15px rgb(0 0 0 / 10%);
}

.gb-profile__logo img {
	max-inline-size: 100%;
	max-block-size: 100%;
	inline-size: auto;
	block-size: auto;
	object-fit: contain;
}

/* The logo and the copy under it are 40 apart; everything inside the copy is 15. */
.gb-profile__about-title {
	margin: 40px 0 0;
	font-size: 45px;
	font-weight: 700;
	line-height: 0.9;
}

.gb-profile__about {
	margin-block-start: 15px;
	font-size: 20px;
	line-height: 1.3;
}

.gb-profile__about > :first-child { margin-block-start: 0; }
.gb-profile__about > :last-child { margin-block-end: 0; }

/* Small print, and the drawing sets it off with a rule above. */
.gb-profile__disclaimer {
	padding-block-start: 15px;
	border-block-start: 1px solid var(--wp--preset--color--blue-grey, #cad9dc);
	margin: 15px 0 0;
	font-size: 17px;
	line-height: 1.3;
}

.gb-profile__site {
	margin: 15px 0 0;
	text-align: start;
}

.gb-profile__site-link {
	display: inline-flex;
	align-items: center;
	padding: 10px 20px;
	border-radius: 50px;
	background: var(--gb-agents-blue);
	color: var(--gb-agents-white);
	font-size: 20px;
	line-height: 1;
	text-decoration: none;
}

.gb-profile__site-link:hover,
.gb-profile__site-link:focus-visible {
	background: var(--gb-agents-navy);
}

.gb-profile__social {
	display: flex;
	gap: 12px;
	justify-content: flex-start;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}

.gb-profile__social-link {
	display: inline-flex;
	inline-size: 47px;
	block-size: 47px;
	align-items: center;
	justify-content: center;
}

/*
 * The icons ship as an outlined disc with the glyph in currentColor. The drawing
 * wants the opposite - a filled navy disc with a white glyph - so the disc is
 * repainted here rather than a second set of files being kept.
 */
.gb-profile__social-link svg {
	inline-size: 47px;
	block-size: 47px;
	color: var(--gb-agents-navy);
}

.gb-profile__social-link svg circle {
	fill: var(--gb-agents-navy);
}

.gb-profile__social-link svg path {
	fill: var(--gb-agents-white);
}

.gb-profile__social-link:hover svg circle,
.gb-profile__social-link:focus-visible svg circle {
	fill: var(--gb-agents-blue);
}

/* The WhatsApp mark is a bare glyph - it has no disc of its own, so it gets one
   here rather than a second file being drawn for it. */
.gb-profile__social-link--whatsapp {
	border-radius: 50%;
	background: var(--gb-agents-navy);
}

.gb-profile__social-link--whatsapp:hover,
.gb-profile__social-link--whatsapp:focus-visible {
	background: var(--gb-agents-blue);
}

.gb-profile__social-link--whatsapp svg {
	inline-size: 26px;
	block-size: 26px;
}

/* -------------------------------------------------------------- service ---
 *
 * The bottom of `1304:9309`: a #DDD rule across the whole page about 77 under
 * the social row, the heading 67 under the rule (38 Bold, line 1.4), the
 * contact card and join banner 42 under the heading, and the footer 60 under
 * those. The pair itself is the theme's and keeps the theme's rules.
 */
.gb-profile__service {
	margin-block-start: 77px;
	padding-block-start: 67px;
	border-block-start: 1px solid var(--wp--preset--color--dark-grey, #ddd);
	background: var(--gb-agents-white);
}

.gb-profile__service-title {
	box-sizing: border-box;
	inline-size: min(1400px, 100% - 2rem);
	margin: 0 auto;
	color: var(--gb-agents-navy);
	/* 38 at the drawn 1920, no smaller than 26 on a phone. */
	font-size: clamp(26px, 1.25rem + 1vw, 38px);
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

.gb-profile__service .gb-archive-footer--profile {
	margin-block-end: 60px;
}

.gb-profile__service .gb-archive-footer--profile .gb-home-bottom {
	margin-block-start: 42px;
}

/* main's own gap to the footer would land on top of the drawn 60. */
main.gb-profile:has(.gb-archive-footer--profile) {
	padding-block-end: 0;
}

/* One column once the portrait and the copy stop fitting side by side. */
@media (max-width: 1100px) {
	.gb-profile__portrait {
		position: static;
		inline-size: min(450px, 100%);
		margin-block-end: 30px;
	}

	.gb-profile__col {
		margin-inline-start: 0;
	}

	.gb-profile__intro {
		min-block-size: 0;
		padding-block-start: 0;
	}

	.gb-profile__contact {
		margin-block-start: 30px;
	}
}