/*
 * Post Hero — observatorio-cero-theme
 *
 * Styles for the post hero pattern (inc/patterns/post-hero.php).
 * Transparent background, no image. Content: breadcrumb, category badge,
 * title, metadata row (author, date, word count, reading time).
 *
 * Uses only CSS custom properties from theme.json / color-modes.css.
 */

/* ═══════════════════════════════════════════
 * Post Hero — Container
 * ═══════════════════════════════════════════ */

.oc-hero-post {
	background: transparent;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--outline-variant) var(--wp--custom--blend--hairline), transparent);
}

/* ═══════════════════════════════════════════
 * Breadcrumbs — hover consistent with site links
 * ═══════════════════════════════════════════ */

.oc-hero-post .wp-block-breadcrumbs,
.oc-hero-post .wp-block-breadcrumbs a {
	text-decoration: none;
	color: var(--wp--preset--color--on-surface-variant);
	transition:
		color var(--wp--custom--ui--interaction--medium),
		transform var(--wp--custom--ui--interaction--medium);
	display: inline-block;
	transform: translateX(0) scale(1);
}

.oc-hero-post .wp-block-breadcrumbs a:hover {
	color: var(--wp--preset--color--primary);
	transform: translateX(4px) scale(var(--wp--custom--ui--scale--text));
}

/* ═══════════════════════════════════════════
 * Category Badge — core/post-terms
 * ═══════════════════════════════════════════ */

.oc-post-category-terms {
	display: inline-flex;
	gap: var(--wp--preset--spacing--20);
}

.oc-post-category-terms a {
	display: inline-flex;
	align-items: center;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--secondary-container);
	color: var(--wp--preset--color--on-secondary-container);
	border-radius: var(--wp--custom--border-radius--full);
	font-size: var(--wp--preset--font-size--label-md);
	font-weight: var(--wp--custom--typography--font-weight--label-md);
	letter-spacing: var(--wp--custom--typography--letter-spacing--label-sm);
	text-transform: uppercase;
	line-height: var(--wp--custom--typography--line-height--label-md);
	text-decoration: none;
	transition:
		background-color var(--wp--custom--ui--interaction--medium),
		color var(--wp--custom--ui--interaction--medium),
		transform var(--wp--custom--ui--interaction--medium);
	transform: translateX(0) scale(1);
}

.oc-post-category-terms a:hover {
	background-color: var(--wp--preset--color--primary-container);
	color: var(--wp--preset--color--on-primary-container);
	transform: translateX(4px) scale(var(--wp--custom--ui--scale--text));
}

.oc-post-category-terms a.oc-post-category-badge--editorial {
	background-color: var(--wp--preset--color--secondary-container);
	color: var(--wp--preset--color--on-secondary-container);
}

.oc-post-category-terms a.oc-post-category-badge--manifiesto {
	background-color: var(--wp--preset--color--tertiary-container);
	color: var(--wp--preset--color--on-tertiary-container);
}

.oc-post-category-terms a.oc-post-category-badge--actualidad {
	background-color: var(--wp--preset--color--primary-container);
	color: var(--wp--preset--color--on-primary-container);
}

.oc-post-category-terms a.oc-post-category-badge--evento {
	background-color: var(--wp--preset--color--surface-container-high);
	color: var(--wp--preset--color--on-surface);
}

.oc-post-category-terms a.oc-post-category-badge--ideas-dialogo {
	background-color: var(--wp--preset--color--surface-variant);
	color: var(--wp--preset--color--on-surface-variant);
}

.oc-post-category-terms a.oc-post-category-badge--tribuna-abierta {
	background-color: var(--wp--preset--color--secondary-container);
	color: var(--wp--preset--color--on-secondary-container);
}

.oc-post-category-terms a.oc-post-category-badge--recursos {
	background-color: var(--wp--preset--color--tertiary-container);
	color: var(--wp--preset--color--on-tertiary-container);
}

/* Legacy shortcode class — kept for backward compatibility */
.oc-post-category-badge {
	display: inline-flex;
	align-items: center;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--secondary-container);
	color: var(--wp--preset--color--on-secondary-container);
	border-radius: var(--wp--custom--border-radius--full);
	font-size: var(--wp--preset--font-size--label-md);
	font-weight: var(--wp--custom--typography--font-weight--label-md);
	letter-spacing: var(--wp--custom--typography--letter-spacing--label-sm);
	text-transform: uppercase;
	line-height: var(--wp--custom--typography--line-height--label-md);
	transition:
		background-color var(--wp--custom--ui--interaction--medium),
		color var(--wp--custom--ui--interaction--medium);
}

