/**
 * Training Videos page — premium refresh.
 * Scoped under .etv-wrap. Tokens, type and spacing match the rebuilt theme
 * pages (Montserrat 500/600 + Source Sans 3 400/600, ENTTEC grey #F5F5F5,
 * accent #0EA5DF). Fonts ship site-wide via OMGF. Generous whitespace +
 * editorial eyebrows for a premium feel.
 */

/* Hide theme page-title chrome + strip container padding so the wrap can go full-bleed (mirrors body.sr-page). */
body.etv-page header.header.clear { display: none !important; }
body.etv-page main[role="main"] > section,
body.etv-page main[role="main"] > section > article { margin: 0 !important; padding: 0 !important; max-width: none !important; }
body.etv-page main[role="main"] { margin: 0 !important; padding: 0 !important; }
body.etv-page { overflow-x: clip; }
/* theme #container has overflow:hidden which kills the sticky sub-nav; release it here */
body.etv-page #container { overflow: visible !important; }
/* smooth in-page scroll for the sub-nav anchors (scoped to this page) */
html:has(body.etv-page){scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html:has(body.etv-page){scroll-behavior:auto} }

.etv-wrap{
  --ink:var(--enttec-ink); --ink-2:var(--enttec-ink); --muted:var(--enttec-muted); --line:var(--enttec-line);
  --bg:#ffffff; --grey:var(--enttec-grey); --dark:var(--enttec-dark); --accent:var(--enttec-blue); --accent-dk:var(--enttec-blue-hover);
  --maxw:1440px;
  --ease:cubic-bezier(.22,.61,.36,1);
  font-family:'Source Sans 3',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--ink); font-size:16.5px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  /* full-bleed: break out of any constrained theme ancestor (clip lives on body.etv-page) */
  width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw;
}
.etv-wrap *,.etv-wrap *::before,.etv-wrap *::after{box-sizing:border-box}
.etv-wrap h1,.etv-wrap h2,.etv-wrap h3{font-family:'Montserrat',system-ui,sans-serif;font-weight:600;letter-spacing:-.015em;line-height:1.15;margin:0;color:var(--ink)}
.etv-wrap a{text-decoration:none}
.etv-container{max-width:var(--maxw);margin:0 auto;padding:0 40px}

/* eyebrow — matched to the software page: Source Sans 3 500, 16px, uppercase, no tracking, accent */
.etv-eyebrow{font-family:'Source Sans 3',system-ui,sans-serif;font-weight:500;font-size:16px;letter-spacing:normal;
  line-height:1.55;text-transform:uppercase;color:var(--accent);margin:0 0 16px}

/* ---------- Page header (plain, no banner) ---------- */
/* top padding clears the theme's fixed header (this page zeroes the usual content offset for full-bleed) */
.etv-head{padding:clamp(112px,11vw,152px) 0 clamp(8px,2vw,20px);background:var(--bg)}
/* weight/tracking/leading kept from the /products/light-show-control/ hero title + subtitle
   (600 / normal / 1.2 and 400 / normal / 1.5); size dialed down so the H1 doesn't dominate this page */
.etv-wrap .etv-head h1{font-size:clamp(28px,3.2vw,36px);font-weight:600;letter-spacing:normal;line-height:1.2;max-width:18ch;color:var(--ink)}
.etv-wrap .etv-head p{margin:18px 0 0;max-width:64ch;font-size:clamp(14px,1.5vw,18px);font-weight:400;letter-spacing:normal;line-height:1.5;color:var(--muted)}

/* ---------- Sticky minimal section nav (centered) ---------- */
.etv-subnav{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.85);backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line)}
.etv-subnav-inner{max-width:var(--maxw);margin:0 auto;display:flex;gap:0;justify-content:center;overflow-x:auto;scrollbar-width:none;padding:0 24px}
.etv-subnav-inner::-webkit-scrollbar{display:none}
/* sub-nav text matched to the software page's anchor nav: 16px, weight 400, no tracking, mixed case */
.etv-subnav a{font-size:16px;font-weight:400;letter-spacing:normal;color:#5b6b78;white-space:nowrap;
  padding:18px 22px;border-bottom:2px solid transparent;transition:color .2s var(--ease),border-color .2s var(--ease)}
