/* project.css — Project-Information-Seite (Signature/Ultimate-Blöcke, Facts-
   Table, Highlights, Master-Plan, Unit-Types, Rare-Coastal-Closer).
   Referenz: scrape/screens/{en,ru}-project-information-*.jpg (nur oberer
   Bereich — Rest ab "highlights" folgt dem Daten-Schema aus Task 5, gleiches
   Muster wie home.css). .intro, .split, .amenities* kommen aus home.css. */

.project { background: #fffdfb; }

/* CTA sitzt vor dem Bild (kein Top-Abstand vom Bild selbst) */
.signature-section .btn,
.rare-coastal .btn { margin-bottom: 2rem; }

/* ---- Facts-Table (details) -------------------------------------------- */
.facts-table { width: 100%; border-collapse: collapse; }
.facts-table caption {
  text-align: left;
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 1.2rem;
}
.facts-table tr { border-bottom: 1px solid var(--color-line); }
.facts-table tr:last-child { border-bottom: 0; }
.facts-table th,
.facts-table td { text-align: left; padding: 0.9rem 0.6rem 0.9rem 0; font-weight: 400; }
.facts-table th {
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  width: 44%;
}
.facts-table td { color: var(--color-text); }

/* ---- Signature Highlights (stat grid) ---------------------------------- */
.highlights { text-align: center; }
.highlights .section-title { margin-bottom: 2.2rem; }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1rem;
}
@media (min-width: 800px) { .stat-grid { grid-template-columns: repeat(3, 1fr); } }
.stat-grid__item { display: flex; flex-direction: column; gap: 0.35rem; padding-inline: 0.4rem; }
.stat-grid__item::before {
  content: "";
  width: 42px;
  height: 2px;
  background: var(--color-accent);
  margin: 0 auto 0.7rem;
}
/* Line-Art-Icon (Manifest 231–236) ersetzt den dekorativen Strich, sobald da */
.stat-grid__item:has(.stat-grid__icon)::before { display: none; }
.stat-grid__icon { display: block; width: 76px; max-width: 30vw; margin: 0 auto 0.5rem; }
.stat-grid__icon img { width: 100%; height: auto; }
.stat-grid__stat {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--color-primary);
}
.stat-grid__unit {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  color: var(--color-accent-strong);
}
.stat-grid__note { color: var(--color-muted); font-size: 0.9rem; }

/* ---- Master Plan + Unit Types (shared 2-col image grid) --------------- */
.master-plan { text-align: center; }
.master-plan .section-title { margin-bottom: 1.6rem; }
.unit-types { text-align: center; }
.unit-types .section-title { margin-bottom: 0.6rem; }
/* Beide Sektionen liefern aktuell genau 1 Bild (kein 2-Bild-Grid mehr im
   Content) -> einspaltig, zentriert, wie .intro__figure (home.css). Sollte
   masterPlan/unitTypes je wieder >1 imageIds bekommen, hier auf ein
   echtes Grid zurückstellen. */
.master-plan__grid { display: grid; grid-template-columns: 1fr; max-width: 940px; margin-inline: auto; }
.master-plan__grid img { border-radius: 4px; }

/* Tab-Basis (.tabbed/.tab-pills/.tab-panel) liegt in home.css (geteilt mit
   gallery); hier nur PI-spezifische Anpassungen (Unit-Type contain, s.u.). */

/* ---- Amenities Building-A/-B Foto (Referenz: BUILDING A→photo-63,
   BUILDING B→infinite-pool je über der Ausstattungsliste) --------------- */
.amenities__group-figure { margin: 0 0 1.1rem; }
.amenities__group-figure img {
  width: 100%;
  border-radius: 4px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* ---- Quiet Luxury (rare-coastal): vollflächiges BG-Bild (photo-42, Frau am
   Strand) mit Text-Overlay, wie Original (Referenz-Screenshot 22 links) ---- */
.rare-coastal { text-align: center; }
.rare-coastal--bg { position: relative; overflow: hidden; min-height: clamp(420px, 60vw, 640px); display: grid; align-items: center; }
.rare-coastal__bg { position: absolute; inset: 0; z-index: 0; }
.rare-coastal__bg picture,
.rare-coastal__bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.rare-coastal__bg img { object-fit: cover; object-position: 30% center; }
.rare-coastal__content { position: relative; z-index: 1; }
/* Text steht wie im Original direkt auf dem hellen Strandbild (dunkler Text).
   Heller Glow dahinter hält ihn lesbar, wo das Motiv (Frau) drunterläuft. */
.rare-coastal--bg .section-title,
.rare-coastal--bg .split__script,
.rare-coastal--bg .prose {
  color: var(--color-text);
  text-shadow:
    0 0 6px rgba(255, 250, 243, 0.95),
    0 0 16px rgba(255, 250, 243, 0.85),
    0 0 32px rgba(255, 250, 243, 0.55);
}

/* ---- Tabs: PI-spezifische Anpassungen (Basis-Komponente in home.css) ----
   Unit-Type-Grundrisse nicht croppen (Pläne müssen ganz sichtbar sein). */
.unit-types .tab-panel img { aspect-ratio: auto; object-fit: contain; }