/**
 * Attorney Post Types - front end.
 *
 * Every value below is a custom property the builder can override, and the
 * defaults are measured off the approved design: a #162542 section, five
 * 283px cards with 28px between them, photos at 7/10, and a 70px white name
 * bar in navy serif.
 *
 * Type is forced where the theme would otherwise decide it: this site's
 * custom.css carries h1..h6 { font-size: 48px !important } and
 * a { text-decoration: underline !important }, either of which would take the
 * name bar away from the element that is meant to control it.
 */

.at-section {
	/*
	 * Nothing of its own behind the cards, and no padding around them.
	 *
	 * The element sits inside a builder row that already carries the navy and
	 * the space above and below it; painting a second background over the top
	 * of that one only makes the two disagree. Both are still fields on the
	 * element for the cases where there is no row to lean on.
	 */
	--at-bg: transparent;
	--at-pad: 0;
	/* Its own value rather than a smaller --at-pad: the builder writes
	   --at-pad inline, and an inline custom property beats any rule in this
	   file, so a phone override written that way would never apply. */
	--at-pad-m: 0;
	--at-gap-m: 16px;

	--at-heading-color: #ffffff;
	--at-heading-size: 36px;
	--at-heading-lh: 40px;
	--at-heading-weight: 700;
	--at-heading-align: center;
	--at-heading-space: 40px;

	--at-cols: 5;
	--at-cols-laptop: 4;
	--at-cols-tablet: 3;
	--at-cols-mobile: 2;
	--at-gap: 28px;
	--at-row-gap: 28px;

	--at-arrow-size: 46px;
	--at-arrow-color: #ffffff;
	--at-arrow-bg: transparent;
	--at-arrow-border: #d5af34;
	--at-arrow-color-h: #162542;
	--at-arrow-bg-h: #d5af34;
	--at-arrow-space: 32px;
	--at-arrow-gap: 14px;

	--at-ratio: 283 / 400;
	--at-fit: cover;
	--at-pos: top;
	/* A little, not a lot: the crop is tight on a headshot already. */
	--at-zoom: 106;
	--at-empty-bg: #e7eaef;

	--at-card-bg: #ffffff;
	--at-card-radius: 0px;
	/* No cap by default: the cards fill their share of the row. Three across
	   a wide row makes each one large, so this is here to rein that in. */
	--at-card-max: none;
	--at-grid-max: none;

	/* Frank Ruhl Libre Regular, 30/36, tracking 10 - straight off the PSD.
	   Georgia is the fallback if the theme is not already loading it. */
	--at-name-font: "Frank Ruhl Libre", Georgia, "Times New Roman", serif;
	--at-name-bg: #ffffff;
	--at-name-bg-hover: #d5af34;
	--at-name-color: #162542;
	--at-name-hover: #ffffff;
	--at-name-size: 30px;
	--at-name-lh: 36px;
	--at-name-weight: 400;
	--at-name-track: 0.3px;
	/* 17 + 36 + 17 = the 70px bar measured in the PSD. */
	--at-name-pad: 17px 12px;
	--at-name-min: 70px;
	--at-name-align: center;

	--at-name-size-m: 18px;
	--at-name-lh-m: 24px;

	box-sizing: border-box;
	background: var(--at-bg);
	padding: var(--at-pad);
}

.at-section *,
.at-section *::before,
.at-section *::after {
	box-sizing: border-box;
}

.at-heading {
	margin: 0 0 var(--at-heading-space) !important;
	color: var(--at-heading-color) !important;
	font-size: var(--at-heading-size) !important;
	line-height: var(--at-heading-lh) !important;
	font-weight: var(--at-heading-weight) !important;
	text-align: var(--at-heading-align);
}

/* -------------------------------------------------------------------------
 * Grid
 * ---------------------------------------------------------------------- */

.at-grid {
	display: grid;
	grid-template-columns: repeat(var(--at-cols), minmax(0, 1fr));
	column-gap: var(--at-gap);
	row-gap: var(--at-row-gap);
	align-items: stretch;
	justify-items: center;
	/* Both are `none` unless a card cap is set, so an uncapped grid still
	   fills the row exactly as before. */
	max-width: var(--at-grid-max);
	margin-left: auto;
	margin-right: auto;
}

/* -------------------------------------------------------------------------
 * Slider
 *
 * A scrolling, snapping track rather than a transform carousel. How many fit
 * in a view is a CSS sum, so every screen width is handled by the same rule
 * and the script never has to be told about a breakpoint. With five or fewer
 * attorneys the track does not overflow, the arrows stay hidden, and it is
 * indistinguishable from the grid.
 * ---------------------------------------------------------------------- */

.at-grid--slider {
	display: flex;
	grid-template-columns: none;
	column-gap: var(--at-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.at-grid--slider::-webkit-scrollbar {
	display: none;
}

.at-grid--slider:focus-visible {
	outline: 3px solid var(--at-name-bg-hover);
	outline-offset: 4px;
}

.at-grid--slider .at-card {
	flex: 0 0 calc((100% - (var(--at-cols) - 1) * var(--at-gap)) / var(--at-cols));
	scroll-snap-align: start;
}

.at-slider__nav {
	display: flex;
	justify-content: center;
	gap: var(--at-arrow-gap);
	margin-top: var(--at-arrow-space);
}

.at-slider__nav[hidden] {
	display: none;
}

.at-slider__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--at-arrow-size);
	height: var(--at-arrow-size);
	padding: 0;
	background: var(--at-arrow-bg);
	border: 1px solid var(--at-arrow-border);
	border-radius: 0;
	color: var(--at-arrow-color);
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}

