/* =====================================================
   DIRECTORIO DE RETIROS
   FICHA DEL RETIRO
===================================================== */


/* ---------- HERO ---------- */

.retreat-hero{

    margin-bottom:4rem;

}

.retreat-hero img{

    width:100%;
    height:550px;

    object-fit:cover;

    display:block;

}


/* ---------- CABECERA ---------- */

.retreat-header{

    margin-bottom:3rem;

}

.retreat-tags{

    margin-bottom:1rem;

}

.retreat-title{

    max-width:900px;

    margin-bottom:.75rem;

}

.retreat-location{

    color:var(--color-text-light);

    font-size:1.1rem;

}


/* ---------- CUERPO ---------- */

.retreat-body{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:4rem;

    align-items:start;

    margin-bottom:5rem;

}


/* ---------- CONTENIDO ---------- */

.retreat-main{

    min-width:0;

}

.retreat-content{

    margin-bottom:4rem;

}

.retreat-content h2{

    margin-top:3rem;

    margin-bottom:1rem;

}

.retreat-content h3{

    margin-top:2rem;

    margin-bottom:1rem;

}

.retreat-content p{

    margin-bottom:1.5rem;

}


/* ---------- SIDEBAR ---------- */

.retreat-sidebar{

    position:sticky;

    top:2rem;

}


/* ---------- TARJETA ---------- */

.retreat-card{

    background:var(--color-surface);

    border:1px solid var(--color-border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:2rem;

}

.summary-item{

    display:flex;

    flex-direction:column;

    gap:.35rem;

    padding-bottom:1.5rem;

    margin-bottom:1.5rem;

    border-bottom:1px solid var(--color-border);

}

.summary-item:last-of-type{

    margin-bottom:2rem;

}

.summary-item strong{

    font-size:.8rem;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:var(--color-text-light);

}

.summary-item span{

    font-size:1.3rem;

    font-weight:600;

}


/* ---------- BOTÓN ---------- */

.retreat-card .button-primary{

    width:100%;

    text-align:center;

}


/* ---------- ORGANIZADOR ---------- */

.retreat-organizer{

    padding-top:3rem;

    border-top:1px solid var(--color-border);

}

.retreat-organizer h2{

    margin-bottom:1rem;

}


/* ---------- RESPONSIVE ---------- */

@media (max-width:900px){

    .retreat-body{

        grid-template-columns:1fr;

        gap:3rem;

    }

    .retreat-sidebar{

        position:static;

    }

    .retreat-hero img{

        height:320px;

    }

    .retreat-title{

        font-size:2.4rem;

    }

}