.etv-subnav a:hover{color:var(--ink)}
.etv-subnav a.active{color:var(--ink);border-bottom-color:var(--accent)}

/* ---------- Featured spotlight ---------- */
.etv-feature{padding:clamp(56px,7vw,96px) 0 clamp(64px,9vw,120px)}
.etv-feature-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,72px);align-items:center}
.etv-feature-media{appearance:none;border:0;background:none;padding:0;margin:0;cursor:pointer;width:100%;
  position:relative;border-radius:14px;overflow:hidden;aspect-ratio:16/9;box-shadow:0 30px 60px -30px rgba(15,20,25,.35)}
.etv-feature-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.etv-feature-media:hover img{transform:scale(1.04)}
.etv-feature-media .etv-play{width:54px;height:54px;bottom:16px;right:16px}
.etv-feature-media .etv-play svg{width:19px;height:19px}
.etv-feature-media:hover .etv-play{background:rgba(18,22,26,.72)}
.etv-feature-body h2{font-size:clamp(22px,2.2vw,28px);margin:0 0 18px}
.etv-feature-body p:not(.etv-eyebrow){color:var(--ink-2);margin:0 0 30px;font-size:16.5px;line-height:1.55}
.etv-watch{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#fff;font-weight:600;font-size:15px;
  border:0;cursor:pointer;padding:14px 28px;border-radius:100px;font-family:inherit;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.etv-watch:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(14,165,223,.4)}
.etv-watch svg{width:16px;height:16px;fill:#fff}

/* ---------- Sections ---------- */
.etv-sec{padding:clamp(60px,8vw,110px) 0;border-top:1px solid var(--line);scroll-margin-top:64px}
.etv-sec#featured{border-top:0;padding-top:0}
.etv-sec-head{max-width:760px;margin:0 0 clamp(40px,5vw,64px)}
.etv-sec-head h2{font-size:clamp(24px,2.4vw,30px);margin:0 0 20px}
.etv-intro{color:var(--ink-2);font-size:16.5px;line-height:1.55;margin:0;max-width:64ch}

/* ---------- Video grid (spacious, 3-up) ---------- */
.etv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,40px) clamp(24px,3vw,36px)}
.etv-grid.etv-single{grid-template-columns:1.3fr 1fr;align-items:center}
.etv-card{appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:left;
  cursor:pointer;display:flex;flex-direction:column;gap:16px}
.etv-thumb{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:transparent;
  box-shadow:0 1px 2px rgba(15,20,25,.05);transition:box-shadow .35s var(--ease),transform .35s var(--ease)}
.etv-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.etv-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(10,12,14,.35));opacity:0;transition:opacity .3s var(--ease)}
/* minimal frosted play badge, bottom-right (not a bright centred button) */
.etv-play{position:absolute;bottom:12px;right:12px;width:40px;height:40px;border-radius:50%;
  background:rgba(18,22,26,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.28);display:grid;place-items:center;
  transition:background .25s var(--ease),transform .25s var(--ease)}
