/**
 * ==============================================================================
 * Archivo: publisher.css
 * Ruta: localpadel/includes/modules/publisher/publisher.css
 *
 * Descripción:
 *   Estilos frontend del shortcode [lp_city_matches]
 *   - UI iOS premium impactante: HERO con glow, cards horizontales, pills con icono y color
 *   - Sin dependencias del módulo Matches
 *
 * Versión: 2.2.0
 * Autor: Alberto Aranda Aranda
 * Último cambio: 2025-12-23 Europe/Madrid
 * ==============================================================================
 */

/* =========================================================
   Base + tokens
   ========================================================= */

:root{
	--lp-brand: #2C4A9C;
	--lp-ink: #0f172a;
	--lp-muted: rgba(15,23,42,.70);
	--lp-border: rgba(15,23,42,.10);
	--lp-bg: rgba(255,255,255,.92);
	--lp-card: rgba(255,255,255,.96);
	--lp-shadow: 0 18px 50px rgba(15,23,42,.10);
	--lp-shadow-soft: 0 12px 34px rgba(15,23,42,.08);
	--lp-radius-xl: 26px;
	--lp-radius-lg: 20px;
	--lp-radius-md: 16px;
	--lp-pill: 999px;
}

/* Tipografía obligatoria */
.lp-osans,
.lp-osans *{
	font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Mejoras de render */
.lp-osans{
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.lp-city-matches{
	margin: 28px 0;
	position: relative;
}

/* =========================================================
   HERO (impactante)
   ========================================================= */

.lp-city-header{
	position: relative;
	overflow: hidden;

	margin-bottom: 16px;
	padding: 18px 18px 16px;

	border-radius: var(--lp-radius-xl);
	border: 1px solid var(--lp-border);

	background:
		radial-gradient(900px 420px at 80% 0%, rgba(44,74,156,.26), transparent 62%),
		radial-gradient(700px 360px at 0% 10%, rgba(99,102,241,.18), transparent 60%),
		linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.90));

	box-shadow: var(--lp-shadow-soft);
}

.lp-city-header::before{
	content:"";
	position:absolute;
	inset:-2px;
	border-radius: var(--lp-radius-xl);
	pointer-events:none;

	background:
		linear-gradient(135deg, rgba(44,74,156,.55), rgba(255,255,255,0) 35%, rgba(44,74,156,.22) 70%, rgba(255,255,255,0));
	opacity:.35;
}

.lp-city-header::after{
	content:"";
	position:absolute;
	top:-55%;
	left:-35%;
	width: 220%;
	height: 220%;
	transform: rotate(10deg);
	pointer-events:none;

	background:
		radial-gradient(closest-side, rgba(255,255,255,.60), rgba(255,255,255,0) 70%);
	opacity:.25;
}

.lp-city-header h1{
	margin: 0 0 8px;
	font-size: 22px;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--lp-ink);
}

.lp-city-header p{
	margin: 0;
	color: rgba(15,23,42,.72);
	font-size: 14px;
	line-height: 1.45;
	max-width: 54ch;
}

/* =========================================================
   Secciones
   ========================================================= */

.lp-pub-section{
	margin-top: 14px;
	padding: 14px;
	border-radius: var(--lp-radius-xl);
	border: 1px solid rgba(15,23,42,.08);

	background:
		radial-gradient(700px 260px at 85% 0%, rgba(44,74,156,.10), transparent 60%),
		linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.90));

	box-shadow: 0 18px 46px rgba(15,23,42,.08);
}

.lp-pub-section-head{
	margin-bottom: 10px;
}

.lp-pub-section-head h2{
	margin: 0 0 6px;
	font-size: 18px;
	line-height: 1.18;
	letter-spacing: -0.015em;
	color: var(--lp-ink);
}

.lp-pub-section-head p{
	margin: 0;
	color: rgba(15,23,42,.70);
	font-size: 13px;
	line-height: 1.45;
	max-width: 68ch;
}

