/* =========================================================
   property-card.css — PropertyCard T2 single page styles
   Source: _design_source/assets/css/interactions.css +
           _design_source/templates/single-property_off_plan.php inline <style>
   Do NOT import via bundler (lightningcss chokes on raw WP CSS).
   Load via: <link rel="stylesheet" href="/styles/property-card.css" is:inline />
   ========================================================= */

/* ── Design tokens (mirrors WP CSS custom properties) ── */
:root {
  --wp--preset--color--ink: #0E0E10;
  --wp--preset--color--ink-muted: #6B6963;
  --wp--preset--color--cream: #F7EDD9;
  --wp--preset--color--accent: #D28C5A;
  --wp--preset--color--bg-dark: #2D3745;
  --wp--preset--color--bg-light: #F2F0EC;
  --wp--preset--color--bg-cream-1440: #F5F3EF;
}

/* ── Font declarations (same as BaseLayout) ── */
@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@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: block;
}
@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: block;
}
@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: block;
}

/* ── Rail system ── */
.up-rail-inner { max-width: 1280px; margin: 0 auto; padding-left: 80px; padding-right: 80px; box-sizing: content-box; }
.up-section-rhythm { padding-top: 80px; padding-bottom: 80px; }

/* ── Typography helpers ── */
.t2-fraunces { font-family: 'Fraunces', serif; font-variation-settings: 'SOFT' 0, 'WONK' 1; }
.t2-ibm { font-family: 'IBM Plex Sans', sans-serif; }
.t2-mono { font-family: 'JetBrains Mono', monospace; }

/* ── Section title token (64px, clamp) ── */
.t2-section-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--wp--preset--color--ink);
  margin: 0;
  overflow: visible;
  padding-bottom: 0.06em;
}

/* ── Kicker ── */
.up-kicker {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--wp--preset--color--ink-muted);
  margin: 0 0 8px;
}

/* ── Background alternation ── */
.up-bg-odd  { background: #F2F0EC; }
.up-bg-even { background: #FFFFFF; }
.up-bg-dark { background: var(--wp--preset--color--bg-dark); }

/* ── Prop section spacing ── */
.up-prop-section { padding: 80px 0; }
/* 27.08 (Mikhail: "не верю я по отступам... AMENITIES сверху нормальный
   отступ а снизу... огромный") — root cause found live-measuring every
   section on jad-288 at 390px: this rule had ZERO responsive tiers at all,
   so EVERY .up-prop-section (Project details/About/Unit types/Amenities/
   Gallery/Location — every alternating up-bg-odd/up-bg-even block using
   THIS specific class) rendered the full 80px desktop value on mobile too.
   CORRECTED (round 3, dev_code_review caught this comment's original
   version wrongly including Payment Plan here): Payment Plan uses its own
   separate `.t2-pay-section` class, NOT this one — see that rule's matching
   fix further down this file. Matches the sitewide vertical-rhythm canon
   already used elsewhere (mortgage-help-inline.css etc: 80px desktop ->
   48px tablet+mobile, same value carried down rather than compressed
   further). */
@media (min-width: 961px) and (max-width: 1439px) {
  .up-prop-section { padding: 48px 0; }
}
@media (max-width: 960px) {
  .up-prop-section { padding: 48px 0; }
}

/* ===== 1. HERO BLOCK ===== */
.t2-hero-inner {
  background: var(--wp--preset--color--bg-dark);
}
.t2-hero-layout {
  display: flex;
  min-height: 720px;
  width: 100%;
  /* 25.08 (Mikhail, sitewide sweep): this rail had NO padding of its own —
     just max-width:1280px+margin:auto centering a fixed box, with no floor.
     Fine at >=1440px, but live-verified at 1024px the whole hero (image col
     included) sat flush at both edges (0px, not 48px like the header above
     it) — below 1280px viewport, a centered box exactly as wide as its
     container has zero margin BY DEFINITION, not a formula edge case.
     First fix attempt copied .site-rail's max-width+padding+content-box
     pattern literally (padding:0 80px on top of the existing max-width:1280)
     — wrong: that pattern only self-balances at the ONE viewport where
     max-width + 2×padding equals it exactly (1280+160=1440). At the new
     961-1439 tier's own 48px value, 1280+96=1376 — wider than a 1366px
     viewport, causing a genuine 10px overflow (live-confirmed: computed
     width:1280px, marginRight:-10px). Real fix: drop the separate
     max-width entirely and use the SAME fluid max(floor, calc(...)) padding
     formula `.up-ins-grid-section`/etc already use sitewide — content
     naturally settles at up to 1280px as padding grows with viewport, no
     fixed max-width fighting it, never overflows at any width. */
  padding: 0 max(80px, calc((100% - 1280px) / 2));
  box-sizing: border-box;
}
@media (min-width: 961px) and (max-width: 1439px) {
  .t2-hero-layout { padding: 0 48px; }
}
@media (max-width: 960px) {
  .t2-hero-layout { padding: 0; }
}

/* Hero image col (60%) — gallery slider (staging-эталон, все фото объекта) */
.t2-hero-image-col {
  width: 60%;
  min-height: 720px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.t2-hero-image-col img {
  width: 100%;
  height: 720px;
  object-fit: cover;
  display: block;
}
.t2-hero-offplan-badge {
  position: absolute;
  top: 32px;
  left: 32px;
  z-index: 6;
  background: rgba(247,237,217,0.94);
  border-radius: 999px;
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 14px;
}
.t2-hero-offplan-badge span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink);
}

/* Hero facts col (40%) */
.t2-hero-facts-col {
  width: 40%;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  background: var(--wp--preset--color--bg-dark);
  padding: 80px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.t2-hero-location {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b9b8b4;
  margin: 0 0 16px;
}
.t2-hero-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(40px, 4vw, 64px);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -1.28px;
  color: var(--wp--preset--color--cream);
  margin: 0 0 8px;
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
}
.t2-hero-dev {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  color: #b9b8b4;
  margin: 0 0 24px;
}
.t2-hero-price {
  font-family: 'Fraunces', serif;
  font-size: 28px;
  font-weight: 300;
  color: var(--wp--preset--color--cream);
  margin: 0 0 4px;
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
}
.t2-hero-price-usd {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  color: #b9b8b4;
  margin: 0 0 8px;
}
/* Payment plan phase pills (правка 1.2) */
.t2-hero-phases {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 40px;
}
.t2-hero-phase-pill {
  background: rgba(247,237,217,0.88);
  border-radius: 999px;
  padding: 6px 14px;
  white-space: nowrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.88px;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink);
  display: inline-block;
}
.t2-hero-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--ink);
  border-radius: 999px;
  width: 220px;
  height: 56px;
  text-decoration: none;
  margin-bottom: 12px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}
