/* ══════════════════════════════════════════════════════════════════
   ML CORPORATE SERVICES | Media

   Port of _site/media.html. Section order: hero, featured conversation,
   selected conversations (ink), speaking engagements, invitation band
   (stone), closing statement.

   The play badge and the still's scrim are drawn in CSS on the thumb
   container rather than baked into the image, so an editor can swap the
   still without losing the treatment.

   Containers emit no custom CSS classes in this build, so sections are
   addressed by Elementor element ID; widgets are addressed by class.

   Responsive steps: 1180 / 782 / 430. No overflow-x:hidden anywhere.
   ══════════════════════════════════════════════════════════════════ */

#media-hero,
#media-featured,
#media-selected,
#media-speaking,
#media-invite,
#media-follow,
#media-close{
  /* --pg-stone is GONE (2026-08-12). It was a fourth surface, #f1f1f3, carrying
     the invitation and speaking bands. It had already been re-toned once with a
     deliberate -2 blue offset so it could not read warm under simultaneous
     contrast - and it was still being read as cream. The hue was never the
     problem: a palette locked to ink, card and paper cannot hold a fourth
     near-white without it reading as a cast. Those bands are paper now and
     separate on space. Do not reintroduce a tinted band; if a section needs to
     stand apart, give it ink or give it room. */
  --pg-mist-paper:#4a4a4a;
  --pg-line-paper:rgba(0,0,0,.15);
}

/* ── Hero ───────────────────────────────────────────────────────── */

#media-hero.e-con{
  position:relative;
  min-height:100svh;
  padding:clamp(138px,16vh,210px) var(--ml-gut) clamp(54px,7vh,96px);
  background-color:var(--ml-ink);
  background-position:center 38%;
  background-size:cover;
  background-repeat:no-repeat;
  justify-content:center;
  align-items:center;
  text-align:center;
  --width:100%;
  max-width:none;
}

#media-hero.e-con::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.9),rgba(0,0,0,.54) 42%,rgba(0,0,0,.3) 66%,rgba(0,0,0,.8)),
    linear-gradient(180deg,rgba(0,0,0,.35),transparent 40%,rgba(0,0,0,.78));
}

#media-hero > *{position:relative;z-index:2}

#media-hero-copy.e-con{
  max-width:1180px;
  padding:0;
  align-items:center;
  text-align:center;
  --width:100%;
}

#media-hero .ml-hero-mark img{
  height:auto;
  display:block;
}

#media-hero .elementor-heading-title{color:var(--ml-paper)}
#media-hero .ml-eyebrow .elementor-heading-title{color:rgba(255,255,255,.84)}
#media-hero .ml-page-title{margin-top:34px}
#media-hero .ml-lead{margin-top:28px;max-width:66ch}
#media-hero .ml-lead,
#media-hero .ml-lead p{color:rgba(255,255,255,.86)}

/* ── The still ──────────────────────────────────────────────────────
   Shared by the featured conversation and every card in the grid. */

#media-featured-thumb.e-con,
#media-item-thumb-1.e-con,
#media-item-thumb-2.e-con,
#media-item-thumb-3.e-con,
#media-item-thumb-4.e-con,
#media-item-thumb-5.e-con,
#media-item-thumb-6.e-con{
  position:relative;
  overflow:hidden;
  padding:0;
  background-color:var(--ml-paper);
  --width:100%;
  max-width:none;
}

#media-featured-thumb.e-con{aspect-ratio:16/9}

#media-item-thumb-1.e-con,
#media-item-thumb-2.e-con,
#media-item-thumb-3.e-con,
#media-item-thumb-4.e-con,
#media-item-thumb-5.e-con,
#media-item-thumb-6.e-con{aspect-ratio:16/10}

.ml-thumb-img,
.ml-thumb-img .elementor-image,
.ml-thumb-img a{height:100%;line-height:0}

.ml-thumb-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:grayscale(1) contrast(1.06);
}

/* Scrim, so the badge holds against a bright still. */
#media-featured-thumb.e-con::before,
#media-item-thumb-1.e-con::before,
#media-item-thumb-2.e-con::before,
#media-item-thumb-3.e-con::before,
#media-item-thumb-4.e-con::before,
#media-item-thumb-5.e-con::before,
#media-item-thumb-6.e-con::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background-color:rgba(0,0,0,.18);
}

