/**
 * Single apartment — drawing on the left, specification panel on the right.
 *
 * Type scale and colour taken from the page it replaces (Elementor template
 * #91 and JetEngine component #113), so the rebuild lands on the same design
 * rather than an approximation of the screenshot:
 *
 *   number        TBCCaps 40/700 "ბინა 305"   areas label  TBCCaps 12/500 #5D1520
 *   meta line     TBCCaps 14/500  #5D1520     areas value  TBCCaps 22/700 #000
 *   room label    TBCCaps 12/400  #000        room value   TBCCaps 14/600 #000
 *   price label   12/400 #510B0B              price value  24/700 #510B0B
 *   buttons       TBCCaps 14/600, radius 8, padding 18/16, #5D1520 → #88202F
 *   view tabs     FiraGO 14/400, a sliding pill under the active tab (as the ₾/$ switch)
 */

.deka-apartment {
  display: grid;
  /* 60 / 40: drawing and specification. The panel keeps a 416px floor so its
     three area figures and two room columns still fit on small laptops. */
  grid-template-columns: minmax(0, 3fr) minmax(26rem, 2fr);
  align-items: stretch;
  min-height: calc(100vh - var(--deka-header-height));
  min-height: calc(100svh - var(--deka-header-height));
  /* Closes the drawing and panel off from the sections below, as the
     breadcrumb bar's rule does above them. */
  border-bottom: 1px solid var(--deka-divider-warm);
  background: var(--deka-surface-page);
}

/* Logged-in users lose another 32px to the admin bar, which a viewport unit does
   not know about. Without this the rail is a full header taller than the space
   it has, and the last button falls below the fold for editors only. */
.admin-bar .deka-apartment {
  min-height: calc(100vh - var(--deka-header-height) - var(--wp-admin--admin-bar--height, 32px));
  min-height: calc(100svh - var(--deka-header-height) - var(--wp-admin--admin-bar--height, 32px));
}

/* Under the 64px breadcrumb bar the page still ends at the fold. */
.deka-crumbs + .deka-apartment {
  min-height: calc(100vh - var(--deka-header-height) - 4rem);
  min-height: calc(100svh - var(--deka-header-height) - 4rem);
}

.deka-apartment--unavailable {
  display: block;
  padding-block: var(--deka-space-3xl);
  text-align: center;
  color: var(--deka-text-muted);
}

/* ==========================================================================
   Stage — the drawing and its view tabs
   ========================================================================== */

.deka-apartment__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--deka-space-xl) var(--deka-space-lg) 6rem;
  background: var(--deka-white);
  min-width: 0;
}

.deka-apartment__frames {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 24rem;
}

.deka-apartment__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--deka-duration-base) var(--deka-ease-out),
              visibility var(--deka-duration-base);
}

/* visibility as well as opacity: a transparent drawing would still intercept
   the pointer and sit over the one that is actually showing. */
.deka-apartment__frame.is-active {
  opacity: 1;
  visibility: visible;
}

/* A segmented switch that behaves like the currency switch: one pill slides
   under the active tab. The tabs differ in width, so apartment-detail.js
   measures the active one into --deka-pill-*. */
.deka-apartment__views {
  position: absolute;
  bottom: var(--deka-space-lg);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0;
  padding: 3px;
  border: 1px solid var(--deka-grey-500);
  border-radius: var(--deka-radius-lg);
  background: var(--deka-surface-raised);
  max-width: calc(100% - var(--deka-space-lg) * 2);
  overflow-x: auto;
  scrollbar-width: none;
}

.deka-apartment__views::-webkit-scrollbar { display: none; }

.deka-apartment__views-pill {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--deka-pill-w, 0);
  height: var(--deka-pill-h, 0);
  transform: translate(var(--deka-pill-x, 0), var(--deka-pill-y, 0));
  border-radius: var(--deka-radius-pill);
  background: var(--deka-action);
  pointer-events: none;
}

