/* ==========================================================================
   TGK v2 · Program series (shared page styles)
   Used by: specialty-firearms-experience, tactical-training-series,
   firearms-safety-and-fundamentals, defensive-firearms-tactics,
   precision-marksmanship, corporate-leadership-range-events,
   outdoor-adventures, pricing.
   Builds on css/tgk-v2.css tokens + components. Prefix: .tgk-prog-*
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PROGRAM HERO  (.tgk-page-hero.tgk-prog-hero)
   -------------------------------------------------------------------------- */
.tgk-prog-hero { min-height: clamp(620px, 94vh, 980px); align-items: center; }
.tgk-prog-hero .tgk-page-hero__inner { max-width: 820px; gap: 1.6rem; }
.tgk-prog-hero .tgk-page-hero__media img { object-position: var(--tgk-hero-pos, 50% 40%); }
.tgk-prog-hero::before {
  background:
    linear-gradient(90deg, rgba(11, 15, 19, 0.94) 0%, rgba(11, 15, 19, 0.78) 38%, rgba(11, 15, 19, 0.3) 72%, rgba(11, 15, 19, 0.5) 100%),
    linear-gradient(180deg, rgba(11, 15, 19, 0.6) 0%, rgba(11, 15, 19, 0) 28%, rgba(11, 15, 19, 0) 62%, var(--tgk-color-ink) 100%);
}
.tgk-prog-hero .tgk-display { font-size: clamp(3rem, 1.6rem + 5.6vw, 7rem); line-height: 0.9; }
.tgk-prog-hero .tgk-lead { color: rgba(244, 241, 234, 0.78); max-width: 58ch; }
.tgk-prog-hero .tgk-eyebrow { margin: 0; }
.tgk-prog-hero .tgk-eyebrow .tgk-icon { width: 15px; height: 15px; }

/* Decorative reticle (desktop only) */
.tgk-prog-hero__reticle {
  position: absolute; z-index: 0; right: clamp(2rem, 6vw, 8rem); top: 50%; width: clamp(280px, 26vw, 400px); aspect-ratio: 1;
  transform: translateY(-40%); color: var(--tgk-color-orange); opacity: 0.32; pointer-events: none; display: none;
}
.tgk-prog-hero__reticle svg { width: 100%; height: 100%; animation: tgk-prog-spin 60s linear infinite; }
.tgk-prog-hero__reticle::after {
  content: ''; position: absolute; inset: 30%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 103, 0, 0.22), transparent 70%); filter: blur(18px);
}
@keyframes tgk-prog-spin { to { transform: rotate(360deg); } }
@media (min-width: 1180px) { .tgk-prog-hero__reticle { display: block; } }

/* Trust strip (hero + CTA band): short mono labels with an icon */
.tgk-prog-trust {
  list-style: none; margin: 0.5rem 0 0; padding: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.85rem 2rem;
  border-top: 1px solid var(--tgk-color-line);
}
.tgk-prog-trust li { display: inline-flex; align-items: center; gap: 0.6rem; font: 500 0.6875rem/1.3 var(--tgk-font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--tgk-color-text-muted); }
.tgk-prog-trust .tgk-icon { width: 16px; height: 16px; color: var(--tgk-color-orange); }
.tgk-prog-trust--center { justify-content: center; }

