/*
 * Team8 Active — styles for the block versions of the page sections.
 *
 * These rules were inline <style> blocks inside the page templates. Blocks
 * can't carry a <style> tag, so they live here, enqueued by
 * inc/blocks-loader.php.
 *
 * Only the comparison-table rules are scoped to .t8-plan-compare — the
 * Memberships page styled .compare-table differently from the Difference
 * page, and unscoped they would override it. The Plan Comparison block adds
 * that wrapper class. Everything else (FAQ, contact layout, map card, journey
 * trail) uses class names unique to one block, so those rules are global.
 */

/* ---- from page-contact.php (block 1) ---- */
.contact-layout {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-8);
    align-items: start;
  }
  .contact-info-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }
  @media (max-width: 900px) {
    .contact-layout { grid-template-columns: 1fr; }
  }

/* ---- from page-contact.php (block 2) ---- */
.map-card {
    background: var(--white);
    border-radius: var(--r-xl);
    overflow: hidden;
    border: 1px solid var(--light-grey);
    margin-top: var(--space-7);
  }
  .map-card-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    padding: var(--space-7);
  }
  .map-card-meta .eyebrow {
    margin-bottom: var(--space-3);
  }
  .map-card-meta p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--graphite);
    margin: 0;
  }
  @media (max-width: 768px) {
    .map-card-meta { grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-6); }
  }

