/**
 * Projects index (the /projects/ archive) — rows of large open cards.
 *
 * Projects on sale two to a row, the rest three to a row, each row a flex line
 * of equal cards. On a desktop with a mouse the card under the pointer (or with
 * keyboard focus) grows within its row and its neighbours give way; the cursor
 * becomes a "ნახვა" square (projects-index.js). Card content rises into place
 * once a row scrolls into view.
 *
 * Colours come from the brand layer's tokens (--dk-*) when present, through the
 * --deka-pa-* set below, so the page reads right with or without the brand.
 */

.deka-pa {
  --deka-pa-black: var(--dk-black, var(--deka-text));
  --deka-pa-off: var(--dk-off, var(--deka-white));
  --deka-pa-accent: var(--dk-cashmere, var(--deka-oxblood-500));
  --deka-pa-graphite: var(--dk-graphite, var(--deka-grey-700));
  --deka-pa-concrete: var(--dk-concrete, var(--deka-grey-200));
  --deka-pa-mono-font: var(--dk-mono, var(--deka-font-body));
  --deka-pa-ease: var(--deka-ease-out);
  --deka-pa-scrim: 20, 19, 20;
  --deka-pa-gap: 10px;
  --deka-pa-pad: clamp(20px, 1.75vw, 28px);

  position: relative;
  max-width: 1840px;
  margin-inline: auto;
  padding: clamp(3rem, 5vw, 5rem) var(--deka-gutter) clamp(4.5rem, 7vw, 7rem);
  color: var(--deka-pa-black);
}

/* The section's own bottom padding is the space before the footer; the
   footer's top margin on top of it doubled the gap. */
.post-type-archive-project .deka-footer { margin-top: 0; }

.deka-pa-display { font-family: var(--deka-font-display); font-stretch: 72%; letter-spacing: 0; }
.deka-pa-mono { font-family: var(--deka-pa-mono-font); font-size: 11px; font-weight: 500; letter-spacing: 0; line-height: 1.4; }

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

.deka-pa__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  column-gap: clamp(1.5rem, 4vw, 5rem);
  row-gap: 1.25rem;
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
}

.deka-pa__title {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  column-gap: .28em;
  margin: 0;
  padding-bottom: .02em;
  font-size: clamp(3rem, 1.5rem + 4.6vw, 6rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--deka-pa-black);
}

.deka-pa__title-lead { font-weight: 300; }

.deka-pa__count {
  align-self: flex-start;
  margin-top: .9em;
  font-size: 11px;
  line-height: 1;
  color: var(--deka-pa-graphite);
}

.deka-pa__desc {
  justify-self: end;
  max-width: 46ch;
  margin: 0;
  padding-bottom: .6em;
  color: var(--deka-pa-graphite);
  font-size: 1rem;
  line-height: 1.65;
}

.deka-pa__empty { color: var(--deka-pa-graphite); }

/* ==========================================================================
   Groups and rows
   ========================================================================== */

.deka-pa__group + .deka-pa__group { margin-top: clamp(3rem, 5vw, 5rem); }

.deka-pa__label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
  color: var(--deka-pa-black);
}

/* A hairline runs from the label to the count at the far end. */
.deka-pa__label::after {
  content: '';
  order: 1;
  flex: 1;
  height: 1px;
  background: var(--deka-pa-concrete);
}

.deka-pa__label-count { order: 2; color: var(--deka-pa-graphite); }

.deka-pa-row {
  display: flex;
  gap: var(--deka-pa-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.deka-pa-row + .deka-pa-row { margin-top: var(--deka-pa-gap); }

.deka-pa-row--2 { height: clamp(460px, 68vh, 680px); }
.deka-pa-row--3 { height: clamp(420px, 58vh, 560px); }

.deka-pa-item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  transition: flex-grow .85s var(--deka-pa-ease);
}

/* A lone card on the last row keeps the row's column width instead of
   stretching across it. */
.deka-pa-row--2 > .deka-pa-item:only-child { flex: 0 1 calc(50% - var(--deka-pa-gap) / 2); }
.deka-pa-row--3 > .deka-pa-item:only-child { flex: 0 1 calc((100% - 2 * var(--deka-pa-gap)) / 3); }

/* The card under the pointer, or with keyboard focus, takes more of its row. */
@media (hover: hover) and (pointer: fine) and (min-width: 64.0625rem) {
  .deka-pa-row--2 > .deka-pa-item:is(:hover, :focus-within) { flex-grow: 1.55; }
  .deka-pa-row--3 > .deka-pa-item:is(:hover, :focus-within) { flex-grow: 1.8; }
}

/* ==========================================================================
   Card
   ========================================================================== */

.deka-pa-card {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  background: #1b1a1b;
  color: var(--deka-pa-off);
  text-decoration: none;
  outline: none;
}

/* An announced project is a button (it opens the "request a call" popup),
   drawn exactly like the linked cards. */
button.deka-pa-card {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  font: inherit;
  text-align: start;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* The site's link hover colour would otherwise reach every inherited label. */
.deka-pa-card:is(:hover, :focus, :active) { color: var(--deka-pa-off); }

.deka-pa-card__media { position: absolute; inset: 0; }

.deka-pa-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 1.1s var(--deka-pa-ease);
  user-select: none;
  -webkit-user-drag: none;
}

.deka-pa-item:is(:hover, :focus-within) .deka-pa-card__img { transform: scale(1); }

/* A quiet fall-off at the top for the tag, a deeper floor for the text. */
.deka-pa-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(var(--deka-pa-scrim), .46) 0%, rgba(var(--deka-pa-scrim), 0) 24%),
    linear-gradient(to top, rgba(var(--deka-pa-scrim), .88) 0%, rgba(var(--deka-pa-scrim), .55) 26%, rgba(var(--deka-pa-scrim), 0) 56%);
  pointer-events: none;
}

