/* ==========================================================================
   HIMALAYAN OBSERVATORY KAUSANI
   pages.css — inner page templates
   ========================================================================== */

/* --------------------------------------------------------------------------
   PAGE HERO
   -------------------------------------------------------------------------- */
.phero {
  position: relative;
  padding-block: clamp(8rem, 22vh, 12rem) clamp(3rem, 8vw, 5.5rem);
  overflow: hidden;
  isolation: isolate;
}
.phero__bg {
  position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(105% 75% at 50% 6%, #0b1430, #070d1e 40%, #04060f 78%);
}
.phero__canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.phero__ridges { position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; }

.phero__in { position: relative; display: grid; gap: var(--s-md); }
.phero__title {
  font-family: var(--serif); font-weight: 300;
  font-size: var(--fs-4xl); line-height: 1;
  letter-spacing: -0.025em; text-transform: uppercase;
}
.phero__body { max-width: 58ch; color: var(--muted); font-size: var(--fs-lg); line-height: var(--lh-loose); }
.phero__crumb {
  font-size: var(--fs-micro); letter-spacing: var(--ls-hair);
  text-transform: uppercase; color: var(--faint);
}
.phero__crumb a { transition: color var(--d-2) var(--ease); }
.phero__crumb a:hover { color: var(--gold); }
.phero__crumb span { color: var(--gold); }

/* --------------------------------------------------------------------------
   GENERIC PAGE BODY BLOCKS
   -------------------------------------------------------------------------- */
.page-section { position: relative; }
.page-section + .page-section { margin-top: clamp(4rem, 10vw, 8rem); }

.page-head { display: grid; gap: var(--s-sm); margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.page-head .label { margin-bottom: 0.4rem; }

/* prose-with-plate: text beside a framed image */
.split {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.5vw, 3.5rem); align-items: center;
}
.split__text { grid-column: 1 / span 5; }
.split__art { grid-column: 6 / span 7; }
.split--flip .split__text { order: 2; grid-column: 8 / span 5; }
.split--flip .split__art { order: 1; grid-column: 1 / span 7; }

/* definition list, reused across inner pages */
.deflist { display: grid; border-top: 1px solid var(--edge); }
.deflist > div {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-md);
  padding: 1rem 0; border-bottom: 1px solid var(--edge);
  align-items: baseline;
}
.deflist dt {
  font-size: var(--fs-micro); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--faint);
}
.deflist dd { font-size: var(--fs-sm); color: var(--text); text-align: right; }

/* object list — the "what you can spot" rows, reused */
.objlist { display: grid; gap: 0; border-top: 1px solid var(--edge); }
.objlist > div {
  display: grid; grid-template-columns: minmax(140px, 1fr) 2fr;
  gap: var(--s-md); padding: 1.15rem 0;
  border-bottom: 1px solid var(--edge);
  align-items: baseline;
}
.objlist dt {
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--gold);
}
.objlist dd { color: var(--muted); font-size: var(--fs-sm); }

/* masonry-ish gallery for inner pages */
.mgrid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.2vw, 1rem);
}
.mgrid > * { grid-column: span 4; }
.mgrid > .c6 { grid-column: span 6; }
.mgrid > .c3 { grid-column: span 3; }

/* accordion, reused from the homepage FAQ */
.faq--page .faq__q { padding-block: clamp(1.3rem, 2.6vw, 2.1rem); }

/* closing CTA band shared by every inner page */
.closer {
  position: relative; overflow: hidden;
  padding-block: clamp(4.5rem, 11vw, 8rem);
  text-align: center;
  isolation: isolate;
}
.closer__canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.closer__in { position: relative; display: grid; gap: var(--s-lg); justify-items: center; }
.closer__title {
  font-family: var(--serif); font-weight: 300;
  font-size: var(--fs-3xl); line-height: 1.02;
  letter-spacing: -0.02em; text-transform: uppercase;
  max-width: 16ch;
}
.closer__body { max-width: 52ch; color: var(--muted); font-size: var(--fs-lg); }

/* contact specifics */
.contact-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.5vw, 3.5rem); align-items: start;
}
.contact-form { grid-column: 1 / span 7; display: grid; gap: var(--s-md); }
.contact-aside { grid-column: 9 / span 4; display: grid; gap: var(--s-lg); }

.form-note {
  font-size: var(--fs-xs); color: var(--faint); line-height: 1.6;
}

@media (max-width: 999px) {
  .split__text, .split__art,
  .split--flip .split__text, .split--flip .split__art,
  .contact-form, .contact-aside { grid-column: 1 / -1; order: 0; }
  .objlist > div { grid-template-columns: 1fr; gap: 0.5rem; }
  .deflist > div { grid-template-columns: 1fr; gap: 0.35rem; }
  .deflist dd { text-align: left; }
  .mgrid > *, .mgrid > .c6, .mgrid > .c3 { grid-column: span 6; }
}

@media (min-width: 600px) {
  .mgrid > * { grid-column: span 4; }
}

/* ==========================================================================
   MAP + CONTACT ACTIONS
   ========================================================================== */
.contact-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.map { margin: 0; }
.map__frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--edge);
  border-radius: var(--r-md, 4px);
  overflow: hidden;
  /* holds the shape before Google paints, so nothing reflows on load */
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(24, 36, 62, 0.5), transparent 70%),
    var(--deep, #060a14);
}
.map__embed { display: block; width: 100%; height: 100%; border: 0; }
.map__noscript {
  position: absolute; inset: 0; display: grid; place-content: center;
  padding: 2rem; text-align: center; color: var(--muted);
}
.map__noscript a { color: var(--gold); }
.map__cap {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 0.9rem;
  margin-top: var(--s-md, 1.4rem);
  padding-top: var(--s-sm, 0.9rem);
  border-top: 1px solid var(--edge);
}
.map__coords {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--fs-micro, 0.68rem);
  letter-spacing: var(--ls-wide, 0.14em);
  text-transform: uppercase;
  color: var(--faint);
}
/* The Google tile is a light UI that would glare against the night palette.
   Invert it, but keep saturation low -- at higher values the hue-rotate
   leaves a green cast that fights the blues in the rest of the page. */
.map__embed {
  filter: invert(0.93) hue-rotate(185deg) saturate(0.45) contrast(0.9) brightness(1.06);
}

@media (max-width: 600px) {
  .map__frame { aspect-ratio: 4 / 3; }
}