/* ============================================================
   single-tour.css — Estilos para el single de tours
   Machupicchu Great Travel V1
   ============================================================ */


/* ── WRAPPER GENERAL ───────────────────────────────────────── */
.single-tour-page {
    position: relative;

        &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        right: 0;
        width: 100%;
        height: 100rem;
        background-image: url('../images/backgrounds/salkantay-clouds-background.png');
        background-repeat: no-repeat;
        background-size: cover;
        pointer-events: none;
        z-index: -1;
    }
}

.single-tour-wrap {
    padding-top: 2.4rem;
    padding-bottom: 6rem;
}

/* ── LAYOUT DOS COLUMNAS (debajo de la galería) ────────────── */

.single-tour-layout {
    display: grid;
    grid-template-columns: 1fr 32rem;
    gap: 4rem;
    align-items: start;
    margin-top: 3rem;

    @media (max-width: 1024px) {
        grid-template-columns: 1fr;
    }
}

.single-tour-layout__sidebar {
    position: sticky;
    top: 9rem;
}


/* ── BREADCRUMB ─────────────────────────────────────────────── */

.tour-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-family: var(--font-body);
    font-size: 1.4rem;
    font-weight: 300;
    color: #6A6A73;
    margin-bottom: 1.2rem;

    & a {
        color: #6A6A73;
        text-decoration: none;
        &:hover { color: var(--color-quinary); }
    }

    & .tour-breadcrumb__sep {
        display: inline-block;
        width: 0.6rem;
        height: 0.6rem;
        border-top: 1.5px solid #6A6A73;
        border-right: 1.5px solid #6A6A73;
        transform: rotate(45deg);
        margin: 0 0.2rem;
    }

    & .tour-breadcrumb__current {
        color: #6A6A73;
        font-weight: 500;
    }
}


/* ── HEADER DEL TOUR ────────────────────────────────────────── */

.single-tour__header {
    margin-bottom: 2rem;
}

.single-tour__title {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 5vw, 4.2rem);
    font-weight: 300;
    color: var(--color-quinary);
    line-height: 0.97;
    margin: 0 0 0.6rem;
}

.single-tour__subtitle {
    font-family: var(--font-body);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-octonary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}


/* ── GALERÍA (ancho completo) ───────────────────────────────── */
/*
   Desktop (≥769px): 3 columnas
     col 1 (grande): 1 imagen que ocupa 2 filas
     col 2 (media):  1 imagen que ocupa 2 filas
     col 3 (pequeña): 2 imágenes apiladas (fila 1 + fila 2)
   Tablet (481-768px): 2 columnas, 1 imagen grande + 1 apilada
   Mobile (≤480px): 1 columna, solo la imagen principal
*/

.tour-gallery {
    display: grid;
    grid-template-columns: 3fr 2fr 2fr;
    grid-template-rows: 19rem 19rem;
    gap: 0.8rem;
    margin-bottom: 0;

    @media (max-width: 768px) {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 18rem 18rem;
    }

    @media (max-width: 480px) {
        grid-template-columns: 1fr;
        grid-template-rows: 26rem;
    }
}

/* Todos los items */
.tour-gallery__item {
    position: relative;
    overflow: hidden;
    display: block;
    cursor: pointer;
    border-radius: var(--border-radius-sm);

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

    &:hover img { transform: scale(1.05); }

    &.tour-gallery__item--hidden { display: none; }
}

/* Item 1 — grande, ocupa las 2 filas en col 1 */
.tour-gallery__item--main {
    grid-column: 1;
    grid-row: 1 / 3;
    border-radius: var(--border-radius-md);
}

/* Item 2 — col 2, ocupa las 2 filas */
.tour-gallery__item:nth-child(2) {
    grid-column: 2;
    grid-row: 1 / 3;
}

/* Items 3 y 4 — col 3, fila 1 y fila 2 */
.tour-gallery__item:nth-child(3) {
    grid-column: 3;
    grid-row: 1;
}
.tour-gallery__item:nth-child(4) {
    grid-column: 3;
    grid-row: 2;
}

/* Overlay con contador de fotos adicionales */
.tour-gallery__more {
    position: absolute;
    inset: 0;
    background: rgba(24, 31, 40, 0.62);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 3rem;
    font-weight: 700;
    color: #fff;
    pointer-events: none;
}

/* Tablet: 2 columnas — item 1 grande + item 2 media en 2 filas, items 3+ ocultos */
@media (max-width: 768px) and (min-width: 481px) {
    .tour-gallery__item:nth-child(n+3) { display: none; }
    .tour-gallery__item--main { grid-column: 1; grid-row: 1 / 3; }
    .tour-gallery__item:nth-child(2) { grid-column: 2; grid-row: 1 / 3; }
}

