/**
 * 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  the project gallery's (project-gallery-v2.css), not the live one
 *
 * 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 — the project gallery's (project-gallery-v2.css): full screen on
   the night ground, a bar (finish · counter · close) over the photo, long
   hairline arrows beside it and a filmstrip under it. Colours come from the
   brand tokens (--dk-*) when present, with the theme's as fallbacks.
   ========================================================================== */

.deka-inspiration-lb {
  --deka-ilb-off: var(--dk-off, var(--deka-white));
  --deka-ilb-accent: var(--dk-cashmere, var(--deka-oxblood-500));
  --deka-ilb-line: var(--dk-line, rgb(255 255 255 / 16%));
  --deka-ilb-night: #171617;
  --deka-ilb-mono: var(--dk-mono, var(--deka-font-body));
  --deka-ilb-ease: var(--dk-ease, var(--deka-ease-out));
  --deka-ilb-ease-out: var(--deka-ease-out, cubic-bezier(.22, 1, .36, 1));
  --deka-ilb-bar: 4.5rem;
  --deka-ilb-film: 7.25rem;
  --deka-ilb-gutter: var(--deka-gutter, 2rem);
  --deka-ilb-shaft: clamp(56px, 2rem + 3vw, 84px);
  /* the photo keeps clear of the arrows: gutter, arrow, then air */
  --deka-ilb-side: calc(var(--deka-ilb-gutter) + var(--deka-ilb-shaft) + clamp(1.5rem, 2.5vw, 2.75rem));

  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--deka-ilb-night);
  color: var(--deka-ilb-off);
  font-family: var(--deka-font-body);
  overscroll-behavior: contain;
  -webkit-tap-highlight-color: transparent;
}

/*
 * Opening and closing are transitions on .is-open (apartment-inspiration.js
 * adds it on the frame after showModal() and removes it before close()), so the
 * ground fades in from nothing and back out, never cutting to black. The
 * backdrop stays clear: the dialog is its own full-screen ground.
 */
.deka-inspiration-lb {
  opacity: 0;
  transition: opacity .45s var(--deka-ilb-ease);
}

.deka-inspiration-lb.is-open { opacity: 1; }
.deka-inspiration-lb::backdrop { background: transparent; }
.deka-inspiration-lb:focus { outline: none; }

.deka-inspiration-lb :focus-visible { outline: 2px solid var(--deka-ilb-accent); outline-offset: 2px; border-radius: 0; }

/* The mono labels: the brand's DM Mono 11px. */
.deka-inspiration-lb__title,
.deka-inspiration-lb__count,
.deka-inspiration-lb__close-label {
  font-family: var(--deka-ilb-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
}

/* --- Bar ------------------------------------------------------------------- */

.deka-inspiration-lb__bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  height: var(--deka-ilb-bar);
  padding: 0 var(--deka-ilb-gutter);
  border-bottom: 1px solid var(--deka-ilb-line);
}

