/* ==============================
   WORK PAGE — HERO
============================== */
.wk-hero {
  padding: 178px 20px 100px;
  text-align: center;
}

.wk-hero-heading {
  font-size: 72px;
  font-weight: 400;
  color: #000;
  letter-spacing: -1.44px;
  line-height: 1.1;
}

/* ==============================
   WORK PAGE — PROJECTS
============================== */
.wk-projects {
  padding: 0 20px;
}

.wk-project {
  display: block;
  margin-bottom: 84px;
}

/* ==============================
   ROW GRIDS — column ratios per case (Figma)
============================== */
.wk-row {
  display: grid;
  gap: 14px;
  grid-template-rows: 468px;
  margin-bottom: 8px;
}

.wk-row--lldm   { grid-template-columns: 332fr 332fr 706fr; }
.wk-row--teresa { grid-template-columns: 759fr 625fr; }
.wk-row--ikigai { grid-template-columns: 493fr 891fr; }
.wk-row--cura   { grid-template-columns: 1fr 1fr; }
.wk-row--deci   { grid-template-columns: 891fr 493fr; }

/* ==============================
   CELLS — rounded image container
============================== */
.wk-cell {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  height: 100%;
  min-height: 0;
}

.wk-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Teresa right column: top strip (167) + bottom boxes (289) */
.wk-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  min-height: 0;
}
.wk-col .wk-cell--top    { flex: 167 0 0; }
.wk-col .wk-cell--bottom { flex: 289 0 0; }

/* ==============================
   META BAR
============================== */
.wk-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 2px;
}

.wk-meta-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wk-client {
  font-size: 16px;
  font-weight: 700;
  color: #000;
  letter-spacing: -0.2px;
  line-height: 1.3;
  text-transform: uppercase;
}

.wk-date {
  font-size: 12px;
  font-weight: 400;
  color: #000;
  line-height: 1.4;
}

.wk-meta-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  max-width: 55%;
  text-align: right;
}

.wk-tagline {
  font-size: 14px;
  font-weight: 400;
  color: #000;
  line-height: 1.4;
}

.wk-tags {
  font-size: 12px;
  font-weight: 700;
  color: #000;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* Project block as clickable link to case page */
.wk-project--link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.wk-project--link .wk-img {
  transition: transform 0.5s ease;
}
.wk-project--link:hover .wk-img {
  transform: scale(1.02);
}
.wk-project--link:hover .wk-client {
  color: #0014ff;
}

/* Mobile-specific card image: hidden on desktop */
.wk-cell--mobile { display: none; }

/* ==============================
   MOBILE (≤ 767px) — Figma node 220:75 (402px frame)
   Each case collapses to ONE landscape image + tiny stacked meta.
   If a mobile image is set in the CMS it is the row's first child,
   so the ":not(:first-child)" rule hides the desktop cells for free.
============================== */
@media (max-width: 767px) {
  .wk-hero { padding: 21px 16px 34px; }
  .wk-hero-heading { font-size: 25px; letter-spacing: -0.5px; }

  .wk-projects { padding: 0 11px; }
  .wk-project { margin-bottom: 14px; }

  /* single landscape image per case */
  .wk-row {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 0;
    margin-bottom: 4px;
  }
  .wk-row .wk-cell { height: 198px; border-radius: 10px; }
  .wk-row .wk-cell:not(:first-child),
  .wk-row .wk-col { display: none; }
  .wk-row .wk-cell--mobile:first-child { display: block; }

  /* meta: left-aligned stack — name / tagline / tags / date */
  .wk-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 0;
  }
  .wk-meta-left,
  .wk-meta-right { display: contents; }
  .wk-client  { order: 1; font-size: 8px; letter-spacing: 0; }
  .wk-tagline { order: 2; font-size: 7px; }
  .wk-tags    { order: 3; font-size: 6px; }
  .wk-date    { order: 4; font-size: 6px; }
  .wk-meta-right { text-align: left; }

  /* contact: title + mini buttons only (fields hidden per design) */
  .contact-section { margin: 73px 11px 67px; padding: 0; }
  .contact-heading { margin-bottom: 10px; }
  /* no form here — just a CTA to the home page form */
  .btn-center { margin-top: 20px; }
}