/* Mobile: solo el item principal */
@media (max-width: 480px) {
    .tour-gallery__item:nth-child(n+2) { display: none; }
    .tour-gallery__item--main { grid-column: 1; grid-row: 1; border-radius: var(--border-radius-md); }
}

/* Lightbox overlay (básico, activado por JS) */
.tour-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;

    &.is-open {
        opacity: 1;
        pointer-events: all;
    }

    & .tour-lightbox__img {
        max-width: 90vw;
        max-height: 85vh;
        object-fit: contain;
        border-radius: var(--border-radius-sm);
    }

    & .tour-lightbox__close {
        position: absolute;
        top: 2rem;
        right: 2rem;
        background: none;
        border: none;
        color: #fff;
        font-size: 3rem;
        cursor: pointer;
        line-height: 1;
        padding: 0.5rem;
        opacity: 0.8;
        &:hover { opacity: 1; }
    }

    & .tour-lightbox__prev,
    & .tour-lightbox__next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(255,255,255,0.15);
        border: none;
        color: #fff;
        font-size: 2.4rem;
        width: 5rem;
        height: 5rem;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s ease;
        &:hover { background: rgba(255,255,255,0.30); }
    }
    & .tour-lightbox__prev { left: 2rem; }
    & .tour-lightbox__next { right: 2rem; }

    & .tour-lightbox__caption {
        position: absolute;
        bottom: 2rem;
        left: 50%;
        transform: translateX(-50%);
        color: rgba(255,255,255,0.8);
        font-size: 1.4rem;
        white-space: nowrap;
        display: none;
    }
}


/* ── CONTENIDO DEL TOUR (editor) ────────────────────────────── */

.single-tour__body {
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--color-nonary);

    & p { margin-bottom: 1.2rem; }

    /* Subtítulos de sección (h2) con ícono */
    & h2.wp-block-heading {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        font-family: var(--font-body);
        font-size: 2.7rem;
        font-weight: 600;
        color: var(--color-nonary);
        margin: 3.5rem 0 1.5rem;
        line-height: 1;

        & img {
            width: 2.4rem;
            height: 2.4rem;
            object-fit: contain;
            flex-shrink: 0;
        }
    }

    /* Bloque acordeón del itinerario */
    & .wp-block-accordion {
        display: flex;
        flex-direction: column;
        gap: 0;
        background: #fff;
        border-radius: var(--border-radius-md);
        box-shadow: 0 0.8rem 2.2rem -0.6rem rgba(24,39,75,0.12),
                    0 1.4rem 6.4rem -0.4rem rgba(24,39,75,0.12);
        overflow: hidden;
        margin-bottom: 2rem;
    }

    & .wp-block-accordion-item {
        border-bottom: 1px solid var(--color-octonary);
        
        
        &:last-child { border-bottom: none; }
    }

    /* Botón título del día */
    & .wp-block-accordion-heading__toggle {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.6rem;
        padding: 1.5rem 2rem;
        background: var(--color-nonary);
        color: #fff;
        border: none;
        cursor: pointer;
        text-align: left;
        font-family: var(--font-body);
        font-size: 1.6rem;
        font-weight: 500;
        line-height: 1.3;
        transition: background 0.2s ease;

        &:hover { background: #222c37; }

        & .wp-block-accordion-heading__toggle-title {
            flex: 1;
            text-decoration: none;
        }

        & .wp-block-accordion-heading__toggle-icon {
            font-size: 2rem;
            font-weight: 300;
            line-height: 1;
            flex-shrink: 0;
            transition: transform 0.25s ease;
        }

        &[aria-expanded="true"] .wp-block-accordion-heading__toggle-icon {
            transform: rotate(45deg);
        }
    }

    /* Panel del acordeón */
    & .wp-block-accordion-panel {
        padding: 1.5rem;
        font-size: 1.5rem;
        font-weight: 300;
        line-height: 1.65;
        color: var(--color-nonary);

        &[inert] { display: none; }

        & ul {
            padding-left: 2rem;
            margin: 0.5rem 0;
        }
        & li { margin-bottom: 0.5rem; }

        & strong { font-weight: 600; }
    }

    /* Blockquote informativo */
    & .wp-block-quote {
        border-left: 4px solid var(--color-senary);
        margin: 1.5rem 0;
        padding: 1rem 1.5rem;
        background: rgba(167, 201, 55, 0.07);
        border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
        font-size: 1.4rem;
        color: #4a5568;

        & p { margin: 0; }
    }

    /* Sección inclusiones — columnas */
    & .wp-block-columns {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        margin-bottom: 1rem;

        @media (max-width: 600px) { grid-template-columns: 1fr; }
    }

    /* h3 dentro de columnas (Incluye / No Incluye) */
    & .wp-block-column h3.wp-block-heading {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-family: var(--font-body);
        font-size: 2rem;
        font-weight: 500;
        margin-bottom: 0.8rem;
        color: var(--color-octonary);

        & img {
            width: 2.4rem;
            height: 2.4rem;
            object-fit: contain;
            flex-shrink: 0;
        }
    }

    /* Listas dentro de columnas de inclusiones */
    & .wp-block-column ul {
        list-style: none;
        padding: 0;
        margin: 0;

        & li {
            position: relative;
            padding-left: 2.4rem;
            font-size: 1.5rem;
            font-weight: 300;
            line-height: 1.6;
            color: var(--color-nonary);
            margin-bottom: 0.6rem;

            &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 0.15em;
                width: 1.8rem;
                height: 1.8rem;
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
            }
        }
    }
}

