/* Study55 LIVE intermediate width. Load after study32-multistream.css / study48-editorial.css.
   Below 960px the inherited cascade stacks every card with a full-width 16:9 picture
   (~406px tall at an 800px viewport). Here, when the list itself is at least 540px wide,
   each card becomes one horizontal row: a bounded thumbnail beside name, title and actions.
   The 960px+ two-column layout (study32) and narrow-phone stacking are untouched because
   the query container exists only below 960px and the threshold is the list width, not the viewport.
   Colours, hover states, copy and DOM order are inherited unchanged. */
@media (max-width:959px){
 body.s55 .v8-live .v8-live-content{container:s55-live/inline-size}
}
/* 540px = 16px padding x2 + 200px thumbnail + 20px gap + ~290px text column, the narrowest
   column that still holds the name, badge and PROFILE link without cramping the title. */
@container s55-live (min-width:540px){
 body.s55 .v8-live .v8-live-group{
  --s55-live-thumb:clamp(200px,36cqi,280px);
  display:grid;grid-template-columns:var(--s55-live-thumb) minmax(0,1fr);grid-template-rows:auto auto 1fr;
  column-gap:20px;row-gap:0;align-items:start;padding:16px;min-height:0
 }
 body.s55 .v8-live .v8-live-picture{grid-column:1;grid-row:1/4;align-self:start;width:100%;height:auto;aspect-ratio:16/9;border:0}
 body.s55 .v8-live .v8-live-image-note{padding:10px;line-height:1.6}
 body.s55 .v8-live .v8-live-person{grid-column:2;grid-row:1;min-height:44px;margin:0;padding:0;gap:6px 12px}
 body.s55 .v8-live .v8-live-profile{min-height:44px}
 body.s55 .v8-live .v8-live-title{grid-column:2;grid-row:2;margin:6px 0 0;font-size:15px;line-height:1.7}
 body.s55 .v8-live .v8-live-destinations{
  grid-column:2;grid-row:3;align-self:end;margin:0;padding:14px 0 0;gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,176px),1fr))
 }
 body.s55 .v8-live .v8-live-watch{min-height:60px;padding:10px 12px;gap:4px}
}