/* =============================================================================
   YogaRabble — home.css overlay (v2)

   Loads AFTER home.css. Polishes the landing page hero specifically:
   - Pill CTAs to match the rest of the system.
   - Better mobile hero layout (logo above text, full-width buttons on phone).
   - Slightly stronger gradient for legibility on the wood texture.
   - The wood floorbackg.jpg is preserved exactly.
   ============================================================================= */

/* Hero gradient — tiny contrast bump so white text reads cleanly across all
   parts of the wood texture. The wood image itself is unchanged. */
.hero-overlay {
    background: linear-gradient(135deg,
        rgba(47, 164, 169, 0.92) 0%,
        rgba(26, 107, 111, 0.86) 100%);
}

/* Pill the hero CTAs — matches the rest of the system. */
.hero .btn-hero {
    border-radius: var(--radius-pill);
    padding: .9rem 1.85rem;
    font-size: 1.05rem;
    font-weight: 500;
}

/* Hero "See how it works" outline-on-teal needs a fixed white border and white
   text. The current inline override on index.php works but cannot include
   :hover, so the hover state was missing. Provide a cleaner version here.
   The inline style="color:#fff;border-color:#fff" will simply be redundant. */
.hero .btn-outline.btn-hero {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.7);
    background: transparent;
}
.hero .btn-outline.btn-hero:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: #fff;
}

/* Hero art image — wood logo gets a subtle border so it doesn't blend into
   the teal gradient at small sizes. */
.hero-art img {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Mobile hero — make the logo land above the text instead of below ----------
   home.css's media query stacks .hero-inner to one column but leaves the
   .hero-copy first, pushing the logo below the wall of text. On mobile that
   wastes the most valuable real estate. We reorder for screens ≤900px. */
@media (max-width: 900px) {
    .hero-inner {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
    .hero-copy   { order: 2; text-align: center; }
    .hero-art    { order: 1; }
    .hero-art img {
        max-height: 300px;
        margin: 0 auto;
    }
    .hero-sub { margin-left: auto; margin-right: auto; }

    .hero-ctas {
        justify-content: center;
        flex-direction: column;
        align-items: stretch;
    }
    .hero-ctas .btn-hero {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 540px) {
    .hero { padding: 2rem 0 3rem; }
    .hero-copy h1 { font-size: 1.75rem; }
    .hero-sub { font-size: 1rem; }
    .hero-art img { max-height: 240px; }
}

/* Pricing teaser — soften corners + pill the CTA on mobile -----------------*/
.pricing-card {
    border-radius: var(--radius-card-lg);
    border-color: var(--color-border-soft);
}

@media (max-width: 540px) {
    .pricing-card { padding: 2rem 1.25rem; }
    .pricing-card .btn { width: 100%; }
}

/* Feature cards — softer corners ------------------------------------------*/
.features .feature-card {
    border-radius: var(--radius-card);
    border-color: var(--color-border-soft);
}

/* Split section — keep the centered button block readable on mobile -------*/
@media (max-width: 540px) {
    .split-col .btn,
    .split-col .btn-outline { width: 100%; text-align: center; }
}

/* Home-page nav uses a translucent white background; on mobile the drawer
   from app-v2.css needs to inherit that styling too so the drawer surface
   isn't mistakenly translucent. Force solid card bg inside the drawer. */
@media (max-width: 720px) {
    .home-nav .nav-drawer {
        background: var(--color-card);
        backdrop-filter: none;
    }
}