/* Realty San Miguel — tablet & desktop.

   Linked with media="(min-width: 768px)", so nothing in this file can apply
   on a phone: the mobile site is app.css alone, exactly as it was. Rules at
   the top level are for tablets and up; the @media (min-width: 1024px) block
   is the desktop layout, with a top navigation bar instead of the tab bar.

   Markup that only exists for these layouts (.dh header, .dfoot footer, .dx
   extras, .dwrap layout wrappers) is hidden or flattened in app.css and
   switched on here. */

/* ===================================================================== tablet
   768–1023px: the phone layout with room to breathe. The tab bar stays —
   tablets are touch devices held in two hands — but it stops stretching. */

.tabbar { grid-template-columns: repeat(4, minmax(0, 150px)); justify-content: center; }
.tab { font-size: 13.5px; }

/* The phone gallery is 4:3, which on a tablet is a wall of photo. */
.gallery__track { aspect-ratio: 16 / 9; }

/* The listing's action bar centres instead of spanning the screen. */
.ctabar { padding-left: max(var(--gutter), calc(50% - 360px)); padding-right: max(var(--gutter), calc(50% - 360px)); }

/* Enquiry sheet: a centred card rather than a full-width drawer. */
.sheet-overlay__panel { left: 50%; right: auto; width: min(560px, 100%); translate: -50% 0; border-radius: 22px 22px 0 0; }

.installbar { max-width: 460px; }

.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.postlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.postlist .postcard { height: 100%; }
.hublist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* =================================================================== desktop */