/* =========================================================
   CTA (botón espectacular)
   ========================================================= */

.lp-btn-primary{
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;

	margin-top: 14px;
	padding: 12px 16px;
	border-radius: 16px;

	color: #fff;
	text-decoration: none;

	background:
		linear-gradient(135deg, rgba(44,74,156,1), rgba(73,97,200,1));
	border: 1px solid rgba(255,255,255,.22);

	box-shadow:
		0 16px 40px rgba(44,74,156,.28),
		0 1px 0 rgba(255,255,255,.20) inset;

	font-size: 14px;
	line-height: 1;

	transition: transform .18s ease, filter .18s ease;
}

.lp-btn-primary::before{
	content:"";
	position:absolute;
	inset:0;
	border-radius: 16px;
	pointer-events:none;
	background: radial-gradient(120px 60px at 25% 25%, rgba(255,255,255,.45), rgba(255,255,255,0) 60%);
	opacity:.65;
}

.lp-btn-primary::after{
	content:"";
	position:absolute;
	top:-40%;
	left:-60%;
	width: 70%;
	height: 180%;
	transform: rotate(18deg);
	border-radius: 40px;
	pointer-events:none;
	background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.35), rgba(255,255,255,0));
	opacity:.55;
	transition: transform .55s ease, left .55s ease, opacity .55s ease;
}

.lp-btn-primary:hover{
	transform: translateY(-1px);
	filter: brightness(1.02);
}

.lp-btn-primary:hover::after{
	left: 120%;
	opacity:.75;
}

.lp-btn-primary:active{
	transform: translateY(0);
	filter: brightness(.98);
}

/* =========================================================
   Lista (ahora: filas)
   ========================================================= */

.lp-city-list{
	margin-top: 12px;
	display: grid;
	gap: 12px;
}

/* =========================================================
   NUEVO: Cards horizontales (fila)
   ========================================================= */

.lp-match-row-card{
	border-radius: var(--lp-radius-lg);
	border: 1px solid rgba(15,23,42,.10);
	background: var(--lp-card);
	box-shadow: var(--lp-shadow-soft);
	overflow: hidden;
	position: relative;
}

.lp-match-row-card::before{
	content:"";
	position:absolute;
	inset:-1px;
	border-radius: var(--lp-radius-lg);
	pointer-events:none;
	background:
		linear-gradient(135deg, rgba(44,74,156,.18), rgba(255,255,255,0) 36%, rgba(44,74,156,.08) 72%, rgba(255,255,255,0));
	opacity:.40;
}

.lp-match-row-card::after{
	content:"";
	position:absolute;
	inset:0;
	pointer-events:none;
	background: radial-gradient(520px 220px at 18% 0%, rgba(44,74,156,.10), transparent 60%);
	opacity:.65;
}

.lp-match-row-link{
	position: relative;
	z-index: 2;

	display: grid;
	grid-template-columns: 1fr auto;
	gap: 12px;

	padding: 14px;
	text-decoration: none;
	color: inherit;

	transition: transform .16s ease, filter .16s ease;
}

.lp-match-row-card:hover .lp-match-row-link{
	transform: translateY(-1px);
	filter: brightness(1.01);
}

.lp-match-col--main{
	min-width: 0;
}

.lp-match-title{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 10px;
}

.lp-match-title-date{
	font-size: 14px;
	line-height: 1.2;
	color: var(--lp-ink);
	letter-spacing: -0.01em;
}

.lp-match-title-city{
	font-size: 12px;
	color: rgba(15,23,42,.70);
	padding: 4px 10px;
	border-radius: 999px;
	border: 1px solid rgba(15,23,42,.10);
	background: rgba(15,23,42,.03);
}

