/* =========================
   Featured Project (Gilcon)
   ========================= */

.fp { background: var(--fp-bg, #F7FAFC); border-bottom: solid 1px var(--highlight);}
.fp--pad-sm { padding-block: 24px; }
.fp--pad-md { padding-block: 40px; }
.fp--pad-lg { padding-block: 64px; }

.fp__grid {
  display: grid;
  grid-template-columns: 1fr;                 /* mobile */
  gap: clamp(16px, 3vw, 32px);
  align-items: center;
}

@media (min-width: 960px) {
  .fp__grid { grid-template-columns: 1.1fr 1fr; }  /* text : image (matches hero) */
  .fp--rev .fp__grid { grid-template-columns: 1fr 1.1fr; } /* reversed */
}

.fp__col { min-width: 0; }

.fp__eyebrow {
  margin: 0 0 .25rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 800;
  font-size: var(--step-0);
}
.fp__title { margin: 0 0 .5rem; font-size: var(--step-2); color: var(--brand); }
.fp__intro { color: var(--muted); margin: 0 0 1rem; max-width: 65ch; }
.fp__cta { margin-top: .5rem; }

/* Image */
.fp__media img {
  width: 100%;
  height: auto;                               /* no crop on mobile/tablet */
  display: block;
  border-radius: var(--radius, 12px);
  box-shadow: 2px 4px 20px rgba(0,0,0,.10);   /* Figma shadow */
}

/* Desktop: equal image heights */
@media (min-width: 960px) {
  .fp__grid { column-gap: clamp(16px, 2.2vw, 28px); }
  .fp__media { aspect-ratio: 16/9; display: flex; }
  .fp__media img { width: 100%; height: 100%; object-fit: cover; }
}

/* Reverse ordering at desktop */
@media (min-width: 960px) {
  .fp--rev .fp__content { order: 2; }
  .fp--rev .fp__media   { order: 1; }
}