/* ==========================================================
   DealCraft Mentor Grid
   Self-contained 4-up grid matching the reference layout:
   four equal-height cards, each split into a photo half and
   a caption half, alternating which comes first so the row
   reads photo/caption, caption/photo, photo/caption, caption/photo.
   Fully responsive: 4 cols desktop -> 2 cols tablet -> 1 col mobile.
========================================================== */

.dcm-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
}

.dcm-card {
    display: flex;
    flex-direction: column;
    height: 560px;
    background-color: #F4F2EF;
    overflow: hidden;
    box-sizing: border-box;
}

/* Photo half */

.dcm-image {
    flex: 0 0 58%;
    overflow: hidden;
}

.dcm-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .4s ease;
}

.dcm-card:hover .dcm-image img {
    transform: scale(1.04);
}

/* Caption half
   ----------------------------------------------------------------
   FIX: .dcm-card has a fixed height with overflow:hidden. With the
   old setup, a long description could push the social icon row past
   the card's bottom edge, so it got silently clipped (looked like
   the icons "weren't displaying" -- they were just cut off).
   Solution: the caption is a flex column with three independently
   sized rows -- (tag+name) fixed, description clamped to a max
   number of lines with an ellipsis, and the social row pinned with
   flex-shrink:0 so it always has guaranteed, unclipped space. */

.dcm-caption {
    flex: 1 1 auto;
    min-height: 0;
    /* Allows children to shrink properly instead of overflowing the flex parent */
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
}

.dcm-caption > * {
    flex-shrink: 0;
}

/* When caption comes first (text-on-top cards), give it a touch more
   breathing room since the image below will fill the remaining space */

.dcm-caption_photo .dcm-caption {
    flex: 0 0 42%;
    padding-top: 26px;
}

.dcm-caption_photo .dcm-image {
    flex: 1 1 auto;
}

/* Tag -- rendered like "[ TECHNICAL LEAD ]" */

.dcm-tag {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #8C7A6B;
    margin-bottom: 12px;
}

/* Name */

.dcm-name {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    line-height: 1.4;
    color: #1F1F1F;
}

/* Description / takeaway -- clamped so it can never grow tall enough
   to push the social row outside the card's clipped bounds. */

.dcm-desc {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: #6B6B6B;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

/* Social icons -- always reserved, unclippable space at the bottom
   of the caption, regardless of description length or card width. */

.dcm-social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    flex-shrink: 0;
    min-height: 22px;
    /* Reserves space even before icons render, preventing layout jump */
}

.dcm-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: #8C7A6B;
    background: transparent;
    border: 0;
    line-height: 0;
    transition: color .25s ease, transform .25s ease;
    flex: 0 0 22px;
    /* Locks icon size so it can't be squeezed by flex-wrap or narrow columns */
}

.dcm-social-link svg {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    display: block;
    fill: currentColor;
    /* Guarantees the icon paints even if a parent style resets fill/stroke */
}

.dcm-social-link:hover,
.dcm-social-link:focus-visible {
    color: #1F1F1F;
    transform: translateY(-2px);
}

/* ==========================================================
   Laptop
========================================================== */

@media (max-width:1200px) {

    .dcm-card {
        height: 500px;
    }

    .dcm-desc {
        -webkit-line-clamp: 3;
    }

}

/* ==========================================================
   Tablet -- 2 columns
========================================================== */

@media (max-width:991px) {

    .dcm-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .dcm-card {
        height: 460px;
    }

    .dcm-desc {
        -webkit-line-clamp: 3;
    }

}

/* ==========================================================
   Mobile -- 1 column
========================================================== */

@media (max-width:600px) {

    .dcm-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .dcm-card,
    .dcm-caption_photo .dcm-image,
    .dcm-caption_photo .dcm-caption {
        height: auto;
    }

    .dcm-card {
        min-height: 0;
    }

    .dcm-image {
        flex-basis: auto;
        aspect-ratio: 4 / 3;
        background-color: #F4F2EF; 
    }

    .dcm-image img {
        object-fit: contain;
    }
    
    .dcm-caption_photo .dcm-caption {
        flex-basis: auto;
        padding-top: 20px;
    }

    .dcm-caption_photo .dcm-image {
        flex-basis: auto;
        aspect-ratio: 4 / 3;
    }

    .dcm-caption {
        padding: 20px;
    }

    .dcm-name {
        font-size: 14px;
    }

    .dcm-desc {
        font-size: 13px;
        -webkit-line-clamp: 5;
        /* Cards are no longer height-clipped on mobile (height:auto above),
           so a touch more text is safe to show before the icons */
    }

}