/* ==========================================================================
   Single Experiencia — Layout v2.0
   Template: single-experiencia.php
   Child theme: burgos-experience (Kadence)

   Estructura:
     .mmkt-exp-single-wrap
       .mmkt-exp-hero          (imatge + overlay + títol)
       .mmkt-exp-body
         .mmkt-exp-sidebar     (sticky: xarxes, meta, botons)
         .mmkt-exp-main        (the_content + mapa)
   ========================================================================== */

/* ── Variables ───────────────────────────────────────────────────────────── */
.mmkt-exp-single-wrap {
	--exp-primary:      var(--global-palette1, #2563EB);
	--exp-primary-dark: var(--global-palette2, #1D4ED8);
	--exp-radius:       14px;
	--exp-sidebar-w:    260px;

	padding: 0 0 64px;
}

/* ══ HERO ════════════════════════════════════════════════════════════════════ */
.mmkt-exp-hero {
	position:      relative;
	border-radius: var(--exp-radius);
	overflow:      hidden;
	aspect-ratio:  16 / 6;
	background:    #1a1a2e;
	margin-bottom: 40px;
}

.mmkt-exp-hero img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}

/* Placeholder si no hi ha imatge */
.mmkt-exp-hero-no-img {
	background: linear-gradient(135deg, #1e3a5f 0%, #2563EB 100%);
}

.mmkt-exp-hero-overlay {
	position:   absolute;
	inset:      0;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0)    25%,
		rgba(0, 0, 0, 0.72) 100%
	);
}

.mmkt-exp-hero-info {
	position: absolute;
	bottom:   30px;
	left:     36px;
	right:    36px;
}

/* Category tags dins el hero */
.mmkt-exp-hero-cats {
	display:       flex;
	flex-wrap:     wrap;
	gap:           6px;
	margin-bottom: 10px;
}

.mmkt-exp-hero-cat-tag {
	display:         inline-block;
	padding:         4px 13px;
	border-radius:   20px;
	font-size:       11px;
	font-weight:     700;
	color:           #fff;
	text-transform:  uppercase;
	letter-spacing:  0.06em;
	text-decoration: none;
	opacity:         0.95;
	transition:      opacity 0.2s;
}

.mmkt-exp-hero-cat-tag:hover {
	opacity: 1;
	color:   #fff;
}