/* Keyboard focus: an inset frame that reads on any render. */
.deka-pa-card::before {
  content: '';
  position: absolute;
  inset: 8px;
  z-index: 2;
  border: 2px solid var(--deka-pa-off);
  box-shadow: 0 0 0 1px rgba(34, 33, 34, .45), inset 0 0 0 1px rgba(34, 33, 34, .45);
  opacity: 0;
  pointer-events: none;
}

.deka-pa-card:focus-visible::before { opacity: 1; }

.deka-pa-card__body {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--deka-pa-pad);
  pointer-events: none;
}

.deka-pa-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 24px;
}

/* The tag's arrow tip overhangs the lockup box. */
.deka-pa-card__top .dk-lockup { margin-right: 12px; }

.deka-pa-card__index { color: var(--deka-pa-accent); }

.deka-pa-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .7em;
  height: 30px;
  padding: 0 12px;
  background: rgba(34, 33, 34, .52);
  border: 1px solid rgba(250, 247, 246, .22);
  color: var(--deka-pa-off);
  white-space: nowrap;
}

.deka-pa-pill b { font-weight: 500; color: var(--deka-pa-accent); }

.deka-pa-pill--soon {
  border-color: var(--deka-pa-accent);
  background: var(--deka-pa-accent);
  color: var(--deka-pa-black);
}

.deka-pa-pill__bar {
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -1px;
  height: 1px;
  background: var(--deka-pa-accent);
  transform-origin: 0 50%;
  transform: scaleX(var(--deka-pa-p, 0));
}

.deka-pa-card__mask {
  display: block;
  overflow: hidden;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}

.deka-pa-card__name {
  display: block;
  font-weight: 700;
  line-height: 1.06;
  color: var(--deka-pa-off);
}

.deka-pa-item--lg .deka-pa-card__name { font-size: clamp(2.25rem, 1rem + 2.9vw, 4rem); }
.deka-pa-item--md .deka-pa-card__name { font-size: clamp(1.875rem, .9rem + 2vw, 2.875rem); }

.deka-pa-card__lead { font-weight: 300; }

.deka-pa-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: 14px;
  color: var(--deka-pa-off);
}

.deka-pa-card__facts span + span::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 20px 2px -12px;
  background: var(--deka-pa-accent);
  vertical-align: middle;
}

.deka-pa-card__rule {
  display: block;
  height: 1px;
  margin: 18px 0 14px;
  background: rgba(250, 247, 246, .28);
  transform-origin: 0 50%;
}

.deka-pa-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.deka-pa-card__info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  min-width: 0;
}

.deka-pa-card__status { color: var(--deka-pa-accent); }

.deka-pa-card__loc {
  display: inline-flex;
  align-items: flex-start;
  gap: 7px;
  color: rgba(250, 247, 246, .88);
}

.deka-pa-card__loc svg { width: 9px; height: 12px; margin-top: 1.5px; flex: none; fill: none; stroke: currentColor; stroke-width: 1; }

.deka-pa-card__view {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: none;
  white-space: nowrap;
}

.deka-pa-card__arrow { position: relative; display: block; width: 40px; height: 9px; }

.deka-pa-card__arrow i {
  position: absolute;
  left: 0;
  top: 4px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform-origin: 0 50%;
  transform: scaleX(.6);
  transition: transform .7s var(--deka-pa-ease);
}

.deka-pa-card__arrow svg {
  position: absolute;
  right: 0;
  top: 0;
  width: 6px;
  height: 9px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  transform: translate3d(-16px, 0, 0);
  transition: transform .7s var(--deka-pa-ease);
}

.deka-pa-card:is(:hover, :focus-visible) .deka-pa-card__arrow i { transform: scaleX(1); }
.deka-pa-card:is(:hover, :focus-visible) .deka-pa-card__arrow svg { transform: none; }

/* ==========================================================================
   Reveal: once a row is in view (set by the script; without it nothing hides)
   ========================================================================== */

