/* Self-contained on purpose: this block ships on every doctool funnel home, and
   those pages run three different design systems (`style.css` + `*-section`,
   this `home/sections/*` bundle, and the newer `dt-new-home` SCSS). A page only
   has to link THIS file — nothing here reads a token or a type scale from
   home.css, which is why the heading carries its own sizes below instead of
   borrowing `.home-title-2`. */
.home__tools {
    padding-top: 80px;
    padding-bottom: 107px;
    background: linear-gradient(0deg, rgba(94, 129, 244, 0.1), rgba(94, 129, 244, 0.1));
    font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
    color: #1C1D21;
    box-sizing: border-box;
}

.home__tools *,
.home__tools *::before,
.home__tools *::after {
    box-sizing: border-box;
}

.home__tools-container {
    max-width: 1235px;
    margin: 0 auto;
    padding: 0 20px;
}

.home__tools-top {
    display: flex;
    align-items: center;
    gap: 68px;
    margin-bottom: 37px;
}

.home__tools-content {
    max-width: 637px;
    width: 100%;
}

.home__tools-title {
    margin: 0 0 12px;
    font-weight: 700;
    font-size: 48px;
    line-height: 60px;
    letter-spacing: 0;
}

.home__tools-title-accent {
    color: #264BFF;
}

.home__tools-description {
    margin: 0;
    font-weight: 400;
    font-size: 18px;
    line-height: 29px;
    letter-spacing: 0;
    color: #4A4A4A;
}

.home__tools-image {
    max-width: 536px;
    width: 100%;
    height: auto;
}

.home__tools-image img {
    border-radius: 12px;
}

/* The grid is inset further than the heading block above it — 1057px against the
   section container's 1195px (Figma 3417:127934 vs 3417:127928). */
.home__tools-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 22px;
    max-width: 1057px;
    margin: 0 auto;
}

/* Every tool SVG is an 80x80 canvas whose visible 64x64 tile is inset ~8px to
   leave room for its own drop shadow. The card's padding and gap are reduced by
   that bleed so the RENDERED insets land on the Figma numbers (18px side, 33px
   top, 12px between icon and text) rather than 8px wider than them. */
.home__tools-item {
    background-color: #fff;
    box-shadow: 1px 1px 8px 0 #6B708029;
    border-radius: 8px;
    padding: 27px 18px 27px 11px;
    display: flex;
    align-items: center;
    gap: 5px;
    border: 1px solid transparent;
    transition: 0.3s ease-in;
    cursor: pointer;
    color: #1C274C;
    text-decoration: none;
}

/* Eleven cards, two columns: the last one sits alone and is centred on its own
   row (Figma draws it as the standalone 3684:136573). Keyed on odd+last so the
   rule simply stops applying if the card list ever becomes even again. */
.home__tools-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 11px);
}

.home__tools-icon {
    display: block;
    flex-shrink: 0;
    width: 80px;
    height: 80px;
}

.home__tools-icon svg {
    width: 100%;
    height: 100%;
}

.home__tools-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.home__tools-name {
    font-weight: 600;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: 0;
}

.home__tools-subtitle {
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    max-width: 285px;
    opacity: 0;
    transition: 0.3s ease-in;
}

.home__tools-arrowIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease-in;
    opacity: 0;
    margin-left: auto;
}

@media (hover: hover) and (pointer: fine) {
    .home__tools-item:hover {
        border: 1px solid #264BFF;
    }

    .home__tools-item:hover .home__tools-subtitle,
    .home__tools-item:hover .home__tools-arrowIcon {
        opacity: 1;
    }
}

@media (hover: none) and (pointer: coarse) {
    .home__tools-item {
        border: 1px solid #264BFF;
    }

    .home__tools-subtitle,
    .home__tools-arrowIcon {
        opacity: 1;
    }
}

@media (max-width: 936px) {
    .home__tools {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .home__tools-container {
        padding: 0 16px;
    }

    .home__tools-top {
        display: block;
        margin-bottom: 24px;
    }

    .home__tools-content {
        max-width: unset;
        text-align: center;
    }

    .home__tools-title {
        font-size: 26px;
        line-height: 1.3;
    }

    .home__tools-description {
        font-size: 16px;
    }

    .home__tools-image {
        display: none;
    }

    .home__tools-image img {
    }

    .home__tools-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* One column: the eleventh card is no longer the odd one out. */
    .home__tools-item:last-child:nth-child(odd) {
        width: auto;
    }

    /* Below the two-column breakpoint the layout IS the mobile design, where the
       description and the chevron are part of the card rather than a hover
       reveal. Keyed on width, not on `pointer: coarse` alone: that query leaves
       them hidden on a narrow desktop window and on touch laptops, which report
       a fine pointer. */
    .home__tools-item {
        border-color: #264BFF;
    }

    .home__tools-subtitle,
    .home__tools-arrowIcon {
        opacity: 1;
    }

    .home__tools-icon {
    }

    .home__tools-icon svg {
    }

    .home__tools-name {
    }

}

@media (max-width: 568px) {
    .home__tools-description {
        text-align: justify;
    }
}