/* ============================================================
   Rocom Explainer Cards — front-end styles

   Themes and page builders (Elementor, Astra, Divi…) set very
   broad heading and link rules. Anything a theme commonly
   overrides — font size, weight, colour, line height — is
   declared here with high specificity and !important so the
   card always looks the way the Settings screen says it should.
   Everything else stays at normal weight so it remains easy to
   customise with your own CSS.
   ============================================================ */

.rcs-section *,
.rcs-section *::before,
.rcs-section *::after { box-sizing: border-box; }

.rcs-section {
	/* Fallbacks — the shortcode prints the real values inline. */
	--rcs-ink: #12153c;
	--rcs-body: #3a3a42;
	--rcs-line: #e6e6ec;
	--rcs-accent: #f0611f;
	--rcs-bg: #ffffff;
	--rcs-radius: 16px;
	--rcs-columns: 4;
	--rcs-font: 'Figtree', 'Gilroy', 'Segoe UI', system-ui, -apple-system, sans-serif;
	--rcs-title-size: 22px;
	--rcs-title-size-m: 19px;
	--rcs-title-weight: 800;
	--rcs-title-lh: 1.28;
	--rcs-body-size: 15.5px;
	--rcs-label-size: 16px;
	--rcs-button-size: 15.5px;

	font-family: var(--rcs-font);
	background: var(--rcs-bg);
	padding: 60px 24px;
}

.rcs-section .rcs-container {
	max-width: 1320px;
	margin: 0 auto;
}

.rcs-section .rcs-section__heading {
	margin: 0 0 34px !important;
	font-family: var(--rcs-font) !important;
	font-size: calc(var(--rcs-title-size) * 1.45) !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.02em;
	color: var(--rcs-ink) !important;
}

.rcs-section .rcs-grid {
	display: grid;
	grid-template-columns: repeat(var(--rcs-columns), minmax(0, 1fr));
	gap: 32px;
}

/* ---------- card ---------- */
.rcs-section .rcs-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--rcs-line);
	border-radius: var(--rcs-radius);
	overflow: hidden;
	margin: 0;
	box-shadow: 0 1px 2px rgba(18, 21, 60, 0.04);
	transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.rcs-section .rcs-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -18px rgba(18, 21, 60, 0.28);
}

/* ---------- media ---------- */
.rcs-section .rcs-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #05070d;
	line-height: 0;
}

.rcs-section .rcs-card__media img {
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	display: block;
	margin: 0;
	border-radius: 0;
	transition: transform 0.5s ease;
}

.rcs-section .rcs-card:hover .rcs-card__media img { transform: scale(1.04); }

.rcs-section .rcs-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle at 50% 45%, var(--rcs-ph, #2f62e8) 0%, rgba(0, 0, 0, 0.85) 65%, #05070d 100%);
	opacity: 0.9;
}

.rcs-section .rcs-card__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: none;
	border: 0;
}

/* ---------- badge ---------- */
.rcs-section .rcs-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	display: inline-block;
	padding: 7px 13px;
	border-radius: 6px;
	font-family: var(--rcs-font) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff !important;
	line-height: 1 !important;
}

/* ---------- body ---------- */
.rcs-section .rcs-card__body {
	flex: 1 1 auto;
	padding: 26px 26px 30px;
}

/* Title — the rule themes fight hardest over, so it is locked down. */
.rcs-section .rcs-card .rcs-card__title,
.rcs-section .rcs-card h3.rcs-card__title {
	margin: 0 0 14px !important;
	padding: 0 !important;
	font-family: var(--rcs-font) !important;
	font-size: var(--rcs-title-size) !important;
	line-height: var(--rcs-title-lh) !important;
	font-weight: var(--rcs-title-weight) !important;
	letter-spacing: -0.01em;
	text-transform: none !important;
	color: var(--rcs-ink) !important;
}

.rcs-section .rcs-card .rcs-card__title a,
.rcs-section .rcs-card .rcs-card__title a:link,
.rcs-section .rcs-card .rcs-card__title a:visited {
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
	text-decoration: none !important;
	box-shadow: none !important;
	background: none !important;
}

.rcs-section .rcs-card .rcs-card__title a:hover,
.rcs-section .rcs-card .rcs-card__title a:focus {
	color: var(--rcs-accent) !important;
}

.rcs-section .rcs-card .rcs-card__excerpt {
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--rcs-font) !important;
	font-size: var(--rcs-body-size) !important;
	line-height: 1.62 !important;
	font-weight: 400 !important;
	color: var(--rcs-body) !important;
}

/* ---------- footer ---------- */
.rcs-section .rcs-card__footer {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 22px 26px;
	border-top: 1px solid var(--rcs-line);
	position: relative;
	z-index: 2;
}

