/* ============================================================================
   MCT — PROJECT PORTFOLIO v2
   20 August 2026. Loaded last. Every rule is scoped inside the Project
   Portfolio section (.proj-lead / .proj-item). Nothing else is affected.

   Corrections:
     1. Restore the section's designed overlay scrims — they never rendered.
     2. Featured card: present the COMPLETE building at every width, with zero
        cropping, instead of a 37.5%-cropped mid-facade slice.
     3. Minor consistency: matching card radii.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. OVERLAY SCRIM — RESTORE

   image-slots.css sets `.pic > img { position:relative; z-index:1 }`. Both
   portfolio pictures carry the `pic` class, so the photograph painted ABOVE
   `.proj-lead::after` / `.proj-item::after` (z-index auto) and the designed
   dark scrim was never visible. The panels are z-index:2, so their text
   rendered with nothing behind it. This restores the existing gradients as
   authored — no colour or opacity is changed.
   --------------------------------------------------------------------------- */
.proj-lead::after,
.proj-item::after { z-index: 1; }

/* Consistent card radius across the portfolio system. */
.proj-lead,
.proj-item { border-radius: 14px; }

/* ---------------------------------------------------------------------------
   2. FEATURED CARD

   The Chakore Venture photograph is a 4:5 portrait tower. Measured on the
   source, structure runs from 7.7% to 99.9% of image height — only 7.7% of sky
   above the crown and effectively no empty ground below. Any crop deeper than
   7.7% cuts the building itself, which is why the previous 2.4:1 full-bleed
   card could not show it: it hid 37.5%.

   So the image is always presented in a 4:5 box, which matches the source
   exactly and crops nothing:
     >= 700px  two-column card — copy left on solid ground, photograph right
     <= 699px  full-bleed 4:5 card, copy over the (now restored) bottom scrim
   --------------------------------------------------------------------------- */

/* ---- Split composition (>= 700px) ---------------------------------------- */
@media (min-width: 700px) {

  .proj-lead {
    display: grid;
    /* minmax(0,…) on both tracks: without it a long scope line sets a
       min-content width larger than the track and overflows the card. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 27%);
    align-items: stretch;
    aspect-ratio: auto;              /* height is set by the image column */
    min-height: 0;
    overflow: hidden;
    background: linear-gradient(120deg,
                  var(--bg-elevated, #111E2E) 0%,
                  var(--bg-sunken,  #0A1019) 62%);
  }

  .proj-lead__img {
    position: relative;
    inset: auto;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    aspect-ratio: 4 / 5;             /* == source ratio, so `cover` crops nothing */
    border-left: 1px solid rgba(255, 255, 255, 0.08);
  }

  .proj-lead__img img { object-position: 50% 50%; }

  /* The photograph has its own column now, so the full-card scrim would only
     mute it without helping legibility. */
  .proj-lead::after { display: none; }

  .proj-lead__panel {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    min-width: 0;
    max-width: 42rem;
    padding: clamp(1.75rem, 2.6vw, 2.75rem);
    gap: 0.5rem;
  }

  .proj-lead__loc   { margin-top: 0.1rem; }
  .proj-lead__scope { margin-top: 0.55rem; max-width: 34rem; }
  .proj-lead__cta   { margin-top: 1.1rem; }

  /* Keep the watermark off the photograph. */
  .proj-lead .proj-watermark { display: none; }
}

/* Narrow desktop and tablet: give the photograph a slightly larger share so it
   still reads as a featured image, and tighten the panel. */
@media (min-width: 700px) and (max-width: 1180px) {
  .proj-lead { grid-template-columns: minmax(0, 1fr) minmax(0, 34%); }
  .proj-lead__panel { padding: 1.5rem; max-width: none; }
  .proj-lead__scope { max-width: none; }
}

/* ---- Full-bleed composition (<= 699px) ----------------------------------- */
@media (max-width: 699px) {
  .proj-lead { aspect-ratio: 4 / 5; min-height: 0; }
  .proj-lead__img img { object-position: 50% 50%; }
  /* Bottom-weighted scrim so the copy stays legible over the podium detail. */
  .proj-lead::after {
    background: linear-gradient(0deg,
                  rgba(8, 14, 22, 0.94) 0%,
                  rgba(8, 14, 22, 0.55) 42%,
                  rgba(8, 14, 22, 0.12) 100%);
  }
  .proj-lead__panel { padding: 1.25rem 1.25rem 1.4rem; }
}