/* ==========================================================================
   The Albizia — pages.css
   Page-specific blocks. Anything reused twice belongs in layout.css instead.
   ========================================================================== */

/* --- Home: centred statement -------------------------------------------- */

.statement-block {
  text-align: center;
  padding-block: clamp(6rem, 13vw, 11rem);
}
.statement-block .statement {
  max-width: 22ch;
  margin-inline: auto;
  font-size: clamp(1.75rem, 4vw, 3rem);
}
.statement-block .eyebrow { margin-bottom: 2.5rem; }
.statement-block p.lede {
  margin-inline: auto;
  margin-top: 2.5rem;
  max-width: 56ch;
  color: var(--stone);
}

/* Closing photograph for the statement. Sits wider than the 900px text column
   so the land gets some presence, but stops short of full bleed — the .band
   further down the page is the full-width moment and should stay the only one. */
.statement-figure {
  margin-top: clamp(3.5rem, 8vw, 6rem);
}
.statement-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center 58%;
}

@media (max-width: 600px) {
  .statement-figure { margin-top: clamp(2.5rem, 9vw, 3.5rem); }
  /* Taller crop so the dome and the tree survive the narrower frame. */
  .statement-figure img { aspect-ratio: 4 / 3; }
}

/* --- Domes: the six-dome roster ----------------------------------------- */

.dome-roster {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
@media (min-width: 800px) { .dome-roster { grid-template-columns: repeat(3, 1fr); } }

.dome-roster > li {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
}
.dome-roster .dome__name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  line-height: 1.15;
}
.dome-roster .dome__meta {
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
}

/* --- Experience: numbered itinerary list -------------------------------- */

.itinerary { border-top: 1px solid var(--rule); counter-reset: itin; }

.itinerary > li {
  counter-increment: itin;
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(2rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 800px) {
  .itinerary > li { grid-template-columns: 4rem 1fr 1.4fr; gap: 2.5rem; align-items: start; }
}

.itinerary > li::before {
  content: counter(itin, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: var(--stone);
  line-height: 1.4;
}

.itinerary h3 { line-height: 1.2; }
.itinerary p { font-size: 1rem; color: var(--stone); max-width: 52ch; }

.itinerary .itin__dist {
  display: block;
  margin-top: 0.9rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
}

/* --- Sustainability: metric callouts ------------------------------------ */

.metric-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 700px) { .metric-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1050px) { .metric-grid { grid-template-columns: repeat(3, 1fr); } }

.metric { border-top: 1px solid var(--rule); padding-top: 1.75rem; }
.section--dark .metric { border-top-color: rgba(244,241,236,.18); }
.metric h3 { margin-bottom: 1rem; }
.metric p { font-size: 1rem; color: var(--stone); }
.section--dark .metric p { color: rgba(244,241,236,.7); }

/* --- Partnerships: package tiers ---------------------------------------- */

.tiers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
@media (min-width: 900px) { .tiers { grid-template-columns: repeat(3, 1fr); } }

.tier {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: clamp(2rem, 3.5vw, 3rem);
  display: flex;
  flex-direction: column;
}
.tier h3 { margin-bottom: 1.25rem; }
.tier__cap {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 1.75rem;
}
.tier ul { margin-top: auto; }
.tier li {
  font-size: 0.9375rem;
  font-weight: 300;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--rule);
  color: var(--stone);
}
.tier li:last-child { border-bottom: 0; }
.tier__price {
  margin-top: 2rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--basalt);
}

/* Process steps */
.process { counter-reset: step; border-top: 1px solid var(--rule); }
.process > li {
  counter-increment: step;
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 800px) {
  .process > li { grid-template-columns: 4rem 1fr 1.6fr; gap: 2.5rem; align-items: baseline; }
}
.process > li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: var(--stone);
}
.process h3 { font-size: clamp(1.125rem, 1.6vw, 1.375rem); }
.process p { font-size: 1rem; color: var(--stone); max-width: 54ch; }

/* --- Contact: form ------------------------------------------------------- */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3rem, 6vw, 5rem);
}
@media (min-width: 950px) { .contact-layout { grid-template-columns: 1fr 1.35fr; } }

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 3vw, 2.5rem);
}
@media (min-width: 620px) { .form-grid { grid-template-columns: repeat(2, 1fr); } }
.form-grid .field--full { grid-column: 1 / -1; }

.form-section-label {
  grid-column: 1 / -1;
  /* p inherits a 62ch cap from base.css; this divider must span the full grid. */
  max-width: none;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.9rem;
  margin-top: 1rem;
}
.form-section-label:first-child { margin-top: 0; }

.form-actions {
  grid-column: 1 / -1;
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}

.form-note { font-size: 0.8125rem; color: var(--stone); max-width: 40ch; line-height: 1.6; }

/* Placeholder notice shown when the form is submitted before it is wired up.
   Delete along with the FORM_PLACEHOLDER handler in js/main.js. */
.form-notice {
  grid-column: 1 / -1;
  border: 1px solid var(--ember);
  border-left-width: 3px;
  padding: 1.25rem 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--basalt);
  background: rgba(196, 100, 58, 0.05);
}
.form-notice[hidden] { display: none; }
.form-notice strong { font-weight: 500; }

/* Contact detail column */
/* Direct contact block. Constrained so the definition rows keep a readable
   measure instead of stretching the full 1280px container. */
.contact-direct { max-width: 34rem; }
.contact-direct .contact-details { margin-top: 1.5rem; }
.contact-direct .form-note { margin-top: 2rem; }

.contact-details { border-top: 1px solid var(--rule); }
.contact-details > div {
  border-bottom: 1px solid var(--rule);
  padding-block: 1.5rem;
}
.contact-details dt {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 0.6rem;
}
.contact-details dd { margin: 0; font-weight: 300; }

/* --- Gallery strip ------------------------------------------------------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
}
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* --- Editorial note (renders / pending photography) ---------------------- */

.img-note {
  display: block;
  margin-top: 0.85rem;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
}