/* ==========================================================================
   SMART SPITI — HOMEPAGE-SPECIFIC LAYOUT
   Page-level composition only. All colour, type and spacing values are
   pulled from the Stage 1 tokens in css/variables.css — nothing new is
   introduced here beyond layout structure.
   ========================================================================== */

/* ---- Architectural placeholder surface ----------------------------------
   Used wherever final photography is not yet available. A restrained
   blueprint-style grid on a grayscale gradient — reads as "architecture",
   not as a broken image or a generic colour block.                        */
.ph-arch{
  position: relative;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 48px),
    linear-gradient(155deg, #e9e9e9, #f7f7f7 55%, #dfdfdf);
  overflow: hidden;
}
.ph-arch--dark{
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 48px),
    linear-gradient(155deg, #141414, #0a0a0a 55%, #1c1c1c);
}
.ph-arch__mark{
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(0,0,0,0.32);
}
.ph-arch--dark .ph-arch__mark{ color: rgba(255,255,255,0.32); }

/* --------------------------------------------------------------------------
   HERO — split composition (text left, architectural visual right)
   -------------------------------------------------------------------------- */

.hero{
  padding-top: calc(var(--space-9) + 64px);
  padding-bottom: var(--space-8);
}

.hero__grid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-7);
  align-items: center;
}

.hero__visual{
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-on-dark);
}

.hero__kicker{ margin-bottom: var(--space-4); }

.hero h1{ max-width: 13ch; }

.hero__lede{ margin-top: var(--space-4); max-width: 46ch; }

.hero__actions{
  display: flex; gap: var(--space-3); flex-wrap: wrap;
  margin-top: var(--space-6);
}

@media (max-width: 960px){
  .hero__grid{ grid-template-columns: 1fr; }
  .hero__visual{ aspect-ratio: 16 / 10; order: -1; }
  .hero{ padding-top: calc(var(--space-8) + 56px); }
}

/* --------------------------------------------------------------------------
   BRAND PHILOSOPHY — editorial statement + "versus" comparison
   -------------------------------------------------------------------------- */

.philosophy{
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-8);
  align-items: start;
}
@media (max-width: 900px){
  .philosophy{ grid-template-columns: 1fr; gap: var(--space-6); }
}

.versus{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-5);
}
@media (max-width: 640px){
  .versus{ grid-template-columns: 1fr; }
  .versus__divider{ width: 100%; height: 1px; margin-block: var(--space-2); }
}

.versus__side h3{ margin-bottom: var(--space-2); }
.versus__side p{ color: var(--slate); font-size: var(--fs-small); line-height: var(--lh-relaxed); }
.versus__side--muted h3{ color: var(--graphite); font-weight: 500; }

.versus__divider{
  width: 1px;
  align-self: stretch;
  background: var(--border-on-light-strong);
  position: relative;
}
.versus__divider span{
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  background: var(--surface-light);
  padding: 0.35rem 0.6rem;
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  color: var(--graphite);
  border: 1px solid var(--border-on-light-strong);
  border-radius: var(--radius-pill);
}

/* --------------------------------------------------------------------------
   CAPABILITY GROUPS — "What can your space do?"
   Editorial 2x2 composition grouped by outcome, not a grid of 12 icon cards.
   -------------------------------------------------------------------------- */

.capability-groups{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--border-on-dark);
  border-left: 1px solid var(--border-on-dark);
}
.capability-group{
  padding: var(--space-6) var(--space-5);
  border-right: 1px solid var(--border-on-dark);
  border-bottom: 1px solid var(--border-on-dark);
}
.capability-group__label{
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
}
.capability-group__desc{
  margin-top: var(--space-2);
  max-width: 42ch;
  color: var(--text-on-dark-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
}
.capability-group__tags{
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.capability-group__tags a{
  font-size: var(--fs-small);
  color: var(--text-on-dark-muted);
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-on-dark-strong);
  border-radius: var(--radius-pill);
  transition: border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.capability-group__tags a:hover{ border-color: var(--paper); color: var(--paper); }

@media (max-width: 720px){
  .capability-groups{ grid-template-columns: 1fr; }
}

.capability-note{
  margin-top: var(--space-5);
  font-size: var(--fs-small);
  color: var(--text-on-dark-faint);
}

/* --------------------------------------------------------------------------
   LIFE IN SCENES — asymmetric editorial grid
   -------------------------------------------------------------------------- */

.scenes-grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas:
    "morning morning morning movie movie movie"
    "leaving leaving night night entertain entertain";
  gap: var(--space-4);
}
.scenes-grid .scenario-card:nth-child(1){ grid-area: morning; aspect-ratio: 16/10; }
.scenes-grid .scenario-card:nth-child(2){ grid-area: movie;   aspect-ratio: 16/10; }
.scenes-grid .scenario-card:nth-child(3){ grid-area: leaving; aspect-ratio: 4/5; }
.scenes-grid .scenario-card:nth-child(4){ grid-area: night;   aspect-ratio: 4/5; }
.scenes-grid .scenario-card:nth-child(5){ grid-area: entertain; aspect-ratio: 4/5; }

@media (max-width: 900px){
  .scenes-grid{
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "morning morning"
      "movie movie"
      "leaving night"
      "entertain entertain";
  }
  .scenes-grid .scenario-card{ aspect-ratio: 16/11 !important; }
}
@media (max-width: 560px){
  .scenes-grid{
    grid-template-columns: 1fr;
    grid-template-areas: "morning" "movie" "leaving" "night" "entertain";
  }
}

/* --------------------------------------------------------------------------
   RESIDENTIAL FOCUS — asymmetric property grid + de-emphasised commercial row
   -------------------------------------------------------------------------- */

.residential-grid{
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-4);
}
.residential-grid .property-card:nth-child(1){ grid-column: 1; grid-row: 1 / span 2; }
.residential-grid .property-card:nth-child(1) .property-card__media{ aspect-ratio: 4/5; }
.residential-grid .property-card:nth-child(2){ grid-column: 2; }
.residential-grid .property-card:nth-child(3){ grid-column: 2; }

