/**
 * APSA Media — Estilos responsive (tablet y desktop).
 */

/* Tablet */
@media (min-width: 640px) {
	.apsa-grid--publicos {
		grid-template-columns: repeat(2, 1fr);
	}

	.apsa-grid--shoppings {
		grid-template-columns: repeat(3, 1fr);
	}

	.apsa-grid--formatos {
		grid-template-columns: repeat(2, 1fr);
	}

	.apsa-grid--amplificacion {
		grid-template-columns: repeat(2, 1fr);
	}

	.apsa-posts-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.apsa-contacto {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}

	.apsa-footer__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.apsa-caso-summary__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.apsa-shopping-logo-wrap {
		min-height: 104px;
		padding: 1.5rem 1.75rem;
	}
}

/* Desktop */
@media (min-width: 1024px) {
	:root {
		--header-height: 80px;
	}

	.apsa-section {
		padding-block: 6rem;
	}

	.apsa-header__toggle,
	.apsa-menu-toggle {
		display: none;
	}

	.apsa-nav {
		display: flex !important;
		flex: 1 1 auto;
		justify-content: flex-end;
		position: static !important;
		background: none;
		padding: 0;
		overflow: visible;
		transform: none !important;
		width: auto;
		height: auto;
	}

	.apsa-nav__list {
		flex-direction: row;
		align-items: center;
		gap: 0.25rem;
	}

	.apsa-nav__link {
		padding: 0.5rem 0.875rem;
		font-size: 0.875rem;
	}

	.apsa-hero {
		min-height: 90vh;
	}

	.apsa-grid--publicos {
		grid-template-columns: repeat(4, 1fr);
	}

	.apsa-grid--tendencias {
		grid-template-columns: repeat(3, 1fr);
	}

	.apsa-grid--shoppings {
		grid-template-columns: repeat(5, 1fr);
	}

	.apsa-grid--formatos {
		grid-template-columns: repeat(3, 1fr);
	}

	.apsa-split {
		grid-template-columns: 1fr 1fr;
		align-items: center;
		gap: 4rem;
	}

	.apsa-stats {
		grid-template-columns: repeat(2, 1fr);
	}

	.apsa-footer__grid {
		grid-template-columns: 2fr 1fr 1fr;
		align-items: start;
	}

	.apsa-posts-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.apsa-caso-summary__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.apsa-caso-hero {
		min-height: clamp(480px, 78vh, 760px);
	}

	.apsa-gallery {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Single shopping: 2 columnas con buen aire visual */
	.apsa-shopping-layout {
		grid-template-columns: 45% 55%;
		gap: 3.25rem;
	}

	.apsa-shopping-layout__content {
		padding-top: 0.25rem;
	}

	.apsa-single--shopping .apsa-single__content {
		font-size: 1.0625rem;
	}
}

/* Mobile nav overlay */
@media (max-width: 1023px) {
	.apsa-header__brand {
		flex: 1;
		min-width: 0;
	}

	.apsa-header__toggle,
	.apsa-menu-toggle {
		flex-shrink: 0;
	}

	.apsa-nav {
		position: fixed;
		top: 0;
		right: 0;
		width: min(320px, 85vw);
		height: 100vh;
		height: 100dvh;
		padding: calc(var(--header-height) + 1.5rem) 1.5rem 2rem;
		background: var(--color-dark);
		transform: translateX(100%);
		transition: transform var(--transition);
		overflow-y: auto;
		z-index: 10001;
	}

	body.admin-bar .apsa-nav {
		padding-top: calc(var(--header-height) + 46px);
	}

	.apsa-nav.is-open {
		transform: translateX(0);
	}

	body.apsa-nav-open {
		overflow: hidden;
	}

	body.apsa-nav-open::before {
		content: "";
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 10000;
	}
}

/* Tendencias — mobile compacto */
@media (max-width: 768px) {
	#tendencias.apsa-section--tendencias,
	.apsa-section--tendencias {
		padding-top: 0;
		padding-bottom: 3rem;
	}

	.apsa-tendencias-header {
		min-height: 0;
		height: clamp(260px, 42vh, 360px);
		max-height: 45vh;
		margin-bottom: 1.5rem;
	}

	.apsa-tendencias-header__img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.apsa-tendencias-header__fallback,
	.apsa-tendencias-header__fallback .apsa-placeholder,
	.apsa-tendencias-header__fallback .apsa-placeholder--wide {
		min-height: 0;
		height: 100%;
	}

	.apsa-tendencias-header__content {
		padding: 1.5rem;
	}

	.apsa-tendencias-header__title {
		font-size: clamp(2rem, 9vw, 3.2rem);
		line-height: 0.95;
		margin-bottom: 0.5rem;
	}

	.apsa-tendencias-header__lead {
		font-size: 1rem;
		line-height: 1.45;
		max-width: 100%;
	}

	.apsa-tendencias-body {
		padding-bottom: 0;
	}

	.apsa-grid--tendencias {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.apsa-card--tendencia {
		padding: 0.75rem;
	}

	.apsa-card--tendencia .apsa-card__media {
		aspect-ratio: 16 / 10;
		height: auto;
		max-height: 240px;
	}

	.apsa-card--tendencia .apsa-card__media img,
	.apsa-card--tendencia .apsa-card__media video {
		width: 100%;
		height: 100%;
		max-height: 240px;
		object-fit: cover;
	}

	.apsa-card--tendencia .apsa-card__body {
		padding: 1.25rem;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}