/* Arabia Residence — desktop polish pass (Enhancement 07). Loaded after Tailwind + mobile-pass.
   Visual only. Each block names what it replaces. Applies at ≥1024px only. */
@media (min-width: 1024px) {

  /* --- 1. Section rhythm: py-16 / lg:py-20 / lg:py-24 / lg:py-28 mixed per section → one 88px scale.
         Hero (#hero-weave) and the host CTA keep their own padding. */
  body > section:has(> * > h2, > * > * > h2):not(#hero-weave):not([class*="hero"]):not(#chips-wrap):not(#results-header), main > section:has(> * > h2, > * > * > h2):not([class*="hero"]) { padding-top: 88px !important; padding-bottom: 88px !important; }

  /* --- 2. Heading scale: section H2s were 30–48px with −0.02…−0.035em tracking → 36px / −0.02em.
         Sub-title under an H2: one style. */
  section h2.text-3xl, section h2.text-4xl, section h2.lg\:text-4xl, section h2.lg\:text-5xl, section h2[class*="text-3xl"], section h2[class*="text-4xl"] { font-size: 36px !important; line-height: 1.2 !important; letter-spacing: -0.02em !important; font-weight: 700 !important; }
  section h2 + p { font-size: 17px !important; line-height: 1.6 !important; color: #46506A !important; margin-top: 10px !important; }

  /* --- 3. One card: Home featured / Explore results / You may also like. */
  .property-card, #results-grid > article, #results-grid > a, .similar-card, [class*="listing-card"] { border-radius: 16px !important; border: 1px solid #ECEFF3 !important; box-shadow: 0 14px 34px rgba(16,28,50,0) !important; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease !important; background: #fff; }
  .property-card:hover, #results-grid > article:hover, #results-grid > a:hover, .similar-card:hover, [class*="listing-card"]:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(16,28,50,0.12) !important; }
  .property-card img, #results-grid img, .similar-card img { aspect-ratio: 4 / 3; object-fit: cover; }

  /* --- 4. Primary buttons: 44–56px tall, 8–14px radius → 48px / 12px / 15px semibold. */
  /* Founder, 2026-09-11: limited to links and buttons. The class-only selectors also matched decorative spans such as
     the 6px "Coming soon" dot on Experiences, turning it into a 48px green square. */
  .btn-primary, a.bg-brand-green, button.bg-brand-green, a.bg-brand-green.rounded-lg, button.bg-brand-green.rounded-lg, a.bg-brand-green.rounded-xl, button.bg-brand-green.rounded-xl, a.bg-brand-green.rounded-full, button.bg-brand-green.rounded-full { min-height: 48px !important; border-radius: 12px !important; font-size: 15px !important; font-weight: 600 !important; padding-left: 24px !important; padding-right: 24px !important; display: inline-flex !important; align-items: center; justify-content: center; }

  /* --- 5. Property booking card: same radius/shadow language as listing cards. */
  .booking-card, .booking-card-wrap > div { border-radius: 16px !important; box-shadow: 0 14px 34px rgba(16,28,50,0.10) !important; border: 1px solid #ECEFF3 !important; }
  .booking-card .bk-field, #bk-checkin-btn, #bk-checkout-btn, #bk-guests-btn { border-radius: 12px !important; }

  /* --- 6. Footer: columns to container width; payment logos one row, 28px tall. */
  footer .grid.grid-cols-2.md\:grid-cols-4 { column-gap: 48px !important; }
  footer .pay-logos, footer [class*="payment"] { display: flex !important; flex-wrap: nowrap !important; gap: 20px !important; align-items: center; }
  footer .pay-logos img, footer [class*="payment"] img { height: 28px !important; width: auto !important; }
}