/* =========================================================================
   Surfing.es — Bloque ACTUALIDAD
   Todo el CSS cuelga de .surfing-actualidad para no afectar al resto de la
   web (Bridge, qode-news, otros Loop Grids de la home).
   ========================================================================= */

.surfing-actualidad {
	--sa-accent:        #00c7ff;
	--sa-accent-ink:    #0077a3; /* cian legible sobre blanco (AA) */
	--sa-accent-dark:   #0098c4;
	--sa-ink:           #020817;
	--sa-muted:         #5b6472;
	--sa-line:          #e6e8ec;
	--sa-line-strong:   #cdd3da;
	--sa-bg:            #ffffff;
	--sa-radius:        6px;
	--sa-gap-x:         28px;
	--sa-gap-y:         48px;
	--sa-ease:          cubic-bezier(.22,.61,.36,1);
}

/* -------------------------------------------------------------------------
   1. FILTROS  (widget Taxonomy Filter de Elementor Pro)
   ---------------------------------------------------------------------- */

.surfing-actualidad__filters .e-filter,
.surfing-actualidad__filters .elementor-widget-container > div {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-start;
}

.surfing-actualidad__filters .e-filter .e-filter-item {
	position: relative;
	text-transform: none;
	display: inline-flex;
	align-items: center;
	padding: 9px 18px;
	border: 1px solid var(--sa-line-strong);
	border-radius: 999px;
	background: var(--sa-bg);
	color: var(--sa-ink);
	font-family: Inter, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -.1px;
	cursor: pointer;
	transition: color .25s var(--sa-ease), border-color .25s var(--sa-ease),
	            background-color .25s var(--sa-ease);
}

.surfing-actualidad__filters .e-filter-item:hover {
	border-color: var(--sa-accent);
	color: var(--sa-accent-ink);
}

/* Estado activo: color + peso + marca, nunca solo color */
.surfing-actualidad__filters .e-filter-item[aria-pressed="true"],
.surfing-actualidad__filters .e-filter-item.e-filter-item-active {
	background: var(--sa-ink);
	border-color: var(--sa-ink);
	color: #fff;
	font-weight: 600;
}

.surfing-actualidad__filters .e-filter-item[aria-pressed="true"]::after,
.surfing-actualidad__filters .e-filter-item.e-filter-item-active::after {
	content: "";
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 5px;
	height: 2px;
	border-radius: 2px;
	background: var(--sa-accent);
}

/* El theme anula el outline de los botones y les pinta el fondo al recibir
   foco, imitando el estado activo. Aquí se recupera un foco de teclado visible
   y se deja que mande el estado activo. */
.surfing-actualidad__filters .e-filter .e-filter-item:focus {
	background: var(--sa-bg);
	color: var(--sa-ink);
}

.surfing-actualidad__filters .e-filter .e-filter-item[aria-pressed="true"]:focus {
	background: var(--sa-ink);
	color: #fff;
}

.surfing-actualidad__filters .e-filter .e-filter-item:focus-visible,
.surfing-actualidad__filters .e-filter .e-filter-item:focus-visible:hover {
	outline: 2px solid var(--sa-accent-ink) !important;
	outline-offset: 2px !important;
}

/* Solo las 7 categorías de Actualidad, y "Todo" en primer lugar.
   El widget Filtro por taxonomía de Elementor no permite elegir términos:
   en portada solo imprime los del query del Loop Grid, y esta lista actúa
   además como red de seguridad si en el futuro se amplía esa consulta.
   Al añadir una categoría nueva al bloque hay que añadirla también aquí. */
.surfing-actualidad__filters .e-filter .e-filter-item { display: none; }

.surfing-actualidad__filters .e-filter .e-filter-item[data-filter="__all"],
.surfing-actualidad__filters .e-filter .e-filter-item[data-filter="adaptado"],
.surfing-actualidad__filters .e-filter .e-filter-item[data-filter="bodyboard"],
.surfing-actualidad__filters .e-filter .e-filter-item[data-filter="competicion"],
.surfing-actualidad__filters .e-filter .e-filter-item[data-filter="kneeboard"],
.surfing-actualidad__filters .e-filter .e-filter-item[data-filter="skimboard"],
.surfing-actualidad__filters .e-filter .e-filter-item[data-filter="stand-up-paddle"],
.surfing-actualidad__filters .e-filter .e-filter-item[data-filter="surf"] { display: inline-flex; }

