/**
 * sigma/office-card (C14) -- the Our Offices comp's map + address
 * block. Loaded only where the block renders (block.json "style" field).
 *
 * Geometry is the comp's, to the pixel, at a 1440 viewport
 * (docs/qa/comp-spec/SPEC-our-offices.md S01, y measured from the map
 * frame's top edge at 1096):
 *
 *   frame     x=76   625x409, 1.5px gold-bright          (BOX   76.1 / 1096.0  625.4x409.0)
 *   map image x=86   602x593, clipped by the frame       (IMAGE 86.0 / 1004.1  602.3x593.2)
 *   pin       x=361  26x42 gold, white disc              (FILL  361.0 / 1237.5)
 *   heading   x=796  70px, em top y=+122                 (TEXT  796 / 1218)
 *   street    x=796  20px, em top y=+219, 22 pitch       (TEXT  796 / 1315, 1337)
 *   phone     x=796  one blank line under the city       (TEXT  796 / 1381)
 *   button    x=794  227x33, 1.5px gold-bright, y=+337   (BOX   793.7 / 1432.8)
 *   band ends 86px under the frame                       (S02 top 1591)
 *
 * The image is bigger than the frame that shows it: the PDF draws the
 * whole 602x593 map and clips it to the 625x409 box, so 92px of map
 * are hidden above the frame and 92 below, and there is a 10px margin
 * of frame at left and 13px at right. That is reproduced literally --
 * frame with overflow hidden, image positioned inside it -- because a
 * cropped copy of the asset would drift the moment someone re-exported
 * the map. The image's offsets are percentages of the frame's padding
 * box (622x406 at 1440) so the same crop survives the columns shrinking
 * below 1440 and the frame going full width on a phone.
 *
 * Those offsets have no design-token equivalent (they are positions,
 * not a spacing scale), so they are declared once as block-scoped
 * custom properties below and used by name -- one place to correct if
 * a re-measure ever moves one. Everything that IS a token (type sizes,
 * weights, leading, colours) uses the token.
 *
 * The block owns its own 1440px canvas: the comp's frame starts at
 * x=76, and no sigma/section width reaches that far out, so the layout
 * wraps it in nothing (section: null, like blocks/media-text) and
 * data-full-bleed keeps assets/css/layout.css from capping it. Above
 * 1440 the canvas centres; below it the two columns shrink in the
 * comp's 625:644 proportion until 1024, where they stack.
 *
 * Buttons: assets/css/base.css's shared .sigma-button rule is the box
 * (padding, border, type) every registry button in the theme now uses;
 * .sigma-button.office-card__button below is only the size and position
 * that are genuinely this block's own.
 */

.office-card {
	--office-card-canvas: 1440px;
	--office-card-pad-left: 76px;
	--office-card-frame-width: 625px;
	--office-card-frame-height: 409px;
	/* 796 (text column) - 701 (frame's right edge) */
	--office-card-gap: 95px;
	/* The distance from whatever precedes the block to the frame's top
	   edge is 60px in the comp (paragraph bottom 1036, frame 1096); the
	   preceding section's own bottom padding supplies it, so this is 0
	   and the layout owner has one knob if it needs a nudge. */
	--office-card-top: 0px;
	--office-card-bottom: 86px;
	--office-card-border: 0.75px;
	/* Heading line box top: em top 1218 - (77 - 70) / 2 - frame top 1096. */
	--office-card-text-top: 118.5px;
	/* One body line: 20px x 1.1 = 22px. Also the heading-to-address gap
	   and the blank line above the phone -- the comp uses one body line
	   for both. */
	--office-card-line: calc(var(--text-body) * var(--leading-body));
	--office-card-button-top: 31px;
	/* The comp's button box starts at 793.7 while the text starts at 796:
	   the box is nudged 2.3px left of the column so both land where the
	   comp draws them. */
	--office-card-button-shift: -2.3px;
	--office-card-pin-width: 26px;
	--office-card-pin-height: 42px;
	/* Image and pin, as fractions of the frame's own 625.4x409 box:
	   image 602.3 wide at (9.9, -91.9); pin at (284.9, 141.5). Fractions
	   of the FRAME, not of a padding box, because the border is drawn
	   by a pseudo-element on top (see .office-card__map::after) -- a
	   1.5px border snaps to 1px on a 1x screen, and a padding box that
	   is 623 wide instead of 622 would have put the image at 603x594. */
	--office-card-image-width: 96.306%;
	--office-card-image-left: 1.583%;
	--office-card-image-top: -22.469%;
	--office-card-pin-left: 45.555%;
	--office-card-pin-top: 34.597%;

	box-sizing: border-box;
	background-color: var(--color-white);
	color: var(--color-navy);
}

/*
 * Inside a grey section the card takes the section's colour instead of
 * painting its own white panel (Roman, 19 Sep).
 *
 * The white above is right where this block sits on a white page -- it is
 * the card's own surface. On Contact Us the section is already
 * gray-light, so a white block on top of it read as a white slab floating
 * in a grey band, with the map's gold frame the only thing tying it to
 * the page. Transparent lets the section carry one continuous background
 * behind the map, the address and the closing line.
 *
 * Same treatment the other self-painting blocks get: the colour follows
 * the section it is placed in rather than being decided by the block.
 */
