/* ================================================================
   EDITORIAL-PATTERNS.CSS
   Shared structural patterns used by BOTH the Training Hub's
   editorial look (Themes/tokens-training-editorial.css) and the
   program page system (Themes/program-tokens.css +
   program-components.css): the marker-highlight, the dark numbered
   pain-list, and the numbered session/curriculum timeline.

   This file holds only the shared MECHANICS (layout, animation).
   Each consuming page supplies its own colors/sizing via a small
   set of custom properties (defaults below match the Training Hub's
   original values) — load this file AFTER whichever tokens file
   defines those properties.

   Used by:
     - training/index.html (via tokens-training-editorial.css's tokens)
     - training/programs/*.html (via program-tokens.css)
================================================================ */

/* ── Marker highlight — animated underline behind a word ─────────
   Usage: <span class="mark"><span>word</span></span>
   Themeable via: --mark-color, --mark-delay-1, --mark-delay-2      */
.mark { position: relative; white-space: nowrap; display: inline-block; isolation: isolate; }
.mark span { position: relative; z-index: 2; }
.mark::before,
.mark::after {
  content: ''; position: absolute; left: -.09em; right: -.09em; z-index: 1;
  background: var(--mark-color, currentColor); opacity: .55; mix-blend-mode: multiply;
  transform-origin: left center; transform: scaleX(0);
  animation-duration: .6s; animation-timing-function: cubic-bezier(.65,0,.35,1);
  animation-fill-mode: forwards;
}
.mark::before {
  top: .3em; height: .36em;
  border-radius: 3px 8px 4px 9px / 9px 3px 8px 4px;
  transform: scaleX(0) rotate(-.8deg);
  animation-name: markGrow1; animation-delay: var(--mark-delay-1, .3s);
}
.mark::after {
  top: .46em; height: .28em; left: -.05em; right: -.14em;
  border-radius: 8px 3px 9px 4px / 4px 8px 3px 9px;
  transform: scaleX(0) rotate(.6deg);
  animation-name: markGrow2; animation-delay: var(--mark-delay-2, .4s);
}
@keyframes markGrow1 { to { transform: scaleX(1) rotate(-.8deg); } }
@keyframes markGrow2 { to { transform: scaleX(1) rotate(.6deg); } }


/* ── Numbered dark-section list (pain points / recognition) ───────
   Supports two content shapes:
     <li><em>01</em><span>Flat text…</span></li>
     <li><em>01</em><div><h3>Heading</h3><p>Body…</p></div></li>
   Themeable via: --pain-list-idx-width, --pain-list-border,
                  --pain-list-number-color, --pain-list-heading-color,
                  --pain-list-text-color, --pain-list-text-color-soft */
