/* =================================================================
   HOMEPAGE POLISH  (page-templates/home.php only)
   Loaded after home.css / awards.css / scanner-ppc.css / use-cases.css
   and scoped to .home-page, so other templates sharing those
   stylesheets are unaffected.

   1. Base              5. How it works
   2. Hero              6. Export logos
   3. Scanner overview  7. AEC / custom solutions
   4. Profession cards  8. Reviews
                        9. Reduced motion
   ================================================================= */

/* 1. BASE ---------------------------------------------------------- */
.home-page h1,
.home-page h2,
.home-page h3 { text-wrap: balance; }
.home-page p { text-wrap: pretty; }

.home-page :focus-visible {
    outline: 2px solid var(--highlight);
    outline-offset: 3px;
}

/* Profession cards, use-case cards and reviews become swipeable rows on phones */
@media (max-width: 768px) {
    .home-page :is(.icp2-grid, .icp-grid, .some-reviews) {
        display: flex !important;
        gap: 1rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        /* bleed to the screen edges; .content is 90% wide */
        margin-inline: -5.56%;
        padding: .25rem 5.56% 1rem;
        scroll-padding-inline: 5.56%;
    }
    .home-page :is(.icp2-grid, .icp-grid, .some-reviews)::-webkit-scrollbar { display: none; }
    .home-page :is(.icp2-grid, .icp-grid, .some-reviews) > * {
        flex: 0 0 82%;
        scroll-snap-align: start;
    }
}


/* 2. HERO ---------------------------------------------------------- */
.home-page .hero-vid-content h1 { line-height: 1.02; }

.home-page .hero-buttons { flex-wrap: wrap; gap: .75rem; }

.home-page .hero-badges img,
.home-page .trimble-hero-badge {
    transition: opacity .25s, translate .3s;
}
@media (hover: hover) {
    .home-page .trimble-hero-badge:hover { translate: 0 -2px; }
}

@media (max-width: 520px) {
    /* full-width, thumb-friendly buttons (.main-cta's fit-content width was winning) */
    .home-page .hero-vid-content .hero-buttons { width: 100%; }
    .home-page .hero-vid-content .hero-buttons a {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }
}


/* 3. SCANNER OVERVIEW ---------------------------------------------- */
.home-page .scanner-overview ul li { margin-bottom: .45rem; }


/* 4. PROFESSION CARDS (icp2) --------------------------------------- */
.home-page .icp2-grid > * {
    position: relative;
    border-radius: .75rem;
}

/* only the cards that are links lift on hover */
.home-page .icp2-grid > div:hover {
    transform: none;
    border-color: rgba(255,255,255,.2);
    background-color: rgba(255,255,255,.02);
}

/* linked cards get an arrow so they read as clickable */
.home-page .icp2-grid > a::after {
    content: "\2192";
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(74,255,210,.4);
    border-radius: 50%;
    font-size: 1rem;
    line-height: 1;
    color: var(--highlight);
    transition: background-color .25s, color .25s, translate .25s;
}
.home-page .icp2-grid > a:hover::after {
    background-color: var(--highlight);
    color: var(--navy);
    translate: 2px 0;
}

@media (max-width: 768px) {
    .home-page .icp2-grid { margin: 1.5rem -5.56% 1.5rem; }
}


/* 5. HOW IT WORKS -------------------------------------------------- */
.home-page .how-it-works .faq-question:focus-visible { outline-offset: -2px; }

.home-page .how-it-works .faq-answer { border-radius: 0 0 .5rem .5rem; }

/* wistia placeholders (were inline <style> tags in the markup) */
.home-page wistia-player:not(:defined) {
    display: block;
    padding-top: 56.25%;
    filter: blur(5px);
    background: center / contain no-repeat;
}
.home-page wistia-player[media-id='fzwby65zgi']:not(:defined) { background-image: url('https://fast.wistia.com/embed/medias/fzwby65zgi/swatch'); }
.home-page wistia-player[media-id='ajvcpm08dp']:not(:defined) { background-image: url('https://fast.wistia.com/embed/medias/ajvcpm08dp/swatch'); }
.home-page wistia-player[media-id='r2kustuirh']:not(:defined) { background-image: url('https://fast.wistia.com/embed/medias/r2kustuirh/swatch'); }

/* the point cloud / drawing toggle is now a <button>: reset its defaults */
.home-page .toggle-me {
    padding: 0;
    background: none;
    font: inherit;
    color: inherit;
}
.home-page .toggle-dot { display: block; }
.home-page .toggle-me:focus-visible { outline-offset: 4px; }

/* the labels either side also switch the view */
.home-page .fp-left,
.home-page .fp-right {
    cursor: pointer;
    transition: opacity .25s;
}
.home-page .fp-toggle-grid:has(.toggle-me:not(.fp-active)) .fp-right,
.home-page .fp-toggle-grid:has(.toggle-me.fp-active) .fp-left { opacity: .55; }

.home-page .fp-switch { border-radius: .75rem; }


/* 6. EXPORT LOGOS -------------------------------------------------- */
.home-page .export-to-bim > div {
    transition: translate .25s;
}
@media (hover: hover) {
    .home-page .export-to-bim > div:hover { translate: 0 -2px; }
}
@media (max-width: 640px) {
    .home-page .export-to-bim {
        flex-wrap: wrap;
        justify-content: center;
        gap: .5rem;
    }
}


/* 7. AEC / CUSTOM SOLUTIONS ---------------------------------------- */
.home-page .icp-buttons button {
    border-radius: .4rem .4rem 0 0;
    transition: background-color .2s, color .2s;
}
.home-page .icp-buttons button:not(.icp-button-active):hover { color: var(--black); }

.home-page .icp-section:not([hidden]) { animation: hp-fade-up .4s ease both; }
@keyframes hp-fade-up {
    from { opacity: 0; translate: 0 8px; }
    to   { opacity: 1; translate: 0 0; }
}

.home-page .icp-grid img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: .5rem;
}

@media (max-width: 768px) {
    .home-page .icp-grid { margin-top: 1rem; row-gap: 0; }
    .home-page .icp-buttons button { font-size: .75rem; padding: .6rem .9rem; }
}


/* 8. REVIEWS ------------------------------------------------------- */
@media (max-width: 768px) {
    .home-page .some-reviews {
        background: none;
        margin-top: 2rem;
    }
    .home-page .some-reviews > .review-box {
        background-color: white;
        box-shadow: inset 0 0 0 100vmax rgba(74, 255, 210, .25);
    }
}


/* 9. REDUCED MOTION ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .home-page .fade {
        opacity: 1 !important;
        transform: none !important;
    }
    .home-page *,
    .home-page *::before,
    .home-page *::after {
        transition: none !important;
        animation: none !important;
    }
}