.surfing-actualidad__filters .e-filter .e-filter-item[data-filter="__all"] { order: -1; }

/* -------------------------------------------------------------------------
   2. GRID  (widget Loop Grid)
   4 columnas ≥1200px · 2 columnas 768-1199px · 1 columna ≤767px
   ---------------------------------------------------------------------- */

.surfing-actualidad__grid .elementor-loop-container,
.surfing-actualidad__grid .elementor-grid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	column-gap: var(--sa-gap-x);
	row-gap: var(--sa-gap-y);
	align-items: stretch;
}

.surfing-actualidad__grid .e-loop-item {
	display: flex;
	min-width: 0;
}

@media (max-width: 1199px) {
	.surfing-actualidad {
		--sa-gap-x: 24px;
		--sa-gap-y: 40px;
	}
	.surfing-actualidad__grid .elementor-loop-container,
	.surfing-actualidad__grid .elementor-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 767px) {
	.surfing-actualidad {
		--sa-gap-y: 34px;
	}
	.surfing-actualidad__grid .elementor-loop-container,
	.surfing-actualidad__grid .elementor-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* -------------------------------------------------------------------------
   3. TARJETA
   ---------------------------------------------------------------------- */

.surfing-news-card.e-con,
.surfing-news-card.e-container {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 0;
	background: var(--sa-bg);
	border-radius: var(--sa-radius);
	overflow: hidden;
}

/* Evita el doble grid si el contenedor se importa en modo boxed */
.surfing-news-card.e-con:has(> .e-con-inner) { display: block !important; }
.surfing-news-card > .e-con-inner { width: 100%; max-width: none !important; }

/* --- Imagen ------------------------------------------------------------ */

.surfing-news-card__media.e-con,
.surfing-news-card__media.e-container {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: var(--sa-radius);
	background: #f2f4f7;
}

.surfing-news-card__image .elementor-widget-container,
.surfing-news-card__image img {
	display: block;
	width: 100%;
}

.surfing-news-card__image img {
	aspect-ratio: 16 / 10;
	height: auto;
	object-fit: cover;
	object-position: center;
	transform: scale(1);
	transition: transform .55s var(--sa-ease);
	will-change: transform;
}

/* Velo muy sutil para que las etiquetas y el foco se lean sobre cualquier foto */
.surfing-news-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(2,8,23,0) 55%, rgba(2,8,23,.16) 100%);
	opacity: 0;
	transition: opacity .45s var(--sa-ease);
	pointer-events: none;
}

/* --- Contenido --------------------------------------------------------- */

.surfing-news-card__content.e-con,
.surfing-news-card__content.e-container {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 16px 2px 0;
	flex-grow: 1;
}

/* El stretched link se resuelve contra .surfing-news-card: ningun ancestro
   intermedio puede estar posicionado ni transformado. */
.surfing-news-card__content.e-con,
.surfing-news-card__content.e-container,
.surfing-news-card__meta,
.surfing-news-card__meta .elementor-widget-container,
.surfing-news-card__meta-inner {
	position: static;
}

/* Categorías */
.surfing-news-card__categories { margin-bottom: 9px; }

.surfing-news-card .surfing-news-card__category {
	position: relative;
	z-index: 2;
	display: inline-block;
	margin: 0 6px 6px 0;
	padding: 4px 10px;
	border-radius: 3px;
	background: rgba(0, 199, 255, .12);
	color: var(--sa-accent-ink);
	font-family: Inter, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .9px;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .25s var(--sa-ease), color .25s var(--sa-ease);
}

.surfing-news-card .surfing-news-card__category:hover,
.surfing-news-card .surfing-news-card__category:focus-visible {
	background: var(--sa-accent);
	color: #fff;
}