.sigma-section--bg-light .office-card {
	background-color: transparent;
}

.office-card__inner {
	box-sizing: border-box;
	max-width: var(--office-card-canvas);
	margin-inline: auto;
	padding: var(--office-card-top) 0 var(--office-card-bottom) var(--office-card-pad-left);
	display: grid;
	/* 625 : 644 -- at 1440 that is exactly the frame's width and the
	   rest of the canvas right of x=796; below 1440 both shrink in
	   proportion, the gap and left pad stay put. */
	grid-template-columns: minmax(0, 625fr) minmax(0, 644fr);
	column-gap: var(--office-card-gap);
	align-items: start;
}

/*
 * The frame. Its height comes from the comp's 625:409 ratio rather than
 * a fixed pixel height so the same crop survives narrower columns.
 * overflow hidden is what does the comp's clipping (see the header).
 * The 1.5px gold-bright border is a pseudo-element laid over the map
 * rather than a border on this box, so the image and pin are placed as
 * fractions of the 625x409 box the comp measures and not of a padding
 * box that shifts by a pixel when the border snaps.
 */
.office-card__map {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 625 / 409;
	border-radius: var(--radius-none);
	box-shadow: var(--shadow-none);
	background-color: var(--color-white);
	overflow: hidden;
}

.office-card__map::after {
	content: '';
	position: absolute;
	inset: 0;
	border: var(--office-card-border) solid var(--color-gold);
	pointer-events: none;
}

/* The link's own outline would be clipped by the frame, so the frame
   shows the focus ring for it. */
.office-card__map:focus-within {
	box-shadow: var(--shadow-focus);
}

.office-card__map-link {
	position: absolute;
	inset: 0;
	display: block;
	color: var(--color-gold);
}

.office-card__map-link:focus-visible {
	outline: none;
}

.office-card__map-image {
	position: absolute;
	top: var(--office-card-image-top);
	left: var(--office-card-image-left);
	width: var(--office-card-image-width);
	height: auto;
	max-width: none;
	display: block;
}

/* The pin is the comp's own vector (fields.php), gold via currentColor
   from the link. Fixed 26x42 -- it is a marker, not part of the map's
   scale -- placed by percentage so it stays on the same street. */
.office-card__pin {
	position: absolute;
	top: var(--office-card-pin-top);
	left: var(--office-card-pin-left);
	width: var(--office-card-pin-width);
	height: var(--office-card-pin-height);
	pointer-events: none;
}

