/* =============================================================================
   TOURBIRTH — THE HOUSE OF CONNECTION PAGE STYLES
   css/pages/house-of-connection.css
   Page-specific overrides for house-of-connection.php.
   Sections: Hero · Vision Statement · What We Believe · Our Principles ·
             Who We Serve · Core Values · Three Pathways · Founder Section
   Session 2 additions: section alternation, prose width, vision container,
                        hero variant (.hero--hoc).
   ============================================================================= */


/* ---------------------------------------------------------------------------
   TASK 4 — HERO VARIANT: Intimate, narrower, more private
   .hero--hoc modifies content width and headline scale down from the
   default full-width hero treatment.
--------------------------------------------------------------------------- */

.hero--hoc .hero__content {
  max-width:      1060px;
  /* Match base .hero__content padding scale, just with HoC max-width override */
  padding-bottom: calc(var(--banner-height) + var(--space-lg));
}

.hero--hoc .hero__content h1 {
  font-size:      clamp(3rem, 5.5vw, 5.5rem);
  letter-spacing: 0.06em;
}

/* Cinematic carousel hero veil + text-shadow + pathway image-card rules now
   live in css/travel.css (shared, via .hero--cinematic / .pathway-card.home-pathway). */


/* ---------------------------------------------------------------------------
   TASK 3 — VISION STATEMENT CONTAINER
   Constrains the pull-quote container to 680px so the centred Cormorant
   quote sits surrounded by air — framed, not floating in the full
   container--narrow width.
--------------------------------------------------------------------------- */

.section-vision-container,
.section-vision .container--narrow,
.section-vision .container {
  max-width:    1060px;
  margin-left:  auto;
  margin-right: auto;
}


/* ---------------------------------------------------------------------------
   Vision Statement — large centred italic, gold rules above and below
--------------------------------------------------------------------------- */

/* .section-vision { } */

/* ---------------------------------------------------------------------------
   What We Believe — four belief lines, Cormorant, generous vertical spacing
--------------------------------------------------------------------------- */

/* .section-beliefs { } */
/* .belief-line { } */

/* ---------------------------------------------------------------------------
   Our Principles — architectural list, gold rules between
--------------------------------------------------------------------------- */

/* .section-principles { } */


/* ---------------------------------------------------------------------------
   TASK 1 — WHO WE SERVE — now section--dark
   Obsidian background override + full-section colour lift so every text
   node inside is readable regardless of inline styles.
   The .section--dark base already sets background: var(--obsidian).
   These rules ensure heading, body, and list text are all warm offwhite.
--------------------------------------------------------------------------- */

.section-who-serve {
  background-color: var(--obsidian);
}

.section-who-serve h2,
.section-who-serve h3,
.section-who-serve p,
.section-who-serve li {
  color: var(--offwhite);
}

/* Gold-rule colour is already correct on dark backgrounds; no override needed. */

/* .section-who { } */


/* ---------------------------------------------------------------------------
   Core Values — 2×2 grid, gold top border items
   (section remains section--light — no overrides needed)
--------------------------------------------------------------------------- */

/* .section-values { } */

/* ---------------------------------------------------------------------------
   Three Pathways — brief, with links
--------------------------------------------------------------------------- */

/* .section-pathways-overview { } */


/* ---------------------------------------------------------------------------
   TASK 2 — FOUNDER NARRATIVE PROSE
   Applied to the five div wrappers that previously used max-width: 820px.
   580px (--content-max-text) yields ~70–80 characters per line at the
   body type size — within the 65–80 char luxury editorial standard.
   The colour rgba(245,243,238,0.82) is a warm near-offwhite optimised for
   dark (section--deep / section--dark) backgrounds.
--------------------------------------------------------------------------- */

.founder-narrative {
  font-family:    var(--font-body);
  font-size:      var(--fs-body);
  font-weight:    300;
  line-height:    var(--lh-relaxed, 1.9);
  letter-spacing: 0.02em;
  color:          var(--color-text-secondary);
  max-width:      var(--content-max-text, 580px);
  margin-bottom:  var(--space-lg, 2rem);
}


