/* ==========================================================================
   DP WORLD · LG200 — Masterplan
   Sections, in document order:
     1. Hero              .page-hero (shared, theme.css)
     2. Masterplan        .mp-plan
     3. Park highlights   .mp-highlights

   Both sections run on dark artwork, so the site's default white type stands.
   ========================================================================== */

/* Hero type runs to the same scale as the other interior pages. The measure is
   what folds this headline to three lines — see docs/MASTERPLAN.md. */
.page-hero--masterplan {
  --hero-title-size: clamp(1.9rem, 5.885vw, 67px);
  --hero-title-measure: 48rem;
}

/* ==========================================================================
   2 · Masterplan — the site plan on the brand gradient. The artwork is a
       transparent PNG, so the gradient is the plan's own background.
   ========================================================================== */
/* The plan fills the section: no padding or margin above or below it, so the
   section is exactly as tall as the artwork. */
.mp-plan {
  position: relative;
  isolation: isolate;
  background: linear-gradient(90deg, var(--c-indigo-800) 0%, var(--c-purple-500) 100%);
}
/* The heading is a layer over the plan's empty top-left corner, not a row of
   its own — it adds no height to the section. */
.mp-plan__head {
  position: absolute;
  inset: clamp(1.5rem, 3.4vw, 3rem) 0 auto 0;
  z-index: 1;
}
.mp-plan__title {
  margin: 0;
}
/* The plan runs edge to edge — it sits outside the container, so it is not
   held to --maxw or the section inset like the heading above it. */
.mp-plan__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   3 · Park highlights — four cards over the photograph's sky, with the estate
       running on below them. The bottom padding is what leaves the land in
       view, so it scales with the width rather than being a fixed height.
   ========================================================================== */
/* The photograph sets the height: it runs at its own ratio, full width and
   uncropped, and the cards are laid over its sky. Nothing here adds height to
   the section, so the picture is always shown in full. */
.mp-highlights {
  position: relative;
  isolation: isolate;
}
.mp-highlights__media img {
  display: block;
  width: 100%;
  height: auto;
}
.mp-highlights__inner {
  position: absolute;
  inset: 0 0 auto 0;
  padding-block: clamp(2.75rem, 5.5vw, 4.75rem) 0;
}

.mp-highlight-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.8vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Every column carries a hairline down its left edge, fading toward the foot —
   the same rule as the ESG and Location cards. */
.mp-highlight {
  position: relative;
  padding-left: clamp(1rem, 2.2vw, 2.25rem);
}
.mp-highlight::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rule-fade);
  pointer-events: none;
}
.mp-highlight__icon {
  display: block;
  width: auto;
  height: clamp(2.25rem, 3.4vw, 3.25rem);
  margin-bottom: clamp(1rem, 2.2vw, 1.85rem);
}
.mp-highlight__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.32vw, 1.2rem);
  line-height: 1.22;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0 0 clamp(0.75rem, 1.5vw, 1.15rem);
}
.mp-highlight__copy {
  font-weight: 300;
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  line-height: 1.36;
  margin: 0;
  max-width: 32ch;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .mp-highlight-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(2rem, 5vw, 3rem); }
}

@media (max-width: 900px) {
  /* Two rows of cards no longer fit inside the sky, so the section unstacks:
     the cards sit on the brand gradient above the photograph, which still runs
     full width and uncropped beneath them. */
  .mp-highlights {
    background: linear-gradient(90deg, var(--c-indigo-800) 0%, var(--c-purple-500) 100%);
  }
  .mp-highlights__inner {
    position: static;
    padding-block: clamp(2.5rem, 6vw, 3.5rem) clamp(2.5rem, 6vw, 3.5rem);
  }
}

@media (max-width: 560px) {
  /* Two up rather than one, to keep the section off the bottom of the page. */
  .mp-highlight-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-highlight__copy { max-width: none; }   /* the column is the measure now */
}