@media (max-width: 860px){
  .residential-grid{ grid-template-columns: 1fr 1fr; }
  .residential-grid .property-card:nth-child(1){ grid-column: 1 / -1; grid-row: auto; }
  .residential-grid .property-card:nth-child(1) .property-card__media{ aspect-ratio: 16/9; }
  .residential-grid .property-card:nth-child(2){ grid-column: 1; }
  .residential-grid .property-card:nth-child(3){ grid-column: 2; }
}
@media (max-width: 560px){
  .residential-grid{ grid-template-columns: 1fr; }
  .residential-grid .property-card:nth-child(2),
  .residential-grid .property-card:nth-child(3){ grid-column: 1; }
}

.also-serving{
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-on-light);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.also-serving span.label{
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-on-light-faint);
  font-weight: 600;
}
.also-serving a{
  font-size: var(--fs-small);
  color: var(--slate);
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-on-light-strong);
  border-radius: var(--radius-pill);
  transition: border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.also-serving a:hover{ border-color: var(--ink); color: var(--ink); }

/* --------------------------------------------------------------------------
   SPLIT CTA — "New or Existing"
   -------------------------------------------------------------------------- */

.split-cta{
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-on-light);
}
.split-cta__panel{
  padding: var(--space-7) var(--space-5);
  position: relative;
}
.split-cta__panel:first-child{ border-right: 1px solid var(--border-on-light); }
.split-cta__panel .eyebrow{ margin-bottom: var(--space-3); }
.split-cta__panel h3{ font-size: var(--fs-h3); max-width: 16ch; margin-bottom: var(--space-3); }
.split-cta__panel p{ color: var(--slate); font-size: var(--fs-body); max-width: 34ch; margin-bottom: var(--space-5); }

@media (max-width: 768px){
  .split-cta{ grid-template-columns: 1fr; }
  .split-cta__panel:first-child{ border-right: none; border-bottom: 1px solid var(--border-on-light); }
}

/* --------------------------------------------------------------------------
   VALUE BLOCKS — "Why Smart Spiti"
   -------------------------------------------------------------------------- */

.value-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
@media (max-width: 900px){ .value-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .value-grid{ grid-template-columns: 1fr; } }

.value-block{
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-on-light);
}
.value-block h4{ margin-bottom: var(--space-2); }
.value-block p{ font-size: var(--fs-small); color: var(--slate); line-height: var(--lh-relaxed); }

/* --------------------------------------------------------------------------
   ARCHITECTS & BUILDERS — dark professional section
   -------------------------------------------------------------------------- */

.pro-section{
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: var(--space-8);
  align-items: start;
}
@media (max-width: 960px){ .pro-section{ grid-template-columns: 1fr; gap: var(--space-6); } }

.pro-audience{
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin-top: var(--space-5);
}
.pro-audience span{
  font-size: var(--fs-caption);
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-on-dark-strong);
  border-radius: var(--radius-pill);
  color: var(--text-on-dark-muted);
}

.pro-list{ display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1.5rem; }
@media (max-width: 560px){ .pro-list{ grid-template-columns: 1fr; } }
.pro-list li{
  font-size: var(--fs-small);
  color: var(--text-on-dark-muted);
  padding-left: 1.1rem;
  position: relative;
}
.pro-list li::before{
  content: '';
  position: absolute; left: 0; top: 0.5em;
  width: 5px; height: 5px;
  background: var(--paper);
}

/* --------------------------------------------------------------------------
   Responsive type safety for large editorial headlines
   -------------------------------------------------------------------------- */

.balance{ text-wrap: balance; }