/* ══════════════════════════════════════════════════════════════════
   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-close{
  --pg-stone:#f2f2f2;
  --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:#000;
  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{
  width:clamp(64px,6vw,92px);
  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:30px;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(--pg-stone);
  --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-bottom-color:var(--ml-ink);
  padding-bottom:4px;
}

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

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

#media-selected.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{
  max-width:1300px;
  margin:0 auto;
  padding:0;
}

#media-selected-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{margin-top:24px}

#media-selected .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{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{margin-top:14px}

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

/* ── 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;
  padding:26px 0;
  border-top:1px solid var(--pg-line-paper);
  --width:100%;
  max-width:none;
}

#media-srow-4.e-con{border-bottom:1px solid var(--pg-line-paper)}

.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{
  background-color:var(--pg-stone);
  color:var(--ml-ink);
  padding:clamp(96px,11vw,164px) 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:transparent;
  color:var(--ml-ink);
}

/* ── Closing statement ──────────────────────────────────────────── */

#media-close.e-con{
  background-color:var(--ml-paper);
  color:var(--ml-ink);
  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-ink);
}

/* ── 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-close.e-con{padding-left:24px;padding-right:24px}
  #media-invite .ml-btn .elementor-button{width:100%;text-align:center}
  /* 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}
}