/* Not before the first measurement, or the pill would sweep in from the corner. */
.deka-apartment__views.is-ready .deka-apartment__views-pill {
  transition: transform var(--deka-duration-base) var(--deka-ease-emphasis),
              width var(--deka-duration-base) var(--deka-ease-emphasis);
}

.deka-apartment__view {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--deka-space-2xs);
  padding: var(--deka-space-xs) var(--deka-space-md);
  border: 0;
  border-radius: var(--deka-radius-pill);
  background: transparent;
  font-family: var(--deka-font-body);
  font-size: var(--deka-text-sm);
  font-weight: var(--deka-weight-regular);
  line-height: 1;
  white-space: nowrap;
  color: var(--deka-text);
  cursor: pointer;
  transition: color var(--deka-duration-fast) var(--deka-ease-out);
}

.deka-apartment__view:not(.is-active):hover { color: var(--deka-text-muted); }

.deka-apartment__view.is-active { color: var(--deka-action-text); }

/* Until the script has placed the pill (or without JavaScript) the active tab
   carries the fill itself. */
.deka-apartment__views:not(.has-pill) .deka-apartment__view.is-active { background: var(--deka-action); }

.deka-apartment__view-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ==========================================================================
   Panel
   ========================================================================== */

.deka-apartment__panel {
  display: flex;
  flex-direction: column;
  /* Vertical rhythm eases off on short viewports: the rail has to fit between
     the header and the fold, and at the full 2xl step its intrinsic height was
     821px — more than a laptop leaves once the header is taken out. */
  padding: clamp(1.5rem, 4.2vh, var(--deka-space-2xl)) var(--deka-space-xl);
  /* The rule between the drawing and the specification, full height. */
  border-left: 1px solid var(--deka-divider-warm);
  background: var(--deka-surface-page);
}

.deka-apartment__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--deka-space-md);
}

.deka-apartment__number {
  margin: 0;
  font-family: var(--deka-font-display);
  font-size: 2.5rem; /* 40 */
  font-weight: var(--deka-weight-bold);
  line-height: 1.1;
  color: var(--deka-text);
}


.deka-apartment__logo {
  width: auto;
  max-width: 8.75rem;
  max-height: 3.25rem;
  object-fit: contain;
}

.deka-apartment__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--deka-space-2xs);
  margin: var(--deka-space-sm) 0 0;
  font-family: var(--deka-font-display);
  font-size: 0.875rem; /* 14 */
  font-weight: var(--deka-weight-medium);
  color: var(--deka-oxblood-700);
}

.deka-apartment__dot {
  width: 6px;
  height: 6px;
  background: var(--deka-oxblood-700);
  flex-shrink: 0;
}

.deka-apartment__status {
  align-self: flex-start;
  margin: var(--deka-space-sm) 0 0;
  padding: 4px 12px;
  border-radius: var(--deka-radius-xs);
  font-size: var(--deka-text-xs);
  font-weight: var(--deka-weight-semibold);
  text-transform: uppercase;
  color: var(--deka-white);
  background: var(--deka-status-sold);
}

.deka-apartment__status.is-reserved {
  background: var(--deka-status-reserved);
  color: var(--deka-black);
}

/* --- Area figures --------------------------------------------------------- */

.deka-apartment__areas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--deka-space-xl);
  margin-top: clamp(1rem, 2.4vh, var(--deka-space-lg));
  padding-bottom: clamp(1rem, 2.4vh, var(--deka-space-lg));
  border-bottom: 1px solid var(--deka-oxblood-700);
}

.deka-apartment__area {
  display: flex;
  flex-direction: column;
  gap: var(--deka-space-3xs);
}

.deka-apartment__area-label {
  font-family: var(--deka-font-display);
  font-size: 0.75rem; /* 12 */
  font-weight: var(--deka-weight-medium);
  color: var(--deka-oxblood-700);
}

.deka-apartment__area-value {
  font-family: var(--deka-font-display);
  font-size: 1.375rem; /* 22 */
  font-weight: var(--deka-weight-bold);
  line-height: 1.2;
  color: var(--deka-text);
  font-variant-numeric: tabular-nums;
}

/* --- Room breakdown ------------------------------------------------------- */

