/* ==========================================================
   GFRM Core
   Component : Event Card
   Version   : 1.1
   Status    : Stable
   ========================================================== */


/* ==========================================================
   GFRM COLORS
   ========================================================== */

:root{

    --gfrm-primary:#F5BF0F;
    --gfrm-dark:#1F1F1F;
    --gfrm-text:#333333;
    --gfrm-muted:#8D8D8D;
    --gfrm-border:#E9E9E9;
    --gfrm-background:#FFFFFF;

}


/* ==========================================================
   GRID
   ========================================================== */

.gfrm-events-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:28px;

}

@media (max-width:1024px){

    .gfrm-events-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:768px){

    .gfrm-events-grid{

        grid-template-columns:1fr;

    }

}

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

.gfrm-card{

    background:#fff;

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

    box-shadow:0 4px 18px rgba(0,0,0,.04);

    display:flex;

    flex-direction:column;

    overflow:hidden;

    transition:
        transform .30s ease,
        border-color .30s ease,
        box-shadow .30s ease;

}

.gfrm-card:hover{

    transform:translateY(-6px);

    border-color:#E2E2E2;

    box-shadow:0 12px 34px rgba(0,0,0,.08);

}


/* ==========================================================
   IMAGE
   ========================================================== */

.gfrm-card-image{

    position:relative;

    display:block;

    overflow:hidden;

    aspect-ratio:16/9;

    background:#efefef;

}

.gfrm-card-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:transform .8s ease;

}

.gfrm-card:hover .gfrm-card-image img{

    transform:scale(1.04);

}

.gfrm-card-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.22),
        rgba(0,0,0,0) 45%
    );

    pointer-events:none;

}

/* ==========================================================
   DATE
   ========================================================== */

.gfrm-card-date{

    position:absolute;

    left:24px;

    bottom:24px;

    width:64px;

    height:64px;

    background:#1c1c1c;

    color:#fff;
    
    border-radius:2px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    z-index:10;

}

.gfrm-card-day{

    font-size:34px;

    font-weight:700;

    line-height:1;

}

.gfrm-card-month{

    margin-top:3px;

    font-size:11px;

    font-weight:600;

    letter-spacing:.12em;

    text-transform:uppercase;

    line-height:1;

}


/* ==========================================================
   CONTENT
   ========================================================== */

.gfrm-card-content{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:32px 28px 28px;

}

/* ==========================================================
   TITLE
   ========================================================== */

.gfrm-card-title{

    margin:0 0 16px;

    min-height:64px;

    font-size:22px;

    font-weight:600;

    line-height:1.30;

    letter-spacing:-0.02em;

}

.gfrm-card-title a{

    color:#1f1f1f;

    text-decoration:none;

    transition:color .25s;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

}

.gfrm-card:hover .gfrm-card-title a{

    color:var(--gfrm-primary);

}

/* ==========================================================
   LOCATION
   ========================================================== */

.gfrm-card-location{

    display:flex;

    align-items:center;

    gap:8px;

    margin-top:auto;

    margin-bottom:18px;

    font-size:14px;

    color:#8d8d8d;

}

.gfrm-location-icon{

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--gfrm-primary);

    flex-shrink:0;

}

/* ==========================================================
   LINK
   ========================================================== */

.gfrm-card-link{

    display:inline-flex;

    align-items:center;

    gap:12px;

    align-self:flex-start;

    color:var(--gfrm-primary);

    font-size:12px;

    font-weight:700;

    letter-spacing:.16em;

    text-transform:uppercase;

    text-decoration:none;

    transition:.25s;

}

.gfrm-card-link::before{

    content:"";

    width:22px;

    height:1px;

    background:var(--gfrm-primary);

    transition:.25s;

}

.gfrm-card:hover .gfrm-card-link{

    color:#111;

}

.gfrm-card:hover .gfrm-card-link::before{

    width:32px;

    background:#111;

}