/**
 * Block: Media — Styles
 *
 * Front-end and editor styles for the acf/media block.
 *
 * @block   acf/media
 * @package SociosComponents
 */

/* ─── Base ────────────────────────────────────────────────────────────────── */

.sc-media {
	width: 100%;
	color: var(--text-main-enabled);
}

/* ─── Preview placeholder ─────────────────────────────────────────────────── */

.sc-media__preview-placeholder {
	padding: var(--spacing-40);
	text-align: center;
	border: 2px dashed var(--border-main-enabled);
	border-radius: var(--radius-8);
	color: var(--text-main-secondary);
}

/* ─── No-background template ──────────────────────────────────────────────── */

.sc-media--no-background {
	padding: var(--spacing-40) 0;
}

/* ─── Color-background template ───────────────────────────────────────────── */

.sc-media--color-background .sc-media__inner {
	border-radius: var(--radius-20);
	overflow: hidden;
	padding: var(--spacing-32);
}

/* ─── Media-background template ───────────────────────────────────────────── */

.sc-media--media-background .sc-media__inner {
	border-radius: var(--radius-20);
	overflow: hidden;
	position: relative;
	padding: var(--padding-large) var(--spacing-40);
}

.sc-media__bg-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.sc-media__bg-overlay {
	position: absolute;
	inset: 0;
	background-color: var(--sc-media-overlay, rgba(0, 0, 0, 0.45));
	z-index: 1;
}

/* ─── Inner layout ────────────────────────────────────────────────────────── */

.sc-media__inner {
	position: relative;
	z-index: 2;
}

/* ─── Layout grid — side media (left / right) ────────────────────────────── */

.sc-media--pos-left .sc-media__layout,
.sc-media--pos-right .sc-media__layout {
	display: flex;
	gap: var(--spacing-40);
	align-items: center;
	position: relative;
	z-index: 1;
}

/* ─── Layout grid — bottom media ─────────────────────────────────────────── */

.sc-media--pos-bottom .sc-media__layout {
	display: flex;
	gap: var(--spacing-40);
	position: relative;
	z-index: 1;
}

/* ─── Media column (side media) ───────────────────────────────────────────── */

.sc-media__media-col {
	flex: 0 0 auto;
	width: 470px;
	position: relative;
	z-index: 1;
}

.sc-media__side-media {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--radius-16);
	display: block;
	max-height: var(--sc-media-max-height, none);
}

/* ─── Object-fit contain modifier ─────────────────────────────────────────── */

.sc-media--fit-contain .sc-media__side-media,
.sc-media--fit-contain .sc-media__bottom-media {
	object-fit: contain;
}

/* ─── Video embed wrapper ─────────────────────────────────────────────────── */

.sc-media__embed-wrapper {
	margin: auto;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-16);
	overflow: hidden;
	position: relative;
	max-height: var(--sc-media-max-height, none);
}

.sc-media__embed-wrapper iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	border-radius: var(--radius-16);
}

/* ─── Bottom media container ──────────────────────────────────────────────── */

.sc-media__media-bottom {
	margin-top: var(--spacing-32);
	border-radius: var(--radius-16);
	overflow: hidden;
	position: relative;
	z-index: 1;
}

.sc-media__bottom-media {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	max-height: var(--sc-media-max-height, none);
}

/* ─── Text column ─────────────────────────────────────────────────────────── */

.sc-media__text-col {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-40);
	justify-content: center;
	flex: 1;
	min-width: 0;
}

/* ─── Text alignment — left ───────────────────────────────────────────────── */

.sc-media--align-left .sc-media__text-col {
	text-align: left;
	align-items: flex-start;
}

/* ─── Text alignment — center ─────────────────────────────────────────────── */

.sc-media--align-center .sc-media__text-col {
	text-align: center;
	align-items: center;
}

.sc-media--align-center .sc-media__ctas {
	justify-content: center;
}

/* ─── Text alignment — side (2-column: header left, body right) ───────────── */

.sc-media--align-side .sc-media__layout {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
}

.sc-media--align-side.sc-media--pos-bottom .sc-media__text-col {
	flex-direction: row;
	gap: var(--spacing-16);
}

.sc-media--align-side.sc-media--pos-bottom .sc-media__col-header,
.sc-media--align-side.sc-media--pos-bottom .sc-media__col-body {
	flex: 1;
	min-width: 0;
}

/* ─── Column header ───────────────────────────────────────────────────────── */

.sc-media__col-header {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
}

/* ─── Column body ─────────────────────────────────────────────────────────── */

.sc-media__col-body {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-32);
}

/* ─── Headline ────────────────────────────────────────────────────────────── */

/* Font properties via .sc-block-title in style-global.css */

/* ─── Subheading ──────────────────────────────────────────────────────────── */

