/*
 * Actualidad Meta Card — observatorio-cero-theme
 *
 * Styles for the [oc_actualidad_meta_card] shortcode rendered in single-actualidad.html.
 * Two-column card: calendar sheet on the left, metadata rows on the right.
 *
 * Uses only CSS custom properties from theme.json / color-modes.css.
 */

/* ═══════════════════════════════════════════
 * Meta Card Wrapper (defined in single-actualidad.html)
 * ═══════════════════════════════════════════ */

.oc-actualidad-meta-card-wrapper {
	background-color: var(--wp--preset--color--surface-container-low);
	border: var(--wp--custom--ui--decoration--border) solid color-mix(in srgb, var(--wp--preset--color--outline-variant) var(--wp--custom--blend--border), transparent);
	border-radius: var(--wp--custom--border-radius--lg);
	box-shadow: none;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-left: auto;
	margin-right: auto;
	transition:
		border-color var(--wp--custom--mode-transitions--duration, 0.3s) var(--wp--custom--mode-transitions--timing, ease),
		box-shadow var(--wp--custom--mode-transitions--duration, 0.3s) var(--wp--custom--mode-transitions--timing, ease);
}

.oc-actualidad-meta-card-wrapper:hover,
.oc-actualidad-meta-card-wrapper:focus-visible {
	box-shadow: var(--wp--preset--shadow--medium);
	border-color: color-mix(in srgb, var(--wp--preset--color--primary) var(--wp--custom--blend--border), transparent);
}

.oc-actualidad-meta-card-wrapper:focus-visible {
	outline: var(--wp--custom--ui--focus--width) solid var(--wp--preset--color--primary);
	outline-offset: var(--wp--custom--ui--focus--offset);
}

/* ═══════════════════════════════════════════
 * Meta Card Container
 * ═══════════════════════════════════════════ */

.oc-actualidad-meta-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--50);
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin: 0 auto;
}

@media (min-width: 782px) {
	.oc-actualidad-meta-card {
		display: grid;
		grid-template-columns: 8% 1fr;  /* 8% calendario, 92% contenido */
		align-items: center;
		justify-items: stretch;
		gap: var(--wp--preset--spacing--60);
	}
}

/* ═══════════════════════════════════════════
 * Calendar Sheet
 * ═══════════════════════════════════════════ */

.oc-actualidad-meta-calendar {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--ui--sizes--calendar);
	min-width: var(--wp--custom--ui--sizes--calendar);
	background-color: var(--wp--preset--color--surface-container-lowest);
	border: var(--wp--custom--ui--border-width--thin) solid var(--wp--preset--color--outline-variant);
	border-top: none;
	border-radius: var(--wp--custom--border-radius--lg);
	box-shadow: var(--wp--preset--shadow--medium);
	overflow: hidden;
	flex-shrink: 0;
	transition: transform var(--wp--custom--mode-transitions--duration) var(--wp--custom--mode-transitions--timing);
}

.oc-actualidad-meta-card-wrapper:hover .oc-actualidad-meta-calendar,
.oc-actualidad-meta-card-wrapper:focus-visible .oc-actualidad-meta-calendar {
	transform: scale(var(--wp--custom--ui--scale--medium));
}

.oc-actualidad-meta-calendar__top {
	display: block;
	width: 100%;
	height: var(--wp--custom--ui--sizes--calendar-top);
	background-color: var(--wp--preset--color--primary);
	flex-shrink: 0;
}

.oc-actualidad-meta-calendar__month {
	font-size: var(--wp--preset--font-size--label-md);
	font-weight: var(--wp--custom--typography--font-weight--label-md);
	color: var(--wp--preset--color--primary);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--typography--letter-spacing--label-sm);
	margin-top: var(--wp--preset--spacing--30);
}

.oc-actualidad-meta-calendar__day {
	font-size: var(--wp--preset--font-size--display-sm);
	font-weight: var(--wp--custom--typography--font-weight--superbold);
	line-height: 1;
	color: var(--wp--preset--color--primary);
}

.oc-actualidad-meta-calendar__year {
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--on-surface-variant);
	margin-bottom: var(--wp--preset--spacing--30);
}

/* ═══════════════════════════════════════════
 * Metadata Rows
 * ═══════════════════════════════════════════ */

.oc-actualidad-meta-card__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--wp--preset--spacing--30);
	width: 100%;
	flex: 1 1 auto;
	min-width: 0;
}