.deka-pa.is-ready .deka-pa-row:not(.is-in) .deka-pa-card__name { transform: translate3d(0, 108%, 0); }
.deka-pa.is-ready .deka-pa-row:not(.is-in) .deka-pa-card__rule { transform: scaleX(0); }
.deka-pa.is-ready .deka-pa-row:not(.is-in) .deka-pa-pill__bar { transform: scaleX(0); }
.deka-pa.is-ready .deka-pa-row:not(.is-in) :is(.deka-pa-card__top, .deka-pa-card__facts, .deka-pa-card__meta) {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
}
.deka-pa.is-ready .deka-pa-row:not(.is-in) .deka-pa-card__img { opacity: 0; }

.deka-pa.is-ready .deka-pa-row.is-in .deka-pa-item {
  --deka-pa-d: calc(var(--deka-pa-col, 0) * 110ms);
}

.deka-pa.is-ready .deka-pa-row.is-in .deka-pa-item:nth-child(2) { --deka-pa-col: 1; }
.deka-pa.is-ready .deka-pa-row.is-in .deka-pa-item:nth-child(3) { --deka-pa-col: 2; }

.deka-pa.is-ready .deka-pa-row.is-in :is(.deka-pa-card__name, .deka-pa-card__top, .deka-pa-card__facts, .deka-pa-card__meta) {
  transition:
    opacity .7s var(--deka-pa-ease) calc(var(--deka-pa-d) + .25s),
    transform .9s var(--deka-pa-ease) calc(var(--deka-pa-d) + .2s);
}

.deka-pa.is-ready .deka-pa-row.is-in .deka-pa-card__rule { transition: transform 1s var(--deka-pa-ease) calc(var(--deka-pa-d) + .4s); }
.deka-pa.is-ready .deka-pa-row.is-in .deka-pa-pill__bar { transition: transform 1.1s var(--deka-pa-ease) calc(var(--deka-pa-d) + .65s); }
.deka-pa.is-ready .deka-pa-row.is-in .deka-pa-card__img {
  transition: opacity .9s var(--deka-pa-ease) var(--deka-pa-d), transform 1.1s var(--deka-pa-ease);
}

/* ==========================================================================
   Cursor (mouse only, never under reduced motion)
   ========================================================================== */

.deka-pa-cursor { display: none; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .deka-pa.has-cursor .deka-pa-cursor {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 250;
    width: 0;
    height: 0;
    pointer-events: none;
  }

  .deka-pa.has-cursor .deka-pa-card,
  .deka-pa.has-cursor .deka-pa-card * { cursor: none; }
}

.deka-pa-cursor__box {
  position: absolute;
  left: 0;
  top: 0;
  width: 88px;
  height: 88px;
  margin: -44px 0 0 -44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--deka-pa-black);
  box-shadow: inset 0 0 0 1px rgba(250, 247, 246, .14);
  color: var(--deka-pa-off);
  opacity: 0;
  transform: scale(.4);
  transition: transform .55s var(--deka-pa-ease), opacity .4s var(--deka-pa-ease);
}

.deka-pa-cursor__box svg { width: 26px; height: 9px; overflow: visible; fill: none; stroke: var(--deka-pa-accent); stroke-width: 1; }

.deka-pa-cursor.is-on .deka-pa-cursor__box { opacity: 1; transform: scale(1); }

/* Over an announced project the square reads "request a call". */
.deka-pa-cursor__call { display: none; padding-inline: 8px; text-align: center; }
.deka-pa-cursor.is-call .deka-pa-cursor__view { display: none; }
.deka-pa-cursor.is-call .deka-pa-cursor__call { display: block; }

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

/* Below 1024px: no growing on hover; a row of three becomes two plus one. */
@media (max-width: 64rem) {
  .deka-pa-row--3 { flex-wrap: wrap; height: auto; }
  .deka-pa-row--3 > .deka-pa-item { flex: 1 1 calc(50% - var(--deka-pa-gap) / 2); height: clamp(380px, 52vh, 520px); }
  .deka-pa-row--3 > .deka-pa-item:nth-child(3) { flex-basis: 100%; }
  .deka-pa-row--2 { height: clamp(420px, 60vh, 600px); }
}

@media (max-width: 47.9375rem) {
  .deka-pa__head { grid-template-columns: minmax(0, 1fr); }
  .deka-pa__desc { justify-self: start; padding-bottom: 0; font-size: .9375rem; }

  .deka-pa-row,
  .deka-pa-row--2,
  .deka-pa-row--3 { flex-direction: column; height: auto; }

  /* Doubled scope: outranks the row-of-three and lone-card rules above. */
  .deka-pa .deka-pa-row > .deka-pa-item {
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    max-height: 560px;
  }

  .deka-pa-item--lg .deka-pa-card__name,
  .deka-pa-item--md .deka-pa-card__name { font-size: clamp(2rem, 9vw, 2.75rem); }

  .deka-pa-card__meta { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .deka-pa-item,
  .deka-pa-card__img,
  .deka-pa-card__arrow i,
  .deka-pa-card__arrow svg { transition: none; }
  .deka-pa-card__img { transform: none; }
}