/* ============================================================
   CATEGORY PAGE — product-first reorder (spot-light.html etc.)
   Page-scoped stylesheet for the 13 root category pages
   (body.category-page). Mirrors the products.html fix: compact the
   hero and tighten section spacing so the product grid sits near the
   top of the page, with the Overview / Applications / Specification /
   FAQ prose relocated below the grid.

   All rules are scoped via body.category-page and never touch the
   shared css/style.css used by the 141 product pages and every other
   page on the site.
   ============================================================ */

/* --- Compact the hero ---------------------------------------------------
   Shared style.css gives .spot-hero height:85vh / min-height:700px, which
   pushed the grid ~4400px down the page. Scope a much shorter hero here so
   the grid is reachable almost immediately on load. */
body.category-page .spot-hero {
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 150px 0 70px;
}
body.category-page .spot-hero-content {
    max-width: 980px;
}
body.category-page .spot-hero-title {
    font-size: 2.5rem;
    margin-bottom: 18px;
}
body.category-page .spot-hero-subtitle {
    font-size: 1.08rem;
    line-height: 1.6;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    body.category-page .spot-hero {
        padding: 120px 0 50px;
    }
    body.category-page .spot-hero-title {
        font-size: 1.9rem;
    }
    body.category-page .spot-hero-subtitle {
        font-size: 1rem;
    }
}

/* --- Tighten the products section so the grid sits right under the hero --
   The grid moves directly beneath the hero in the reordered DOM; trim the
   default .spotlight-section top padding so it reads as one continuous
   product-first block. */
body.category-page #products-section.spotlight-section {
    padding-top: 48px;
}
body.category-page #products-section .breadcrumbs {
    margin-bottom: 14px;
}

/* Premium product-card hover — consistent with products.html. */
body.category-page .spotlight-product-card {
    transition: transform .3s cubic-bezier(.22, 1, .36, 1),
                box-shadow .3s cubic-bezier(.22, 1, .36, 1) !important;
    will-change: transform;
}
body.category-page .spotlight-product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 50px rgba(0, 0, 0, .16);
}
body.category-page .spotlight-product-card .product-image-wrapper {
    overflow: hidden;
}
body.category-page .spotlight-product-card .product-image-wrapper img {
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
body.category-page .spotlight-product-card:hover .product-image-wrapper img {
    transform: scale(1.06);
}

/* --- Prose sections, now below the grid --------------------------------
   The first relocated SEO section (Overview) sits directly after the
   products section; give it a clear top boundary so the two blocks read
   as distinct. The sc-* sections keep their own internal spacing. */
body.category-page #products-section + .sc-feature-section {
    border-top: 1px solid rgba(47, 47, 47, .08);
    margin-top: 8px;
}

/* --- Reduced-motion: disable the hover transforms/transitions. --------- */
@media (prefers-reduced-motion: reduce) {
    body.category-page .spotlight-product-card,
    body.category-page .spotlight-product-card .product-image-wrapper img {
        transition: none !important;
    }
    body.category-page .spotlight-product-card:hover {
        transform: none;
    }
    body.category-page .spotlight-product-card:hover .product-image-wrapper img {
        transform: none;
    }
}