/* Play badge, in two parts: the ring on the still, the triangle on the
   image widget inside it. Drawn in CSS so an editor can swap the still
   without losing the treatment. */
#media-featured-thumb.e-con::after,
#media-item-thumb-1.e-con::after,
#media-item-thumb-2.e-con::after,
#media-item-thumb-3.e-con::after,
#media-item-thumb-4.e-con::after,
#media-item-thumb-5.e-con::after,
#media-item-thumb-6.e-con::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  z-index:3;
  pointer-events:none;
  width:64px;
  height:64px;
  transform:translate(-50%,-50%);
  border:1.5px solid rgba(255,255,255,.9);
  border-radius:50%;
}

/* The triangle, centred optically rather than mathematically. */
#media-featured-thumb .ml-thumb-img::after,
#media-item-thumb-1 .ml-thumb-img::after,
#media-item-thumb-2 .ml-thumb-img::after,
#media-item-thumb-3 .ml-thumb-img::after,
#media-item-thumb-4 .ml-thumb-img::after,
#media-item-thumb-5 .ml-thumb-img::after,
#media-item-thumb-6 .ml-thumb-img::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  z-index:4;
  pointer-events:none;
  width:0;
  height:0;
  transform:translate(-42%,-50%);
  border-left:15px solid #fff;
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
}

/* ── Featured conversation ──────────────────────────────────────── */

#media-featured.e-con{
  background-color:var(--ml-paper);
  color:var(--ml-ink);
  padding:clamp(56px,6vw,96px) var(--ml-gut) clamp(96px,12vw,168px);
  --width:100%;
  max-width:none;
}

#media-featured-wrap.e-con{
  max-width:1240px;
  margin:0 auto;
  padding:0;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(40px,5vw,70px);
  align-items:center;
}

#media-featured-text.e-con{padding:0;--width:100%;max-width:none}

#media-featured .ml-section-title .elementor-heading-title{
  font-size:clamp(26px,2.6vw,36px);
  line-height:1.18;
  margin:18px 0 20px;
}

#media-featured .ml-body,
#media-featured .ml-body p{
  font-size:1.0938rem;
  line-height:1.7;
  color:var(--pg-mist-paper);
  max-width:48ch;
}

#media-featured .ml-go{margin-top:28px}

#media-featured .ml-go .elementor-button{
  font-size:1rem;
  color:var(--ml-ink);
  border-color:var(--ml-ink);
}

#media-featured .ml-go .elementor-button:hover,
#media-featured .ml-go .elementor-button:focus{
  color:var(--ml-ink);
  border-color:var(--ml-ink);
}

/* ── Selected conversations (ink) ───────────────────────────────── */

#media-selected.e-con,
#media-av.e-con{
  background-color:var(--ml-ink);
  color:var(--ml-paper);
  padding:clamp(106px,13vw,182px) var(--ml-gut) clamp(120px,14vw,200px);
  --width:100%;
  max-width:none;
}

#media-selected-head.e-con,
#media-av-head.e-con{
  max-width:1300px;
  margin:0 auto;
  padding:0;
}

#media-selected-head .elementor-heading-title,
#media-av-head .elementor-heading-title{color:var(--ml-paper)}

#media-selected-grid.e-con{
  max-width:1300px;
  margin:clamp(52px,6vw,90px) auto 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:44px 40px;
  align-items:start;
}

#media-item-1.e-con,
#media-item-2.e-con,
#media-item-3.e-con,
#media-item-4.e-con,
#media-item-5.e-con,
#media-item-6.e-con{
  padding:0;
  --width:100%;
  max-width:none;
}

#media-selected .ml-title,
#media-av .ml-title{margin-top:24px}

#media-selected .ml-title .elementor-heading-title,
#media-av .ml-title .elementor-heading-title{
  font-weight:500;
  font-size:1.1875rem;
  line-height:1.34;
  letter-spacing:-.01em;
}

/* Kind and year read as one metadata line, separated by rule rather
   than by a typed character. */
