/* home.css — Sektionen der Startseite (EN Sales-Page + CN/RU Coming-Soon).
   Referenz: scrape/screens/{en,cn,ru}-home-*.jpg. Hero liegt in hero.css. */

.home { background: #fffdfb; }

/* ---- Bausteine ------------------------------------------------------- */
.section { padding-block: clamp(3.2rem, 7vw, 6rem); }
.section--tint { background: #f9f1e9; }
.center { text-align: center; }

.prose { max-width: 68ch; }
.prose.center { margin-inline: auto; }
.prose p + p { margin-top: 1rem; }

.overline {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text);
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  line-height: 1.25;
}

.section-title + .section-subtitle { margin-top: 0.3rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 1.8rem; }

/* Scroll-Reveal (nur mit JS aktiv; ohne JS bleibt alles sichtbar).
   Gate ist "reveal-ready", gesetzt von reveal.mjs SELBST als erste Anweisung
   (nicht "js-enabled" — die kommt aus einem Inline-Head-Script, das unabhängig
   davon läuft, ob reveal.mjs überhaupt lädt/ausführt). Scheitert das Modul
   (MIME-Fehler, Netzwerkfehler), bleibt die Klasse aus und alles sichtbar,
   statt für immer verborgen zu bleiben.
   animation-notes: ~600 ms, easeOutCubic. */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(50px); /* Original: translateY(50px) (Raw-HTML) */
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--reveal-delay, 0s); /* Stagger, gesetzt von reveal.mjs */
}
.reveal-ready [data-reveal].is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal-ready [data-reveal] { transform: none; transition: opacity 0.3s linear; }
}

/* ---- Intro ----------------------------------------------------------- */
.intro__inner { text-align: center; }
.intro .section-title { margin-bottom: 0.4rem; }
.intro .section-subtitle { margin-bottom: 1.6rem; }
.intro__body { margin-bottom: 2rem; }
.intro__figure { max-width: 940px; margin: 0 auto 2rem; }
.intro__figure img { border-radius: 4px; }
/* Intro-Panorama exakt wie Original zuschneiden: magnific-onsr9zbynm (1776×832)
   wird im Original per crop y=48 h=736 auf ein 1776×736-Band getrimmt (zentriert). */
.home .intro__figure img { aspect-ratio: 1776 / 736; object-fit: cover; }

/* ---- Split (A Rare Expression) --------------------------------------- */
.split__inner { display: grid; gap: clamp(1.6rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .split__inner { grid-template-columns: 1fr 1fr; } }
.split .overline { display: block; margin-bottom: 0.1rem; }
.split__script { font-size: clamp(2rem, 4vw, 3rem); margin: 0.1em 0 1.2rem; }
.split .btn { margin-top: 1.4rem; }
.split__figure img { border-radius: 4px; }
/* Bild neben Text füllt die Grid-Zelle KOMPLETT (wie Original; Best Practice:
   Text treibt die Höhe, Bild covert). Gleicher absolute-fill-Trick wie bei der
   Location-Karte — height:100% löst nicht gegen die Textspaltenhöhe auf.
   Mobil (einspaltig) bleibt natürlicher Bildfluss. */
@media (min-width: 900px) {
  .split__inner { align-items: stretch; }
  .split__text { align-self: center; }
  .split__figure { position: relative; margin: 0; min-height: 420px; }
  .split__figure picture,
  .split__figure img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .split__figure img { object-fit: cover; }
}

/* ---- Project Highlight ----------------------------------------------- */
.highlight { text-align: center; }
.highlight .section-title { margin-bottom: 2.2rem; }
.highlight__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1rem;
  margin-bottom: 2.4rem;
}
@media (min-width: 800px) { .highlight__grid { grid-template-columns: repeat(4, 1fr); } }
.highlight__item { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding-inline: 0.4rem; }
/* Illustriertes Outline-Icon je Kennzahl (Original 7.png: Gebäude / Bauplan /
   Raum / Checkliste) — ersetzt die frühere reine Gold-Linie. Bild transparent,
   Gold-Strich; Slot ~72px (srcset wählt 160er-Icon-Variante, s. images.mjs). */