/* ---- from page-memberships.php (block 1) — scoped to .t8-plan-compare ---- */
.t8-plan-compare .compare-table {
    background: var(--white);
    border-radius: var(--r-xl);
    overflow: hidden;
    border: 1px solid var(--light-grey);
    max-width: 900px;
    margin: var(--space-7) auto 0;
  }

  .compare-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    border-bottom: 1px solid var(--light-grey);
  }

  .compare-row:last-child { border-bottom: none; }

  .compare-row-head {
    background: var(--cream);
    font-weight: 600;
  }

  .compare-row-head .compare-cell-feature {
    background: var(--yellow);
    color: var(--black);
  }

  .compare-cell {
    padding: var(--space-4) var(--space-5);
    font-size: 16px;
    text-align: center;
    color: var(--graphite);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .compare-cell.compare-label {
    justify-content: flex-start;
    text-align: left;
    font-weight: 600;
    color: var(--black);
  }

  .compare-cell-feature {
    background: var(--yellow-soft);
    color: var(--black);
    font-weight: 600;
  }

  .check-yes {
    color: var(--black);
    font-size: 20px;
    font-weight: 700;
  }

  @media (max-width: 640px) {

    .compare-row { grid-template-columns: 1.3fr 1fr 1fr; }

    .compare-cell { padding: var(--space-3) var(--space-3); font-size: 14px; }

  
}


/* ---- FAQ, from page-memberships.php (block 2) — deliberately NOT scoped:
 * these class names belong to the FAQ block and are used on any page it sits on.
 */
.faq-list {
    max-width: 820px;
    margin: var(--space-7) auto 0;
  }


  .faq-item {
    background: var(--white);
    border-radius: var(--r-lg);
    border: 1px solid var(--light-grey);
    margin-bottom: var(--space-3);
    overflow: hidden;
    transition: border-color var(--t-fast) var(--ease);
  }


  .faq-item[open] {
    border-color: var(--yellow);
  }


  .faq-q {
    list-style: none;
    cursor: pointer;
    padding: var(--space-5) var(--space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--black);
  }


  .faq-q::-webkit-details-marker {
    display: none;
  }


  .faq-icon {
    flex-shrink: 0;
    color: var(--graphite);
    transition: transform var(--t-med) var(--ease);
  }


  .faq-item[open] .faq-icon {
    transform: rotate(180deg);
    color: var(--black);
  }


  .faq-a {
    padding: 0 var(--space-6) var(--space-5);
    font-size: 16px;
    line-height: 1.7;
    color: var(--graphite);
  }


  .faq-a a {
    color: var(--black);
    text-decoration: underline;
    text-underline-offset: 3px;
  }


/* ---- from page-journey.php (block 1) ---- */
.journey-trail { position: relative; max-width: 760px; margin: 0; }
  .journey-track { position: absolute; left: 27px; top: 29px; bottom: 29px; width: 4px; background: rgba(10,10,10,0.10); border-radius: 4px; }
  .journey-fill { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--yellow); border-radius: 4px; }
  .journey-fill::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 15px; height: 15px; transform: translateX(-50%); border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 6px rgba(249,236,0,0.22); animation: journeyPulse 2s ease-in-out infinite; }
  @keyframes journeyPulse { 0%,100% { box-shadow: 0 0 0 5px rgba(249,236,0,0.22);} 50% { box-shadow: 0 0 0 9px rgba(249,236,0,0.10);} }
  .journey-stage { position: relative; padding: 0 0 clamp(36px, 5vw, 60px) 88px; }
  .journey-stage:last-of-type { padding-bottom: 0; }
  .journey-marker { position: absolute; left: 0; top: 0; width: 58px; height: 58px; border-radius: 50%; background: var(--off-white); border: 3px solid rgba(10,10,10,0.14); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 21px; color: var(--graphite); z-index: 2; transition: background .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease); }
  .journey-stage.reached .journey-marker { background: var(--yellow); border-color: var(--black); color: var(--black); transform: scale(1.06); box-shadow: 0 0 0 7px rgba(249,236,0,0.16); }
  .journey-stage-tag { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey); margin-bottom: var(--space-3); transition: color .4s var(--ease); }
  .journey-stage.reached .journey-stage-tag { color: var(--black); }
  .journey-stage-title { font-family: var(--font-display); font-size: clamp(1.35rem, 3vw, 1.9rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: var(--space-4); color: var(--black); }
  .journey-stage-body { font-size: 16.5px; line-height: 1.75; color: var(--graphite); }
  .journey-stage-body p { margin: 0; }
  @media (max-width: 560px) {
    .journey-stage { padding-left: 70px; }
    .journey-track { left: 22px; }
    .journey-marker { width: 48px; height: 48px; font-size: 18px; }
    .journey-track { top: 24px; bottom: 24px; }
  }
  /* ---- Dark (black) treatment for the journey section ---- */
  .journey-dark { background: var(--black); }
  .journey-dark .eyebrow { color: rgba(255,255,255,0.5); }
  .journey-dark .display-lg { color: var(--white); }
  .journey-dark .display-lg .italic { color: var(--yellow); }
  .journey-dark .section-head-desc { color: rgba(255,255,255,0.7); }
  .journey-dark .journey-track { background: rgba(255,255,255,0.13); }
  .journey-dark .journey-marker { background: #171717; border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.72); }
  .journey-dark .journey-stage.reached .journey-marker { background: var(--yellow); border-color: var(--yellow); color: var(--black); box-shadow: 0 0 0 7px rgba(249,236,0,0.14); }
  .journey-dark .journey-stage-tag { color: rgba(255,255,255,0.45); }
  .journey-dark .journey-stage.reached .journey-stage-tag { color: var(--yellow); }
  .journey-dark .journey-stage-title { color: var(--white); }
  .journey-dark .journey-stage-body { color: rgba(255,255,255,0.72); }

  /* ---- Immersive opening (no separate hero) ---- */
  .journey-immersive { padding-top: clamp(130px, 20vh, 190px); padding-bottom: clamp(4rem, 12vw, 6rem); }
  .journey-intro { max-width: none; margin: 0 0 clamp(3rem, 8vw, 5rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .journey-intro-text { max-width: 640px; }
  .journey-intro-video { width: 100%; }
  .journey-video { position: relative; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.14); background: radial-gradient(120% 130% at 72% 18%, rgba(249,236,0,0.10), transparent 60%), linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)); }
  .journey-video-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .journey-video-center { position: relative; z-index: 2; cursor: pointer; }
  .journey-video-tag { z-index: 2; }
  .journey-video-tag { position: absolute; top: 16px; left: 18px; display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--yellow); }
  .journey-video-tag::before { content: ''; width: 20px; height: 1.5px; background: var(--yellow); }
  .journey-video-center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.35rem; padding: 1rem 1.5rem; }
  .journey-video-play { width: 68px; height: 68px; margin-bottom: 0.7rem; border-radius: 50%; background: var(--yellow); color: var(--black); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 0 rgba(249,236,0,0.45); animation: journeyVideoPulse 2.4s ease-out infinite; }
  .journey-video-play svg { width: 26px; height: 26px; margin-left: 3px; }
  @keyframes journeyVideoPulse { 0% { box-shadow: 0 0 0 0 rgba(249,236,0,0.45); } 70% { box-shadow: 0 0 0 20px rgba(249,236,0,0); } 100% { box-shadow: 0 0 0 0 rgba(249,236,0,0); } }
  .journey-video-title { color: var(--white); font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem, 1.6vw, 1.25rem); letter-spacing: -0.01em; }
  .journey-video-note { color: rgba(255,255,255,0.5); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
  @media (prefers-reduced-motion: reduce) { .journey-video-play { animation: none; } }
  @media (max-width: 900px) { .journey-intro { grid-template-columns: 1fr; gap: clamp(1.75rem, 6vw, 2.5rem); } .journey-intro-text { max-width: 760px; } }
  .journey-dark .display-xl { color: var(--white); }
  .journey-dark .display-xl .italic { color: var(--yellow); }
  .journey-intro-lead { font-size: clamp(1.05rem, 2vw, 1.2rem); line-height: 1.7; color: rgba(255,255,255,0.72); margin-top: var(--space-5); max-width: 620px; }
  .journey-scroll-cue { display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(2rem, 5vw, 3rem); color: rgba(255,255,255,0.5); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
  .journey-scroll-cue svg { color: var(--yellow); animation: journeyCue 1.8s ease-in-out infinite; }
  @keyframes journeyCue { 0%,100% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(5px); opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .journey-scroll-cue svg { animation: none; } }

  /* ---- Brand 8: outline draws on, then fills ---- */
  .journey-8 {
    position: fixed;
    right: clamp(-50px, -1vw, 10px);
    top: 50%;
    transform: translateY(-50%);
    width: clamp(220px, 32vw, 430px);
    height: auto;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }
  .journey-8 .j8-fill { fill: var(--yellow); opacity: 0; }
  .journey-8 .j8-line { fill: none; stroke: var(--yellow); stroke-width: 2.2; stroke-linejoin: round; opacity: 0.6; }
  .journey-immersive .container { position: relative; z-index: 1; }
  @media (max-width: 700px) { .journey-8 { display: none; } }


/* ---- closing quote under the story chapters (About) ---- */
.origin-story-quote {
  max-width: 44rem;
  margin: var(--space-7) auto 0;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.5;
  color: var(--graphite);
}

.origin-story-quote p {
  margin: 0;
}

/* ============================================
   ARTICLE FEATURED IMAGE
   Full-width band between the article header and the body. Matches the
   photo-band treatment used on the homepage.
   ============================================ */

/* No bottom margin: the article body section below supplies its own top
   padding, and a margin here would let the page background show through as a
   stripe under the image. */
.article-page-figure {
  margin: 0;
  width: 100%;
  background: var(--white);
  line-height: 0;
}

.article-page-figure-img {
  display: block;
  width: 100%;
  height: clamp(240px, 42vw, 520px);
  object-fit: cover;
}

.article-page-figure-caption {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-5) 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--grey);
  text-align: center;
}