.etv-play svg{width:15px;height:15px;fill:#fff}
/* no translate on hover — keeps the centred play icon from drifting; image zoom + shadow only */
.etv-card:hover .etv-thumb{box-shadow:0 18px 40px -20px rgba(15,20,25,.4)}
.etv-card:hover .etv-thumb img{transform:scale(1.06)}
.etv-card:hover .etv-thumb::after{opacity:1}
.etv-card:hover .etv-play{background:rgba(18,22,26,.72)}
.etv-card:focus-visible{outline:none}
.etv-card:focus-visible .etv-thumb{outline:3px solid var(--accent);outline-offset:3px}
.etv-ttl{font-size:16px;font-weight:600;line-height:1.45;letter-spacing:-.005em;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- Show more ---------- */
.etv-more-wrap{margin-top:clamp(40px,5vw,60px);text-align:center}
.etv-more{font-family:inherit;font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
  background:transparent;border:1px solid var(--line);padding:15px 34px;border-radius:100px;cursor:pointer;
  transition:border-color .25s var(--ease),color .25s var(--ease)}
.etv-more:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- CTA (dark grey band) ---------- */
/* Full-bleed dark band + subtle glow; thin divider separates it from the dark footer */
.etv-cta{position:relative;padding:clamp(72px,10vw,120px) 0;text-align:center;background:var(--dark);
  background-image:radial-gradient(820px 300px at 50% 0,rgba(14,165,223,.15),transparent 70%);
  border-bottom:1px solid rgba(255,255,255,.10)}
.etv-cta-card{display:flex;flex-direction:column;align-items:center;text-align:center}
.etv-cta-icon{width:72px;height:72px;border-radius:50%;background:#ff0000;display:grid;place-items:center;margin:0 auto 28px;
  box-shadow:0 14px 34px rgba(255,0,0,.22)}
.etv-cta-icon svg{width:32px;height:32px;fill:#fff}
.etv-cta h2{font-size:clamp(24px,2.4vw,30px);margin:0 0 18px;color:#fff}
.etv-cta p{color:rgba(255,255,255,.78);max-width:54ch;margin:0 auto 34px;font-size:16.5px;line-height:1.55}
.etv-cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.etv-subbtn{display:inline-flex;align-items:center;gap:10px;background:#ff0000;color:#fff;font-weight:600;font-size:15px;
  padding:14px 30px;border-radius:100px;border:1px solid #ff0000;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.etv-subbtn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(255,0,0,.3);color:#fff}
.etv-subbtn svg{width:22px;height:22px;fill:#fff}
.etv-ghostbtn{display:inline-flex;align-items:center;gap:8px;background:transparent;color:#fff;font-weight:600;font-size:15px;
  padding:14px 28px;border-radius:100px;border:1px solid rgba(255,255,255,.35);
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.etv-ghostbtn:hover{background:rgba(255,255,255,.10);border-color:#fff;color:#fff;transform:translateY(-2px)}

/* ---------- Lightbox (z above the theme navbar) ---------- */
.etv-lb{position:fixed;inset:0;z-index:2147483000;display:none;place-items:center;padding:24px;
  background:rgba(10,12,14,.86);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s var(--ease)}
.etv-lb.open{display:grid;opacity:1}
.etv-lb-inner{width:min(92vw,151vh);aspect-ratio:16/9;position:relative}
.etv-lb-mount{position:absolute;inset:0}
.etv-lb-mount iframe{width:100%;height:100%;border:0;border-radius:14px}
.etv-lb-close{position:absolute;top:-50px;right:0;width:42px;height:42px;border-radius:50%;border:0;background:#fff;cursor:pointer;
  font-size:22px;line-height:1;display:grid;place-items:center;transition:transform .25s var(--ease)}
.etv-lb-close:hover{transform:rotate(90deg)}

/* ---------- Reveal (cards; JS adds .etv-js then .etv-in) ---------- */
.etv-wrap.etv-js .etv-card{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.etv-wrap.etv-js .etv-card.etv-in{opacity:1;transform:none}
.etv-wrap.etv-js .etv-extra[hidden]{display:none}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .etv-container,.etv-subnav-inner{padding-left:24px;padding-right:24px}
  .etv-feature-grid,.etv-grid.etv-single{grid-template-columns:1fr;gap:24px}
  .etv-feature-media{order:-1}
  .etv-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .etv-grid{grid-template-columns:1fr 1fr;gap:16px}
  .etv-subnav-inner{justify-content:flex-start;gap:24px}
  .etv-ttl{font-size:14px;-webkit-line-clamp:3}
  .etv-lb{padding:12px}
}
@media (max-width:380px){ .etv-grid{gap:12px} .etv-play{width:44px;height:44px} .etv-play svg{width:18px;height:18px} }

@media (prefers-reduced-motion:reduce){
  .etv-wrap.etv-js .etv-card{opacity:1;transform:none;transition:none}
  .etv-wrap *,.etv-wrap *::before,.etv-wrap *::after{animation:none !important;transition:none !important}
}