/**
 * Blog índice + bloque Gutenberg orbital/cluster.
 * Contenedor: .premium-orbit-cluster.premium-blog (inc/dinnersky-cluster-premium.php)
 */

/* Anula hover legacy (nkdp-bootstrap .cluster-menu .featured-item a:hover .entry-title → #353535) */
.cluster-menu .premium-blog .featured-item a:hover .entry-title,
.cluster-menu .premium-blog a:hover .premium-card__title {
	color: #ebe8e0 !important;
}

.premium-orbit-cluster.premium-blog {
	margin-left: 0;
	margin-right: 0;
}

.premium-blog {
	--pb-bg: #0b0b0b;
	--pb-text: #ebe8e0;
	--pb-text-soft: #f5f2ea;
	--pb-muted: rgba(235, 232, 224, 0.48);
	--pb-gold: #b89a6a;
	--pb-gold-soft: rgba(184, 154, 106, 0.88);
	--pb-ease: cubic-bezier(0.33, 1, 0.68, 1);
	--pb-radius: 16px;
	--pb-trans: 0.4s var(--pb-ease);

	background-color: var(--pb-bg);
	padding: clamp(3rem, 7vw, 5.5rem) clamp(0.5rem, 2vw, 1rem);
	margin: clamp(1.25rem, 3vw, 2rem) 0 clamp(2.25rem, 4vw, 3.5rem);
	border-radius: clamp(10px, 1.5vw, 20px);
	box-sizing: border-box;
}

.premium-blog__hero {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: clamp(24px, 3.5vw, 40px);
	max-width: 1120px;
	margin: 0 auto;
}

@media (min-width: 960px) {
	.premium-blog__hero {
		flex-direction: row;
		align-items: flex-start;
		gap: clamp(32px, 4vw, 48px);
	}

	.premium-blog__hero > .premium-featured {
		flex: 0 0 68%;
		width: 68%;
		max-width: 68%;
		min-width: 0;
	}

	.premium-blog__side {
		flex: 0 0 calc(32% - clamp(32px, 4vw, 48px));
		width: calc(32% - clamp(32px, 4vw, 48px));
		max-width: calc(32% - clamp(32px, 4vw, 48px));
		min-width: 0;
	}
}

.premium-blog__side {
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 2.8vw, 28px);
	min-height: 0;
	justify-content: flex-start;
}

/* Secundarias: no estirar altura; proporción fija y más ligera */
.premium-blog__side .premium-card {
	flex: 0 0 auto;
	min-height: 0;
	display: block;
}

.premium-blog__side .premium-card__link {
	display: block;
	flex: none;
	min-height: 0;
}

.premium-blog__side .premium-card__frame {
	flex: none;
	min-height: 0;
	aspect-ratio: 16 / 10;
	max-height: min(200px, 28vw);
	width: 100%;
}

@media (max-width: 959.98px) {
	.premium-blog__side .premium-card__frame {
		max-height: none;
		aspect-ratio: 16 / 9;
		min-height: 200px;
	}
}

.premium-blog__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(28px, 4vw, 40px);
	max-width: 1120px;
	margin: clamp(44px, 6.5vw, 72px) auto 0;
	padding-top: clamp(36px, 5.5vw, 56px);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

@media (min-width: 768px) {
	.premium-blog__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.premium-blog__pagination {
	max-width: 1120px;
	margin: clamp(36px, 5vw, 56px) auto 0;
	padding-top: clamp(24px, 3.5vw, 36px);
	border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.premium-blog__pagination .pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.45rem;
}

.premium-blog__pagination .page-numbers {
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.5rem 0.85rem;
	color: var(--pb-muted);
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	transition:
		color 0.3s var(--pb-ease),
		border-color 0.3s var(--pb-ease),
		background-color 0.3s var(--pb-ease);
}

.premium-blog__pagination a.page-numbers:hover,
.premium-blog__pagination a.page-numbers:focus {
	color: var(--pb-text);
	border-color: rgba(184, 154, 106, 0.35);
	background-color: rgba(255, 255, 255, 0.04);
	outline: none;
}

.premium-blog__pagination .page-numbers.current {
	color: var(--pb-text);
	border-color: rgba(184, 154, 106, 0.4);
	background-color: rgba(184, 154, 106, 0.08);
}

.premium-blog__pagination .page-numbers.dots {
	border-color: transparent;
	letter-spacing: 0.2em;
}

/* Tarjeta */
.premium-card {
	margin: 0;
	padding: 0;
	position: relative;
	opacity: 0;
	transform: translateY(14px);
	animation: premium-blog-in 0.65s var(--pb-ease) forwards;
}

.premium-blog__hero > .premium-featured {
	animation-delay: 0.05s;
}

.premium-blog__side .premium-card:nth-child(1) {
	animation-delay: 0.1s;
}

.premium-blog__side .premium-card:nth-child(2) {
	animation-delay: 0.15s;
}

.premium-blog__grid .premium-card:nth-child(1) {
	animation-delay: 0.06s;
}

.premium-blog__grid .premium-card:nth-child(2) {
	animation-delay: 0.11s;
}

.premium-blog__grid .premium-card:nth-child(3) {
	animation-delay: 0.16s;
}

.premium-blog__grid .premium-card:nth-child(4) {
	animation-delay: 0.21s;
}

.premium-blog__grid .premium-card:nth-child(5) {
	animation-delay: 0.26s;
}

.premium-blog__grid .premium-card:nth-child(6) {
	animation-delay: 0.31s;
}

.premium-blog__grid .premium-card:nth-child(n + 7) {
	animation-delay: 0.34s;
}

@keyframes premium-blog-in {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.premium-card {
		animation: none;
		opacity: 1;
		transform: none;
	}

	.premium-card__media .premium-card__img,
	.premium-card__overlay,
	.premium-card__frame {
		transition: none !important;
	}
}

.premium-card__link {
	display: block;
	color: transparent;
	text-decoration: none;
	height: 100%;
	outline: none;
}

.premium-card__link:focus-visible .premium-card__frame {
	outline: 1px solid rgba(184, 154, 106, 0.55);
	outline-offset: 3px;
}

.premium-card__frame {
	display: block;
	position: relative;
	height: 100%;
	min-height: 100%;
	border-radius: var(--pb-radius);
	overflow: hidden;
	background: #101010;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
	border: 1px solid rgba(255, 255, 255, 0.04);
	transition:
		box-shadow var(--pb-trans),
		transform var(--pb-trans),
		border-color var(--pb-trans);
}

.premium-card:hover .premium-card__frame {
	box-shadow: 0 20px 48px rgba(0, 0, 0, 0.42);
	border-color: rgba(255, 255, 255, 0.07);
	transform: translateY(-3px);
}

.premium-featured .premium-card__frame {
	min-height: clamp(272px, 40vh, 420px);
	max-height: min(460px, 56vh);
}

.premium-card--grid .premium-card__frame {
	min-height: clamp(220px, 32vw, 300px);
	aspect-ratio: 16 / 10;
}

.premium-card__media {
	display: block;
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.premium-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 38%;
	transform: scale(1);
	transition: transform 0.65s var(--pb-ease);
	will-change: transform;
}

.premium-card:hover .premium-card__img {
	transform: scale(1.04);
}

.premium-card__img--placeholder {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 100%;
	background: linear-gradient(160deg, #141414 0%, #0a0a0a 50%, #12100e 100%);
}

.premium-card__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		to top,
		rgba(8, 8, 8, 0.92) 0%,
		rgba(8, 8, 8, 0.5) 38%,
		rgba(8, 8, 8, 0.18) 65%,
		rgba(8, 8, 8, 0.05) 100%
	);
	opacity: 1;
	transition: opacity 0.45s var(--pb-ease);
}

