/* ===== Tour: single-product.php y archive-product.php (se apoya en blog.css y components.css) ===== */

/* ---------- Listado ---------- */
.tour-archive__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }

.tour-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-6); }
.tour-filter__item { padding: var(--space-2) var(--space-4); border-radius: 999px; background: #faf7f2; font-size: var(--fs-sm); font-weight: 600; color: var(--c-secondary); text-decoration: none; transition: background .2s, color .2s; }
.tour-filter__item:hover, .tour-filter__item:focus-visible { background: var(--c-primary); color: var(--c-secondary); }
.tour-filter__item.is-active { background: var(--c-secondary); color: #fff; }

/* ---------- Hero del tour: título + mosaico de fotos ---------- */
.tour-hero { padding-bottom: 0; }
.tour-hero .breadcrumb { color: var(--c-muted); }
.tour-hero__top > * + * { margin-top: var(--space-4); }
.tour-hero__title { margin: 0; max-width: 900px; font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.2; }
.tour-hero__content { max-width: 900px; margin-top: var(--space-6); }

.tour-mosaic { display: grid; gap: var(--space-3); height: clamp(280px, 38vw, 500px); margin-top: var(--space-6); }
.tour-mosaic__item { position: relative; display: block; min-height: 0; overflow: hidden; border-radius: 12px; background: var(--c-soft); cursor: zoom-in; }
.tour-mosaic .tour-mosaic__item > .tour-mosaic__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .5s; }
.tour-mosaic .tour-mosaic__item:hover > .tour-mosaic__img { transform: scale(1.04); }
.tour-mosaic__more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .55); font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: 700; color: #fff; }
.tour-mosaic--1 { grid-template-columns: 1fr; }
.tour-mosaic--1 .tour-mosaic__item { border-radius: 20px; }
.tour-mosaic--2 { grid-template-columns: 2fr 1fr; }
.tour-mosaic--3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.tour-mosaic--4 { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.tour-mosaic--5 { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.tour-mosaic--3 .tour-mosaic__item:first-child, .tour-mosaic--4 .tour-mosaic__item:first-child, .tour-mosaic--5 .tour-mosaic__item:first-child { grid-row: 1 / 3; }
.tour-mosaic--4 .tour-mosaic__item:nth-child(4) { grid-column: 2 / 4; }
/* Esquinas exteriores redondeadas más grandes */
.tour-mosaic .tour-mosaic__item:first-child { border-radius: 20px 12px 12px 20px; }
.tour-mosaic--1 .tour-mosaic__item:first-child { border-radius: 20px; }
.tour-mosaic--2 .tour-mosaic__item:last-child { border-radius: 12px 20px 20px 12px; }
.tour-mosaic--3 .tour-mosaic__item:nth-child(2), .tour-mosaic--4 .tour-mosaic__item:nth-child(3), .tour-mosaic--5 .tour-mosaic__item:nth-child(3) { border-top-right-radius: 20px; }
.tour-mosaic--3 .tour-mosaic__item:nth-child(3), .tour-mosaic--4 .tour-mosaic__item:nth-child(4), .tour-mosaic--5 .tour-mosaic__item:nth-child(5) { border-bottom-right-radius: 20px; }

/* ---------- Datos rápidos ---------- */
.tour-facts { padding: var(--space-5) 0 0; }
.tour-facts__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.tour-facts__item { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: 14px; background: #faf7f2; }
.tour-facts__icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-primary); color: var(--c-secondary); }
.tour-facts__icon .material-symbols-outlined { font-size: 24px; line-height: 1; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.tour-facts__text { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.tour-facts__label { font-size: var(--fs-xs); line-height: 1.3; color: var(--c-muted); }
.tour-facts__value { font-family: var(--font-heading); font-size: var(--fs-sm); line-height: 1.35; color: var(--c-secondary); }

/* ---------- Pestañas (tabs) ---------- */
.tour-tabs { display: flex; gap: var(--space-2); margin: 0 0 var(--space-6); padding: var(--space-2); border-radius: 16px; background: #faf7f2; overflow-x: auto; scrollbar-width: none; }
.tour-tabs::-webkit-scrollbar { display: none; }
.tour-tabs__tab { flex: 1 0 auto; padding: 12px var(--space-5); border: 0; border-radius: 12px; background: transparent; font-family: var(--font-heading); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; color: var(--c-muted); cursor: pointer; transition: background .2s, color .2s; }
.tour-tabs__tab:hover { color: var(--c-secondary); background: #fff; }
.tour-tabs__tab:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.tour-tabs__tab.is-active { background: var(--c-secondary); color: var(--c-primary); }

/* ---------- Cuerpo ---------- */
.tour-main { min-width: 0; }

/* Sin JavaScript se ven todas las secciones; con JavaScript solo la pestaña activa */
.tour-section + .tour-section { margin-top: var(--space-7); padding-top: var(--space-7); border-top: 1px solid #ebe6dc; }
.js-tabs .tour-section { display: none; margin-top: 0; padding-top: 0; border-top: 0; }
.js-tabs .tour-section.is-active { display: block; animation: tour-fade .3s ease; }
.js-tabs .tour-section__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@keyframes tour-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tour-section__title { margin: 0 0 var(--space-5); font-size: clamp(1.5rem, 3vw, 2rem); }
.tour-section__body > :first-child { margin-top: 0; }
/* El contenido ya trae su propio título (Overview, Itinerario…): se oculta si es el primer elemento */
.tour-section__body > h2:first-child, .tour-section__body > h3:first-child { display: none; }
.tour-faq { display: grid; gap: var(--space-3); }

/* ---------- Lateral de cotización ---------- */
.tour-booking__title { margin: 0 0 var(--space-3); font-size: var(--fs-lg); }
.tour-booking__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-2); margin: 0 0 var(--space-5); }
.tour-booking__label, .tour-booking__unit { font-size: var(--fs-sm); color: var(--c-muted); }
.tour-booking__amount { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 800; line-height: 1.1; color: var(--c-secondary); }
.tour-booking__alt { display: grid; gap: var(--space-3); margin: var(--space-5) 0 0; padding-top: var(--space-5); border-top: 1px solid #ebe6dc; font-size: var(--fs-sm); color: var(--c-muted); text-align: center; }

/* ---------- Relacionados ---------- */
.tour-related { background: #faf7f2; }

/* ---------- Barra móvil ---------- */
.tour-mobile-bar { display: none; }

@media (max-width: 1024px) {
	.tour-archive__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


@media (max-width: 640px) {
	.tour-archive__list { grid-template-columns: 1fr; }
	.tour-mosaic, .tour-mosaic--2, .tour-mosaic--3, .tour-mosaic--4, .tour-mosaic--5 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; height: 300px; }
	.tour-mosaic .tour-mosaic__item:first-child { grid-row: 1 / 3; }
	.tour-mosaic .tour-mosaic__item:nth-child(n+4) { display: none; }
	.tour-mosaic--4 .tour-mosaic__item:nth-child(n) { grid-column: auto; }
	.tour-facts__list { grid-template-columns: 1fr 1fr; }
	.tour-facts__item { flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); }
		.tour-section + .tour-section { margin-top: var(--space-6); padding-top: var(--space-6); }

	.tour-mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); background: #fff; border-top: 1px solid #ebe6dc; }
	.tour-mobile-bar__price { display: flex; flex-direction: column; line-height: 1.2; }
	.tour-mobile-bar__label { font-size: var(--fs-xs); color: var(--c-muted); }
	.tour-mobile-bar__amount { font-family: var(--font-heading); font-size: var(--fs-md); color: var(--c-secondary); }
	.tour { padding-bottom: 72px; }
}

/* ---------- Visor de fotos (lightbox) ---------- */
.tour-lightbox { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: var(--space-6) var(--space-7); background: rgba(0, 0, 0, .92); }
.tour-lightbox[hidden] { display: none; }
.tour-lightbox__img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 8px; object-fit: contain; }
.tour-lightbox__count { position: absolute; left: 50%; bottom: var(--space-4); transform: translateX(-50%); font-size: var(--fs-sm); color: rgba(255, 255, 255, .8); }
.tour-lightbox__btn { position: absolute; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); font-size: 1.75rem; line-height: 1; color: #fff; cursor: pointer; transition: background .2s, color .2s; }
.tour-lightbox__btn:hover, .tour-lightbox__btn:focus-visible { background: var(--c-primary); color: var(--c-secondary); }
.tour-lightbox__close { top: var(--space-4); right: var(--space-4); }
.tour-lightbox__prev { left: var(--space-4); top: 50%; margin-top: -24px; }
.tour-lightbox__next { right: var(--space-4); top: 50%; margin-top: -24px; }
@media (max-width: 640px) { .tour-lightbox { padding: 64px var(--space-3); } .tour-lightbox__prev { left: var(--space-2); } .tour-lightbox__next { right: var(--space-2); } }
