/**
 * H2O inner pages — venue pages, About, Contact.
 * Builds on homepage.css (shared header/footer/buttons/cards) + h2o-tokens.css.
 */

/* ── Compact page hero ── */
.h2o-phero {
  position: relative; overflow: hidden; color: #fff;
  background: var(--h2o-gradient-hero);
  text-align: center;
}
.h2o-phero__in { padding: 150px 24px 110px; position: relative; z-index: 2; max-width: 820px; margin: 0 auto; }
.h2o-phero h1 { font-size: clamp(32px, 4.6vw, 52px); font-weight: 600; margin: 18px 0 12px; text-shadow: 0 4px 30px rgba(7,16,33,.35); }
.h2o-phero__tagline { font-size: clamp(15px, 1.8vw, 18px); color: rgba(255,255,255,.92); max-width: 620px; margin: 0 auto; }
.h2o-phero .h2o-btn { margin-top: 26px; }
.h2o-phero--night { background: var(--h2o-gradient-night); }
.h2o-phero--dusk { background: var(--h2o-gradient-dusk); }
.h2o-phero .h2o-waves { position: absolute; bottom: -2px; left: 0; right: 0; z-index: 3; line-height: 0; }

/* ── Two-column content row (photo + text) ── */
.h2o-row { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.h2o-row + .h2o-row { margin-top: 72px; }
.h2o-row--flip .h2o-row__media { order: 2; }
.h2o-row__media {
  border-radius: var(--h2o-radius); overflow: hidden;
  box-shadow: var(--h2o-shadow-lg); min-height: 300px;
  background-size: cover; background-position: center;
}
.h2o-row__text .h2o-label { margin-bottom: 10px; }
.h2o-row__text p { color: var(--h2o-foreground-soft); margin-bottom: 14px; }
.h2o-row__text ul { margin: 0 0 14px 18px; color: var(--h2o-foreground-soft); }
.h2o-row__text li { margin-bottom: 8px; }

/* ── Amenity / feature chips ── */
.h2o-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; padding: 0; list-style: none; }
.h2o-chips li {
  font-size: 13px; font-weight: 700; color: var(--h2o-primary);
  border: 1.5px solid rgba(2, 132, 199, .35); border-radius: var(--h2o-radius-pill);
  padding: 7px 16px; background: rgba(2, 132, 199, .06);
}

/* ── Feature cards (3-up, light) ── */
.h2o-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
.h2o-feat {
  background: #fff; border: 1px solid var(--h2o-border); border-radius: var(--h2o-radius);
  padding: 24px; box-shadow: var(--h2o-shadow-sm);
}
.h2o-feat svg { width: 28px; height: 28px; color: var(--h2o-primary); margin-bottom: 12px; }
.h2o-feat h3 { font-size: 15.5px; margin-bottom: 7px; }
.h2o-feat p { font-size: 13.5px; color: var(--h2o-foreground-soft); }

