/* ------------------------------------------------------------------ */
/* Destination detail — shared MOBILE density layer (EN + AR).         */
/*                                                                    */
/* One stylesheet for all five destination pages in both languages.    */
/* Everything here sits behind `max-width: 700px` (and a 430px tier),  */
/* so approved desktop and tablet layouts are untouched. Selectors are */
/* the template's existing shared class names — EN (`oh-*`) and AR     */
/* (`oh-ar-dd-*`) — so there are no per-destination overrides.         */
/*                                                                    */
/* Goal: shorter, denser, easier to scan. No content is removed and no */
/* value changes; only padding, gaps and the mobile type steps move.   */
/* ------------------------------------------------------------------ */
@media (max-width: 700px) {
  /* --- hero: slightly tighter, still architectural ---------------- */
  .oh-dd-hero { height: 56vh !important; min-height: 380px !important; }
  .oh-dd-hero-inner { padding: var(--space-6) var(--gutter) !important; }

  /* --- section rhythm -------------------------------------------- */
  .oh-sec-inner { padding-top: var(--space-7) !important; padding-bottom: var(--space-7) !important; }
  .oh-sec-inner-tight { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }

  /* --- overview card --------------------------------------------- */
  .oh-overview-card, .oh-ar-dd-overview-card { padding: var(--space-5) var(--space-4) !important; }
  /* ~32px between the brand plaque and DESTINATION OVERVIEW. The plaque owns
     its own compact mobile frame sizing, so it is not overridden here. */
  .oh-overview-grid, .oh-ar-dd-overview-grid { gap: var(--space-5) !important; }
  .oh-overview-body, .oh-ar-dd-overview-body { font-size: 14.5px !important; }
  .oh-overview-body { line-height: 1.5 !important; }
  .oh-ar-dd-overview-body { line-height: 1.75 !important; }
  .oh-overview-h, .oh-ar-dd-overview-h { margin-bottom: var(--space-3) !important; }
  .oh-overview-eyebrow, .oh-ar-dd-overview-eyebrow { margin-bottom: 8px !important; }
  .oh-overview-spacer, .oh-ar-dd-overview-spacer { height: var(--space-4) !important; }

  /* --- fact cards ------------------------------------------------- */
  .oh-facts-col, .oh-ar-dd-facts-col { gap: 8px !important; }
  .oh-fact-card, .oh-ar-dd-fact-card { padding: 9px 12px !important; gap: 10px !important; }
  .oh-fact-label, .oh-ar-dd-fact-card .oh-fact-label { font-size: 11px !important; }
  .oh-fact-value, .oh-ar-dd-fact-card .oh-fact-value { font-size: 15px !important; line-height: 1.3 !important; }
  .oh-fact-icon svg, .oh-ar-dd-fact-card svg { width: 18px; height: 18px; }

  /* --- commercial highlights ------------------------------------- */
  .oh-highlights-grid, .oh-ar-dd-highlights-grid { gap: 10px !important; }
  .oh-highlight-item, .oh-ar-dd-highlight-item { padding: var(--space-4) !important; }
  .oh-highlight-num, .oh-ar-dd-highlight-num { font-size: 11px !important; margin-bottom: 6px !important; }
  .oh-highlight-title, .oh-ar-dd-highlight-title { font-size: 15px !important; margin-bottom: 4px !important; }
  .oh-highlight-body { font-size: 14px !important; line-height: 1.45 !important; }
  .oh-ar-dd-highlight-body { font-size: 14px !important; line-height: 1.7 !important; }
  .oh-highlights-head, .oh-ar-dd-highlights-head { margin-bottom: var(--space-5) !important; }

  /* --- amenities & anchor ---------------------------------------- */
  .oh-amenity-cluster, .oh-ar-dd-amenity-cluster { gap: 10px !important; margin-top: 10px !important; }
  .oh-amenity-card, .oh-ar-dd-amenity-card { padding: var(--space-4) !important; }
  .oh-amenity-icon, .oh-ar-dd-amenity-icon { width: 30px !important; height: 30px !important; margin-bottom: 10px !important; }
  .oh-amenity-icon svg, .oh-ar-dd-amenity-icon svg { width: 18px; height: 18px; }
  .oh-amenity-title, .oh-ar-dd-amenity-title { font-size: 15px !important; margin-bottom: 4px !important; }
  .oh-amenity-body { font-size: 13.5px !important; line-height: 1.42 !important; }
  .oh-ar-dd-amenity-body { font-size: 13.5px !important; line-height: 1.65 !important; }
  .oh-anchor-banner, .oh-ar-dd-anchor-banner { padding: 18px 20px !important; }
  .oh-anchor-icon svg, .oh-ar-dd-anchor-icon svg { width: 22px; height: 22px; }
  .oh-anchor-name, .oh-ar-dd-anchor-name { font-size: 15.5px !important; }
  .oh-anchor-body { font-size: 13.5px !important; line-height: 1.42 !important; }
  .oh-ar-dd-anchor-body { font-size: 13.5px !important; line-height: 1.65 !important; }
  .oh-amenities-intro-body, .oh-ar-dd-amenities-intro-body { font-size: 14.5px !important; }

  /* --- section intros: less air before the content ---------------- */
  .oh-sec-intro-h { margin-bottom: var(--space-3) !important; }
  .oh-sec-intro-support { font-size: 14.5px !important; line-height: 1.5 !important; margin-bottom: var(--space-5) !important; }
  .oh-ar-dd-sec-support { font-size: 14.5px !important; margin-bottom: var(--space-5) !important; }

  /* --- location -------------------------------------------------- */
  .oh-location-grid, .oh-ar-dd-location-grid { gap: var(--space-5) !important; }

  /* --- leasing band ---------------------------------------------- */
  .oh-leasing-grid, .oh-ar-dd-leasing-grid { gap: var(--space-5) !important; }
  .oh-leasing-body { font-size: 14.5px !important; line-height: 1.5 !important; }
  .oh-ar-dd-leasing-body { font-size: 14.5px !important; line-height: 1.75 !important; }

  /* --- related destinations: landscape crop instead of 4:5 -------- */
  /* A 4:5 portrait card ran nearly a full viewport tall on mobile;    */
  /* 4:3 lets the user scan several destinations in one scroll.        */
  .oh-dcard-media, .oh-ar-card-media { aspect-ratio: 4 / 3 !important; }
  .oh-related-grid, .oh-ar-dd-related-grid { gap: var(--space-6) !important; }
}
@media (max-width: 430px) {
  .oh-dd-hero { min-height: 340px !important; }
  .oh-overview-body, .oh-ar-dd-overview-body { font-size: 14px !important; }
}