/* Source: baseline/directory.html inline <style> blocks, verbatim, in document order. */

/* ==========================================================================
   TGN Directory (/directory)
   Every mentor, certified coach, process provider and cohort facilitator, in
   four role groups with a filter rail. Page-unique styles only, scoped under
   .tgn-directory-page so they drop into Beaver Builder without colliding with
   the parent theme.

   Tokens are re-declared on the container using the canonical names from
   assets/css/tgn-tokens.css. Every value is byte-identical to that file, so
   the page renders standalone and composes cleanly with the site stylesheet.

   Breakpoints: ladder values only (768, 1024). The rail is sticky only where
   the nav plus the rail stay within 25% of the viewport rows (see .rail).
   ========================================================================== */

.tgn-directory-page {
  /* Brand */
  --tgn-ink: #171411;
  --tgn-brick: #CE4012;
  --tgn-cta: #FF7901;
  --tgn-amber: #F9C925;
  --tgn-accent-minor: #CC2B28;
  /* Brick darkened for use as TEXT below 24px. */
  --tgn-brick-label: #B8390F;
  /* Tints */
  --tgn-blue-tint: #DCE6F0;
  --tgn-amber-tint: #FCF0CE;
  --tgn-blush: #FBEDE8;
  /* Parchment scale */
  --tgn-parchment-50: #F9F7F6;
  --tgn-parchment-100: #EBE5E0;
  --tgn-parchment-200: #CCBEB3;
  --tgn-parchment-300: #A38B75;
  --tgn-parchment-400: #6B5847;
  --tgn-parchment-500: #2E261F;
  --tgn-white: #FFFFFF;
  /* Radii + layout */
  --tgn-radius-pill: 100px;
  --tgn-radius-card: 20px;
  --tgn-radius-badge: 999px;
  --tgn-radius-inset: 14px;
  --tgn-container-max: 1280px;
  /* Type */
  --font-heading: 'Fraunces', serif;
  --font-body: 'Work Sans', sans-serif;

  background: var(--tgn-parchment-50);
  color: var(--tgn-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
.tgn-directory-page, .tgn-directory-page * { box-sizing: border-box; }
.tgn-directory-page h1,
.tgn-directory-page h2,
.tgn-directory-page h3,
.tgn-directory-page h4,
.tgn-directory-page p,
.tgn-directory-page ul,
.tgn-directory-page li,
.tgn-directory-page figure { margin: 0; padding: 0; }
.tgn-directory-page ul { list-style: none; }
.tgn-directory-page a { color: inherit; text-decoration: none; }
.tgn-directory-page .wrap { max-width: var(--tgn-container-max); margin: 0 auto; padding: 0 clamp(24px, 2.8vw, 40px); }
.tgn-directory-page :is(a, button, input, textarea, select):focus-visible { outline: 2px solid var(--tgn-brick); outline-offset: 3px; }

/* Hero: one column, left aligned, no buttons */
.tgn-directory-page .dhero{background:var(--tgn-white);border-bottom:1px solid var(--tgn-parchment-200);padding:clamp(64px,6vw,96px) 0 clamp(56px,5vw,80px)}
.tgn-directory-page .dhero__in{max-width:760px}
.tgn-directory-page .eyebrow{font-family:var(--font-body);font-size:16px;font-weight:600;line-height:1.4;color:var(--tgn-brick-label);margin-bottom:12px}
.tgn-directory-page .dhero h1{font-family:var(--font-heading);font-size:clamp(40px,5vw,56px);font-weight:600;letter-spacing:-.02em;line-height:1.05;text-wrap:balance}
.tgn-directory-page .dhero .sub{margin-top:20px;max-width:58ch;font-size:17px;color:var(--tgn-parchment-500)}

/* Listing band: filter rail plus four role groups */
.tgn-directory-page .clist{background:var(--tgn-parchment-50);padding:clamp(48px,5vw,72px) 0 clamp(72px,7vw,104px)}
.tgn-directory-page .cl{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.tgn-directory-page .cl__main{min-width:0}
.tgn-directory-page #listing-top{scroll-margin-top:100px}

/* Filter chips */
.tgn-directory-page .filters{display:flex;flex-wrap:wrap;gap:10px}
.tgn-directory-page .chip{display:inline-flex;align-items:center;gap:7px;min-height:44px;border-radius:var(--tgn-radius-pill);padding:10px 20px;font-family:var(--font-body);font-size:14px;font-weight:600;line-height:1.4;background:var(--tgn-white);border:1px solid var(--tgn-parchment-300);color:var(--tgn-ink);cursor:pointer;transition:background 150ms ease,border-color 150ms ease}
.tgn-directory-page .chip:hover{border-color:var(--tgn-parchment-400)}
.tgn-directory-page .chip--on,
.tgn-directory-page .chip--on:hover{background:var(--tgn-cta);border-color:var(--tgn-cta);color:var(--tgn-ink)}
.tgn-directory-page .chip__n{font-weight:500;font-variant-numeric:tabular-nums}

/* Role groups */
.tgn-directory-page .cgrp{scroll-margin-top:100px}
.tgn-directory-page .cgrp[hidden]{display:none}
.tgn-directory-page .cgrp:not([hidden]) ~ .cgrp:not([hidden]){margin-top:clamp(56px,6vw,80px);padding-top:clamp(40px,4vw,56px);border-top:1px solid var(--tgn-parchment-200)}
.tgn-directory-page .cgrp h2{font-family:var(--font-heading);font-size:clamp(28px,3vw,36px);font-weight:600;letter-spacing:-.02em;line-height:1.15}
.tgn-directory-page .cgrp__def{margin-top:12px;max-width:68ch;font-size:16px;color:var(--tgn-parchment-500)}
.tgn-directory-page .cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:16px;margin-top:24px}

/* Cards */
.tgn-directory-page .pcard{background:var(--tgn-white);border:1px solid var(--tgn-parchment-200)}
.tgn-directory-page .pcard--dir{min-width:0;padding:22px;border-radius:var(--tgn-radius-inset);display:flex;flex-direction:column;gap:10px;scroll-margin-top:100px}
.tgn-directory-page .pcard.is-open{border-color:var(--tgn-ink)}
.tgn-directory-page .pcard__id{display:flex;align-items:center;gap:14px;min-width:0}
.tgn-directory-page .pcard--dir .tgn-av{--tgn-av-size:56px}
.tgn-directory-page .tgn-av-pair{display:flex;flex:none}
.tgn-directory-page .tgn-av-pair .tgn-av{border:2px solid var(--tgn-white)}
.tgn-directory-page .tgn-av-pair .tgn-av+.tgn-av{margin-left:-14px}
.tgn-directory-page .tgn-av--init{font-family:var(--font-heading);font-size:19px;font-weight:600;line-height:1;color:var(--tgn-parchment-500);background:var(--tgn-parchment-100);border:1px solid var(--tgn-parchment-200)}
.tgn-directory-page .pcard__name{min-width:0;font-family:var(--font-heading);font-size:18px;font-weight:600;letter-spacing:-.02em;line-height:1.25;overflow-wrap:anywhere}
.tgn-directory-page .pcard__cred{font-size:14px;font-weight:500;line-height:1.5;color:var(--tgn-parchment-400);overflow-wrap:anywhere}
.tgn-directory-page .pcard__role{font-weight:700;color:var(--tgn-ink)}
.tgn-directory-page .pcard__desc{font-size:14px;font-weight:600;line-height:1.5;color:var(--tgn-parchment-500)}
.tgn-directory-page .pcard__targets{font-size:14px;line-height:1.9;color:var(--tgn-parchment-400)}
.tgn-directory-page .pcard__tlab{display:block;font-size:12px;font-weight:600;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:var(--tgn-parchment-400)}
/* Inline links in a sentence: the WCAG 2.5.8 inline exception to the 44px rule. */
.tgn-directory-page .pcard__targets a{padding:4px 0;color:var(--tgn-parchment-500);text-decoration:underline;text-decoration-color:var(--tgn-parchment-300);text-underline-offset:4px}
.tgn-directory-page .pcard__targets a:hover{color:var(--tgn-brick-label);text-decoration-color:currentColor}
.tgn-directory-page .pcard__acts{margin-top:auto;padding-top:10px;display:flex;flex-wrap:wrap;gap:10px}
.tgn-directory-page .pcard__acts .btn{min-height:44px;padding:10px 18px;font-size:15px}
.tgn-directory-page .pcard__btn[aria-expanded="true"]{border-color:var(--tgn-ink)}

/* Panels */
.tgn-directory-page .pnl{grid-column:1/-1;position:relative;background:var(--tgn-blue-tint);border:1px solid var(--tgn-parchment-200);border-radius:var(--tgn-radius-card);padding:36px 40px;scroll-margin-top:100px}
.tgn-directory-page .pnl[hidden]{display:none}
.tgn-directory-page .pnl:focus{outline:none}
.tgn-directory-page .pnl:focus-visible{outline:2px solid var(--tgn-brick);outline-offset:3px}
.tgn-directory-page .pnl::before{content:"";position:absolute;top:-9px;left:var(--tgn-notch-x,50%);width:16px;height:16px;margin-left:-8px;background:inherit;border-left:1px solid var(--tgn-parchment-200);border-top:1px solid var(--tgn-parchment-200);border-top-left-radius:3px;transform:rotate(45deg)}
.tgn-directory-page .pnl__close{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:var(--tgn-radius-badge);border:1px solid var(--tgn-parchment-300);background:var(--tgn-parchment-50);font-size:22px;line-height:1;color:var(--tgn-ink);cursor:pointer}
.tgn-directory-page .pnl__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,4vw,56px)}
.tgn-directory-page .pnl__name{padding-right:44px;font-family:var(--font-heading);font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.25;overflow-wrap:anywhere}
.tgn-directory-page .pnl__cred{margin-top:8px;max-width:68ch;font-size:15px;font-weight:500;line-height:1.55;color:var(--tgn-parchment-500);overflow-wrap:anywhere}
.tgn-directory-page .pnl__bio{margin-top:16px;max-width:68ch;font-size:15px}
.tgn-directory-page .pnl__bio,
.tgn-directory-page .pnl__offer{overflow-wrap:anywhere}
.tgn-directory-page .cc,
.tgn-directory-page .pnl__card,
.tgn-directory-page .pnl__offer{background:var(--tgn-white);border:1px solid var(--tgn-parchment-200);border-radius:var(--tgn-radius-inset);padding:22px 24px;margin-top:22px}
.tgn-directory-page .pnl__offer p{font-size:14.5px;line-height:1.7}
.tgn-directory-page .pnl__offer p + p,
.tgn-directory-page .pnl__offer p + ul,
.tgn-directory-page .pnl__offer ul + p{margin-top:16px}
.tgn-directory-page .pnl__offer ul{padding-left:20px;list-style:disc;font-size:14.5px;line-height:1.7}
.tgn-directory-page .pnl__offer a{text-decoration:underline;text-underline-offset:3px}
.tgn-directory-page .cc__lab{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tgn-brick-label);margin-bottom:8px}
.tgn-directory-page .cc__row{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 0;border-bottom:1px solid var(--tgn-parchment-100);font-size:15px}
.tgn-directory-page .cc__row:last-of-type{border-bottom:0}
.tgn-directory-page .cc__row span{min-width:0;overflow-wrap:anywhere}
.tgn-directory-page .cc__row:hover span{color:var(--tgn-brick-label)}
.tgn-directory-page .cc__i{flex:none;color:var(--tgn-parchment-400)}
.tgn-directory-page .cc__ext{flex:none;margin-left:auto;color:var(--tgn-parchment-400)}
.tgn-directory-page .pnl__card{margin-top:0}
.tgn-directory-page .pnl__cardhead{font-family:var(--font-heading);font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.35;margin-bottom:16px}
.tgn-directory-page .pnl__card label{display:block;font-size:14px;font-weight:600;line-height:1.5;color:var(--tgn-parchment-400);margin-bottom:14px}
.tgn-directory-page .pnl__card label[for]{margin-bottom:6px}
.tgn-directory-page .pnl__card input,
.tgn-directory-page .pnl__card textarea{display:block;width:100%;min-height:44px;margin-top:6px;font-family:var(--font-body);font-size:16px;padding:10px 14px;border:1px solid var(--tgn-parchment-300);border-radius:10px;background:var(--tgn-parchment-50);color:var(--tgn-ink)}
.tgn-directory-page .pnl__card label[for] + input,
.tgn-directory-page .pnl__card label[for] + textarea{margin-top:0;margin-bottom:14px}
.tgn-directory-page .pnl__note{font-size:14px;line-height:1.6;color:var(--tgn-parchment-400);margin-top:12px}

