/* OKC — Team Grid
 * ---------------------------------------------------------------------------
 * Literal resolution of the Tailwind v3 utilities used by the legacy markup
 * (okc theme, page-templates/team_t.php lines 33-146), plus the non-Tailwind
 * `.team-member-simple` rules from the theme's assets/css/main.css (lines
 * 574-627). No Tailwind is required at runtime.
 *
 * Legacy classes, for reference:
 *   section     relative py-16 md:py-20 lg:py-24 bg-[#F5E6D3] pt-[50px]
 *   container   container mx-auto px-6 lg:px-12
 *   header      mb-12 md:mb-16
 *   header row  flex items-center
 *   h2          text-4xl md:text-5xl lg:text-6xl font-black text-[#0B3B5D]
 *               uppercase mr-6 pt-[30px]   + inline font-family Pragmatica
 *   rule        flex-grow h-0.5 bg-[#0B3B5D]
 *   grid        grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12 md:gap-16
 *   card        team-member-simple text-center
 *   photo wrap  mb-6
 *   photo       w-48 h-48 md:w-56 md:h-56 lg:w-64 lg:h-64 mx-auto rounded-full
 *               overflow-hidden border-4 border-[#F5E6D3] shadow-lg
 *   photo img   w-full h-full object-cover
 *   initials    w-48 h-48 md:w-56 md:h-56 lg:w-64 lg:h-64 mx-auto rounded-full
 *               bg-[#F5E6D3] flex items-center justify-center
 *   initials sp text-5xl md:text-6xl lg:text-7xl font-black text-[#0A3B5C]
 *   h3 name     text-2xl md:text-3xl font-black text-[#0B3B5D] mb-2 uppercase
 *   p  role     text-lg md:text-xl text-[#0B3B5D] font-bold mb-3
 *   a  email    text-sm md:text-base text-[#0B3B5D] hover:text-[#0B3B5D]
 *               transition-colors duration-300
 *
 * SOURCE-ORDER NOTE on `py-16 ... pt-[50px]`:
 * Tailwind emits `py-*` before `pt-*` inside the padding plugin, and emits all
 * unprefixed utilities before the `md:` / `lg:` media blocks. So the theme
 * actually rendered:
 *     < 768px  padding-top 50px  / padding-bottom 4rem
 *   >= 768px   padding-top 5rem  / padding-bottom 5rem   (md:py-20 wins)
 *   >= 1024px  padding-top 6rem  / padding-bottom 6rem   (lg:py-24 wins)
 * i.e. pt-[50px] only ever applies below the md breakpoint. That is reproduced
 * exactly below.
 *
 * Selectors are two classes deep (0,2,0) so they beat the okc-base.css reset
 * (`.okc-w h2`, `.okc-w img`, `.okc-w a` = 0,1,1) while still losing to
 * Elementor's own {{WRAPPER}} rules from the Style tab.
 * ------------------------------------------------------------------------- */

/* ===========================================================================
   SECTION — relative py-16 md:py-20 lg:py-24 bg-[#F5E6D3] pt-[50px]
   ========================================================================= */
.okc-team-grid {
	position: relative;
	padding-top: 50px;
	padding-bottom: 4rem;
	background-color: #f5e6d3;
}

@media (min-width: 768px) {
	.okc-team-grid {
		padding-top: 5rem;
		padding-bottom: 5rem;
	}
}

@media (min-width: 1024px) {
	.okc-team-grid {
		padding-top: 6rem;
		padding-bottom: 6rem;
	}
}

/* ===========================================================================
   CONTAINER — container mx-auto px-6 lg:px-12
   `container` = width:100% with a max-width step at each Tailwind breakpoint.
   ========================================================================= */
.okc-team-grid .okc-team-grid__container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

@media (min-width: 640px) {
	.okc-team-grid .okc-team-grid__container {
		max-width: 640px;
	}
}

@media (min-width: 768px) {
	.okc-team-grid .okc-team-grid__container {
		max-width: 768px;
	}
}

@media (min-width: 1024px) {
	.okc-team-grid .okc-team-grid__container {
		max-width: 1024px;
		padding-left: 3rem;
		padding-right: 3rem;
	}
}

@media (min-width: 1280px) {
	.okc-team-grid .okc-team-grid__container {
		max-width: 1280px;
	}
}

@media (min-width: 1536px) {
	.okc-team-grid .okc-team-grid__container {
		max-width: 1536px;
	}
}

