/* ==========================================================================
   MMKT Experiencias — Shortcode Styles v1.2.0
   Diseño: tarjetas tipo póster (imagen full-bleed + overlay + hover animado)
   ========================================================================== */

/* ── Variables ───────────────────────────────────────────────────────────── */
.mmkt-experiencies-wrap {
	--exp-primary:       var(--global-palette1, #2563EB);
	--exp-primary-dark:  var(--global-palette2, #1D4ED8);
	--exp-radius:        10px;
	--exp-gap:           16px;
	--exp-transition:    0.2s ease;
	--exp-panel-height:  clamp(600px, calc(100vh - 160px), 792px);
	font-family: inherit;
	color: inherit;
}

/* ── Filtros ─────────────────────────────────────────────────────────────── */
.mmkt-filtres {
	display:       flex;
	flex-wrap:     wrap;
	gap:           8px;
	margin-bottom: 16px;
}

.mmkt-filtre {
	display:       inline-flex;
	align-items:   center;
	gap:           6px;
	padding:       7px 15px;
	background:    #f3f4f6;
	border:        1px solid #e5e7eb;
	border-radius: 24px;
	cursor:        pointer;
	font-size:     14px;
	font-weight:   500;
	color:         #374151;
	line-height:   1;
	transition:    background var(--exp-transition), border-color var(--exp-transition), color var(--exp-transition);
}

.mmkt-filtre:hover {
	background:   #e9ebee;
	border-color: #d1d5db;
	color:        var(--exp-primary);
}

.mmkt-filtre.actiu {
	background:   var(--filtre-color, var(--exp-primary));
	border-color: var(--filtre-color, var(--exp-primary));
	color:        #fff;
}

.mmkt-filtre-count {
	background:    rgba(0, 0, 0, 0.12);
	border-radius: 12px;
	padding:       1px 7px;
	font-size:     12px;
	font-weight:   600;
}

.mmkt-filtre.actiu .mmkt-filtre-count {
	background: rgba(255, 255, 255, 0.28);
}

/* ── Layout: dos columnas de igual altura ────────────────────────────────── */
.mmkt-contingut {
	display:     flex;
	gap:         var(--exp-gap);
	height:      var(--exp-panel-height);
	align-items: stretch;
}

/* ── Mapa (izquierda) ────────────────────────────────────────────────────── */
.mmkt-mapa-col {
	flex:           0 0 42%;
	max-width:      42%;
	display:        flex;
	flex-direction: column;
}

.mmkt-mapa-sticky {
	position:       sticky;
	top:            80px;
	height:         var(--exp-panel-height);
	display:        flex;
	flex-direction: column;
}

.mmkt-mapa {
	flex:          1;
	border-radius: var(--exp-radius);
	overflow:      hidden;
	border:        1px solid #e5e7eb;
	background:    #f3f4f6;
}

.mmkt-mapa-credits {
	display: none !important;
	font-size:   11px;
	color:       #9ca3af;
	margin:      4px 0 0;
	text-align:  right;
	flex-shrink: 0;
}

.mmkt-mapa-credits a { color: #9ca3af; }

/* ── Grid (derecha, scroll interno) ─────────────────────────────────────── */
.mmkt-grid-col {
	flex:            1;
	min-width:       0;
	overflow-y:      auto;
	padding-right:   6px;
	scrollbar-width: thin;
	scrollbar-color: #d1d5db transparent;
}

.mmkt-grid-col::-webkit-scrollbar        { width: 5px; }
.mmkt-grid-col::-webkit-scrollbar-track  { background: transparent; }
.mmkt-grid-col::-webkit-scrollbar-thumb  { background: #d1d5db; border-radius: 3px; }

.mmkt-grid {
	display:        grid;
	gap:            var(--exp-gap);
	align-content:  start;
	padding-bottom: 8px;
}

.mmkt-grid-cols-1 { grid-template-columns: 1fr; }
.mmkt-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.mmkt-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

/* ── Tarjeta tipo póster ─────────────────────────────────────────────────── */
/*
   Estructura:
     <article.mmkt-item>
       <div.mmkt-item-imatge> img
       <div.mmkt-item-overlay>
         <div.mmkt-item-frame>
           <span.mmkt-badge>           (categoría, esquina sup. izq.)
           <div.mmkt-item-content>
             h3.mmkt-item-titol
             p.mmkt-item-empresa
             div.mmkt-item-hover-content  (aparece al hover)
*/

.mmkt-item {
	position:      relative;
	aspect-ratio:  3 / 4;
	border-radius: var(--exp-radius);
	overflow:      hidden;
	cursor:        pointer;
	outline:       none;
	background:    #c8cdd4;  /* placeholder cuando no hay imagen */
	transform:     translateY(0);
	transition:    transform 0.3s ease, box-shadow 0.3s ease;
	border: 2px solid #fff;
}

.mmkt-item.mmkt-actiu {
	border: 2px solid var(--exp-primary);
}

/* Imagen */
.mmkt-item-imatge {
	position: absolute;
	inset:    0;
}

.mmkt-item-imatge img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform 0.5s ease;
}

.mmkt-item:hover .mmkt-item-imatge img,
.mmkt-item.mmkt-actiu .mmkt-item-imatge img {
	transform: scale(1.07);
}

/* Sin imagen: gradiente neutro */
.mmkt-item-sin-imagen {
	background: linear-gradient(135deg, #c8cdd4 0%, #9aa0ab 100%);
}

/* Overlay de gradiente */
.mmkt-item-overlay {
	position:   absolute;
	inset:      0;
	padding:    10px;
	display:    flex;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0)    30%,
		rgba(0, 0, 0, 0.55) 62%,
		rgba(0, 0, 0, 0.82) 100%
	);
	transition: background 0.35s ease;
}

.mmkt-item:hover .mmkt-item-overlay,
.mmkt-item.mmkt-actiu .mmkt-item-overlay {
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.05) 20%,
		rgba(0, 0, 0, 0.62) 58%,
		rgba(0, 0, 0, 0.90) 100%
	);
}

