/*
 Round 4 — Homepage (post ID 5) additions only.
 Loads after style.css (see functions.php ugis_enqueue_assets) so rules here
 override the base system without editing style.css directly.
 Scope: hero slider slide 3 subtitle/tagline lines, the widened "Our
 Expertise" section intro, expertise bullet-list styling, the Alumni teaser
 (reuses existing .ugis-image-band / .ugis-split — no new CSS needed there),
 and the featured/single YouTube-facade grid variants used in "Unseen hours"
 and the new "Impact Beyond the Court" strip.
*/

/* ---------------------------------------------------------------------
   Hero slide typography + readability (Round-4 review feedback).
   The base h1 scales to 5rem, which let a long headline dominate the whole
   slide and crowd the image. Pull hero headings down to a calmer scale and
   sit the text on a subtle semi-opaque panel (per Round-1 §14: a localized
   dark backing behind the text block, NOT a full overlay) so copy stays
   legible over any photo without hiding the image.
   --------------------------------------------------------------------- */
.ugis-hero-slide__content {
	/* localized readability panel behind just the text block */
	background: linear-gradient(180deg, rgba(10,10,10,0.10), rgba(10,10,10,0.55));
	border-left: 3px solid var(--ugis-red);
	padding: 1.5rem 1.75rem 1.75rem;
	margin: 0 0 6vh 3vw;
	border-radius: 0 8px 8px 0;
	max-width: 680px;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}
.ugis-hero-slide__content h1 {
	font-size: clamp(1.7rem, 3.6vw, 3rem);
	line-height: 1.08;
	margin-bottom: 0.6rem;
	text-shadow: 0 2px 12px rgba(0,0,0,0.55);
}
.ugis-hero-slide__content p {
	font-size: clamp(0.95rem, 1.4vw, 1.1rem);
	line-height: 1.5;
	text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
@media (max-width: 768px) {
	.ugis-hero-slide__content {
		margin: 0 4vw 5vh;
		padding: 1.15rem 1.25rem 1.35rem;
		max-width: none;
	}
	.ugis-hero-slide__content h1 {
		font-size: clamp(1.5rem, 6.5vw, 2.1rem);
	}
}

/* ---------------------------------------------------------------------
   Hero slide focal point (Round-4 review): base .ugis-hero-slide used
   background-position: center, which on a few slides cropped athletes'
   heads off the top of the frame. Pull the focal point up so heads clear
   the crop on every slide. Scoped to body.page-id-5 (the home page) only —
   .ugis-hero-slide is also reused as a plain page-header banner on the
   About page, which should keep its own default centering.
   --------------------------------------------------------------------- */
body.page-id-5 .ugis-hero-slide {
	background-position: center top;
}

/* ---------------------------------------------------------------------
   Homepage slider — show the FULL photo, never crop it (Mike's review:
   background-size:cover was cutting off large parts of every slide image
   on the ultra-wide/short hero band). Switch to contain so nothing is
   cropped; any letterboxing fills with the site's own near-black so it
   reads as an intentional frame rather than empty space. Scoped to
   .ugis-hero-slider so the About-page banner (which reuses .ugis-hero-slide
   outside the slider) keeps its original cover behaviour, untouched.
   --------------------------------------------------------------------- */
.ugis-hero-slider .ugis-hero-slide {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	background-color: var(--ugis-black);
}

/* ---------------------------------------------------------------------
   Hero slide 3 (UGIS Basketball Academy) — extra text lines beyond the
   standard h1 + single p pattern: a muted subtitle line and a bold
   brand-orange tagline line, sitting between the h1 and the body copy.
   --------------------------------------------------------------------- */
.ugis-hero-slide__subtitle {
	font-size: 1.05rem;
	color: var(--ugis-gray);
	margin-bottom: 0.5rem;
}
.ugis-hero-slide__tagline {
	font-family: var(--ugis-font-display);
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--ugis-orange);
	margin-bottom: 0.75rem;
}

/* ---------------------------------------------------------------------
   "Our Expertise" section intro paragraph — widened so long words never
   get clipped/wrapped mid-word (Round-4 §2). Give it real breathing room
   and let it reflow naturally instead of constraining it to a narrow
   column.
   --------------------------------------------------------------------- */
.ugis-section-intro {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 16px;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
	margin-bottom: 2rem;
}
@media (max-width: 768px) {
	.ugis-section-intro {
		max-width: 100%;
		padding: 0 20px;
		font-size: 1rem;
	}
}

/* Expertise bullet cards — turn the plain browser bullet into a small
   brand-orange marker and tighten list spacing inside each card. */
.ugis-card ul {
	margin: 0;
	padding-left: 1.1em;
}
.ugis-card ul li {
	margin-bottom: 0.35em;
}
.ugis-card ul li::marker {
	color: var(--ugis-orange);
}
.ugis-card ul li:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------
   "Our Expertise" + "What Athletes & Parents Say" card grids (Round-4
   review): cards read too vertical/narrow with large gutters between
   them. Tighten the gap to ~0.1in (~10px) and let cards use the full
   content width. Scoped to body.page-id-5 — .ugis-card-grid /
   .ugis-card-grid--3 are reused as-is on the Services/About/Media pages,
   which keep the original spacing.
   --------------------------------------------------------------------- */
body.page-id-5 .ugis-card-grid > .wp-block-group__inner-container,
body.page-id-5 .ugis-card-grid--3 > .wp-block-group__inner-container {
	gap: 10px;
}

/* "Our Expertise" (Round-4 review v2): the 5-card split read awkward and
   uneven. Rebuilt as a balanced 2x2 grid of the four pillars (Performance
   Training, Basketball, Fitness & Wellness, Consulting) — each card is half
   the row (wide, not tall/narrow), the two heavier lists (Performance 7,
   Consulting 5) sit diagonally so rows balance, and cards stretch to equal
   height per row. Consulting is one card again with all 5 sub-bullets. */