/* ---------------------------------------------------------------------------
   BELIEF STATEMENTS — Session 4
   Belief declarations in the "What We Believe" section.
   Visually styled at h2 scale; semantically h2 elements.
--------------------------------------------------------------------------- */

.belief-statement {
  font-family:    var(--font-display);
  font-size:      var(--fs-h2);
  font-weight:    300;
  letter-spacing: var(--ls-heading);
  line-height:    var(--lh-heading);
  color:          var(--offwhite);
  padding-block:  var(--space-lg);
  border-bottom:  1px solid rgba(198, 169, 107, 0.15);
  margin:         0;
}


/* ---------------------------------------------------------------------------
   PRINCIPLES STATEMENT — Session 4
   The italic sub-heading "The convictions that shape every journey we craft."
   Styled at h3 visual size but semantically h2 (section heading).
--------------------------------------------------------------------------- */

.principles-statement {
  max-width:      440px;
  font-family:    var(--font-display);
  font-style:     italic;
  font-size:      var(--fs-h3);
  font-weight:    300;
  line-height:    var(--lh-subhead);
  letter-spacing: 0;
  color:          var(--sage);
  margin-bottom:  0;
}


/* ---------------------------------------------------------------------------
   PATHWAYS INTRO — Session 4
   Support paragraph in the Three Pathways section.
--------------------------------------------------------------------------- */

.pathways-intro {
  margin-top:     var(--space-lg);
  max-width:      680px;
  font-family:    var(--font-body);
  font-weight:    300;
  font-size:      var(--fs-body);
  line-height:    var(--lh-body);
  letter-spacing: 0.02em;
  color:          var(--color-text-secondary);
}


/* ---------------------------------------------------------------------------
   THREE PATHWAYS — big alternating feature cards
   Replaces the slim 3-column grid. Each pathway is a wide card: a large image
   beside a generous content panel, alternating image left/right. Text colours
   are set explicitly per theme so they never wash out on either ground.
--------------------------------------------------------------------------- */
.hoc-pathways {
  display:        flex;
  flex-direction: column;
  gap:            clamp(1.5rem, 3vw, 2.75rem);
  margin-top:     var(--space-xl);
}

.hoc-pathway {
  display:               grid;
  grid-template-columns: 1.05fr 1fr;
  align-items:           stretch;
  overflow:              hidden;
  border:                1px solid rgba(198, 169, 107, 0.22);
  background-color:      rgba(198, 169, 107, 0.04);
  transition:            border-color 500ms ease,
                         box-shadow 600ms var(--ease-cinematic),
                         transform 600ms var(--ease-cinematic);
}
.hoc-pathway:hover {
  border-color: rgba(198, 169, 107, 0.5);
  box-shadow:   0 26px 60px -34px rgba(11, 29, 42, 0.6);
  transform:    translateY(-4px);
}

/* Alternate the image to the right on even rows */
.hoc-pathway:nth-child(even) { grid-template-columns: 1fr 1.05fr; }
.hoc-pathway:nth-child(even) .hoc-pathway__media { order: 2; }

.hoc-pathway__media {
  display:    block;
  overflow:   hidden;
  min-height: clamp(280px, 32vw, 460px);
}
.hoc-pathway__media img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 1.3s var(--ease-cinematic);
}
.hoc-pathway:hover .hoc-pathway__media img { transform: scale(1.05); }

.hoc-pathway__body {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  padding:         clamp(2rem, 4vw, 4rem);
}
.hoc-pathway__numeral {
  font-family:   var(--font-display);
  font-size:     clamp(2.4rem, 4.5vw, 3.8rem);
  font-weight:   300;
  line-height:   1;
  color:         var(--gold);
  opacity:       0.55;
  margin-bottom: var(--space-sm);
}
html.theme-light .hoc-pathway__numeral { color: var(--gold-deep); opacity: 0.7; }

.hoc-pathway__eyebrow { margin: 0 0 var(--space-sm); }

.hoc-pathway__title {
  font-family:    var(--font-display);
  font-size:      clamp(2rem, 3.4vw, 3.1rem);
  font-weight:    300;
  letter-spacing: var(--ls-heading);
  line-height:    var(--lh-heading);
  margin:         0 0 var(--space-md);
  color:          var(--offwhite);
}
html.theme-light .hoc-pathway__title { color: var(--tl-ink); }