/* Marco blanco interior */
.mmkt-item-frame {
	position:       relative;
	flex:           1;
	display:        flex;
	flex-direction: column;
	justify-content: flex-end;
	border:         1px solid #fff;
	border-radius:  8px;
	padding:        18px;
	transition:     border-color 0.35s ease;
}

.mmkt-item:hover .mmkt-item-frame,
.mmkt-item.mmkt-actiu .mmkt-item-frame {
	border-color: rgba(255, 255, 255, 0.72);
}

/* Contenedor múltiples badges (posición absoluta en esquina sup. izq.) */
.mmkt-badges-cats {
	position:  absolute;
	top:       8px;
	left:      8px;
	display:   flex;
	flex-wrap: wrap;
	gap:       4px;
	max-width: calc(100% - 16px);
}

/* Badge categoría (color via inline style) */
.mmkt-badge {
	padding:        3px 9px;
	border-radius:  10px;
	font-size:      10px;
	font-weight:    700;
	color:          #fff;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height:    1.4;
}

/* ── Contenido de la tarjeta ─────────────────────────────────────────────── */
.mmkt-item-content {
	/* flex column implícito por el parent */
}

/* Título */
.mmkt-item-titol {
	margin:      0 0 7px !important;
	font-size:   18px;
	font-weight: 600;
	line-height: 1.1;
	color:       #fff;
	transform:   translateY(4px);
	transition:  transform 0.35s ease;
}

.mmkt-item-titol a {
	color:           #fff;
	text-decoration: none;
}

.mmkt-item-titol a:hover {
	text-decoration: none;
	text-underline-offset: 3px;
}

.mmkt-item:hover .mmkt-item-titol,
.mmkt-item.mmkt-actiu .mmkt-item-titol {
	transform: translateY(-3px);
}

/* Empresa / Proveedor */
.mmkt-item-empresa {
	margin:     0 0 6px !important;
	font-size:  14px;
	line-height: 1.1;
	font-weight: 600;
	color:      rgba(255, 255, 255, 0.75);
	transform:  translateY(4px);
	transition: transform 0.35s ease;
}

.mmkt-item:hover .mmkt-item-empresa,
.mmkt-item.mmkt-actiu .mmkt-item-empresa {
	transform: translateY(-3px);
}

