/* Hero Home Component - Mobile First */

.dh-hero-home {
    width: 100%;
    position: relative;
    background-color: #FFF8F8;
    background-image: url('../../img/home/hero/background-m.avif');
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.dh-hero-home .dh-container {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
    width: 100%;
}

.dh-hero-home__content {
    display: flex;
    flex-direction: column;
    padding: 50px 16px 40px;
    /* Figma: pt-[50px] px-[16px] */
    gap: 16px;
    /* Figma: gap roughly 32px or 24px between elements */
    z-index: 2;
    position: relative;
    align-items: center;
    /* Figma: items-center */
    text-align: center;
    /* Figma: text-align center implicitly via items-center */
}

.dh-hero-home__overline {
    display: inline-block;
    padding: 5px 10px;
    /* Figma: px-[10px] py-[5px] */
    background: #FDE7E8;
    /* Figma: #DF002F1A (10% opacity) -> Updated to #FDE7E8 */
    color: #DF002F;
    /* Figma: #DF002F */
    border-radius: 100px;
    font-family: var(--font-lato, 'Lato');
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.68px;
    /* Figma: tracking-[1.68px] */
    width: fit-content;
}

.dh-hero-home__title {
    color: #111B29;
    /* Figma: #111B29 */
    font-family: var(--font-lato, 'Lato');
    font-size: 34px;
    /* Figma: 34px */
    font-weight: 700;
    /* Figma: Bold */
    line-height: 112%;
    /* Figma: 112% */
    margin: 0;
}

.dh-hero-home__highlight {
    color: #DF002F;
    /* Figma: Primary/Red/100% */
}

.dh-hero-home__description {
    color: #111B29;
    /* Figma: #111B29 */
    opacity: 0.8;
    /* Figma: opacity-80 */
    font-family: var(--font-lato, 'Lato');
    font-size: 16px;
    /* Figma: 16px */
    font-weight: 500;
    /* Figma: Medium */
    line-height: 132%;
    /* Figma: 132% */
    margin: 0;
}

.dh-hero-home__actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* Standardizing gap */
    width: 100%;
    margin-top: 10px;
}

.dh-hero-home__actions .dh-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 200px;
    /* Figma: rounded-[200px] */
    padding: 16px 24px;
    /* Figma: px-[24px] py-[16px] */
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}

.dh-hero-home__actions .dh-btn--primary {
    background-color: #DF002F;
    /* Figma: #DF002F */
    color: #FFFFFF;
    transition: background-color 0.3s ease;
}

.dh-hero-home__actions .dh-btn--primary:hover {
    background-color: #E53359;
    /* Figma: var(--primary-red-80) */
}

.dh-hero-home__actions .dh-btn--secondary {
    background-color: #FFF8F8;
    /* Figma: bg-[#fff8f8] */
    border: 1.5px solid #DF002F;
    /* Figma: border-[#df002f] */
    color: #DF002F;
    /* Figma: text-[#df002f] - User snippet said white but background is light, assuming Red for contrast */
    transition: background-color 0.3s ease;
}

.dh-hero-home__actions .dh-btn--secondary:hover {
    background-color: #FCE7E8;
    /* Figma: var(--Secondary-Light-Red) */
}

.dh-hero-home__media {
    width: 100%;
    margin-top: 20px;
    position: relative;
    border-radius: 0;
    /* Figma images in container don't show rounded wrapper usually for full width feel */
    overflow: visible;
}

.dh-hero-home__image {
    width: 100%;
    height: auto;
    display: block;
}

.dh-hero-home__image--desktop {
    display: none;
}

.dh-hero-home__image--mobile {
    display: block;
}

/* Tablet */
@media (min-width: 768px) {
    .dh-hero-home {
        padding: 60px 0;
        background-image: url('../../img/home/hero/background-intermedias.avif');
    }

    .dh-hero-home__title {
        font-size: 48px;
    }

    .dh-hero-home__actions {
        flex-direction: row;
        align-items: center;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .dh-hero-home {
        padding: 60px 0 0 0;
        /* Figma: pt-[50px] */
        background-image: url('../../img/home/hero/background-d.avif');
    }

    .dh-hero-home .dh-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0px;
        /* Figma: gap-[38px] */
        max-width: 100%;
        /* Ensure full width for image */
        padding: 0;
    }

    .dh-hero-home__content {
        padding: 0 16px;
        align-items: center;
        /* Center everything */
        text-align: center;
        /* Constrain text width for readability */
        margin: 0 auto;
    }

    .dh-hero-home__title {
        font-size: 50px;
        /* Figma: 50px */
        line-height: 112%;
    }

    .dh-hero-home__description {
        font-size: 16px;
        /* Figma: 16px */
        margin: 0 auto;
    }

    .dh-hero-home__actions {
        flex-direction: row;
        width: auto;
        gap: 16px;
        justify-content: center;
    }

    .dh-hero-home__actions .dh-btn {
        width: auto;
    }

    .dh-hero-home__actions .dh-btn--primary {
        min-width: 180px;
    }

    .dh-hero-home__actions .dh-btn--secondary {
        min-width: 200px;
    }

    .dh-hero-home__media {
        margin-top: 0;
        width: 100%;
        position: relative;
        /* Figma shows full width image touching bottom */
    }

    .dh-hero-home__image {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .dh-hero-home__image--desktop {
        display: block;
    }

    .dh-hero-home__image--mobile {
        display: none;
    }
}