.office-card__map-embed {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.office-card__text {
	min-width: 0;
	padding-top: var(--office-card-text-top);
}

/*
 * Both offsets above are the comp's, and both measure something the comp
 * itself draws: the 118.5px is the top of the office HEADING's line box,
 * and the 86px bottom padding is the room under the BUTTON. Contact Us
 * renders this card with neither -- just the map and the three NAP lines
 * -- and got the offsets anyway: the address hung 118px down the column
 * while 86px of white sat under a card that had already run out of
 * content, which is what QA saw as "this section looks bad" (813).
 *
 * Same lesson as the comps' absolute heights one round earlier
 * (stats-band, value-prop, grid): a comp offset is only meaningful while
 * the thing it offsets is on the page. So each is asked for by what it
 * measures, and a card without that element simply doesn't take it -- the
 * copy column then centres against the map, the way stats-band's does.
 * Our Offices, which draws both, is untouched.
 */
.office-card__inner:not(:has(.office-card__button)) {
	padding-bottom: 0;
}

.office-card__inner:not(:has(.office-card__heading)) .office-card__text {
	align-self: center;
	padding-top: 0;
}

/*
 * 70px at 1440 (4.8612vw x 1440 = 70.0), shrinking with the viewport
 * down to the statement size so a longer city line does not become
 * three lines in a narrow column. Both ends are tokens.
 */
.office-card__heading {
	margin: 0 0 var(--office-card-line);
	font-family: var(--font-serif);
	font-size: clamp(var(--text-statement), 4.8612vw, var(--text-h2));
	font-weight: var(--weight-serif-bold);
	line-height: var(--leading-heading);
	letter-spacing: var(--tracking-heading);
	color: var(--color-navy);
}

/*
 * Discrete lines (office-card build brief, point 1): street,
 * city/state/zip and phone are each their own <span>, stacked as blocks
 * on the body line pitch -- the same approach footer.css's
 * .site-footer__address takes for the identical NAP block (not shared
 * -- CONVENTIONS.md scopes per-block CSS to its own file).
 */
.office-card__address {
	font-style: normal;
	margin: 0;
}

.office-card__address span {
	display: block;
	font-family: var(--font-serif);
	font-size: var(--text-body);
	font-weight: var(--weight-serif-regular);
	line-height: var(--leading-body);
	color: var(--color-navy);
}

/*
 * The office name is the first line of the address block. It used to be
 * hidden screen-reader-only, because the old comp did not draw it and it
 * was in the DOM only for the NAP and the LocalBusiness node. The
 * client's Our Office document (22 September) prints it -- "Sigma
 * Mergers & Acquisitions" above the street -- so it is now visible.
 * It needs no rule of its own: `.office-card__address
 * span` above already gives every line the serif body style, and the
 * name is one of those spans.
 */

/* The comp leaves one blank body line between the city and the phone. */
.office-card__phone {
	margin-top: var(--office-card-line);
}

/*
 * The email sits directly under the phone, one line apart rather than a
 * blank line: they are one contact pair, where the address above them is
 * a separate thought. The comp draws no email at all -- Our Offices has
 * none -- so this is the theme's own line, added when Contact Us's email
 * moved inside the card (QA 813).
 */
.office-card__email a,
.office-card__phone a {
	position: relative;
	color: var(--color-navy);
	text-decoration: none;
}

.office-card__email a::after {
	content: '';
	position: absolute;
	inset: -11px 0;
}

.office-card__email a:hover,
.office-card__email a:focus-visible {
	text-decoration: underline;
}

.office-card__phone a {
	position: relative;
	color: var(--color-navy);
	text-decoration: none;
}

/*
 * A 22px-tall tel: link is under the 44px tap-target floor; the
 * pseudo-element grows the hit area to 44px without moving a pixel of
 * the comp's line pitch.
 */
.office-card__phone a::after {
	content: '';
	position: absolute;
	inset: -11px 0;
}

/*
 * ...and a little more of it on touch. Measured at 1024: the effective
 * target came out at 35px rather than the 46 the inset above implies,
 * because the city line's own box sits directly over the top of it and
 * wins elementFromPoint there. Widening downward, where nothing is
 * stacked, is what actually reaches the 44px floor.
 */
@media (max-width: 1024px) {
	/*
	 * The row itself grows, rather than a pseudo-element reaching for the
	 * space around it. Tried the reaching version twice: the city line's
	 * box overlaps the phone's top and wins elementFromPoint there, the
	 * email's area caps it from below, and the effective target sat at 43
	 * however the insets were split. Two 44px areas 22px apart cannot both
	 * exist -- the same arithmetic that defeated it in the footer's link
	 * column. Nothing below 1024 is drawn, so the rows may take the room.
	 */
	.office-card__phone a,
	.office-card__email a {
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
	}

	.office-card__phone a::after,
	.office-card__email a::after {
		content: none;
	}
}

.office-card__phone a:hover,
.office-card__phone a:focus-visible {
	text-decoration: underline;
}

.office-card__phone a:focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus);
}

.office-card__hours {
	margin: var(--office-card-line) 0 0;
}

/*
 * Same small uppercase-kicker treatment blocks/hero's .hero__eyebrow and
 * blocks/heading-text's .heading-text__eyebrow use (not shared --
 * CONVENTIONS.md scopes CSS per block) -- gold-deep, not gold, because
 * this sits on white, and CONVENTIONS.md's colour rule is explicit that
 * gold TEXT on white fails AA at this size.
 */
.office-card__hours-heading {
	margin: 0 0 var(--space-xs);
	font-family: var(--font-sans);
	font-size: var(--text-kicker);
	font-weight: var(--weight-sans-bold);
	line-height: var(--leading-ui);
	letter-spacing: var(--tracking-kicker);
	text-transform: uppercase;
	color: var(--color-gold-deep);
}

.office-card__hours-line {
	margin: 0;
	font-family: var(--font-serif);
	font-size: var(--text-body);
	line-height: var(--leading-body);
	color: var(--color-navy);
}

/*
 * 227 is the theme's secondary/in-card size -- this button sits under
 * the office heading and address, not a standalone statement. margin-top
 * and margin-left are this block's own position (the -2.3px shift lines
 * the box up with the comp's 793.7 against the text column's 796); the
 * box itself is base.css's.
 */
.sigma-button.office-card__button {
	min-width: 227px;
	margin-top: var(--office-card-button-top);
	margin-left: var(--office-card-button-shift);
}

/*
 * Below 1024 the comp's side-by-side geometry has no room: one column,
 * the map full width above the address. The frame keeps its 625:409
 * shape and the percentage crop, so the phone sees the same piece of
 * Dallas, just smaller. The button loses its 2.3px nudge because there
 * is no 796 column to be nudged against.
 */
@media (max-width: 1023px) {
	.office-card__inner {
		display: block;
		max-width: none;
		padding: var(--space-xl) var(--space-lg) var(--space-2xl);
	}

	.office-card__map {
		margin: 0 0 var(--space-lg);
	}

	.office-card__text {
		padding-top: 0;
	}

	.sigma-button.office-card__button {
		margin-left: 0;
	}
}

/* Phones: the button spans the column and meets the 44px tap-target
   floor; the comp's 33px height is a mouse-and-1440 measurement. */
@media (max-width: 767px) {
	.sigma-button.office-card__button {
		width: 100%;
		min-width: 0;
		min-height: 2.75rem;
		white-space: normal;
	}
}