/* ============================================================
   ParkoLow — Desktop layer
   ------------------------------------------------------------
   Loaded AFTER app.css. Everything lives inside
   @media (min-width: 820px) so the mobile experience (<820px) is
   byte-for-byte unchanged. From 820px up this layer dissolves the
   420px "phone frame" (and the 820–1023px tablet framing in app.css)
   and lays the same DOM out as a real full-width desktop site.
   No markup/JS changes required beyond one optional wrapper on the
   results page (.results-sidebar).
   ============================================================ */

@media (min-width: 820px) {

    /* ── 0. Shared edge / container width ──────────────────────
       --edge-home is symmetric horizontal padding that caps content at a
       max width and keeps every page's header/nav/grid aligned on the same
       left/right edges. The 100% inside resolves against the using element
       (= viewport). This used to be three separate widths (--edge-wide
       1240px for results/lot-detail, --edge-read 820px for legal/FAQ pages,
       plus an unused --edge-mid) — now everything shares this one rail so
       page width doesn't jump around when navigating the site. Long-form
       article/legal body text still caps narrower on its own (.legal-body's
       860px max-width) for readability — that's an intentional exception,
       not part of this shared rail.
       --section-gap is the standard spacing between/within top-level page
       sections (was a mix of 18/30/40px on the homepage) — use this for any
       new section-level gap instead of a new hardcoded value.
       --shadow-card-desktop is the "floating panel" shadow shared by the
       desktop-only white cards (results sidebar, amenities panel, inline
       reservation result, ...) — distinct from app.css's --shadow-card,
       which is the smaller mobile+desktop card-hover shadow. */
    .phone-frame {
        --edge-home: max(24px, calc((100% - 1140px) / 2));
        --section-gap: 24px;
        --shadow-card-desktop: 0 1px 6px rgba(15, 36, 96, 0.08);
    }

    /* ── 1. Un-cage the phone frame ──────────────────────────── */
    body { display: block; background: #eef2ff; }

    .desktop-layout { display: block; height: auto; overflow: visible; }

    .phone-frame-wrapper {
        display: block;
        flex: none;
        width: 100%;
        min-height: 100vh;
        padding: 0;
        background: #eef2ff;
    }

    .phone-frame {
        max-width: none;
        width: 100%;
        height: auto;
        max-height: none;
        min-height: 100vh;
        overflow: visible;
        border-radius: 0;
        box-shadow: none;
        transform: none;            /* kills the 1.2/1.45/1.9 scale rules */
        background: transparent;
        display: block;
    }

    /* The per-page inner scrollers now flow in the normal document. */
    .page-scroll {
        overflow: visible;
        height: auto;
        min-height: 0;
        background: transparent;
    }

    .results-root {
        display: block;
        height: auto;
        overflow: visible;
    }

    /* ── 2. Shared full-width sticky headers ─────────────────── */
    .results-topbar {
        position: sticky;
        top: 0;
        z-index: 100;
        padding: 13px var(--edge-home);
        box-shadow: 0 1px 10px rgba(15, 36, 96, 0.18);
    }

    /* ── 3. Home ─────────────────────────────────────────────── */
    /* Home's body block is `.phone-frame > .page-scroll` (unique to home). */
    .phone-frame > .page-scroll { background: transparent; }

    .hero {
        padding: 13px var(--edge-home) 52px;
        gap: var(--section-gap);
        background-image:
            linear-gradient(160deg, rgba(26, 79, 214, 0.65) 0%, rgba(26, 86, 219, 0.65) 60%, rgba(37, 99, 235, 0.65) 100%),
            url('/img/page-hero.jpg');
        background-size: cover;
        background-position: center;
    }

    .hero .top-bar { width: 100%; }


    .tagline { margin-top: 8px; }
    .tagline h1 { font-size: 40px; line-height: 1.1; }
    .tagline h2,
    .tagline p { font-size: 18px; margin-top: 10px; }

    /* Search card → same stacked layout as mobile, just centered */
    .hero .search-card {
        width: 100%;
        max-width: 470px;
        margin: 0 auto;
        padding: 20px;
    }
    /* Form type — bumped slightly */
    .hero .search-card .field-label { font-size: 12px; }
    .hero .search-card .date-pill { font-size: 15px; padding: 12px 14px; }
    .hero .search-card .days-chip-inner { font-size: 14px; }
    .hero .search-card .stepper-count { font-size: 18px; }
    .hero .search-card .stepper-hint { font-size: 12px; }
    .hero .search-card .search-btn { font-size: 19px; padding: 16px; }

    /* Below-the-fold content sections — type bumped noticeably.
       All share --edge-home so every section's content lines up on the
       same left/right edges (uniform 1140px rail). */
    .badges-row { padding: 28px var(--edge-home) 6px; gap: 12px; }
    .badges-row .badge-pill { font-size: 14px; padding: 8px 16px; }

    .how-it-works {
        padding: 36px var(--edge-home) 20px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--section-gap);
        align-items: stretch;
    }
    .how-it-works .section-title {
        grid-column: 1 / -1;
        text-align: center;
        font-size: 30px;
        margin-bottom: 4px;
    }
    .how-it-works .step-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin: 0;
        background: #fff;
        border-radius: 16px;
        padding: 20px;
        box-shadow: 0 1px 4px rgba(15, 36, 96, 0.08);
    }
    .how-it-works .step-icon { width: 50px; height: 50px; font-size: 24px; margin-top: 0; }
    .how-it-works .step-text strong { font-size: 17px; }
    .how-it-works .step-text span { font-size: 15px; margin-top: 4px; }

    .faq-section { padding: 24px var(--edge-home) 32px; }
    /* Drop the mobile full-bleed negative margin so the FAQ header lines up
       with the shared content rail (it stays full-bleed on mobile). */
    .faq-section .faq-header { margin-inline: 0; }
    .faq-section .faq-header__title { font-size: 36px; }
    .faq-section .faq-item summary { font-size: 16px; padding: 18px 20px; min-height: 60px; }
    .faq-section .faq-answer { font-size: 15px; padding: 0 20px 18px; }

    .toplist-section { padding: 24px var(--edge-home) 32px; }
    /* Same treatment as .home-faq-blog .faq-image: drop the photo banner on
       desktop and let the title stand alone as a plain heading (still
       shown full-bleed with the overlay title on mobile). */
    .toplist-image { display: none; }
    .toplist-header { margin: 0; overflow: visible; }
    .toplist-header__title {
        position: static;
        inset: auto;
        display: block;
        padding: 0;
        background: none;
        color: var(--dark);
        font-size: 26px;
        line-height: 1.2;
        margin-bottom: 16px;
    }
    /* min-height (not padding) matching .faq-item summary — that row's
       tallest content is its ~20px text/plus-icon, but this row's tallest
       content is the fixed 32px .toplist-item__icon box, so equal padding
       alone still produced unequal total heights. Both rows are already
       flex + align-items:center, so min-height centers their content
       regardless of which one's intrinsic content is taller. */
    .toplist-item { font-size: 16px; padding: 14px 20px; min-height: 60px; }

    .lot-links { padding-inline: var(--edge-home); }
    .lot-links__title { font-size: 12px; }
    .lot-links__item { font-size: 13px; }

    .section-divider { margin-inline: var(--edge-home); }

    /* Latest-articles block (home only). Scoped to .blog-latest so the
       standalone blog list page (.blog-list) keeps its app.css layout. */
    .blog-latest {
        padding: 28px var(--edge-home) 8px;
    }
    .blog-latest .section-title {
        text-align: center;
        font-size: 30px;
        margin-bottom: 16px;
    }
    .blog-latest__list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: var(--section-gap);
    }
    .blog-latest .faq-see-all {
        display: block;
        text-align: center;
        margin-top: 18px;
    }

    /* FAQ + Toplist side by side on desktop, Latest-articles as its own
       full-width row underneath — matches the DOM order (FAQ, Toplist, Blog),
       which is also how they stack on mobile. */
    .home-faq-blog {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--section-gap);
        align-items: start;
        padding: 24px var(--edge-home) 32px;
    }
    /* Rail lives on the wrapper; the sections drop their own horizontal
       padding so the columns/full-width row all start at the same point. */
    .home-faq-blog > .faq-section,
    .home-faq-blog > .blog-latest,
    .home-faq-blog > .toplist-section {
        padding: 0;
    }
    .home-faq-blog > .blog-latest {
        grid-column: 1 / -1;
    }
    /* FAQ's photo banner is hidden here only (still shown on mobile and on
       the standalone /faq page) and its title becomes a plain heading —
       .toplist-section gets the same treatment generically (see above),
       so both halves of the top row match. */
    .home-faq-blog .faq-image { display: none; }
    .home-faq-blog .faq-header { margin: 0; overflow: visible; }
    .home-faq-blog .faq-header__title {
        position: static;
        inset: auto;
        display: block;
        padding: 0;
        background: none;
        color: var(--dark);
        font-size: 26px;
        line-height: 1.2;
        margin-bottom: 16px;
    }

    /* Home footer aligns to the same rail. Scoped to home only: here
       .page-scroll is a direct child of .phone-frame, whereas results/lot
       pages wrap it in .results-root, so those footers are untouched. */
    .phone-frame > .page-scroll > .site-footer {
        padding: 18px var(--edge-home);
    }

    /* ── 4. Results: sticky sidebar + card grid ────────────────
       Guarded on :has(> .results-sidebar) — only the results page has that
       wrapper. Without the guard this also matched the top-list landing
       page's .results-root > .page-scroll (same base markup, no sidebar),
       scrambling its header/intro/list/search-form into a 280px/1fr grid
       with no sidebar to fill the first column. */
    .results-root > .page-scroll:has(> .results-sidebar) {
        display: grid;
        grid-template-columns: 280px minmax(0, 1fr);
        align-items: start;
        gap: 28px;
        padding: 28px var(--edge-home) 56px;
    }

    /* Summary bar (from the .results-search-widget display:contents wrapper —
       see app.css). Explicit placement: column 2 (content column) only, row 1,
       so it sits above .results-content without also sitting above the sidebar
       — the sidebar spans both rows below and keeps starting flush at the top.
       The pill-badge / blue-button look is shared with mobile (defined in
       app.css) — this just bumps sizing up to match the sidebar's card
       weight and swaps in the fuller wording now that there's room for it. */
    .results-search-widget {
        background: transparent;
        padding: 0;
    }

    .results-summary-bar {
        border: 1px solid var(--orange);

        grid-column: 2;
        grid-row: 1;
        margin: 0;
        padding: 16px 22px;
        border-radius: 16px;
        box-shadow: var(--shadow-card-desktop);
        flex-wrap: nowrap;
        transition: box-shadow 0.15s, border-color 0.15s;
    }
    .results-summary-bar:hover {
        border-color: var(--orange);
        box-shadow: 0 4px 16px rgba(15, 36, 96, 0.12);
    }
    .rsb-dates {
        font-size: 16px;
        gap: 8px;
    }
    .rsb-right { gap: 16px; }
    .rsb-meta { gap: 8px; }
    .rsb-meta span {
        padding: 6px 13px;
        font-size: 13px;
    }
    .rsb-edit {
        padding: 9px 16px;
        font-size: 14px;
        gap: 6px;
    }

    /* Sidebar (the wrapper added in the template). Mobile keeps display:contents.
       grid-row is pinned to 1 / 3 (not 1 / -1) — .page-scroll has a 3rd grid item
       further down (.site-footer, auto-placed into row 3 since it has no
       explicit grid-row of its own, only grid-column: 1 / -1). `-1` would pull
       the sidebar's span across that row too, forcing the row-sizing algorithm
       to inflate rows 1–2 to fit the sidebar's now-taller span — producing a
       large empty gap above .results-content. */
    .results-sidebar {
        grid-column: 1;
        grid-row: 1 / 3;
        display: flex;
        flex-direction: column;
        gap: 18px;
        position: sticky;
        top: 84px;
        background: #fff;
        border-radius: 18px;
        padding: 20px;
        /* Blue accent border — every other card on this page is plain white
           with the same subtle shadow, so without this the sidebar just
           blends into the results grid instead of reading as its own
           sort/filter control panel. */
        border: 1px solid var(--blue);
        box-shadow: var(--shadow-card-desktop);
    }
    .results-sidebar .results-meta-bar,
    .results-sidebar .results-meta-bar--filters {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 0;
        background: transparent;
        overflow: visible;
    }
    .results-sidebar .meta-bar-label {
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--muted);
    }
    .results-sidebar .sort-pills {
        flex-direction: column;
        gap: 8px;
    }
    .results-sidebar .sort-pill {
        text-align: center;
        padding: 10px 14px;
    }

    /* Main column */
    .results-content {
        grid-column: 2;
        grid-row: 2;
        padding-bottom: 8px;
    }

    .results-content .top-picks-section { padding: 4px 0 18px; }
    .results-content .top-picks-header { padding: 0 0 14px; font-size: 18px; }
    /* Top Picks is a curated 2-card row, not a wrap-friendly list like
       Reservable Lots below — keep it a horizontally-scrolling carousel
       rather than a grid that could wrap to 1 column or stretch with only
       2 items. Card width matches the Reservable Lots grid columns when
       there's room (half the row, minus half the gap); below that it clamps
       to the same 260px floor and the row scrolls instead of squeezing
       the price + button below a usable width. */
    .results-content .top-picks-scroll {
        display: flex;
        overflow-x: auto;
        gap: 16px;
        padding: 4px 0 8px;
    }
    .results-content .top-picks-scroll .pick-card {
        width: max(260px, calc(50% - 8px));
        flex-shrink: 0;
    }
    .results-content .pick-card-image { height: 170px; }

    .results-content .all-results-section {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 16px;
        align-items: start;
        padding: 18px 0 8px;
    }
    /* Reservable Lots: a single-column list of horizontal cards (square
       image left, details right) — matching Booking.com's list style —
       instead of the vertical image-on-top grid used for Top Picks above.
       .pick-card-list is otherwise a single grid item in .all-results-
       section's grid; span it across the row so the list gets the full
       content width, which a horizontal card needs room for. */
    .results-content .pick-card-list {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 0;
    }
    .results-content .pick-card-list .pick-card {
        display: flex;
        flex-direction: row;
        width: 100%;
    }
    .results-content .pick-card-list .pick-card-image {
        width: 220px;
        height: auto;
        aspect-ratio: 1 / 1;
        flex-shrink: 0;
    }
    .results-content .pick-card-list .pick-card-body {
        flex: 1;
        min-width: 0;
    }
    /* The square image no longer fills the whole card width like it did in
       the vertical layout, leaving spare room next to it — use it for the
       lot's own description instead of empty space. Clamped to 3 lines
       rather than a hard character cut, so it adapts to the card's actual
       width instead of a fixed guess. */
    .results-content .pick-card-list .pick-card-desc {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin: 6px 0 12px;
        font-size: var(--fs-sm);
        color: var(--muted);
        line-height: 1.5;
    }
    .results-content .all-results-header {
        grid-column: 1 / -1;
        padding: 0 0 4px;
    }
    /* Flip the macro cards from the mobile side-layout to cover-image-on-top
       so every result card matches the top cards. Mobile keeps the side layout. */
    .results-content .lot-card {
        margin: 0;
        height: 100%;
        flex-direction: column;
    }
    .results-content .lot-card-left {
        width: auto;
        height: 170px;
        padding: 0;
    }
    /* Logo fallback: contained + centered with breathing room (never cropped). */
    .results-content .lot-card-left--icon {
        padding: 24px;
        background-origin: content-box;
        background-size: contain;
    }
    .results-content .lot-card-right {
        padding: 14px 16px 16px;
    }
    .results-content .lot-card--clickable:hover {
        /* transform: translateY(-2px) already applies via the base
           .lot-card--clickable:hover rule in app.css — just the stronger
           shadow is desktop-specific. */
        box-shadow: 0 6px 20px rgba(15, 36, 96, 0.14);
    }

    .results-content .empty-state { grid-column: 1 / -1; }

    .site-footer { grid-column: 1 / -1; }

    /* ── 5. Lot detail: gallery left, sticky booking right ────── */
    /* Only the detail page has `> .lot-page-search`; the booking entry
       page (also .lot-page) is excluded and centered instead. */
    .lot-page > .page-scroll:has(> .lot-page-search) {
        display: grid;
        /* Sticky column caps at 400px on wide desktops but scales down with
           the viewport below that, so the gallery/form column (the part
           people actually read/fill in) isn't left squeezed at the narrow
           end of the desktop range (e.g. 820px iPad-Air-portrait width). */
        grid-template-columns: minmax(0, 1fr) clamp(300px, 38vw, 400px);
        gap: 20px;
        align-items: start;
        padding: 28px var(--edge-home) 56px;
        background: transparent;
    }
    .lot-page > .page-scroll:has(> .lot-page-search) > .lot-page-header {
        grid-column: 1 / -1;
        padding: 4px 0 0;
    }
    .lot-page > .page-scroll:has(> .lot-page-search) > .modal-preview-body {
        grid-column: 1;
        overflow: visible;
        background: #fff;
        border-radius: 18px;
        padding: 14px 0;
        box-shadow: var(--shadow-card-desktop);
    }
    .lot-page > .page-scroll:has(> .lot-page-search) > .lot-page-search {
        grid-column: 2;
        position: sticky;
        top: 84px;
        align-self: start;
        border-radius: 18px;
        scroll-margin-top: 100px;
    }
    /* Reservation result (form / not-reservable / success / payment-error) —
       same card treatment as .modal-preview-body above it, so the section
       doesn't just float on the page background under the amenities card. */
    .lot-page > .page-scroll:has(> .lot-page-search) > .lot-search-result {
        grid-column: 1;
        background: #fff;
        border-radius: 18px;
        box-shadow: var(--shadow-card-desktop);
        overflow: hidden;
        padding: 14px 0;
        /* scrollIntoView({block:'start'}) (reservationApp.js/searchApp.js)
           aligns this element's top edge with the viewport's top edge — but
           .results-topbar is sticky here (~84px tall, matching the sticky
           sidebar's own `top` offset above), so it was covering the first
           field labels after the auto-scroll. Base app.css's 12px
           scroll-margin-top only accounted for mobile, where the topbar
           doesn't overlay content. */
        scroll-margin-top: 82px;
    }
    .lot-page .modal-lot-name { font-size: 28px; }

    /* ── 6. Booking modal → centered dialog ──────────────────── */
    .modal-overlay {
        position: fixed;
        align-items: center;
    }
    .modal-sheet {
        border-radius: 22px;
        max-width: 520px;
        max-height: min(88vh, 820px);
        animation: modalPop 0.2s cubic-bezier(0.32, 0.72, 0, 1);
    }
    .modal-handle { display: none; }

    /* Terms / privacy overlay → centered dialog */
    .terms-overlay {
        position: fixed;
        align-items: center;
    }
    .terms-sheet {
        border-radius: 22px;
        max-width: 780px;
        height: min(82vh, 760px);
        animation: modalPop 0.2s cubic-bezier(0.32, 0.72, 0, 1);
    }
    .terms-sheet-handle { display: none; }

    @keyframes modalPop {
        from { transform: translateY(14px) scale(0.98); opacity: 0; }
        to   { transform: none; opacity: 1; }
    }

    /* ── 7. FAQ / legal pages → centered reading column ──────── */
    .legal-page {
        display: block;
        height: auto;
        overflow: visible;
        flex: none;
    }
    /* Header is now .results-topbar + .lot-page-header, same markup as the
       /top landing pages — .results-topbar already gets its sticky/padding/
       shadow treatment from its own generic rule above (section 2), and the
       .landing-page header-sizing rules below (section 9) are shared with
       .legal-page too. Nothing legal-page-specific needed here anymore. */
    .legal-body {
        overflow: visible;
        max-width: 860px;
        margin: 28px auto;
        padding: 36px 44px 48px;
        background: #fff;
        border-radius: 18px;
        box-shadow: var(--shadow-card-desktop);
    }
    .legal-body p,
    .legal-body li { font-size: 14px; }
    .faq-page-body.legal-body { padding-inline: 36px; }
    .faq-page-body .faq-section { max-width: none; padding: 0; }

    /* Blog list page (.legal-page.blog-page): give it a real card grid
       instead of the full-width 2-col mobile fallback. */
    .blog-page .blog-list {
        padding: 28px var(--edge-home) 40px;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: var(--section-gap);
        align-items: start;
    }
    .blog-page .blog-empty { padding: 28px var(--edge-home); }
    .blog-page > .site-footer { padding: 18px var(--edge-home); }

    /* ── 8. Error pages ──────────────────────────────────────── */
    .error-page { min-height: 80vh; }

    /* ── 9. Top-list landing page ───────────────────────────────
       Shares .results-root/.page-scroll markup with the results page but
       has no .results-sidebar (see the :has() guard in section 4), so it
       falls back to a plain single column there. Cap it to the shared
       content rail and give it normal desktop spacing/type instead of the
       raw mobile 16px-padding blocks stacked full width.
       .lot-page-header/.modal-lot-name sizing is shared with .legal-page
       (FAQ/terms/privacy/blog) too — same header markup, both page families. */
    .landing-page .lot-page-header,
    .legal-page .lot-page-header {
        padding: 24px var(--edge-home) 0;
    }
    .landing-page .modal-lot-name,
    .legal-page .modal-lot-name {
        font-size: 32px;
    }
    .landing-page .landing-intro {
        padding: 10px var(--edge-home) 6px;
        max-width: 860px;
        font-size: 16px;
        line-height: 1.5;
    }
    .landing-page .results-content {
        padding: 8px var(--edge-home) 4px;
    }
    .landing-page .results-disclaimer {
        padding: 4px var(--edge-home) 8px;
    }
    /* Unlike the home hero (full-bleed band with enough tagline copy to fill
       it), this section has only a short heading + the form — so cap the
       whole card (blue background included) to the home hero's search-card
       width and center it, instead of stretching the blue background across
       the full rail with the form floating in a lot of empty blue space. */
    .landing-page .lot-page-search {
        max-width: 470px;
        margin: 20px auto 0;
        border-radius: 18px;
        padding: 28px;
    }

    /* ── 10. Prices comparison grid (/prices) ─────────────────
       Centered card on the shared content rail; both sticky axes
       (header top, lot column left) carry over from the mobile rules. */
    .prices-grid {
        width: 100%;
        max-width: 1100px;
        margin: 0 auto;
        padding: 12px 24px 40px;
    }
    .prices-intro {
        font-size: 16px;
        /* max-width: 860px; */
    }
    .prices-scroll {
        max-height: 72vh;
        border-radius: 18px;
        box-shadow: var(--shadow-card-desktop);
    }
    .prices-table {
        font-size: 14px;
    }
    .prices-col-lot {
        min-width: 220px;
        max-width: 260px;
    }
    .prices-cell {
        min-width: 88px;
    }
}