.pain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--pain-list-border, rgba(255,255,255,.16)); }
.pain-list li {
  display: grid; grid-template-columns: var(--pain-list-idx-width, 56px) 1fr; gap: 1.5rem; align-items: start;
  padding: 1.7rem 0; border-bottom: 1px solid var(--pain-list-border, rgba(255,255,255,.16));
  font-size: 1rem; color: var(--pain-list-text-color, rgba(255,255,255,.86)); line-height: 1.6;
}
.pain-list em {
  font-style: normal; font-weight: 800; font-size: .85rem;
  color: var(--pain-list-number-color, currentColor); padding-top: .2rem;
}
.pain-list h3 { font-weight: 700; font-size: 1.05rem; color: var(--pain-list-heading-color, #fff); margin-bottom: .4rem; line-height: 1.3; }
.pain-list p { font-size: .92rem; color: var(--pain-list-text-color-soft, rgba(255,255,255,.65)); line-height: 1.65; margin: 0; }


/* ── Numbered session / curriculum timeline ────────────────────────
   Usage:
   <div class="session-list">
     <div class="phase-label"><span class="phase-dot"></span><span>Phase</span></div>
     <div class="session-row"><div class="idx">01</div><div><h3>Title</h3><p>Desc</p></div></div>
   </div>
   Add tabindex="0" role="button" aria-expanded="false" to .session-row
   (plus a JS toggle adding/removing .is-open) to make it an accordion —
   the interactive affordances below only apply when role="button" is present.
   Themeable via: --session-idx-width, --session-line-color,
                  --session-idx-color, --session-idx-bg,
                  --session-heading-color, --session-text-color,
                  --session-accent-color                            */
.session-list { border-top: 1px solid var(--session-line-color, rgba(0,0,0,.14)); position: relative; }
.session-list::before {
  content: ''; position: absolute; left: calc(var(--session-idx-width, 56px) / 2); top: 0; bottom: 0; width: 2px;
  background: var(--session-line-color, rgba(0,0,0,.14)); z-index: 0;
}
.session-row {
  display: grid; grid-template-columns: var(--session-idx-width, 56px) 1fr; gap: 1.6rem; align-items: baseline;
  padding: 1.7rem 0; border-bottom: 1px solid var(--session-line-color, rgba(0,0,0,.14));
  transition: padding-left .3s ease;
  position: relative; z-index: 1;
}
.session-row[role="button"] { cursor: pointer; }
.session-row[role="button"]:hover { padding-left: .5rem; }
.session-row[role="button"]:focus-visible { outline: 2px solid var(--session-accent-color, currentColor); outline-offset: 6px; }
.session-row .idx {
  font-weight: 800; font-size: 1.3rem;
  color: var(--session-idx-color, currentColor); line-height: 1;
  background: var(--session-idx-bg, #fff); text-align: center;
}
.session-row h3 { font-weight: 700; font-size: 1.18rem; line-height: 1.3; margin-bottom: .35rem; color: var(--session-heading-color, inherit); }
.session-row p { font-size: .9rem; color: var(--session-text-color, inherit); line-height: 1.6; margin: 0; }

.phase-label {
  display: grid; grid-template-columns: var(--session-idx-width, 56px) 1fr; gap: 1.6rem; align-items: center;
  padding: 1.05rem 0; position: relative; z-index: 1;
}
.phase-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--session-idx-color, currentColor);
  justify-self: center; box-shadow: 0 0 0 5px var(--session-idx-bg, #fff);
}
.phase-label span { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--session-text-color, inherit); }

/* Optional accordion parts — only rendered when a page's markup includes them */
.session-row-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.session-chevron {
  width: 22px; height: 22px; flex-shrink: 0; margin-top: .3rem;
  display: flex; align-items: center; justify-content: center;
  color: var(--session-text-color, currentColor); transition: transform .3s ease, color .3s ease;
}
.session-chevron svg { width: 14px; height: 14px; }
.session-row.is-open .session-chevron { transform: rotate(180deg); color: var(--session-accent-color, currentColor); }

.session-detail-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.session-row.is-open .session-detail-wrap { grid-template-rows: 1fr; }
.session-detail-inner { overflow: hidden; }
.session-detail {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
  padding-top: 1.2rem; margin-top: .6rem; border-top: 1px solid var(--session-line-color, rgba(0,0,0,.14));
}
@media (max-width: 700px) { .session-detail { grid-template-columns: 1fr; gap: 1rem; } }
.session-detail-label { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--session-accent-color, currentColor); margin-bottom: .6rem; }
.session-detail ul { list-style: none; margin: 0; padding: 0; }
.session-detail li {
  position: relative; padding-left: 1.1rem; margin-bottom: .55rem;
  font-size: .88rem; color: var(--session-text-color, inherit); line-height: 1.55; max-width: none;
}
.session-detail li:last-child { margin-bottom: 0; }
.session-detail li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--session-accent-color, currentColor);
}


/* ── About mentor — photo, bio, expertise pills, profile link ─────
   Usage:
   <div class="mentor-grid">
     <div class="mentor-photo-wrap">
       <div class="mentor-ring"></div>
       <img class="mentor-photo" src="…">
       <div class="mentor-badge"><strong>50+</strong><span>label</span></div>
     </div>
     <div class="mentor-text">
       <h2>…</h2><p>…</p>
       <div class="mentor-pills"><span class="mentor-pill">Tag</span>…</div>
       <a class="mentor-link" href="…">Label <svg>…</svg></a>
     </div>
   </div>
   Themeable via: --mentor-badge-bg, --mentor-badge-text, --mentor-badge-text-soft,
                  --mentor-badge-accent, --mentor-ring-color, --mentor-heading-color,
                  --mentor-body-color, --mentor-pill-border                          */
.mentor-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 3.5rem; align-items: center; }
@media (max-width: 820px) { .mentor-grid { grid-template-columns: 1fr; } }

