/* gw-video.css: styles for assets/gw-video.js (GreenWork reusable video component, 2026-10-23).
   Uses the page tokens (--teal, --ink, --panel, --line, --radius, --font-b) with safe fallbacks. */

/* Caption strip: under the picture (never on top of text burned into the video). Two lines are reserved, so a
   caption appearing or changing never moves the page. */
.gwv-cc { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  min-height:calc(2 * 1.45em + 16px); padding:8px 14px; margin-top:10px; box-sizing:border-box;
  border-radius:14px; background:#0B1019; border:1px solid rgba(52,224,196,0.22);
  color:#F4FBF9; font:500 clamp(1rem, 2.6vw, 1.12rem)/1.45 var(--font-b, 'Rubik', system-ui, sans-serif);
  text-align:center; unicode-bidi:plaintext; overflow-wrap:anywhere; }
.gwv-cc[dir="rtl"] { direction:rtl; }
.gwv-cc .gwv-line { display:block; max-width:100%; }
.gwv-cc.gwv-cc-none { display:none; }
/* The label (data-idle) only BEFORE the video first plays; during and after playback gaps between cues stay empty. */
.gwv-cc.gwv-cc-idle::before { content:attr(data-idle); color:#93A8A4; font-size:.86em; font-weight:400; }

/* Click-to-play player */
.gwv { margin:0; display:flex; flex-direction:column; min-width:0; }
.gwv-frame { position:relative; aspect-ratio:9/16; width:100%; border-radius:var(--radius, 18px); overflow:hidden;
  background:#080B11; border:1px solid var(--line, rgba(52,224,196,0.16)); cursor:pointer; isolation:isolate;
  box-shadow:0 18px 44px -20px rgba(8,30,26,0.45); transition:box-shadow .25s, transform .25s; }
@supports not (aspect-ratio:9/16){ .gwv-frame { height:0; padding-top:177.78%; } }
.gwv-frame:hover { transform:translateY(-3px); box-shadow:0 24px 54px -18px rgba(12,154,131,0.45); }
.gwv-frame:focus-visible { outline:3px solid var(--teal, #34E0C4); outline-offset:4px; }
.gwv-frame img.gwv-poster, .gwv-frame video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.gwv-frame video { background:#080B11; opacity:0; transition:opacity .3s; }
.gwv-is-playing .gwv-frame video, .gwv-is-ended .gwv-frame video { opacity:1; }
.gwv-is-playing .gwv-frame { cursor:default; transform:none; }
.gwv-play { position:absolute; inset:0; margin:auto; width:64px; height:64px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--teal-2, #5FF0DA), var(--teal, #34E0C4)); color:#042521; z-index:2; pointer-events:none;
  box-shadow:0 10px 30px -6px rgba(52,224,196,0.6); transition:transform .25s, opacity .25s; }
.gwv-play svg { width:40%; height:40%; margin-inline-start:7%; }
[dir="rtl"] .gwv-play svg { margin-inline-start:0; margin-inline-end:7%; }
.gwv-frame:hover .gwv-play { transform:scale(1.08); }
.gwv-is-playing .gwv-play { opacity:0; }
.gwv-dur { position:absolute; bottom:10px; inset-inline-end:10px; z-index:2; padding:3px 9px; border-radius:999px;
  background:rgba(8,11,17,0.78); color:#EAF2F0; font:600 .78rem/1.3 var(--font-b, 'Rubik', sans-serif); direction:ltr; pointer-events:none; }
.gwv-is-playing .gwv-dur { opacity:0; }
.gwv figcaption { margin-top:12px; }
.gwv figcaption b { display:block; color:var(--ink, #0C1A16); font-weight:600; font-size:1.02rem; line-height:1.35; }
.gwv figcaption span { display:block; color:var(--muted, #4E635E); font-size:.92rem; line-height:1.5; margin-top:4px; }
.gwv .gwv-cc { font-size:clamp(.92rem, 2.4vw, 1rem); }
@media (prefers-reduced-motion: reduce){ .gwv-frame, .gwv-play, .gwv-frame video { transition:none; } .gwv-frame:hover { transform:none; } }

/* Hero integration (index/en/he/... home pages): the strip sits under the 9:16 hero frame. On wide screens the hero
   video width comes from the viewport height; when the page has captions (data-cc) it is narrowed by the strip's
   height so video + captions still fit above the fold. */
.hero-video .hv-cc { margin-top:10px; }
@media (max-width:899px){ .hero-video[data-cc] { max-width:min(100%, calc((100vh - 190px) * 9 / 16)); max-width:min(100%, calc((100svh - 190px) * 9 / 16)); } }
@media (min-width:900px){
 .hero-inner > .hero-video[data-cc] { width:clamp(270px, calc((100vh - 170px - 86px) * 9 / 16), 470px); width:clamp(270px, calc((100svh - 170px - 86px) * 9 / 16), 470px); }
}

/* Customer-stories section (#stories): swipe row on phones, 3-column grid on wide screens (6 shown + "more"). */
#stories .stories-sub { color:var(--muted, #4E635E); max-width:640px; margin:12px auto 0; text-align:center; line-height:1.7; }
#stories h2, #stories .kicker { text-align:center; }
#stories .kicker { display:block; }
.stories-grid { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
  margin:30px -16px 0; padding:4px 16px 18px; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.stories-grid .story { flex:0 0 min(74vw, 300px); scroll-snap-align:center; }
.stories-more-btn { display:none; }
@media (min-width:760px){
 .stories-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:30px 26px; overflow:visible; margin:38px 0 0; padding:0; }
 .stories-grid .story { flex:none; }
 #stories:not(.stories-open) .story-more { display:none; }
 .stories-more-btn { display:block; margin:30px auto 0; font:600 1rem/1 var(--font-b, 'Rubik', sans-serif); color:var(--ink, #0C1A16);
   background:transparent; border:1.5px solid var(--teal, #0C9A83); padding:14px 30px; border-radius:999px; cursor:pointer; transition:background .2s; }
 .stories-more-btn:hover { background:rgba(12,154,131,0.10); }
 .stories-more-btn:focus-visible { outline:3px solid var(--teal, #0C9A83); outline-offset:3px; }
}
@media (min-width:1100px){ .stories-grid { gap:34px 32px; } }
/* Phones: the floating sign-up button would cover the captions while a video plays with sound. */
@media (max-width:760px){ html.gwv-sound .float-cta { transform:translateY(120px); } }