#media-selected .ml-meta,
#media-av .ml-meta{margin-top:12px}

.ml-meta span{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:600;
  font-size:.6562rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
}

.ml-meta span + span{margin-left:14px;padding-left:14px;border-left:1px solid rgba(255,255,255,.28)}

#media-selected .ml-go,
#media-av .ml-go{margin-top:14px}

#media-selected .ml-go .elementor-button,
#media-av .ml-go .elementor-button{
  font-size:.9375rem;
  color:rgba(255,255,255,.82);
}

/* #media-av reads paper, not ink, per the later override on its title/eyebrow/
   meta a few lines up (#media-av .ml-title, .ml-eyebrow, .ml-meta all take
   ink) - the Watch/Listen button was the one card element never carried
   across when that correction was made, so it kept the site-wide .ml-go
   default built for a dark field: white text on a white card, invisible at
   every viewport, not just mobile. Found 2026-08-17 on a mobile screenshot
   only because that is where it was actually looked for; desktop was never
   genuinely fine, just never checked closely enough to notice. Border and
   the hover/focus state both need the same correction - fixing only `color`
   would leave a white outline on a white card. CORRECTED again the same day:
   the shared .ml-go rule this inherits from went from a bottom-only underline
   to a full outline on all four sides, so `border-bottom-color` here was
   renamed to `border-color` to keep applying under the new shape. */
#media-av .ml-go .elementor-button{
  color:var(--ml-ink);
  border-color:rgba(10,10,10,.5);
}
#media-av .ml-go .elementor-button:hover,
#media-av .ml-go .elementor-button:focus{
  color:var(--ml-ink);
  border-color:var(--ml-ink);
}

/* ── Speaking engagements ───────────────────────────────────────── */

#media-speaking.e-con{
  background-color:var(--ml-paper);
  color:var(--ml-ink);
  padding:clamp(106px,13vw,190px) var(--ml-gut);
  --width:100%;
  max-width:none;
}

#media-speaking-head.e-con{
  max-width:1080px;
  margin:0 auto;
  padding:0;
  align-items:center;
  text-align:center;
}

#media-speaking-head .ml-section-title{margin-top:20px}

#media-speaking-list.e-con{
  max-width:1080px;
  margin:clamp(48px,5vw,80px) auto 0;
  padding:0;
  --width:100%;
}

/* A ruled list, not a table: the rule belongs to the row, and the last
   row closes the list. */
#media-srow-1.e-con,
#media-srow-2.e-con,
#media-srow-3.e-con,
#media-srow-4.e-con{
  display:grid;
  grid-template-columns:1.4fr 1.6fr 1fr auto;
  gap:30px;
  align-items:baseline;
  /* An editorial list is set by its rhythm, not by ruling every row. */
  padding:30px 0;
  --width:100%;
  max-width:none;
}

.ml-srow-event .elementor-heading-title{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:600;
  font-size:1rem;
  line-height:1.35;
  letter-spacing:.2px;
  color:var(--ml-ink);
}

.ml-srow-topic .elementor-heading-title{
  font-family:"Literata",Georgia,serif;
  font-size:1rem;
  line-height:1.6;
  color:var(--pg-mist-paper);
}

.ml-srow-place .elementor-heading-title{
  font-family:"Literata",Georgia,serif;
  font-size:.9375rem;
  line-height:1.6;
  color:var(--pg-mist-paper);
}

.ml-srow-year{text-align:right}

.ml-srow-year .elementor-heading-title{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:600;
  font-size:.875rem;
  color:var(--ml-grey);
}

/* ── Invitation band (stone) ────────────────────────────────────── */

#media-invite.e-con{
  color:var(--ml-ink);
  padding:clamp(116px,13vw,196px) var(--ml-gut);
  text-align:center;
  align-items:center;
  --width:100%;
  max-width:none;
}

#media-invite .ml-subhead .elementor-heading-title{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:600;
  font-size:clamp(26px,2.6vw,34px);
  line-height:1.2;
  letter-spacing:-.01em;
  margin-top:16px;
}

#media-invite .ml-body,
#media-invite .ml-body p{
  font-size:1.0625rem;
  line-height:1.68;
  color:var(--pg-mist-paper);
  max-width:56ch;
  margin:22px auto 0;
}

