/* ==========================================================================
   STRUCTR — home.css  (homepage-specific refinements)
   ========================================================================== */

.home-why {
    position: relative;
}

/* Blueprint motif framing the Why STRUCTR section */
.home-why::before,
.home-why::after {
    content: '';
    display: block;
    border-top: 2px dashed #B6A690;
    opacity: 0.4;
    max-width: 1200px;
    margin: 0 auto;
}

.home-why__grid { margin-top: 8px; }

.home-services .structr-card { text-align: left; }

/* Hero CTA stacking is handled globally in components.css */

/* Hero headline — tighter tracking + larger on desktop so the large
   Poppins bold heading reads as intentional rather than default. */
.home-hero .structr-hero h1 {
    letter-spacing: -0.02em;
}

@media (min-width: 1200px) {
    .home-hero .structr-hero h1 {
        font-size: 68px;
    }
}

.home-blog__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 36px;
}

/* ==========================================================================
   Mobile fixes (<= 767px)
   ========================================================================== */
@media (max-width: 767.98px) {
    /* Services overview + blog preview: explicit single column on mobile */
    .home-services .grid--3,
    .home-blog .grid--3 {
        grid-template-columns: 1fr;
    }

    /* Guarantee these content blocks are visible on mobile even if the
       scroll-reveal IntersectionObserver doesn't fire (was leaving the
       service cards, area strip, and blog cards blank). */
    .home-services .structr-card,
    .home-blog .structr-postcard,
    .structr-areas__item {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Feldgrau service-areas strip: keep labels on one line in the narrow
       two-up cells so nothing gets clipped. */
    .structr-areas__item {
        flex-basis: 50%;
        font-size: 16px;
        padding: 16px 10px;
    }
}