/**
 * Single project hero.
 *
 * The photograph fills the screen; the type sits at the bottom-left on the
 * same 1800 frame and side padding as the sections below, so the title lines
 * up with every heading on the page. Under the title, one hairline carries
 * the status strip and the actions: side by side on wide screens, stacked
 * below 75rem, and the statuses go two-up on phones. Each button opens with
 * a square icon cell whose icon plays on hover and, now and then, at rest.
 *
 * The section is `.deka-theme-dark`, so --deka-text and --deka-action resolve
 * to their light-on-dark values here (the brand layer maps the action to
 * Cashmere).
 *
 * Without a banner the same layout sits on the dark ground. Without JS it is
 * complete; the entrance is CSS and the parallax only adds drift.
 */

.deka-project-hero {
  /* The dark theme's hairline, so the brand's line colour reaches every rule
     here — the vertical separators and, on phones, the rule between rows. */
  --deka-project-hero-rule: var(--deka-border);
  /* Ghost outline: the light text at 55%. A browser without color-mix() drops
     to the border's currentColor, a solid light outline. */
  --deka-project-hero-outline: color-mix(in srgb, var(--deka-white) 55%, transparent);

  position: relative;
  display: flex;
  align-items: flex-end;
  /* The header is transparent and out of flow here, so the hero runs under it
     and is itself one screen tall; the padding keeps the type clear of it. */
  min-height: 100vh;
  min-height: 100svh;
  padding-top: var(--deka-header-height);
  overflow: hidden;
  isolation: isolate;
  background-color: var(--deka-surface-page);
  color: var(--deka-text);
}

/* The admin bar pushes the page down; without this the foot of the hero sits
   just past the fold for logged-in reviewers only. */
.admin-bar .deka-project-hero {
  min-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
  min-height: calc(100svh - var(--wp-admin--admin-bar--height, 32px));
}

/* --- Photograph ------------------------------------------------------------ */

.deka-project-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

/* 120% tall from -10% so the in-frame parallax never shows an edge. */
.deka-project-hero__image {
  position: absolute;
  top: -10%;
  left: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 120%;
  object-fit: cover;
  object-position: center;
}

/* Darkens the top for the header and the bottom for the type; the middle of
   the picture is left alone. */
.deka-project-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(34 33 34 / 50%) 0%, rgb(34 33 34 / 0%) 26%),
    linear-gradient(0deg, rgb(34 33 34 / 85%) 0%, rgb(34 33 34 / 45%) 38%, rgb(34 33 34 / 0%) 68%);
}

.deka-project-hero--plain .deka-project-hero__scrim { display: none; }

/* --- Content --------------------------------------------------------------- */

.deka-project-hero__inner {
  width: 100%;
  max-width: 112.5rem; /* 1800 — the section frame */
  margin-inline: auto;
  padding: var(--deka-space-2xl) var(--deka-space-lg) var(--deka-space-xl);
}

.deka-project-hero__eyebrow {
  margin: 0 0 var(--deka-space-sm);
  font-family: var(--deka-font-body);
  font-size: var(--deka-text-xs);
  font-weight: var(--deka-weight-medium);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--deka-text-muted);
}

.deka-project-hero__title {
  max-width: 18ch;
  margin: 0;
  font-family: var(--deka-font-display);
  font-size: clamp(2.75rem, 1.9rem + 3.6vw, 5rem); /* 44 → 80 */
  font-weight: var(--deka-weight-bold);
  line-height: 1.02;
  color: var(--deka-text);
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* --- Foot: status strip and actions under one rule ------------------------- */

.deka-project-hero__foot {
  margin-top: clamp(1.75rem, 1rem + 2vw, 3rem);
  border-top: 1px solid var(--deka-project-hero-rule);
}

.deka-project-hero__statuses {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  margin: 0;
}

/* Cells hang from the rule above, so the separators meet it. */
.deka-project-hero__status {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
  padding: 1.25rem var(--deka-space-lg) 0;
  border-inline-start: 1px solid var(--deka-project-hero-rule);
}

.deka-project-hero__status:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.deka-project-hero__status dt {
  margin: 0;
  font-family: var(--deka-font-body);
  font-size: var(--deka-text-xs);
  font-weight: var(--deka-weight-medium);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--deka-text-muted);
}

.deka-project-hero__status dd {
  margin: 0;
  font-family: var(--deka-font-body);
  font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem); /* 15 → 16 */
  font-weight: var(--deka-weight-regular);
  line-height: 1.5;
  color: var(--deka-text);
}

.deka-project-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--deka-space-xs);
  padding-top: var(--deka-space-md);
}