/* Hero meta bar (duration, group size, price facts that already exist on the page) */
.tgk-prog-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 1px;
  margin: 0; padding: 0; list-style: none; border: 1px solid var(--tgk-color-line); border-radius: var(--tgk-radius-md);
  background: var(--tgk-color-line); overflow: hidden; max-width: 760px;
}
.tgk-prog-meta > * { display: grid; gap: 0.35rem; padding: 1rem 1.15rem; background: rgba(11, 15, 19, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.tgk-prog-meta__label { font: 500 0.625rem/1.2 var(--tgk-font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--tgk-color-text-subtle); }
.tgk-prog-meta__value { font-family: var(--tgk-font-display) !important; font-weight: 600; font-size: 1.25rem; line-height: 1.1; text-transform: uppercase; color: var(--tgk-color-text); }

/* --------------------------------------------------------------------------
   2. FRAMED MEDIA (corner brackets) + caption
   -------------------------------------------------------------------------- */
.tgk-prog-frame { position: relative; isolation: isolate; border-radius: var(--tgk-radius-lg); overflow: hidden; background: var(--tgk-color-ink-3); aspect-ratio: var(--tgk-ratio, 4 / 5); border: 1px solid var(--tgk-color-line); box-shadow: var(--tgk-shadow-lg); }
.tgk-prog-frame > img, .tgk-prog-frame > picture img, .tgk-prog-frame > .tgk-prog-frame__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tgk-prog-frame::before, .tgk-prog-frame::after {
  content: ''; position: absolute; z-index: 3; width: 42px; height: 42px; pointer-events: none;
  border: 2px solid var(--tgk-color-orange);
}
.tgk-prog-frame::before { top: 14px; left: 14px; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.tgk-prog-frame::after { bottom: 14px; right: 14px; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }
.tgk-prog-frame--16x9 { --tgk-ratio: 16 / 9; }
.tgk-prog-frame--3x2 { --tgk-ratio: 3 / 2; }
.tgk-prog-frame--1x1 { --tgk-ratio: 1; }
.tgk-prog-frame--4x3 { --tgk-ratio: 4 / 3; }
@media (max-width: 959px) { .tgk-prog-frame:not([class*='tgk-prog-frame--']) { --tgk-ratio: 4 / 3; } }
.tgk-prog-frame__shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(11, 15, 19, 0) 45%, rgba(11, 15, 19, 0.85) 100%); pointer-events: none; }
.tgk-prog-frame__caption { position: absolute; z-index: 2; left: 1.25rem; right: 1.25rem; bottom: 1.25rem; }
.tgk-prog-frame__caption .tgk-caption-card { border-left: 3px solid var(--tgk-color-orange); }
.tgk-prog-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 0; }

/* --------------------------------------------------------------------------
   3. HIGHLIGHT POINTS (icon + title + mono sub)
   -------------------------------------------------------------------------- */
.tgk-prog-points { list-style: none; margin: 0; padding: 1.75rem 0 0; display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; border-top: 1px solid var(--tgk-color-line); }
.tgk-prog-points li { display: flex; align-items: center; gap: 0.9rem; }
.tgk-prog-points .tgk-icon-box { width: 44px; height: 44px; border-radius: 50%; }
.tgk-prog-points strong { display: block; font-weight: 700; font-size: 0.9375rem; color: var(--tgk-color-text); }
.tgk-prog-points small { display: block; margin-top: 0.2rem; font: 500 0.625rem/1.3 var(--tgk-font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tgk-color-text-subtle); }

/* Plain copy block */
.tgk-prog-copy { display: grid; gap: 1.1rem; color: var(--tgk-color-text-muted); font-size: 1rem; line-height: 1.75; max-width: 62ch; }
.tgk-prog-copy strong { color: var(--tgk-color-text); font-weight: 600; }
.tgk-prog-copy a { color: var(--tgk-color-orange) !important; text-decoration: underline !important; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   4. PROGRAM CARD (icon feature card)
   -------------------------------------------------------------------------- */
.tgk-prog-card {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 0.9rem;
  padding: clamp(1.4rem, 1rem + 1vw, 1.9rem); border-radius: var(--tgk-radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0)), var(--tgk-color-ink-2);
  border: 1px solid var(--tgk-color-line); color: var(--tgk-color-text);
  transition: border-color var(--tgk-dur-slow) var(--tgk-ease-out), transform var(--tgk-dur-slow) var(--tgk-ease-out), box-shadow var(--tgk-dur-slow) var(--tgk-ease-out);
}
.tgk-prog-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, var(--tgk-color-orange), rgba(255, 103, 0, 0));
  transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--tgk-dur-slow) var(--tgk-ease-out);
}
.tgk-prog-card:hover { border-color: rgba(255, 103, 0, 0.35); transform: translateY(-4px); box-shadow: var(--tgk-shadow-lg); }
.tgk-prog-card:hover::before { transform: scaleX(1); }
.tgk-prog-card:hover .tgk-icon-box { background: var(--tgk-color-orange); color: var(--tgk-color-text-ink); }
.tgk-prog-card .tgk-icon-box { transition: background-color var(--tgk-dur-base), color var(--tgk-dur-base); }
.tgk-prog-card__title { font-family: var(--tgk-font-display) !important; font-weight: 700; text-transform: uppercase; font-size: 1.35rem; line-height: 1.05; letter-spacing: 0.01em; margin: 0; color: var(--tgk-color-text); }
.tgk-prog-card__text { margin: 0; color: var(--tgk-color-text-muted); font-size: 0.9375rem; line-height: 1.6; }
.tgk-prog-card__text strong { color: var(--tgk-color-text); }
.tgk-prog-card .tgk-list-check { font-size: 0.9375rem; gap: 0.6rem; }
/* Row variant: icon left */
.tgk-prog-card--row { flex-direction: row; align-items: flex-start; gap: 1.1rem; }
.tgk-prog-card--row > div:last-child { display: grid; gap: 0.45rem; }
/* Centered variant */
.tgk-prog-card--center { align-items: center; text-align: center; }
/* Media card: photo on top */
.tgk-prog-card--media { padding: 0; }
.tgk-prog-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--tgk-color-ink-3); }
.tgk-prog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--tgk-ease-out); }
.tgk-prog-card:hover .tgk-prog-card__media img { transform: scale(1.05); }
.tgk-prog-card__body { display: flex; flex-direction: column; gap: 0.8rem; padding: clamp(1.3rem, 1rem + 1vw, 1.8rem); flex: 1; }