/* ── Contenido que aparece en hover ──────────────────────────────────────── */
.mmkt-item-hover-content {
	overflow:   hidden;
	max-height: 0;
	opacity:    0;
	transform:  translateY(6px);
	transition: max-height 0.4s ease, opacity 0.35s ease, transform 0.35s ease;
	margin-top: 0;
}

.mmkt-item:hover .mmkt-item-hover-content,
.mmkt-item.mmkt-actiu .mmkt-item-hover-content {
	max-height: 110px;
	opacity:    1;
	transform:  translateY(-3px);
	margin-top: 10px;
}

/* Meta en hover (duración, precio, lugar) */
.mmkt-item-meta {
	display:       flex;
	flex-wrap:     wrap;
	gap:           4px 10px;
	margin-bottom: 8px;
}

.mmkt-meta-item {
	display:     	inline-flex;
	align-items: 	flex-start;
	gap:         	5px;
	font-size:   	12px;
	line-height: 	1.1;
	color:       	rgba(255, 255, 255, 0.85);
	margin-bottom: 	4px;
}

.mmkt-meta-item svg { 
	flex-shrink: 0; 
	margin-top:  1px;
}

.mmkt-preu {
	/* same style as other meta items */
}

.mmkt-adreca {
	font-size: 11px;
	opacity:   0.8;
}

/* Botones en hover */
.mmkt-item-accions {
	display:   flex;
	gap:       6px;
	flex-wrap: wrap;
}

.mmkt-btn-info,
.mmkt-btn-reserva {
	display:         inline-flex;
	align-items:     center;
	padding:         5px 12px;
	border-radius:   30px;
	font-size:       12px;
	font-weight:     600;
	text-decoration: none;
	line-height:     1;
	transition:      background 0.2s ease, opacity 0.2s ease;
}

.mmkt-btn-info {
	background: rgba(255, 255, 255, 0.2);
	color:      #fff;
	border:     1px solid rgba(255, 255, 255, 0.45);
}

.mmkt-btn-info:hover {
	background: rgba(255, 255, 255, 0.35);
	color:      #fff;
}

.mmkt-btn-reserva {
	background: var(--exp-primary);
	color:      #fff;
	border:     1px solid transparent;
}

.mmkt-btn-reserva:hover {
	background: var(--exp-primary-dark);
	color:      #fff;
}

/* ── Sin resultados ──────────────────────────────────────────────────────── */
.mmkt-no-results {
	color:     #6b7280;
	font-size: 15px;
	padding:   20px 0;
}

/* ── Tooltip Leaflet ─────────────────────────────────────────────────────── */
.mmkt-leaflet-tooltip {
	background:    #1f2937;
	color:         #fff;
	border:        none;
	border-radius: 6px;
	padding:       5px 10px;
	font-size:     13px;
	font-weight:   500;
	box-shadow:    0 2px 8px rgba(0, 0, 0, 0.22);
	white-space:   normal;
	width:     200px;
	text-align:    center;
	line-height:   1.3;
}

.mmkt-leaflet-tooltip::before {
	border-top-color: #1f2937;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1300px) {
	.mmkt-grid-cols-3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 900px) {
	.mmkt-contingut {
		flex-direction: column;
		height:         auto;
	}

	.mmkt-mapa-col {
		flex:      none;
		max-width: 100%;
		width:     100%;
	}

	.mmkt-mapa-sticky {
		position: static;
		height:   400px;
	}

	.mmkt-grid-col {
		overflow-y:    visible;
		height:        auto;
		padding-right: 0;
	}

	.mmkt-grid-cols-3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.mmkt-mapa-sticky { height: 350px; }

	/* ── Carousel horitzontal ── */
	.mmkt-grid-col {
		overflow-x:                auto;
		overflow-y:                hidden;
		padding-right:             0;
		padding-bottom:            12px;
		scroll-snap-type:          x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	.mmkt-grid,
	.mmkt-grid-cols-1,
	.mmkt-grid-cols-2,
	.mmkt-grid-cols-3 {
		display:               flex;
		flex-wrap:             nowrap;
		grid-template-columns: unset;
		padding:               4px 4px 0;
	}

	.mmkt-item {
		flex:             0 0 72vw;
		max-width:        300px;
		scroll-snap-align: start;
	}
}