/*
 * GTH YouTube Carousel
 *
 * Native scroll-snap rather than a slider library: Elementor and Royal each
 * already load their own Swiper, and adding a third copy would cost weight and
 * risk a version clash for behaviour the browser does natively. Nothing here
 * uses the .swiper class, which matters because gth-rtl-layout forces that
 * class back to direction:ltr — this carousel is meant to run right-to-left on
 * the Arabic pages.
 */

.gth-yt {
	--gth-yt-gap: 16px;
	--gth-yt-radius: 14px;
	--gth-yt-edge: 0px;

	--gth-yt-ink: #14181f;
	--gth-yt-muted: #5b6472;
	--gth-yt-surface: #ffffff;
	--gth-yt-frame: rgba(16, 22, 33, 0.10);
	--gth-yt-shadow: 0 1px 2px rgba(16, 22, 33, 0.06), 0 8px 24px rgba(16, 22, 33, 0.08);
	--gth-yt-shadow-hover: 0 2px 6px rgba(16, 22, 33, 0.10), 0 18px 40px rgba(16, 22, 33, 0.16);
	--gth-yt-accent: #e5322d;
	--gth-yt-title: #028f94;
	--gth-yt-focus: #1f6feb;

	--gth-yt-per: var(--gth-yt-per-desktop, 4);

	/*
	 * Matches the gap Elementor's global widget spacing puts between widgets on
	 * the treatment category pages. That value is not a plain length — it grows
	 * with the viewport (measured: 56px at 788px wide, 77px at 1440px) — so it
	 * is reproduced as a fitted line through both measurements rather than
	 * frozen at one screen size.
	 */
	--gth-yt-space-top: clamp(44px, calc(31px + 3.2vw), 88px);

	position: relative;
	margin-top: var(--gth-yt-space-top);
	container-type: inline-size;
}

/* ------------------------------------------------------------------- width */

/*
 * "Contact Section Width": break out of Elementor's boxed container and sit a
 * responsive gutter in from each viewport edge. The percentage half cancels the
 * container width, so the result lands on the same pixels whatever container
 * the widget is dropped into. These exact values mirror
 * .gth-treatment-text-seo--wide in gth-elementor-slider — if that gutter is
 * ever retuned, this has to move with it or the two will drift apart.
 */
@media (min-width: 768px) {
	.gth-yt--wide {
		--gth-yt-wide-gutter: clamp(22px, 4.7vw, 96px);
		width: auto;
		max-width: none;
		margin-left: calc(50% - 50vw + var(--gth-yt-wide-gutter));
		margin-right: calc(50% - 50vw + var(--gth-yt-wide-gutter));
	}
}

/* ------------------------------------------------------------------ header */

.gth-yt__head {
	margin-bottom: 18px;
}

/*
 * Deliberately unstyled. The heading is whatever tag the editor picked, and it
 * should read exactly like every other heading of that level on the site, so
 * the theme owns its size, weight, colour and spacing entirely — there is no
 * .gth-yt__heading rule here on purpose, and adding one would defeat that.
 */

.gth-yt__subheading {
	margin: 6px 0 0;
	font-size: 0.975rem;
	line-height: 1.5;
	color: var(--gth-yt-muted);
}

/* ---------------------------------------------------------------- viewport */

.gth-yt__viewport {
	position: relative;
}

.gth-yt__scroller {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;

	/* Keeps a horizontal fling from turning into a browser back-swipe. */
	overscroll-behavior-x: contain;

	scroll-padding-inline-start: var(--gth-yt-edge);
	padding-inline: var(--gth-yt-edge);

	/* The arrows and the peeking next card already signal that it scrolls. */
	scrollbar-width: none;
	-ms-overflow-style: none;

	/* Card shadows would otherwise be clipped by the scroll box. */
	padding-block: 6px 14px;
	margin-block: -6px -14px;

	/*
	 * Rounds the clip itself, so a card cut off at the edge loses its corners
	 * to a curve rather than a right angle. The box is 6px taller than the
	 * cards at the top and 14px at the bottom (that padding is what lets card
	 * shadows escape), so the radius is set a little larger than the cards'
	 * own to stay visually concentric with them.
	 */
	border-radius: var(--gth-yt-box-radius, 20px);
}

.gth-yt__scroller::-webkit-scrollbar {
	display: none;
}

.gth-yt__scroller:focus-visible {
	outline: 2px solid var(--gth-yt-focus);
	outline-offset: 4px;
	border-radius: var(--gth-yt-radius);
}

