/* ==========================================================================
   IOA Sticky Stacking Cards — Frontend Styles
   ========================================================================== */

/* ---- Variables CSS ---- */
:root {
	--ioa-ssc-card-height: 380px;
	--ioa-ssc-radius:      20px;   /* radio de esquinas — reducido en mobile */
	--ioa-ssc-h-top:       10vh;   /* offset sticky horizontal — reducido en landscape */
}

/* ---- Contenedor principal ---- */
.ioa-ssc-container {
	container-type: inline-size;
	container-name: ioa-ssc;
	box-sizing: border-box;
}

/* ==========================================================================
   ISOLATION RESET
   Estrategia de especificidad:
   · Todos los selectores usan ".ioa-ssc-container .ioa-ssc-xxx"  → 0,2,0
   · Elementos de riesgo alto añaden el tag HTML               → 0,2,1
   · Esto supera ".entry-content h3" / ".site .content article" → 0,1,1
   · Los container queries usan los MISMOS selectores; ganan
     por orden de fuente al tener la misma especificidad que la
     regla base (source-order cascade).
   · NO se usa !important salvo para las reglas de prefers-reduced-motion
     donde es estrictamente necesario para cancelar animaciones del tema.
   ========================================================================== */

/* box-sizing universal dentro del plugin (comodín no afecta especificidad) */
.ioa-ssc-container *,
.ioa-ssc-container *::before,
.ioa-ssc-container *::after {
	box-sizing: border-box;
}

/* ==========================================================================
   LISTA DE TARJETAS — Efecto vertical / Skiper17
   ========================================================================== */

/*
 * ul.ioa-ssc-list — temas añaden padding-left, list-style, margin.
 * Especificidad 0,2,1 supera ".entry-content ul" (0,1,1).
 */
.ioa-ssc-container ul.ioa-ssc-list {
	list-style: none;
	margin:     0;
	padding:    0 0 clamp(50px, 10vh, 120px);
	border:     none;
	background: none;
}

/*
 * li.ioa-ssc-card-wrapper — temas añaden padding, list-style, margin a li.
 * Especificidad 0,2,1.
 */
.ioa-ssc-container li.ioa-ssc-card-wrapper {
	list-style:       none;
	margin:           0;
	padding:          0;
	border:           none;
	background:       none;
	position:         -webkit-sticky;
	position:         sticky;
	will-change:      transform;
	transform-origin: top center;
	/* top y z-index vienen como inline style desde PHP */
}

.ioa-ssc-container[data-effect="vertical"] li.ioa-ssc-card-wrapper article.ioa-ssc-card {
	transform-origin: top center;
}

.ioa-ssc-container[data-effect="skiper17"] li.ioa-ssc-card-wrapper article.ioa-ssc-card {
	transform-origin: center center;
	will-change:      transform, opacity;
}

/* ==========================================================================
   EFECTO HORIZONTAL
   ========================================================================== */

.ioa-ssc-container .ioa-ssc-h-section {
	position: relative;
}

.ioa-ssc-container .ioa-ssc-h-sticky {
	position:          -webkit-sticky;
	position:          sticky;
	top:               var(--ioa-ssc-h-top);
	overflow:          hidden;
	-webkit-clip-path: inset(0 round var(--ioa-ssc-radius));
	clip-path:         inset(0 round var(--ioa-ssc-radius));
}

.ioa-ssc-container .ioa-ssc-h-card {
	position:    absolute;
	top:         0;
	left:        0;
	width:       100%;
	height:      100%;
	will-change: transform, opacity;
}

.ioa-ssc-container .ioa-ssc-h-card.is-entering .ioa-ssc-card {
	box-shadow: -24px 0 50px rgba(0, 0, 0, 0.18);
}

.ioa-ssc-container .ioa-ssc-h-card .ioa-ssc-card {
	height:     100%;
	box-shadow: none;
}

.ioa-ssc-container .ioa-ssc-h-card .ioa-ssc-card-inner {
	min-height: 100%;
	height:     100%;
}