/* Título */
.surfing-news-card .surfing-news-card__title .elementor-heading-title {
	margin: 0 0 8px;
	text-transform: none;
	font-family: Inter, sans-serif;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.32;
	letter-spacing: -.35px;
	color: var(--sa-ink);
	text-wrap: balance;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.surfing-news-card__title .elementor-heading-title a {
	position: relative;
	z-index: 2;
	color: inherit;
	text-decoration: none;
	transition: color .25s var(--sa-ease);
}

/* Excerpt */
.surfing-news-card__excerpt {
	margin-bottom: 14px;
}

.surfing-news-card__excerpt-text {
	margin: 0;
	font-family: Inter, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.55;
	color: var(--sa-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Meta: fecha + CTA */
.surfing-news-card__meta { margin-top: auto; }

.surfing-news-card__meta-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--sa-line);
	transition: border-color .3s var(--sa-ease);
}

.surfing-news-card__date {
	font-family: Inter, sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--sa-muted);
}

.surfing-news-card .surfing-news-card__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--sa-ink);
	font-family: Inter, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .3px;
	text-decoration: none;
	transition: color .25s var(--sa-ease);
}

/* Stretched link: toda la tarjeta es clicable con un enlace real */
.surfing-news-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.surfing-news-card__arrow {
	flex: none;
	transform: translateX(0);
	transition: transform .35s var(--sa-ease);
}

/* -------------------------------------------------------------------------
   4. HOVER / FOCO  (solo CSS, sin JS, sobrevive al AJAX del filtro)
   ---------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
	.surfing-news-card:hover .surfing-news-card__image img { transform: scale(1.05); }
	.surfing-news-card:hover .surfing-news-card__media::after { opacity: 1; }
	.surfing-news-card:hover .surfing-news-card__title .elementor-heading-title a { color: var(--sa-accent-ink); }
	.surfing-news-card:hover .surfing-news-card__link { color: var(--sa-accent-ink); }
	.surfing-news-card:hover .surfing-news-card__meta-inner { border-top-color: var(--sa-accent); }
	.surfing-news-card:hover .surfing-news-card__arrow { transform: translateX(6px); }
}

/* El foco de teclado reproduce el mismo estado que el hover */
.surfing-news-card:focus-within .surfing-news-card__image img { transform: scale(1.05); }
.surfing-news-card:focus-within .surfing-news-card__arrow { transform: translateX(6px); }

.surfing-news-card__link:focus-visible,
.surfing-news-card__title .elementor-heading-title a:focus-visible,
.surfing-news-card__category:focus-visible {
	outline: 2px solid var(--sa-accent-ink);
	outline-offset: 3px;
	border-radius: 2px;
}

.surfing-news-card__link:focus-visible::after { outline: none; }

/* -------------------------------------------------------------------------
   5. BOTÓN "VER MÁS"  (paginación Load More del Loop Grid)
   ---------------------------------------------------------------------- */

.surfing-actualidad__grid .elementor-button,
.surfing-actualidad .e-load-more-anchor + * .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 14px 30px;
	border: 0;
	border-radius: 999px;
	background: var(--sa-accent);
	color: #fff;
	font-family: Inter, sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .2px;
	text-transform: none;
	transition: background-color .3s var(--sa-ease), transform .3s var(--sa-ease);
}

.surfing-actualidad__grid .elementor-button:hover,
.surfing-actualidad__grid .elementor-button:focus-visible {
	background: var(--sa-accent-dark);
	color: #fff;
	transform: translateY(-2px);
}

.surfing-actualidad__grid .elementor-button:focus-visible {
	outline: 2px solid var(--sa-ink);
	outline-offset: 3px;
}

.surfing-actualidad__grid .elementor-button::after {
	content: "→";
	font-size: 15px;
	line-height: 1;
	transition: transform .3s var(--sa-ease);
}

.surfing-actualidad__grid .elementor-button:hover::after { transform: translateX(4px); }

.surfing-actualidad__grid .e-load-more-message {
	font-family: Inter, sans-serif;
	font-size: 14px;
	color: var(--sa-muted);
	text-align: center;
	padding-top: 10px;
}

/* -------------------------------------------------------------------------
   6. RESPONSIVE FINO
   ---------------------------------------------------------------------- */

@media (max-width: 1199px) {
	.surfing-news-card__title .elementor-heading-title { font-size: 18px; }
}

