/**
 * Team Members - frontend styles (grid + popup).
 * Loaded only on pages that actually render a [team_members] shortcode -
 * see Assets::mark_active().
 */

.shk-team {
	--shk-image-ratio: 3/4;
}

.shk-team-grid {
	display: grid;
	grid-template-columns: repeat( var( --shk-desktop-columns, 5 ), 1fr );
	column-gap: var( --shk-gap, 32px );
	row-gap: var( --shk-row-gap, var( --shk-gap, 32px ) );
	/* Explicit, though it matches the grid default: a shorter/taller
	   theme-level reset elsewhere on the site (some ship a blanket
	   `[class*="grid"] { align-items: ... }` rule) could otherwise turn
	   this off, which is exactly what stops every card in a row from
	   filling the row's own height below (see .shk-team-grid__item). */
	align-items: stretch;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media ( max-width: 1024px ) {
	.shk-team-grid {
		grid-template-columns: repeat( var( --shk-tablet-columns, 3 ), 1fr );
	}
}

@media ( max-width: 767px ) {
	.shk-team-grid {
		grid-template-columns: repeat( var( --shk-mobile-columns, 2 ), 1fr );
	}
}

.shk-team-grid__item {
	list-style: none;
}

/* Card (button when the popup is enabled, plain div otherwise). */

.shk-team-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	/* Fills the grid item's own row height (stretched by
	   .shk-team-grid's align-items: stretch above), so a row where one
	   member's name/designation wraps onto an extra line doesn't leave
	   that one card's box shorter than its siblings -- the extra space
	   just becomes blank room after its content instead. The photo and
	   name/designation of every card in a row stay at the same vertical
	   position either way; this only affects the card's own bottom edge
	   (visible whenever --shk-card-bg is set to something other than
	   transparent, and keeps every card's clickable area the same size
	   when the popup is enabled). */
	height: 100%;
	background: var( --shk-card-bg, transparent );
	border: 0;
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	text-align: var( --shk-text-align, left );
	-webkit-tap-highlight-color: transparent;
}

button.shk-team-card {
	cursor: pointer;
}

/* Neutralize host-theme global :hover/:focus background/box-shadow
   rules (common in WordPress themes for link/button styling, and
   otherwise painted straight across the name/designation text since
   this card is a <button>) so this card's own colours are always what
   render - our own :hover/:focus-visible image effects below remain
   the only hover/focus feedback. */
button.shk-team-card:hover,
button.shk-team-card:focus {
	background: var( --shk-card-bg, transparent );
	box-shadow: none;
}