/* Hover: ligeramente más oscuro abajo = mejor contraste del texto, sin “flash” */
.premium-card:hover .premium-card__overlay {
	opacity: 1;
	background: linear-gradient(
		to top,
		rgba(6, 6, 6, 0.94) 0%,
		rgba(8, 8, 8, 0.52) 40%,
		rgba(8, 8, 8, 0.2) 68%,
		rgba(8, 8, 8, 0.06) 100%
	);
}

.premium-card__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: clamp(16px, 2.8vw, 26px) clamp(16px, 2.4vw, 24px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
	text-align: left;
}

.premium-featured .premium-card__body {
	gap: 0.45rem;
	padding-bottom: clamp(18px, 3vw, 28px);
}

.premium-card__eyebrow {
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	font-size: 0.5625rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pb-gold-soft);
	line-height: 1.35;
	margin: 0;
}

.premium-blog .premium-card__title,
.premium-blog .premium-card__link h2,
.premium-blog .premium-card__link h3 {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.premium-card__title {
	font-family: "Cormorant Garamond", ui-serif, Georgia, "Times New Roman", serif;
	font-weight: 500;
	font-style: normal;
	color: var(--pb-text);
	margin: 0;
	line-height: 1.32;
	letter-spacing: 0.008em;
	max-width: 100%;
}

/* Principal: mayor, sin dramatismo */
.premium-featured .premium-card__title {
	font-size: clamp(1.05rem, 1.55vw, 1.35rem);
	line-height: 1.3;
	max-width: 26ch;
	font-weight: 500;
}

/* Secundarias: claramente más pequeñas */
.premium-card--side .premium-card__title {
	font-size: clamp(0.8125rem, 1.05vw, 0.9375rem);
	line-height: 1.38;
	font-weight: 500;
	max-width: 100%;
	letter-spacing: 0.01em;
}

.premium-card--grid .premium-card__title {
	font-size: clamp(0.875rem, 1.2vw, 1.02rem);
	line-height: 1.34;
	max-width: 32ch;
	font-weight: 500;
}

.premium-card__meta {
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	font-size: 0.625rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	color: var(--pb-muted);
	margin: 0.15rem 0 0;
	line-height: 1.45;
}

.premium-card__cta {
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pb-gold);
	margin-top: 0.5rem;
	line-height: 1.4;
	transition:
		color 0.3s var(--pb-ease),
		letter-spacing 0.3s var(--pb-ease),
		opacity 0.3s var(--pb-ease);
	display: inline-block;
	opacity: 0.88;
}

.premium-card:hover .premium-card__cta {
	color: #cdb487;
	opacity: 1;
	letter-spacing: 0.16em;
}

.premium-card--side .premium-card__eyebrow {
	font-size: 0.5rem;
	letter-spacing: 0.18em;
	opacity: 0.88;
}

.premium-card--side .premium-card__meta {
	margin-top: 0.1rem;
}

.premium-card--grid .premium-card__eyebrow {
	font-size: 0.53125rem;
	letter-spacing: 0.16em;
}

/* Texto explícito en todos los estados (refuerzo frente a temas / Bootstrap) */
.entry-content .premium-blog .premium-card__title,
.entry-content .premium-blog .premium-card__link h2,
.entry-content .premium-blog .premium-card__link h3 {
	color: #ebe8e0 !important;
}

.entry-content .premium-blog .premium-card:hover .premium-card__title,
.entry-content .premium-blog .premium-card:hover .premium-card__link h2,
.entry-content .premium-blog .premium-card:hover .premium-card__link h3 {
	color: #f5f2ea !important;
}