.oc-actualidad-meta-card__rows {
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-flow: row;
	gap: var(--wp--preset--spacing--50);
	justify-items: stretch;
	width: 100%;
}

.oc-actualidad-meta-card__rows--multi-column {
	display: grid;
	grid-template-columns: repeat(2, 1fr);  /* Dos columnas iguales en desktop */
	grid-template-rows: auto auto;
	grid-auto-flow: column;
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--20);
}

@media (max-width: 767px) {
	.oc-actualidad-meta-card__rows--multi-column {
		grid-template-columns: 1fr !important;  /* 1 sola columna: cada metadato en una fila */
		grid-template-rows: auto !important;
		grid-auto-flow: row !important;
		gap: var(--wp--preset--spacing--30) !important;
	}
}

.oc-actualidad-meta-card .oc-actualidad-meta-row {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--body-lg);
	color: var(--wp--preset--color--on-surface);
	margin: 0;
	min-width: 0;
	max-width: 100%;
}

@media (max-width: 767px) {
	.oc-actualidad-meta-card .oc-actualidad-meta-row {
		font-size: var(--wp--preset--font-size--body-md, 0.9375rem) !important;
		gap: var(--wp--preset--spacing--20) !important;
	}
}

.oc-actualidad-meta-card .oc-actualidad-meta-row > span:last-child {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 767px) {
	.oc-actualidad-meta-card .oc-actualidad-meta-row > span:last-child {
		overflow: visible !important;
		text-overflow: clip !important;
		white-space: normal !important;
		word-break: break-word !important;
	}
}

/* El enlace ocupa una celda normal del grid para respetar el flujo por
 * columnas: primero se llena la columna 1, luego la columna 2. */

.oc-actualidad-meta-card .oc-actualidad-meta-row__icon {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--wp--preset--color--primary);
}

.oc-actualidad-meta-card .oc-actualidad-meta-row__icon svg {
	width: var(--wp--custom--ui--sizes--icon-lg);
	height: var(--wp--custom--ui--sizes--icon-lg);
	fill: currentColor;
}

.oc-actualidad-meta-card .oc-actualidad-meta-row a {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	transition: color var(--wp--custom--mode-transitions--duration) var(--wp--custom--mode-transitions--timing);
}

.oc-actualidad-meta-card .oc-actualidad-meta-row a:hover {
	color: var(--wp--preset--color--primary);
	text-underline-offset: var(--wp--custom--ui--decoration--text-underline-offset, 2px);
}

/* ═══════════════════════════════════════════
 * Link Debajo de la Card
 * ═══════════════════════════════════════════ */

.oc-actualidad-meta-card__link-wrapper {
	display: flex;
	justify-content: center;
	margin-top: var(--wp--preset--spacing--50);
	width: 100%;
}

.oc-actualidad-meta-card__link-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.oc-actualidad-meta-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--body-lg);
	font-weight: var(--wp--custom--typography--font-weight--superbold);
	transition:
		transform var(--wp--custom--mode-transitions--duration) var(--wp--custom--mode-transitions--timing),
		color var(--wp--custom--ui--interaction--medium);
}

.oc-actualidad-meta-card__link:hover {
	
	transform: translateX(var(--wp--custom--ui--decoration--transform-translate-lg)) scale(var(--wp--custom--ui--scale--text));
}

.oc-actualidad-meta-card__link:focus-visible {
	outline: var(--wp--custom--ui--focus--width) solid var(--wp--preset--color--primary);
	outline-offset: var(--wp--custom--ui--focus--offset);
}

.oc-actualidad-meta-card__link-icon svg {
	width: var(--wp--custom--ui--sizes--icon-md);
	height: var(--wp--custom--ui--sizes--icon-md);
	fill: currentColor;
}

.oc-actualidad-meta-card__link svg {
	width: var(--wp--custom--ui--sizes--icon-md);
	height: var(--wp--custom--ui--sizes--icon-md);
	fill: currentColor;
}

/* ═══════════════════════════════════════════
 * Reduced Motion
 * ═══════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	.oc-actualidad-meta-card-wrapper,
	.oc-actualidad-meta-calendar,
	.oc-actualidad-meta-card .oc-actualidad-meta-row a {
		transition: none !important;
		animation: none !important;
	}

	.oc-actualidad-meta-card-wrapper:hover .oc-actualidad-meta-calendar,
	.oc-actualidad-meta-card-wrapper:focus-visible .oc-actualidad-meta-calendar {
		transform: none !important;
	}
}