/**
 * Apartment inspiration — the two renovation finishes and their galleries.
 *
 * Values from the live apartment template at 1440px:
 *
 *   section   #EAE5E1, padded 60/40; heading as the FAQ section above it
 *   cards     two 480px tiles 20px apart, photo cover-fitted, content padded 40
 *   label     12px spaced 3px in #E0E0E0; finish name Playfair Display 32/700
 *   "view"    12px spaced 1.5px, with a 20px picture icon
 *   lightbox  95% black backdrop blurred 20px; frame 90% × 85vh (max 1400) with
 *             8px corners on black; 50px glass buttons 30px in from the edges;
 *             dots 8px (current 24px) in a glass pill 30px off the bottom
 *
 * Phones follow the live site too: the cards become a sideways-scrolling row.
 */

.deka-inspiration {
  background: var(--deka-sand-100);
}

.deka-inspiration__inner {
  max-width: 112.5rem; /* 1800 — the header's width, so the heading lines up with it */
  margin-inline: auto;
  padding: 3.75rem var(--deka-space-lg) 2.5rem; /* 60 / 40 */
}

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

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

.deka-inspiration__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-inspiration__title strong {
  font-weight: var(--deka-weight-bold);
}

/* ==========================================================================
   Cards
   ========================================================================== */

.deka-inspiration__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem; /* 20 */
}

.deka-inspiration-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 30rem; /* 480 */
  padding: 2.5rem; /* 40 */
  overflow: hidden;
  isolation: isolate;
  background: var(--deka-black);
  color: var(--deka-white);
  text-align: left;
}

.deka-inspiration-card__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--deka-duration-slower) var(--deka-ease-out);
}

/* A soft shade under the type, so white text holds on the lighter finish. */
.deka-inspiration-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgb(0 0 0 / 45%), rgb(0 0 0 / 0%) 55%);
  opacity: 0.8;
  transition: opacity var(--deka-duration-slow) var(--deka-ease-out);
}

.deka-inspiration-card:hover .deka-inspiration-card__image { transform: scale(1.05); }
.deka-inspiration-card:hover::after { opacity: 1; }

.deka-inspiration-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.deka-inspiration-card__label {
  margin-bottom: 0.5rem;
  font-family: var(--deka-font-body);
  font-size: 0.75rem; /* 12 */
  line-height: 1.5;
  letter-spacing: 3px;
  color: #e0e0e0;
}

.deka-inspiration-card__name {
  margin-bottom: 1.25rem; /* 20 */
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 2rem; /* 32 */
  font-weight: var(--deka-weight-bold);
  line-height: 1.2;
}

.deka-inspiration-card__view {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem; /* 10 */
  padding-block: 0.75rem; /* 12 */
  font-family: var(--deka-font-body);
  font-size: 0.75rem; /* 12 */
  line-height: 1.5;
  letter-spacing: 1.5px;
  color: rgb(255 255 255 / 90%);
}

.deka-inspiration-card__view svg {
  width: 20px;
  height: 20px;
  color: rgb(255 255 255 / 80%);
  transition: transform var(--deka-duration-base) var(--deka-ease-out);
}

.deka-inspiration-card:hover .deka-inspiration-card__view svg { transform: translateX(3px); }

/* ==========================================================================
   Lightbox
   ========================================================================== */

.deka-gallery {
  width: min(90vw, 87.5rem); /* 90%, max 1400 */
  height: 85vh;
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  overflow: visible;
  background: transparent;
  color: var(--deka-white);
}

.deka-gallery[open] {
  animation: deka-gallery-in 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Raw values: older engines do not pass custom properties into ::backdrop. */
.deka-gallery::backdrop {
  background: rgb(0 0 0 / 95%);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.deka-gallery[open]::backdrop {
  animation: deka-gallery-fade 300ms ease-out;
}

@keyframes deka-gallery-in {
  from { opacity: 0; transform: scale(0.98); }
}

@keyframes deka-gallery-fade {
  from { opacity: 0; }
}

.deka-gallery :focus-visible {
  outline-color: var(--deka-white);
}

.deka-gallery__viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--deka-radius-sm); /* 8 */
  background: var(--deka-black);
  /* Vertical pans still scroll; horizontal drags reach the swipe handler. */
  touch-action: pan-y;
  user-select: none;
}

