/* Styles for the inner pages: contact, book a call, journal index, articles.
   Loaded AFTER styles.css so it can build on the shared tokens + chrome. */

.page-hero {
  position: relative;
  display: grid;
  align-content: end;
  gap: 14px;
  min-height: 56svh;
  padding: 150px clamp(18px, 5vw, 72px) 64px;
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--bg, url("assets/arrival-evening.webp")) center / cover no-repeat;
  transform: scale(1.05);
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(8, 14, 9, .86), rgba(8, 14, 9, .42) 55%, rgba(8, 14, 9, .2)),
    linear-gradient(0deg, rgba(8, 14, 9, .8), transparent 60%);
}

.page-hero h1 {
  margin: 0;
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: .94;
}

.page-hero p {
  max-width: 640px;
  margin: 0;
  color: rgba(255, 255, 255, .86);
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.55;
}

.breadcrumb {
  display: flex;
  gap: 8px;
  align-items: center;
  color: rgba(255, 255, 255, .7);
  font-size: .8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.breadcrumb a:hover { color: var(--gold); }

.page-section {
  padding: clamp(56px, 8vw, 110px) clamp(18px, 5vw, 72px);
}

.container {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.container.narrow { width: min(760px, 100%); }

/* ---- Contact + booking split ---- */
.contact-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}

.info-stack { display: grid; gap: 18px; }

.info-row {
  display: grid;
  gap: 4px;
  padding: 20px;
  background: rgba(255, 250, 240, .78);
  border: 1px solid rgba(17, 19, 15, .12);
  border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(22, 35, 20, .07);
}

.info-row span {
  color: var(--red);
  font-size: .74rem;
  font-weight: 950;
  text-transform: uppercase;
}

.info-row a, .info-row strong {
  color: var(--ink);
  font-size: 1.2rem;
  font-weight: 900;
}

.info-row a:hover { color: var(--field); }

.info-row p { margin: 2px 0 0; color: var(--ink-soft); font-weight: 600; }

.form-success {
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: rgba(36, 95, 59, .1);
  border: 1px solid rgba(36, 95, 59, .35);
  color: var(--field);
  font-weight: 800;
}

.form-note {
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: .82rem;
  font-weight: 600;
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.chip {
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid rgba(17, 19, 15, .16);
  background: var(--white);
  font-weight: 800;
  font-size: .9rem;
  cursor: pointer;
  transition: all .18s ease;
}

.chip.active, .chip:hover {
  color: var(--white);
  background: var(--field);
  border-color: var(--field);
}

/* ---- Journal / blog ---- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 26px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--cream);
  border: 1px solid rgba(17, 19, 15, .1);
  box-shadow: 0 16px 40px rgba(22, 35, 20, .08);
  transition: transform .22s ease, box-shadow .22s ease;
}

.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 60px rgba(22, 35, 20, .16);
}

.blog-card .thumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.blog-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.blog-card:hover .thumb img { transform: scale(1.06); }

.blog-card .body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  padding: 22px;
}

.blog-card .meta {
  color: var(--red);
  font-size: .74rem;
  font-weight: 950;
  text-transform: uppercase;
}

.blog-card h3 { margin: 0; font-size: 1.3rem; line-height: 1.12; }

.blog-card p { margin: 0; color: var(--ink-soft); line-height: 1.55; }

.blog-card .read {
  margin-top: auto;
  color: var(--field);
  font-weight: 900;
}

/* ---- Article ---- */
.article-body {
  font-size: 1.12rem;
  line-height: 1.78;
  color: var(--ink-soft);
}

.article-body h2 {
  margin: 1.8em 0 .5em;
  color: var(--ink);
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  line-height: 1.1;
}

.article-body h3 {
  margin: 1.4em 0 .4em;
  color: var(--ink);
}

.article-body p { margin: 0 0 1.1em; }

.article-body ul { margin: 0 0 1.2em; padding-left: 1.2em; }
.article-body li { margin-bottom: .5em; }

.article-body strong { color: var(--ink); }

.article-figure {
  margin: 0 0 32px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.article-figure img { width: 100%; display: block; }

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 28px;
  color: var(--ink-soft);
  font-weight: 800;
  font-size: .9rem;
}

.article-cta {
  margin-top: 48px;
  padding: clamp(28px, 5vw, 48px);
  border-radius: var(--radius);
  color: var(--white);
  background: linear-gradient(120deg, var(--field), #16331f);
  box-shadow: var(--shadow);
}

.article-cta h2 { margin: 0 0 10px; color: var(--white); }
.article-cta p { margin: 0 0 18px; color: rgba(255, 255, 255, .85); }

.post-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(17, 19, 15, .12);
  font-weight: 900;
}

.post-nav a { color: var(--field); }
.post-nav a:hover { color: var(--red); }

@media (max-width: 900px) {
  .contact-split { grid-template-columns: 1fr; }
}