button.shk-team-card:focus-visible {
	outline: 2px solid var( --shk-popup-accent, #b5793c );
	outline-offset: 4px;
	border-radius: 2px;
}

.shk-team-card__media {
	display: block;
	width: 100%;
	aspect-ratio: var( --shk-image-ratio, 3/4 );
	overflow: hidden;
	border-radius: var( --shk-image-radius, 4px );
	background: #ececec;
	/* Flex-shrink: 0 keeps this box at its own aspect-ratio height even
	   though .shk-team-card is now a stretched flex column (see above) --
	   without it, a flex item is allowed to shrink below its intrinsic
	   size to make room for its sibling, which would squash the photo
	   short on any card whose content block needs the extra space. */
	flex-shrink: 0;
}

/* A member with no photo still gets this box (see member-card.php) so
   every card's content starts at the same vertical position -- just
   with no <img> inside, so nothing but the shared background shows. */
.shk-team-card__media--empty {
	background: #ececec;
}

.shk-team-card__image {
	width: 100%;
	height: 100% !important;
	display: block;
	object-fit: var( --shk-image-fit, cover );
	object-position: var( --shk-image-position, center top );
	transition: transform 0.35s ease;
}

/* Zoom only on hover/focus -- no brightness/filter change. Photos stay
   exactly as uploaded; scale is the only hover effect. (The previous
   version of this rule, brightening the photo on hover too, had ended up
   commented out directly on production rather than actually removed --
   this replaces that commented-out block with the real fix.) */
button.shk-team-card:hover .shk-team-card__image,
button.shk-team-card:focus-visible .shk-team-card__image {
	transform: scale( 1.04 );
}

.shk-team-card__content {
	display: block;
	margin-top: var( --shk-content-margin-top, 16px );
}

.shk-team-card__name {
	display: block;
	margin: 0;
	font-size: var( --shk-name-font-size, 20px );
	font-weight: var( --shk-name-font-weight, 600 );
	line-height: 1.25;
	color: var( --shk-name-color, #1a1a1a );
	text-decoration: none;
}

.shk-team-card__designation {
	display: block;
	margin-top: 4px;
	font-size: var( --shk-designation-font-size, 14px );
	color: var( --shk-designation-color, #6b6b6b );
}

@media ( prefers-reduced-motion: reduce ) {
	.shk-team-card__image {
		transition: none;
	}
}

/* Popup (native <dialog>). */

html.shk-team-dialog-open {
	overflow: hidden;
}

.shk-team-dialog {
	box-sizing: border-box;
	width: 100%;
	max-width: min( 960px, calc( 100vw - 32px ) );
	max-height: min( 88vh, 760px );
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: var( --shk-popup-bg, #f4efe6 );
	color: var( --shk-popup-text, #1a1a1a );
	box-shadow: 0 24px 64px rgba( 0, 0, 0, 0.28 );
	overflow: hidden auto;
	opacity: 0;
	transform: translateY( 16px ) scale( 0.98 );
	transition: opacity 0.22s ease, transform 0.22s ease, overlay 0.22s ease allow-discrete, display 0.22s ease allow-discrete;
}

.shk-team-dialog[open] {
	opacity: 1;
	transform: translateY( 0 ) scale( 1 );
}

@starting-style {
	.shk-team-dialog[open] {
		opacity: 0;
		transform: translateY( 16px ) scale( 0.98 );
	}
}

.shk-team-dialog::backdrop {
	background: var( --shk-popup-overlay, rgba( 0, 0, 0, 0.65 ) );
	opacity: 0;
	transition: opacity 0.22s ease allow-discrete;
}

.shk-team-dialog[open]::backdrop {
	opacity: 1;
}

@starting-style {
	.shk-team-dialog[open]::backdrop {
		opacity: 0;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.shk-team-dialog,
	.shk-team-dialog::backdrop {
		transition: none;
	}
}

.shk-team-dialog__inner {
	position: relative;
	padding: 52px clamp( 20px, 4vw, 56px ) 56px;
}

/* !important on background/color: theme resets commonly restyle every
   [type="button"]/button element (background AND a different color on
   :hover/:focus) at a specificity that only ties this button's own
   base rule on the `b` component and then wins on `c` (their selector
   includes the `button` type). The dialog also auto-focuses this
   button on open (it's the first focusable element in the popup), so
   without !important here it would visibly flash the theme's default
   button skin - solid background, white icon - every single time a
   popup opens. */
.shk-team-dialog__close {
	position: absolute;
	top: 16px;
	right: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: transparent !important;
	border: 0;
	border-radius: 50%;
	color: var( --shk-popup-accent, #b5793c ) !important;
	cursor: pointer;
}

.shk-team-dialog__close:hover,
.shk-team-dialog__close:focus,
.shk-team-dialog__close:focus-visible {
	background: transparent !important;
	opacity: 0.7;
}

.shk-team-dialog__close:focus-visible {
	outline: 2px solid var( --shk-popup-accent, #b5793c );
	outline-offset: 2px;
}

.shk-team-dialog__header {
	margin-bottom: 32px;
	padding-right: 44px;
}

.shk-team-dialog__name {
	margin: 0 0 12px;
	font-size: clamp( 26px, 4vw, 42px );
	font-weight: 700;
	line-height: 1.1;
}

.shk-team-dialog__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 14px;
	opacity: 0.75;
}

.shk-team-dialog__divider {
	opacity: 0.6;
}

/* !important: page builders (e.g. Elementor's global Site Settings
   kit) commonly ship an `a { text-decoration: underline; }` rule
   scoped to a wrapper class, which outranks a plain single-class
   selector like `.shk-team-dialog__email` on specificity alone. */
.shk-team-dialog__email {
	color: inherit;
	text-decoration: none !important;
}

.shk-team-dialog__email:hover,
.shk-team-dialog__email:focus-visible {
	text-decoration: underline !important;
	text-underline-offset: 2px;
}

.shk-team-dialog__body {
	display: grid;
	grid-template-columns: minmax( 160px, 320px ) 1fr;
	gap: clamp( 20px, 4vw, 48px );
	align-items: end;
}

@media ( max-width: 640px ) {
	.shk-team-dialog__body {
		grid-template-columns: 1fr;
	}
}

.shk-team-dialog__media {
	border-radius: var( --shk-popup-image-radius, 4px );
	overflow: hidden;
}

.shk-team-dialog__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3/4;
	object-fit: cover;
	border-radius: var( --shk-popup-image-radius, 4px );
}

.shk-team-dialog__description p {
	margin: 0 0 1em;
	line-height: 1.65;
}

.shk-team-dialog__description p:last-child {
	margin-bottom: 0;
}

/* Editor-only notice (no published members, or a bad shortcode id). */

.shk-team__admin-notice {
	padding: 12px 16px;
	background: #fef8f0;
	border: 1px dashed #d9a86c;
	border-radius: 4px;
	color: #5c4324;
	font-size: 14px;
}