/* ==========================================================================
   DP WORLD · LG200 — Available Space
   Sections, in document order:
     1. Hero                              .page-hero (shared, theme.css)
     2. Currently available opportunities .available-opportunities
     3. The LG+ package                   .lg-plus
   ========================================================================== */

/* Hero type runs larger here than on the front page. */
.page-hero--available-space {
  --hero-title-size: clamp(1.9rem, 5.885vw, 67px);
  --hero-title-measure: 44rem;
}

/* ==========================================================================
   2 · Currently available opportunities
   ========================================================================== */
.available-opportunities {
  background: linear-gradient(90deg, var(--c-indigo-800) 0%, var(--c-purple-500) 100%);
  padding-block: clamp(2.5rem, 5.55vw, 4.9rem) clamp(2.5rem, 6.05vw, 5.35rem);
}
.available-opportunities__title { margin-bottom: clamp(2rem, 6.1vw, 5.4rem); }

/* ---- Unit card ---- */
.unit-card {
  display: grid;
  grid-template-columns: minmax(0, 722fr) minmax(0, 590fr);
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  overflow: hidden;
}
.unit-card + .unit-card { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

/* Sits into the card's top-left corner and is inset on the other two sides, so
   the photo can carry its own rounded corners on all four. The radius matches
   the card's so the two corners nest cleanly. */
.unit-card__media {
  grid-column: 1;
  position: relative;
  align-self: start;
  margin: 0 clamp(1rem, 1.6vw, 1.5rem) clamp(1rem, 1.6vw, 1.5rem) 0;
  aspect-ratio: 722 / 480;
  border-radius: 12px;
  overflow: hidden;
}
/* Sized past the frame and pinned to its bottom edge: the comp crops in on the
   unit rather than showing the full depth of sky above it. */
.unit-card__media img {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 110%;
  height: 110%;
  max-width: none;
  object-fit: cover;
  object-position: center bottom;
}

.unit-card__body {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(2rem, 8.4vw, 7.55rem) clamp(1.5rem, 3vw, 2.75rem) clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 4.2vw, 3.75rem);
}
.unit-card__logo { width: clamp(150px, 16vw, 230px); height: auto; }

.unit-card__lines {
  margin: clamp(1.75rem, 4.5vw, 4rem) 0 0;
  font-size: clamp(1.05rem, 1.8vw, 1.625rem);
  line-height: 1.31;
}
.unit-card__line.is-strong { font-weight: 600; }
.unit-card__line.is-accent { font-weight: 600; color: var(--c-green); }
.unit-card__line.is-plain  { font-weight: 300; }

.unit-card__cta { margin-top: clamp(1.75rem, 4.05vw, 3.6rem); }

/* ---- Specification strip — spans the full card width beneath both columns ---- */
.unit-card__specs {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: clamp(2rem, 3.95vw, 3.5rem) clamp(1.25rem, 2vw, 1.75rem) clamp(2.5rem, 6.4vw, 5.65rem);
  list-style: none;
}
.unit-card__specs li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
  padding-inline: clamp(0.5rem, 1.4vw, 1.25rem);
}
/* Hairline between items — a mint rule that fades out at both ends. */
.unit-card__specs li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 64px;
  background: linear-gradient(180deg,
    rgba(122, 243, 224, 0) 0%,
    rgba(122, 243, 224, 0.6) 35%,
    rgba(122, 243, 224, 0.6) 65%,
    rgba(122, 243, 224, 0) 100%);
}
/* Icons carry their own intrinsic px size so the set keeps the artwork's
   relative weighting instead of being normalised to one box. */
.unit-card__specs img { flex: none; max-width: 100%; height: auto; }
.unit-card__specs span {
  font-weight: 300;
  font-size: clamp(0.9rem, 1.3vw, 1.1875rem);
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* ==========================================================================
   3 · The LG+ package
   ========================================================================== */
.lg-plus {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1441 / 1575;      /* the comp's proportion for the plate */
  display: flex;
  justify-content: center;
}
.lg-plus__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
/* Holds the white type against the sky without flattening the photo. */
.lg-plus__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(203, 214, 240, 0.46) 0%,
    rgba(203, 214, 240, 0.30) 18%,
    rgba(203, 214, 240, 0.12) 32%,
    rgba(203, 214, 240, 0) 46%);
}
/* Blue wash over the top 22%, the same treatment as the ESG and Location
   bands. It sits above the scrim and below the copy. */
.lg-plus::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 22%;
  z-index: 1;
  background: linear-gradient(180deg, #0178DE 0%, rgba(1, 120, 222, 0) 100%);
  pointer-events: none;
}
.lg-plus__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-top: clamp(3rem, 10.2vw, 9rem);
}
.lg-plus__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin: 0;
}
.lg-plus__title strong { font-weight: 700; }
.lg-plus__copy {
  font-weight: 300;
  font-size: clamp(0.95rem, 1.32vw, 1.1875rem);
  line-height: 1.36;
  margin: clamp(1.25rem, 2.6vw, 2.3rem) auto 0;
  max-width: 38rem;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .unit-card { grid-template-columns: 1fr; }
  .unit-card__media { grid-column: 1; aspect-ratio: 16 / 10; }
  .unit-card__body { grid-column: 1; padding: clamp(1.75rem, 4vw, 2.75rem); }
  .unit-card__specs { grid-template-columns: repeat(2, 1fr); row-gap: 2.25rem; padding-block: 2.25rem 2.75rem; }
  .unit-card__specs li:nth-child(3)::before { display: none; }
}

@media (max-width: 700px) {
  .unit-card__specs { grid-template-columns: 1fr; row-gap: 1.75rem; }
  .unit-card__specs li { justify-content: flex-start; }
  .unit-card__specs li + li::before { display: none; }
  .unit-card__specs span br { display: none; }

  /* A tall plate crops the estate too hard on a phone. The photo drops to its
     own ratio and the copy moves onto a band above it — keeping the design's
     reading order — over a gradient that starts dark enough for white type and
     lands on the photo's own sky colour, so the join is invisible. */
  .lg-plus { aspect-ratio: auto; display: flex; flex-direction: column; }
  .lg-plus__media { position: static; height: auto; aspect-ratio: 2400 / 2033; }
  .lg-plus__scrim { display: none; }
  .lg-plus__inner {
    order: -1;
    position: static;
    padding: clamp(2.5rem, 8vw, 4rem) var(--gutter) clamp(2rem, 6vw, 3rem);
    background: linear-gradient(180deg, #1A6CB0 0%, #1391E4 100%);
  }
}