/* Card grid helper: tighter than tgk-grid on wide screens */
.tgk-prog-grid { display: grid; gap: clamp(1rem, 0.6rem + 1vw, 1.5rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--tgk-prog-min, 260px)), 1fr)); }
.tgk-prog-grid--4 { --tgk-prog-min: 240px; }
.tgk-prog-grid--3 { --tgk-prog-min: 300px; }
.tgk-prog-grid--2 { --tgk-prog-min: 380px; }
@media (min-width: 1100px) {
  .tgk-prog-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tgk-prog-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   5. PROCESS STEPS (vertical timeline)
   -------------------------------------------------------------------------- */
.tgk-prog-steps { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 0.5rem; }
.tgk-prog-steps::before { content: ''; position: absolute; left: 25px; top: 26px; bottom: 26px; width: 1px; background: linear-gradient(180deg, var(--tgk-color-orange), rgba(255, 103, 0, 0.1)); }
.tgk-prog-step { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 1.25rem; padding: 0.9rem 0; }
.tgk-prog-step__node { position: relative; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--tgk-color-ink-2); border: 1px solid var(--tgk-color-orange-line); color: var(--tgk-color-orange); box-shadow: 0 0 0 6px var(--tgk-color-ink); transition: background-color var(--tgk-dur-base), color var(--tgk-dur-base); }
.tgk-section--raised .tgk-prog-step__node { box-shadow: 0 0 0 6px var(--tgk-color-ink-2); background: var(--tgk-color-ink-3); }
.tgk-section--navy .tgk-prog-step__node { box-shadow: none; background: var(--tgk-color-navy-deep); }
.tgk-prog-step__node .tgk-icon { width: 22px; height: 22px; }
.tgk-prog-step:hover .tgk-prog-step__node { background: var(--tgk-color-orange); color: var(--tgk-color-text-ink); }
.tgk-prog-step__body { display: grid; gap: 0.4rem; padding-top: 0.6rem; }
.tgk-prog-step__title { font-family: var(--tgk-font-display) !important; font-weight: 700; text-transform: uppercase; font-size: 1.4rem; line-height: 1.05; letter-spacing: 0.01em; margin: 0; color: var(--tgk-color-text); }
.tgk-prog-step__text { margin: 0; color: var(--tgk-color-text-muted); font-size: 0.9375rem; line-height: 1.6; max-width: 56ch; }

/* --------------------------------------------------------------------------
   6. TABLES
   -------------------------------------------------------------------------- */