/* ===========================================================================
   SECTION HEADER — mb-12 md:mb-16 / flex items-center
   ========================================================================= */
.okc-team-grid .okc-team-grid__header {
	margin-bottom: 3rem;
}

@media (min-width: 768px) {
	.okc-team-grid .okc-team-grid__header {
		margin-bottom: 4rem;
	}
}

.okc-team-grid .okc-team-grid__header-row {
	display: flex;
	align-items: center;
}

/* text-4xl md:text-5xl lg:text-6xl font-black text-[#0B3B5D] uppercase
   mr-6 pt-[30px]   (Preflight zeroed the heading margin) */
.okc-team-grid .okc-team-grid__heading {
	font-family: "Pragmatica", sans-serif;
	font-size: 2.25rem;
	line-height: 2.5rem;
	font-weight: 900;
	color: #0b3b5d;
	text-transform: uppercase;
	margin: 0;
	margin-right: 1.5rem;
	padding-top: 30px;
}

@media (min-width: 768px) {
	.okc-team-grid .okc-team-grid__heading {
		font-size: 3rem;
		line-height: 1;
	}
}

@media (min-width: 1024px) {
	.okc-team-grid .okc-team-grid__heading {
		font-size: 3.75rem;
		line-height: 1;
	}
}

/* flex-grow h-0.5 bg-[#0B3B5D] */
.okc-team-grid .okc-team-grid__rule {
	flex-grow: 1;
	height: 0.125rem;
	background-color: #0b3b5d;
}

/* ===========================================================================
   GRID — grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12 md:gap-16
   ========================================================================= */
.okc-team-grid .okc-team-grid__grid {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 3rem;
}

@media (min-width: 768px) {
	.okc-team-grid .okc-team-grid__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4rem;
	}
}