.deka-apartment__rooms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--deka-space-xl);
  margin: var(--deka-space-lg) 0 0;
  padding: 0;
  list-style: none;
}

.deka-apartment__room {
  display: flex;
  align-items: center;
  gap: var(--deka-space-2xs);
  padding-block: clamp(0.5rem, 1.5vh, var(--deka-space-sm));
  border-bottom: 1px solid var(--deka-divider-card);
}

.deka-apartment__room-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--deka-oxblood-700);
}

.deka-apartment__room-label {
  font-family: var(--deka-font-display);
  font-size: 0.75rem; /* 12 */
  font-weight: var(--deka-weight-regular);
  color: var(--deka-text);
}

/* Pushed right so the figures line up in a column regardless of label length. */
.deka-apartment__room-value {
  margin-left: auto;
  font-family: var(--deka-font-display);
  font-size: 0.875rem; /* 14 */
  font-weight: var(--deka-weight-semibold);
  color: var(--deka-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ==========================================================================
   Price
   ========================================================================== */

.deka-price {
  margin-top: auto;
  padding-top: clamp(1rem, 3vh, var(--deka-space-xl));
}

.deka-price__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--deka-space-md);
}

.deka-price__title {
  display: inline-flex;
  align-items: center;
  gap: var(--deka-space-3xs);
  font-family: var(--deka-font-display);
  font-size: 0.75rem;
  font-weight: var(--deka-weight-medium);
  color: var(--deka-grey-700);
}

