/* Page 06 — Master Plan. Values from canvas frames 6A / 6B. */

/* ---------- hero ---------- */
.di-mphero { display: grid; grid-template-columns: minmax(0,1fr) 420px; gap: var(--sp-10); align-items: start; }
.di-mphero__main { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 74ch; }
.di-mphero__main p { margin: 0; color: var(--text-secondary); }

.di-mpstats {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
  box-shadow: var(--shadow-card); padding: var(--sp-2) var(--sp-6);
}
.di-mpstat {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
  padding-block: var(--sp-4); border-top: 1px solid var(--hairline);
}
.di-mpstat:first-child { border-top: 0; }
.di-mpstat__label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.di-mpstat__value {
  font-size: 26px; font-weight: var(--fw-semibold); letter-spacing: -.03em;
  color: var(--ink); white-space: nowrap;
}

/* ---------- the plan + zone legend ---------- */
.di-plan { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: var(--sp-5); margin-top: var(--sp-8); }
.di-plan__map {
  position: relative; margin: 0;
  /* 16:9 to match the source. A 4:3 crop cut the outer zone labels off. */
  aspect-ratio: 1376 / 768;
  background: var(--ink);
  border-radius: var(--r-card); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.di-plan__chip {
  font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: rgba(251,251,250,.62);
  border: 1px dashed rgba(251,251,250,.28); border-radius: var(--r-badge);
  padding: 8px 12px; text-align: center;
}
.di-plan__tabs {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  display: flex; gap: 6px; flex-wrap: wrap;
}
.di-plan__tab {
  background: rgba(251,251,250,.94); color: var(--ink);
  border-radius: var(--r-pill); padding: 6px 12px;
  font-size: 12.5px; font-weight: var(--fw-semibold);
}
.di-plan__tab:hover { background: #fff; color: var(--accent); }
.di-plan__scroll { width: 100%; height: 100%; }
.di-plan__map img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* With the plan behind them the tabs need a scrim to stay legible. */
.di-plan__map--has-img .di-plan__tabs {
  left: 0; right: 0; bottom: 0;
  padding: 34px 14px 14px;
  background: linear-gradient(0deg, rgba(16,20,19,.74) 0%, rgba(16,20,19,0) 100%);
}

.di-zones {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
  box-shadow: var(--shadow-card); padding: var(--sp-5) var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.di-zones__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--hairline);
}
.di-zones__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.di-zone {
  display: grid; grid-template-columns: 28px minmax(0,1fr); gap: var(--sp-3);
  padding-block: 7px; align-items: baseline;
}
.di-zone__n { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--accent); }
.di-zone__name { font-size: 14px; color: var(--text-body); }

/* ---------- island by island ---------- */
.di-section-islands {
  padding-block: var(--pad-section-y);
  background: var(--surface-muted);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.di-mpislands { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-8); }
.di-mpisland {
  display: grid; grid-template-columns: 300px minmax(0,1fr) 340px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-card);
}
.di-mpisland__media {
  position: relative; min-height: 230px;
  /* Ink base, not grey: the island name reverses out in white, and until the real
     photography lands a light placeholder puts it at 1.3:1. The gradient sits on top
     so it still reads correctly once an image is behind it. */
  background-color: var(--ink);
  background-size: cover; background-position: center;
}
.di-mpisland__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(16,20,19,.92) 0%, rgba(16,20,19,.15) 58%);
}
.di-mpisland__code, .di-mpisland__title { z-index: 1; }
.di-mpisland__code {
  position: absolute; top: 14px; left: 14px;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--r-pill);
  background: var(--paper); color: var(--ink);
  font-size: 16px; font-weight: var(--fw-bold);
}
.di-mpisland__title {
  position: absolute; left: 16px; right: 16px; bottom: 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.di-mpisland__title .di-eyebrow { color: rgba(255,255,255,.86); }
.di-mpisland__name { font-size: 22px; font-weight: var(--fw-semibold); letter-spacing: -.025em; color: #fff; }

.di-mpisland__body { padding: 24px 26px; display: flex; flex-direction: column; gap: 14px; }
.di-mpisland__lead { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--text-secondary); }
.di-mpisland__figures {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: var(--sp-3); border-top: 1px solid var(--hairline);
}
.di-mpisland__fig { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.5; color: var(--text-body); }
.di-mpisland__fig::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--accent);
}

.di-mpisland__rail {
  padding: 24px 26px; display: flex; flex-direction: column; gap: var(--sp-3);
  align-items: flex-start; background: var(--surface-sunken);
  border-left: 1px solid var(--hairline);
}
.di-mpisland__rail p { margin: 0; }
.di-mpisland__rail strong { color: var(--text-primary); }
.di-mpisland__actions { display: flex; gap: var(--sp-2); margin-top: auto; flex-wrap: wrap; }

/* ---------- land use ---------- */
.di-landuse { display: grid; grid-template-columns: minmax(0,1fr) 480px; gap: var(--sp-10); align-items: start; }
.di-landuse__intro { display: flex; flex-direction: column; gap: var(--sp-4); }
.di-landuse__intro p { margin: 0; color: var(--text-secondary); }
.di-warn {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--caution-soft); border: 1px solid var(--caution-border);
  border-radius: var(--r-md); padding: var(--sp-5);
}
.di-warn .di-eyebrow { color: var(--caution); }
.di-warn p { margin: 0; color: #5B5231; }

.di-alloc {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
  box-shadow: var(--shadow-card); padding: 24px 26px;
  display: flex; flex-direction: column; gap: 13px;
}
.di-alloc__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  padding-bottom: var(--sp-2);
}
.di-alloc__row { display: flex; flex-direction: column; gap: 6px; }
.di-alloc__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }

/* ---------- delivery timeline, on dark ---------- */
.di-section-timeline {
  padding-block: var(--pad-section-y);
  background: var(--ink); color: var(--text-on-dark);
}
.di-section-timeline h2, .di-section-timeline .di-sechead__dek { color: var(--text-on-dark); }
.di-section-timeline .di-eyebrow { color: var(--gold-light); }
.di-section-timeline .di-sechead__dek { color: rgba(251,251,250,.72); }

.di-mptimeline {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3);
  margin-top: var(--sp-8);
}
.di-mptl {
  display: flex; flex-direction: column; gap: 6px;
  background: rgba(251,251,250,.05);
  border: 1px solid rgba(251,251,250,.14);
  border-top: 3px solid var(--text-muted);
  border-radius: var(--r-md); padding: var(--sp-4);
}
.di-mptl__when { font-family: var(--font-mono); font-size: var(--fs-micro); color: rgba(251,251,250,.72); }
.di-mptl h3 { margin: 0; color: var(--text-on-dark); }
.di-mptl p { margin: 0; color: rgba(251,251,250,.62); }
/* Green done or funded · teal contracted · amber where I would add a year. */
.di-mptl--existing  { border-top-color: #7FD1A4; }
.di-mptl--awarded   { border-top-color: #6FC8D4; }
.di-mptl--building  { border-top-color: #6FC8D4; }
.di-mptl--announced { border-top-color: var(--gold-light); }

/* ---------- location ---------- */
.di-mploc { display: grid; grid-template-columns: 460px minmax(0,1fr); gap: var(--sp-10); align-items: start; }
.di-mploc__img {
  position: relative; margin: 0; aspect-ratio: 4 / 5;
  background: var(--surface-muted); border: 1px solid var(--border);
  border-radius: var(--r-card); overflow: hidden;
}
.di-mploc__img iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.di-mploc__body { display: flex; flex-direction: column; gap: var(--sp-4); }
.di-mploc__body p { margin: 0; color: var(--text-secondary); }

/* ---------- take the plan with you ---------- */
.di-section-pdf {
  padding-block: var(--pad-section-y);
  background: var(--surface-muted);
  border-top: 1px solid var(--border);
}
.di-mppdf { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: var(--sp-10); align-items: center; }
.di-mppdf__body { display: flex; flex-direction: column; gap: var(--sp-3); }
.di-mppdf__body p { margin: 0; }
.di-mppdf__pages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.di-mppdf__page {
  aspect-ratio: 3 / 4;
  background: var(--surface) center / cover no-repeat;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
img.di-mppdf__page { display: block; width: 100%; height: auto; object-fit: cover; }

/* Gated master-plan lead form: sits inline in the PDF block, fields in a row on desktop. */
.di-gated--wide { background: transparent; padding: 0; gap: var(--sp-4); }
.di-gated--wide .di-gated__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
@media (max-width: 1023px) { .di-gated--wide .di-gated__row { grid-template-columns: 1fr; } }

/* ---------- mobile, frame 6B ---------- */
@media (max-width: 1023px) {
  /* minmax(0,…) not 1fr: a bare 1fr track is min-content sized, so the pannable
     master plan would stretch its column to 860px instead of scrolling inside it. */
  .di-mphero, .di-plan, .di-landuse, .di-mploc, .di-mppdf { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .di-mpislands { gap: var(--sp-3); }
  .di-mpisland { grid-template-columns: 1fr; }
  .di-mpisland__media { min-height: 180px; }
  .di-mpisland__rail { border-left: 0; border-top: 1px solid var(--hairline); }
  .di-mptimeline { grid-template-columns: repeat(2, 1fr); }
  .di-mploc__img { aspect-ratio: 16 / 10; }
}
@media (max-width: 640px) {
  .di-mptimeline, .di-mppdf__pages { grid-template-columns: 1fr 1fr; }
  .di-mpstat { flex-direction: column; align-items: flex-start; gap: 4px; }

  /* Twenty-one numbered callouts do not survive being squeezed into 358px. Let the
     plan keep a legible width and pan sideways instead, and move the island tabs
     out from over it so they don't scroll away with the image. */
  .di-plan__map--has-img {
    aspect-ratio: auto;
    display: block;
    background: none;
    border-radius: 0;
    overflow: visible;
  }
  .di-plan__map--has-img .di-plan__scroll {
    height: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--r-card);
    background: var(--ink);
    scrollbar-width: thin;
  }
  .di-plan__map--has-img img {
    width: 860px; max-width: none; height: auto;
    object-fit: fill;
  }
  .di-plan__map--has-img .di-plan__tabs {
    position: static;
    background: none;
    padding: 12px 0 0;
  }
  /* Off the photograph the near-white pills disappear into the page, so they need
     a border and the page's own text colour instead. */
  .di-plan__map--has-img .di-plan__tab {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--text-body);
  }
}