/* Títol hero */
.mmkt-exp-hero-title {
	margin:      0 0 6px !important;
	font-size:   clamp(22px, 3.5vw, 40px);
	font-weight: 800;
	color:       #fff;
	line-height: 1.15;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* Empresa sota el títol al hero */
.mmkt-exp-hero-empresa {
	margin:      0;
	font-size:   16px;
	font-weight: 600;
	color:       rgba(255, 255, 255, 0.8);
}

/* ══ BODY: sidebar + contingut ═══════════════════════════════════════════════ */
.mmkt-exp-body {
	display:               grid;
	grid-template-columns: var(--exp-sidebar-w) 1fr;
	gap:                   48px;
	align-items:           start;
}

/* ══ SIDEBAR ════════════════════════════════════════════════════════════════ */
.mmkt-exp-sidebar {
	position: sticky;
	top:      160px;
}

/* ── Xarxes socials ──────────────────────────────────────────────────────── */
.mmkt-exp-social {
	display:       flex;
	flex-wrap:     wrap;
	gap:           6px;
	margin-bottom: 16px;
}

.mmkt-exp-social-link {
	width:           36px;
	height:          36px;
	border-radius:   50%;
	background:      #f3f4f6;
	border:          1px solid #e5e7eb;
	display:         flex;
	align-items:     center;
	justify-content: center;
	color:           #4b5563;
	text-decoration: none;
	transition:      background 0.2s, color 0.2s, border-color 0.2s;
	flex-shrink:     0;
}

.mmkt-exp-social-link:hover {
	background:   var(--exp-primary);
	border-color: var(--exp-primary);
	color:        #fff;
}

/* ── Meta list ───────────────────────────────────────────────────────────── */
.mmkt-exp-metalist {
	list-style:    none;
	margin:        0 0 16px !important;
	padding:       0 !important;
	border:        1px solid #e5e7eb;
	border-radius: var(--exp-radius);
	overflow:      hidden;
}

.mmkt-exp-metalist-item {
	display:     flex;
	align-items: center;
	gap:         10px;
	padding:     10px 14px;
	border-bottom: 1px solid #f3f4f6;
	background:    #fff;
}

.mmkt-exp-metalist-item:last-child {
	border-bottom: none;
}

.mmkt-exp-metalist-icon {
	flex-shrink:     0;
	width:           28px;
	height:          28px;
	background:      var(--exp-primary);
	color:           #fff;
	border-radius:   6px;
	display:         flex;
	align-items:     center;
	justify-content: center;
}

.mmkt-exp-metalist-icon svg {
	width: 16px;
	height: 16px;
}

.mmkt-exp-metalist-text {
	display:        flex;
	flex-direction: column;
	gap:            1px;
	min-width:      0;
}

.mmkt-exp-metalist-label {
	font-size:      10px;
	font-weight:    600;
	color:          #9ca3af;
	text-transform: uppercase;
	letter-spacing: 0.07em;
}

.mmkt-exp-metalist-value {
	font-size:   13px;
	font-weight: 600;
	color:       #111827;
	line-height: 1.3;
}

.mmkt-exp-metalist-link {
	font-size: 		 13px;
    font-weight: 	 600;
    line-height: 	 1.3;
	color:           var(--exp-primary);
	text-decoration: none;
	white-space:     nowrap;
	overflow:        hidden;
	text-overflow:   ellipsis;
	max-width:       170px;
	display:         block;
}

.mmkt-exp-metalist-link:hover {
	text-decoration: underline;
	color:           var(--exp-primary-dark);
}

/* ── Botons sidebar ──────────────────────────────────────────────────────── */
.mmkt-exp-sidebar-btns {
	display:        flex;
	flex-direction: column;
	gap:            8px;
}

.mmkt-exp-btn-precio {
	display:     block;
	padding:     13px 16px;
	background:  #111827;
	color:       #fff;
	border-radius: 8px;
	font-size:   14px;
	font-weight: 700;
	text-align:  center;
}

.mmkt-exp-btn-reserva {
	display:         block;
	padding:         13px 16px;
	background:      var(--exp-primary);
	color:           #fff;
	border-radius:   8px;
	font-size:       14px;
	font-weight:     700;
	text-align:      center;
	text-decoration: none;
	transition:      background 0.2s ease;
}

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

/* ══ CONTINGUT PRINCIPAL ══════════════════════════════════════════════════════ */
.mmkt-exp-main {
	min-width: 0;
}

.mmkt-exp-content {
	font-size:   16px;
	line-height: 1.75;
	color:       var(--global-palette5, #374151);
}

.mmkt-exp-content p:first-child { margin-top: 0; }
.mmkt-exp-content p:last-child  { margin-bottom: 0; }

/* ── Meta item alt (equipamiento multilínia) ─────────────────────────────── */
.mmkt-exp-metalist-item--tall {
	align-items: flex-start;
}

.mmkt-exp-metalist-value--multi {
	white-space: pre-line;
	line-height: 1.5;
}

/* ── Idiomes ─────────────────────────────────────────────────────────────── */
.mmkt-exp-idiomas {
	margin-top:    32px;
	padding-top:   28px;
	border-top:    1px solid #e5e7eb;
}

.mmkt-exp-idiomas-list {
	list-style: none;
	margin:     0 !important;
	padding:    0 !important;
	display:    flex;
	flex-wrap:  wrap;
	gap:        8px;
}

.mmkt-exp-idioma-item {
	display:       inline-flex;
	align-items:   center;
	gap:           6px;
	padding:       6px 13px;
	background:    #eff6ff;
	border:        1px solid #bfdbfe;
	border-radius: 20px;
	font-size:     13px;
	font-weight:   500;
	color:         #1e40af;
	line-height:   1;
}

.mmkt-exp-idioma-item svg {
	flex-shrink: 0;
	color:       #3b82f6;
}

/* ── Criterios (accesibilidad / sostenibilidad) ──────────────────────────── */
.mmkt-exp-criterios {
	margin-top:    32px;
	padding-top:   28px;
	border-top:    1px solid #e5e7eb;
}

/* Accesibilidad: reutilitza .mmkt-exp-idioma-item (blau) */
/* Sostenibilidad: override amb verd */
.mmkt-exp-criterios--sostenibilitat .mmkt-exp-idioma-item {
	background: #f0fdf4;
	border:     1px solid #bbf7d0;
	color:      #166534;
}

.mmkt-exp-criterios--sostenibilitat .mmkt-exp-idioma-item svg {
	color: #16a34a;
}

/* ── Extras / Característiques ───────────────────────────────────────────── */
.mmkt-exp-extras {
	margin-top:    32px;
	padding-top:   28px;
	border-top:    1px solid #e5e7eb;
}

.mmkt-exp-extras-title {
	margin:      0 0 14px;
	font-size:   13px;
	font-weight: 700;
	color:       #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.07em;
}

.mmkt-exp-extras-list {
	list-style: none;
	margin:     0 !important;
	padding:    0 !important;
	display:    flex;
	flex-wrap:  wrap;
	gap:        8px;
}

.mmkt-exp-extra-item {
	display:       inline-flex;
	align-items:   center;
	gap:           6px;
	padding:       6px 13px;
	background:    #f0fdf4;
	border:        1px solid #96BD4D;
	border-radius: 20px;
	font-size:     13px;
	font-weight:   500;
	color:         #166534;
	line-height:   1;
}

.mmkt-exp-extra-item svg {
	flex-shrink: 0;
	color:       #16a34a;
}

/* ── Link Google Maps al sidebar (punto de encuentro) ────────────────────── */
.mmkt-exp-gmaps-link {
	display:     inline-flex !important;
	align-items: center;
	gap:         5px;
}

.mmkt-exp-gmaps-link svg {
	flex-shrink: 0;
	opacity:     0.7;
}

/* ── Google Maps button sota el mapa ─────────────────────────────────────── */
.mmkt-exp-gmaps-row {
	margin-top: 12px;
	text-align: right;
}

.mmkt-exp-gmaps-btn {
	display:       inline-flex;
	align-items:   center;
	gap:           6px;
	padding:       7px 14px;
	background:    #fff;
	border:        1px solid #d1d5db;
	border-radius: 8px;
	font-size:     13px;
	font-weight:   500;
	color:         #374151;
	text-decoration: none;
	transition:    border-color 0.2s, color 0.2s;
}

.mmkt-exp-gmaps-btn:hover {
	border-color: var(--exp-primary, #2563EB);
	color:        var(--exp-primary, #2563EB);
}

/* ── Mapa ────────────────────────────────────────────────────────────────── */
.mmkt-exp-map-section {
	margin-top: 36px;
}

.mmkt-exp-map-wrap {
	border-radius: var(--exp-radius);
	overflow:      hidden;
	border:        1px solid #e5e7eb;
}

#mmkt-exp-mapa-single {
	height: 300px;
	width:  100%;
}

/* ── Leaflet marker override ─────────────────────────────────────────────── */
.mmkt-marker-icon {
	background: transparent;
	border:     none;
}

/* ── Galeria ─────────────────────────────────────────────────────────────── */
.mmkt-exp-gallery {
	margin-top:  32px;
	padding-top: 28px;
	border-top:  1px solid #e5e7eb;
}

.mmkt-exp-gallery-grid {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   6px;
}

.mmkt-exp-gallery-item {
	display:       block;
	aspect-ratio:  4 / 3;
	overflow:      hidden;
	border-radius: 8px;
	background:    #f3f4f6;
}

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

.mmkt-exp-gallery-item:hover img {
	transform: scale(1.06);
}

/* ── Experiències relacionades ───────────────────────────────────────────── */
.mmkt-exp-related {
	margin-top:  56px;
	padding-top: 40px;
	border-top:  2px solid #e5e7eb;
}

.mmkt-exp-related-title {
	margin:      0 0 24px;
	font-size:   22px;
	font-weight: 700;
	color:       var(--global-palette3, #111827);
}

.mmkt-exp-related-grid {
	display:               grid;
	grid-template-columns: repeat(4, 1fr);
	gap:                   20px;
}

.mmkt-exp-related-card {
	position:        relative;
	display:         block;
	border-radius:   var(--exp-radius);
	overflow:        hidden;
	aspect-ratio:    3 / 4;
	background:      #1a1a2e;
	text-decoration: none;
}

.mmkt-exp-related-img {
	position: absolute;
	inset:    0;
}

.mmkt-exp-related-img img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform 0.4s ease;
}

.mmkt-exp-related-card:hover .mmkt-exp-related-img img {
	transform: scale(1.05);
}

.mmkt-exp-related-overlay {
	position:   absolute;
	inset:      0;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0)    35%,
		rgba(0, 0, 0, 0.75) 100%
	);
}

.mmkt-exp-related-info {
	position: absolute;
	bottom:   20px;
	left:     18px;
	right:    18px;
}

.mmkt-exp-related-cat {
	display:        inline-block;
	padding:        3px 10px;
	border-radius:  20px;
	font-size:      10px;
	font-weight:    700;
	color:          #fff;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin:         0 4px 6px 0;
}

.mmkt-exp-related-name {
	margin:      0 0 4px;
	font-size:   16px;
	font-weight: 700;
	color:       #fff;
	line-height: 1.2;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.mmkt-exp-related-empresa {
	margin:      0;
	font-size:   12px;
	font-weight: 400;
	color:       rgba(255, 255, 255, 0.75);
}

/* ── Valoraciones ────────────────────────────────────────────────────────── */
.mmkt-exp-reviews {
	margin-top:    48px;
	padding-top:   40px;
	border-top:    2px solid #e5e7eb;
}

.mmkt-exp-reviews-title {
	margin:      0 0 28px;
	font-size:   22px;
	font-weight: 700;
	color:       var(--global-palette3, #111827);
}

.mmkt-exp-reviews-grid {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   20px;
}

.mmkt-exp-review-card {
	display:        flex;
	flex-direction: column;
	padding:        24px;
	background:     #fff;
	border:         1px solid #e5e7eb;
	border-radius:  var(--exp-radius, 14px);
	box-shadow:     0 1px 4px rgba(0,0,0,.05);
}

.mmkt-exp-review-quote {
	color:         var(--exp-primary, #2563EB);
	opacity:       0.25;
	margin-bottom: 12px;
	line-height:   1;
}

.mmkt-exp-review-text {
	flex:        1;
	margin:      0 0 20px;
	font-size:   14px;
	line-height: 1.65;
	color:       #374151;
	font-style:  italic;
}

.mmkt-exp-review-author {
	display:        flex;
	flex-direction: column;
	gap:            2px;
	padding-top:    16px;
	border-top:     1px solid #f3f4f6;
}

.mmkt-exp-review-name {
	font-size:   14px;
	font-weight: 700;
	color:       #111827;
}

.mmkt-exp-review-empresa {
	font-size: 12px;
	color:     #9ca3af;
}

@media (max-width: 480px) {
	.mmkt-exp-hero-title {
		font-size: 20px;
	}

	.mmkt-exp-hero-info {
		bottom: 16px;
		left:   16px;
		right:  16px;
	}

	.mmkt-exp-single-wrap {
		padding-bottom: 40px;
	}
}

/* ── Qué incluye / No incluye ────────────────────────────────────────────── */
.mmkt-exp-incluye {
	margin-top:    32px;
	padding-top:   28px;
	border-top:    1px solid #e5e7eb;
}

.mmkt-exp-incluye-grid {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   16px 32px;
}

.mmkt-exp-incluye-title {
	font-size: 		13px;
    font-weight: 	700;
    color: 		  #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.mmkt-exp-incluye-list,
.mmkt-exp-no-incluye-list {
	list-style:    none;
	margin:        0 !important;
	padding:       0 !important;
	display:       flex;
	flex-direction: column;
	gap:           6px;
}

.mmkt-exp-incluye-item,
.mmkt-exp-no-incluye-item {
	display:     flex;
	align-items: flex-start;
	gap:         8px;
	font-size:   14px;
	line-height: 1.45;
	padding:     6px 10px;
	border-radius: 8px;
}

.mmkt-exp-incluye-item {
	background-color: #f0fdf4;
	color:            #166534;
}

.mmkt-exp-incluye-item svg {
	flex-shrink: 0;
	margin-top:  2px;
	color:       #16a34a;
}

.mmkt-exp-no-incluye-item {
	background-color: #fef2f2;
	color:            #991b1b;
}

.mmkt-exp-no-incluye-item svg {
	flex-shrink: 0;
	margin-top:  2px;
	color:       #dc2626;
}

@media (max-width: 560px) {
	.mmkt-exp-incluye-grid {
		grid-template-columns: 1fr;
	}
}


/* ══ RESPONSIVE ══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
	.mmkt-exp-single-wrap {
		--exp-sidebar-w: 230px;
	}

	.mmkt-exp-body {
		gap: 32px;
	}
}

@media (max-width: 768px) {
	.mmkt-exp-hero {
		aspect-ratio:  16 / 9;
		border-radius: 10px;
		margin-bottom: 28px;
	}

	.mmkt-exp-hero-info {
		bottom: 20px;
		left:   20px;
		right:  20px;
	}

	.mmkt-exp-body {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	/* Sidebar per sota del contingut en mòbil */
	.mmkt-exp-sidebar {
		position: static;
		order:    2;
	}

	.mmkt-exp-main {
		order: 1;
	}

	.mmkt-exp-metalist-item {
		padding: 9px 12px;
	}

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

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

	.mmkt-exp-reviews-grid {
		grid-template-columns: 1fr;
	}
}