.deka-inspiration-lb__title {
  margin: 0;
  overflow: hidden;
  color: rgb(250 247 246 / 72%);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.deka-inspiration-lb__count {
  margin: 0;
  color: var(--deka-ilb-accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.deka-inspiration-lb__close {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 44px;
  margin-right: -10px;
  padding: 0 10px 0 12px;
  border: 0;
  background: none;
  color: var(--deka-ilb-off);
  cursor: pointer;
}

.deka-inspiration-lb__close-x { position: relative; width: 20px; height: 20px; transition: transform .6s var(--deka-ilb-ease-out); }

.deka-inspiration-lb__close-x::before,
.deka-inspiration-lb__close-x::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -2px;
  right: -2px;
  height: 1px;
  background: currentColor;
  transform: rotate(45deg);
}

.deka-inspiration-lb__close-x::after { transform: rotate(-45deg); }

.deka-inspiration-lb__close-label { transition: color .35s var(--deka-ilb-ease); }

@media (hover: hover) and (pointer: fine) {
  .deka-inspiration-lb__close:hover .deka-inspiration-lb__close-x { transform: rotate(90deg); }
  .deka-inspiration-lb__close:hover .deka-inspiration-lb__close-label { color: var(--deka-ilb-accent); }
}

/* --- Stage: the photos, one viewport wide each, between bar and filmstrip ---- */

.deka-inspiration-lb__stage {
  position: absolute;
  top: var(--deka-ilb-bar);
  bottom: var(--deka-ilb-film);
  left: 0;
  right: 0;
  overflow: hidden;
  touch-action: pan-y pinch-zoom; /* sideways swipes are the script's */
}

.deka-inspiration-lb__track {
  display: flex;
  height: 100%;
  transition: transform .7s var(--deka-ilb-ease-out);
}

.deka-inspiration-lb__slide {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 1rem var(--deka-ilb-side) 1.25rem;
  box-sizing: border-box;
}

.deka-inspiration-lb__image {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  background: rgb(250 247 246 / 4%);
  -webkit-user-drag: none;
  user-select: none;
  /* In once it has loaded (is-loaded) and the lightbox is open: no pop. */
  opacity: 0;
  transform: scale(.97);
  transition: opacity .6s var(--deka-ilb-ease), transform .9s var(--deka-ilb-ease-out);
}

.deka-inspiration-lb.is-open .deka-inspiration-lb__image.is-loaded {
  opacity: 1;
  transform: none;
}

/* --- Arrows: long hairlines in Off-white, the gallery's ----------------------- */

.deka-inspiration-lb__arrow {
  position: absolute;
  top: calc(var(--deka-ilb-bar) + (100% - var(--deka-ilb-bar) - var(--deka-ilb-film)) / 2 - 32px);
  z-index: 2;
  width: calc(var(--deka-ilb-shaft) + 20px);
  height: 64px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--deka-ilb-off);
  cursor: pointer;
}

.deka-inspiration-lb__arrow--prev { left: calc(var(--deka-ilb-gutter) - 10px); }
.deka-inspiration-lb__arrow--next { right: calc(var(--deka-ilb-gutter) - 10px); }

.deka-inspiration-lb__arrow-in {
  position: absolute;
  top: 50%;
  right: 10px;
  width: var(--deka-ilb-shaft);
  height: 11px;
  margin-top: -5.5px;
}

.deka-inspiration-lb__arrow--prev .deka-inspiration-lb__arrow-in { right: auto; left: 10px; transform: scaleX(-1); }

.deka-inspiration-lb__arrow-shaft {
  position: absolute;
  right: 0;
  top: 5px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform-origin: 100% 50%;
  transform: scaleX(.72);
  transition: transform .7s var(--deka-ilb-ease-out);
}

.deka-inspiration-lb__arrow-head {
  position: absolute;
  right: 0;
  top: 1.5px;
  width: 8px;
  height: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateX(-1px) rotate(45deg);
}

@media (hover: hover) and (pointer: fine) {
  .deka-inspiration-lb__arrow:hover .deka-inspiration-lb__arrow-shaft { transform: scaleX(1); }
}

.deka-inspiration-lb__arrow:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }

/* --- Filmstrip ------------------------------------------------------------- */

.deka-inspiration-lb__film {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  height: var(--deka-ilb-film);
  border-top: 1px solid var(--deka-ilb-line);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
  touch-action: pan-x;
}

.deka-inspiration-lb__film::-webkit-scrollbar { display: none; }

.deka-inspiration-lb__film-track {
  display: flex;
  gap: 10px;
  width: max-content;
  margin: 0 auto;
  padding: 6px var(--deka-ilb-gutter);
  list-style: none;
}

.deka-inspiration-lb__thumb {
  position: relative;
  display: block;
  flex: none;
  width: 5.5rem;
  height: 3.75rem;
  padding: 0;
  border: 0;
  background: rgb(250 247 246 / 6%);
  opacity: .42;
  cursor: pointer;
  outline: 1px solid transparent;
  outline-offset: 3px;
  transition: opacity .4s var(--deka-ilb-ease), outline-color .4s var(--deka-ilb-ease);
}