/* ---- Indicadores de progreso (dots) ---- */
.ioa-ssc-container .ioa-ssc-h-dots {
	position:       absolute;
	bottom:         18px;
	left:           50%;
	transform:      translateX(-50%);
	display:        flex;
	align-items:    center;
	gap:            8px;
	z-index:        100;
	pointer-events: none;
}

.ioa-ssc-container .ioa-ssc-h-dot {
	width:         8px;
	height:        8px;
	border-radius: 50%;
	background:    rgba(0, 0, 0, 0.20);
	transition:    width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
	               background 0.35s ease,
	               border-radius 0.35s ease;
	flex-shrink:   0;
}

.ioa-ssc-container .ioa-ssc-h-dot.is-active {
	width:         28px;
	border-radius: 4px;
	background:    rgba(0, 0, 0, 0.55);
}

/* ==========================================================================
   TARJETA — Layout base
   ========================================================================== */

/*
 * article.ioa-ssc-card — temas como Astra, Divi, GeneratePress aplican
 * padding / border / background a "article". Especificidad 0,2,1.
 */
.ioa-ssc-container article.ioa-ssc-card {
	background:       #ffffff;
	border-radius:    var(--ioa-ssc-radius);
	box-shadow:       0 4px 30px rgba(0, 0, 0, 0.10);
	overflow:         hidden;
	transform-origin: top center;
	will-change:      transform;
	transition:       transform 0.07s linear, opacity 0.07s linear;
	/* resets defensivos */
	border:           none;
	padding:          0;
	margin:           0;
}

.ioa-ssc-container .ioa-ssc-card-inner {
	display:     flex;
	align-items: stretch;
	min-height:  var(--ioa-ssc-card-height, 380px);
	margin:      0;
	padding:     0;
}

/*
 * figure.ioa-ssc-card-media — temas añaden margin: 0 0 1.5em a figure.
 * Especificidad 0,2,1. Solo propiedades que los container queries
 * NO necesitan cambiar (margin, padding, border, position, overflow).
 * flex y max-width van en un selector separado de menor especificidad
 * para que los container queries puedan sobreescribirlos.
 */
.ioa-ssc-container figure.ioa-ssc-card-media {
	margin:      0;
	padding:     0;
	border:      none;
	position:    relative;
	overflow:    hidden;
	line-height: 0; /* elimina espacio inline bajo img */
}

/* Propiedades de layout que los container queries SÍ sobreescriben → (0,2,0) */
.ioa-ssc-container .ioa-ssc-card-media {
	flex:      0 0 45%;
	max-width: 45%;
}

/*
 * img — la interferencia más universal:
 *   img { max-width:100%; height:auto; } rompe nuestro object-fit.
 * Especificidad 0,2,1 supera ".entry-content img" (0,1,1)
 * y ".site-content .ioa-ssc-card-media img" (0,2,1) — empate, gana source order.
 */
.ioa-ssc-container .ioa-ssc-card-media img {
	display:         block;
	width:           100%;
	height:          100%;
	max-width:       none;   /* cancela img { max-width:100% } del tema */
	min-height:      0;
	object-fit:      cover;
	object-position: center;
	border:          none;
	outline:         none;
	box-shadow:      none;
	float:           none;
	vertical-align:  middle;
	transition:      transform 0.5s ease;
}

.ioa-ssc-container article.ioa-ssc-card:hover .ioa-ssc-card-media img {
	transform: scale(1.03);
}

/* Contenido */
.ioa-ssc-container .ioa-ssc-card-content {
	flex:            1;
	padding:         clamp(20px, 4cqi, 48px) clamp(18px, 4cqi, 44px);
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	min-width:       0;
	border:          none;
	background:      none;
}

/* Icono de cabecera */
.ioa-ssc-container .ioa-ssc-header-icon {
	margin-bottom: 14px;
}

.ioa-ssc-container .ioa-ssc-header-icon img {
	display:        block;
	height:         clamp(22px, 4cqi, 40px);
	width:          auto;
	max-width:      none;
	border:         none;
	outline:        none;
	float:          none;
	vertical-align: middle;
}