.t2-hero-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(247,237,217,0.5);
  color: var(--wp--preset--color--cream);
  border-radius: 999px;
  width: 220px;
  height: 48px;
  text-decoration: none;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
}

/* ===== 2. PROJECT DETAILS — staging-эталон spec-sheet grid (verified live
   2026-07-06 against uae-prop.com/staging: dl.up-attrs { grid-template-columns:
   max-content 1fr max-content 1fr }, NOT a wrapping flex cloud of big serif
   numbers — that was the "second block looks terrible" complaint). ===== */
.up-attrs--details {
  display: grid;
  grid-template-columns: max-content 1fr max-content 1fr;
  gap: 0 48px;
  margin: 0;
  padding: 0;
  align-items: stretch;
}
.up-attr {
  display: contents;
}
.up-attr__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(14,14,16,0.5);
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid rgba(14,14,16,0.08);
  align-self: center;
}
.up-attr__val {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--wp--preset--color--ink);
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid rgba(14,14,16,0.08);
  line-height: 1.4;
  align-self: center;
}
.up-attr__val-sub {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
  color: var(--wp--preset--color--ink-muted);
  margin-top: 2px;
}
@media (max-width: 1023px) {
  .up-attrs--details {
    grid-template-columns: max-content 1fr;
    gap: 0 24px;
  }
}