.deka-price__info {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.deka-price__lines {
  display: flex;
  flex-wrap: wrap;
  gap: var(--deka-space-sm) var(--deka-space-lg);
  margin-top: var(--deka-space-sm);
}

/* The total keeps a box just wider than any ten-symbol figure ("$1,146,453",
   "386,929 ₾"), so a currency switch or the count-up never moves the per-m²
   price beside it. `ch` is the figure's own digit width: commas and the ₾ are
   narrower, and the widest ten symbols measure 8.8ch. */
.deka-price__line:first-child .deka-price__value { min-width: 9ch; }

.deka-price__line {
  display: flex;
  flex-direction: column;
  gap: var(--deka-space-3xs);
}

.deka-price__label {
  font-size: 0.75rem; /* 12 */
  font-weight: var(--deka-weight-regular);
  color: var(--deka-oxblood-800);
}

.deka-price__value {
  font-size: 1.5rem; /* 24 */
  font-weight: var(--deka-weight-bold);
  line-height: 1.2;
  color: var(--deka-oxblood-800);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ==========================================================================
   Actions
   ========================================================================== */

.deka-apartment__actions {
  display: flex;
  flex-direction: column;
  gap: var(--deka-space-xs);
  margin-top: clamp(0.75rem, 2.4vh, var(--deka-space-lg));
}

.deka-apartment__cta {
  display: block;
  width: 100%;
  padding: 18px 0 16px;
  border: 0;
  border-radius: var(--deka-radius-sm);
  background: var(--deka-oxblood-700);
  font-family: var(--deka-font-display);
  font-size: 0.875rem; /* 14 */
  font-weight: var(--deka-weight-semibold);
  text-align: center;
  text-decoration: none;
  color: var(--deka-white);
  cursor: pointer;
  transition: background-color var(--deka-duration-base) var(--deka-ease-out),
              color var(--deka-duration-base) var(--deka-ease-out);
}

.deka-apartment__cta:hover { background: #88202F; }

.deka-apartment__cta--ghost {
  background: transparent;
  color: var(--deka-text);
}

.deka-apartment__cta--ghost:hover { background: rgb(136 32 47 / 9%); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 75rem) { /* 1200 */
  .deka-apartment__panel { padding: var(--deka-space-xl) var(--deka-space-lg); }
}

@media (max-width: 60rem) { /* 960 — panel drops below the drawing */
  .deka-apartment {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .deka-apartment__stage {
    padding-bottom: 5rem;
    aspect-ratio: 4 / 3;
  }

  .deka-apartment__frames { min-height: 0; }
  .deka-price { margin-top: var(--deka-space-lg); }

  /* Stacked, the dividing rule turns horizontal. */
  .deka-apartment__panel {
    border-left: 0;
    border-top: 1px solid var(--deka-divider-warm);
  }
}

@media (max-width: 40rem) { /* 640 */
  .deka-apartment__rooms { grid-template-columns: 1fr; }
  .deka-apartment__areas { gap: var(--deka-space-lg); }
  .deka-apartment__number { font-size: 1.875rem; }
  .deka-apartment__area-value { font-size: 1.25rem; }
}

/*
 * Phones, as on the live site at 375px.
 *
 *   drawing  30px of page above it, then full width and 330px tall on white,
 *            with the project logo in its top-right corner (the live phone
 *            layout moves it there from beside the number)
 *   tabs     under the drawing rather than over it, in a pill with a 1px
 *            #CBCBCB edge that scrolls sideways; 34px tabs 5px apart, only the
 *            active one filled
 *   panel    20px sides; the three areas in one row of equal columns between
 *            two maroon rules, labels 10px; room rows 40px with 8px between;
 *            buttons 48px
 */
@media (max-width: 47.9375rem) { /* 767 */
  .deka-apartment { position: relative; }

  /* --- Drawing and tabs --------------------------------------------------- */

  .deka-apartment__stage {
    display: block;
    aspect-ratio: auto;
    margin-top: 1.875rem; /* 30 */
    padding: 0 0 0.625rem;
  }

  .deka-apartment__frames {
    height: 20.625rem; /* 330 */
    min-height: 0;
  }

  .deka-apartment__views {
    /* relative, not static: it still positions the pill */
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    max-width: none;
    margin: 0.25rem 0.625rem 0;
    padding: 5px;
    gap: 5px;
    border: 1px solid #cbcbcb;
    border-radius: 1.875rem;
    background: transparent;
    box-shadow: none;
  }

  .deka-apartment__view {
    padding: 0.375rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 1.25rem; /* 20 */
    background: transparent;
    font-size: 0.8125rem; /* 13 */
  }

  /* Lifted out of the panel's heading and into the drawing's corner. The
     drawing starts 30px down this block, so 45px is 15px inside it. */
  .deka-apartment__logo {
    position: absolute;
    top: 2.8125rem;    /* 45 */
    right: 0.9375rem;  /* 15 */
    z-index: 1;
    max-width: 5.625rem;  /* 90 */
    max-height: 1.875rem; /* 30 */
  }

  /* --- Panel ------------------------------------------------------------- */

  /* 50 on top plus the drawing's 10 below its tabs: the 60px the live page
     leaves between the tabs and the number. */
  .deka-apartment__panel { padding: 3.125rem 1.25rem 1.25rem; }

  /* Line-height 1 here and on the figures: the live block is 80px tall and
     starts 21px under the meta line, which only works out with tight lines. */
  .deka-apartment__meta {
    margin-top: 1.25rem;
    line-height: 1;
  }

  .deka-apartment__areas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding-block: 1.5rem 1.25rem;
    border-top: 1px solid var(--deka-oxblood-700);
  }

  .deka-apartment__area-label { font-size: 0.625rem; } /* 10 */

  .deka-apartment__area-label,
  .deka-apartment__area-value { line-height: 1; }

  .deka-apartment__rooms {
    row-gap: 0.5rem;
    margin-top: 1.875rem; /* 30 */
  }

  .deka-apartment__room {
    padding-block: 0.5rem;
    border-bottom-color: rgb(178 178 178 / 27%);
  }

  .deka-apartment__room-icon { color: var(--deka-text); }

  /* 49px from the last room to the price heading, as live. */
  .deka-price { margin-top: 1.25rem; }

  .deka-apartment__actions { gap: 0.3125rem; } /* 5 */

  /* Line-height 1 with the existing 18/16 padding lands on 48px. */
  .deka-apartment__cta { line-height: 1; }

  .deka-apartment__cta--ghost { border: 1px solid var(--deka-oxblood-700); }
}