/* Liberty Law — Media rail. 16:9, because the stills are landscape broadcast
   frames; cropping them to portrait left the subjects tiny in blurred filler. */
.lls-media__eyebrow{display:flex;align-items:center;gap:.65rem;font-size:.8125rem;font-weight:600;color:var(--lls-red-on-dark);margin-bottom:1.25rem}
.lls-media__eyebrow i{width:8px;height:8px;border-radius:999px;background:var(--lls-red-on-dark);display:block;flex:none}
.lls-media__lede{margin-top:1.5rem;max-width:56ch}
/* White band: continues straight on from the press strip above it. */
.lls-media--light{background:var(--lls-paper)}
.lls-media--light.lls-media--mist{background:var(--lls-mist)}
.lls-media--light .lls-media__eyebrow{color:var(--lls-red)}
.lls-media--light .lls-media__eyebrow i{background:var(--lls-red)}
.lls-rail--media{--lls-card:clamp(280px,32vw,400px);margin-top:clamp(2.5rem,5vw,3.5rem)}
/* 4:3 rather than 16:9 — the 16:9 strip read as a row of letterboxes. Still
   landscape, so the broadcast frames keep their subjects. */
.lls-reel{position:relative;display:block;border-radius:18px;overflow:hidden;aspect-ratio:4/3;background:#000;text-decoration:none;transition:transform .35s cubic-bezier(.2,.7,.25,1)}
.lls-reel:hover,.lls-reel:focus-visible{transform:translateY(-6px)}
.lls-reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.25,1)}
.lls-reel:hover img{transform:scale(1.06)}
.lls-reel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.3) 0,transparent 30%,transparent 40%,rgba(0,0,0,.88) 100%)}
.lls-reel__badge{position:absolute;top:12px;left:12px;z-index:2;background:rgba(0,0,0,.66);color:#fff;font-size:.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:.3rem .65rem;border-radius:999px;backdrop-filter:blur(4px)}
.lls-reel__play{position:absolute;inset:0;display:grid;place-items:center;z-index:2;opacity:.92;transition:transform .3s ease}
.lls-reel__play span{width:52px;height:52px;border-radius:999px;background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.75);display:grid;place-items:center;backdrop-filter:blur(6px)}
.lls-reel:hover .lls-reel__play{transform:scale(1.08)}
.lls-reel__meta{position:absolute;left:16px;right:16px;bottom:14px;z-index:2}
.lls-reel__title{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:#fff;font-size:.9375rem;font-weight:600;line-height:1.3;letter-spacing:-.01em;text-wrap:pretty}
.lls-reel__action{display:flex;align-items:center;gap:.4rem;margin-top:.4rem;font-size:.75rem;color:rgba(255,255,255,.72);font-weight:500}
@media (max-width:640px){.lls-rail--media{--lls-card:80vw}}

/* Designed artwork (the firm's own press cards, 1735×2474): shown whole at
   its own shape, no scrim or overlay — the outlet and headline are in the art. */
.lls-media--art .lls-rail--media{--lls-card:clamp(240px,22vw,300px)}
.lls-media--art .lls-reel{aspect-ratio:1735/2474;background:#111}
.lls-media--art .lls-reel::after{content:none}
@media (max-width:640px){.lls-media--art .lls-rail--media{--lls-card:72vw}}
/* Play on the artwork: a bare white play mark in the top-left corner. */
.lls-media--art .lls-reel__play{inset:10px auto auto 10px;display:block;opacity:1}
.lls-media--art .lls-reel__play span{width:auto;height:auto;background:none;border:0;border-radius:0;backdrop-filter:none}
.lls-media--art .lls-reel__play svg{width:20px;height:22px;filter:drop-shadow(0 1px 4px rgba(0,0,0,.6))}
.lls-media--art .lls-reel__play path{fill:#fff}

/* Grid layout: every card at once, in rows — no sideways scroll, no bleed. */
.lls-media--grid .lls-rail--media{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));
  gap:clamp(1rem,2vw,1.5rem);overflow:visible;margin-right:0;scroll-snap-type:none;padding-bottom:0;
}
/* width:100%, not auto: an aspect-ratio grid item with auto width collapses to
   0x0 in WebKit (iPhone Safari showed a blank /media/). */
.lls-media--grid .lls-rail--media>*{flex:none;width:100%;min-width:0}
@media (max-width:640px){.lls-media--grid .lls-rail--media{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}}

/* Video popup */
.lls-vid{padding:0;border:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;overflow:visible}
.lls-vid::backdrop{background:rgba(6,6,8,.88)}
.lls-vid[open]{display:grid;place-items:center}
.lls-vid__box{position:relative;width:min(92vw,1100px)}
.lls-vid__box[data-ratio="9/16"]{width:auto;height:min(86vh,760px);aspect-ratio:9/16}
/* TikTok's embed is a fixed-width card (video plus caption), on white. */
.lls-vid__box[data-ratio="tiktok"]{width:min(340px,92vw);height:min(84vh,760px)}
.lls-vid__box[data-ratio="tiktok"] .lls-vid__frame{height:100%;aspect-ratio:auto;background:#fff}
.lls-vid__frame{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lls-vid__box[data-ratio="9/16"] .lls-vid__frame{height:100%;aspect-ratio:9/16}
.lls-vid__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Two classes on every state — Hello's `button:hover,button:focus` is magenta. */
.lls-vid .lls-vid__close,.lls-vid .lls-vid__close:hover,.lls-vid .lls-vid__close:focus{position:absolute;top:-52px;right:0;width:44px;height:44px;border-radius:999px;display:grid;place-items:center;padding:0;background:#fff;color:var(--lls-ink);border:0;cursor:pointer}
.lls-vid .lls-vid__close:hover{background:var(--lls-red);color:#fff}
@media (max-width:640px){
  .lls-vid__box[data-ratio="9/16"]{height:min(78vh,640px)}
  .lls-vid .lls-vid__close{top:-50px}
}

/* Mobile stack (see .lls-stack in tokens.css). The reels are 16:9 and quite
   short, so they get a taller card here — a deck of letterboxes reads as a
   list, not a stack — and the hover lift is switched off so it cannot fight
   the scroll-linked transform. */
@media (max-width:767px){
  /* Square: 4:5 was taller still but cut the subjects of these landscape
     stills off at the edges (Attiq's face, the TikTok caption). */
  .lls-stack .lls-reel{aspect-ratio:1/1}
  .lls-stack.lls-media--art .lls-reel{aspect-ratio:1735/2474}
  /* Portrait art in the deck: narrower, so a whole card fits under the header. */
  .lls-stack.lls-media--art .lls-rail>*{max-width:min(100%,24rem);margin-inline:auto}
  .lls-stack .lls-reel__title{font-size:1.0625rem}
  .lls-stack .lls-reel:hover,
  .lls-stack .lls-reel:focus-visible{transform:none}
  .lls-stack .lls-reel:hover img{transform:none}
}

/* "Cards on mobile": phones show the first N and a button to the full list;
   desktop always shows every card. 767px matches Elementor's mobile breakpoint. */
.lls-media__more{display:none}
@media (max-width:767px){
  .lls-reel.lls-reel--desktop{display:none}
  .lls-media__more{display:flex;justify-content:center;margin-top:2rem}
  /* The phone button replaces the desktop "View all" link beside the arrows. */
  .lls-media--more .lls-railnav .lls-pill{display:none}
}