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

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

/* ─── Inner container (icon & media templates) ────────────────────────────── */

.sc-cards__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-32);
	padding: var(--spacing-32);
	border-radius: var(--radius-20);
	width: 100%;
	box-sizing: border-box;
}

/* ─── Card template — no inner; flex directly on section ──────────────────── */

.sc-cards--card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-40);
	padding: 0px;
}

/* ═════════════════════════════════════════════════════════════════════════════
 * Section header
 * ═════════════════════════════════════════════════════════════════════════════ */

.sc-cards__header {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: center;
	width: 100%;
}

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

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

/* ─── Header text — white (for dark backgrounds) ─────────────────────────── */

.sc-cards--header-text-white .sc-cards__title {
	color: var(--text-on-dark-enabled);
}

.sc-cards--header-text-white .sc-cards__subtitle {
	color: #dedfdf;
}

/* ─── Header text — black (for light backgrounds) ─────────────────────────── */

.sc-cards--header-text-black .sc-cards__title {
	color: var(--text-main-enabled);
}

.sc-cards--header-text-black .sc-cards__subtitle {
	color: var(--text-main-enabled);
}

/* ─── Header layout — Horizontal (side-by-side) ──────────────────────────── */

.sc-cards--header-horizontal .sc-cards__header {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-24);
	text-align: left;
	overflow: hidden;
}

/* Keep the eyebrow on its own full-width row above the horizontal headline. */
.sc-cards--header-horizontal .sc-block-eyebrow {
	flex: 0 0 100%;
}

.sc-cards--header-horizontal .sc-cards__title {
	flex: 1 0 0;
	min-width: 343px;
}

.sc-cards--header-horizontal .sc-cards__subtitle {
	flex: 1 0 0;
	line-height: 1.2;
}

/* ═════════════════════════════════════════════════════════════════════════════
 * Cards grid
 * ═════════════════════════════════════════════════════════════════════════════ */

.sc-cards__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	justify-content: center;
	width: 100%;
}

.sc-cards--media .sc-cards__grid,
.sc-cards--card .sc-cards__grid {
	gap: 24px;
}

/* ─── Card item — base ────────────────────────────────────────────────────── */

.sc-cards__item {
	flex: 1 0 0;
}

/* ═════════════════════════════════════════════════════════════════════════════
 * Template: Icon
 * ═════════════════════════════════════════════════════════════════════════════ */

.sc-cards--icon .sc-cards__item {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-16);
	overflow: hidden;
	padding: 6px 0;
}

/* ─── Icon asset ──────────────────────────────────────────────────────────── */

.sc-cards__item-icon {
	width: 70px;
	height: 70px;
	flex-shrink: 0;
}

.sc-cards__item-icon-asset {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ─── Icon card content ───────────────────────────────────────────────────── */

.sc-cards--icon .sc-cards__item-content {
	display: flex;
	flex-direction: column;
	gap: 8px;
	letter-spacing: 0.5px;
}

.sc-cards--icon .sc-cards__item-title {
	font-family: var(--font-family-text);
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
	margin: 0;
}

.sc-cards--icon .sc-cards__item-description {
	font-family: var(--font-family-text);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	margin: 0;
}

.sc-cards--icon .sc-cards__item-description p:last-child {
	margin-bottom: 0;
}

/* ═════════════════════════════════════════════════════════════════════════════
 * Template: Media
 * ═════════════════════════════════════════════════════════════════════════════ */

.sc-cards--media .sc-cards__item {
	flex: 0 0 1;
	display: flex;
	flex-direction: column;
}

.sc-cards--media .sc-cards__item-media {
	width: 100%;
	height: var(--sc-cards-media-height, auto);
	display: block;
	object-fit: cover;
	border-radius: var(--radius-16) var(--radius-16) 0 0;
	aspect-ratio: 16 / 9;
}

/* ─── Media card content ──────────────────────────────────────────────────── */

.sc-cards--media .sc-cards__item-content {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: var(--spacing-16);
	background-color: var(--sc-cards-card-bg);
	border-radius: 0 0 var(--spacing-16) var(--spacing-16);
	height: 100%;
}

.sc-cards--media .sc-cards__item-title {
	font-family: var(--font-family-text);
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
	margin: 0;
}

.sc-cards--media .sc-cards__item-description {
	font-family: var(--font-family-text);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	margin: 0;
}

.sc-cards--media .sc-cards__item-description p:last-child {
	margin-bottom: 0;
}

/* ═════════════════════════════════════════════════════════════════════════════
 * Template: Card
 * ═════════════════════════════════════════════════════════════════════════════ */

.sc-cards--card .sc-cards__item {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-32);
	background: var(--sc-cards-card-bg, var(--bg-main-container));
	border-radius: var(--radius-32);
	padding: var(--spacing-16);
	justify-content: space-between;
	align-items: center;
}

