/*
    Aspen — Editorial Property Template (Responsive)
    Mobile-first; breakpoints layered on top.
*/

/* ---------- Tablet+ (>=768px) ---------- */
@media (min-width: 768px) {
    .aspen-header { padding: 1.5rem 4rem; }
    .aspen-header-address { display: block; }
    .aspen-header-cta { display: inline-block; }
    .aspen-menu-toggle-label { display: inline; }

    .aspen-hero { padding: 0 4rem 8rem; }
    .aspen-hero::after { top: 1.25rem; left: 1.25rem; right: 1.25rem; bottom: 1.25rem; }
    .aspen-hero-scroll { display: flex; left: 4rem; bottom: 3rem; }

    /* Right-align the card at tablet+ with breathing room from the
       hero's bottom-right corner; mobile keeps it spanning the hero
       with side margins. */
    .aspen-stats-section {
        left: auto;
        right: 2rem;
        bottom: 2rem;
        width: 65%;
        max-width: 800px;
    }
    .aspen-stats-card { padding: 2.5rem 1rem; flex-wrap: nowrap; }
    .aspen-stat { flex: 1 1 25%; padding: 0 1.25rem; }

    .aspen-about,
    .aspen-gallery,
    .aspen-media,
    .aspen-location,
    .aspen-presented,
    .aspen-contact { padding: 7rem 1.5rem; }

    .aspen-grid-12 { gap: 3rem; }
    .aspen-col-5 { grid-column: span 5 / span 5; }
    .aspen-col-7 { grid-column: span 7 / span 7; }
    .aspen-col-4 { grid-column: span 4 / span 4; }
    .aspen-col-8 { grid-column: span 8 / span 8; }

    .aspen-section-title { font-size: clamp(2.75rem, 4vw, 3.5rem); }
    .aspen-section-title br { display: block; }

    .aspen-about-actions { flex-direction: row; }

    .aspen-gallery-images { grid-template-columns: repeat(2, 1fr); }
    .aspen-gallery-images img { height: 260px; }

    .aspen-presented-header { flex-direction: row; align-items: flex-end; }

    .aspen-agent-card { flex-direction: row; max-width: none; padding: 2rem; gap: 2rem; }

    .aspen-form-row { grid-template-columns: 1fr 1fr; }

    .aspen-map { aspect-ratio: 21 / 9; }

    .aspen-footer-grid { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* ---------- Desktop (>=1024px) ---------- */
@media (min-width: 1024px) {
    .aspen-stats-card { padding: 3rem 4rem; }
    .aspen-section-title { font-size: 3.5rem; }
    .aspen-hero-address { font-size: clamp(4rem, 7vw, 6rem); }
}

/* Right-aligned section title for sections that mirror layout */
@media (min-width: 768px) {
    .aspen-text-right { text-align: right; }
    .aspen-text-right .aspen-accent-bar { margin-left: auto; }
}

/* Order swap helper for Media section (heading right of content) */
@media (min-width: 768px) {
    .aspen-order-1 { order: 1; }
    .aspen-order-2 { order: 2; }
}