/* Fuera del bloque .single-tour__body — selectores planos para mayor especificidad */

/* Columna "Incluye" (primera en la sección inclusiones) — solo el h3 que tiene img (ícono) */
.single-tour__body .wp-block-columns .wp-block-column:first-child h3.wp-block-heading:has(img) {
    color: var(--color-senary);
}
.single-tour__body .wp-block-columns .wp-block-column:first-child ul li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A7C937' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}

/* Columna "No Incluye" (segunda) */
.single-tour__body .wp-block-columns .wp-block-column:last-child:not(:first-child) h3.wp-block-heading {
    color: #e74747;
}
.single-tour__body .wp-block-columns .wp-block-column:last-child:not(:first-child) ul li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e74747' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6M9 9l6 6'/%3E%3C/svg%3E");
}

/* Columna única (Recomendaciones) */
.single-tour__body .wp-block-columns .wp-block-column:only-child ul li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E9A129' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12h8M12 8l4 4-4 4'/%3E%3C/svg%3E");
}


/* ── BOOKING BOX ────────────────────────────────────────────── */

.booking-box {
    background: #fff;
    border-radius: var(--border-radius-md);
    box-shadow: 0 0.8rem 2.2rem -0.6rem rgba(24,39,75,0.12),
                0 1.4rem 6.4rem -0.4rem rgba(24,39,75,0.12);
    overflow: hidden;
}

.booking-box__header {
    background: var(--color-nonary);
    padding: 1.6rem;
    text-align: center;
    

    & .booking-box__header-text {
        font-family: var(--font-body);
        font-size: 2.4rem;
        font-weight: 700;
        color: #fff;
        letter-spacing: 0.2em;
        text-transform: uppercase;
    }
}

.booking-box__body {
    padding: 2rem 2.2rem 2.4rem;
}

.booking-box__title {
    font-family: var(--font-heading);
    font-size: 2.8rem;
    font-weight: 300;
    color: var(--color-octonary);
    text-align: center;
    line-height: 1;
    margin: 0.8rem 0 0;
}

.booking-box__subtitle {
    font-family: var(--font-body);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-octonary);
    text-align: center;
    text-transform: uppercase;
    margin: 0.4rem 0 0;
}

.booking-box__divider {
    border: none;
    border-top: 1px solid rgba(24,31,40,0.1);
    margin: 1.6rem 0;
}

.booking-box__price-wrap {
    text-align: left;
    margin-bottom: 0.4rem;
}

.booking-box__price-label {
    font-family: var(--font-body);
    font-size: 1.4rem;
    font-weight: 300;
    color: #6A6A73;
    display: block;
    margin-bottom: 0.2rem;
    text-align: center;
}

.booking-box__price-amount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.4rem;
}

.booking-box__currency {
    font-family: var(--font-body);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-octonary);
    text-transform: uppercase;
}

.booking-box__price {
    font-family: var(--font-body);
    font-size: 4.4rem;
    font-weight: 800;
    color: var(--color-octonary);
    line-height: 1;
}

.booking-box__price-before {
    font-family: var(--font-body);
    font-size: 1.2rem;
    font-weight: 300;
    color: #6A6A73;
    text-decoration: line-through;
    margin: 0.3rem 0 0;
    text-align: center;
}

.booking-box__actions {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.booking-box__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 1.2rem 1.6rem;
    border-radius: var(--border-radius-sm);
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 400;
    text-align: center;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.15s ease;
    text-decoration: none;
    white-space: nowrap;

    &:hover { opacity: 0.9; transform: translateY(-1px); }
    &:active { transform: translateY(0); }

    &.booking-box__btn--reserve {
        background: var(--color-senary);
        color: #fff;
        border: none;
        font-size: 1.8rem;
    }

    &.booking-box__btn--whatsapp {
        background: #fff;
        color: #25D366;
        border: 2px solid #25D366;
        box-shadow: 0 0.6rem 0.8rem 0 rgba(24,39,75,0.12),
                    0 0.8rem 1.6rem 0 rgba(24,39,75,0.08);
        font-family: var(--font-body);
        font-weight: 600;
        text-transform: uppercase;

        & svg { flex-shrink: 0; }
    }
}