.mentor-photo-wrap { position: relative; }
.mentor-photo {
  width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 6px;
  filter: grayscale(.12) contrast(1.03);
}
.mentor-badge {
  position: absolute; bottom: -1.2rem; left: -1.2rem;
  background: var(--mentor-badge-bg, #16140F); color: var(--mentor-badge-text, #fff);
  border-radius: 6px; padding: 1rem 1.3rem; box-shadow: 0 16px 32px rgba(10,10,10,.18);
}
.mentor-badge strong { display: block; font-family: var(--font-display, 'Manrope', sans-serif); font-weight: 800; font-size: 1.6rem; color: var(--mentor-badge-accent, currentColor); line-height: 1; }
.mentor-badge span { font-size: .72rem; color: var(--mentor-badge-text-soft, rgba(255,255,255,.7)); }
.mentor-ring { position: absolute; top: -1.4rem; right: -1.4rem; width: 66px; height: 66px; border: 1px dashed var(--mentor-ring-color, rgba(0,0,0,.3)); border-radius: 50%; }

.mentor-text h2 { font-family: var(--font-display, 'Manrope', sans-serif); font-weight: 800; letter-spacing: -.02em; font-size: clamp(1.9rem,3.8vw,2.8rem); line-height: 1.15; margin-bottom: 1.3rem; }
.mentor-text p { font-size: .98rem; color: var(--mentor-body-color, inherit); line-height: 1.7; margin-bottom: 1rem; max-width: 52ch; }
.mentor-text strong { color: var(--mentor-heading-color, inherit); }
.mentor-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.mentor-pill { font-size: .74rem; font-weight: 700; padding: .4rem .85rem; border-radius: 999px; border: 1px solid var(--mentor-pill-border, rgba(0,0,0,.14)); color: var(--mentor-body-color, inherit); }
.mentor-link { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.6rem; font-size: .88rem; font-weight: 700; color: var(--mentor-heading-color, inherit); text-decoration: none; }
.mentor-link svg { width: 13px; height: 13px; transition: transform .25s ease; }
.mentor-link:hover svg { transform: translate(3px,-3px); }


/* ── Class photo gallery — Instagram-style auto-scrolling slider ──
   Usage:
   <div class="gallery-track-wrap">
     <div class="gallery-track">
       <div class="ig-card">
         <div class="ig-card-header"><img class="ig-card-avatar">...<span class="ig-card-handle">...</span></div>
         <img class="ig-card-photo">
         <div class="ig-card-actions"><svg>...</svg>...<svg class="ig-card-bookmark">...</svg></div>
         <div class="ig-card-likes">N likes</div>
         <p class="ig-card-caption"><strong>handle</strong>Caption text.</p>
       </div>
       … (repeat the full card set once more, aria-hidden="true", for a seamless loop)
     </div>
   </div>
   Themeable via: --gallery-card-bg, --gallery-border-color,
                  --gallery-heading-color, --gallery-text-color            */
.gallery-track-wrap {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 48px, black calc(100% - 48px), transparent);
  mask-image: linear-gradient(to right, transparent, black 48px, black calc(100% - 48px), transparent);
}
.gallery-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: gallery-scroll 50s linear infinite;
}
.gallery-track-wrap:hover .gallery-track { animation-play-state: paused; }
@keyframes gallery-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-track { animation: none; }
  .gallery-track-wrap { overflow-x: auto; }
}
.ig-card {
  width: 300px;
  flex-shrink: 0;
  background: var(--gallery-card-bg, #fff);
  border: 1px solid var(--gallery-border-color, rgba(0,0,0,.14));
  border-radius: 12px;
  overflow: hidden;
}
.ig-card-header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.ig-card-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ig-card-handle { font-size: .85rem; font-weight: 600; color: var(--gallery-heading-color, inherit); }
.ig-card-photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: var(--gallery-border-color, rgba(0,0,0,.08)); }
.ig-card-actions { display: flex; align-items: center; gap: 14px; padding: 12px 14px 4px; }
.ig-card-actions svg { width: 22px; height: 22px; color: var(--gallery-heading-color, inherit); }
.ig-card-bookmark { margin-left: auto; }
.ig-card-likes { font-size: .85rem; font-weight: 600; color: var(--gallery-heading-color, inherit); padding: 6px 14px 0; }
.ig-card-caption { font-size: .85rem; color: var(--gallery-text-color, inherit); line-height: 1.5; padding: 4px 14px 16px; }
.ig-card-caption strong { color: var(--gallery-heading-color, inherit); font-weight: 600; margin-right: 5px; }