/* Grila de clipuri verticale (story-uri de eveniment) — Optical Design, 08.11.2026.
   Sursa: _shared/servicii/stv.css (copiat în poarta/assets/od/css și marketing/assets/css). Culoarea: --stv-acc (butonul). */
.stv{--stv-acc:#FFD84D;--stv-on:#1A1500;--stv-gap:clamp(10px,1.2vw,18px)}
.stv__hint{margin:0 0 18px;font:600 13px/1.4 'Inter Tight',system-ui,sans-serif;letter-spacing:.04em;opacity:.72}
.stv__hint--p{display:none}
.stv.is-fine .stv__hint--p{display:inline}.stv.is-fine .stv__hint--t{display:none}
.stv__l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:calc(var(--stv-gap)*1.6) var(--stv-gap)}
.stv__i{min-width:0}
.stv__f{margin:0}
.stv__m{position:relative;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#141418;box-shadow:0 0 0 1px rgba(255,255,255,.08);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.stv__i:nth-child(odd) .stv__m{transform:rotate(-1.2deg)}
.stv__i:nth-child(even) .stv__m{transform:rotate(1.2deg) translateY(10px)}
.stv__i:hover .stv__m,.stv__i.is-on .stv__m{transform:rotate(0) translateY(-6px) scale(1.03);box-shadow:8px 8px 0 0 var(--stv-acc)}
.stv__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#141418}
.stv__b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;margin:0;padding:0;border:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.45));cursor:pointer;-webkit-tap-highlight-color:transparent}
.stv__b:focus-visible{outline:3px solid var(--stv-acc);outline-offset:3px;border-radius:14px}
.stv__ic{position:relative;display:block;width:54px;height:54px;border-radius:50%;background:var(--stv-acc);box-shadow:0 8px 24px rgba(0,0,0,.35);transition:transform .25s cubic-bezier(.2,.8,.2,1),opacity .25s}
.stv__ic::before{content:"";position:absolute;left:21px;top:17px;border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent var(--stv-on)}
.stv__b:hover .stv__ic{transform:scale(1.08)}
/* pornit: iconița devine „pauză” și se ascunde până treci peste */
.is-on .stv__ic{opacity:0;transform:scale(.8)}
.is-on .stv__ic::before{left:18px;top:17px;width:6px;height:20px;border:0;background:var(--stv-on);box-shadow:12px 0 0 var(--stv-on)}
.is-on .stv__b:hover .stv__ic,.is-on .stv__b:focus-visible .stv__ic{opacity:1;transform:none}
.is-on .stv__b{background:none}
.stv__d{position:absolute;left:10px;top:10px;padding:5px 8px;border-radius:999px;background:rgba(9,9,12,.72);color:#F4F4F6;font:700 11px/1 'Inter Tight',system-ui,sans-serif;letter-spacing:.06em;pointer-events:none}
.is-snd .stv__d::after{content:" · ♪"}
.stv__c{margin-top:18px;font:500 13px/1.35 'Inter Tight',system-ui,sans-serif}
.stv__c b{display:block;font:400 19px/1.1 Anton,'Arial Narrow',Impact,sans-serif;text-transform:uppercase;letter-spacing:.01em}
.stv__c span{opacity:.62}
@media (max-width:1199px){.stv__l{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* telefon: o bandă care se derulează orizontal, cu „magnet” pe fiecare clip */
@media (max-width:759px){
  .stv__l{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--stv-pad,16px));padding:6px var(--stv-pad,16px) 22px;scrollbar-width:none}
  .stv__l::-webkit-scrollbar{display:none}
  .stv__i{flex:0 0 58vw;max-width:260px;scroll-snap-align:center}
  .stv__i:nth-child(even) .stv__m{transform:rotate(1.2deg)}
}
@media (prefers-reduced-motion:reduce){.stv__m,.stv__ic{transition:none}.stv__i .stv__m,.stv__i:hover .stv__m{transform:none}}
/* unde e pusă grila */
.sv-clips .stv{--stv-pad:var(--pad,16px)}
.storyuri .head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.7fr);gap:30px;align-items:end;margin-bottom:clamp(30px,4vw,56px)}
.storyuri .stv{--stv-acc:#1A1500;--stv-on:#FFD84D;--stv-pad:var(--gut,20px)}
.storyuri .stv__m{box-shadow:0 0 0 2px #1A1500}
.storyuri__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(40px,4.4vw,64px)}
@media (max-width:900px){.storyuri .head{grid-template-columns:1fr}}