.hoc-pathway__desc {
  font-family:    var(--font-body);
  font-size:      var(--fs-body);
  font-weight:    300;
  line-height:    var(--lh-relaxed, 1.9);
  letter-spacing: 0.02em;
  margin:         0;
  color:          var(--color-text-secondary);
}
html.theme-light .hoc-pathway__desc { color: var(--tl-ink-soft); }

.hoc-pathway__link { margin-top: var(--space-lg); display: inline-block; }

@media (max-width: 860px) {
  .hoc-pathway,
  .hoc-pathway:nth-child(even) { grid-template-columns: 1fr; }
  .hoc-pathway:nth-child(even) .hoc-pathway__media { order: 0; }
  .hoc-pathway__media { min-height: 240px; }
}


/* ---------------------------------------------------------------------------
   FOUNDER SECTION — THE ONLY SECTION ON THE SITE WITH IMAGES
   50/50 split layout. Grain overlay on image. Pull quotes within story.
--------------------------------------------------------------------------- */

/* Opening italic line of the founder story */
.founder-intro-text {
  font-family:    var(--font-display);
  font-size:      var(--fs-h3);
  font-weight:    300;
  font-style:     italic;
  line-height:    var(--lh-body);
  letter-spacing: 0.02em;
  color:          var(--offwhite);
  margin-bottom:  var(--space-lg);
}

/* Paragraphs inside .founder-narrative wrappers — spacing only;
   typography is inherited from the .founder-narrative parent rule. */
.founder-narrative p {
  margin-bottom: var(--space-lg);
}

.founder-narrative p:last-child {
  margin-bottom: 0;
}

/* Gold-left-border pillar declarations */
.pillar-description {
  font-family:    var(--font-display);
  font-size:      var(--fs-h3);
  font-weight:    300;
  color:          var(--offwhite);
  padding-left:   var(--space-md);
  border-left:    3px solid var(--gold);
  line-height:    var(--lh-subhead);
  margin:         0;
}

/* ── FOUNDER PULL QUOTES ──────────────────────────────────────────────── */

/* Base — shared by all three pull quotes */
.founder-pull-quote {
  text-align:    center;
  margin-inline: auto;
  padding-block: var(--space-xl);
}

.founder-pull-quote p {
  font-family:    var(--font-display);
  font-size:      clamp(2rem, 4vw, 3.8rem);
  font-weight:    300;
  font-style:     italic;
  letter-spacing: var(--ls-hero);
  line-height:    var(--lh-subhead);
  color:          var(--offwhite);
  opacity:        0.9;
  margin:         0;
}

/* Pull Quote 1 — bordered, gold text, wider */
.founder-pull-quote--bordered {
  max-width:     780px;
  padding:       var(--space-xl) var(--space-lg);
  border-top:    1px solid rgba(198, 169, 107, 0.20);
  border-bottom: 1px solid rgba(198, 169, 107, 0.20);
}

.founder-pull-quote--bordered p {
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  color:     var(--gold);
  opacity:   1;
}

/* Pull Quote 2 — medium width, offwhite */
.founder-pull-quote--md {
  max-width: 640px;
}

/* Pull Quote 3 — narrow, heading line-height, largest font */
.founder-pull-quote--sm {
  max-width: 520px;
}

.founder-pull-quote--sm p {
  font-size:   clamp(2.2rem, 4.5vw, 4.2rem);
  line-height: var(--lh-heading);
}


/* ---------------------------------------------------------------------------
   RESPONSIVE OVERRIDES — Session 4
--------------------------------------------------------------------------- */

@media (max-width: 768px) {

  .belief-statement {
    font-size:    var(--fs-h3);
    padding-block: var(--space-md);
  }

  .pillar-description {
    font-size: var(--fs-body);
  }

  .founder-pull-quote--bordered p,
  .founder-pull-quote--md p,
  .founder-pull-quote--sm p {
    font-size: clamp(1.6rem, 5vw, 2.4rem);
  }

  .founder-pull-quote--sm p {
    font-size: clamp(1.8rem, 5.5vw, 2.6rem);
  }

}