@media (min-width: 1024px) {
	.okc-team-grid .okc-team-grid__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ===========================================================================
   CARD — .team-member-simple text-center
   main.css: opacity 0 + `simpleFadeIn .8s ease-out forwards`, staggered
   nth-child delays 0.1s-0.6s, all forced to 0.1s at 768px and below.
   `simpleFadeIn` is byte-identical to the shared `okc-fade-in` keyframes
   already declared in okc-base.css, so that one is reused here.
   ========================================================================= */
.okc-team-grid .okc-team-grid__member {
	text-align: center;
}

.okc-team-grid--animate .okc-team-grid__member {
	opacity: 0;
	animation: okc-fade-in 0.8s ease-out forwards;
}

.okc-team-grid--animate .okc-team-grid__member:nth-child(1) {
	animation-delay: 0.1s;
}

.okc-team-grid--animate .okc-team-grid__member:nth-child(2) {
	animation-delay: 0.2s;
}

.okc-team-grid--animate .okc-team-grid__member:nth-child(3) {
	animation-delay: 0.3s;
}

.okc-team-grid--animate .okc-team-grid__member:nth-child(4) {
	animation-delay: 0.4s;
}

.okc-team-grid--animate .okc-team-grid__member:nth-child(5) {
	animation-delay: 0.5s;
}

.okc-team-grid--animate .okc-team-grid__member:nth-child(6) {
	animation-delay: 0.6s;
}

/* main.css used max-width: 768px here, so it overlaps Tailwind's md
   (min-width: 768px) by exactly one pixel — !important settles it, as in the
   original. Reproduced verbatim. */
@media (max-width: 768px) {
	.okc-team-grid--animate .okc-team-grid__member {
		animation-delay: 0.1s !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.okc-team-grid--animate .okc-team-grid__member {
		animation: none;
		opacity: 1;
	}
}

/* ===========================================================================
   PHOTO WRAP — mb-6
   ========================================================================= */
.okc-team-grid .okc-team-grid__photo-wrap {
	margin-bottom: 1.5rem;
}

/* ---------------------------------------------------------------------------
   PHOTO CIRCLE
   w-48 h-48 md:w-56 md:h-56 lg:w-64 lg:h-64 mx-auto rounded-full
   overflow-hidden border-4 border-[#F5E6D3] shadow-lg
   The 4px border eats into the 12rem box because Preflight sets
   box-sizing: border-box — that is the legacy render, kept as is.
   ------------------------------------------------------------------------ */
.okc-team-grid .okc-team-grid__photo {
	width: 12rem;
	height: 12rem;
	margin-left: auto;
	margin-right: auto;
	border-radius: 9999px;
	overflow: hidden;
	border-style: solid;
	border-width: 4px;
	border-color: #f5e6d3;
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

@media (min-width: 768px) {
	.okc-team-grid .okc-team-grid__photo {
		width: 14rem;
		height: 14rem;
	}
}

@media (min-width: 1024px) {
	.okc-team-grid .okc-team-grid__photo {
		width: 16rem;
		height: 16rem;
	}
}

/* w-full h-full object-cover — must out-specify `.okc-w img { height: auto }` */
.okc-team-grid .okc-team-grid__photo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

/* main.css: .team-member-simple:hover img { transform: scale(1.05) }
   0,3,1 here, so it beats okc-base.css `.okc-w img:hover { scale(1.02) }`
   (0,1,1) — the same way it did in the theme. */
.okc-team-grid .okc-team-grid__member:hover .okc-team-grid__photo img {
	transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
	.okc-team-grid .okc-team-grid__photo img {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   INITIALS CIRCLE
   w-48 h-48 md:w-56 md:h-56 lg:w-64 lg:h-64 mx-auto rounded-full
   bg-[#F5E6D3] flex items-center justify-center
   NOTE: the legacy background is the same cream as the section, so the circle
   is invisible; only the navy initials show. Faithful, and overridable from
   Style > Photo Circle > Initials Circle Background.
   No border here, unlike the photo variant — also as in the legacy markup.
   ------------------------------------------------------------------------ */
.okc-team-grid .okc-team-grid__initials {
	width: 12rem;
	height: 12rem;
	margin-left: auto;
	margin-right: auto;
	border-radius: 9999px;
	background-color: #f5e6d3;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (min-width: 768px) {
	.okc-team-grid .okc-team-grid__initials {
		width: 14rem;
		height: 14rem;
	}
}

@media (min-width: 1024px) {
	.okc-team-grid .okc-team-grid__initials {
		width: 16rem;
		height: 16rem;
	}
}

/* text-5xl md:text-6xl lg:text-7xl font-black text-[#0A3B5C] */
.okc-team-grid .okc-team-grid__initials-text {
	font-family: "Pragmatica", sans-serif;
	font-size: 3rem;
	line-height: 1;
	font-weight: 900;
	color: #0a3b5c;
}

@media (min-width: 768px) {
	.okc-team-grid .okc-team-grid__initials-text {
		font-size: 3.75rem;
		line-height: 1;
	}
}

@media (min-width: 1024px) {
	.okc-team-grid .okc-team-grid__initials-text {
		font-size: 4.5rem;
		line-height: 1;
	}
}

/* ===========================================================================
   NAME — text-2xl md:text-3xl font-black text-[#0B3B5D] mb-2 uppercase
   ========================================================================= */
.okc-team-grid .okc-team-grid__name {
	font-family: "Pragmatica", sans-serif;
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: 900;
	color: #0b3b5d;
	text-transform: uppercase;
	margin: 0 0 0.5rem;
}

@media (min-width: 768px) {
	.okc-team-grid .okc-team-grid__name {
		font-size: 1.875rem;
		line-height: 2.25rem;
	}
}

/* ===========================================================================
   ROLE — text-lg md:text-xl text-[#0B3B5D] font-bold mb-3
   ========================================================================= */
.okc-team-grid .okc-team-grid__role {
	font-family: "Pragmatica", sans-serif;
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 700;
	color: #0b3b5d;
	margin: 0 0 0.75rem;
}

@media (min-width: 768px) {
	.okc-team-grid .okc-team-grid__role {
		font-size: 1.25rem;
		line-height: 1.75rem;
	}
}

/* ===========================================================================
   EMAIL — text-sm md:text-base text-[#0B3B5D] hover:text-[#0B3B5D]
           transition-colors duration-300
   ========================================================================= */
.okc-team-grid .okc-team-grid__email {
	font-family: "Pragmatica", sans-serif;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: #0b3b5d;
	text-decoration: none;
	transition-property: color, background-color, border-color,
		text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 300ms;
}

@media (min-width: 768px) {
	.okc-team-grid .okc-team-grid__email {
		font-size: 1rem;
		line-height: 1.5rem;
	}
}

/* Legacy hover colour equals the normal colour — nothing visibly changes. */
.okc-team-grid .okc-team-grid__email:hover,
.okc-team-grid .okc-team-grid__email:focus {
	color: #0b3b5d;
	text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
	.okc-team-grid .okc-team-grid__email {
		transition-duration: 0.01ms;
	}
}