.lp-match-pills{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* CTA lateral */
.lp-match-col--cta{
	display: flex;
	align-items: center;
	justify-content: center;
}

.lp-match-row-cta{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	padding: 10px 12px;
	border-radius: 16px;

	color: var(--lp-brand);
	border: 1px solid rgba(44,74,156,.18);
	background: linear-gradient(180deg, rgba(44,74,156,.10), rgba(44,74,156,.05));
	font-size: 14px;
	white-space: nowrap;

	box-shadow: 0 12px 30px rgba(44,74,156,.10);
}

.lp-match-row-cta svg{
	display: block;
}

/* Mobile: CTA abajo */
@media (max-width: 720px){
	.lp-match-row-link{
		grid-template-columns: 1fr;
	}
	.lp-match-col--cta{
		justify-content: stretch;
	}
	.lp-match-row-cta{
		width: 100%;
	}
}

/* =========================================================
   NUEVO: Pills con iconos + color
   ========================================================= */

.lp-pill{
	display: inline-flex;
	align-items: center;
	gap: 8px;

	padding: 8px 10px;
	border-radius: var(--lp-pill);
	border: 1px solid rgba(15,23,42,.10);

	background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(15,23,42,.03));
	color: rgba(15,23,42,.78);

	font-size: 12px;
	line-height: 1;

	box-shadow:
		0 10px 22px rgba(15,23,42,.06),
		0 1px 0 rgba(255,255,255,.75) inset;
}

.lp-pill-ico{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	color: currentColor;
	opacity: .95;
}

.lp-pill-ico svg{
	display: block;
}

/* Variantes por tipo */
.lp-pill--court{
	color: rgba(15,23,42,.82);
	background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(15,23,42,.03));
}

.lp-pill--price{
	color: rgba(2,132,199,.95);
	border-color: rgba(2,132,199,.20);
	background: linear-gradient(180deg, rgba(2,132,199,.12), rgba(2,132,199,.06));
}

.lp-pill--players{
	color: rgba(20,83,45,.95);
	border-color: rgba(34,197,94,.22);
	background: linear-gradient(180deg, rgba(34,197,94,.14), rgba(34,197,94,.06));
}

.lp-pill--kpi.lp-pill--warn{
	color: rgba(146,64,14,.97);
	border-color: rgba(249,115,22,.24);
	background: linear-gradient(180deg, rgba(249,115,22,.20), rgba(249,115,22,.08));
}

.lp-pill--kpi.lp-pill--ok{
	color: rgba(15,118,110,.97);
	border-color: rgba(45,212,191,.24);
	background: linear-gradient(180deg, rgba(45,212,191,.20), rgba(45,212,191,.08));
}

.lp-pill--gender{
	color: rgba(109,40,217,.95);
	border-color: rgba(167,139,250,.24);
	background: linear-gradient(180deg, rgba(167,139,250,.20), rgba(167,139,250,.08));
}

.lp-pill--status{
	color: rgba(44,74,156,.98);
	border-color: rgba(44,74,156,.24);
	background: linear-gradient(180deg, rgba(44,74,156,.18), rgba(44,74,156,.08));
}

/* =========================================================
   Fallback: tu card antigua sigue funcionando
   ========================================================= */

.lp-match-card{
	position: relative;
	overflow: hidden;

	padding: 14px 14px 12px;
	border-radius: var(--lp-radius-lg);

	border: 1px solid rgba(15,23,42,.10);
	background: var(--lp-card);

	box-shadow: var(--lp-shadow-soft);
	transform: translateZ(0);
}

.lp-match-row{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}

.lp-match-date{
	color: var(--lp-ink);
	font-size: 14px;
	line-height: 1.2;
}

.lp-match-kpi{
	flex: 0 0 auto;
	padding: 7px 10px;
	border-radius: var(--lp-pill);
	border: 1px solid rgba(44,74,156,.20);

	background:
		linear-gradient(180deg, rgba(44,74,156,.16), rgba(44,74,156,.08));
	color: rgba(15,23,42,.86);

	font-size: 12px;
	line-height: 1;
	box-shadow: 0 10px 22px rgba(44,74,156,.10);
}

.lp-match-meta{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}