#media-invite .ml-btn{margin-top:32px}

#media-invite .ml-btn-primary .elementor-button{
  background-color:var(--ml-ink);
  color:var(--ml-paper);
  border-color:var(--ml-ink);
}

#media-invite .ml-btn-primary .elementor-button:hover,
#media-invite .ml-btn-primary .elementor-button:focus{
  background-color:var(--ml-paper);
  color:var(--ml-ink);
  border-color:var(--ml-ink);
}

/* ── LinkedIn signpost ─────────────────────────────────────────────
   This section was added after the first Media stylesheet was built.
   Without its own container rules Elementor left every widget flush to
   the viewport edge. It is a quiet editorial CTA, centred and held to
   one readable measure rather than stretched across the canvas. */

#media-follow.e-con{
  background-color:var(--ml-paper);
  color:var(--ml-ink);
  padding:clamp(88px,10vw,148px) var(--ml-gut);
  text-align:center;
  align-items:center;
  --width:100%;
  max-width:none;
}

/* Section title. Lydie never specified one for this block - her spec covers the
   sentence and the two buttons only - but eyebrow straight into body copy left the
   section headless against every other section on the page. "Follow Our Work"
   picks up the verb from her own sentence beneath it and pairs with the
   "Elsewhere" eyebrow. Deliberately NOT "Stay Connected": that is already a live
   h2 on Perspectives ("Stay connected with our latest thinking."), and echoing it
   here would weaken both. Matches the #media-invite subhead treatment exactly. */
#media-follow .ml-subhead .elementor-heading-title{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:600;
  font-size:clamp(26px,2.6vw,34px);
  line-height:1.2;
  letter-spacing:-.01em;
  margin-top:16px;
}

/* Her review 2 asked for "two LinkedIn icons or buttons" and review 3 for "two
   LinkedIn buttons", but she also fixed the labels to the two names - so the word
   LinkedIn cannot live in the label the way it does on Leadership. The glyph
   carries the identity instead. Sized to the label, not shouting. */
#media-follow .ml-btn .elementor-button-icon svg,
#media-follow .ml-btn .elementor-button-icon i{
  /* SIZE was the fault, not position. Measured from rendered pixels at 4x: the
     badge's ink stood 16.75px against a 9px cap height on the label - 186% of the
     letters - so it dominated the words and read as misaligned even though its
     centre was within 0.5px. At 15px the ink is ~13px, about 145% of cap height:
     still unmistakably the LinkedIn mark, no longer shouting over the name.

     The nudge is measured, not eyeballed. Left alone the glyph centres on the LINE
     BOX, which sits ~2.5px below the label's cap-to-baseline centre because the
     serif face carries its weight high. transform, so nothing reflows. */
  font-size:15px;
  width:15px;
  height:15px;
  opacity:1;
  /* Measured at 15px: no nudge needed. The -2.5px carried over from the 19px
     version put the badge 2.5px ABOVE the cap centre - shrinking the glyph had
     already moved it. Re-measured from pixels rather than kept on faith. */
  transform:none;
}

#media-follow .ml-body,
#media-follow .ml-body p{
  max-width:72ch;
  margin:26px auto 0;
  font-size:1.0625rem;
  line-height:1.68;
  color:var(--pg-mist-paper);
}

#media-follow > .e-con{
  width:100%;
  max-width:720px;
  margin:34px auto 0;
  padding:0;
  justify-content:center;
  align-items:center;
}

#media-follow > .e-con .ml-btn .elementor-button{
  min-width:240px;
}

/* ── Closing statement (ink) ───────────────────────────────────── */

#media-close.e-con{
  background-color:var(--ml-field);
  color:var(--ml-paper);
  padding:clamp(120px,15vw,200px) var(--ml-gut);
  text-align:center;
  align-items:center;
  --width:100%;
  max-width:none;
}

#media-close .ml-statement .elementor-heading-title{
  max-width:26ch;
  margin:26px auto 0;
  color:var(--ml-paper);
}