body.page-id-5 .ugis-card-grid--expertise > .wp-block-group__inner-container {
	grid-template-columns: repeat(2, 1fr);
	align-items: stretch;
}
body.page-id-5 .ugis-card-grid--expertise .ugis-card {
	padding: 1.75rem 2rem;
}
/* two-column bullet lists inside each wide card so the taller lists
   (Performance, Consulting) read short and wide, not as a long single column */
body.page-id-5 .ugis-card-grid--expertise .ugis-card ul {
	columns: 2;
	column-gap: 2rem;
}
body.page-id-5 .ugis-card-grid--expertise .ugis-card li {
	break-inside: avoid;
}
@media (max-width: 768px) {
	body.page-id-5 .ugis-card-grid--expertise > .wp-block-group__inner-container {
		grid-template-columns: 1fr;
	}
	body.page-id-5 .ugis-card-grid--expertise .ugis-card ul {
		columns: 1;
	}
}

/* Certification badges placed directly under the Coach Emmanuel portrait
   (Round-4 review — "Meet Coach Emmanuel" section). */
.ugis-coach-badges {
	margin-top: 1.25rem;
}
/* Certifications sit as a single horizontal (linear) strip directly under the
   portrait, spread evenly across the image width and kept on one line at all
   sizes (Round-4 review). */
.ugis-coach-badges .ugis-creds {
	flex-wrap: nowrap;
	justify-content: space-between;
	gap: 0.5rem;
	width: 100%;
}
.ugis-coach-badges .ugis-creds--cert .ugis-cred--logo {
	flex: 1 1 0;
	padding: 0.5rem;
	min-width: 0;
}
.ugis-coach-badges .ugis-creds--cert .ugis-cred--logo img {
	height: auto;
	max-height: 46px;
	max-width: 100%;
}

/* ---------------------------------------------------------------------
   YouTube facade grid variants — "Unseen hours" (2 featured videos) and
   the single-video "Impact Beyond the Court" strip. Reuses the existing
   .ugis-yt-grid / .ugis-yt-facade pattern from style.css, just constrains
   column count + width so 1-2 items don't stretch full-bleed.
   --------------------------------------------------------------------- */
.ugis-yt-grid--featured {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 760px;
	margin: 0 auto 2rem;
}
@media (max-width: 768px) {
	.ugis-yt-grid--featured {
		grid-template-columns: 1fr;
	}
}

/* Round-4 review: the single-video frame was capped at 480px inside a
   full-width section, so it read as "a wider frame, but a smaller video
   snippet showing" — a thumbnail floating in a lot of empty space. Widen
   the frame to fill most of the section's content width; the facade
   thumbnail itself already uses aspect-ratio: 16/9 + background-size:
   cover + background-position: center (base .ugis-yt-facade in
   style.css), so it now fills that wider frame edge-to-edge at a true
   16:9 with no letterboxing. */
.ugis-yt-grid--single {
	grid-template-columns: minmax(0, 1fr);
	max-width: 900px;
	margin: 0 auto;
	justify-content: center;
}

/* "Impact Beyond the Court" picture row — clean square mentoring photos
   beneath the community videos. */
.ugis-impact-pics { margin-top: 1.5rem; }
.ugis-impact-pics figure {
	margin: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 8px;
	border: 1px solid var(--ugis-line);
}
.ugis-impact-pics img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------------------------------------------------------------------
   "Impact Beyond the Court" — horizontal carousel strip (Round-4 review).
   Videos + mentoring photos sit in one linear, horizontally-scrollable
   track with prev/next arrows on the far sides. All items share a fixed
   height; videos are 16:9, photos square, so widths vary naturally.
   --------------------------------------------------------------------- */
.ugis-impact-carousel {
	position: relative;
	max-width: 1100px;
	margin: 1.5rem auto 0;
	padding: 0 3.25rem;
}
.ugis-impact-track {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;            /* Firefox */
	-ms-overflow-style: none;
	padding-bottom: 0.25rem;
}
.ugis-impact-track::-webkit-scrollbar { display: none; }

.ugis-impact-item {
	flex: 0 0 auto;
	height: 220px;
	border-radius: 8px;
	overflow: hidden;
	scroll-snap-align: start;
	border: 1px solid var(--ugis-line);
}
/* video facade item — 16:9 */
.ugis-impact-item.ugis-yt-facade {
	width: 391px;                     /* 220 * 16/9 */
	aspect-ratio: auto;
	background-size: cover;
	background-position: center;
}
/* photo item — square */
.ugis-impact-item.ugis-impact-pic {
	width: 220px;
	margin: 0;
}
.ugis-impact-item.ugis-impact-pic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Far-side toggle arrows */
.ugis-impact-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: var(--ugis-red);
	color: #fff;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	transition: background 0.2s ease, opacity 0.2s ease;
}
.ugis-impact-arrow:hover { background: var(--ugis-orange); }
.ugis-impact-arrow--prev { left: 0; }
.ugis-impact-arrow--next { right: 0; }
.ugis-impact-arrow:disabled { opacity: 0.3; cursor: default; }
.ugis-impact-carousel--static .ugis-impact-arrow { display: none; }
.ugis-impact-carousel--static { padding: 0; }

@media (max-width: 768px) {
	.ugis-impact-carousel { padding: 0 2.5rem; }
	.ugis-impact-item { height: 180px; }
	.ugis-impact-item.ugis-yt-facade { width: 320px; }
	.ugis-impact-item.ugis-impact-pic { width: 180px; }
}