/* ── Photo gallery ── */
.h2o-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 34px; }
.h2o-gallery a, .h2o-gallery div {
  display: block; border-radius: var(--h2o-radius-sm); overflow: hidden;
  aspect-ratio: 4 / 3; background-size: cover; background-position: center;
  transition: transform var(--h2o-dur) var(--h2o-ease), box-shadow var(--h2o-dur) var(--h2o-ease);
}
.h2o-gallery a:hover, .h2o-gallery div:hover { transform: translateY(-4px); box-shadow: var(--h2o-shadow-lg); }
.h2o-gallery figure, .h2o-gallery__ph {
  margin: 0; border-radius: var(--h2o-radius-sm); overflow: hidden;
  aspect-ratio: 4 / 3;
  transition: transform var(--h2o-dur) var(--h2o-ease), box-shadow var(--h2o-dur) var(--h2o-ease);
}
.h2o-gallery figure:hover { transform: translateY(-4px); box-shadow: var(--h2o-shadow-lg); }
.h2o-gallery figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Dusk CTA band (reused on every inner page) ── */
.h2o-cta-band { background: var(--h2o-gradient-dusk); color: #fff; text-align: center; padding: 64px 24px; position: relative; overflow: hidden; }
.h2o-cta-band h2 { color: #fff; margin: 0 auto 12px; }
.h2o-cta-band p { max-width: 560px; margin: 0 auto 24px; color: rgba(255,255,255,.93); }
.h2o-cta-band .h2o-btn--cta { border: 2px solid rgba(255,255,255,.85); }

/* ── Contact page ── */
.h2o-contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
.h2o-contact-card {
  background: #fff; border: 1px solid var(--h2o-border); border-radius: var(--h2o-radius);
  padding: 26px; text-align: center; box-shadow: var(--h2o-shadow-sm);
}
.h2o-contact-card svg { width: 30px; height: 30px; color: var(--h2o-primary); margin-bottom: 12px; }
.h2o-contact-card h3 { font-size: 15.5px; margin-bottom: 8px; }
.h2o-contact-card p, .h2o-contact-card a { font-size: 14px; color: var(--h2o-foreground-soft); text-decoration: none; }
.h2o-contact-card a:hover { color: var(--h2o-primary); }
.h2o-map { border-radius: var(--h2o-radius); overflow: hidden; box-shadow: var(--h2o-shadow-md); margin-top: 44px; }
.h2o-map iframe { width: 100%; height: 380px; border: 0; display: block; }

/* ── Founder section (About) ── */
.h2o-founder { background: var(--h2o-gradient-night); color: var(--h2o-fg-dark); padding: 84px 0; position: relative; overflow: hidden; }
.h2o-founder h2 { color: #fff; }
.h2o-founder .h2o-label { color: var(--h2o-neon); }
.h2o-founder p { color: var(--h2o-fg-dark-muted); margin-bottom: 14px; }
.h2o-founder blockquote {
  border-left: 3px solid var(--h2o-neon); padding-left: 18px; margin: 22px 0;
  font-size: 16.5px; font-weight: 600; color: #E8F1FB; line-height: 1.7;
}
.h2o-founder cite { display: block; margin-top: 10px; font-style: normal; font-size: 13px; color: var(--h2o-neon); font-weight: 700; }

/* ── FAQ on light pages (base styles in homepage.css are night-themed) ── */
.h2o-faqs { max-width: 760px; margin-top: 0; }
.h2o-faq {
  background: #fff;
  border-color: var(--h2o-border);
}
.h2o-faq[open] { border-color: rgba(2, 132, 199, .55); }
.h2o-faq summary { color: var(--h2o-foreground); }
.h2o-faq > p { color: var(--h2o-foreground-soft); }
.h2o-faq__icon::before, .h2o-faq__icon::after { background: var(--h2o-primary); }

/* ── Booking form (contact page) ── */
.h2o-form { max-width: 760px; margin-top: 30px; }
.h2o-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.h2o-form__field { display: block; margin-bottom: 16px; }
.h2o-form__grid .h2o-form__field { margin-bottom: 0; }
.h2o-form__field span {
  display: block; font-size: 13px; font-weight: 700;
  color: var(--h2o-foreground); margin-bottom: 6px;
}
.h2o-form select.h2o-input { appearance: none; background: #fff; cursor: pointer; }
.h2o-form textarea.h2o-input { resize: vertical; min-height: 100px; }
.h2o-form .h2o-btn { margin-top: 6px; }
.h2o-form__note { font-size: 12.5px; color: #64748B; margin-top: 14px; }
.h2o-form__hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.h2o-form-notice {
  max-width: 760px; border-radius: var(--h2o-radius-sm);
  padding: 14px 20px; margin: 20px 0 4px;
  font-weight: 700; font-size: 14.5px;
}
.h2o-form-notice--ok { background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; }
.h2o-form-notice--err { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }
@media (max-width: 700px) {
  .h2o-form__grid { grid-template-columns: 1fr; }
}

/* ── Breadcrumb kicker on page heroes ── */
.h2o-crumb { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.75); }
.h2o-crumb a { color: rgba(255,255,255,.75); text-decoration: none; }
.h2o-crumb a:hover { color: #fff; }

/* ── Responsive ── */
@media (max-width: 860px) {
  .h2o-row { grid-template-columns: 1fr; gap: 26px; }
  .h2o-row--flip .h2o-row__media { order: 0; }
  .h2o-feats, .h2o-contact-grid { grid-template-columns: 1fr; }
  .h2o-gallery { grid-template-columns: 1fr 1fr; }
  .h2o-phero__in { padding: 120px 24px 90px; }
}

/* ── Sitemap page: clickable feature cards ── */
.h2o-feat--link { display: block; text-decoration: none; transition: transform var(--h2o-dur) var(--h2o-ease), box-shadow var(--h2o-dur) var(--h2o-ease), border-color var(--h2o-dur) var(--h2o-ease); }
.h2o-feat--link:hover { transform: translateY(-4px); box-shadow: var(--h2o-shadow-lg); border-color: rgba(2, 132, 199, .45); }
.h2o-feat--link h3 { color: var(--h2o-foreground); }
.h2o-feat--link:hover h3 { color: var(--h2o-primary); }