.deka-gallery__track {
  display: flex;
  height: 100%;
  transition: transform var(--deka-duration-slow) var(--deka-ease-in-out);
}

.deka-gallery__slide {
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
}

.deka-gallery__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- Buttons --------------------------------------------------------------- */

.deka-gallery__button {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3.125rem; /* 50 */
  height: 3.125rem;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 50%;
  background: rgb(255 255 255 / 10%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--deka-white);
  transition: background-color var(--deka-duration-base) var(--deka-ease-out),
              opacity var(--deka-duration-base) var(--deka-ease-out);
}

.deka-gallery__button:hover { background-color: rgb(255 255 255 / 20%); }

.deka-gallery__button svg {
  width: 24px;
  height: 24px;
}

.deka-gallery__close {
  top: 1.875rem; /* 30 */
  right: 1.875rem;
}

.deka-gallery__nav {
  top: 50%;
  opacity: 0.7;
  transform: translateY(-50%);
}

.deka-gallery__nav:hover { opacity: 1; }
.deka-gallery__nav--prev { left: 1.875rem; }
.deka-gallery__nav--next { right: 1.875rem; }

/* --- Dots ------------------------------------------------------------------ */

.deka-gallery__dots {
  position: absolute;
  bottom: 1.875rem; /* 30 */
  left: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.625rem; /* 10 */
  padding: 0.9375rem 1.5625rem; /* 15 / 25 */
  border-radius: var(--deka-radius-pill);
  background: rgb(255 255 255 / 10%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transform: translateX(-50%);
}

.deka-gallery__dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: rgb(255 255 255 / 40%);
  transition: width var(--deka-duration-base) var(--deka-ease-out),
              background-color var(--deka-duration-base) var(--deka-ease-out);
}

/* An 8px dot is too small to hit on a phone; this widens the target, not the dot. */
.deka-gallery__dot::before {
  content: '';
  position: absolute;
  inset: -10px -5px;
}

.deka-gallery__dot.is-active {
  width: 24px;
  background: var(--deka-white);
}

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

@media (max-width: 64rem) { /* 1024 — side padding follows the header */
  .deka-inspiration__inner { padding-inline: var(--deka-space-md); }

  .deka-inspiration-card {
    height: 26rem;
    padding: var(--deka-space-lg);
  }
}

@media (max-width: 40rem) { /* 640 — live: a sideways row of 75%-wide cards */
  .deka-inspiration__inner {
    padding: var(--deka-space-xl) 0 1.25rem 1.25rem; /* 48 / 20 */
  }

  .deka-inspiration__head { padding-right: 1.25rem; }

  .deka-inspiration__cards {
    display: flex;
    gap: 0.625rem;
    padding-right: 1.25rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

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

  .deka-inspiration-card {
    flex: 0 0 75vw;
    height: 30rem;
    padding: 1.5625rem; /* 25 */
    scroll-snap-align: start;
  }

  .deka-inspiration-card__label { font-size: 0.6875rem; letter-spacing: 2px; }
  .deka-inspiration-card__name { font-size: 1.375rem; } /* 22 */
  .deka-inspiration-card__view { font-size: 0.6875rem; }

  .deka-gallery {
    width: calc(100vw - 3.375rem);
    height: 72vh;
  }

  .deka-gallery__button {
    width: 2.25rem; /* 36 */
    height: 2.25rem;
  }

  .deka-gallery__button svg {
    width: 18px;
    height: 18px;
  }

  .deka-gallery__close { top: 1.125rem; right: 1.125rem; }
  .deka-gallery__nav--prev { left: 0.875rem; }
  .deka-gallery__nav--next { right: 0.875rem; }

  .deka-gallery__dots {
    bottom: 1.5rem;
    padding: 0.625rem 1.125rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .deka-gallery[open],
  .deka-gallery[open]::backdrop { animation: none; }

  .deka-inspiration-card:hover .deka-inspiration-card__image,
  .deka-inspiration-card:hover .deka-inspiration-card__view svg { transform: none; }
}