/* Payment methods list */
.t2-pmethods {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.t2-pmethod-tag {
  background: rgba(210,140,90,0.12);
  border: 1px solid rgba(210,140,90,0.3);
  border-radius: 4px;
  padding: 3px 10px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px;
  color: var(--wp--preset--color--ink);
}

/* ===== 3. PAYMENT PLAN ===== */
.t2-pay-section {
  background: var(--wp--preset--color--bg-dark) !important;
  padding: 80px 0;
}
/* 27.08 round 3 (dev_code_review caught this — Payment Plan uses its OWN
   class .t2-pay-section, not .up-prop-section, so the round-2 responsive
   fix above never touched it; same unresponsive-80px bug, separate rule). */
@media (min-width: 961px) and (max-width: 1439px) {
  .t2-pay-section { padding: 48px 0; }
}
@media (max-width: 960px) {
  .t2-pay-section { padding: 48px 0; }
}
/* Payment plan tabs (правка 3.1) */
.t2-pay-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.t2-pay-tab {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border: 1.5px solid rgba(247,237,217,0.4);
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  color: rgba(247,237,217,0.6);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.t2-pay-tab.active {
  background: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--ink);
}
.t2-pay-plan {
  display: none;
}
.t2-pay-plan.active {
  display: block;
}
.t2-pay-plan-subtitle {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  color: rgba(247,237,217,0.7);
  margin: 0 0 32px;
}

/* Timeline */
.t2-pay-tl {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  padding-top: 20px;
  gap: 12px;
}
.t2-pay-tl::before {
  content: '';
  position: absolute;
  top: 38px;
  left: calc(50% / var(--tl-n, 1));
  right: calc(50% / var(--tl-n, 1));
  height: 2px;
  background: rgba(210,140,90,0.3);
}
.t2-pay-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}
.t2-pay-badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--wp--preset--color--accent);
  background: var(--wp--preset--color--bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  outline: none;
  transition: background 0.18s, box-shadow 0.18s;
}
.t2-pay-badge:hover,
.t2-pay-badge:focus {
  background: rgba(210,140,90,0.15);
  box-shadow: 0 0 0 3px rgba(210,140,90,0.25);
}
.t2-pay-badge-num {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--wp--preset--color--accent);
}
.t2-pay-card {
  text-align: center;
  max-width: 128px;
  min-width: 0;
}
.up-pay-card__pct {
  font-family: 'Fraunces', serif;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.08;
  color: var(--wp--preset--color--cream);
  margin: 4px 0 0;
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  overflow-wrap: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.up-pay-card__label {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  line-height: 1.25;
  color: rgba(247,237,217,0.7);
  margin: 0;
}
.up-pay-card__caption {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 11px;
  line-height: 1.3;
  color: rgba(247,237,217,0.5);
  margin: 2px 0 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.t2-pay-popover {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  max-width: calc(100vw - 40px);
  background: #1e2630;
  border: 1px solid rgba(210,140,90,0.3);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  z-index: 100;
  text-align: left;
  font-family: 'IBM Plex Sans', sans-serif;
  pointer-events: none;
}
.t2-pay-node:hover .t2-pay-popover,
.t2-pay-node:focus-within .t2-pay-popover {
  display: block;
}
/* Edge nodes: avoid popover clipping off-screen on narrow viewports */
.t2-pay-node:first-child .t2-pay-popover {
  left: 0;
  transform: none;
}
.t2-pay-node:last-child .t2-pay-popover {
  left: auto;
  right: 0;
  transform: none;
}
.t2-pay-popover__value {
  margin: 0;
  color: var(--wp--preset--color--accent);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}
.t2-pay-popover__label {
  margin: 6px 0 0;
  color: rgba(247,237,217,0.78);
  font-size: 13px;
  line-height: 1.35;
}

/* ===== 4. AMENITIES ===== */
.t2-amen-kicker-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 8px;
}
.t2-amen-kicker-row .up-kicker {
  margin: 0;
}
/* правка 4.1: count baseline-aligned with kicker text */
.t2-amen-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--ink-muted);
  line-height: 1;
}
.t2-amen-cat-group {
  margin-bottom: 28px;
}
.t2-amen-cat-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--wp--preset--color--ink-muted);
  margin-bottom: 10px;
  font-weight: 500;
}
.t2-amen-row-compact {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.t2-amen-card-compact {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-width: 180px;
  max-width: 280px;
}
/* правка 4.2: icon centered horizontally inside its 40×40 box */
.t2-amen-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;   /* horizontal centering */
}
.t2-amen-name {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--wp--preset--color--ink);
  margin: 0;
}

/* ===== PROPERTY GALLERY (WO-3: up-gal-section) ===== */
.up-gal-section {
  position: relative;
}
/* 27.08: matched to /insights/'s .up-ins-cats/.up-ins-cat-pill design language
   (Mikhail: "используй тот же цвет/дизайн/паттерн") — white pill cards on a
   flex-nowrap scroll row (was transparent-bordered pills that wrapped to a
   2nd line), active/hover = accent bg + cream text (was dark-ink bg). Scroll
   is a defensive baseline at every tier, not mobile-only, same reasoning as
   insights' own comment: 4 tabs (Architecture/Interior/Amenities/Master Plan)
   already don't fit a 390px rail even at a naturally-sized (non-min-width)
   pill, so nowrap+scroll is required, not optional, on this page. */