.deka-inspiration-lb__thumb img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  pointer-events: none;
}

.deka-inspiration-lb__thumb[aria-current="true"] { opacity: 1; outline-color: var(--deka-ilb-accent); }

@media (hover: hover) and (pointer: fine) {
  .deka-inspiration-lb__thumb:not([aria-current="true"]):hover { opacity: .8; }
}

.deka-inspiration-lb__thumb:focus-visible { outline: 2px solid var(--deka-ilb-accent); outline-offset: 3px; }

/* --- Opening: the chrome settles in after the ground, as in the gallery;
       closing, it leaves first and quickly ------------------------------------ */

.deka-inspiration-lb__bar,
.deka-inspiration-lb__film,
.deka-inspiration-lb__arrow {
  opacity: 0;
  transition: opacity .25s var(--deka-ilb-ease), transform .25s var(--deka-ilb-ease);
}

.deka-inspiration-lb__bar { transform: translateY(-10px); }
.deka-inspiration-lb__film { transform: translateY(10px); }
.deka-inspiration-lb__arrow--prev { transform: translateX(-10px); }
.deka-inspiration-lb__arrow--next { transform: translateX(10px); }

.deka-inspiration-lb.is-open :is(.deka-inspiration-lb__bar, .deka-inspiration-lb__film, .deka-inspiration-lb__arrow) {
  opacity: 1;
  transform: none;
  transition: opacity .6s var(--deka-ilb-ease) .18s, transform .8s var(--deka-ilb-ease-out) .18s;
}

.deka-inspiration-lb__thumb img { opacity: 0; transition: opacity .4s var(--deka-ilb-ease); }
.deka-inspiration-lb__thumb img.is-loaded { opacity: 1; }

/* While a gallery is open the page behind it stands still. The gutter is kept,
   so hiding the scrollbar does not shift the page sideways under the fade. */
html.deka-inspiration-locked {
  overflow: hidden;
  scrollbar-gutter: stable;
}

/* ==========================================================================
   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; }

}

/* Phones: no arrows (swipe), a slimmer bar and filmstrip, the photo full width. */
@media (max-width: 47.5rem) { /* 760 — as the gallery */
  .deka-inspiration-lb {
    --deka-ilb-bar: 3.5rem;
    --deka-ilb-film: 5.5rem;
    --deka-ilb-side: 0px;
    --deka-ilb-gutter: 1.25rem;
  }

  .deka-inspiration-lb__slide { padding: .75rem 0 1.25rem; }
  .deka-inspiration-lb__arrow { display: none; }
  .deka-inspiration-lb__thumb { width: 4.25rem; height: 2.875rem; }
  .deka-inspiration-lb__film-track { gap: 8px; }
  .deka-inspiration-lb__close-label { display: none; }
}

/* Short landscape screens: keep the photo the tallest thing in the lightbox. */
@media (max-height: 35rem) {
  .deka-inspiration-lb { --deka-ilb-bar: 3rem; --deka-ilb-film: 4.5rem; }
  .deka-inspiration-lb__thumb { width: 3.75rem; height: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .deka-inspiration-lb { transition-duration: .2s; }
  .deka-inspiration-lb :is(.deka-inspiration-lb__bar, .deka-inspiration-lb__film, .deka-inspiration-lb__arrow),
  .deka-inspiration-lb.is-open :is(.deka-inspiration-lb__bar, .deka-inspiration-lb__film, .deka-inspiration-lb__arrow) { transform: none; transition: opacity .2s linear; }
  .deka-inspiration-lb__image { transform: none; transition: opacity .2s linear; }
  .deka-inspiration-lb__track { transition: none; }
  .deka-inspiration-lb__arrow-shaft,
  .deka-inspiration-lb__close-x { transition: none; }
  @media (hover: hover) and (pointer: fine) {
    .deka-inspiration-lb__close:hover .deka-inspiration-lb__close-x { transform: none; }
  }

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