/* ============================================================
   carousel.css — "Coaching in action" strip.
   Minimalist: no borders, no accent colours, no index plates.
   The strip is a real scroll container, so a drag or a swipe is
   native browser scrolling; carousel.js only nudges it along and
   backs off while the user is touching it.
   ============================================================ */
.ag-carousel{
  position:relative;
  padding:0;                        /* opt out of the global section padding */
  background:var(--black);
  overflow:hidden;
}
.ag-head{padding:34px 32px 22px;}
.ag-title{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:800; text-transform:uppercase;
  font-size:clamp(1.8rem, 4vw, 2.7rem);
  line-height:0.9; letter-spacing:-0.015em;
  color:var(--white); margin:0;
}
.ag-title em{font-style:normal; color:var(--teal);}

/* the strip itself is the scroller */
.ag-viewport{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;             /* Firefox */
  -ms-overflow-style:none;          /* old Edge */
  cursor:grab;
}
.ag-viewport::-webkit-scrollbar{display:none;}
.ag-viewport.dragging{cursor:grabbing;}

.ag-track{display:flex; width:max-content;}

.ag-cell{
  position:relative; flex:0 0 auto;
  width:clamp(240px, 24vw, 340px);
  aspect-ratio:4 / 5;               /* uniform, whatever the source is */
  overflow:hidden;
  background:#1a1a20;
}
.ag-cell + .ag-cell{margin-left:2px;}   /* hairline gap, not a border */
.ag-cell img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
  -webkit-user-drag:none; user-select:none;
}

@media (max-width:860px){
  .ag-head{padding:24px 20px 16px;}
  .ag-cell{width:74vw; aspect-ratio:1 / 1;}
}

/* --- embedded variant: same strip, dropped inside an existing
       section that already has its own heading and background --- */
.ag-carousel.ag-embed{
  background:transparent;
  margin-top:28px;
  overflow:hidden;
  width:100%;
  align-self:stretch;   /* parent is a flex column with align-items:flex-start */
}
.ag-carousel.ag-embed .ag-viewport{overflow-x:auto; overflow-y:hidden;}
@media (max-width:860px){
  .ag-carousel.ag-embed{margin-top:20px;}
}