/* Yardscape Team Manager — front-end (Yardscape team-card design).
   Layout-critical values use CSS vars the widget sets responsively;
   colours/typography are Elementor-overridable. */

.yst-team{
	/* Desktop: fit 4 cards + a ~30% peek of the 5th, container-relative so it holds at any width.
	   Overridable via the Elementor "Card Width" slider. */
	--yst-card-w:calc((100% - 4 * var(--yst-gap)) / 4.3);
	--yst-gap:20px;
	--yst-img-h:300px;
	--yst-gold:#92AF4D;
	--yst-navy:#10325B;
	position:relative;
	font-family:"Neue Haas Display","Neue Haas Grotesk Display Pro","Helvetica Neue",Arial,sans-serif;
}

/* ---- Live search ---- */
.yst-search{
	display:flex;align-items:center;gap:11px;
	width:100%;max-width:400px;
	margin:0 auto 36px;
	padding:0 18px;
	background:#fff;
	border:1px solid rgba(16,50,91,.13);
	border-radius:999px;
	box-shadow:none;
	transition:border-color .18s ease,box-shadow .18s ease;
	box-sizing:border-box;
}
.yst-search:focus-within{border-color:rgba(16,50,91,.5);box-shadow:0 0 0 3px rgba(16,50,91,.06)}
.yst-search-icon{flex:0 0 auto;width:17px;height:17px;color:var(--yst-navy);opacity:.5}
.yst-search-input{
	flex:1 1 auto;min-width:0;
	border:0;outline:0;background:transparent;
	font-family:inherit;font-size:14.5px;font-weight:500;line-height:1.4;color:var(--yst-navy);
	padding:12px 0;
}
.yst-search-input::placeholder{color:rgba(16,50,91,.42);font-weight:400}
.yst-search-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.yst-search-clear{
	flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
	width:24px;height:24px;padding:0;margin-left:4px;
	border:0;border-radius:50%;cursor:pointer;
	background:transparent;color:rgba(16,50,91,.4);
	transition:background .18s ease,color .18s ease;
}
.yst-search-clear:hover{background:rgba(16,50,91,.08);color:var(--yst-navy)}
.yst-search-clear[hidden]{display:none}
.yst-search-empty{margin:0 0 24px;text-align:center;font-size:14.5px;color:rgba(16,50,91,.6)}
.yst-hidden{display:none !important}

/* ---- Department heading ---- */
.yst-dept-head{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:18px}
.yst-dept-title{margin:0;font-size:26px;font-weight:700;line-height:1.2;color:var(--yst-navy);letter-spacing:-.01em}
.yst-dept-accent{display:block;width:56px;height:3px;margin-top:10px;background:var(--yst-gold);border-radius:2px}
.yst-dept-desc{margin:8px 0 0;font-size:15px;line-height:1.6;color:rgba(16,50,91,.65);max-width:70ch}

/* ---- Carousel ---- */
.yst-carousel{position:relative}
.yst-track{
	display:flex;
	align-items:stretch;              /* equal card heights */
	gap:var(--yst-gap);
	overflow-x:auto;overflow-y:hidden;
	scroll-snap-type:x proximity;
	scroll-behavior:smooth;
	-webkit-overflow-scrolling:touch;
	padding:6px 2px 16px;
	scrollbar-width:none;
}
.yst-track::-webkit-scrollbar{height:0;width:0;display:none}
.yst-carousel.yst-dragging .yst-track{scroll-behavior:auto;cursor:grabbing;scroll-snap-type:none}
.yst-carousel.yst-grab .yst-track{cursor:grab}

/* ---- Yardscape card: gold frame, photo, navy name-band ---- */
.yst-card{
	flex:0 0 var(--yst-card-w);
	width:var(--yst-card-w);
	scroll-snap-align:start;
	user-select:none;-webkit-user-select:none;
	display:flex;flex-direction:column;      /* + stretch => equal heights */
	background:var(--yst-navy);
	border:2px solid var(--yst-gold);
	border-radius:18px;
	overflow:hidden;
	box-shadow:0 12px 30px rgba(16,50,91,.14);
	transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease;
	will-change:transform;
}
.yst-card-media{
	position:relative;
	flex:0 0 var(--yst-img-h);
	height:var(--yst-img-h);
	overflow:hidden;
	background:rgba(255,255,255,.06);
}
.yst-card-media .yst-photo{
	width:100%;height:100%;
	object-fit:cover;object-position:top center;display:block;
	transition:transform .5s cubic-bezier(.16,1,.3,1);
	-webkit-user-drag:none;user-select:none;-webkit-user-select:none;  /* don't ghost-drag the image while scroll-dragging */
}
.yst-photo-ph{display:flex;align-items:center;justify-content:center;font-size:64px;font-weight:700;color:rgba(255,255,255,.4)}
.yst-team.yst-zoom .yst-card:hover .yst-photo{transform:scale(1.06)}

