/* "Professional PDF Editing Suite" — tools block for the older funnel design
   (home-default / home-merge / pdfryse, the `*-section` + style.css family).

   Layout is the newer block's (Figma 3417:127934) — two columns of wide rows
   with a hover-revealed description — wearing the older design's palette
   (Figma 2327:148857): slate icon tiles on a grey section.
   Where a rule here matches home-tools.css it is the same number on purpose;
   only colour and the heading differ. The icons are that design's own files
   (icons/doctool/home/tools/classic/), not a recolour of the newer set.

   Self-contained like its newer sibling: the pages that carry it share no type
   scale with the newer design bundle, so nothing here reads a token from
   home.css. */
.home-tools-classic {
    padding: 80px 0;
    background: #F2F5F9;
    font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
    color: #1C1D21;
    box-sizing: border-box;
}

.home-tools-classic *,
.home-tools-classic *::before,
.home-tools-classic *::after {
    box-sizing: border-box;
}

.home-tools-classic__container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 637 + 37 + 527 = the section container's 1200 (Figma 2327:148858 / :148860).
   The gap is what leaves the text column its full 637px — at anything wider the
   heading loses ~40px and "Professional PDF Editing Suite" breaks onto a second
   line, which the design draws as one. */
.home-tools-classic__top {
    display: flex;
    align-items: center;
    gap: 37px;
    margin-bottom: 40px;
}

.home-tools-classic__content {
    max-width: 637px;
    width: 100%;
}

/* No accent word in this design — one plain sentence, unlike the newer block. */
.home-tools-classic__title {
    margin: 0 0 16px;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: 0;
}

.home-tools-classic__description {
    margin: 0;
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    color: #4A4A4A;
}

.home-tools-classic__image {
    max-width: 527px;
    width: 100%;
}

.home-tools-classic__image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

/* The grid is inset further than the heading block above it — 1057px against the
   section container's 1200px (Figma 3417:127934 vs 3417:127928). */
.home-tools-classic__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-classic__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-classic__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 11px);
}

.home-tools-classic__icon {
    display: block;
    flex-shrink: 0;
    width: 80px;
    height: 80px;
}

.home-tools-classic__icon svg {
    width: 100%;
    height: 100%;
}

.home-tools-classic__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.home-tools-classic__name {
    font-weight: 600;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: 0;
}

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

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

/* Hover state from the older design (Figma 627:18902): the card takes a blue
   border and the slate tile turns brand blue. The tile is a rect inside the
   inlined SVG, so it is repainted here rather than swapped for a second asset. */
@media (hover: hover) and (pointer: fine) {
    .home-tools-classic__item:hover {
        border-color: #4A64B5;
    }

    .home-tools-classic__item:hover .home-tools-classic__subtitle,
    .home-tools-classic__item:hover .home-tools-classic__arrowIcon {
        opacity: 1;
    }

    .home-tools-classic__item:hover .home-tools-classic__icon svg rect[fill="#8D93A5"] {
        fill: #3689F5;
    }
}

@media (max-width: 936px) {
    .home-tools-classic {
        padding: 64px 0;
    }

    .home-tools-classic__container {
        padding: 0 16px;
    }

    .home-tools-classic__top {
        display: block;
        margin-bottom: 24px;
    }

    .home-tools-classic__content {
        max-width: unset;
        text-align: center;
    }

    .home-tools-classic__title {
        font-size: 26px;
    }

    .home-tools-classic__description {
        font-size: 16px;
    }

    /* The photo is decorative and costs a full screen height on a phone. */
    .home-tools-classic__image {
        display: none;
    }

    .home-tools-classic__grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* One column: the eleventh card is no longer the odd one out. */
    .home-tools-classic__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-classic__item {
        border-color: #4A64B5;
    }

    .home-tools-classic__subtitle,
    .home-tools-classic__arrowIcon {
        opacity: 1;
    }
}

@media (max-width: 568px) {
    .home-tools-classic__description {
        text-align: justify;
    }
}