.deka-project-hero__button,
.deka-project-hero__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 3rem;
  padding: 0 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--deka-radius-sm);
  font-family: var(--deka-font-body);
  font-size: var(--deka-text-xs);
  font-weight: var(--deka-weight-medium);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The icon cell sits flush with the start edge, so only the end is padded;
   the label is left-aligned beside it and, when a phone stretches the
   button, the arrow keeps to the far end. */
.deka-project-hero__button {
  justify-content: flex-start;
  padding-inline: 0 1.5rem;
  text-decoration: none;
  transition:
    background-color var(--deka-duration-base) var(--deka-ease-out),
    border-color var(--deka-duration-base) var(--deka-ease-out),
    color var(--deka-duration-base) var(--deka-ease-out);
}

/* Each variant sets the hairline beside its icon cell. */
.deka-project-hero__button--primary {
  --deka-project-hero-icon-rule: color-mix(in srgb, var(--deka-action-text) 22%, transparent);

  background-color: var(--deka-action);
  border-color: var(--deka-action);
  color: var(--deka-action-text);
}

.deka-project-hero__button--ghost {
  --deka-project-hero-icon-rule: var(--deka-project-hero-outline);

  background-color: transparent;
  border-color: var(--deka-project-hero-outline);
  color: var(--deka-white);
}

.deka-project-hero__button:hover,
.deka-project-hero__button:focus-visible {
  background-color: var(--deka-white);
  border-color: var(--deka-white);
  color: var(--deka-black);
}

.deka-project-hero__arrow {
  margin-inline-start: auto;
  transition: transform var(--deka-duration-base) var(--deka-ease-out);
}

.deka-project-hero__button:hover .deka-project-hero__arrow,
.deka-project-hero__button:focus-visible .deka-project-hero__arrow { transform: translateX(0.25rem); }

.deka-project-hero__tag {
  border-color: var(--deka-action);
  color: var(--deka-action);
}

/* The site focus ring is dark; on the photograph it has to be light. */
.deka-project-hero :focus-visible { outline-color: var(--deka-white); }

/* --- Button icons ------------------------------------------------------------
   The floating picker's icons, square: a square cell at the button's start,
   divided from the label by a hairline, its strokes in the label's colour.
   On hover or keyboard focus the button turns light and the cell fills with
   the action colour from the left (on the primary it simply keeps it), so on
   the dark photograph the cell still reads as part of the button; the strokes
   take the action's text colour and the icon acts out its link: the knobs
   slide apart, the pointer steps into the grid's last cell and taps it, the
   arrow drops through. At rest project-hero.js plays the same pose now and
   then (the icon only; the button keeps its colours). */

.deka-project-hero__icon {
  position: relative;
  isolation: isolate;
  display: flex;
  flex: none;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  width: 3rem; /* the button's height, so the cell is square */
  /* Over the button's 1px border on three sides, so the hover fill meets its
     outer edge; the end margin tops the gap up to 1.125rem. */
  margin: -1px 0.375rem -1px -1px;
  overflow: hidden;
  box-shadow: inset -1px 0 0 var(--deka-project-hero-icon-rule, transparent);
  transition: color var(--deka-duration-base) var(--deka-ease-out);
}

.deka-project-hero__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--deka-action);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--deka-duration-base) var(--deka-ease-out);
}

.deka-project-hero__button:is(:hover, :focus-visible) .deka-project-hero__icon { color: var(--deka-action-text); }
.deka-project-hero__button:is(:hover, :focus-visible) .deka-project-hero__icon::before { transform: scaleX(1); }

