/**
 * Apartment FAQ — "რატომ დეკა ლისი?" under the apartment detail.
 *
 * The heading; a row of tabs, one per question;
 * then two halves: the tab's picture on the left, its question and answer on
 * the right. Every panel shares one grid cell, so the section is as tall as the
 * longest answer and switching tabs never moves the page. The pictures share
 * their box the same way: the arriving one is clipped to nothing and opened
 * across the box from the side the visitor moved toward, settling from a slight
 * zoom, while the one it covers drifts a little closer underneath.
 *
 * Side padding follows the header's at each breakpoint, so the heading lines up
 * with the language switcher above it.
 */

.deka-apartment-faq {
  --deka-faq-clip: cubic-bezier(0.77, 0, 0.18, 1);

  max-width: 112.5rem; /* 1800 — the header's width */
  margin-inline: auto;
  padding: 3.75rem var(--deka-space-lg) 6.25rem; /* 60 / 100 */
}

/* ==========================================================================
   Heading
   ========================================================================== */

.deka-apartment-faq__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem; /* 20 */
  margin-bottom: var(--deka-space-lg);
}

.deka-apartment-faq__title {
  font-family: var(--deka-font-display);
  font-size: 2rem; /* 32 */
  font-weight: var(--deka-weight-medium);
  line-height: 1.15;
  letter-spacing: var(--deka-tracking-normal);
  color: var(--deka-text);
}

.deka-apartment-faq__title strong {
  font-weight: var(--deka-weight-bold);
}

/* ==========================================================================
   Tabs
   ========================================================================== */

.deka-apartment-faq__tabs {
  position: relative;
  display: flex;
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--deka-divider-warm);
  overflow-x: auto;
  scrollbar-width: none;
}

.deka-apartment-faq__tabs::-webkit-scrollbar { display: none; }

/* A row that scrolls fades out at the end(s) with tabs out of sight
   (apartment-faq.js sets the classes). */
.deka-apartment-faq__tabs.is-clipped-end {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 72px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 72px), transparent);
}

.deka-apartment-faq__tabs.is-clipped-start {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 72px);
  mask-image: linear-gradient(to right, transparent, #000 72px);
}

.deka-apartment-faq__tabs.is-clipped-start.is-clipped-end {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 72px, #000 calc(100% - 72px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 72px, #000 calc(100% - 72px), transparent);
}

.deka-apartment-faq__tab {
  flex-shrink: 0;
  padding: 1.125rem 0;
  border: 0;
  background: none;
  font-family: var(--deka-font-display);
  font-size: 1rem;
  font-weight: var(--deka-weight-medium);
  line-height: 1.2;
  white-space: nowrap;
  color: var(--deka-text-subtle);
  cursor: pointer;
  transition: color var(--deka-duration-base) var(--deka-ease-out);
}

.deka-apartment-faq__tab:hover,
.deka-apartment-faq__tab[aria-selected='true'] { color: var(--deka-text); }

.deka-apartment-faq__tab:focus-visible {
  outline: 2px solid var(--deka-focus-ring);
  outline-offset: -2px;
}

/* The line under the selected tab; apartment-faq.js slides it across. */
.deka-apartment-faq__indicator {
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--deka-faq-w, 0);
  height: 2px;
  background: var(--deka-action);
  transform: translateX(var(--deka-faq-x, 0));
  transition:
    transform 0.6s var(--deka-ease-out),
    width 0.6s var(--deka-ease-out);
  pointer-events: none;
}

/* ==========================================================================
   Body: picture | text
   ========================================================================== */

.deka-apartment-faq__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 5rem);
  align-items: stretch;
}

/* A project without any pictures: the text keeps a reading width. */
.deka-apartment-faq--text-only .deka-apartment-faq__body {
  grid-template-columns: minmax(0, 1fr);
  max-width: 50rem;
}

/* A fixed frame rather than one stretched to the longest answer: it stays in
   view beside an answer that runs longer than it. */
.deka-apartment-faq__media {
  position: sticky;
  top: calc(var(--deka-header-height) + 1.5rem);
  align-self: start;
  height: min(40rem, 78vh);
  overflow: hidden;
  border-radius: var(--deka-radius-xs);
  background: var(--deka-surface-sunken);
}

.deka-apartment-faq__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  clip-path: inset(0);
  transform: scale(1.08);
  transition:
    clip-path 1.15s var(--deka-faq-clip),
    transform 1.6s var(--deka-ease-out);
}

.deka-apartment-faq__image.is-active {
  z-index: 2;
  opacity: 1;
  transform: none;
}

.deka-apartment-faq__image.is-leaving {
  z-index: 1;
  opacity: 1;
  transform: scale(1.05);
}

/* Starting points of the wipe, applied for one frame without a transition. */
.deka-apartment-faq__image.from-next { clip-path: inset(0 0 0 100%); transition: none; }
.deka-apartment-faq__image.from-prev { clip-path: inset(0 100% 0 0); transition: none; }

/* --- Panels: all in one cell, the selected one shown ----------------------- */