#media-close-actions.e-con{
  width:100%;
  max-width:720px;
  margin:36px auto 0;
  padding:0;
  justify-content:center;
  align-items:center;
}

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width:1180px){
  #media-featured-wrap.e-con{grid-template-columns:minmax(0,1fr);gap:40px}
  #media-selected-grid.e-con{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* The four-column row cannot hold at this width: it becomes a stacked
     entry, and the year moves to the reading edge with the rest. */
  #media-srow-1.e-con,
  #media-srow-2.e-con,
  #media-srow-3.e-con,
  #media-srow-4.e-con{grid-template-columns:minmax(0,1fr);gap:6px}
  .ml-srow-year{text-align:left}
}

@media (max-width:782px){
  #media-hero.e-con{background-position:56% 34%}
  #media-selected-grid.e-con{grid-template-columns:minmax(0,1fr)}
  #media-featured .ml-body,
  #media-featured .ml-body p{font-size:1.0312rem}
  #media-featured-thumb.e-con::after,
  #media-item-thumb-1.e-con::after,
  #media-item-thumb-2.e-con::after,
  #media-item-thumb-3.e-con::after,
  #media-item-thumb-4.e-con::after,
  #media-item-thumb-5.e-con::after,
  #media-item-thumb-6.e-con::after{width:54px;height:54px}
}

@media (max-width:430px){
  #media-hero.e-con,
  #media-featured.e-con,
  #media-selected.e-con,
  #media-speaking.e-con,
  #media-invite.e-con,
  #media-follow.e-con,
  #media-close.e-con{padding-left:24px;padding-right:24px}
  #media-invite .ml-btn .elementor-button{width:100%;text-align:center}
  #media-follow > .e-con{max-width:320px}
  #media-follow > .e-con .ml-btn,
  #media-follow > .e-con .ml-btn .elementor-widget-container,
  #media-follow > .e-con .elementor-button-wrapper,
  #media-follow > .e-con .elementor-button{width:100%}
  /* Stacked, the two metadata items read better on their own lines than
     divided by a rule. */
  .ml-meta span{display:block}
  .ml-meta span + span{margin-left:0;padding-left:0;border-left:0;margin-top:6px}
}


/* ── Podcasts & Videos, and the Speaking Engagements list ────────────
   The AV grid joins the Selected-conversations card rules above rather
   than restating them; only what differs lives here. AV sits on paper so
   two ink bands do not run together, so its heads invert back to ink. */

#media-av.e-con{
  background-color:var(--ml-paper);
  color:var(--ml-ink);
}

#media-av-head .elementor-heading-title{color:var(--ml-ink)}
#media-av-head .ml-eyebrow .elementor-heading-title{color:var(--ml-grey)}
#media-av .ml-title .elementor-heading-title{color:var(--ml-ink)}
#media-av .ml-meta,
#media-av .ml-meta .elementor-heading-title{color:var(--ml-grey)}

/* Speaking engagements: PAGES.docx asks for a simple list carrying Event,
   Topic, Location and Year, with no descriptions. A four-column row on a
   shared baseline, collapsing to a stacked block on narrow viewports. */

#media-speaking.e-con{
  color:var(--ml-ink);
  padding:clamp(116px,13vw,192px) var(--ml-gut) clamp(124px,14vw,204px);
  --width:100%;
  max-width:none;
}

#media-speaking-head.e-con{max-width:1300px;margin:0 auto;padding:0}

#media-speaking-list.e-con{
  max-width:1300px;
  margin:clamp(46px,5vw,76px) auto 0;
  padding:0;
  display:flex;
  flex-direction:column;
  --width:100%;
}

/* Keyed to the LIST, not to individual row ids. It was
   #media-se1/2/3, so a fourth engagement rendered unstyled - the row
   ids are API, and hardcoding them made adding a row a CSS change. */
#media-speaking-list > .e-con{
  display:grid;
  grid-template-columns:minmax(0,2.1fr) minmax(0,2.4fr) minmax(0,1.3fr) auto;
  gap:24px 40px;
  align-items:baseline;
  padding:30px 0;
  --width:100%;
  max-width:none;
}

#media-speaking-list .ml-se-event .elementor-heading-title{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-size:1.0625rem;
  font-weight:500;
  line-height:1.45;
  color:var(--ml-ink);
}