.highlight__icon { display: block; margin-bottom: 0.9rem; }
.highlight__icon img { width: 72px; height: 72px; }
.highlight__label {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  font-size: 0.85rem;
}
.highlight__value { color: var(--color-text); }

/* ---- Amenities ------------------------------------------------------- */
.amenities { text-align: center; }
.amenities .section-subtitle { margin-bottom: 1.2rem; }
.amenities__intro { margin-bottom: 2.2rem; }
.amenities__groups { display: grid; gap: 1.2rem; margin-bottom: 2.6rem; }
@media (min-width: 800px) {
  .amenities__groups { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin-inline: auto; }
}
.amenities__group {
  border: 1px solid var(--color-line);
  border-radius: 6px;
  padding: 1.5rem;
  background: #fff;
  text-align: left;
}
.amenities__group-label { color: var(--color-accent); letter-spacing: 0.1em; margin-bottom: 0.8rem; }
.amenities__list { display: flex; flex-direction: column; gap: 0.4rem; }
.amenities__list li { padding-left: 1.1rem; position: relative; }
.amenities__list li::before { content: "•"; position: absolute; left: 0; color: var(--color-accent); }

/* CN/RU Amenity-Sektion (Item B): 3 Lifestyle-Fotos + Unterabschnitte mit
   RUNDEN Icon-Bildern über den Labels (Original 14.png). Ersetzt die früheren
   weißen Text-Karten (.amenities__cats). */
.amenities__photos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.8rem 0 2.8rem;
}
@media (min-width: 700px) { .amenities__photos { grid-template-columns: repeat(3, 1fr); } }
.amenities__photos li { overflow: hidden; border-radius: 4px; }
.amenities__photos img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.amenity-group { margin-bottom: 2.6rem; }
.amenity-group:last-of-type { margin-bottom: 2.2rem; }
.amenity-group__title {
  color: var(--color-primary);
  text-align: center;
  letter-spacing: 0.05em;
  margin-bottom: 1.6rem;
}
.amenity-group__items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.8rem 1rem;
  justify-items: center;
  max-width: 760px;
  margin-inline: auto;
}
@media (min-width: 700px) { .amenity-group__items { grid-template-columns: repeat(3, 1fr); } }
.amenity-icon { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; text-align: center; }
/* Rundes Icon-Bild (gefüllter Kreis, weißes Line-Art) — Slot ~120px; srcset
   wählt die 240er-Icon-Variante (s. images.mjs AMENITY_ICON). */
.amenity-icon__img { display: block; width: 120px; max-width: 40vw; }
.amenity-icon__img img { width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; }
.amenity-icon__label {
  font-family: var(--font-heading);
  letter-spacing: 0.02em;
  color: var(--color-text);
  font-size: 0.95rem;
  max-width: 15ch;
}

/* ---- Building A / B (EN amenities) ----------------------------------
   Original (Referenz 8.png): ZWEI eigenständige Gebäude-Sektionen, je
   Titel ("BUILDING A/B") + Untertitel ("Private Rooftop Retreat" /
   "Lifestyle & Wellness Hub") + eine Reihe beschrifteter Foto-Karten
   (Label ZENTRIERT UNTER dem Bild, nicht als Overlay). Fotos sind pro
   Gebäude fest zugeordnet (Content: data.amenities.buildings[].cards). */
.building { margin-bottom: 2.8rem; }
.building:last-of-type { margin-bottom: 2.4rem; }
.building__title { color: var(--color-primary); letter-spacing: 0.06em; margin-bottom: 0.15rem; }
.building__subtitle {
  font-family: var(--font-heading);
  color: var(--color-accent-strong);
  letter-spacing: 0.04em;
  margin-bottom: 1.6rem;
}
.building__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem 1rem;
}
@media (min-width: 600px) { .building__cards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .building__cards { grid-template-columns: repeat(4, 1fr); } }
.building__card { text-align: center; }
.building__card picture { display: block; overflow: hidden; border-radius: 4px; }
.building__card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.building__label {
  display: block;
  margin-top: 0.7rem;
  font-family: var(--font-heading);
  letter-spacing: 0.02em;
  color: var(--color-text);
}

