/* ============================================================
   design-work.css — brand/identity work shown INSIDE each project's
   portfolio item (Our Work page). The logo page is featured as the
   precision showcase; the rest support it as brand-guideline context.
   Images keep their natural aspect ratio (height:auto, no crop).
   ============================================================ */

.fd-proj-design {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 2px solid rgba(26, 24, 21, 0.1);
}

.fd-proj-design__label {
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary, #c4886a);
  margin-bottom: 1.5rem;
}

/* Featured: the logo page (left, larger) + a short note (right) */
.fd-proj-design__feature {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2.5rem;
  align-items: center;
  margin-bottom: 1.25rem;
}
.fd-proj-design__note h4 { margin-bottom: 0.6rem; }
.fd-proj-design__note p { color: rgba(26, 24, 21, 0.72); margin-bottom: 1rem; }

/* Supporting brand pages */
.fd-proj-design__support {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.fd-proj-design__hero img,
.fd-proj-design__support img {
  display: block;
  width: 100%;
  height: auto;                /* keep the page's natural aspect ratio */
  border-radius: 14px;
  border: 2px solid rgba(26, 24, 21, 0.08);
  background: var(--_primitives---colors--cream-light, #f5f2ed);
}

@media (hover: hover) {
  .fd-proj-design img { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease; }
  .fd-proj-design img:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(26, 24, 21, 0.12); }
}

@media (max-width: 767px) {
  .fd-proj-design__feature { grid-template-columns: 1fr; gap: 1.5rem; }
  .fd-proj-design__support { grid-template-columns: repeat(2, 1fr); }
}