/*
 * h3.ioa-ssc-card-title — casi todos los temas estilan h3 con font-size,
 * color, margin, border-bottom, etc. Especificidad 0,2,1.
 *
 * Las CSS custom properties permiten que los container queries
 * sobreescriban tipografía de forma limpia sin !important.
 */
.ioa-ssc-container h3.ioa-ssc-card-title {
	/* ── resets defensivos ── */
	border:          none;
	background:      none;
	text-decoration: none;
	text-shadow:     none;
	padding:         0;
	/* ── layout ── */
	margin:          0 0 12px;
	line-height:     1.25;
	letter-spacing:  -0.01em;
	/* ── tipografía via CSS custom props (configurables desde el admin) ── */
	color:           var(--ioa-title-color, #1a1a2e);
	font-family:     var(--ioa-title-family, inherit);
	font-size:       var(--ioa-title-size, 28px);
	font-weight:     var(--ioa-title-weight, 700);
	font-style:      var(--ioa-title-style, normal);
	text-transform:  var(--ioa-title-transform, none);
}

/* Descripción — usa CSS custom properties configuradas desde el admin */
.ioa-ssc-container .ioa-ssc-card-description {
	color:          var(--ioa-desc-color, #555);
	font-family:    var(--ioa-desc-family, inherit);
	font-size:      var(--ioa-desc-size, clamp(13px, 1.6cqi, 16px));
	font-weight:    var(--ioa-desc-weight, 400);
	font-style:     var(--ioa-desc-style, normal);
	text-transform: var(--ioa-desc-transform, none);
	line-height:    var(--ioa-desc-lh, 1.7);
}

/*
 * p dentro de la descripción — temas añaden margin/border a p.
 * Especificidad 0,2,1.
 */
.ioa-ssc-container .ioa-ssc-card-description p {
	margin:  0 0 10px;
	padding: 0;
	border:  none;
}

.ioa-ssc-container .ioa-ssc-card-description p:last-child {
	margin-bottom: 0;
}

/*
 * a dentro de la descripción — temas sobreescriben colores de links.
 */
.ioa-ssc-container .ioa-ssc-card-description a {
	color:           inherit;
	text-decoration: underline;
}

/*
 * Imágenes dentro del rich-text de la descripción (wp_kses_post).
 * A diferencia de las imágenes de layout, estas sí deben ser responsivas.
 */
.ioa-ssc-container .ioa-ssc-card-description img {
	max-width:      100%;
	height:         auto;
	display:        inline-block;
	vertical-align: middle;
	border:         none;
}

/* Variantes de color por posición */
.ioa-ssc-container .ioa-ssc-card-wrapper--1 article.ioa-ssc-card,
.ioa-ssc-container .ioa-ssc-h-card[data-h-index="0"] article.ioa-ssc-card { background: #ffffff; }

.ioa-ssc-container .ioa-ssc-card-wrapper--2 article.ioa-ssc-card,
.ioa-ssc-container .ioa-ssc-h-card[data-h-index="1"] article.ioa-ssc-card { background: #f8faff; }

.ioa-ssc-container .ioa-ssc-card-wrapper--3 article.ioa-ssc-card,
.ioa-ssc-container .ioa-ssc-h-card[data-h-index="2"] article.ioa-ssc-card { background: #fafff8; }

.ioa-ssc-container .ioa-ssc-card-wrapper--4 article.ioa-ssc-card,
.ioa-ssc-container .ioa-ssc-h-card[data-h-index="3"] article.ioa-ssc-card { background: #fff8f8; }

.ioa-ssc-container .ioa-ssc-card-wrapper--5 article.ioa-ssc-card,
.ioa-ssc-container .ioa-ssc-h-card[data-h-index="4"] article.ioa-ssc-card { background: #fffdf0; }

/* ==========================================================================
   Container Queries — layout adaptivo
   Usamos ".ioa-ssc-container .ioa-ssc-xxx" (0,2,0) para igualar la
   especificidad de las reglas base y ganar por source-order.
   Para "figure.ioa-ssc-card-media" (0,2,1) usamos ".ioa-ssc-container
   .ioa-ssc-card-media" (0,2,0) aquí porque solo tocamos flex/max-width
   que están en el selector de menor especificidad.
   ========================================================================== */

@container ioa-ssc ( max-width: 860px ) {
	.ioa-ssc-container .ioa-ssc-card-media {
		flex:      0 0 42%;
		max-width: 42%;
	}
}

@container ioa-ssc ( max-width: 640px ) {
	/* Layout vertical: imagen arriba, contenido abajo */
	.ioa-ssc-container .ioa-ssc-card-inner {
		flex-direction: column;
		min-height:     unset;
	}

	.ioa-ssc-container .ioa-ssc-card-media {
		flex:      none;
		max-width: 100%;
		height:    clamp(140px, 42cqi, 260px);
	}

	/* Altura en horizontal: sin min-height fijo, se adapta al sticky */
	.ioa-ssc-container .ioa-ssc-h-card .ioa-ssc-card-inner {
		min-height: 100%;
	}

	.ioa-ssc-container .ioa-ssc-card-content {
		padding:         clamp(14px, 5cqi, 28px) clamp(14px, 5cqi, 28px);
		justify-content: flex-start;
	}

	.ioa-ssc-container article.ioa-ssc-card {
		border-radius: max(10px, var(--ioa-ssc-radius) * 0.7);
	}

	.ioa-ssc-container ul.ioa-ssc-list {
		padding-bottom: clamp(40px, 7vh, 80px);
	}

	/* Título móvil — misma especificidad (0,2,1) → source order gana */
	.ioa-ssc-container h3.ioa-ssc-card-title {
		color:          var(--ioa-title-color-m, var(--ioa-title-color, #1a1a2e));
		font-family:    var(--ioa-title-family-m, var(--ioa-title-family, inherit));
		font-size:      var(--ioa-title-size-m, clamp(16px, 4cqi, 28px));
		font-weight:    var(--ioa-title-weight-m, var(--ioa-title-weight, 700));
		font-style:     var(--ioa-title-style-m, var(--ioa-title-style, normal));
		text-transform: var(--ioa-title-transform-m, var(--ioa-title-transform, none));
	}

	/* Descripción móvil */
	.ioa-ssc-container .ioa-ssc-card-description {
		color:          var(--ioa-desc-color-m, var(--ioa-desc-color, #555));
		font-family:    var(--ioa-desc-family-m, var(--ioa-desc-family, inherit));
		font-size:      var(--ioa-desc-size-m, clamp(13px, 1.6cqi, 16px));
		font-weight:    var(--ioa-desc-weight-m, var(--ioa-desc-weight, 400));
		font-style:     var(--ioa-desc-style-m, var(--ioa-desc-style, normal));
		text-transform: var(--ioa-desc-transform-m, var(--ioa-desc-transform, none));
		line-height:    var(--ioa-desc-lh-m, var(--ioa-desc-lh, 1.7));
	}
}

@container ioa-ssc ( max-width: 420px ) {
	.ioa-ssc-container .ioa-ssc-card-media {
		height: clamp(120px, 38cqi, 180px);
	}

	.ioa-ssc-container .ioa-ssc-card-content {
		padding: 14px 16px;
	}

	.ioa-ssc-container h3.ioa-ssc-card-title {
		font-size:     var(--ioa-title-size-m, clamp(15px, 4.5cqi, 22px));
		margin-bottom: 8px;
	}

	.ioa-ssc-container .ioa-ssc-card-description {
		font-size:   var(--ioa-desc-size-m, clamp(12px, 3cqi, 14px));
		line-height: var(--ioa-desc-lh-m, var(--ioa-desc-lh, 1.6));
	}

	.ioa-ssc-container .ioa-ssc-header-icon {
		margin-bottom: 8px;
	}
}

/* ==========================================================================
   Media Queries — viewport
   ========================================================================== */

/* ---- Tablets y móviles (< 768px) ---- */
@media screen and (max-width: 768px) {
	:root {
		--ioa-ssc-radius: 16px;
	}

	.ioa-ssc-container .ioa-ssc-h-dots {
		bottom: 12px;
	}

	.ioa-ssc-container .ioa-ssc-h-dot {
		width:  7px;
		height: 7px;
	}

	.ioa-ssc-container .ioa-ssc-h-dot.is-active {
		width: 22px;
	}
}

/* ---- Teléfonos pequeños (< 480px) ---- */
@media screen and (max-width: 480px) {
	:root {
		--ioa-ssc-radius: 12px;
		--ioa-ssc-h-top:   5vh;
	}

	.ioa-ssc-container .ioa-ssc-h-dots {
		bottom: 8px;
		gap:    6px;
	}
}

/* ---- Landscape en teléfonos (altura muy reducida) ---- */
@media screen and (orientation: landscape) and (max-height: 500px) {
	:root {
		--ioa-ssc-h-top:  2vh;
		--ioa-ssc-radius: 10px;
	}

	.ioa-ssc-container ul.ioa-ssc-list {
		padding-bottom: 30px;
	}

	.ioa-ssc-container .ioa-ssc-h-dots {
		display: none;
	}
}

/* ==========================================================================
   Accesibilidad: Movimiento reducido
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	/* Cancelar animaciones del plugin Y del tema dentro del contenedor */
	.ioa-ssc-container article.ioa-ssc-card,
	.ioa-ssc-container .ioa-ssc-h-card,
	.ioa-ssc-container .ioa-ssc-card-media img,
	.ioa-ssc-container .ioa-ssc-h-dot {
		transition:  none !important;
		animation:   none !important;
		will-change: auto !important;
	}

	/* Horizontal: layout estático apilado */
	.ioa-ssc-container .ioa-ssc-h-section {
		height: auto !important;
	}

	.ioa-ssc-container .ioa-ssc-h-sticky {
		position:          relative;
		top:               auto;
		height:            auto !important;
		-webkit-clip-path: none;
		clip-path:         none;
	}

	.ioa-ssc-container .ioa-ssc-h-card {
		position:      relative;
		transform:     none !important;
		opacity:       1 !important;
		margin-bottom: 16px;
	}

	.ioa-ssc-container .ioa-ssc-h-card article.ioa-ssc-card {
		height: auto;
	}

	.ioa-ssc-container .ioa-ssc-h-card .ioa-ssc-card-inner {
		height:     auto;
		min-height: var(--ioa-ssc-card-height, 380px);
	}

	.ioa-ssc-container .ioa-ssc-h-dots {
		display: none;
	}

	/* Vertical: sin sticky */
	.ioa-ssc-container li.ioa-ssc-card-wrapper {
		position: relative;
		top:      auto !important;
	}
}

/* ==========================================================================
   Fallback para navegadores sin Container Queries
   ========================================================================== */

@supports not ( container-type: inline-size ) {
	@media ( max-width: 860px ) {
		.ioa-ssc-container .ioa-ssc-card-media {
			flex: 0 0 42%; max-width: 42%;
		}
	}

	@media ( max-width: 640px ) {
		.ioa-ssc-container .ioa-ssc-card-inner   { flex-direction: column; min-height: unset; }
		.ioa-ssc-container .ioa-ssc-card-media   { flex: none; max-width: 100%; height: 220px; }
		.ioa-ssc-container .ioa-ssc-card-content { padding: 18px 16px; }
	}

	@media ( max-width: 420px ) {
		.ioa-ssc-container .ioa-ssc-card-media { height: 160px; }
	}
}

/* ---- Sin soporte para sticky ---- */
@supports not ( position: sticky ) {
	.ioa-ssc-container li.ioa-ssc-card-wrapper,
	.ioa-ssc-container .ioa-ssc-h-sticky {
		position: relative;
		top:      auto !important;
	}
}