/* ─── Card item content ───────────────────────────────────────────────────── */

.sc-cards--card .sc-cards__item-content {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

.sc-cards--card .sc-cards__item-title {
	font-family: var(--font-family-text);
	font-size: 24px;
	font-weight: 700;
	line-height: normal;
	margin: 0;
}

.sc-cards--card .sc-cards__item-description {
	font-family: var(--font-family-text);
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
	margin: 0;
}

.sc-cards--card .sc-cards__item-description p:last-child {
	margin-bottom: 0;
}

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

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

/* ─── Card media wrapper ──────────────────────────────────────────────────── */

.sc-cards__item-media-wrapper .sc-cards__item-media {
	width: 100%;
	height: var(--sc-cards-media-height, 100%);
	display: block;
	object-fit: cover;
	aspect-ratio: 1 / 1;
	border-radius: 24px;
}

/* ─── Card image object-fit (Admin setting — Media & Card templates) ──────────
 * Overrides the default cover on both templates; must follow their rules to win
 * on equal specificity. Contain letterboxes onto the existing card background. */
.sc-cards--object-fit-contain .sc-cards__item-media {
	object-fit: contain;
}

/* ─── Card text color modifiers (must follow all template rules) ──────────── */

.sc-cards--card-text-white .sc-cards__item-title,
.sc-cards--card-text-white .sc-cards__item-description {
	color: var(--text-on-dark-enabled);
}

.sc-cards--card-text-black .sc-cards__item-title,
.sc-cards--card-text-black .sc-cards__item-description {
	color: var(--text-main-enabled);
}

/* ═════════════════════════════════════════════════════════════════════════════
 * CTAs
 * ═════════════════════════════════════════════════════════════════════════════ */

.sc-cards__ctas {
	display: flex;
	gap: var(--spacing-12);
	justify-content: center;
	align-items: center;
	width: 100%;
}

.sc-cards__primary-cta,
.sc-cards__secondary-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;
}

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

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

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

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

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

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

/* ─── Placeholder (editor only) ───────────────────────────────────────────── */

.sc-cards__placeholder {
	text-align: center;
	font-style: italic;
	opacity: 0.7;
}

/* ═════════════════════════════════════════════════════════════════════════════
 * Responsive — Tablet: max-width 1024px
 * ═════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
	.sc-cards__inner {
		padding: var(--spacing-24);
		gap: var(--spacing-24);
	}

	.sc-cards--card {
		gap: var(--spacing-32);
	}

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

	/* 2 cards per row on tablet */
	.sc-cards__item {
		flex: 1 1 calc(50% - 16px);
		min-width: 0;
	}

	.sc-cards--media .sc-cards__item {
		flex: 1 1 calc(50% - 12px);
		width: auto;
	}

	.sc-cards--card .sc-cards__item {
		flex: 1 1 calc(50% - 12px);
		min-width: 0;
	}

	.sc-cards__ctas {
		flex-direction: column;
		align-items: stretch;
	}
}

/* ═════════════════════════════════════════════════════════════════════════════
 * Responsive — Mobile: max-width 767px
 * ═════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
	.sc-cards {
		padding: var(--spacing-24) var(--padding-screen);
	}

	.sc-cards__inner {
		padding: var(--spacing-20);
		gap: var(--spacing-20);
	}

	.sc-cards--card {
		padding: var(--spacing-24) var(--padding-screen);
		gap: var(--spacing-24);
	}

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

	/* 1 card per row on mobile */
	.sc-cards__item {
		flex: 1 1 100%;
	}

	.sc-cards--media .sc-cards__item {
		flex: 1 1 100%;
		width: 100%;
	}

	.sc-cards--card .sc-cards__item {
		flex: 1 1 100%;
		height: auto;
	}

	.sc-cards--header-horizontal .sc-cards__header {
		flex-direction: column;
		text-align: center;
	}

	.sc-cards--header-horizontal .sc-cards__title {
		min-width: 0;
	}

	.sc-cards__primary-cta,
	.sc-cards__secondary-cta {
		padding: 14px 32px;
		font-size: 16px;
	}
}