/* ---- Gallery-Teaser (Einzelbild-Karussell) --------------------------
   Original (Referenz 9.png): großformatiges Einzelbild-Carousel mit
   runden Prev/Next-Pfeilen (.slider-arrow, base.css) + Dots (.hero__dots),
   NICHT ein statischer Thumbnail-Streifen. Slider-Kontrakt: [data-slider]
   + .slide, gesteuert von assets/js/slider.mjs. slider-ready-Gate: ohne JS
   bleiben alle Slides sichtbar (untereinander gestapelt). */
.gallery-teaser { text-align: center; }
.gallery-teaser__intro { margin-bottom: 2.4rem; }
.gallery-teaser__carousel { position: relative; margin-bottom: 2.4rem; }
.gallery-teaser__track { position: relative; border-radius: 6px; overflow: hidden; }
.gallery-teaser__track .slide { transition: opacity 0.7s var(--ease); }
.gallery-teaser__track .slide img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.gallery-teaser__track .slide + .slide { margin-top: 0.6rem; } /* No-JS-Stapel-Abstand */
.slider-ready .gallery-teaser__track .slide { position: absolute; inset: 0; opacity: 0; }
.slider-ready .gallery-teaser__track .slide + .slide { margin-top: 0; }
.slider-ready .gallery-teaser__track .slide.is-active { position: relative; opacity: 1; }

/* ---- Location-Teaser + Entfernungen ---------------------------------- */
/* "Unrivaled Luxury Location": hellblauer Illustrations-Hintergrund mit der
   Umgebungskarte (plan-sea-sky-pattya) rechts. Der Blauton des Kartenschnitts
   (#cdefff) wird als Sektionshintergrund fortgeführt, damit Karte und Fläche
   nahtlos ineinander übergehen; nach unten Verlauf auf Creme für die Icon-Reihe. */
.location-teaser { background: linear-gradient(180deg, #cdefff 0%, #dcf3fb 55%, #fffdfb 100%); }
.location-teaser__inner { display: grid; gap: clamp(1.6rem, 4vw, 3rem); align-items: center; }
/* Karte ist im Original das dominante Element (~57% Breite, Referenz 10.png) —
   nicht 50/50. Text links schmaler, Karte rechts breiter/größer gestellt. */
@media (min-width: 900px) { .location-teaser__inner { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); } }
.location-teaser__text { max-width: 620px; }
.location-teaser .overline { display: block; margin-bottom: 0.1rem; }
.location-teaser__script { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin: 0.1em 0 1.2rem; }
.location-teaser .btn { margin-top: 1.4rem; }
/* Karte wie im Original: Grid-Zelle rechts wird KOMPLETT vom Bild gefüllt.
   height:100% löst nicht gegen min-height auf (das war der Bug: Bild schrumpfte
   auf Eigenmaß) → absolute-fill ist die robuste Variante. Quellbild flach
   (1920×1035), Cover-Crop mit Fokus auf dem SEA-SKY-Badge links. */
.location-teaser__map { margin: 0; position: relative; min-height: clamp(320px, 55vw, 460px); }
.location-teaser__map picture,
.location-teaser__map img { position: absolute; inset: 0; width: 100%; height: 100%; }
.location-teaser__map img { object-fit: cover; object-position: 30% center; }
@media (min-width: 900px) {
  .location-teaser__inner { align-items: stretch; }
  .location-teaser__map { min-height: min(78vh, 700px); }
  .location-teaser__text { align-self: center; }
}
.distances {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.8rem 1rem;
  margin-top: 2.8rem;
  text-align: center;
}
@media (min-width: 800px) { .distances { grid-template-columns: repeat(4, 1fr); } }
.distances__item { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
/* POI-Icon: illustriertes Icon-BILD (Gold-Outline, /icon/-Ordner) über der Zeit
   — ersetzt die früheren selbstgebauten Strich-SVGs (s. build.mjs
   markDistanceIcons). Slot ~56px, srcset wählt die 160er-Icon-Variante. */
.distances__icon { display: flex; margin-bottom: 0.4rem; }
.distances__icon img { width: 56px; height: 56px; object-fit: contain; }
.distances__time {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  color: var(--color-primary);
}
.distances__label { color: var(--color-muted); font-size: 0.9rem; }

/* ---- 404-Seite (templates/pages/404.mustache) ------------------------ */
.error-page { min-height: 46vh; display: grid; place-items: center; }
.error-page__code { color: var(--color-accent); font-size: clamp(2rem, 6vw, 3.4rem); }
.error-page__title { margin: 0.2rem 0 1rem; }
.error-page__body { margin-bottom: 2rem; }

/* ---- CN/RU: Feature-Band „Luxury Beachfront Living" ------------------ */
.feature-band { position: relative; }
.feature-band > picture,
.feature-band > picture img { display: block; width: 100%; }
.feature-band img { height: min(68vh, 620px); object-fit: cover; }
.feature-band__caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  text-align: right;
  padding-inline: clamp(1.5rem, 8vw, 8rem);
  /* Item A: dunkelbrauner Text wie im Original (Inline-CSS --tpc-24 = 96,55,24)
     — der frühere helle Ton + weißer Schatten „wusch" auf dem hellen Sonnen-
     untergangs-Poster aus. Dezenter heller Lift statt Wash für die Kantentrennung. */
  color: #603718;
  text-shadow: 0 1px 4px rgba(255, 251, 248, 0.5);
}
.feature-band__line { font-family: var(--font-heading); font-size: clamp(1.8rem, 4.4vw, 3.4rem); letter-spacing: 0.02em; }
.feature-band__script { font-size: clamp(2.4rem, 6vw, 4.4rem); color: #603718; }

/* ---- CN/RU: Feature-Cards -------------------------------------------- */
.feature-cards { display: grid; grid-template-columns: 1fr; }
@media (min-width: 700px) { .feature-cards { grid-template-columns: repeat(3, 1fr); } }
.feature-cards__item { position: relative; }
.feature-cards__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.feature-cards__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem 1.2rem;
  color: #fff;
  font-family: var(--font-heading);
  letter-spacing: 0.03em;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.58));
}