.rcs-section .rcs-avatar {
	position: relative;
	flex: 0 0 auto;
	width: 62px;
	height: 62px;
	border-radius: 13px;
	overflow: hidden;
	background: #1b1410;
	padding: 0;
	margin: 0;
	border: 0;
	display: block;
	box-shadow: none;
}

.rcs-section .rcs-avatar img {
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	display: block;
	margin: 0;
	border-radius: 0;
}

.rcs-section .rcs-avatar__ring {
	position: absolute;
	inset: 6px;
	border: 2px solid rgba(255, 255, 255, 0.92);
	border-radius: 50%;
	pointer-events: none;
}

.rcs-section .rcs-avatar--play {
	cursor: pointer;
	transition: transform 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.rcs-section .rcs-avatar--play:hover { transform: scale(1.05); }

.rcs-section .rcs-avatar__play {
	position: absolute;
	inset: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.35);
	color: #fff;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.rcs-section .rcs-avatar--play:hover .rcs-avatar__play,
.rcs-section .rcs-avatar--play:focus-visible .rcs-avatar__play { opacity: 1; }

.rcs-section .rcs-meta { min-width: 0; }

.rcs-section .rcs-meta__label {
	display: block;
	font-family: var(--rcs-font) !important;
	font-size: var(--rcs-label-size) !important;
	font-weight: 700 !important;
	color: var(--rcs-ink) !important;
	line-height: 1.2 !important;
	margin: 0 0 6px !important;
}

/* Read More — themes often repaint links grey, so lock the colour. */
.rcs-section .rcs-card__footer a.rcs-more,
.rcs-section .rcs-card__footer a.rcs-more:link,
.rcs-section .rcs-card__footer a.rcs-more:visited {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--rcs-font) !important;
	font-size: var(--rcs-button-size) !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	color: var(--rcs-accent) !important;
	opacity: 1 !important;
	text-decoration: none !important;
	background: none !important;
	box-shadow: none !important;
	border: 0;
	padding: 0;
}

.rcs-section .rcs-card__footer a.rcs-more:hover,
.rcs-section .rcs-card__footer a.rcs-more:focus {
	color: var(--rcs-accent) !important;
	text-decoration: none !important;
	opacity: 0.85 !important;
}

.rcs-section .rcs-card__footer a.rcs-more .rcs-more__text {
	color: inherit !important;
	font: inherit !important;
}

.rcs-section .rcs-more svg {
	flex: 0 0 auto;
	color: var(--rcs-accent);
	transition: transform 0.25s ease;
}

.rcs-section .rcs-more:hover svg { transform: translateX(4px); }

.rcs-section a:focus-visible,
.rcs-section button:focus-visible {
	outline: 2px solid var(--rcs-accent);
	outline-offset: 3px;
	border-radius: 3px;
}

.rcs-empty {
	padding: 18px;
	border: 1px dashed #c9c9d4;
	border-radius: 8px;
	color: #6b6b78;
}

/* ---------- video modal ---------- */
.rcs-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.rcs-modal[hidden] { display: none; }

.rcs-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(8, 10, 24, 0.82);
	backdrop-filter: blur(2px);
}

.rcs-modal__dialog {
	position: relative;
	width: min(960px, 100%);
	animation: rcs-pop 0.22s ease;
}

@keyframes rcs-pop {
	from { opacity: 0; transform: translateY(12px) scale(0.98); }
	to   { opacity: 1; transform: none; }
}

.rcs-modal__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 14px;
	overflow: hidden;
}

.rcs-modal__frame iframe,
.rcs-modal__frame video {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.rcs-modal__close {
	position: absolute;
	top: -46px;
	right: 0;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	cursor: pointer;
	transition: background 0.2s ease;
}

.rcs-modal__close:hover { background: rgba(255, 255, 255, 0.28); }

body.rcs-modal-open { overflow: hidden; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
	.rcs-section .rcs-grid {
		grid-template-columns: repeat(min(var(--rcs-columns), 2), minmax(0, 1fr));
		gap: 28px;
	}
}

@media (max-width: 620px) {
	.rcs-section { padding: 44px 18px; }

	.rcs-section .rcs-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.rcs-section .rcs-card .rcs-card__title,
	.rcs-section .rcs-card h3.rcs-card__title {
		font-size: var(--rcs-title-size-m) !important;
	}

	.rcs-section .rcs-section__heading {
		font-size: calc(var(--rcs-title-size-m) * 1.4) !important;
	}

	.rcs-modal__close {
		top: auto;
		bottom: -50px;
		right: 50%;
		transform: translateX(50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.rcs-section *,
	.rcs-modal * { transition: none !important; animation: none !important; }
}