/* -- Floating Action Button v2 (glow-pulse, 72/64px, badge) -- */
    /* Badge placeholder (hidden by default, for future AI-chat count) */
/* About page responsive — mobile only, desktop not touched */
/*# sourceURL=wp-img-auto-sizes-contain-inline-css */
/*# sourceURL=/wp-includes/css/dist/block-library/common.min.css */
/*# sourceURL=global-styles-inline-css */
    
/*# sourceURL=uaeprop-interactions-inline-css */
/* Contact page: ITI phone flag selector dark-mode override */
    /* input.is-invalid highlight */

    /* Contact page responsive — mobile only */
@font-face{ font-family:Fraunces;font-style:normal;font-weight:300 700;font-display:swap;src:url('/fonts/fraunces-latin.woff2') format('woff2'); }
@font-face{ font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-sans-400-latin.woff2') format('woff2'); }
@font-face{ font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-sans-500-latin.woff2') format('woff2'); }
@font-face{ font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/ibm-plex-sans-700-latin.woff2') format('woff2'); }
@font-face{ font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/jetbrains-mono-500-latin.woff2') format('woff2'); }
/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; }
.up-comm-page { font-family: 'IBM Plex Sans', sans-serif; background: var(--wp--preset--color--bg-light); color: var(--wp--preset--color--ink); }

/* ── Breadcrumb ── */
.up-comm-crumb {
  height: 40px; line-height: 40px; min-height: 40px;
  display: flex; align-items: center;
  padding: 0 max(80px, calc((100% - 1280px) / 2));
  border-bottom: 1px solid rgba(14,14,16,0.08);
  background: var(--wp--preset--color--bg-light);
}
.up-comm-crumb ol { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.up-comm-crumb a { font-size: 13px; color: rgba(14,14,16,0.6); text-decoration: underline; font-family: 'IBM Plex Sans', sans-serif; }
.up-comm-crumb a:hover { color: var(--wp--preset--color--ink); }
.up-comm-crumb .sep { margin: 0 6px; color: rgba(14,14,16,0.4); font-size: 13px; }
.up-comm-crumb .current { font-size: 13px; color: rgba(14,14,16,0.85); font-family: 'IBM Plex Sans', sans-serif; }

/* ── Page header ── */
.up-comm-header {
  background: var(--wp--preset--color--bg-light);
  padding: 40px max(80px, calc((100% - 1280px) / 2));
  min-height: 202px;
  display: flex; flex-direction: column; justify-content: center;
}
.up-comm-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.96px; text-transform: uppercase;
  color: rgba(14,14,16,0.6);
  margin: 0 0 16px;
}
.up-comm-h1 {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  color: var(--wp--preset--color--ink);
  margin: 0 0 24px;
}
.up-comm-subhead {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 18px; line-height: 1.5;
  color: rgba(14,14,16,0.7);
  margin: 0;
}

/* ── Filters bar ── */
.up-comm-filters {
  background: var(--wp--preset--color--bg-light);
  padding: 20px max(80px, calc((100% - 1280px) / 2));
  min-height: 80px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.up-comm-filter-pills { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.up-comm-pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 18px;
  border: none;
  border-radius: 999px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px; font-weight: 500;
  color: var(--wp--preset--color--ink);
  background: #fff;
  min-width: 140px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  line-height: 1;
}
.up-comm-pill:hover,
.up-comm-pill.active {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--cream);
}

/* ── Emirate section ── */
.up-comm-emirate-section {
  padding: 40px max(80px, calc((100% - 1280px) / 2));
  background: var(--wp--preset--color--bg-light);
  border-top: 1px solid rgba(14,14,16,0.06);
}
.up-comm-emirate-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 32px;
}
.up-comm-emirate-header-left {}
.up-comm-emirate-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 500;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--wp--preset--color--bg-dark);
  display: block; margin-bottom: 8px;
}
.up-comm-emirate-h2 {
  font-family: 'Fraunces', serif;
  font-size: 36px;
  font-weight: 400;
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  color: var(--wp--preset--color--ink);
  margin: 0;
  line-height: 1.1;
}
.up-comm-view-all {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 18px; font-weight: 500;
  color: var(--wp--preset--color--ink);
  text-decoration: underline;
  white-space: nowrap;
  line-height: 1;
  padding-bottom: 4px; /* align baseline with H2 */
}
.up-comm-view-all:hover { opacity: 0.7; }