.yst-card-info{
	flex:1 1 auto;                       /* fills remaining height so all cards match */
	display:flex;flex-direction:column;justify-content:center;align-items:center;
	text-align:center;gap:3px;
	padding:16px 14px 18px;
	background:var(--yst-navy);
}
.yst-card-name{margin:0;font-size:17px;font-weight:700;line-height:1.25;color:#fff}
.yst-card-role{font-size:12.5px;font-weight:600;line-height:1.35;color:var(--yst-gold);letter-spacing:.02em}
.yst-card-contact{margin-top:8px;display:flex;flex-direction:column;gap:2px}
.yst-card-contact a{font-size:12.5px;color:rgba(255,255,255,.82);text-decoration:none;word-break:break-word}
.yst-card-contact a:hover{color:#fff;text-decoration:underline}
.yst-card-bio{margin:8px 0 0;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.72)}

/* ---- Navigation arrows: perfectly round, frosted glass ---- */
.yst-nav{
	position:absolute;top:calc(var(--yst-img-h)/2 + 6px);
	transform:translateY(-50%);
	width:44px !important;height:44px !important;min-width:44px !important;z-index:3;box-sizing:border-box;flex:0 0 auto;line-height:0;
	display:flex !important;align-items:center;justify-content:center;
	padding:0 !important;border:1px solid rgba(255,255,255,.55);border-radius:50% !important;aspect-ratio:1/1;
	background:rgba(255,255,255,.55);
	-webkit-backdrop-filter:blur(12px) saturate(1.4);
	backdrop-filter:blur(12px) saturate(1.4);
	color:var(--yst-navy);cursor:pointer;
	box-shadow:0 6px 20px rgba(16,50,91,.20);
	transition:opacity .2s ease,transform .2s ease,background .2s ease;
	opacity:0;pointer-events:none;
}
.yst-carousel:hover .yst-nav{opacity:1;pointer-events:auto}
.yst-nav:hover{transform:translateY(-50%) scale(1.08);background:rgba(255,255,255,.8)}
.yst-prev{left:-10px}
.yst-next{right:-10px}
.yst-nav[disabled]{opacity:0 !important;pointer-events:none}
.yst-nav[hidden]{display:none}

/* ---- Editor empty state ---- */
.yst-empty{padding:28px;border:1px dashed rgba(16,50,91,.3);border-radius:12px;color:rgba(16,50,91,.7);text-align:center}

/* ---- Responsive ---- */
@media (max-width:1024px){ .yst-dept-title{font-size:23px} }
@media (max-width:767px){
	/* One card per view on mobile (with a small peek to signal scrolling).
	   Container-relative + capped so it never becomes oversized. */
	.yst-team{--yst-card-w:min(calc(100% - 24px), 460px) !important}
	/* Photo scales with the card width (proper portrait headshot, not stretched). */
	.yst-card-media{flex:0 0 auto !important;height:auto !important;aspect-ratio:4 / 5}
	.yst-dept-title{font-size:20px}
	.yst-nav{display:none !important}
	.yst-track{scroll-snap-type:x mandatory}
	.yst-card-info{padding:16px 16px 18px}
	.yst-card-name{font-size:17px}
	.yst-card-role{font-size:12.5px;line-height:1.35}
}

@media (prefers-reduced-motion:reduce){
	.yst-track{scroll-behavior:auto}
	.yst-card,.yst-photo,.yst-nav{transition:none}
}

/* ---- Grid layout (Yardscape-style cards) ----
   Reuses the .yst-card markup; only the wrapper modifier .yst-team--grid changes it.
   No .yst-carousel is rendered in grid mode, so the carousel JS no-ops. */
.yst-team--grid .yst-grid{
	display:grid;
	grid-template-columns:repeat(var(--yst-cols,3),minmax(0,1fr));
	gap:var(--yst-gap);
}
.yst-team--grid .yst-card{
	flex:initial;width:auto;min-width:0;      /* min-width:0 stops grid items from overflowing their track */
	background:transparent;
	border:2px solid var(--yst-gold);
	border-radius:15px;
	box-shadow:none;
}
/* Portrait media (4:5) fits the headshots without cropping heads; cover+top keeps faces in frame. */
.yst-team--grid .yst-card-media{flex:initial;height:auto;aspect-ratio:4/5;width:100%}
.yst-team--grid .yst-card-media .yst-photo{width:100%;height:100%;object-fit:cover;object-position:top center}
.yst-team--grid .yst-card-info{background:transparent}
.yst-team--grid .yst-card-name{color:var(--yst-navy)}
.yst-team--grid .yst-card-role{color:var(--yst-gold)}
/* Responsive column fallback (the widget's Columns control also drives --yst-cols per breakpoint). */
@media (max-width:1024px){ .yst-team--grid{--yst-cols:2} }
@media (max-width:600px){
	.yst-team--grid{--yst-cols:1}
	.yst-team--grid .yst-grid{max-width:420px;margin-inline:auto}  /* single column stays a sensible width, centered */
}