/*
 * Apex — home sections: About (Redefining + bento), Selected Clients marquee,
 * Awards table, Featured Work cards. Values measured in the Figma frame
 * "Wireframe - HomePage - Black - v4" (1999px wide, content column x=410).
 */

/* ---------------------------------------------------------------- About */

.apex-about__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4rem;
  padding-right: 2rem; /* 32px */
  margin-bottom: clamp(3rem, 4.8vw, 6rem);
}

.apex-about__title {
  /* token h1: 67px / 84 at the 1999px design width */
  font-size: clamp(2.25rem, 3.352vw, 4.1875rem);
  line-height: 1.254;
  text-transform: uppercase;
  max-width: 14ch;
}

.apex-about__copy {
  flex-shrink: 0;
  width: min(28.5rem, 40%);
  display: grid;
  gap: 1rem;
  font-size: 0.875rem; /* token paragraph 14/18 */
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--wp--custom--color--text--100);
}

/* ---------------------------------------------------------------- Bento */

.apex-bento {
  display: grid;
  gap: 0.625rem; /* 10px between tiles, measured in Figma */
}

.apex-bento > * { min-width: 0; }

/*
 * Row column widths derive from the tile aspect ratios, so every tile keeps
 * its exact labelled proportion while sharing one row height:
 * 16:9 + 1:1  → columns 16fr 9fr, row-b: 1:1 + 16:9 + 1:1 → 9fr 16fr 9fr.
 */
.apex-bento__row {
  display: grid;
  gap: 0.625rem;
}

.apex-bento__row--a { grid-template-columns: 16fr 9fr; }
.apex-bento__row--b { grid-template-columns: 9fr 16fr 9fr; }

.apex-card {
  position: relative;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2rem; /* 32px */
  aspect-ratio: var(--tile-ratio, auto);
  background: #151515; /* flat tile fill; the 2A2A2D@72% layer belongs to the arrow box */
  overflow: hidden;
}

.apex-card--169 { --tile-ratio: 16 / 9; }
.apex-card--11 { --tile-ratio: 1 / 1; }
/* The tall tile stretches to the split column height (≈9:16 by construction) */
.apex-card--tall { --tile-ratio: auto; }

/* Narrow tiles (small viewports) trade the description for breathing room */
@container (max-width: 22rem) {
  .apex-card__desc { display: none; }
  .apex-card__media { font-size: 0.6875rem; }
}

/* Split row: wide + two squares on the left, 9:16 tall tile on the right.
   The 5:3 column ratio makes the right column height land at ≈16/9 of its width. */
.apex-bento__split {
  display: grid;
  grid-template-columns: 5fr 3fr;
  gap: 0.625rem;
}

.apex-bento__split-left {
  display: grid;
  gap: 0.625rem;
}

.apex-bento__split-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
}

.apex-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  text-align: center;
  font-size: 0.75rem; /* 12px / 16, ls 1.2 — same style as the showreel label */
  font-weight: 700;
  line-height: 1.3333;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff; /* white in the design */
  background: transparent; /* the tile itself carries the fill */
}

.apex-card__media img,
.apex-card__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.apex-card__tag,
.apex-card__body { position: relative; z-index: 1; }

.apex-card__tag {
  font-size: 0.875rem; /* 14px / 23, measured in Figma */
  line-height: 1.64;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #fff; /* measured in Figma */
}

.apex-card__body {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}

.apex-card__desc {
  max-width: 36ch;
  font-size: 0.75rem; /* 12px, measured in Figma */
  font-weight: 500; /* Medium, measured in Figma */
  line-height: 1.8667; /* ~22.4px */
  letter-spacing: 0.042em; /* 0.5px */
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6); /* measured in Figma */
}

/* ------------------------------------------------------ Clients marquee */

.apex-clients {
  overflow: hidden;
  padding-right: 0; /* the marquee runs edge to edge in the design */
}

.apex-clients .apex-section__rail { margin-bottom: clamp(1.5rem, 2.4vw, 3rem); }

.apex-clients__marquee { grid-column: 1 / -1; }

.apex-marquee {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
}

.apex-marquee__track {
  display: flex;
  align-items: center;
  gap: 3rem;
  padding-right: 3rem;
  flex-shrink: 0;
  animation: apex-marquee 60s linear infinite;
  font-size: clamp(3rem, 6.4vw, 8rem); /* ~128px at the 1999px design width */
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--apex-text);
}

.apex-marquee__track span { display: inline-flex; align-items: center; gap: 3rem; }

.apex-marquee__star {
  font-size: 0.45em;
  color: var(--wp--custom--color--text--100);
}

