/**
 * Closing band.
 *
 * A full-bleed band, at least 560px tall, meeting the footer: copy top-left on
 * the page's content edge over a darkened photograph. Selling projects carry a
 * compact lead form; sold-out ones (--sold-out) carry up to two current
 * projects as photo cards and a call-back button — beside the copy from 64rem,
 * under it below that, and stacked one per row under 48rem.
 *
 * The live site also sets `background-attachment: fixed` here. That is dropped:
 * a fixed background resolves `cover` against the viewport rather than the
 * element, so the image is cropped differently at every scroll position and is
 * badly wrong on short viewports. It also disables compositing on iOS.
 */

/* Full bleed and flush with the footer: no side margins, nothing underneath.
   The copy keeps to the content edge every section above shares — the
   header's 1800 frame and side padding (base.css, .deka-section). */
.deka-project-cta {
  padding-top: var(--deka-space-3xl);
}

body:has(.deka-project-cta) .deka-footer { margin-top: 0; }

.deka-project-cta__band {
  position: relative;
  isolation: isolate; /* keeps the overlay and copy off the page's z-index scale */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--deka-space-2xl);
  min-height: 35rem; /* 560 */
  padding-block: clamp(3.5rem, 5vw, 5.5rem);
  padding-inline: max(var(--deka-space-lg), calc((100% - 112.5rem) / 2 + var(--deka-space-lg)));
  border-radius: 0;
  overflow: hidden;
  background: var(--deka-teal-900);
}

/* An <img> rather than a background: it can be lazy, it can be served
   responsively, and it does not block first paint of the copy above it. */
.deka-project-cta__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.deka-project-cta__band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(0 0 0 / 0.5);
}

/* Photo cards sit on this photograph, so it recedes further behind them. */
.deka-project-cta--sold-out .deka-project-cta__band::before {
  background: rgb(0 0 0 / 0.72);
}

/* --- Copy ------------------------------------------------------------------ */

.deka-project-cta__body {
  display: flex;
  flex-direction: column;
  gap: var(--deka-space-2xl);
  width: 100%;
  max-width: 62rem;
}

/* The shared section title (base.css) sets the size; this only sets it on
   the dark ground. */
.deka-project-cta__title {
  margin: 0;
  font-weight: var(--deka-weight-regular);
  line-height: 1.3;
  color: var(--deka-text-on-inverse);
  text-wrap: balance;
}

.deka-project-cta__title p { margin: 0; }

/* --- Sold out: current projects ---------------------------------------------
   The section is .deka-theme-dark, so --deka-text, --deka-border and
   --deka-action resolve for the dark band (Cashmere action under the brand). */

.deka-project-cta__body--projects {
  max-width: none;
  gap: var(--deka-space-2xl);
}

.deka-project-cta__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--deka-space-xl);
  max-width: 40rem;
}

.deka-project-cta .deka-section-head { margin-bottom: 0; }
.deka-project-cta .deka-section-head__eyebrow { color: var(--deka-text-muted); }

.deka-project-cta__call {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0 var(--deka-space-xl);
  border: 0;
  border-radius: var(--deka-radius-sm);
  background: var(--deka-action);
  color: var(--deka-action-text);
  font: inherit;
  font-size: var(--deka-text-sm);
  font-weight: var(--deka-weight-medium);
  cursor: pointer;
  transition: background-color var(--deka-duration-base) var(--deka-ease-out),
              color var(--deka-duration-base) var(--deka-ease-out);
}

.deka-project-cta__call:hover { background: var(--deka-text-muted); }

.deka-project-cta__call:focus-visible {
  outline: 2px solid var(--deka-text);
  outline-offset: 3px;
}

.deka-project-cta__projects {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--deka-space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.deka-project-cta__item { display: flex; }

/* One link per card: photo, darkening toward the foot where the text sits. */
.deka-project-cta__card {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--deka-space-md);
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: var(--deka-space-lg);
  border: 1px solid var(--deka-border);
  border-radius: var(--deka-radius-sm);
  overflow: hidden;
  color: var(--deka-text);
  text-decoration: none;
  transition: border-color var(--deka-duration-base) var(--deka-ease-out);
}

.deka-project-cta__card-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--deka-surface-raised); /* holds the card when a project has no photo */
}

.deka-project-cta__card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / 0) 35%, rgb(0 0 0 / 0.85) 100%);
}

.deka-project-cta__card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--deka-duration-slower) var(--deka-ease-out);
}

.deka-project-cta__card-body {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

.deka-project-cta__card-title {
  margin: 0 0 0.25rem;
  font-family: var(--deka-font-display);
  font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem); /* 22 → 28 */
  font-weight: var(--deka-weight-medium);
  line-height: 1.1;
  color: inherit;
}

.deka-project-cta__card-meta,
.deka-project-cta__card-count {
  font-size: var(--deka-text-xs);
  font-weight: var(--deka-weight-medium);
  line-height: 1.4;
}

.deka-project-cta__card-meta { color: var(--deka-text-muted); }
.deka-project-cta__card-count { color: var(--deka-action); }

.deka-project-cta__card-arrow {
  display: inline-flex;
  flex-shrink: 0;
  transition: transform var(--deka-duration-base) var(--deka-ease-out);
}

.deka-project-cta__card:hover,
.deka-project-cta__card:focus-visible { border-color: var(--deka-action); }

.deka-project-cta__card:focus-visible {
  outline: 2px solid var(--deka-text);
  outline-offset: 3px;
}

.deka-project-cta__card:hover .deka-project-cta__card-image { transform: scale(1.04); }
.deka-project-cta__card:hover .deka-project-cta__card-arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .deka-project-cta__card-image,
  .deka-project-cta__card-arrow { transition: none; }

  .deka-project-cta__card:hover .deka-project-cta__card-image,
  .deka-project-cta__card:hover .deka-project-cta__card-arrow { transform: none; }
}

/* --- Responsive ------------------------------------------------------------ */

/* Side by side from tablets. */
@media (min-width: 48rem) {
  .deka-project-cta__projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Laptops up: the copy and button on the left, held to the bottom edge of the
   cards on the right; the cards turn portrait so the band stays compact. */
@media (min-width: 64rem) {
  .deka-project-cta__body--projects {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: end;
    gap: clamp(2.5rem, 5vw, 6rem);
  }

  .deka-project-cta__card { aspect-ratio: 4 / 5; }
}

@media (max-width: 48rem) { /* 768 */
  .deka-project-cta { padding-top: var(--deka-space-2xl); }
}

/*
 * Phones: the band edge to edge, and the form 20px under the copy at about
 * 82% of its width, with the button's label starting on the left like the
 * fields' placeholders. Side padding drops to 20px with the sections' (40rem).
 */
@media (max-width: 47.9375rem) { /* 767 */
  .deka-project-cta__band {
    gap: 1.25rem;
    min-height: 0;
    padding-block: 2.5rem;
  }

  .deka-project-cta__body { gap: 1.25rem; }
  .deka-project-cta__body--projects { gap: var(--deka-space-xl); }

  .deka-project-cta__title { line-height: 1.35; }

  .deka-project-cta .deka-form--compact { max-width: 82%; }

  .deka-project-cta .deka-form--compact .deka-form__submit { justify-content: flex-start; }

  .deka-project-cta__card { padding: var(--deka-space-md); }
}

@media (max-width: 40rem) { /* 640 */
  .deka-project-cta__band { padding-inline: 1.25rem; }
}