.up-gal-tab-bar {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  margin: 0 0 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.up-gal-tab-bar::-webkit-scrollbar { display: none; }
.up-gal-tab {
  border: none;
  background: #fff;
  color: var(--wp--preset--color--ink);
  border-radius: 999px;
  padding: 9px 18px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.up-gal-tab:hover,
.up-gal-tab.up-gal-active {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--cream);
}
.up-gal-panel {
  display: none;
}
.up-gal-panel.up-gal-active {
  display: block;
}
/* 07.09 Mikhail (reference screenshot): 1 tall feature column, then every
   photo after it pairs up 2-per-column (stacked, each column's height split
   in half by the feature's), the whole row scrolling horizontally — replaces
   the old fixed 3-item "rich" bento + differently-sized "grid" strip below
   it (and the "+N photos" badge that implied hidden photos, no longer true
   now that scrolling right reaches every photo directly). */
.up-gal-scroll {
  display: flex;
  align-items: stretch;
  gap: 8px;
  height: 480px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-radius: 8px;
}
.up-gal-scroll::-webkit-scrollbar { display: none; }
.up-gal-scroll__feature {
  flex: 0 0 auto;
  height: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  padding: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #ded8ce;
  cursor: zoom-in;
}
.up-gal-scroll__col {
  flex: 0 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.up-gal-scroll__cell {
  flex: 1 1 0;
  width: 236px;
  border: 0;
  padding: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #ded8ce;
  cursor: zoom-in;
}
.up-gal__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}
.up-gal-scroll__feature:hover .up-gal__img,
.up-gal-scroll__cell:hover .up-gal__img {
  transform: scale(1.03);
}
.up-gal-lb {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.88);
  align-items: center;
  justify-content: center;
  padding: 56px 72px;
  box-sizing: border-box;
}
.up-gal-lb.is-open {
  display: flex;
}
.up-gal-lb__close,
.up-gal-lb__nav {
  position: absolute;
  border: 0;
  background: rgba(247,237,217,0.12);
  color: var(--wp--preset--color--cream);
  cursor: pointer;
}
.up-gal-lb__close {
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 34px;
  line-height: 40px;
}
.up-gal-lb__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 64px;
  border-radius: 6px;
  font-size: 42px;
  line-height: 1;
}
.up-gal-lb__prev {
  left: 18px;
}
.up-gal-lb__next {
  right: 18px;
}
.up-gal-lb__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
}
.up-gal-lb__counter {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  color: var(--wp--preset--color--cream);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}

/* ===== 5. UNIT TYPES / FLOOR PLANS ===== */
/* Floor plan tab pills */
.t2-fp-tab {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border: 1.5px solid var(--wp--preset--color--ink);
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  color: var(--wp--preset--color--ink);
  transition: background 0.15s, border-color 0.15s;
}
.t2-fp-tab.active {
  background: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
}

/* Floor plan panel */
.t2-fp-panel { display: none; }
.t2-fp-panel.active { display: flex; gap: 40px; align-items: flex-start; }

.t2-fp-slides-col {
  flex-shrink: 0;
  width: 620px;
  position: relative;
  background: #f5f3ef;
  border-radius: 12px;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  flex-direction: column;
}
.t2-fp-slide-track {
  display: flex;
  transition: transform 0.35s ease;
  flex: 1;
}
.t2-fp-slide {
  flex-shrink: 0;
  width: 620px;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
.t2-fp-slide img {
  max-width: 100%;
  max-height: 480px;
  object-fit: contain;
  display: block;
}
.t2-fp-counter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-top: 1px solid rgba(14,14,16,0.08);
  background: #faf9f7;
  flex-shrink: 0;
}
.t2-fp-chev {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--wp--preset--color--ink);
  padding: 4px 8px;
}
.t2-fp-counter-txt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--wp--preset--color--ink-muted);
}
.t2-fp-masterplan-block {
  margin-top: 16px;
  padding: 12px 16px;
  border-top: 1px solid rgba(14,14,16,0.1);
}
/* правка 1.3: master plan button (triggers lightbox, not _blank) */
.t2-fp-masterplan-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--wp--preset--color--ink);
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* Unit details (right col of floor plan panel) */
.t2-fp-details-col {
  flex: 1;
  min-width: 0;
}
.up-unit-card {
  border: 1px solid rgba(210,140,90,0.22);
  border-radius: 4px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.up-unit-card:last-child { margin-bottom: 0; }
.up-unit-card__meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--wp--preset--color--ink-muted);
  margin: 0;
}
.up-unit-card__price {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  font-weight: 400;
  color: var(--wp--preset--color--ink);
  margin: 0;
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
}
.up-unit-card__sub {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  color: rgba(14,14,16,0.6);
  margin: 0;
}
.up-unit-card__link {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--wp--preset--color--ink);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
}