@keyframes apex-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

/* --------------------------------------------------------------- Awards */

.apex-awards {
  display: grid;
  gap: 1rem; /* 16px between rows, measured in Figma */
}

.apex-awards__row {
  display: grid;
  /* Figma columns: name 250px, year 250px, description fills, count right */
  grid-template-columns: minmax(9rem, 15.75fr) minmax(6rem, 15.75fr) 62fr auto;
  gap: 1rem;
  align-items: baseline;
  padding-bottom: 1rem; /* spacing/16, measured in Figma */
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* measured in Figma */
  /* rows share one text style: Paragraph/Regular 14/18 uppercase */
  font-size: 0.875rem;
  line-height: 1.2857;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
}

.apex-awards__row:last-child {
  border-bottom: 0; /* no rule under the final row in the design */
  padding-bottom: 0;
}

.apex-awards__name { color: var(--apex-text); }

.apex-awards__year { color: #c2c2c2; /* measured in Figma */ }

.apex-awards__desc { color: #c2c2c2; /* measured in Figma */ }

.apex-awards__count {
  color: var(--apex-text);
  text-align: right;
}

/* ----------------------------------------------------------------- Work */

.apex-work {
  display: grid;
  gap: 2rem; /* ~34px between cards in Figma */
}

/* Each card links to its /work/{slug}/ page; the link is layout-transparent so
   the grid and hover states keep treating the article as the direct child. */
.apex-work__link {
  display: contents;
  color: inherit;
}

.apex-work__item {
  position: relative;
  isolation: isolate;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  /* Card canvas 1589×720 in the 1999px frame */
  aspect-ratio: 1589 / 720;
  min-height: 22rem;
  padding: 2rem; /* 32px */
  overflow: hidden;
}

.apex-work__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #101416;
}

.apex-work__media img,
.apex-work__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.apex-work__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), transparent 30%, transparent 65%, rgba(0, 0, 0, 0.45));
}

.apex-work__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
}

.apex-work__title {
  font-size: 1.75rem; /* H4/Bold 28/36, measured in Figma */
  line-height: 1.2857;
  letter-spacing: 0; /* Figma: 0, overrides the global tight heading tracking */
  text-transform: uppercase;
}

.apex-work__meta {
  display: flex;
  gap: 1rem;
  flex-shrink: 0;
}

.apex-work__meta-col {
  display: grid;
  align-content: start; /* keep label+value together when columns stretch */
  gap: 0;
  width: 9.375rem; /* 150px column, measured in Figma */
  /* Small/Regular 12/20, measured in Figma */
  font-size: 0.75rem;
  line-height: 1.6667;
  letter-spacing: 0;
  text-transform: uppercase;
}

.apex-work__meta-label { color: var(--apex-text); }

.apex-work__meta-value { color: #c2c2c2; /* measured in Figma */ }

.apex-work__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.apex-work__desc {
  max-width: 34.375rem; /* 550px, measured in Figma (wraps to 4 lines) */
  /* H5/Regular 16/23, measured in Figma */
  font-size: 1rem;
  line-height: 1.4375;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--apex-text);
}

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

@media (max-width: 960px) {
  .apex-about__head { flex-direction: column; gap: 2rem; }
  .apex-about__copy { width: 100%; }

  /*
   * Tablet bento: the row wrappers dissolve (display: contents) into one
   * two-column grid — 16:9 tiles span the full width, the 1:1 pair sits
   * side by side, and the split becomes [stacked squares | tall tile].
   */
  .apex-bento { grid-template-columns: 1fr 1fr; }

  .apex-bento__row--a,
  .apex-bento__row--b,
  .apex-bento__split-left { display: contents; }

  .apex-bento__row .apex-card--169,
  .apex-bento__row--b .apex-card--11:last-child { grid-column: 1 / -1; }

  .apex-bento__split {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
  }

  .apex-bento__split-left .apex-card--169 { grid-column: 1 / -1; }

  /* Two squares stack vertically beside the tall tile */
  .apex-bento__split-row { grid-template-columns: 1fr; }

  .apex-work__item { aspect-ratio: auto; min-height: 30rem; }
  .apex-work__top,
  .apex-work__bottom { flex-direction: column; align-items: flex-start; }

  .apex-awards__row {
    grid-template-columns: 1fr;
    gap: 0.375rem;
  }
}

@media (max-width: 520px) {
  /* Phone bento: every tile stacks full-width, keeping its labelled ratio */
  .apex-bento,
  .apex-bento__split { grid-template-columns: 1fr; }

  .apex-card--tall { --tile-ratio: 9 / 16; }
}