.oc-post-category-badge:hover {
	background-color: var(--wp--preset--color--primary-container);
	color: var(--wp--preset--color--on-primary-container);
}

/* Category color variants — each uses a different token combination */
.oc-post-category-badge--editorial {
	background-color: var(--wp--preset--color--secondary-container);
	color: var(--wp--preset--color--on-secondary-container);
}

.oc-post-category-badge--manifiesto {
	background-color: var(--wp--preset--color--tertiary-container);
	color: var(--wp--preset--color--on-tertiary-container);
}

.oc-post-category-badge--actualidad {
	background-color: var(--wp--preset--color--primary-container);
	color: var(--wp--preset--color--on-primary-container);
}

.oc-post-category-badge--evento {
	background-color: var(--wp--preset--color--surface-container-high);
	color: var(--wp--preset--color--on-surface);
}

.oc-post-category-badge--ideas-dialogo {
	background-color: var(--wp--preset--color--surface-variant);
	color: var(--wp--preset--color--on-surface-variant);
}

.oc-post-category-badge--tribuna-abierta {
	background-color: var(--wp--preset--color--secondary-container);
	color: var(--wp--preset--color--on-secondary-container);
}

.oc-post-category-badge--recursos {
	background-color: var(--wp--preset--color--tertiary-container);
	color: var(--wp--preset--color--on-tertiary-container);
}

/* ═══════════════════════════════════════════
 * Metadata Row
 * ═══════════════════════════════════════════ */

.oc-hero-post__meta,
.oc-post-actualidad-hero__meta {
	color: var(--wp--preset--color--on-surface-variant);
	font-size: var(--wp--preset--font-size--body-md);
	font-weight: var(--wp--custom--typography--font-weight--body-md);
	line-height: var(--wp--custom--typography--line-height--body-md);
}

.oc-post-meta-item,
.oc-post-actualidad-meta-item {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.oc-post-meta-item::before,
.oc-post-actualidad-meta-item::before {
	content: '\00B7';
	margin-right: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--outline);
}

.oc-post-meta-item:first-child::before,
.oc-post-actualidad-meta-item:first-child::before {
	content: none;
	margin-right: 0;
}

.oc-post-meta-value {
	color: var(--wp--preset--color--on-surface-variant);
}

/* core/post-time-to-read — inherits meta styling */
.oc-post-meta-item .wp-block-post-time-to-read,
.oc-post-meta-item .wp-block-post-author-name,
.oc-post-meta-item .wp-block-post-date,
.oc-post-actualidad-meta-item .wp-block-post-date {
	color: var(--wp--preset--color--on-surface-variant);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: inherit;
	line-height: inherit;
}

/* ═══════════════════════════════════════════
 * Compact Metadata on Reduced Resolutions (≤ 782px)
 * Fits cleanly in a single row across smartphones and compact screens
 * ═══════════════════════════════════════════ */

@media (max-width: 782px) {
	.oc-hero-post__meta,
	.oc-post-actualidad-hero__meta {
		gap: var(--wp--preset--spacing--20) !important;
		font-size: var(--wp--preset--font-size--label-sm);
	}

	.oc-post-meta-item,
	.oc-post-actualidad-meta-item {
		gap: var(--wp--preset--spacing--10);
		white-space: nowrap;
	}

	.oc-post-meta-item::before,
	.oc-post-actualidad-meta-item::before {
		display: none;
	}

	.oc-post-meta-item .wp-block-post-time-to-read,
	.oc-post-meta-item .wp-block-post-author-name,
	.oc-post-meta-item .wp-block-post-date,
	.oc-post-actualidad-meta-item .wp-block-post-date {
		font-size: var(--wp--preset--font-size--label-sm);
	}

	.oc-post-meta-item .wp-block-icon svg,
	.oc-post-meta-item svg,
	.oc-post-actualidad-meta-item .wp-block-icon svg,
	.oc-post-actualidad-meta-item svg {
		width: 14px;
		height: 14px;
	}
}

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

@media (prefers-reduced-motion: reduce) {
	.oc-post-category-badge,
	.oc-post-category-terms a,
	.oc-hero-post .wp-block-breadcrumbs a {
		transition: none;
		transform: none !important;
	}
}