.deka-apartment-faq__panels {
  display: grid;
  align-content: center;
}

.deka-apartment-faq__panel {
  grid-area: 1 / 1;
  visibility: hidden;
  /* Stays drawn while its lines fade out, then leaves the accessibility tree. */
  transition: visibility 0s linear 0.35s;
}

.deka-apartment-faq__panel.is-active {
  visibility: visible;
  transition-delay: 0s;
}

.deka-apartment-faq__panel:focus-visible {
  outline: 2px solid var(--deka-focus-ring);
  outline-offset: 0.5rem;
}

.deka-apartment-faq__question {
  margin: 0 0 1.25rem;
  font-family: var(--deka-font-display);
  /* A step under the section title (32), level with the prices (24). */
  font-size: clamp(1.25rem, 1rem + 0.55vw, 1.5rem);
  font-weight: var(--deka-weight-bold);
  line-height: 1.25;
  color: var(--deka-text);
}

.deka-apartment-faq__answer {
  font-family: var(--deka-font-body);
  font-size: 1rem; /* 16 */
  line-height: 1.65;
  color: var(--deka-text-muted);
}

.deka-apartment-faq__answer > * { margin: 0; }
.deka-apartment-faq__answer > * + * { margin-top: 1rem; }

.deka-apartment-faq__answer :is(ul, ol) {
  display: grid;
  gap: 0.45rem;
  padding: 0;
  list-style: none;
}

.deka-apartment-faq__answer li {
  position: relative;
  padding-left: 1.25rem;
}

.deka-apartment-faq__answer li:empty { display: none; }

.deka-apartment-faq__answer li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 6px;
  height: 6px;
  background: var(--deka-action);
}

/* --- Entrances ------------------------------------------------------------- *
 * The question is unmasked upward; the answer's paragraphs and list items rise
 * in after it, one after another (apartment-faq.js numbers them in --i). The
 * outgoing panel's lines simply fade, quickly, before the new ones arrive.
 */
.deka-apartment-faq__question,
.deka-apartment-faq__answer > :not(ul):not(ol),
.deka-apartment-faq__answer li {
  opacity: 0;
  transform: translateY(1rem);
  transition:
    opacity 0.3s var(--deka-ease-out),
    transform 0.3s var(--deka-ease-out);
}

.deka-apartment-faq__question {
  clip-path: inset(100% 0 0 0);
  transition:
    opacity 0.3s var(--deka-ease-out),
    transform 0.3s var(--deka-ease-out),
    clip-path 0.3s var(--deka-ease-out);
}

.is-active .deka-apartment-faq__question {
  opacity: 1;
  transform: none;
  clip-path: inset(-10% 0 -25% 0);
  transition:
    opacity 0.4s var(--deka-ease-out) 0.2s,
    transform 0.9s var(--deka-faq-clip) 0.2s,
    clip-path 0.9s var(--deka-faq-clip) 0.2s;
}

.is-active .deka-apartment-faq__answer > :not(ul):not(ol),
.is-active .deka-apartment-faq__answer li {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.6s var(--deka-ease-out),
    transform 0.8s var(--deka-ease-out);
  transition-delay: calc(0.35s + var(--i, 0) * 0.05s);
}

/* ==========================================================================
   Without JavaScript: no tabs, the panels one after another
   ========================================================================== */

.deka-no-js .deka-apartment-faq__tabs { display: none; }

.deka-no-js .deka-apartment-faq__panel {
  grid-area: auto;
  visibility: visible;
}

.deka-no-js .deka-apartment-faq__panel + .deka-apartment-faq__panel { margin-top: var(--deka-space-xl); }

.deka-no-js :is(.deka-apartment-faq__question, .deka-apartment-faq__answer > *, .deka-apartment-faq__answer li) {
  opacity: 1;
  transform: none;
  clip-path: none;
}

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

@media (max-width: 64rem) { /* 1024 */
  .deka-apartment-faq { padding-inline: var(--deka-space-md); }

  .deka-apartment-faq__body {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--deka-space-lg);
  }

  .deka-apartment-faq__media {
    position: relative;
    top: auto;
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 40rem) { /* 640 */
  .deka-apartment-faq { padding: var(--deka-space-xl) 1.25rem; }

  .deka-apartment-faq__title { font-size: 1.5rem; }

  /* The row scrolls sideways, edge to edge. */
  .deka-apartment-faq__tabs {
    gap: 1.25rem;
    margin-inline: -1.25rem;
    padding-inline: 1.25rem;
  }

  .deka-apartment-faq__tab { font-size: 0.9375rem; }

  .deka-apartment-faq__answer { font-size: 0.9375rem; }
}

@media (prefers-reduced-motion: reduce) {
  .deka-apartment-faq__indicator,
  .deka-apartment-faq__image,
  .deka-apartment-faq__panel,
  .deka-apartment-faq__question,
  .deka-apartment-faq__answer > *,
  .deka-apartment-faq__answer li {
    transition: none !important;
  }

  .deka-apartment-faq__image { transform: none; }
}