@media (max-width: 767px) {
	.surfing-news-card__content.e-con,
	.surfing-news-card__content.e-container { padding-top: 14px; }
	.surfing-news-card__title .elementor-heading-title {
		font-size: 19px;
		-webkit-line-clamp: 4;
	}
	.surfing-news-card__excerpt-text { font-size: 15px; -webkit-line-clamp: 3; }
	.surfing-actualidad__filters .e-filter,
	.surfing-actualidad__filters .elementor-widget-container > div {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 4px;
	}
	.surfing-actualidad__filters .e-filter::-webkit-scrollbar,
	.surfing-actualidad__filters .elementor-widget-container > div::-webkit-scrollbar { display: none; }
	.surfing-actualidad__filters .e-filter-item { flex: none; }
	.surfing-actualidad__grid .e-loop__load-more,
	.surfing-actualidad__grid .elementor-button-wrapper { display: block; width: 100%; }
	.surfing-actualidad__grid .elementor-button { width: 100%; justify-content: center; }
}

/* Sin hover (táctil): el zoom no depende del hover y la tarjeta es usable igual */
@media (hover: none) {
	.surfing-news-card__image img { transform: none; }
	.surfing-news-card__media::after { opacity: .35; }
}

/* -------------------------------------------------------------------------
   7. PREFERENCIA DE MOVIMIENTO REDUCIDO
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.surfing-actualidad *,
	.surfing-actualidad *::before,
	.surfing-actualidad *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
	.surfing-news-card:hover .surfing-news-card__image img,
	.surfing-news-card:focus-within .surfing-news-card__image img { transform: none; }
	.surfing-news-card:hover .surfing-news-card__arrow,
	.surfing-news-card:focus-within .surfing-news-card__arrow { transform: none; }
	.surfing-actualidad__grid .elementor-button:hover { transform: none; }
}

/* =========================================================================
   8. PÁGINAS DE ARCHIVO (plantilla "Blog Default Archive")
   Mismas tarjetas que la portada. Aquí el "filtro" son enlaces reales al
   archivo de cada categoría: la consulta la hace WordPress, las URLs siguen
   siendo limpias y rastreables y la paginación nativa no se rompe.
   ========================================================================= */

.surfing-archive-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 30px;
}

.surfing-archive-nav .surfing-archive-nav__item {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 9px 18px;
	border: 1px solid var(--sa-line-strong);
	border-radius: 999px;
	background: var(--sa-bg);
	color: var(--sa-ink);
	font-family: Inter, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -.1px;
	text-transform: none;
	text-decoration: none;
	transition: color .25s var(--sa-ease), border-color .25s var(--sa-ease),
	            background-color .25s var(--sa-ease);
}

.surfing-archive-nav .surfing-archive-nav__item:hover {
	border-color: var(--sa-accent);
	color: var(--sa-accent-ink);
}

.surfing-archive-nav .surfing-archive-nav__item.is-active {
	background: var(--sa-ink);
	border-color: var(--sa-ink);
	color: #fff;
	font-weight: 600;
}

/* La categoría actual no se marca solo con color: lleva peso tipográfico,
   subrayado cian y aria-current en el HTML. */
.surfing-archive-nav .surfing-archive-nav__item.is-active::after {
	content: "";
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 5px;
	height: 2px;
	border-radius: 2px;
	background: var(--sa-accent);
}

.surfing-archive-nav .surfing-archive-nav__item:focus-visible {
	outline: 2px solid var(--sa-accent-ink) !important;
	outline-offset: 2px !important;
}

/* Paginación numerada del archivo */
.surfing-actualidad .elementor-pagination {
	margin-top: 42px;
	font-family: Inter, sans-serif;
	font-size: 14px;
}

.surfing-actualidad .elementor-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border-radius: 999px;
	color: var(--sa-muted);
	text-decoration: none;
	transition: color .25s var(--sa-ease), background-color .25s var(--sa-ease);
}

.surfing-actualidad .elementor-pagination a.page-numbers:hover {
	background: rgba(0, 199, 255, .12);
	color: var(--sa-accent-ink);
}

.surfing-actualidad .elementor-pagination .page-numbers.current {
	background: var(--sa-ink);
	color: #fff;
	font-weight: 600;
}

.surfing-actualidad .elementor-pagination a.page-numbers:focus-visible {
	outline: 2px solid var(--sa-accent-ink);
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.surfing-archive-nav {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: 4px;
		margin-bottom: 24px;
	}
	.surfing-archive-nav::-webkit-scrollbar { display: none; }
	.surfing-archive-nav .surfing-archive-nav__item { flex: none; }
}