/* ============================================================
   condition-landing.css — Shared styles for all condition landing pages
   (back pain, neck pain, sciatica, shoulder, headaches, etc.)
   Loaded alongside styles.css via head-common.html link.
   ============================================================ */

/* Hero padding override (condition pages have taller hero) */
.hero {
    padding-top: 7rem;
}

/* Content link styling — scoped to condition page content blocks */
.section--light .condition-content a,
.section--warm .condition-content a {
    color: var(--accent);
    text-decoration: underline;
}

/* Problem section centered header */
#problem {
    text-align: center;
}
#problem .problem-list {
    text-align: left;
}

/* Pricing grid */
.pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 600px;
    margin: 0 auto;
}
@media (min-width: 640px) {
    .pricing-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Pricing note — below pricing grid */
.pricing-note {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
    max-width: 520px;
    margin: 2rem auto 0;
}

/* Reviews grid */
.reviews-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 640px) {
    .reviews-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Final CTA block */
.location-bottom-cta--card {
    background-color: var(--overlay-light);
    border-radius: var(--radius-sm);
    padding: 2.5rem;
    margin-top: 0;
}

.cta-final-body {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: 2rem;
    max-width: 520px;
}

.cta-final-footnote {
    color: var(--text-faint);
    font-size: 0.8rem;
    margin-top: 1.5rem;
    margin-bottom: 0;
}

.location-bottom-cta {
    background-color: var(--bg-dark);
    border-radius: var(--radius-sm);
    padding: 2.5rem;
    margin-top: 2rem;
}
.location-bottom-cta h3 {
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--text-on-dark);
    margin-bottom: 1.5rem;
    letter-spacing: -0.5px;
}
.location-bottom-cta .cta-stack {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
/* TODO: was 480px — normalized to 640px. CTA buttons stay stacked 40px longer. Verify on device. */
@media (min-width: 640px) {
    .location-bottom-cta .cta-stack {
        flex-direction: row;
        flex-wrap: wrap;
    }
}