.at-slider__arrow svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
}

.at-slider__arrow:hover:not(:disabled),
.at-slider__arrow:focus-visible {
	background: var(--at-arrow-bg-h);
	color: var(--at-arrow-color-h);
}

.at-slider__arrow:focus-visible {
	outline: 3px solid var(--at-arrow-border);
	outline-offset: 3px;
}

/* Kept in place rather than removed, so the pair does not jump about as you
   reach either end of the row. */
.at-slider__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

/*
 * The card fills its grid cell, the photo holds its ratio, and the name bar
 * takes whatever is left - so a name that wraps onto two lines makes every
 * bar in the row taller together rather than knocking one card out of line.
 */
.at-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: var(--at-card-max);
	min-width: 0;
	background: var(--at-card-bg);
	border-radius: var(--at-card-radius);
	overflow: hidden;
}

.at-card__link {
	display: block;
	text-decoration: none !important;
	color: inherit;
}

.at-card__link--photo {
	flex: 0 0 auto;
}

.at-card__link--name {
	display: flex;
	flex: 1 1 auto;
}

.at-card__photo {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: var(--at-ratio);
	overflow: hidden;
	background: var(--at-empty-bg);
}

.at-card__photo--empty {
	flex: 0 0 auto;
}

.at-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--at-fit);
	object-position: var(--at-pos);
	transition: transform 0.35s ease;
}

/* Hovering anywhere on the card zooms the photo. `~` would not do it: the
   photo link comes first in the DOM, and CSS has no previous-sibling
   combinator - so a hover on the name could never reach back to it. */
.at-card:hover .at-card__img,
.at-card:focus-within .at-card__img {
	transform: scale(calc(var(--at-zoom) / 100));
}

/* -------------------------------------------------------------------------
 * Name bar
 * ---------------------------------------------------------------------- */

.at-card__name {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--at-name-min);
	padding: var(--at-name-pad);
	background: var(--at-name-bg);
	color: var(--at-name-color) !important;
	font-family: var(--at-name-font) !important;
	font-size: var(--at-name-size) !important;
	line-height: var(--at-name-lh) !important;
	font-weight: var(--at-name-weight) !important;
	letter-spacing: var(--at-name-track);
	text-align: var(--at-name-align);
	text-decoration: none !important;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.at-card--static .at-card__name {
	cursor: default;
}

/*
 * The whole bar fills on hover, not just the text.
 *
 * Scoped through .at-card__link--name so a card with no Profile Link set -
 * which renders no link at all - does not pretend to be clickable.
 */
.at-card:hover .at-card__link--name .at-card__name,
.at-card__link--name:focus-visible .at-card__name {
	background: var(--at-name-bg-hover);
	color: var(--at-name-hover) !important;
}

.at-card__link:focus-visible {
	outline: 3px solid var(--at-name-hover);
	outline-offset: 2px;
}

.at-empty {
	margin: 0;
	padding: 20px;
	background: #fff8e5;
	border-left: 4px solid #d5af34;
	color: #4a3c10;
}

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

/* Laptop. 1399, not 1199: a 1366-wide laptop is the commonest screen there
   is, and at five across its cards come out at 213px against a design of
   283. */
@media (max-width: 1399px) {
	.at-grid {
		grid-template-columns: repeat(var(--at-cols-laptop), minmax(0, 1fr));
	}

	.at-grid--slider {
		grid-template-columns: none;
	}

	.at-grid--slider .at-card {
		flex-basis: calc((100% - (var(--at-cols-laptop) - 1) * var(--at-gap)) / var(--at-cols-laptop));
	}
}

/* Tablet */
@media (max-width: 1023px) {
	.at-grid {
		grid-template-columns: repeat(var(--at-cols-tablet), minmax(0, 1fr));
	}

	.at-grid--slider {
		grid-template-columns: none;
	}

	.at-grid--slider .at-card {
		flex-basis: calc((100% - (var(--at-cols-tablet) - 1) * var(--at-gap)) / var(--at-cols-tablet));
	}
}

/* Phone */
@media (max-width: 767px) {
	.at-grid {
		grid-template-columns: repeat(var(--at-cols-mobile), minmax(0, 1fr));
	}

	.at-grid--slider {
		grid-template-columns: none;
	}

	.at-grid--slider .at-card {
		flex-basis: calc((100% - (var(--at-cols-mobile) - 1) * var(--at-gap)) / var(--at-cols-mobile));
	}

	/*
	 * Forced, for the same reason. Custom properties honour !important, which
	 * is the only way a stylesheet can override one the builder set inline.
	 */
	.at-section {
		--at-gap: var(--at-gap-m) !important;
		--at-row-gap: var(--at-gap-m) !important;
		--at-arrow-size: 42px !important;
		--at-arrow-space: 24px !important;
		padding: var(--at-pad-m);
	}

	.at-card__name {
		font-size: var(--at-name-size-m) !important;
		line-height: var(--at-name-lh-m) !important;
		min-height: 0;
		padding: 14px 8px;
	}

	.at-heading {
		font-size: calc(var(--at-heading-size) * 0.7) !important;
		line-height: calc(var(--at-heading-lh) * 0.75) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.at-grid--slider {
		scroll-behavior: auto;
	}

	.at-card__img {
		transition: none;
	}

	.at-card:hover .at-card__img,
	.at-card:focus-within .at-card__img {
		transform: none;
	}
}