.tgk-prog-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--tgk-color-line); border-radius: var(--tgk-radius-lg); background: var(--tgk-color-ink-2); }
.tgk-prog-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.9375rem; }
.tgk-prog-table caption { caption-side: top; text-align: left; padding: 1rem 1.25rem; color: var(--tgk-color-text-muted); font-size: 0.875rem; }
.tgk-prog-table th, .tgk-prog-table td { padding: 1rem 1.25rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--tgk-color-line); color: var(--tgk-color-text-muted); }
.tgk-prog-table thead th { font: 500 0.6875rem/1.3 var(--tgk-font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--tgk-color-orange); background: rgba(255, 103, 0, 0.05); }
.tgk-prog-table tbody tr:last-child > * { border-bottom: 0; }
.tgk-prog-table tbody tr { transition: background-color var(--tgk-dur-fast); }
.tgk-prog-table tbody tr:hover { background: rgba(255, 255, 255, 0.025); }
.tgk-prog-table td:first-child, .tgk-prog-table th[scope="row"] { color: var(--tgk-color-text); font-weight: 600; }
.tgk-prog-table .tgk-prog-hl, .tgk-prog-hl { color: var(--tgk-color-orange); font-weight: 600; }

/* --------------------------------------------------------------------------
   7. PRICE / NOTE PANELS
   -------------------------------------------------------------------------- */
.tgk-prog-panel { position: relative; display: grid; gap: 1.1rem; padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); border-radius: var(--tgk-radius-lg); background: var(--tgk-color-ink-2); border: 1px solid var(--tgk-color-line); }
.tgk-prog-panel--accent { background: linear-gradient(160deg, rgba(255, 103, 0, 0.12), rgba(255, 103, 0, 0) 55%), var(--tgk-color-ink-2); border-color: var(--tgk-color-orange-line); box-shadow: var(--tgk-shadow-lg); }
.tgk-prog-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem 0.6rem; }
.tgk-prog-price__amount { font-family: var(--tgk-font-display) !important; font-weight: 700; font-size: clamp(2.75rem, 2.2rem + 2vw, 3.75rem); line-height: 0.9; color: var(--tgk-color-text); }
.tgk-prog-price__unit { color: var(--tgk-color-text-subtle); font-size: 0.875rem; }
.tgk-prog-note { display: flex; gap: 0.85rem; align-items: flex-start; padding: 1rem 1.2rem; border-radius: var(--tgk-radius-md); border: 1px solid var(--tgk-color-orange-line); border-left-width: 3px; background: rgba(255, 103, 0, 0.06); color: var(--tgk-color-text-muted); font-size: 0.9rem; line-height: 1.6; }
.tgk-prog-note .tgk-icon { color: var(--tgk-color-orange); margin-top: 0.15em; }
.tgk-prog-note strong { color: var(--tgk-color-text); }

/* Pills (tag lists that already exist on the page) */
.tgk-prog-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tgk-prog-pills li, .tgk-prog-pill { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 34px; padding: 0.35rem 0.85rem; border-radius: var(--tgk-radius-pill); border: 1px solid var(--tgk-color-line-strong); background: rgba(255, 255, 255, 0.03); font-size: 0.8125rem; font-weight: 500; color: var(--tgk-color-text); }
.tgk-prog-pills .tgk-icon { width: 14px; height: 14px; color: var(--tgk-color-orange); }

/* --------------------------------------------------------------------------
   8. LEVEL CARD (series curriculum)
   -------------------------------------------------------------------------- */
.tgk-prog-level { position: relative; display: flex; flex-direction: column; gap: 1.1rem; padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); border-radius: var(--tgk-radius-lg); background: var(--tgk-color-ink-2); border: 1px solid var(--tgk-color-line); overflow: hidden; isolation: isolate; transition: border-color var(--tgk-dur-slow), transform var(--tgk-dur-slow) var(--tgk-ease-out), box-shadow var(--tgk-dur-slow); }
.tgk-prog-level:hover { border-color: var(--tgk-color-orange-line); transform: translateY(-4px); box-shadow: var(--tgk-shadow-lg); }
.tgk-prog-level--featured { background: linear-gradient(180deg, rgba(255, 103, 0, 0.1), rgba(255, 103, 0, 0) 45%), var(--tgk-color-ink-2); border-color: var(--tgk-color-orange-line); }
.tgk-prog-level__eyebrow { font: 500 0.6875rem/1.2 var(--tgk-font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--tgk-color-orange); }
.tgk-prog-level__title { font-family: var(--tgk-font-display) !important; font-weight: 700; text-transform: uppercase; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); line-height: 1; margin: 0; color: var(--tgk-color-text); }
.tgk-prog-level__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tgk-prog-level .tgk-list-check { font-size: 0.9375rem; gap: 0.6rem; }
.tgk-prog-level .tgk-btn { margin-top: auto; }