/* Buttons */
.tgn-directory-page .btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:var(--font-body);font-size:16px;font-weight:600;line-height:1;padding:13px 24px;border-radius:var(--tgn-radius-pill);cursor:pointer;border:1.5px solid transparent;transition:background 150ms ease,border-color 150ms ease,filter 150ms ease}
.tgn-directory-page .btn--pri{background:var(--tgn-cta-surface);color:var(--tgn-cta-ink)}
.tgn-directory-page .btn--pri:hover{background:var(--tgn-cta-surface-hover);color:var(--tgn-cta-ink-hover)}
.tgn-directory-page .btn--amber{background:var(--tgn-amber);color:var(--tgn-ink)}
.tgn-directory-page .btn--amber:hover{background:var(--tgn-amber);color:var(--tgn-ink);filter:brightness(.94)}
.tgn-directory-page .btn--sec{background:transparent;border-color:var(--tgn-parchment-300);color:var(--tgn-ink)}
.tgn-directory-page .btn--sec:hover{background:transparent;border-color:var(--tgn-parchment-400);color:var(--tgn-ink)}

/* Closing inline band (design system Variant B) */
.tgn-directory-page .band--vb{background:var(--tgn-amber-tint);padding:clamp(56px,6vw,80px) 0}
.tgn-directory-page .vb{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px 32px}
.tgn-directory-page .vb__h{font-family:var(--font-heading);font-size:clamp(24px,2.4vw,32px);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.tgn-directory-page .band--vb .btn--sec,
.tgn-directory-page .band--vb .btn--sec:hover{background:var(--tgn-white)}

/* md and down: panel padding */
@media (max-width:767px) {
  .tgn-directory-page .pnl{padding:28px 20px}
}

/* lg and up: two-column listing, vertical rail, two-column panels */
@media (min-width:1024px) {
  .tgn-directory-page .cl{grid-template-columns:232px minmax(0,1fr);gap:48px;align-items:start}
  .tgn-directory-page .filters{flex-direction:column;flex-wrap:nowrap;gap:4px}
  .tgn-directory-page .chip{width:100%;padding:10px 16px;border-radius:var(--tgn-radius-inset)}
  .tgn-directory-page .chip__n{margin-left:auto}
  .tgn-directory-page .pnl__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .tgn-directory-page .pnl__right{padding-top:32px}
}
/* The rail sticks only on viewports tall enough that the nav (81px) plus the
   rail (236px) stay within 25% of the viewport rows, the sticky-chrome limit
   in the responsive contract, measured as a union of rows. 317 / 1280 = 24.8%. Below that
   height the rail scrolls with the page. A height feature is not a width
   breakpoint, and 1280 is a ladder value. */
@media (min-width:1024px) and (min-height:1280px) {
  .tgn-directory-page .rail{position:sticky;top:calc(104px + env(safe-area-inset-top,0px))}
}

/* Motion */
@keyframes tgn-dir-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tgn-directory-page .pnl:not([hidden]){animation:tgn-dir-rise 240ms ease both}
@media (prefers-reduced-motion:reduce) {
  .tgn-directory-page .pnl:not([hidden]){animation:none}
  :root{scroll-behavior:auto}
}

body{margin:0;background:var(--tgn-parchment-50);color:var(--tgn-ink);font-family:var(--font-body);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,p,ul,li{margin:0;padding:0}
ul{list-style:none}
a{color:inherit;text-decoration:none}
a:hover{color:var(--tgn-brick)}
button{font-family:var(--font-body);cursor:pointer;border:0}
.hm-h10:hover{color:var(--tgn-parchment-50) !important;border-bottom:1px solid var(--tgn-brick) !important}

html { scroll-behavior: smooth; }