/* Fallback: UNIT TYPES TABLE (for projects without floor plans) */
.t2-unit-table {
  width: 100%;
  border-collapse: collapse;
}
.t2-unit-table th {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--wp--preset--color--ink-muted);
  padding: 0 16px 12px 0;
  text-align: left;
  border-bottom: 1px solid rgba(14,14,16,0.1);
}
.t2-unit-table td {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 15px;
  color: var(--wp--preset--color--ink);
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid rgba(14,14,16,0.06);
  vertical-align: top;
}
.t2-unit-table td:first-child {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 400;
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

/* ===== 6. LAYOUT / DIVIDER / BACKGROUNDS ===== */
/* правка 6.1: FROM THE DESK bottom padding reduced */
.up-desk-section {
  padding: 40px 0 16px; /* was 40px bottom, now 16px */
  background: var(--wp--preset--color--bg-light);
}

/* правка 6.2: divider between MORE PROJECTS and TOP COMMUNITIES */
.up-desk__hr,
.up-section-divider {
  background: rgba(0,0,0,0.12);
  height: 1px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  flex-shrink: 0;
}

/* правка 6.2: unified background for MORE PROJECTS + TOP COMMUNITIES */
.up-more-projects-bg,
.up-top-communities-bg {
  background: #F5F3EF; /* unified — was #F2F0EC vs #F5F3EF */
}

/* ===== DEVELOPER CARD — mini-hero matching DeveloperHub.astro's .t3-hero
   (2026-07-11, Mikhail: reuse the developer-page hero style, not a plain grid
   card) — same dark #2D3745 bg / logo badge / CTA pattern, scaled for a card
   within a longer page rather than a full page-top hero. ===== */
.up-dev-hero {
  background: #2d3745;
  padding: 40px;
  box-sizing: border-box;
}
.up-dev-hero__kicker {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(247,237,217,0.6);
  display: block;
  margin-bottom: 24px;
}
.up-dev-hero__body {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}
.up-dev-hero__logo-wrap {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  background: #f2f0ec;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}
.up-dev-hero__logo-wrap img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}
.up-dev-hero__text { flex: 1; min-width: 0; }
.up-dev-hero__name {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: 36px;
  line-height: 1.1;
  color: #f7edd9;
  margin: 0 0 12px;
}
.up-dev-hero__tagline {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 16px;
  color: rgba(247,237,217,0.8);
  line-height: 1.55;
  margin: 0 0 24px;
  max-width: 960px;
}
.up-dev-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #d28c5a;
  color: #0e0e10;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  border-radius: 999px;
  padding: 12px 24px;
  min-height: 44px;
  box-sizing: border-box;
  text-decoration: none;
  /* 26.08: was white-space:nowrap + fixed height:44px unconditionally, only
     relaxed at <=640px. The CTA text interpolates the raw developer name
     (t('propertyCard.viewDeveloperProfileCta')) — for long names (e.g. "H&H
     Development (Dubai Harbour Residences, Edition Residences)") this button
     is wider than the .up-dev-hero__text flex column at the 641-1439px
     tablet range (no tier existed there, only the 640px mobile fix), causing
     real horizontal overflow. Wrap unconditionally at every width instead of
     only on mobile — matches the already-shipped mobile treatment, just not
     gated to one breakpoint anymore. `box-sizing: border-box` is required
     alongside `max-width: 100%` — plain content-box would add the 48px of
     horizontal padding on top of that max-width and the button could still
     push past its flex column. `min-height` (not `height`) keeps the original
     44px single-line target while still letting the button grow when it wraps.
     `overflow-wrap: break-word` (Safari <16.4) + `anywhere` (modern) guards a
     developer name with no space to break at. */
  white-space: normal;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
  text-align: center;
  transition: opacity 0.15s;
}
.up-dev-hero__cta:hover { opacity: 0.88; }
@media (max-width: 640px) {
  .up-dev-hero { padding: 28px 20px; }
  .up-dev-hero__body { flex-direction: column; gap: 20px; }
  .up-dev-hero__name { font-size: 28px; }
  /* 20px side padding here (vs the 24px base) is the pre-26.08 shipped mobile
     value — kept explicit so consolidating the nowrap/wrap rule above doesn't
     silently change it to 24px. */
  .up-dev-hero__cta { width: 100%; padding: 12px 20px; }
}
.up-dev-logo-slot {
  width: 160px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.up-dev-logo-slot img,
.up-dev-logo {
  max-width: 160px;
  max-height: 40px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.up-dev-card-name {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: var(--wp--preset--color--ink);
  line-height: 1.3;
  margin: 0;
}
.up-dev-card-active {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  color: rgba(14,14,16,0.55);
  margin: 6px 0 0;
  flex-shrink: 0;
}

/* ===== LIGHTBOX (правка 1.3) ===== */
.t2-lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.85);
  align-items: center;
  justify-content: center;
}
.t2-lightbox-overlay.is-open {
  display: flex;
}
.t2-lightbox-inner {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
}
.t2-lightbox-inner img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
}
.t2-lightbox-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: rgba(247,237,217,0.9);
  font-size: 32px;
  cursor: pointer;
  line-height: 1;
}

