/* ==========================================================================
   HOMEPAGE — SEARCH CHIPS & CATEGORY CARD ALIGNMENT
   Version: 3.7
   ==========================================================================

   Fixes:
   1. Popular-search links use consistent pill/capsule dimensions.
   2. Popular links remain readable and touch-friendly on mobile.
   3. Category-card arrows occupy a fixed column.
   4. Every arrow is vertically and horizontally centered.
   5. Hover movement affects only the arrow icon, not its alignment.
   ========================================================================== */


/* ==========================================================================
   1. POPULAR SEARCHES
   ========================================================================== */

.popular-searches {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 18px;
}


/* "Popular:" heading */
.popular-searches > span {
    display: inline-flex;
    align-items: center;

    flex: 0 0 auto;

    width: auto !important;

    margin: 0;
    padding: 0 2px 0 0;

    color: #73839a;

    font-size: 11px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: 0.055em;
    text-transform: uppercase;

    white-space: nowrap;
}


/* Individual popular-service capsule */
.popular-searches > a {
    min-width: 0;
    min-height: 32px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    margin: 0;
    padding: 0 12px;

    border: 1px solid #d9e2ee;
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.92);

    color: #53657c;

    font-size: 12px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: -0.01em;

    text-decoration: none;
    white-space: nowrap;

    box-shadow:
        0 2px 7px rgba(15, 38, 70, 0.025);

    transition:
        color 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}


/* Capsule hover */
.popular-searches > a:hover {
    border-color:
        color-mix(
            in srgb,
            var(--blue) 35%,
            #d9e2ee
        );

    background:
        color-mix(
            in srgb,
            var(--blue) 5%,
            #ffffff
        );

    color: var(--blue);

    transform: translateY(-1px);

    box-shadow:
        0 5px 14px
        rgba(15, 38, 70, 0.07);
}


/* Keyboard accessibility */
.popular-searches > a:focus-visible {
    outline: 3px solid
        color-mix(
            in srgb,
            var(--blue) 22%,
            transparent
        );

    outline-offset: 2px;
}



/* ==========================================================================
   2. CATEGORY GRID
   ========================================================================== */

.category-grid {
    display: grid;

    gap: 14px;

    align-items: stretch;
}


/* ==========================================================================
   3. CATEGORY CARD
   ========================================================================== */

.category-card {
    position: relative;

    min-width: 0;
    min-height: 94px;

    display: grid;

    /*
     * Fixed icon column
     * Flexible text column
     * Fixed arrow column
     */
    grid-template-columns:
        52px
        minmax(0, 1fr)
        38px;

    align-items: center;

    column-gap: 14px;

    padding: 15px 16px;

    border: 1px solid var(--xq-line);
    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 3px 14px
        rgba(15, 38, 70, 0.045);

    text-decoration: none;

    transition:
        transform 200ms var(--xq-ease),
        border-color 200ms ease,
        box-shadow 200ms ease;
}


.category-card:hover {
    border-color:
        color-mix(
            in srgb,
            var(--blue) 27%,
            var(--xq-line)
        );

    transform: translateY(-3px);

    box-shadow:
        0 13px 30px
        rgba(15, 38, 70, 0.08);
}



/* ==========================================================================
   4. CATEGORY ICON
   ========================================================================== */

.category-card > .category-icon {
    width: 52px;
    height: 52px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    justify-self: start;

    margin: 0;

    border-radius: 14px;
}


.category-card .category-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    font-size: 11px;
    font-weight: 850;
    line-height: 1;

    text-align: center;
}



/* ==========================================================================
   5. CATEGORY TEXT
   ========================================================================== */

.category-card > div:nth-child(2) {
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;

    align-self: stretch;

    padding: 2px 0;
}


.category-card > div:nth-child(2) h3 {
    margin: 0;

    overflow: hidden;

    color: var(--xq-ink);

    font-size: 15px;
    font-weight: 750;
    line-height: 1.3;

    letter-spacing: -0.02em;

    text-overflow: ellipsis;
}


.category-card > div:nth-child(2) > span {
    display: block;

    margin-top: 5px;

    color: #8594a8;

    font-size: 11px;
    font-weight: 650;
    line-height: 1.3;
}



/* ==========================================================================
   6. CATEGORY ARROW
   ========================================================================== */

.category-card > .category-arrow {
    width: 36px;
    height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    /*
     * Critical:
     * Always keep arrow against the right side of its dedicated column.
     */
    justify-self: end;
    align-self: center;

    flex: 0 0 36px;

    margin: 0;
    padding: 0;

    border: 1px solid #e4eaf2;
    border-radius: 11px;

    background: #f5f8fc;

    color: #77899f;

    font-size: 13px;
    line-height: 1;

    box-shadow: none;

    transition:
        color 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        transform 180ms ease;
}


/* Center Font Awesome itself */
.category-card > .category-arrow > i {
    display: block;

    width: auto;
    height: auto;

    margin: 0;

    color: inherit;

    font-size: inherit;
    line-height: 1;

    transform: translateX(0);

    transition:
        transform 180ms ease;
}


/* Hover state */
.category-card:hover > .category-arrow {
    border-color: var(--blue);

    background: var(--blue);

    color: #ffffff;
}


/*
 * Move only the arrow glyph.
 * The square container remains perfectly aligned.
 */
.category-card:hover > .category-arrow > i {
    transform: translateX(2px);
}



/* ==========================================================================
   7. TABLET
   ========================================================================== */

@media (max-width: 899px) {

    .category-card {
        min-height: 90px;

        grid-template-columns:
            50px
            minmax(0, 1fr)
            36px;

        gap: 12px;

        padding: 14px;
    }


    .category-card > .category-icon {
        width: 50px;
        height: 50px;
    }


    .category-card > .category-arrow {
        width: 34px;
        height: 34px;

        flex-basis: 34px;
    }

}



/* ==========================================================================
   8. MOBILE — POPULAR SEARCHES
   ========================================================================== */

@media (max-width: 599px) {

    /*
     * Mobile uses horizontal scrolling so chips do not become squeezed,
     * multi-line or irregular.
     */
    .popular-searches {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;

        gap: 7px;

        overflow-x: auto;

        margin-top: 16px;
        padding: 2px 2px 7px;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }


    .popular-searches::-webkit-scrollbar {
        display: none;
    }


    .popular-searches > span {
        position: sticky;
        left: 0;
        z-index: 2;

        min-height: 32px;

        padding-right: 8px;

        background:
            color-mix(
                in srgb,
                #f5f8fc 94%,
                transparent
            );

        font-size: 10px;
    }


    .popular-searches > a {
        min-height: 32px;

        padding-inline: 11px;

        font-size: 11px;
    }


    /* Category cards */
    .category-card {
        min-height: 88px;

        grid-template-columns:
            48px
            minmax(0, 1fr)
            34px;

        gap: 11px;

        padding: 13px 14px;

        border-radius: 16px;
    }


    .category-card > .category-icon {
        width: 48px;
        height: 48px;

        border-radius: 13px;
    }


    .category-card > div:nth-child(2) h3 {
        font-size: 14px;
    }


    .category-card > div:nth-child(2) > span {
        font-size: 10px;
    }


    .category-card > .category-arrow {
        width: 33px;
        height: 33px;

        flex-basis: 33px;

        border-radius: 10px;

        font-size: 12px;
    }

}



/* ==========================================================================
   9. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .popular-searches > a,
    .category-card,
    .category-arrow,
    .category-arrow > i {
        transition: none !important;
    }


    .popular-searches > a:hover,
    .category-card:hover,
    .category-card:hover > .category-arrow > i {
        transform: none !important;
    }

}