/*
 * "Systems Within Your Home" video panel, in the Manage Your Home accordion.
 *
 * The play control reuses the theme's existing .about-yt-vdo-playbtn circle so the
 * panel looks like the Pre Move In Training block already on this page. That class
 * was written for an <a>, and this panel uses a real <button> for keyboard support,
 * so the first rule here strips the styling a browser gives a button by default.
 *
 * IMA, 22/09/2026.
 */

/* ---- the play control is a button now, so undo the chrome it inherits ----
 *
 * Two sources to undo, not one. The browser's own button styling, and the theme's
 * own rule in style.css:
 *
 *     .btn, input[type="submit"], input[type="button"], button
 *     { min-width: 200px; padding: 22px 33px 23px; display: inline-block; }
 *
 * The original play control was an <a>, so it never matched that selector. A real
 * <button> does match it, and without the min-width reset the circle is dragged out
 * into a 200px wide oval. */
.swyh-video__play,
button.about-yt-vdo-playbtn {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
	width: 75px;
	height: 75px;
	font: inherit;
	line-height: 1;
	cursor: pointer;
}

/* ---- grid ---- */
.swyh-videos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px 26px;
}

.swyh-video {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The theme turns every list inside an accordion panel into a tick list:
 *
 *     .mang_hm_accordian .answer ul li
 *     { position: relative; padding-left: 35px; margin-bottom: 15px; }
 *     .mang_hm_accordian .answer ul li:before { content: '\f058'; ... }
 *
 * with padding-left dropping to 30px under 767px. That indent pushed each video
 * card 35px to the right of the accordion label it sits under. These cards are a
 * grid, not a tick list, so the indent, the spacing and the tick are all undone.
 *
 * The selectors below deliberately repeat .mang_hm_accordian and name ul.swyh-videos:
 * the theme's rules score (0,2,2) and (0,2,3), so a shorter selector loses to them
 * no matter where it sits in the file. Scoping to ul.swyh-videos also leaves any
 * list the editor writes in the introduction with its normal tick styling. */
.mang_hm_accordian .answer ul.swyh-videos > li {
	padding-left: 0;
	margin-bottom: 0;
}

.mang_hm_accordian .answer ul.swyh-videos > li:before,
.mang_hm_accordian .answer ul.swyh-videos > li::before,
.mang_hm_accordian .answer ul.swyh-videos > li::marker {
	content: none;
	display: none;
}

.swyh-intro {
	margin-bottom: 26px;
}

/* Breathing room on the right.
 *
 * The theme gives every accordion panel 82px of padding on the left (which is what
 * lines the content up under the panel label) but only 15px on the right:
 *
 *     .accordion-list > li .answer
 *     { padding-left: 82px; padding-right: 15px; ... }
 *
 * Text does not really show that up, but two large images do: the right hand card
 * sits almost against the edge of the white panel while the left has a wide margin.
 * Scoped to li.swyh-panel so the text panels keep the spacing they already had, and
 * applied to .answer rather than the grid so the introduction lines up with the
 * cards. The selector carries li.swyh-panel to outscore the theme's own rule. */
.accordion-list > li.swyh-panel .answer {
	padding-right: 45px;
}

@media only screen and (max-width: 767px) {
	.accordion-list > li.swyh-panel .answer {
		padding-right: 25px;
	}
}

/* ---- the poster and its play control ---- */
.swyh-video__media {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: 8px;
	background-color: #ebebeb;
}

.swyh-video__poster {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 16 / 9) {
	.swyh-video__media {
		padding-top: 56.25%;
	}
	.swyh-video__poster {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
	}
}

.swyh-video__poster--empty {
	background-color: #d9d9d9;
}

/* ---- titles ---- */
.swyh-video__title {
	margin: 14px 0 0;
	font-size: 20px;
	line-height: 1.35;
	color: #171717;
}

.swyh-video__desc {
	margin: 6px 0 0;
	font-size: 16px;
	line-height: 1.5;
}

/* ---- keyboard focus must be obvious, on the button and in the dialog ---- */
.swyh-video__play:focus-visible,
.swyh-panel .accord_trigger:focus-visible {
	outline: 3px solid #171717;
	outline-offset: 3px;
}

/* browsers without :focus-visible still get a visible ring */
.swyh-video__play:focus,
.swyh-panel .accord_trigger:focus {
	outline: 3px solid #171717;
	outline-offset: 3px;
}

.swyh-video__play:focus:not(:focus-visible),
.swyh-panel .accord_trigger:focus:not(:focus-visible) {
	outline: none;
}

/* ---- someone who prefers less motion should not get the hover grow ---- */
.swyh-video__play {
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.swyh-video__media:hover .swyh-video__play {
	transform: translate(-50%, -50%) scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
	.swyh-video__play {
		transition: none;
	}
	.swyh-video__media:hover .swyh-video__play {
		transform: translate(-50%, -50%);
	}
}

/* ---- narrow screens ---- */
@media only screen and (max-width: 767px) {
	.swyh-videos {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}
	.swyh-video__title {
		font-size: 18px;
	}
}