/* ===== RESPONSIVE ===== */
/* 1100px is a documented micro-breakpoint exception (canon whitelist #4,
   MOBILE_DESIGN_CANON_20260817.md), not chaos: .up-rail-inner is used only
   on property-card templates (grep-verified — not shared with any full-page
   template's breadcrumb, so this can't reproduce the crumb/rail 769-960px
   sibling-mismatch bug class fixed in b87b6f9). It's a deliberate easing
   step between the 80px desktop rail and the 768px sectional-tier 24px
   (canon: property-card is "sectional", not "full-page", so its own tier
   set is 480/768, not 960) -- without it, the rail would sit at the full
   80px all the way down to 769px then jump straight to 24px, a harsher cut
   than 80->40->24. It also coincides with this template's own floor-plan
   panel reflow breakpoint (.t2-fp-slides-col/.t2-fp-panel.active below),
   already a meaningful layout boundary on this page independent of
   side-padding. */
@media (max-width: 1100px) {
  .up-rail-inner { padding-left: 40px; padding-right: 40px; }
  .t2-fp-slides-col { width: 100%; }
  .t2-fp-panel.active { flex-direction: column; }
  /* 27.08 (Mikhail, second pass — "сначала надо данные потом картинке"):
     once this panel stacks to a column, DOM order (slides-col then
     details-col in the markup) would put the image first — the desired
     order is unit-type DATA first, floor-plan IMAGE second. `order` here
     is scoped to this same reflow breakpoint only, so desktop's row layout
     (image left, data right, driven by DOM order, not `order`) is
     untouched. */
  .t2-fp-details-col { order: 1; }
  .t2-fp-slides-col { order: 2; }
}
@media (max-width: 768px) {
  /* Real mobile hero pass (2026-08-17 mobile canon) — was a straight shrink of
     the desktop 720px hero (320px image + 40px-padded facts col = 884px total,
     measured live to push the secondary CTA below the 390×844 fold on every
     non-sold-out project). Compacted so the hero + both CTAs read on load. */
  .t2-hero-layout { flex-direction: column; }
  .t2-hero-image-col { width: 100%; min-height: 240px; }
  .t2-hero-image-col img { height: 240px; }
  .t2-hero-facts-col { width: 100%; padding: 32px 24px; }
  .t2-hero-location { margin-bottom: 12px; }
  .t2-hero-title { margin-bottom: 6px; }
  .t2-hero-dev { margin-bottom: 18px; }
  .t2-hero-price-usd { margin-bottom: 6px; }
  .t2-hero-phases { margin: 12px 0 28px; }
  .t2-hero-cta-primary { margin-bottom: 10px; }
  /* rail side padding: 24px at 430-768px per mobile canon spacing scale
     (390-and-below phones get 20px via the 480px tier below) */
  .up-rail-inner { padding-left: 24px; padding-right: 24px; }
  .t2-fp-slides-col { width: 100%; }
  .t2-fp-slide { width: 100%; }
  .t2-pay-tl { flex-wrap: wrap; gap: 24px; }
  .t2-pay-tl::before { display: none; }
  .t2-pay-node { flex: 1 1 120px; }
  .t2-pay-card { max-width: 150px; }
  .t2-pay-popover {
    left: 50%;
    width: 220px;
    max-width: min(220px, calc(100vw - 40px));
  }
  /* NOTE (27.08, code review): this block used to reflow the desktop bento
     grid (asymmetric 2-col feature+thumb) into a stacked single column at
     this same breakpoint. That rule is now dead code — superseded further
     down in this SAME media query by the flat horizontal-scroll-strip
     override (`.up-gal-scroll/__col { display: contents }`), which applies
     at every width ≤768px and wins by cascade order. Removed rather than
     left in place to avoid a future reader assuming it's live. */
  .up-gal-lb {
    /* Side padding follows canon's 768px sectional tier (24px) same as the
       page rail -- top/bottom 56px is unrelated breathing room for the
       fixed close/nav buttons, not a side-padding value, left unchanged. */
    padding: 56px 24px;
  }
  /* Touch targets: gallery/payment/floor-plan pill tabs + lightbox nav were
     sized to their text (≈33-35px tall, ≈38px wide) — below the 44×44px
     minimum. Pad up to a real tap target without changing desktop sizing. */
  .up-gal-lb__nav {
    width: 44px;
    height: 56px;
    font-size: 30px;
  }
  .t2-pay-tab,
  .t2-fp-tab,
  .up-gal-tab {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .t2-fp-chev {
    /* padding:0 is intentional (canon whitelist #2, intra-element sizing at
       a different scale than page-rail side-padding), not a missed 24px
       side-pad: this is a flex-centered 44x44 touch-target icon button
       (see the 44x44px comment block above), not rail content -- adding
       side padding here would inflate it past the 44x44 touch-target size
       this rule exists to enforce. */
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  /* AMENITIES — horizontal scroll per category on mobile (27.08, Mikhail:
     "сделать горизонтальный скролл по каждой категории вместо простыни").
     Was flex-wrap:wrap (a vertical "sheet" — every amenity in the category
     wraps onto its own row, 1-2 per line at 390px). Same overflow-x pattern
     as .up-gal-scroll above (already proven on this page), plus a right-edge
     fade so the scrollability itself is visible before the user touches it. */
  .t2-amen-row-compact {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  }
  .t2-amen-row-compact::-webkit-scrollbar { display: none; }
  .t2-amen-card-compact {
    flex-shrink: 0;
    min-width: 150px;
  }

  /* GALLERY — flatten the desktop feature/pairs layout into ONE
     horizontal scroll-snap strip of same-size thumbnails per tab (27.08,
     Mikhail: "картинки внутри активного таба на мобильном тоже horizontal
     scroll, не текущая grid/rich раскладка" — still true after the 07.09
     feature+pairs redesign, mobile keeps its own flat strip). display:contents
     un-wraps each sub-container with zero markup change — .up-gal-scroll's
     own children (the feature button + each pair's .up-gal-scroll__col)
     become direct flex items of .up-gal-panel itself, and .up-gal-scroll__col
     is unwrapped too so its 2 cells join the same single row instead of
     staying stacked, giving one continuous scroll row in DOM order. */
  .up-gal-panel.up-gal-active {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Same right-edge fade as .t2-amen-row-compact above — a code-review
       finding (27.08) noted this scroll strip was missing the visual
       scrollability hint the other mobile strips already had. */
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  }
  .up-gal-panel.up-gal-active::-webkit-scrollbar { display: none; }
  /* RTL mirror for these 2 mobile-only scroll strips, moved here (27.08,
     code-review fix) from a global rule that wrongly also faded them on
     desktop/tablet RTL. */
  html[dir="rtl"] .t2-amen-row-compact,
  html[dir="rtl"] .up-gal-panel.up-gal-active {
    -webkit-mask-image: linear-gradient(to left, #000 88%, transparent 100%);
    mask-image: linear-gradient(to left, #000 88%, transparent 100%);
  }
  .up-gal-scroll,
  .up-gal-scroll__col {
    display: contents;
  }
  .up-gal-scroll__feature,
  .up-gal-scroll__cell {
    flex: 0 0 220px;
    width: 220px;
    height: 220px;
    aspect-ratio: auto;
    scroll-snap-align: start;
  }
}

/* ===== PHONE TIER (≤480px) — 390 is the primary target, 430 inherits the
   same treatment per mobile canon ("don't over-optimize separately from 390
   unless the layout genuinely needs it") ===== */
@media (max-width: 480px) {
  .up-rail-inner { padding-left: 20px; padding-right: 20px; }
  /* Explicit re-override, not redundant: without this, the ≤480px tier
     would inherit the 768px block's .up-gal-lb padding (24px) by cascade,
     landing on 24px side padding here where canon wants 20px to match
     .up-rail-inner above. Caught by independent review (dev_code_review.py,
     2/2 models FAIL) right after the 768px value moved 20px->24px --
     before that fix, the un-overridden 480px tier "accidentally" matched
     canon at 20px only because both tiers shared the same wrong value. */
  .up-gal-lb { padding: 56px 20px; }
  .t2-hero-image-col { min-height: 220px; }
  .t2-hero-image-col img { height: 220px; }
  .t2-hero-facts-col { padding: 24px 20px; }
  .t2-hero-phases { margin: 10px 0 22px; }

  /* Key-facts spec sheet: 2-col label|value grid gets tight for long labels
     ("SERVICE CHARGE") against long values ("AED 980,000–1,200,000") at
     ≤480px content width (~350px) — reflow to stacked label-over-value rows
     (canon's card-per-row pattern for ≤5-field data blocks). */
  .up-attrs--details {
    grid-template-columns: 1fr;
    gap: 0;
  }
  /* .up-attr__label/__val: 0 left/right padding is intentional (canon
     whitelist #2, intra-card scale, not page-rail side-padding) -- these
     are dl-grid cells with 0 horizontal padding even in the desktop base
     rule (line ~247/259, the staging-эталон spec-sheet grid verified live
     2026-07-06); horizontal position comes from the grid column tracks /
     the ancestor rail, not from padding on the cell itself. Only the
     top/bottom split changes here, to turn the desktop centered row into a
     tight stacked label-over-value pair. Paired and kept in sync: label
     gets the top gap (14px), val gets the bottom gap (14px). */
  .up-attr__label {
    padding: 14px 0 2px;
  }
  .up-attr__val {
    padding: 0 0 14px;
    border-top: none;
  }

  /* Amenities cards: 180px min-width forces a single column on a 340px
     content area even though names are short — 150px lets 2-up pack without
     forcing long names to wrap awkwardly (flex-wrap still lets long-name
     cards fall onto their own line). Gap stays 16px per canon. */
  .t2-amen-card-compact { min-width: 150px; }

  /* Developer card: 120px logo badge crowds a 340px content column next to
     the name/tagline/CTA stack. */
  .up-dev-hero__logo-wrap { width: 88px; height: 88px; border-radius: 12px; }
  .up-dev-hero__logo-wrap img { width: 60px; height: 60px; }

  /* Unit-types fallback table: a real 5-column data table does not survive
     390px shrunk down. ≤5 fields/row -> card-per-row (canon option a), not
     horizontal scroll -- each <td> already carries data-label (see
     PropertyCard.astro), turned into a stacked label:value line via ::before. */
  .t2-unit-table thead { display: none; }
  .t2-unit-table,
  .t2-unit-table tbody,
  .t2-unit-table tr,
  .t2-unit-table td {
    display: block;
    width: 100%;
  }
  .t2-unit-table tr {
    /* Real bug found live at 390px: `<tr>` keeps the UA-stylesheet default
       box-sizing:content-box (table elements aren't covered by most global
       resets), so this rule's own 16px side padding was ADDED on top of the
       100% width above instead of eating into it — the row measured 384px
       wide inside a 350px table (14px past the 390px viewport itself),
       silently clipped by an ancestor's overflow:hidden rather than causing
       real horizontal scroll, so it never tripped a scrollWidth check —
       visually the price/size values were flush-cut at the card edge.

       16px side padding here is intra-card scale (canon whitelist #2 --
       one of the explicitly listed example values, "16px/14px/12px"), not
       the 20px page-rail side-padding tier: this <tr> IS the card (bordered
       box, own border-radius), so its padding is the card's internal
       breathing room, not a rail equivalent. */
    box-sizing: border-box;
    border: 1px solid rgba(14,14,16,0.12);
    border-radius: 8px;
    padding: 4px 16px;
    margin-bottom: 12px;
  }
  .t2-unit-table td {
    /* 0 left/right by design (canon whitelist #2): each td is a label:value
       row INSIDE the tr-card above, which already carries the 16px side
       padding -- adding another 20px here would double-indent every row
       against the card's own edge instead of the viewport's. */
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(14,14,16,0.06);
    text-align: right;
  }
  .t2-unit-table td:last-child { border-bottom: none; }
  .t2-unit-table td::before {
    content: attr(data-label);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wp--preset--color--ink-muted);
    flex-shrink: 0;
    text-align: left;
  }
  .t2-unit-table td:first-child {
    font-size: 17px;
  }
}