/* --------------------------------------------------------------------------
   9. TABS
   -------------------------------------------------------------------------- */
.tgk-prog-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.35rem; border-radius: var(--tgk-radius-md); border: 1px solid var(--tgk-color-line); background: rgba(255, 255, 255, 0.02); width: fit-content; max-width: 100%; }
.tgk-prog-tab { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 1.1rem; border-radius: var(--tgk-radius-sm); font: 600 0.8125rem/1 var(--tgk-font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tgk-color-text-muted); transition: background-color var(--tgk-dur-base), color var(--tgk-dur-base); }
.tgk-prog-tab:hover { color: var(--tgk-color-text); background: rgba(255, 255, 255, 0.04); }
.tgk-prog-tab:focus-visible { outline: 2px solid var(--tgk-color-orange); outline-offset: 2px; }
.tgk-prog-tab[aria-selected="true"], .tgk-prog-tab.active { background: var(--tgk-color-orange); color: var(--tgk-color-text-ink); }
.tgk-prog-tabpanel[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   10. JUMP NAV (pricing) + misc
   -------------------------------------------------------------------------- */
.tgk-prog-jump { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.tgk-prog-jump a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 1.1rem; border-radius: var(--tgk-radius-pill); border: 1px solid var(--tgk-color-line-strong); color: var(--tgk-color-text) !important; font: 600 0.75rem/1 var(--tgk-font-body); letter-spacing: 0.1em; text-transform: uppercase; transition: border-color var(--tgk-dur-base), background-color var(--tgk-dur-base), color var(--tgk-dur-base); }
.tgk-prog-jump a:hover { border-color: var(--tgk-color-orange); color: var(--tgk-color-orange) !important; background: var(--tgk-color-orange-soft); }
.tgk-prog-jump .tgk-icon { width: 15px; height: 15px; color: var(--tgk-color-orange); }

/* Sticky aside column in split layouts */
@media (min-width: 960px) { .tgk-prog-sticky { position: sticky; top: calc(var(--tgk-header-h) + 1.5rem); } }

/* Section heads inside program pages: keep lead text readable */
.tgk-section-head .tgk-lead { margin: 0; }

/* CTA band: centred program variant */
.tgk-prog-cta .tgk-cta-band__inner { position: relative; z-index: 3; }
.tgk-prog-cta .tgk-display { font-size: clamp(2.5rem, 1.6rem + 3.8vw, 5rem); }
.tgk-prog-cta .tgk-prog-trust { justify-content: center; width: 100%; }

/* Details/summary disclosure (policies) */
.tgk-prog-details { border-bottom: 1px solid var(--tgk-color-line); }
.tgk-prog-details summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 56px; padding: 1rem 0; font-weight: 600; color: var(--tgk-color-text); }
.tgk-prog-details summary::-webkit-details-marker { display: none; }
.tgk-prog-details summary .tgk-icon { color: var(--tgk-color-orange); transition: transform var(--tgk-dur-base) var(--tgk-ease-out); }
.tgk-prog-details[open] summary .tgk-icon { transform: rotate(180deg); }
.tgk-prog-details > div { padding: 0 0 1.25rem; color: var(--tgk-color-text-muted); line-height: 1.7; display: grid; gap: 0.75rem; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tgk-prog-hero__reticle svg { animation: none; }
  .tgk-prog-card, .tgk-prog-level { transition: none; }
  .tgk-prog-card:hover, .tgk-prog-level:hover { transform: none; }
}

/* Mobile: tables scroll inside their wrapper; tighter cells show more per swipe, prices stay on one line */
@media (max-width: 480px) {
  .tgk-prog-table { min-width: 520px; font-size: 0.875rem; }
  .tgk-prog-table th, .tgk-prog-table td { padding: 0.85rem 0.9rem; }
  .tgk-prog-table td.tgk-prog-hl { white-space: nowrap; }
  .tgk-prog-table-wrap { overscroll-behavior-x: contain; }
}