/* Control Grid Component */

.dh-control-grid {
    padding: 60px 0;
    background-color: var(--primary-white, #FFFFFF);
}

.dh-control-grid__header {
    text-align: center;
    max-width: 1100px;
    margin: 0 auto 50px;
    padding: 0 16px;
}

.dh-control-grid__overline {
    display: block;
    color: #DF002F;
    /* Figma: Primary/Red/100% */
    font-family: var(--font-lato, 'Lato');
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.dh-control-grid__title {
    color: #111B29;
    /* Figma: Primary/Black/100% */
    font-family: var(--font-lato, 'Lato');
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 16px;
}

.dh-control-grid__description {
    color: var(--primary-black-100, #111B29);
    text-align: center;

    /* Body/Base - Medium */
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 132%;
    /* 21.12px */
}

.dh-control-grid__items {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 0 16px;
}

/* Card Styles - Mobile/Base */
.dh-control-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 36px;
    gap: 26px;
    align-self: stretch;
    /* Responsive behavior */

    border-radius: 18px;
    border: 1px solid #FCE7E8;
    /* Secondary-Light-Red */
    background: #FFF8F8;
    /* Secondary-White-red */
    box-sizing: border-box;
}

.dh-control-card__content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.dh-control-card__icon-wrapper {
    width: auto;
    height: auto;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.dh-control-card__icon-wrapper svg,
.dh-control-card__icon-wrapper img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.dh-control-card__title {
    color: #DF002F;
    /* Primary-red-100 */
    font-family: var(--font-lato, 'Lato');
    font-size: 24px;
    font-weight: 700;
    font-style: normal;
    line-height: normal;
    margin: 0;
}

.dh-control-card__description {
    color: #111B29;
    /* Primary-black-100 */
    font-family: var(--font-lato, 'Lato');
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.32;
    /* 132% */
    margin: 0;
}

/* Desktop */
@media (min-width: 1024px) {
    .dh-control-grid {
        padding: 60px 0;
    }

    .dh-control-grid__title {
        font-size: 42px;
    }

    .dh-control-grid__items {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 32px;
        max-width: 1240px;
        /* Adjusted to fit 3x380 cards + gaps */
        margin: 0 auto;
        flex-wrap: wrap;
    }

    .dh-control-card {
        flex: 1 1 200px;
        max-width: 380px;
        min-height: 250px;
        padding: 36px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 24px;
        /* Gap handled by justify-content: space-between */
    }

    .dh-control-card__content {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    /* We need to group Title and Description or Icon separately if specific spacing is needed. 
       User said: "justify-content: space-between; align-items: flex-start;".
       If the items are simple children (Icon, Title, Desc), they will spread out. 
       Looking at the image, there is significant space between Icon and Title, but Title and Desc are close?
       Actually, `gap: 26px` in responsive suggests they are spaced out.
       Let's stick to the requested CSS. 
    */
}