/**
 * Post-build CSS for livingspacedesigns.co.uk.
 *
 * The theme ships a compiled style.css with no source anywhere, so fixes go
 * here rather than into the built file. Loaded last, after style.css.
 */

/* ---------------------------------------------------------------------------
 * Visualisation cards with no excerpt: keep the hover arrow off the title.
 *
 * Cards are a bottom-aligned flex column. On hover .card__body expands with
 * padding-bottom:96, which reveals the excerpt AND reserves the space the
 * absolutely positioned .card__btn sits in (bottom:60, height:78 - so it
 * occupies 60-138 from the bottom edge).
 *
 * Where a visualisation has no excerpt the template omits .card__body
 * entirely, so nothing reserves that space and the arrow lands on top of the
 * title. 23 of 35 visualisations have no excerpt, so this is the common case.
 *
 * Reserve the same 96 the excerpt would have, which lands the title exactly
 * where a final line of copy would sit. Only needed from 992px up - below
 * that .card__btn is in normal flow and cannot overlap.
 * ------------------------------------------------------------------------ */
@media (min-width: 992px) {
	.card__title {
		transition: margin-bottom 0.5s;
	}
}

@media (min-width: 992px) and (any-hover: hover) {
	.card:not(.card--showcase):not(:has(.card__body)):hover .card__title {
		margin-bottom: calc(96 / var(--media-breakdown));
	}
}

/* ---------------------------------------------------------------------------
 * Video showcase cards.
 *
 * In showcase mode the video IS the content: it plays on tap and carries no
 * link or title. Two things the normal card does actively prevent that.
 *
 * 1. .card__bg sits at z-index:-1, and .card::after covers the whole card to
 *    dim it on hover. An opacity:0 overlay still swallows pointer events, so
 *    both have to give way or the video can never be tapped.
 * 2. Native controls are a drag trap - the browser claims any gesture that
 *    starts on the control bar, so a card showing controls cannot be swiped.
 *    Idle cards therefore have no controls at all, just the poster and a play
 *    button, and the script only adds controls once playback has started.
 * ------------------------------------------------------------------------ */
.card--showcase::after {
	display: none;
}

.card--showcase .card__video {
	z-index: 1;
	pointer-events: auto;
	background-color: #000;
}

/* Matches the .card__btn circle, but centred and always visible while idle. */
.card__play {
	position: absolute;
	z-index: 2;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	border: calc(1 / var(--media-breakdown)) solid #eae7e0;
	border-radius: 50%;
	width: calc(96 / var(--media-breakdown));
	height: calc(96 / var(--media-breakdown));
	padding: 0;
	background-color: rgba(0, 0, 0, 0.35);
	color: #eae7e0;
	cursor: pointer;
	transition: background-color 0.35s, color 0.35s, opacity 0.35s;
}

@media (max-width: 991px) {
	.card__play {
		width: calc(72 / var(--media-breakdown));
		height: calc(72 / var(--media-breakdown));
	}
}

/* A CSS triangle rather than the iconsax font, which has no play glyph.
 * Nudged right so it reads as optically centred inside the circle. */
.card__play::after {
	content: "";
	margin-left: 12%;
	border-style: solid;
	border-width: calc(11 / var(--media-breakdown)) 0 calc(11 / var(--media-breakdown)) calc(18 / var(--media-breakdown));
	border-color: transparent transparent transparent currentColor;
}

@media (any-hover: hover) {
	.card__play:hover {
		background-color: #eae7e0;
		color: #000;
	}
}

/* The button is removed while the native controls are showing. */
.card__play[hidden] {
	display: none;
}