/* ---- CN/RU: „隐秘瑰宝 / Скрытая жемчужина" Karten-Sektion (Item C) --------
   Original (15.png): zentrierte Überschrift + große illustrierte Umgebungskarte.
   Übernimmt das Muster der EN-Location-Teaser-Karte (hellblauer Illustrations-
   Hintergrund, der in den Kartenschnitt übergeht; Commit c7ed2b7). Anders als
   dort wird die Karte in voller natürlicher Proportion gezeigt (kein Cover-Crop),
   damit Insel, Straßen und SEA-SKY-Badge vollständig lesbar bleiben. */
.hidden-gem { background: linear-gradient(180deg, #cdefff 0%, #dcf3fb 55%, #fffdfb 100%); }
.hidden-gem .section-title { margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.hidden-gem__map { margin-inline: auto; max-width: 1040px; }
.hidden-gem__map picture,
.hidden-gem__map img { display: block; width: 100%; }
.hidden-gem__map img { border-radius: 6px; box-shadow: 0 10px 30px rgba(13, 27, 36, 0.14); }

/* ---- CN/RU: Surroundings --------------------------------------------- */
.surroundings__grid {
  display: grid;
  gap: 2rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 2rem;
}
.surroundings__label {
  color: var(--color-accent);
  letter-spacing: 0.08em;
  margin-bottom: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--color-line);
}
.surroundings__cat ul { display: flex; flex-direction: column; gap: 0.35rem; }
.surroundings__cat li { color: var(--color-text); font-size: 0.95rem; }

/* ---- Instagram-Kacheln ----------------------------------------------- */
.ig { text-align: center; }
.ig__handle { margin: 0.3rem 0 1.6rem; color: var(--color-accent-strong); letter-spacing: 0.05em; }
.ig__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
@media (min-width: 700px) { .ig__grid { grid-template-columns: repeat(4, 1fr); } }
.ig__grid a { display: block; overflow: hidden; }
.ig__grid img { aspect-ratio: 1 / 1; object-fit: cover; transition: transform 0.4s var(--ease); }
.ig__grid a:hover img { transform: scale(1.05); }

/* ---- Tab-Pills + Panels (funktionale Tabs: Amenities/Unit-Types auf
   project-information, Signature Amenities auf gallery) — geteilte Komponente,
   daher hier statt in project.css. tabs.mjs schaltet Panels, aktiver Pill via
   .is-active/aria-pressed. Failsafe: Panels im Markup ALLE hidden; tabs.mjs
   (tabs-ready) blendet Panel 1 ein, ohne JS greift der :first-child-Fallback. */
.tabbed { margin-bottom: 2.6rem; }
.tabbed__title { color: var(--color-primary); letter-spacing: 0.06em; margin-bottom: 1.1rem; }
.tab-pills { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-bottom: 1.4rem; }
.tab-pill {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 0.55em 1.3em;
  cursor: pointer;
  transition: background-color 0.2s linear, color 0.2s linear;
}
.tab-pill.is-active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.tab-panels { max-width: 940px; margin-inline: auto; }
.tab-panels--featured { max-width: none; } /* Featured-Karte (gallery) nutzt volle Container-Breite */
.tab-panel { margin: 0; }
.tab-panel img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; }
/* WICHTIG: Panels wie .featured setzen display (grid) — das überstimmt das
   UA-[hidden]. Explizite Regel stellt sicher, dass hidden Panels weg sind. */
.tab-panel[hidden] { display: none; }
/* No-JS-Fallback: ohne tabs-ready erstes Panel zeigen (Selektor-Spezifität
   schlägt die [hidden]-Regel; Featured-Variante braucht ihr Grid zurück) */
html:not(.tabs-ready) .tab-panels > .tab-panel:first-child { display: block; }
html:not(.tabs-ready) .tab-panels--featured > .tab-panel:first-child { display: grid; }

/* ---- E-Brochure: Download-Karten (Canva-Links, s. e-brochure.mustache) */
.download__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin: 0 0 2.2rem; text-align: center; }
@media (min-width: 700px) { .download__grid { grid-template-columns: repeat(3, 1fr); } }
.download__card { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.download__cover { display: block; width: 100%; max-width: 220px; }
.download__cover img { border-radius: 4px; box-shadow: 0 8px 24px rgba(13, 27, 36, 0.16); }
.download__label { font-size: 1.1rem; }

/* ---- Enquiry: Seafront-Legacy-Bahn + Papiertextur -------------------- */
/* Vollbreite Küsten-Sonnenuntergangs-Bahn (sea-sky---photo-56) direkt über
   dem Formular — im Original der visuelle Auftakt zu „A SEAFRONT LEGACY". */
.enquiry-band { margin: 0; line-height: 0; }
.enquiry-band img { display: block; width: 100%; height: clamp(220px, 32vw, 460px); object-fit: cover; }
/* Cremefarbene Papiertextur (magnific-aqm9zjwfsh) als Formular-Hintergrund;
   als eigenes Bild-Layer (nicht CSS-bg), damit die Fidelity-Prüfung die
   geteilte Bild-ID auf jeder Enquiry-Seite sieht. */
.enquiry { position: relative; isolation: isolate; overflow: hidden; }
.enquiry__texture { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.enquiry__texture img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Enquiry-Formular ------------------------------------------------ */
.enquiry__inner { text-align: center; }
.enquiry .section-title { margin-bottom: 0.6rem; }
.enquiry__intro { margin-bottom: 2.5rem; }
.enquiry__form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem 1.6rem;
  max-width: 880px;
  margin-inline: auto;
  text-align: left;
}
@media (min-width: 700px) { .enquiry__form { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field--full { grid-column: 1 / -1; }
.field__label {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  color: var(--color-muted);
}
.req { color: #c0392b; }
.enquiry input,
.enquiry select,
.enquiry textarea {
  font: inherit;
  color: var(--color-text);
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 4px;
  padding: 0.7em 0.8em;
  width: 100%;
}
.enquiry textarea { resize: vertical; }
.enquiry input:focus,
.enquiry select:focus,
.enquiry textarea:focus { outline: none; border-color: var(--color-accent); }
.field__phone { display: flex; gap: 0.5rem; }
.field__phone select { width: auto; flex: 0 0 auto; }
.btn--submit {
  border-radius: 4px;
  background: var(--color-primary);
  border-color: var(--color-primary);
  padding-inline: 3rem;
  margin-top: 0.5rem;
}
.btn--submit:hover { background: #573a26; border-color: #573a26; }