@media (min-width: 1024px) {
  :root {
    --gutter: 40px;
    --dh: 76px;          /* header height */
    --wide: 1320px;      /* page width for listing pages */
    --read: 780px;       /* page width for reading and form pages */
  }

  body { padding-bottom: 0; overflow-x: clip; }
  body.has-cta { padding-bottom: 0; }

  /* Phone chrome that a desktop replaces. */
  .tabbar, .installbar, .ctabar, .sitefoot { display: none !important; }

  /* Pages are reading-width by default and go wide when they carry listing
     grids, a gallery or a map. */
  .shell { max-width: var(--read); }
  .shell:has(.hero, .search-layout, .detail-layout, .mapview, .postlist, .quotes, .hublist, .cardlist) {
    max-width: var(--wide);
  }

  .section-head { padding-top: 52px; }
  .section-title { font-size: 34px; letter-spacing: -.01em; }
  .section-more { font-size: 14.5px; }
  .page-intro { font-size: 17px; line-height: 1.6; max-width: 720px; }

  /* -------------------------------------------------------------- header */
  .dh {
    display: block;
    position: sticky; top: 0; z-index: 70;
    height: var(--dh);
    background: rgba(250, 246, 240, .9);
    -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
    border-bottom: 1px solid var(--ink-10);
  }
  .dh__inner {
    max-width: var(--wide); height: 100%; margin: 0 auto;
    padding: 0 var(--gutter);
    display: flex; align-items: center; gap: 36px;
  }
  .dh__brand { flex: none; display: block; }
  .dh__brand img { width: 152px; height: auto; }
  .dh__nav { display: flex; align-items: center; gap: 2px; }
  .dh__link {
    padding: 11px 15px; border-radius: 999px;
    font: 500 15px/1 var(--sans); color: var(--ink-70);
    transition: background-color .15s ease, color .15s ease;
  }
  .dh__link:hover { color: var(--ink); background: var(--ink-06); }
  .dh__link[aria-current="page"] {
    color: var(--ink); font-weight: 600;
    background: var(--white); box-shadow: 0 0 0 1px var(--ink-10), 0 4px 12px -8px rgba(20,50,46,.4);
  }
  .dh__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
  .dh__saved, .dh__lang {
    display: inline-flex; align-items: center; gap: 7px;
    min-height: var(--tap); padding: 0 15px; border-radius: 999px;
    font: 600 14px/1 var(--sans); color: var(--ink);
    border: 1px solid var(--ink-14); background: var(--white);
  }
  .dh__saved:hover, .dh__lang:hover { color: var(--ink); border-color: var(--ink-45); }
  .dh__heart { color: var(--terracotta); font-size: 17px; line-height: 1; }
  .dh__contact { min-height: var(--tap); padding: 0 22px; font-size: 14.5px; }

  /* Pages that had their own top-of-page controls lose the duplicates. */
  .searchbar__lang { display: none; }

  /* -------------------------------------------------------------- footer */
  .dfoot { display: block; margin-top: 96px; background: var(--ink); color: var(--paper-60); }
  .dfoot__inner {
    max-width: var(--wide); margin: 0 auto; padding: 72px var(--gutter) 56px;
    display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 48px;
  }
  .dfoot__brand img { width: 168px; height: auto; }
  .dfoot__brand p { margin: 22px 0 26px; max-width: 360px; font: 400 15.5px/1.65 var(--sans); color: var(--paper-60); }
  .dfoot__cta { display: flex; gap: 10px; flex-wrap: wrap; }
  .dfoot__title {
    margin: 4px 0 18px;
    font: 600 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--marigold);
  }
  .dfoot__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
  .dfoot__col a { font: 400 15.5px/1.3 var(--sans); color: rgba(250, 246, 240, .82); }
  .dfoot__col a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
  .dfoot__base {
    max-width: var(--wide); margin: 0 auto; padding: 22px var(--gutter) 34px;
    border-top: 1px solid rgba(250, 246, 240, .12);
    display: flex; gap: 22px; font: 400 13.5px/1 var(--sans);
  }
  .dfoot__base a { color: var(--paper-60); }
  .dfoot__base a:hover { color: var(--white); }

  /* ---------------------------------------------------------------- home */
  /* The hero spans the window; its contents line up with the page. */
  .hero {
    height: min(80vh, 700px); min-height: 560px;
    margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  }
  .hero__img { object-position: 50% 58%; }
  .hero__scrim {
    background:
      linear-gradient(90deg, rgba(20, 50, 46, .82) 0%, rgba(20, 50, 46, .5) 42%, rgba(20, 50, 46, .08) 78%),
      linear-gradient(180deg, rgba(20, 50, 46, .25) 0%, rgba(20, 50, 46, 0) 30%, rgba(20, 50, 46, .45) 100%);
  }
  .hero__top { display: none; }  /* the header carries logo, contact, language */
  .hero__inner { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter) 84px; justify-content: flex-end; }
  .hero__bottom { gap: 30px; max-width: 760px; }
  .hero__headline { font-size: clamp(56px, 5.6vw, 82px); line-height: .98; max-width: 760px; letter-spacing: -.02em; }
  .searchentry {
    min-height: 72px; padding: 0 10px 0 26px; border-radius: 20px;
    font-size: 17.5px; max-width: 680px;
    box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .55);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .searchentry:hover { transform: translateY(-2px); box-shadow: 0 30px 70px -18px rgba(0, 0, 0, .6); color: var(--ink-55); }
  .dx.searchentry__go {
    display: inline-flex; align-items: center; margin-left: auto;
    min-height: 54px; padding: 0 30px; border-radius: 14px;
    background: var(--terracotta); color: var(--white); font: 600 16px/1 var(--sans);
  }
  .dx.hero__stats { display: flex; gap: 10px; flex-wrap: wrap; }
  .hero__stats a {
    display: inline-flex; align-items: baseline; gap: 7px;
    padding: 10px 16px; border-radius: 999px;
    background: rgba(250, 246, 240, .12); border: 1px solid rgba(250, 246, 240, .22);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: rgba(250, 246, 240, .82); font: 500 14.5px/1 var(--sans);
    transition: background-color .15s ease;
  }
  .hero__stats a:hover { background: rgba(250, 246, 240, .22); color: var(--white); }
  .hero__stats b { font: 400 22px/1 var(--serif); color: var(--white); }

  /* "New this week" and other rails become grids: no sideways scrolling
     with a mouse. */
  .railrow {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px; overflow: visible; scroll-snap-type: none;
  }
  .card--rail { width: auto; }
  .card { transition: transform .2s ease, box-shadow .2s ease; }
  .card:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -22px rgba(20, 50, 46, .55); }
  .card__media img { transition: transform .5s ease; }
  .card:hover .card__media img { transform: scale(1.035); }

  /* Categories and colonias side by side. */
  .home-browse {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px;
    padding: 0 var(--gutter);
  }
  .home-browse__col { display: block; }
  .home-browse .section-head, .home-browse .catgrid, .home-browse .coloniagrid { padding-left: 0; padding-right: 0; }
  .home-browse .catgrid, .home-browse .coloniagrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cat, .colonia { min-height: 76px; padding: 0 20px; transition: border-color .15s ease, box-shadow .15s ease; }
  .cat:hover, .colonia:hover { border-color: var(--ink-45); box-shadow: 0 12px 26px -18px rgba(20, 50, 46, .6); }
  .cat__name, .colonia__name { font-size: 16.5px; }
  .cat__count, .colonia__count { font-size: 13px; }

  /* Webcam beside the market update and the numbers. */
  /* Two rows: the webcam's heading, then the cards — so both columns start
     level with the webcam picture, not with its heading. */
  .home-trio {
    display: grid; grid-template-columns: 1.45fr 1fr; grid-template-rows: auto 1fr; gap: 0 32px;
    padding: 0 var(--gutter);
  }
  .home-trio__cam { display: contents; }
  .home-trio__cam > .section-head { grid-column: 1; grid-row: 1; }
  .home-trio__cam > .webcamcard { grid-column: 1; grid-row: 2; margin-top: 12px; }
  .home-trio__side { grid-column: 2; grid-row: 2; margin-top: 12px; display: flex; flex-direction: column; gap: 24px; }
  .home-trio .section-head { padding-left: 0; padding-right: 0; }
  .home-trio .webcamcard, .home-trio .postcard--featured, .home-trio .pulse { margin-left: 0; margin-right: 0; }
  .home-trio .postcard--featured { margin-top: 0; padding: 26px 26px 24px; flex: 1; justify-content: center; }
  .home-trio .postcard__title { font-size: 26px; line-height: 1.15; }
  .home-trio .pulse { margin-top: 0; padding: 28px; }
  .home-trio .pulse__stat b { font-size: 40px; }

  .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .quote { padding: 26px 26px 22px; }
  .quote__text { font-size: 19px; line-height: 1.45; }

  /* -------------------------------------------------------- search, rentals */
  .searchbar {
    position: static;
    padding: 28px var(--gutter) 0;
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    border-bottom: 0;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 14px 20px; align-items: center;
  }
  .searchbar > * { margin: 0 !important; }
  .searchbar__row { grid-column: 1; }
  .searchbar .segmented--mode { grid-column: 2; grid-row: 1; }
  .searchbar > .segmented:not(.segmented--mode) { grid-column: 1 / -1; max-width: 520px; }
  .searchbar .filterbar { grid-column: 1 / -1; }
  .searchfield { min-height: 56px; border-radius: 16px; }

  /* With the filter sidebar loaded (desk.js), results and filters sit side by
     side and the phone's filter button and chips step aside. */
  .search-layout:has(.searchside.is-ready) {
    display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 0 36px;
    padding: 0 var(--gutter); align-items: start;
  }
  .search-layout:has(.searchside.is-ready) .search-main { display: block; min-width: 0; }
  .search-layout:has(.searchside.is-ready) .resultbar,
  .search-layout:has(.searchside.is-ready) .cardlist,
  .search-layout:has(.searchside.is-ready) .pager,
  .search-layout:has(.searchside.is-ready) .empty { padding-left: 0; padding-right: 0; }
  .shell:has(.searchside.is-ready) .filterbar { display: none; }
  .search-main.is-loading { opacity: .45; transition: opacity .15s ease; pointer-events: none; }

  .dx.searchside.is-ready {
    display: block;
    position: sticky; top: calc(var(--dh) + 20px);
    margin-top: 20px;
    max-height: calc(100vh - var(--dh) - 40px); overflow-y: auto; overscroll-behavior: contain;
    background: var(--white); border: 1px solid var(--ink-10); border-radius: 22px;
    box-shadow: 0 18px 40px -28px rgba(20, 50, 46, .5);
    scrollbar-width: thin;
  }
  .searchside .sheet { padding: 22px 22px 0; gap: 22px; }
  .searchside .sheet__actions { position: sticky; bottom: 0; margin: 4px -22px 0; padding: 14px 22px 18px; border-radius: 0 0 22px 22px; }
  .searchside .chip { min-height: 38px; padding: 0 13px; font-size: 13.5px; }
  .searchside .segmented__opt { min-height: 38px; font-size: 13.5px; }

  .resultbar { padding-top: 26px; }
  .resultbar__count { font-size: 15px; }
  .cardlist { gap: 24px; }
  .search-layout:has(.searchside.is-ready) .cardlist { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* The filter page itself, when opened directly: a centred panel. */
  .sheet__head, .shell > .sheet { max-width: 720px; margin-left: auto; margin-right: auto; }
  .shell > .sheet .sheet__actions { position: sticky; bottom: 0; }

  /* ------------------------------------------------------------- listing */
  /* Gallery: a mosaic of the first five photos; any of them opens the
     full-screen viewer (desk.js). */
  .gallery {
    max-width: calc(var(--wide) - 2 * var(--gutter));
    margin: 28px auto 0; border-radius: 24px; overflow: hidden; background: none;
  }
  .gallery__track {
    display: grid; aspect-ratio: auto; height: min(60vh, 560px); min-height: 420px;
    grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px;
    overflow: hidden; scroll-snap-type: none;
  }
  .gallery__slide { width: auto; min-width: 0; min-height: 0; overflow: hidden; cursor: zoom-in; background: var(--ink-06); }
  .gallery__slide:first-child { grid-row: 1 / span 2; }
  .gallery__slide:nth-child(n+6) { display: none; }
  .gallery__slide img { transition: transform .6s ease, filter .3s ease; }
  .gallery__slide:hover img { transform: scale(1.03); filter: brightness(.94); }
  /* Fewer than five photos: one even row instead of holes. */
  .gallery__track:not(:has(> :nth-child(5))) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-rows: 1fr; }
  .gallery__track:not(:has(> :nth-child(5))) .gallery__slide:first-child { grid-row: auto; }
  .gallery__track:has(> :only-child) { grid-auto-flow: row; }
  .gallery__dots, .gallery__count { display: none; }
  .gallery__back { top: 20px; left: 20px; }
  .gallery__tools { top: 20px; right: 20px; }
  .dx.gallery__all {
    display: inline-flex; align-items: center; gap: 8px;
    position: absolute; right: 20px; bottom: 20px; z-index: 3;
    min-height: var(--tap); padding: 0 18px; border-radius: 12px; cursor: pointer;
    border: 1px solid var(--ink-14); background: var(--white); color: var(--ink);
    font: 600 14px/1 var(--sans);
    box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .4);
  }
  .dx.gallery__all:hover { background: var(--paper); }

  /* Full-screen viewer. */
  html.gallery-open, html.gallery-open body { overflow: hidden; }
  .gallery.is-open {
    position: fixed; inset: 0; z-index: 200; margin: 0; max-width: none;
    border-radius: 0; background: #0b1513;
  }
  .gallery.is-open .gallery__track {
    display: flex; height: 100vh; min-height: 0; gap: 0;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  }
  .gallery.is-open .gallery__slide { display: flex; flex: none; width: 100vw; height: 100vh; align-items: center; justify-content: center; cursor: default; background: none; scroll-snap-align: center; }
  .gallery.is-open .gallery__slide img { width: 100%; height: 100%; object-fit: contain; transform: none; filter: none; }
  .gallery.is-open .gallery__count { display: inline-flex; right: 50%; translate: 50% 0; bottom: 24px; font-size: 13px; padding: 8px 14px; }
  .gallery.is-open .gallery__all, .gallery.is-open .gallery__back, .gallery.is-open .gallery__tools { display: none; }
  .dx.gallery__close { display: none; }
  .gallery.is-open .dx.gallery__close {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; top: 20px; right: 20px; z-index: 4;
    width: 48px; height: 48px; border-radius: 50%; cursor: pointer; border: 0;
    background: rgba(250, 246, 240, .14); color: var(--paper); font: 400 28px/1 var(--sans);
  }
  .gallery.is-open .dx.gallery__close:hover { background: rgba(250, 246, 240, .26); }
  .gnav {
    position: absolute; top: 50%; translate: 0 -50%; z-index: 4;
    width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(250, 246, 240, .14); color: var(--paper); font: 400 26px/1 var(--sans);
  }
  .gnav:hover { background: rgba(250, 246, 240, .26); }
  .gnav--prev { left: 24px; }
  .gnav--next { right: 24px; }
  .gallery:not(.is-open) .gnav { display: none; }

  /* Listing body beside a sticky enquiry panel. */
  .detail-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 0 64px;
    max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); align-items: start;
  }
  .detail-layout:not(:has(#enquire)) { grid-template-columns: minmax(0, 860px); justify-content: center; }
  .detail { padding: 40px 0 0; gap: 22px; }
  .detail__price b { font-size: 34px; }
  .detail__price span { font-size: 13px; }
  .detail__name { font-size: 46px; line-height: 1.06; letter-spacing: -.015em; }
  .detail__meta { display: block; margin-top: 6px; }
  .detail__price { margin-top: 16px; }
  .detail__meta { font-size: 15px; }
  .detail .prose { font-size: 16.5px; line-height: 1.75; }
  .detail .railrow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .detail .section-title { font-size: 30px; }
  .propmap { border-radius: 20px; }

  .detail-layout .sheet-overlay {
    position: sticky; top: calc(var(--dh) + 28px); inset: auto; z-index: 1;
    visibility: visible; margin-top: 40px;
  }
  .detail-layout .sheet-overlay__scrim, .detail-layout .sheet-overlay__grip, .detail-layout .sheet-overlay__close { display: none; }
  .detail-layout .sheet-overlay__panel {
    --gutter: 26px;
    position: static; transform: none; translate: none; width: auto; max-height: none;
    border-radius: 24px; background: var(--white);
    border: 1px solid var(--ink-10);
    box-shadow: 0 30px 60px -32px rgba(20, 50, 46, .45);
  }
  .detail-layout .sheet-overlay__head { padding-top: 24px; }
  .detail-layout .sheet-overlay__title { font-size: 26px; }
  .detail-layout .sheet-overlay__body { overflow: visible; padding-bottom: 24px; }
  /* On a desktop, #enquire in the URL must not freeze the page. */
  body:has(.sheet-overlay:target) { overflow: visible; }

  /* ---------------------------------------------------------------- map */
  .map-on .mappage main, .map-loading .mappage main { top: var(--dh); bottom: 0; }
  .map-on .mappage .searchbar, .map-loading .mappage .searchbar { padding: 16px var(--gutter) 14px; border-bottom: 1px solid var(--ink-10); }
  .map-on .mappage .dfoot, .map-loading .mappage .dfoot { display: none; }
  .map-on .mapsheet { width: 440px; }
  .map-on .mapview__canvas { right: 440px; }
  .map-on .mapview__card { right: 456px; }

  /* ------------------------------------------------- reading pages, forms */
  .post__title { font-size: 48px; line-height: 1.05; letter-spacing: -.015em; }
  .post__hero { border-radius: 22px; }
  .prose--editorial { font-size: 18px; line-height: 1.75; }
  .postlist { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .hublist { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .faqnav { gap: 14px; }
  .cform input[type="text"], .cform input[type="email"], .cform input[type="tel"], .cform textarea { font-size: 16px; }
}

/* Very wide screens: four listing columns once there is room. */
@media (min-width: 1440px) {
  .search-layout:has(.searchside.is-ready) .cardlist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shell:has(.cardlist):not(:has(.searchside.is-ready)) .cardlist { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .card, .card__media img, .gallery__slide img, .searchentry { transition: none !important; }
  .card:hover, .searchentry:hover { transform: none; }
  .card:hover .card__media img, .gallery__slide:hover img { transform: none; }
}

@media (min-width: 1024px) {
  .dh__count {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--terracotta); color: var(--white); font: 700 11.5px/1 var(--sans);
  }
}

@media (min-width: 1024px) {
  /* The toolbar already has For sale / For rent; the sidebar doesn't repeat it. */
  .searchside .sheet__group:has(.segmented--mode) { display: none; }
}

@media (min-width: 1024px) {
  /* Colonias A–Z: each letter's names in two columns at reading width. */
  .shell:has(.azbar) .faqlinks { columns: 2; column-gap: 48px; }
  .shell:has(.azbar) .faqlinks li { break-inside: avoid; }
  .shell:has(.azbar) .coloniagrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  /* Empty states keep a normal-sized button, centred. */
  .empty { max-width: 560px; margin: 0 auto; }
  .empty .btn { align-self: center; width: auto; min-width: 220px; }
}

/* Small desktops and iPad landscape (1024–1239px): the header tightens so
   the longer Spanish labels still fit on one line. */
@media (min-width: 1024px) and (max-width: 1239px) {
  :root { --gutter: 28px; }
  .dh__inner { gap: 18px; }
  .dh__brand img { width: 128px; }
  .dh__link { padding: 10px 10px; font-size: 14px; }
  .dh__actions { gap: 6px; }
  .dh__saved { padding: 0 12px; font-size: 0; gap: 0; }       /* heart (and count) only */
  .dh__saved .dh__heart { font-size: 18px; }
  .dh__saved .dh__count { font-size: 11.5px; margin-left: 6px; }
  .dh__contact { padding: 0 16px; }
  .detail-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 0 40px; }
}

@media (min-width: 1024px) {
  /* Room for every letter: no sideways scrolling on a desktop. */
  .azbar { flex-wrap: wrap; overflow: visible; justify-content: flex-start; top: var(--dh); }
}

@media (min-width: 1024px) {
  /* The full description, always: "Read more" is a phone affordance. */
  .readmore__text { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; max-height: none; }
  .readmore__toggle { display: none; }
}

/* Desktop: who answers — an agent, or the office when there is no person to
   show — as its own card above the enquiry panel, as the main site has it.
   It moves there from under the map. */
@media (min-width: 1024px) {
  .detail > .agentcard--office, .detail > .agentcard--agent { display: none; }
  .detail-layout .dx.agentcard {
    display: flex; flex-direction: column; margin: 0 0 16px; padding: 20px 22px;
    border-radius: 24px; background: var(--white); border: 1px solid var(--ink-10);
    box-shadow: 0 30px 60px -32px rgba(20, 50, 46, .45);
  }
}

@media (min-width: 1024px) {
  /* "Visit our office": address and phones beside the office map. */
  .dfoot__visit {
    max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter) 48px;
    display: grid; grid-template-columns: 1fr 1.6fr; gap: 40px; align-items: stretch;
  }
  .dfoot__office { padding: 30px 0 0; border-top: 1px solid rgba(250, 246, 240, .12); }
  .dfoot__office p { margin: 0 0 14px; font: 400 15.5px/1.6 var(--sans); color: var(--paper-60); }
  .dfoot__office b { color: var(--white); font-weight: 600; }
  .dfoot__office .office__phones a { color: var(--white); font-weight: 600; }
  .dfoot__office .office__where { font-size: 13.5px; }
  .dfoot__maplink { color: var(--marigold); font: 600 14.5px/1 var(--sans); }
  .dfoot__maplink:hover { color: var(--white); }
  .dfoot__map { width: 100%; height: 280px; border: 0; border-radius: 18px; filter: saturate(.85); }
}

@media (min-width: 1024px) {
  /* Room for words: Print, Alert and Save become labelled pills, like Share beside them. */
  .gallery__fav, .gallery__icon { width: auto; padding: 0 16px 0 14px; }
  .gallery__fav .actbtn__label, .gallery__icon .actbtn__label { display: inline; }
  .gallery__fav .fav__glyph { font-size: 18px; }


  /* "You might also like" spans the page below the listing and panel. */
  .detail--recs { max-width: var(--wide); margin: 32px auto 0 !important; padding: 0 var(--gutter) !important; }
  .detail--recs .railrow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  /* Result pages show their title as the page heading. */
  .shell:has(.search-layout) > .listhead {
    position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; white-space: normal;
    padding: 36px var(--gutter) 0;
    font: 400 40px/1.1 var(--serif); letter-spacing: -.015em; color: var(--ink);
  }
  .shell:has(.search-layout) > .listhead + .searchbar, .shell:has(.search-layout) > .listhead ~ div > .searchbar { padding-top: 18px; }
}

/* ------------------------------------------------------------- map pins
   Tablet and desktop: a brand-green tag with a house icon and a pointer whose
   tip sits exactly on the house. map.js centres each pin on its point, so the
   tag is lifted by half its height plus the pointer (16 + 8px). */
.mpin {
  height: 32px; padding: 0 12px 0 30px; margin-top: -24px;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAF6F0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V20h14V9.5'/%3E%3C/svg%3E") no-repeat 10px 50% / 15px 15px;
  color: var(--white);
  box-shadow: 0 3px 10px -2px rgba(20, 50, 46, .55), 0 0 0 2px var(--white);
  transition: background-color .12s ease, transform .12s ease;
}
.mpin::before {
  content: ""; position: absolute; left: 50%; bottom: -7px; margin-left: -7px;
  border: 7px solid transparent; border-bottom: 0; border-top-color: var(--ink);
  filter: drop-shadow(0 2px 1px rgba(20, 50, 46, .25));
}
.mpin:hover { background-color: var(--terracotta-dark); z-index: 3; }
.mpin:hover::before { border-top-color: var(--terracotta-dark); }
.mpin--on { background-color: var(--terracotta); color: var(--white); z-index: 4; }
.mpin--on::before { border-top-color: var(--terracotta); }

/* Tablet and desktop: all four stats on one row. */
.stats:has(> :nth-child(3)) { grid-template-columns: repeat(4, minmax(0, max-content)); }
@media (min-width: 1024px) {
  .alertcta { width: fit-content; max-width: 100%; margin: 14px 0 0; }
  .search-layout:not(:has(.searchside.is-ready)) .alertcta { margin: 14px var(--gutter) 0; }
  .alertrow { flex-direction: row; align-items: center; justify-content: space-between; }
  .alertrow__actions { flex: none; min-width: 240px; }
}