/* Phone layout of the map page (see mobile-layout.js): search and filter chips on top,
   a full-screen map with a floating List/Map switch, a single-column listing feed
   and filters in a bottom sheet. Desktop is untouched. */
.mobile-search-row,.map-view-toggle,.filter-sheet{display:none}
@media(max-width:760px){
 /* Room above the search field, plus the notch / status bar inset. */
 .map-page .topbar{height:calc(124px + var(--top-inset));padding:calc(14px + var(--top-inset)) 14px 8px;gap:10px}
 .map-page main{height:calc(100dvh - 124px - var(--top-inset))}

 /* Search and Favorites */
 .mobile-search-row{display:flex;align-items:center;gap:8px;height:44px;flex-shrink:0}
 .mobile-search{flex:1;min-width:0;margin:0;display:flex;align-items:center;gap:8px;height:44px;padding:0 12px;border-radius:12px;background:#eef2ec;color:#7b857d}
 .mobile-search::before{content:"";flex:0 0 18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") center/contain no-repeat}
 /* 16px keeps iOS from zooming the page when the field gets focus. */
 .mobile-search #description-search{flex:1;min-width:0;height:100%;min-height:0;border:0;padding:0;background:transparent;font:500 16px Manrope,sans-serif;color:#243c35;outline:none}
 .mobile-search #description-search::placeholder{color:#8a948c}
 .map-page .mobile-search-row #favorites-toggle{flex-shrink:0;margin:0;height:44px;padding:0 13px;border-radius:12px;font-size:13px}

 /* Filter chips */
 .mobile-filter-chips{gap:8px;min-height:40px;padding-right:14px}
 .mobile-filter-chips button{min-height:38px;padding:9px 13px;border-radius:19px;font-size:13px}
 .mobile-filter-chips button::after{content:"";display:inline-block;width:6px;height:6px;margin:0 1px 2px 7px;border:solid currentColor;border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
 .mobile-filter-chips .chip-icon{display:grid;place-items:center;width:40px;padding:0;position:relative}
 .mobile-filter-chips .chip-icon::after{display:none}
 .mobile-filter-chips .chip-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
 .mobile-filter-chips .chip-icon.active::before{content:"";position:absolute;top:6px;right:7px;width:8px;height:8px;border-radius:50%;background:#e2574c;border:2px solid #f0f4ee}

 /* Floating List/Map switch */
 .map-view-toggle{display:flex;align-items:center;gap:8px;position:absolute;left:50%;bottom:calc(34px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:5;padding:12px 18px;border:0;border-radius:24px;background:#fffefb;color:#243c35;font:700 15px Manrope,sans-serif;box-shadow:0 6px 22px #1c302d33;white-space:nowrap}
 .map-view-toggle[hidden]{display:none}
 .map-view-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
 .map-view-toggle .toggle-count{font-weight:600;color:#7b857d}
 .map-view-toggle.loading{color:#7b857d}
 .map-view-toggle .toggle-mascot{width:24px;height:23px;margin:-3px 0;animation:toggle-hop .9s ease-in-out infinite}
 @keyframes toggle-hop{0%,100%{transform:translateY(0)}45%{transform:translateY(-4px) scale(1.04,.96)}60%{transform:translateY(0) scale(1.06,.94)}}
 @media(prefers-reduced-motion:reduce){.map-view-toggle .toggle-mascot{animation:none}}

 /* Sheet: hidden at rest, a grip when open */
 .map-page #sheet-handle{height:28px;padding:10px 18px 0}
 .map-page #panel{box-shadow:0 -6px 24px #233a351f}
 #overview{position:relative;padding:6px 16px 96px}
 #detail{padding-bottom:24px}
 #point-reset{position:absolute;top:2px;right:12px;padding:8px 12px;border-radius:16px;background:#eef2ec;font-size:13px}
 .section-heading{margin:4px 0 14px}
 .section-heading h2{font-size:20px;letter-spacing:-.4px}

 /* Single-column feed with wide photos */
 #listing-list{grid-template-columns:1fr;gap:28px}
 #listing-list .listing{contain-intrinsic-size:auto 400px}
 #listing-list .listing .listing-gallery{aspect-ratio:4/3;border-radius:16px}
 /* Photo row bleeds to the right edge so the next photo visibly peeks in. */
 .photo-strip{display:flex;gap:4px;margin-right:-16px;padding-right:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:0;overscroll-behavior-x:contain;scrollbar-width:none;touch-action:pan-x pan-y pinch-zoom}
 .photo-strip::-webkit-scrollbar{display:none}
 .strip-photo{position:relative;flex:0 0 80%;aspect-ratio:4/3;padding:0;border:0;border-radius:14px;overflow:hidden;scroll-snap-align:start;background:#e7ece6}
 .strip-photo:only-child{flex-basis:100%}
 #listing-list .listing .strip-photo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0;aspect-ratio:auto;user-select:none}
 #listing-list .listing strong{font-size:20px;font-weight:800;margin-bottom:4px}
 #listing-list .listing .listing-description{font-size:14px;-webkit-line-clamp:2;margin-bottom:6px}
 #listing-list .listing small{font-size:12px}
 #listing-list .listing-content .listing-favorite{top:-6px}
 #listing-list .listing-content .listing-open{top:-6px}

 /* Filters bottom sheet */
 .filter-sheet[open]{display:flex;flex-direction:column;position:fixed;inset:auto 0 0 0;width:100%;max-width:100%;max-height:88dvh;margin:0;padding:0;border:0;border-radius:20px 20px 0 0;background:#fffefb;color:#243c35;animation:filter-sheet-in .22s ease-out}
 .filter-sheet::backdrop{background:#14232173;backdrop-filter:none}
 @keyframes filter-sheet-in{from{transform:translateY(100%)}}
 @media(prefers-reduced-motion:reduce){.filter-sheet[open]{animation:none}}
 .filter-sheet-head{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:8px;padding:10px 12px 6px}
 .filter-sheet-head h2{margin:0;text-align:center;font-size:17px;font-weight:800}
 .filter-sheet-close{width:44px;height:44px;border:0;background:transparent;font-size:30px;line-height:1;color:#243c35}
 .filter-sheet-clear{border:0;background:transparent;padding:10px 6px;font:600 14px Manrope,sans-serif;color:var(--green)}
 .filter-sheet-body{overflow-y:auto;overscroll-behavior:contain;padding:8px 18px 18px}
 .filter-sheet-foot{padding:10px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
 .filter-sheet-foot .primary{justify-content:center;height:52px;border-radius:14px;font-size:15px}
 .filter-sheet #filters{border:0;margin:0;padding:0;background:transparent}
 .filter-sheet #filters>summary,.filter-sheet .text-search-filter,.filter-sheet .filters-footer{display:none}
 .filter-sheet .filters-body{padding:0}
 .filter-sheet #filters>.filters-body>*{margin:0 0 22px}
 .filter-sheet :is(#district-options,#bedroom-options,#age-options,#origin-options) button,.filter-sheet .sort-options button{min-height:42px;padding:10px 14px;font-size:14px}
 .filter-sheet #filters :is(legend,.price-filter>label){font-size:15px;font-weight:800;margin-bottom:10px;color:#243c35}
 /* A chip shows only its own section; the title already names it. */
 .filter-sheet #filters:not([data-section="all"]) :is(legend,.price-filter>label){display:none}
 .filter-sheet #filters[data-section="price"] :is(fieldset,.sort-filter),
 .filter-sheet #filters[data-section="district"] :is(.price-filter,fieldset:has(#bedroom-options,#age-options,#origin-options),.sort-filter),
 .filter-sheet #filters[data-section="rooms"] :is(.price-filter,fieldset:has(#district-options,#age-options,#origin-options),.sort-filter),
 .filter-sheet #filters[data-section="age"] :is(.price-filter,fieldset:has(#district-options,#bedroom-options,#origin-options),.sort-filter),
 .filter-sheet #filters[data-section="origin"] :is(.price-filter,fieldset:has(#district-options,#bedroom-options,#age-options),.sort-filter),
 .filter-sheet #filters[data-section="sort"] :is(.price-filter,fieldset.district-filter){display:none}
}