.gth-yt__track {
	display: flex;
	gap: var(--gth-yt-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gth-yt__item {
	flex: 0 0 calc(
		(100% - (var(--gth-yt-per) - 1) * var(--gth-yt-gap)) / var(--gth-yt-per)
	);
	scroll-snap-align: start;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gth-yt__item::marker,
.gth-yt__item::before {
	content: none;
}

/* -------------------------------------------------------------------- card */

/* The <article> is the card; the link inside fills it. */
.gth-yt-card {
	display: flex;

	/*
	 * Must be explicit. While the link was the only child, row and column
	 * looked identical — but the player is inserted as a second child, and in
	 * row it would sit beside the link, halving its width and stretching it to
	 * the card's full height instead of staying 16:9.
	 */
	flex-direction: column;
	height: 100%;
	background: var(--gth-yt-surface);
	border-radius: var(--gth-yt-radius);
	box-shadow: var(--gth-yt-shadow);
	overflow: hidden;
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

/*
 * Scoped under .gth-yt so it outranks the theme's `.page-content a`, which
 * underlines every link in the content area and beats a lone class. The
 * underline has to come off here rather than on the title: text-decoration
 * drawn by an ancestor cannot be removed by a descendant.
 */
.gth-yt .gth-yt-card__link,
.gth-yt .gth-yt-card__link:hover,
.gth-yt .gth-yt-card__link:focus {
	display: flex;
	flex-direction: column;
	width: 100%;
	text-decoration: none;
	color: inherit;
}

/*
 * focus-within rather than focus-visible on the card: the focusable element is
 * the link inside, so the lift has to react to focus landing on a descendant.
 */
.gth-yt-card:hover,
.gth-yt-card:focus-within {
	transform: translateY(-3px);
	box-shadow: var(--gth-yt-shadow-hover);
}

.gth-yt-card__link:focus-visible {
	outline: 2px solid var(--gth-yt-focus);
	outline-offset: -3px;
	border-radius: var(--gth-yt-radius);
}

.gth-yt-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: #0d1017;
	overflow: hidden;
}

.gth-yt-card__img {
	display: block;
	width: 100%;
	height: 100%;

	/*
	 * hqdefault.jpg is 480x360: a 16:9 frame letterboxed inside 4:3. Cover
	 * crops those bars off exactly, which is why the always-present hqdefault
	 * can be used as the base source instead of maxresdefault, which 404s on
	 * older uploads.
	 */
	object-fit: cover;
	transition: transform 0.4s ease;
}

.gth-yt-card:hover .gth-yt-card__img {
	transform: scale(1.04);
}

/*
 * Stands in for a poster on an uploaded video that has none. It is inert: the
 * card's link handles the click, and the element only ever paints one frame.
 */
.gth-yt-card__img--frame {
	pointer-events: none;
	background: #0d1017;
}

.gth-yt-card__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
}

.gth-yt-card__play svg {
	width: 62px;
	height: auto;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
	transition: transform 0.22s ease;
}

.gth-yt-card__play-bg {
	fill: rgba(16, 18, 22, 0.72);
	transition: fill 0.22s ease;
}

.gth-yt-card__play-arrow {
	fill: #ffffff;
}

.gth-yt-card:hover .gth-yt-card__play-bg,
.gth-yt-card:focus-within .gth-yt-card__play-bg {
	fill: var(--gth-yt-accent);
}

.gth-yt-card:hover .gth-yt-card__play svg {
	transform: scale(1.08);
}

.gth-yt-card__time {
	position: absolute;
	inset-block-end: 8px;
	inset-inline-end: 8px;
	padding: 2px 6px;
	border-radius: 5px;
	background: rgba(9, 11, 15, 0.82);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1.4;

	/* Times read left-to-right even on the Arabic pages. */
	direction: ltr;
	unicode-bidi: isolate;
}

.gth-yt-card__body {
	display: block;
	padding: 12px 14px 16px;
}

.gth-yt-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--gth-yt-title);
	text-decoration: none;
}

.gth-yt-card__desc {
	display: -webkit-box;
	-webkit-line-clamp: var(--gth-yt-desc-lines, 2);
	line-clamp: var(--gth-yt-desc-lines, 2);
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 6px;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--gth-yt-muted);
}

/* Cover-only cards are pure image, so the frame does the visual work. */
.gth-yt--cover-only .gth-yt-card {
	box-shadow: none;
	background: transparent;
}

.gth-yt--cover-only .gth-yt-card__media {
	border-radius: var(--gth-yt-radius);
	box-shadow: var(--gth-yt-shadow);
	outline: 1px solid var(--gth-yt-frame);
	outline-offset: -1px;
}

.gth-yt--cover-only .gth-yt-card:hover .gth-yt-card__media,
.gth-yt--cover-only .gth-yt-card:focus-within .gth-yt-card__media {
	box-shadow: var(--gth-yt-shadow-hover);
}

/* -------------------------------------------------------------- in-card player */

