/* ===========================================================================
   story.css — styling for story.php (Our Story / Patricia / Philosophy)
   Uses the design tokens from main.css (:root)
   =========================================================================== */

.logo-wrap a { display: inline-block; line-height: 0; }

/* Constrain reading width for long-form text */
.container.narrow { max-width: 760px; }

/* ---- HERO ---- */
.story-hero {
  background: var(--forest);
  color: #fff;
  padding: 150px 0 72px;
}
.story-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  margin-bottom: 28px;
  transition: color 0.2s;
}
.story-back:hover { color: var(--gold); }
.story-hero .label { color: var(--gold); display: block; margin-bottom: 14px; }
.story-hero h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.4rem, 5.5vw, 3.8rem);
  line-height: 1.08;
  margin: 0 0 18px;
}
.story-hero h1 em { color: var(--sage); font-style: italic; }
.story-hero p {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.82);
  max-width: 620px;
  margin: 0;
}

/* ---- SECTIONS ---- */
.story-section { background: var(--paper); padding: 72px 0; }
.story-section.alt { background: var(--cream); }

.story-section p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--ink);
  margin: 0 0 20px;
}

.story-head { margin-bottom: 32px; }
.story-head .label { display: block; margin-bottom: 10px; }
.story-head h2,
.story-section h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  color: var(--forest);
  line-height: 1.15;
  margin: 0 0 8px;
}
.story-section h2 em { color: var(--sage); font-style: italic; }

/* Pull quote (inline emphasis within Andrew's story) */
.story-pullquote {
  font-family: var(--display) !important;
  font-size: 1.6rem !important;
  font-style: italic;
  color: var(--forest) !important;
  line-height: 1.3 !important;
  margin: 8px 0 24px !important;
}

/* Large block quotes */
.story-quote {
  font-family: var(--display);
  font-size: 1.8rem;
  font-style: italic;
  color: var(--forest);
  line-height: 1.4;
  text-align: center;
  border: none;
  margin: 40px 0;
  padding: 32px 24px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.story-welcome {
  font-family: var(--display);
  font-size: 1.35rem !important;
  color: var(--forest) !important;
  line-height: 1.5 !important;
}
.story-welcome em { color: var(--sage); font-style: italic; }

.story-tag {
  font-size: 0.95rem !important;
  color: var(--muted) !important;
  font-style: italic;
  border-left: 3px solid var(--sage);
  padding-left: 18px;
  margin-top: 28px !important;
}

.story-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 36px 0 8px;
}

/* ---- MEET PATRICIA ---- */
.story-patricia {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 40px;
}
.story-patricia-img img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: top center;
  border-radius: 4px;
  filter: grayscale(12%);
}
.story-patricia-text .label { display: block; margin-bottom: 10px; }
.story-patricia-text p { margin-bottom: 16px; }

/* ---- CLOSER ---- */
.story-closer {
  background: var(--forest);
  color: #fff;
  padding: 80px 0;
  text-align: center;
}
.story-closer .label { color: var(--gold); display: block; margin-bottom: 14px; }
.story-closer h2 { color: #fff; margin-bottom: 16px; }
.story-closer p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);
  max-width: 680px;
  margin: 0 auto 16px;
}
.story-listening {
  font-family: var(--display);
  font-size: 1.5rem !important;
  font-style: italic;
  color: var(--sage) !important;
  margin: 8px auto 0 !important;
}
.story-closer .story-cta { justify-content: center; margin-top: 32px; align-items: center; }
.story-closer .btn-ghost {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 2px;
  padding: 15px 34px;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.2s, border-color 0.2s;
}
.story-closer .btn-ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }

/* ---- MOBILE ---- */
/* ---- Prevent any overflow globally on this page ---- */
.story-hero, .story-section, .story-closer { overflow-wrap: break-word; }
.story-hero h1, .story-section h2, .story-head h3 {
  overflow-wrap: break-word;
  hyphens: auto;
}
img { max-width: 100%; height: auto; }

/* ---- Design polish: opening quote beside photo ---- */
.story-patricia-text .intro-quote,
.story-patricia-text .story-quote {
  text-align: left;
  border: none;
  border-left: 3px solid var(--gold);
  padding: 0 0 0 22px;
  margin: 20px 0 0;
  font-size: 1.5rem;
}

/* Decorative opening mark on big centered quotes */
.story-quote { position: relative; }

/* Gentle rhythm between paragraphs */
.story-section .narrow p { margin-bottom: 22px; }

/* ---- TABLET ---- */
@media (max-width: 800px) {
  .story-patricia { grid-template-columns: 1fr; gap: 28px; }
  .story-patricia-img img {
    max-height: 56vh;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    display: block;
  }
  .story-patricia-text { text-align: center; }
  .story-patricia-text .intro-quote,
  .story-patricia-text .story-quote {
    text-align: center;
    border-left: none;
    padding: 20px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-top: 24px;
    font-size: 1.4rem;
  }
}

/* ---- MOBILE ---- */
@media (max-width: 600px) {
  .container.narrow { max-width: 100%; }
  .story-hero { padding: 116px 0 48px; }
  .story-hero h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
  .story-hero p { font-size: 1.05rem; }
  .story-section { padding: 48px 0; }
  .story-section .narrow p,
  .story-section p { font-size: 1rem; line-height: 1.75; }

  .story-quote {
    font-size: 1.3rem;
    padding: 22px 4px;
    margin: 32px 0;
    line-height: 1.45;
  }
  .story-pullquote { font-size: 1.25rem !important; line-height: 1.35 !important; }
  .story-welcome { font-size: 1.2rem !important; }

  .story-head h2, .story-section h2 { font-size: 1.7rem; }
  .story-head h3 { font-size: 1.5rem; }

  /* Principles & promise stack cleanly */

  .story-cta { flex-direction: column; }
  .story-cta .btn-primary,
  .story-cta .btn-ghost { width: 100%; text-align: center; }

  .story-closer { padding: 60px 0; }
  .story-closer h2 { font-size: 1.8rem; }
  .story-listening { font-size: 1.3rem !important; }
}

/* ---- Very small phones ---- */
@media (max-width: 380px) {
  .story-hero h1 { font-size: 1.9rem; }
  .story-quote { font-size: 1.18rem; }
  .story-num-lg { font-size: 2.4rem; }
}