/* ── District card grid ── */
/* 24.08 Mikhail: "на iPad 13 дюймов справа нет отступа" — live-measured: 3
   fixed 416px cards + 2×32px gaps = 1312px, but the content rail this
   section sits in (.up-comm-emirate-section's own `max(80px,
   calc((100%-1280px)/2))` padding) only ever provides exactly 1280px of
   usable width at ANY viewport >=1440px (that's the formula's whole
   point — a fixed-width centered rail). 1312 > 1280 always, on every
   desktop width, not just 13" — at 1920px this overflows the grid's own
   box by 32px, invisible only because it lands in that width's huge
   316px+ margin; at 1366-1439px the same 32px overflow has nowhere to
   go (near-zero margin at that width) and spills past the viewport
   itself, creating real horizontal page scroll. The `@media(max-width:
   1340px)` block below already had the correct fix (fluid `minmax(0,1fr)`
   columns) for narrower widths — this just makes that the unconditional
   base behavior instead of a narrow-range patch, so it's correct at
   every width the fixed-416px design was quietly wrong at, desktop
   included. */
.up-comm-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

/* ── District card ── */
.up-comm-card {
  display: block;
  width: 100%;
  height: 280px;
  border-radius: 16px;
  overflow: clip;
  text-decoration: none;
  color: var(--wp--preset--color--ink);
  position: relative;
  flex-shrink: 0;
}
.up-comm-card:hover .up-comm-card-info { background: #ede9e0; }
.up-comm-card-photo {
  width: 100%; height: 180px;
  background: var(--wp--preset--color--bg-dark);
  object-fit: cover;
  display: block;
  border-radius: 16px 16px 0 0;
}
.up-comm-card-photo-placeholder {
  width: 100%; height: 180px;
  background: var(--wp--preset--color--bg-dark);
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px 16px 0 0;
}
.up-comm-card-photo-placeholder span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.88px; text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.up-comm-card-info {
  width: 100%; height: 100px;
  background: #F6F2EA;
  border-radius: 0 0 16px 16px;
  padding: 20px 16px 14px;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: background 0.15s;
}
.up-comm-card-row-top {
  display: flex; align-items: baseline; justify-content: space-between;
}
.up-comm-card-name {
  font-family: 'Fraunces', serif;
  font-size: 22px; font-weight: 400;
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  color: var(--wp--preset--color--ink);
  line-height: 1.2;
  flex: 1;
  min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.up-comm-card-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.88px; text-transform: uppercase;
  color: #6B6B6B;
  white-space: nowrap;
  margin-left: 12px;
  flex-shrink: 0;
}
.up-comm-card-link {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px; color: #666;
  display: block;
}

/* ── Empty state ── */
.up-comm-empty {
  padding: 40px 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 0.88px; text-transform: uppercase;
  color: #6B6B6B;
}

/* ── Responsive ── */
/* 24.08: the old @media(max-width:1340px) block that lived here (fluid
   grid-template-columns + width:100% on the 4 card selectors) is now
   dead — removed, not left as a harmless duplicate — the base rules
   above already do exactly this unconditionally (see the 24.08 comment
   on .up-comm-grid). Kept as a comment marker rather than silently
   vanishing so a future grep for "1340" still finds an explanation. */
/* 961-1439px tablet tier (25.08 sweep — Class B, missing-tablet-tier bug pattern per
   wiki/synthesis/2026-08-25_uaeprop_tablet_padding_bug_patterns.md): live-verified at
   1024px .up-comm-header was still 80px — the base rule's max(80px, calc(...)) formula
   is a floor, it never shrinks below 80px on its own, and this file's next tier was
   <=960px with nothing above it. 48px matches the sitewide tablet-padding canon. */
@media (min-width:961px) and (max-width:1439px) {
  .up-comm-header,
  .up-comm-filters,
  .up-comm-emirate-section { padding-left: 48px; padding-right: 48px; }
  .up-comm-crumb { padding: 0 48px; }
}
@media (max-width: 960px) {
  .up-comm-header,
  .up-comm-filters,
  .up-comm-emirate-section { padding-left: 20px; padding-right: 20px; }
  .up-comm-crumb { padding: 0 20px; }
  .up-comm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .up-comm-emirate-header { flex-direction: column; align-items: flex-start; gap: 12px; }
}
/* ── Mobile design pass (390/430/768), per specs/MOBILE_DESIGN_CANON_20260817.md ── */
@media (max-width: 768px) {
  /* Hero: hug content instead of desktop's vertical-center min-height,
     tighter padding, smaller subhead so it doesn't crowd the H1 at narrow widths */
  .up-comm-header {
    padding: 32px 24px 28px;
    min-height: 0;
  }
  .up-comm-subhead { font-size: 16px; }
  .up-comm-filters { padding: 16px 24px; min-height: 0; }
  .up-comm-emirate-section { padding: 36px 24px; }
  .up-comm-emirate-header { margin-bottom: 20px; }
  /* W2_intracard: vertical-only pad (10px 0), not a rail deviation — this is a
     LARGER tap area than the previous 4px, not a full WCAG 44px target (18px
     font + line-height:1 + 10px top/bottom ≈ 38px total, still short of 44px;
     no display/min-height/align-items set here either) — correcting an
     overclaim caught by external review 19.08, this comment previously implied
     WCAG-compliance it doesn't reach. Fixing to a real 44px target is a
     separate, un-started touch-target task, not part of this pass.
     .up-comm-view-all is a plain text link nested inside .up-comm-emirate-header,
     which itself has no side-padding; the rail (24px @768) lives on the ancestor
     rule `.up-comm-emirate-section { padding: 36px 24px; }` earlier in this same
     @media block (grep `.up-comm-emirate-section {` in this file — no line number
     cited here on purpose, lines shift as this file is edited). Live-verified
     19.08: link left-edge sits flush at the 24/20px rail with no extra indent needed. */
  .up-comm-view-all { padding: 10px 0; } /* was 4px baseline-align pad — column layout on mobile doesn't need it, use the room for a bigger tap target */
  .up-comm-crumb { padding: 0 24px; }

  /* Card grid: desktop's 32px gap wastes width on narrow screens — mobile scale is 16px */
  .up-comm-grid { gap: 16px; }

  /* Card photo was a hardcoded 180px height tuned for the 416px desktop card —
     as the card narrows across breakpoints that produces an inconsistent crop.
     Switch to a fixed aspect ratio so the crop reads the same at any card width,
     and let the card's total height be content-driven instead of desktop's
     hardcoded 280px (which was starting to clip/misalign info text on narrow cards). */
  .up-comm-card { height: auto; }
  .up-comm-card-photo,
  .up-comm-card-photo-placeholder {
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .up-comm-card-info {
    height: auto;
    min-height: 92px;
    padding: 16px 14px 12px;
  }
  /* Touch devices have no :hover — mirror the same feedback on :active for tap */
  .up-comm-card:active .up-comm-card-info { background: #ede9e0; }

  /* 7 emirate pills wrapping into 3-4 rows (flex-wrap) reads as a broken menu
     and eats a lot of vertical space before the actual content starts — switch
     to a single-row horizontal scroll with an edge-fade affordance, the same
     horizontal-scroll idiom already used sitewide for card carousels.
     24.08 Mikhail: "надо слева сделать тоже отступ как везде" — live-measured
     root cause: the original `margin:0 -24px; padding:2px 24px 6px` bleed
     trick (pull past the parent's own 24px padding, then re-add it as this
     element's OWN padding) is mathematically correct on paper, but Chromium/
     WebKit don't render a horizontally-SCROLLING flex container's own
     leading padding as visible space at rest — they silently initialize
     `scrollLeft` to the padding value instead (confirmed live: `scrollLeft`
     was 24 on page load, i.e. already scrolled exactly past the padding
     that was supposed to create the gap), so the first pill rendered flush
     at x=0 regardless of the 24px padding being genuinely present in the
     computed styles. This is a known class of bug for padding on the
     scrolling element itself, not a mis-typed number. Fix: don't bleed past
     the parent at all — .up-comm-filters already has its own 24px/20px/14px
     padding at each tier (matching .up-comm-header exactly), and parent
     padding on a non-scrolling ancestor is never subject to this bug, so
     removing the negative margin + horizontal padding here and just letting
     the row sit inside that padding normally reproduces the same rail
     alignment reliably. Matches the codebase's own other working carousel
     (.up-offplan__row, wp-inline.css) which never attempted this bleed
     trick — that one also just sits inside its section's normal padding. */
  .up-comm-filter-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding: 2px 0 6px;
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  }
  /* Review caught a real regression in the fix above: removing padding-right
     along with padding-left (both were part of the same buggy bleed trick)
     also removed the ONLY thing giving the LAST pill breathing room at full
     scroll — live-verified it landed flush at the container's own right
     edge, 0px clearance, with the permanent fade mask sitting on top of it.
     Tried plain `padding-right` as a fix first — live-tested and it did NOT
     work either (same scroll-container-padding unreliability, this time on
     the trailing/max-scroll-position side, not just the leading one). A
     genuine flex item is immune to that ambiguity since it's real scrollable
     content, not box-model padding on the scroller itself — added via
     ::after so no markup change is needed. */
  .up-comm-filter-pills::after {
    content: '';
    flex: 0 0 24px;
  }
  .up-comm-pill { scroll-snap-align: start; }
}
@media (max-width: 480px) {
  .up-comm-header { padding: 28px 20px 24px; }
  .up-comm-filters { padding: 14px 20px; }
  .up-comm-emirate-section { padding: 32px 20px; }
  .up-comm-crumb { padding: 0 20px; }
  /* 24.08: a .up-comm-grid::after{flex-basis:20px} override used to live
     here — dead on arrival. This @media(480px) block sits BEFORE the
     @media(600px) block later in this file (source order in this file is
     960->768->480->600, not strictly descending), and both blocks match
     any viewport <=480px — the LATER 600px block's `flex:0 0 24px` shorthand
     (which also resets flex-basis) always wins there, so the override never
     actually applied at any width. Caught by 3-model code review (all 3
     independently flagged it, including that the live-measured 24px-not-20px
     clearance already proved this before it was fixed — should have been
     caught at verification time, not just by review). Real fix: a NEW
     @media(480px) block placed AFTER the 600px block (see the end of this
     file) — same selectors, but now genuinely later in source, so it wins
     the cascade for real instead of by (broken) assumption. */
}
@media (max-width: 600px) {
  /* 24.08 Mikhail: "для мобильной версии сделать карусель из коммьюнити по
     каждому эмирату а то очень длинный список получился" — Dubai alone has
     125 communities; a single-column vertical stack (the previous rule
     here) meant scrolling past 125 full-width cards before reaching the
     next emirate section. Switched to a horizontal scroll-snap row, one
     per .up-comm-emirate-section (no markup change needed — each emirate
     already has its own separate .up-comm-grid). Card width 300px matches
     the sitewide mobile-carousel convention (.up-desk__card, wp-inline.css)
     rather than inventing a new number. Deliberately NOT bleeding this
     container to the viewport edge with its own padding — the pills-row
     fix directly above this same file found that padding on a horizontally
     -SCROLLING element gets silently eaten by the browser's initial
     scrollLeft (Chromium/WebKit both do this), not rendered as a visible
     gap. This container instead just sits inside .up-comm-emirate-section's
     own existing padding (24px at this tier, 20px at <=480px) — parent
     padding on a non-scrolling ancestor was already proven reliable by the
     same pills fix, so the first card lines up with the rail with zero
     risk of the padding-eating bug recurring here. */
  .up-comm-grid {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .up-comm-card {
    flex: 0 0 300px;
    width: 300px;
    scroll-snap-align: start;
  }
  /* Same lesson as .up-comm-filter-pills::after in this same file: the
     leading edge is fine (uses the parent section's own padding, not this
     scroller's), but the LAST card at full scroll needs its own real flex
     item for trailing space — the parent's padding doesn't reach it once
     scrolled past the visible window. 24px matches the >480px section
     padding; see the real @media(480px) block further down this file
     (placed AFTER this one on purpose, source-order cascade) for the
     20px override at that narrower tier. */
  .up-comm-grid::after {
    content: '';
    flex: 0 0 24px;
  }
  .up-comm-filter-pills { gap: 8px; }
  /* height bumped 36px->44px: WCAG minimum tap target (was below spec) */
  .up-comm-pill { font-size: 14px; height: 44px; padding: 0 16px; }
}
/* 24.08: deliberately a SECOND @media(max-width:480px) block, placed here
   (after the 600px block above) rather than merged into the earlier one —
   this file's blocks run 960->768->480->600, not strictly descending, so
   anything meant to override the 600px block at <=480px has to physically
   come after it in source to actually win the cascade. See the comment in
   the earlier 480px block for the full story (a same-selector override
   placed there was silently dead, caught by 3-model code review). */
@media (max-width: 480px) {
  .up-comm-grid::after { flex-basis: 20px; }
  .up-comm-filter-pills::after { flex-basis: 20px; }
}
@font-face{ 
  font-family: 'IBM Plex Sans';
  src: url('/fonts/ibm-plex-sans-500-latin.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display:swap;
 }
@font-face{ 
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-500-latin.woff2') format('woff2');
  font-weight: 400 500; font-style: normal; font-display:swap;
 }

/* ── Outer shell ── */

/* ── Logo (left) ── */

/* ── Nav wrapper — centered via flex grow trick ── */

/* ── Nav item gap: 28px between items (half each side = 14px) ── */

/* ── Top-level links / buttons ── */

/* chevron icon */

/* ── Dropdown panel ── */

/* ── Emirates flyout arrow ── */

/* ── Emirates sub-dropdown (flies right) ── */

/* ── Right side: lang switcher + CTA ── */

/* Language switcher */

/* CTA pill — edits4: enlarged to match removed float-btn (h:56px, 16px, 500) */

/* ── Mobile hamburger ── */

/* ── Mobile menu panel ── */

/* ── Responsive breakpoint ── */
@font-face{ 
  font-family: 'IBM Plex Sans';
  src: url('/fonts/ibm-plex-sans-400-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display:swap;
 }
@font-face{ 
  font-family: 'IBM Plex Sans';
  src: url('/fonts/ibm-plex-sans-500-latin.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display:swap;
 }
@font-face{ 
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-500-latin.woff2') format('woff2');
  font-weight: 400 500; font-style: normal; font-display:swap;
 }

/* ── Top row: brand left + columns right ── */

/* ── Brand block (left ~44%) ── */

/* ── 5 columns (right ~56%) — Wave-G: right-align cols block to rail edge ── */
/* Wave-G: gap handles spacing, no margin-left needed */

/* ── Bottom bar ── */

/* Lang switcher in footer bottom bar */

/* ── Responsive ── */