/* Reusable video previews and an accessible native lightbox. */
.etl-site .etl-video-legacy { width: 100%; margin: 28px 0; }
.etl-site .etl-video-preview,
.etl-site .home-etl-video-card { appearance: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
.etl-site .etl-video-preview { display: block; width: min(100%, var(--etl-video-preview-width, 640px)); padding: 0; border-radius: 14px; overflow: hidden; background: rgba(34,34,34,.9); box-shadow: 0 16px 34px rgba(26,47,64,.16); }
.etl-site .etl-video-preview-media { position: relative; display: block; width: 100%; aspect-ratio: var(--etl-video-ratio, 16 / 9); max-height: 420px; background: rgba(34,34,34,.9); }
.etl-site .etl-video-preview img,
.etl-site .etl-video-preview video { display: block; width: 100%; height: 100%; object-fit: contain; background: rgba(34,34,34,.9); }
.etl-site .etl-video-preview-label { display: block; padding: 14px 16px; background: #fff; color: #263747; font-size: 14px; font-weight: 600; line-height: 1.45; }
.etl-site .etl-video-play { position: absolute; left: 50%; top: 50%; display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; background: rgba(38,121,196,.92); box-shadow: 0 10px 24px rgba(0,0,0,.24); transform: translate(-50%,-50%); }
.etl-site .etl-video-play span { width: 0; height: 0; margin-left: 4px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 13px solid #fff; }
.etl-site .etl-video-preview:hover .etl-video-play,
.etl-site .home-etl-video-card:hover .etl-video-play { background: #1d6faf; }
.etl-site .etl-video-preview:focus-visible,
.etl-site .home-etl-video-card:focus-visible { outline: 3px solid #439aeb; outline-offset: 4px; }

.etl-site .home-etl-videos-section { background: #f5faff; }
.etl-site .home-etl-video-grid { display: grid; grid-template-columns: minmax(300px,.72fr) minmax(0,1.28fr); grid-template-rows: repeat(2,250px); gap: 22px; }
.etl-site .home-etl-video-card { min-width: 0; min-height: 0; display: grid; grid-template-columns: 190px minmax(0,1fr); padding: 0; overflow: hidden; border: 1px solid #d7e5f0; border-radius: 16px; background: #fff; color: #263747; box-shadow: 0 14px 30px rgba(26,47,64,.08); }
.etl-site .home-etl-video-card-featured { grid-row: 1 / 3; grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr) auto; }
.etl-site .home-etl-video-media { position: relative; min-width: 0; min-height: 0; display: block; overflow: hidden; background: rgba(34,34,34,.9); }
.etl-site .home-etl-video-media img,
.etl-site .home-etl-video-media video { display: block; width: 100%; height: 100%; object-fit: contain; background: rgba(34,34,34,.9); }
.etl-site .home-etl-video-caption { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 24px; }
.etl-site .home-etl-video-caption strong { display: block; color: #222; font-size: 17px; line-height: 1.45; }
.etl-site .home-etl-video-caption > span:last-child { margin-top: 12px; color: #2679c4; font-size: 13px; font-weight: 700; }
.etl-site .home-etl-video-number { margin-bottom: 14px; color: #439aeb; font-size: 12px; font-weight: 700; letter-spacing: .08em; }

.etl-site .etl-video-content-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; align-items: start; margin: 28px 0; }
.etl-site .etl-video-content-grid .etl-video-legacy { min-width: 0; margin: 0; }
.etl-site .etl-video-content-grid .etl-video-preview { width: 100%; }
.etl-site .etl-video-content-grid .etl-video-preview-media { height: 390px; aspect-ratio: auto; max-height: none; }

html.etl-video-modal-open,
body.etl-video-modal-open { overflow: hidden; }
.etl-video-modal[hidden] { display: none; }
.etl-video-modal { position: fixed; z-index: 10000; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(10,18,25,.88); }
.etl-video-modal-dialog { position: relative; display: grid; max-width: calc(100vw - 48px); max-height: calc(100vh - 48px); place-items: center; }
.etl-video-modal-player { display: block; width: auto; height: auto; max-width: min(1280px,calc(100vw - 48px)); max-height: calc(100vh - 72px); object-fit: contain; background: #000; box-shadow: 0 28px 70px rgba(0,0,0,.45); }
.etl-video-modal-close { position: absolute; z-index: 2; top: -18px; right: -18px; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; background: #fff; color: #172633; font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 8px 20px rgba(0,0,0,.3); }
.etl-video-modal-close:focus-visible { outline: 3px solid #439aeb; outline-offset: 3px; }
.etl-video-modal-caption { max-width: min(720px,calc(100vw - 64px)); margin: 10px 0 0; color: #fff; font-size: 14px; line-height: 1.45; text-align: center; }
@media (min-width: 768px) and (max-width: 1023px) {
  .etl-site .etl-video-content-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 767px) {
  .etl-site:not(.home-etl-page) .questions-item { display: block; min-width: 0; }
  .etl-site:not(.home-etl-page) .questions-title { max-width: none; margin-right: 0; }
  .etl-site:not(.home-etl-page) .questions-text { max-width: 100%; min-width: 0; }
  .etl-site:not(.home-etl-page) .gallery-slider-nav { min-width: 0; gap: 12px; }
  .etl-site:not(.home-etl-page) .gallery-pagination { min-width: 0; }
  .etl-site:not(.home-etl-page) .gallery-btns { flex: 0 0 auto; gap: 12px; }
  .etl-site .home-etl-video-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .etl-site .home-etl-video-card,
  .etl-site .home-etl-video-card-featured { grid-row: auto; grid-template-columns: 128px minmax(0,1fr); grid-template-rows: minmax(210px,auto); }
  .etl-site .home-etl-video-caption { padding: 18px; }
  .etl-site .home-etl-video-caption strong { font-size: 15px; }
  .etl-site .home-etl-video-number { margin-bottom: 10px; }
  .etl-site .etl-video-content-grid { grid-template-columns: 1fr; gap: 22px; }
  .etl-site .etl-video-content-grid .etl-video-preview { width: min(100%,280px); }
  .etl-site .etl-video-content-grid .etl-video-preview-media { height: 420px; }
  .etl-site .etl-video-preview-media { max-height: 360px; }
  .etl-video-modal { padding: 16px; }
  .etl-video-modal-dialog { max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); }
  .etl-video-modal-player { max-width: calc(100vw - 32px); max-height: calc(100vh - 56px); }
  .etl-video-modal-close { top: -12px; right: -8px; width: 40px; height: 40px; }
}
@media (max-width: 400px) {
  .etl-site .home-etl-video-card,
  .etl-site .home-etl-video-card-featured { grid-template-columns: 112px minmax(0,1fr); }
  .etl-site .home-etl-video-caption { padding: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .etl-video-modal, .etl-site .etl-video-play { transition: none !important; }
}