/* Font properties via .sc-block-subtitle in style-global.css */

/* ─── Body ───────────────────────────────────────────────────────────────── */

.sc-media__body {
	font-family: var(--font-family-text);
	font-size: var(--font-size-16);
	font-weight: 500;
	line-height: 1.6;
}

.sc-media__body p:last-child {
	margin-bottom: 0;
}

.sc-media__body a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.sc-media__body a:hover {
	color: inherit;
	opacity: 0.7;
}

/* ─── Extra info text ─────────────────────────────────────────────────────── */

.sc-media__extra-info {
	font-family: var(--font-family-text);
	font-size: var(--font-size-12);
	font-weight: 500;
	line-height: 1;
	margin: 0;
}

/* ─── CTAs ────────────────────────────────────────────────────────────────── */

.sc-media__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-12);
}

.sc-media__cta {
	display: flex;
	padding: 16px 40px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	border-radius: 100px;
	border: 1.5px solid transparent;
	text-align: center;
	font-family: var(--font-family-display);
	text-decoration: none !important;
	font-size: 18px;
	font-weight: 500;
	line-height: 100%;
	letter-spacing: 0.5px;
	cursor: pointer;
	transition: opacity 0.2s ease;
	white-space: nowrap;
}

.sc-media__cta:hover {
	opacity: 0.9;
}

/* Primary CTA — Blue */
.sc-media__cta--primary.sc-media__cta--blue {
	background: var(--blue-500);
	border-color: var(--blue-500) !important;
	color: var(--light-neutral-0);
}

.sc-media__cta--primary.sc-media__cta--blue:hover {
	color: var(--light-neutral-0);
	opacity: 0.9;
}

/* Primary CTA — Orange */
.sc-media__cta--primary.sc-media__cta--orange {
	background: var(--orange-500);
	border-color: var(--orange-500) !important;
	color: var(--light-neutral-0);
}

.sc-media__cta--primary.sc-media__cta--orange:hover {
	color: var(--light-neutral-0);
	opacity: 0.9;
}

/* Secondary CTA */
.sc-media__cta--secondary {
	background: var(--light-neutral-0);
	border-color: var(--blue-500) !important;
	color: var(--blue-500);
}

.sc-media__cta--secondary:hover {
	color: var(--blue-500);
	opacity: 0.9;
}

/* ─── Text color modifiers (color / media background templates) ─────────── */

.sc-media--text-white .sc-media__title,
.sc-media--text-white .sc-media__subtitle,
.sc-media--text-white .sc-media__body,
.sc-media--text-white .sc-media__extra-info {
	color: var(--text-on-dark-enabled);
}

.sc-media--text-black .sc-media__title,
.sc-media--text-black .sc-media__subtitle,
.sc-media--text-black .sc-media__body,
.sc-media--text-black .sc-media__extra-info {
	color: var(--text-main-enabled);
}

/* ─── Color-background media container invert ─────────────────────────────── */

.sc-media--color-background .sc-media__side-media {
	border-radius: var(--radius-16);
}

.sc-media--color-background .sc-media__media-bottom {
	border-radius: var(--radius-16);
}

/* ─── Responsive — Tablet (≤ 1024px) ─────────────────────────────────────── */

@media screen and (max-width: 1024px) {

	.sc-media__media-col {
		width: 360px;
	}
}

/* ─── Responsive — Mobile (≤ 767px) ──────────────────────────────────────── */

@media screen and (max-width: 767px) {

	.sc-media--color-background .sc-media__inner {
		padding: var(--spacing-16);
	}

	.sc-media--media-background .sc-media__inner {
		padding: var(--spacing-40) var(--spacing-16);
	}

	/* Side layouts stack to single column, media on top */
	.sc-media--pos-left .sc-media__layout,
	.sc-media--pos-right .sc-media__layout {
		flex-wrap: wrap;
	}

	.sc-media__media-col {
		width: 100%;
		min-width: 100%;
	}

	.sc-media__side-media {
		width: 100%;
	}

	/* Side text alignment stacks to single column on mobile */
	.sc-media--align-side.sc-media--pos-bottom .sc-media__text-col {
		flex-direction: column;
	}

	.sc-media--align-side.sc-media--pos-bottom .sc-media__col-header,
	.sc-media--align-side.sc-media--pos-bottom .sc-media__col-body {
		width: 100%;
	}

	.sc-media__title {
		font-size: var(--font-size-32);
	}

	/* Font properties via .sc-block-subtitle in style-global.css */

	/* CTAs stack full-width on mobile */
	.sc-media__ctas {
		flex-direction: column;
	}

	.sc-media__cta {
		font-size: 16px;
		padding: 14px 32px;
		width: 100%;
	}

	.sc-media__media-bottom {
		height: auto;
	}
}