/* ---- product cards ------------------------------------------------------
   Replaces the pinned horizontal gallery. Each card carries a photograph, the
   line it belongs to, a spec line, a short description, and two actions: a
   details link (which will point at real detail pages once the backend
   exists) and a direct WhatsApp enquiry.

   Kept in the page's own register rather than the reference's: square corners
   to match every other surface here, vermilion rationed to the category label
   only, and no card shadow, since elevation is not communicating hierarchy on
   a flat dark ground. */

.work { border-top: 1px solid var(--line-soft); }

.work__head {
  max-width: 46rem;
  margin-bottom: clamp(34px, 4.5vw, 60px);
}
.work__title {
  font-size: var(--fs-h2);
  margin-top: 0.5em;
}
.work__lede { margin-top: 1.1rem; }

.work__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 30px);
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--raise);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  overflow: hidden;
}

.card__media { position: relative; }
.card__media .ph { aspect-ratio: 4 / 3; }
.card__media img { transition: transform 1.1s var(--ease); }
.card:hover .card__media img { transform: scale(1.045); }

/* Functional, not decorative: indoor or outdoor is the first thing a buyer
   filters on, so it belongs on the picture where it is scanned, not buried
   in the body copy. */
.card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 0.45em 0.8em;
  background: rgba(12, 12, 13, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--bone);
}

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(20px, 2.2vw, 30px);
}

.card__kind {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--pop);
  margin-bottom: 0.9em;
}

.card__name {
  font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.4375rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.card__spec {
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--bone-soft);
  margin-top: 0.3em;
}

.card__desc {
  font-size: var(--fs-sm);
  color: var(--bone-soft);
  margin-top: 0.9em;
}

/* margin-top:auto pins the actions to the bottom so the rule lands at the
   same height on every card regardless of how long its description runs. */
.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: clamp(18px, 2vw, 26px);
  border-top: 1px solid var(--line-soft);
}

.card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--bone);
  transition: color var(--dur-1) var(--ease), gap var(--dur-1) var(--ease);
}
.card__link svg { width: 0.9em; height: 0.9em; flex: none; }
.card__link:hover { color: var(--pop); gap: 0.75em; }

.card__wa {
  padding: 0.7em 1.1em;
  font-size: var(--fs-micro);
}

@media (max-width: 1080px) {
  .work__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .work__grid { grid-template-columns: 1fr; }
  .card__foot { flex-wrap: wrap; }
}

/* A named line with no photography yet. Stated in words rather than given a
   card with a borrowed image from another category. */
.work__note {
  margin-top: clamp(26px, 3vw, 40px);
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-sm);
  color: var(--bone-soft);
  max-width: 58ch;
}
.work__note .link { margin-left: 0.35em; }

/* ---- band ---------------------------------------------------------------
   Full-bleed plate between the range and the process section. Breaks the run
   of two text blocks meeting across a long stretch of empty dark ground. */
.band {
  position: relative;
  overflow: hidden;
}
.band__ph {
  height: clamp(240px, 46vh, 520px);
  width: 100%;
}
.band__ph img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 640px) {
  .band__ph { height: clamp(200px, 34vh, 300px); }
}