.deka-project-hero__glyph {
  display: block;
  width: 1.375rem; /* 22 */
  height: 1.375rem;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

/* Parts move in the 24-unit grid of the drawing. The moves use `translate`
   and the tap uses `scale`, so the two compose instead of overriding each
   other on one `transform`. */
.deka-project-hero__glyph * { transform-box: view-box; }

.deka-project-hero__icon-knob,
.deka-project-hero__icon-cursor {
  fill: currentColor;
  stroke: none;
  transition: translate var(--deka-duration-slow) var(--deka-ease-out);
}

/* Scaled about the pointer's tip, so a tap presses it into the cell. */
.deka-project-hero__icon-cursor { transform-origin: 16.5px 15.5px; }

.deka-project-hero__icon-target {
  fill: currentColor;
  fill-opacity: 0;
  transition: fill-opacity var(--deka-duration-base) var(--deka-ease-out);
}

/* A thin square ring that grows out of the tapped cell; its stroke stays
   thin while it scales. */
.deka-project-hero__icon-ripple {
  opacity: 0;
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
  transform-origin: 14.5px 13.5px;
}

/* The pose, on hover, on keyboard focus and when project-hero.js plays it at
   rest (`is-playing`). Out of it, the same transitions carry the parts home,
   so leaving is as smooth as arriving and a pointer that lands mid-play
   simply joins it. */
.deka-project-hero__button:is(:hover, :focus-visible, .is-playing) .deka-project-hero__icon-knob--a { translate: 6px 0; }
.deka-project-hero__button:is(:hover, :focus-visible, .is-playing) .deka-project-hero__icon-knob--b { translate: -6px 0; }
.deka-project-hero__button:is(:hover, :focus-visible, .is-playing) .deka-project-hero__icon-cursor { translate: -3px -3px; }
.deka-project-hero__button:is(:hover, :focus-visible, .is-playing) .deka-project-hero__icon-target { fill-opacity: 0.35; }

@media (prefers-reduced-motion: no-preference) {
  /* The second knob a moment behind the first, there and back. */
  .deka-project-hero__icon-knob--b { transition-delay: 80ms; }

  /* The pointer arrives, presses, and the cell fills as a ring spreads. */
  .deka-project-hero__button:is(:hover, :focus-visible, .is-playing) .deka-project-hero__icon-cursor {
    animation: deka-project-hero-tap 320ms var(--deka-ease-in-out) 160ms;
  }

  .deka-project-hero__button:is(:hover, :focus-visible, .is-playing) .deka-project-hero__icon-target { transition-delay: 300ms; }

  .deka-project-hero__button:is(:hover, :focus-visible, .is-playing) .deka-project-hero__icon-ripple {
    animation: deka-project-hero-ripple 900ms var(--deka-ease-out) 300ms;
  }

  .deka-project-hero__button:is(:hover, :focus-visible, .is-playing) .deka-project-hero__icon-arrow {
    animation: deka-project-hero-drop 700ms var(--deka-ease-in-out);
  }
}

@keyframes deka-project-hero-tap {
  50% { scale: 0.84; }
}

@keyframes deka-project-hero-ripple {
  from {
    opacity: 0.9;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(1.9);
  }
}

/* Out at the bottom of the cell, back in from the top. */
@keyframes deka-project-hero-drop {
  0%, 100% {
    opacity: 1;
    transform: translateY(0);
  }

  45% {
    opacity: 0;
    transform: translateY(12px);
  }

  55% {
    opacity: 0;
    transform: translateY(-12px);
  }
}

/* --- Entrance -------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .deka-project-hero__media {
    animation: deka-project-hero-settle 1.8s var(--deka-ease-out) both;
  }

  .deka-project-hero__inner > * {
    animation: deka-project-hero-rise var(--deka-duration-slower) var(--deka-ease-out) both;
  }

  .deka-project-hero__inner > :nth-child(2) { animation-delay: 90ms; }
  .deka-project-hero__inner > :nth-child(3) { animation-delay: 180ms; }
}

@keyframes deka-project-hero-settle {
  from { transform: scale(1.06); }
}

@keyframes deka-project-hero-rise {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }
}

/* --- Wide: statuses left, actions at the far end of the same row ------------ */

@media (min-width: 75rem) {
  .deka-project-hero__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    column-gap: var(--deka-space-xl);
  }

  .deka-project-hero__statuses {
    grid-auto-columns: minmax(8rem, max-content);
  }

  /* Pushed to the far end only beside the statuses; alone it stays on the
     title's left edge. */
  .deka-project-hero__statuses + .deka-project-hero__actions { margin-inline-start: auto; }
}

/* --- Phones ---------------------------------------------------------------- */

@media (max-width: 48rem) {
  .deka-project-hero,
  .admin-bar .deka-project-hero {
    min-height: 80vh;
    min-height: 80svh;
  }
}

@media (max-width: 40rem) {
  .deka-project-hero__inner {
    padding: var(--deka-space-xl) 1.25rem var(--deka-space-lg);
  }

  /* Two-up, with a rule between rows; an odd last cell takes the full row so
     that rule runs the whole width. */
  .deka-project-hero__statuses {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .deka-project-hero__status {
    padding: 1rem 0 1rem 1rem;
  }

  .deka-project-hero__status:nth-child(odd) {
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  .deka-project-hero__status:nth-child(n + 3) {
    border-top: 1px solid var(--deka-project-hero-rule);
  }

  .deka-project-hero__status:last-child:nth-child(odd) { grid-column: 1 / -1; }

  .deka-project-hero__statuses + .deka-project-hero__actions { padding-top: var(--deka-space-2xs); }

  .deka-project-hero__button {
    flex: 1 1 auto;
    padding-inline: 0 1.25rem;
  }
}