/*
 * The player replaces the poster inside the card rather than opening an
 * overlay. Enlarging is left to the player's own fullscreen button, which both
 * the YouTube iframe and a <video> element already provide.
 */
.gth-yt-card__stage {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: var(--gth-yt-radius);
	overflow: hidden;
}

.gth-yt-card__stage iframe,
.gth-yt-card__stage video {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* The poster is redundant once its own card is playing. */
.gth-yt-card--playing .gth-yt-card__media {
	display: none;
}

/*
 * A cover-only card has nothing left in its link once the poster is hidden;
 * letting it keep flex space would leave a gap under the player.
 */
.gth-yt-card--playing .gth-yt-card__link:empty,
.gth-yt--cover-only .gth-yt-card--playing .gth-yt-card__link {
	display: none;
}

.gth-yt-card--playing:hover,
.gth-yt-card--playing:focus-within {
	/* Nothing to preview any more, so drop the invitation to click. */
	transform: none;
	box-shadow: var(--gth-yt-shadow);
}

/* ------------------------------------------------------------------ arrows */

/*
 * Deliberately unchromed, to match the Elementor image slider directly above on
 * the homepage: a bare chevron in the site's teal, no circle, border or shadow.
 * The glyphs are Elementor's own eicon paths (see GTH_YT_Renderer::chevron).
 *
 * Every rule here is scoped under .gth-yt on purpose. Hello Elementor's
 * reset.css styles `[type="button"]` with a pink border and padding, and that
 * attribute selector has exactly the same specificity as a lone class — so with
 * the theme loading after this file, an unscoped .gth-yt__nav would lose on
 * source order alone. The extra class breaks the tie for good.
 */
.gth-yt .gth-yt__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	background: none;
	color: var(--gth-yt-arrow, #08878e);
	cursor: pointer;
	transition: opacity 0.2s ease, color 0.2s ease,
		transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.gth-yt .gth-yt__nav svg {
	width: 100%;
	height: 100%;

	/*
	 * With no plate behind it the chevron can land over a card image, so it
	 * carries a soft light halo purely for legibility.
	 */
	filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9))
		drop-shadow(0 1px 6px rgba(255, 255, 255, 0.65));
}

.gth-yt .gth-yt__nav--prev {
	inset-inline-start: -34px;
}

.gth-yt .gth-yt__nav--next {
	inset-inline-end: -34px;
}

/* The chevrons are drawn pointing left/right; mirror them for RTL. */
[dir="rtl"] .gth-yt .gth-yt__nav svg,
.gth-rtl .gth-yt .gth-yt__nav svg {
	transform: scaleX(-1);
}

/*
 * background and colour are restated here on purpose. The theme's
 * `[type="button"]:hover` rule has the same specificity as this file's base
 * .gth-yt .gth-yt__nav rule and loads after it, so without these the arrow
 * turned into the theme's pink pill on hover.
 */
.gth-yt .gth-yt__nav:hover,
.gth-yt .gth-yt__nav:focus-visible {
	background: none;
	border: 0;
	color: var(--gth-yt-arrow-hover, #0aa3ab);
}

.gth-yt .gth-yt__nav:hover {
	/* A small, soft lift — the icon grows a touch, nothing more. */
	transform: translateY(-50%) scale(1.08);
}

.gth-yt .gth-yt__nav:active {
	transform: translateY(-50%) scale(1.02);
}

.gth-yt .gth-yt__nav:focus-visible {
	outline: 2px solid var(--gth-yt-focus);
	outline-offset: 2px;
	border-radius: 6px;
}

.gth-yt .gth-yt__nav[disabled] {
	opacity: 0;
	pointer-events: none;
}

/*
 * Arrows exist for mouse users. On touch the finger is the control, and a
 * floating button would just cover a card.
 */
@media (hover: none), (pointer: coarse) {
	.gth-yt .gth-yt__nav {
		display: none !important;
	}
}

/* ------------------------------------------------------------- breakpoints */

@media (max-width: 1024px) {
	.gth-yt {
		--gth-yt-per: var(--gth-yt-per-tablet, 2.2);
	}

	.gth-yt .gth-yt__nav {
		display: none;
	}
}

@media (max-width: 767px) {
	.gth-yt {
		--gth-yt-per: var(--gth-yt-per-mobile, 1.15);
		--gth-yt-gap: 12px;
	}

	.gth-yt__head {
		margin-bottom: 14px;
	}

	.gth-yt-card__play svg {
		width: 52px;
	}
}

/* --------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
	.gth-yt-card,
	.gth-yt-card__img,
	.gth-yt-card__play svg,
	.gth-yt .gth-yt__nav {
		transition: none !important;
	}

	.gth-yt-card:hover {
		transform: none;
	}

	.gth-yt-card:hover .gth-yt-card__img {
		transform: none;
	}
}