#media-speaking-list .ml-se-topic .elementor-heading-title,
#media-speaking-list .ml-se-place .elementor-heading-title{
  font-family:"Literata",Georgia,serif;
  font-size:.9375rem;
  line-height:1.5;
  color:var(--ml-grey);
}

#media-speaking-list .ml-se-year .elementor-heading-title{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ml-grey);
  white-space:nowrap;
}

@media (max-width:1024px){
  #media-speaking-list > .e-con{
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px 28px;
  }
  #media-speaking-list .ml-se-event{grid-column:1}
  #media-speaking-list .ml-se-year{grid-column:2;grid-row:1}
  #media-speaking-list .ml-se-topic,
  #media-speaking-list .ml-se-place{grid-column:1/-1}
}

/* ── Podcasts & Videos is two grids under one heading ────────────────
   The button verb is fixed per loop template, so a single grid cannot say
   "Listen" for audio and "Watch" for a film — and review 3 asks for
   "Read, Watch or Listen ... as applicable". The band therefore runs two
   loop-grid WIDGETS, filtered by an Audio and a Video tag, sharing Lydie's
   one approved category heading. That split is a query/template necessity
   and stays; what changed below is only how the two widgets' CARDS lay out
   relative to each other, not the query behind either one.

   Two earlier attempts to lay the widgets side by side both failed, and
   the second was worse than the first: #media-av is itself a flex COLUMN,
   so anything relying on #media-av as the row-wrap context - inline-block
   on the widgets, or forcing row-wrap with explicit widths - fought that
   column direction and lost, once collapsing both grids to one narrow
   column. Both attempts stopped at "3 rows" read from a heuristic, without
   noticing the cards had gone one-up. A tidy 2 + 1 beat a clever 3 that
   was broken.

   Grid drifted to 3 + 2 + 2 as Watch grew 3->5 (2578/2579 landed in
   category 45): its own trailing row of 2 sitting directly above Listen's
   trailing row of 2. Centering each row independently (theme 4.56.0) was
   still wrong - two neat half-rows stacked still reads as broken, not two
   ragged ones. The fix Cephas asked for is the one the Articles band
   already uses two sections up: N cards in ONE 3-column flow, wrapping
   to whatever the remainder is (3, 3, 1 today) with at most one short row
   for the whole band, not one per widget.

   Articles gets that for free because its cards are static, hand-placed
   Elementor containers - all direct children of one real grid box
   (#media-selected-grid). Watch and Listen cannot be authored that way
   without giving up the live category query, so their cards arrive
   wrapped in Elementor's own per-widget boxes
   (.elementor-widget-loop-grid > .elementor-widget-container >
   .elementor-loop-container) - three levels between #media-av and the
   cards, once per widget, each generating its own row.

   THE FIX: `wp/templates/media-elements.json` now wraps both loop-grid
   widgets in one real new container, #media-av-grids (a proper row-flex
   box, NOT #media-av itself - #media-av stays column, sidestepping both
   past failures at the root). Every wrapper level inside it collapses
   with `display:contents`, so the two widgets' own boxes vanish from
   layout and all 7 cards become direct flex children of #media-av-grids
   - one shared row-wrap, one shared remainder, same as Articles. Each
   card still renders from its own template (2448 Watch, 2395 Listen), so
   a Watch card and a Listen card can sit in the same visual row without
   either losing its button text - only the BOX structure is shared, not
   the query or the template. */
#media-av-grids{
  display:flex;
  flex-wrap:wrap;
  gap:var(--grid-row-gap,30px) var(--grid-column-gap,30px);
}
#media-av-grids .elementor-widget-loop-grid,
#media-av-grids .elementor-widget-loop-grid > .elementor-widget-container,
#media-av-grids .elementor-loop-container{
  display:contents;
}
#media-av-grids .e-loop-item{
  flex:0 1 calc((100% - 2*var(--grid-column-gap,30px))/3);
}
@media (max-width:1024px){
  #media-av-grids .e-loop-item{
    flex:0 1 calc((100% - var(--grid-column-gap,30px))/2);
  }
}
@media (max-width:767px){
  #media-av-grids .e-loop-item{
    flex:0 1 100%;
  }
}