/*==================================================
  CARDS
  Proyecto: QPERTINO
==================================================*/

/*=====================================
GRID DE TARJETAS
=====================================*/

.cards{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));

    gap:clamp(24px,4vw,40px);

    margin-top:clamp(40px,6vw,70px);

}

/*=====================================
CARD
=====================================*/

.card{

    position:relative;

    background:var(--surface);

    border-radius:18px;

    overflow:hidden;

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

    transition:all .35s ease;

    display:flex;

    flex-direction:column;

    height:100%;
    
    min-width:0;

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 60px rgba(0,0,0,.55);

}

/*=====================================
IMAGEN
=====================================*/

.card-image{

    width:100%;

    height:250px;

    overflow:hidden;

}

.card-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .5s ease;

}

.card:hover .card-image img{

    transform:scale(1.08);

}

/*=====================================
BODY
=====================================*/

.card-body{

    padding:clamp(22px,4vw,38px);

    flex:1;

    display:flex;

    flex-direction:column;
    
    min-width:0;

}

/*=====================================
ICONO
=====================================*/

.card-icon{

    width:clamp(48px,6vw,58px);

    height:clamp(48px,6vw,58px);

    border-radius:14px;

    background:rgba(200,168,107,.12);

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:24px;

}

.card-icon img{

    width:36px;

}

.card-icon i{

    font-size:1.4rem;

    color:var(--gold);

}

/*=====================================
TÍTULO Y TEXTO (markup del componente
shared/cards.php: h3 + p directos)
=====================================*/

.card-body h3{

    font-family:'Cormorant Garamond',serif;

    font-size:clamp(1.35rem,3vw,1.55rem);

    color:var(--heading);

    margin-bottom:14px;

    line-height:1.25;

}

.card-body p{

    color:var(--text-light);

    font-size:clamp(.95rem,2vw,1rem);

    line-height:1.85;

    margin-bottom:26px;

    flex:1;

}

.card:hover{

    border-color:rgba(200,168,107,.45);

}

/*=====================================
TÍTULO
=====================================*/

.card-title{

    font-family:'Cormorant Garamond',serif;

    font-size:2rem;

    color:var(--heading);

    margin-bottom:18px;

    line-height:1.2;

}

/*=====================================
DESCRIPCIÓN
=====================================*/

.card-text{

    color:var(--text-light);

    line-height:1.9;

    margin-bottom:30px;

    flex:1;

}

/*=====================================
BOTÓN
=====================================*/

.card-footer{

    margin-top:auto;

}

.card-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--gold);

    font-weight:600;

    transition:.3s;

}

.card-link:hover{

    gap:18px;

}

/*=====================================
CARD OSCURA
=====================================*/

.card-dark{

    background:var(--surface-light);

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

}

.card-dark .card-title{

    color:#FFFFFF;

}

.card-dark .card-text{

    color:#CBD5E1;

}

/*=====================================
CARD GOLD
=====================================*/

.card-gold{

    background:linear-gradient(
        135deg,
        #C8A86B,
        #B9924F
    );

    color:#FFFFFF;

}

.card-gold .card-title{

    color:#FFFFFF;

}

.card-gold .card-text{

    color:#F8FAFC;

}

/*=====================================
CARD HORIZONTAL
=====================================*/

.card-horizontal{

    display:grid;

    grid-template-columns:minmax(220px,300px) 1fr;

    align-items:center;

}

.card-horizontal .card-image{

    height:100%;

}

/*=====================================
RESPONSIVE
=====================================*/

@media(max-width:992px){

.cards{

grid-template-columns:1fr 1fr;

}

.card-horizontal{

grid-template-columns:1fr;

}

.card-horizontal .card-image{

height:260px;

}

}

@media(max-width:768px){

.cards{

grid-template-columns:1fr;

gap:30px;

}

.card-body{

padding:28px;

}

.card-title{

font-size:1.7rem;

}

.card-image{

height:clamp(190px,30vw,250px);

}

}

@media(max-width:480px){

.card-body{

padding:22px;

}

.card-image{

height:190px;

}

.card-title{

font-size:1.5rem;

}

.card-link{

font-size:.95rem;

}

}