.lp-match-pill{
	display: inline-flex;
	align-items: center;

	padding: 7px 10px;
	border-radius: var(--lp-pill);

	border: 1px solid rgba(15,23,42,.10);
	background:
		linear-gradient(180deg, rgba(255,255,255,.95), rgba(15,23,42,.03));

	color: rgba(15,23,42,.75);
	font-size: 12px;
	line-height: 1;
}

.lp-match-link{
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	padding: 11px 12px;
	border-radius: 16px;

	text-decoration: none;
	color: var(--lp-brand);

	border: 1px solid rgba(44,74,156,.18);
	background:
		linear-gradient(180deg, rgba(44,74,156,.09), rgba(44,74,156,.05));

	font-size: 14px;
}

/* =========================================================
   Empty state
   ========================================================= */

.lp-pub-empty{
	padding: 14px;
	border-radius: var(--lp-radius-lg);
	border: 1px dashed rgba(44,74,156,.22);

	background:
		radial-gradient(520px 220px at 20% 0%, rgba(44,74,156,.10), transparent 60%),
		linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.92));

	color: rgba(15,23,42,.78);
}

.lp-pub-empty p{
	margin: 0 0 8px;
	font-size: 13px;
	line-height: 1.45;
}

.lp-pub-empty-cta{
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	padding: 10px 12px;
	border-radius: 16px;

	text-decoration: none;
	color: #fff;

	background: linear-gradient(135deg, rgba(44,74,156,1), rgba(73,97,200,1));
	border: 1px solid rgba(255,255,255,.22);

	box-shadow:
		0 14px 34px rgba(44,74,156,.22),
		0 1px 0 rgba(255,255,255,.18) inset;

	font-size: 14px;

	transition: transform .18s ease, filter .18s ease;
}

.lp-pub-empty-cta:hover{
	transform: translateY(-1px);
	filter: brightness(1.02);
}

.lp-pub-empty-cta:active{
	transform: translateY(0);
	filter: brightness(.98);
}

/* =========================================================
   SEO block
   ========================================================= */

.lp-city-seo{
	margin-top: 14px;
	padding: 14px 16px;

	border-radius: var(--lp-radius-lg);
	border: 1px solid rgba(15,23,42,.10);

	background:
		radial-gradient(700px 260px at 80% 0%, rgba(44,74,156,.10), transparent 58%),
		linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.92));

	color: rgba(15,23,42,.78);
	box-shadow: 0 18px 46px rgba(15,23,42,.08);
}

.lp-city-seo p{
	margin: 0 0 8px;
	font-size: 13px;
	line-height: 1.5;
}

.lp-city-seo p:last-child{
	margin-bottom: 0;
}

/* =========================================================
   Avisos
   ========================================================= */

.lp-city-notice{
	padding: 12px 14px;
	border-radius: var(--lp-radius-md);
	border: 1px solid rgba(15,23,42,.10);

	background:
		linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.92));

	color: rgba(15,23,42,.78);
	box-shadow: 0 14px 36px rgba(15,23,42,.08);
}

.lp-city-notice code{
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 12px;
	background: rgba(15,23,42,.06);
	border: 1px solid rgba(15,23,42,.08);
	padding: 2px 6px;
	border-radius: 10px;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (min-width: 860px){
	.lp-city-matches{
		margin: 34px 0;
	}

	.lp-city-header{
		padding: 22px 22px 18px;
	}

	.lp-city-header h1{
		font-size: 26px;
	}

	/* En desktop: seguimos a 1 columna (filas) para que sea tipo listado.
	   Si quieres 2 columnas, dime y lo ajusto. */
	.lp-city-list{
		grid-template-columns: 1fr;
		gap: 12px;
	}
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
	.lp-btn-primary,
	.lp-btn-primary:hover,
	.lp-match-row-link,
	.lp-match-row-card:hover .lp-match-row-link,
	.lp-pub-empty-cta,
	.lp-pub-empty-cta:hover{
		transition: none !important;
		transform: none !important;
	}
	.lp-btn-primary::after{
		display:none;
	}
}