/* ══════════════════════════════════════════════════════════════════
   ML CORPORATE SERVICES | Perspectives

   Port of _site/perspectives.html. Section order: hero, featured
   perspective, latest perspectives (ink), browse by topic, publications
   teaser + newsletter (stone), closing statement.

   Addressing follows the house policy proven by this build: containers
   emit no custom CSS classes, so every section is reached through its
   Elementor element ID; everything inside is reached through the widget
   classes declared in ml-site.css / ml-elementor.css.

   Responsive steps: 1180 / 782 / 430. No overflow-x:hidden anywhere -
   anything that would break the viewport is made to behave instead.
   ══════════════════════════════════════════════════════════════════ */

/* Values the page needs that the shared sheets do not publish as
   custom properties. Namespaced so they cannot collide with the
   site-wide --ml-* set. */
#persp-hero,
#persp-featured,
#persp-latest,
#persp-topics,
#persp-band,
#persp-close{
  --pg-stone:#f2f2f2;
  --pg-mist-paper:#4a4a4a;
  --pg-line-paper:rgba(0,0,0,.15);
}

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

#persp-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 40%;
  background-size:cover;
  background-repeat:no-repeat;
  justify-content:center;
  align-items:center;
  text-align:center;
  --width:100%;
  max-width:none;
}

/* The overlay is what keeps the type legible over any crop of the
   architectural still, so it is part of the section, not the image. */
#persp-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));
}

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

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

#persp-hero .ml-hero-mark img{
  width:clamp(64px,6vw,92px);
  height:auto;
  display:block;
}

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

/* ── Featured perspective ───────────────────────────────────────── */

#persp-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;
}

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

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

#persp-featured-media.e-con{
  aspect-ratio:4/3;
  overflow:hidden;
  background-color:var(--pg-stone);
}

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

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

#persp-featured .ml-section-title .elementor-heading-title{margin:18px 0 24px}

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

/* The "continue reading" affordance is the shared .ml-go underline,
   flipped to ink because this section sits on paper. */
#persp-featured .ml-go{margin-top:30px}

#persp-featured .ml-go .elementor-button{
  font-size:1rem;
  color:var(--ml-ink);
  border-bottom-color:var(--ml-ink);
  padding-bottom:5px;
}

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

/* ── Latest perspectives (ink) ──────────────────────────────────── */

#persp-latest.e-con{
  background-color:#0a0a0a;
  color:var(--ml-paper);
  padding:clamp(96px,11vw,168px) var(--ml-gut);
  --width:100%;
  max-width:none;
}

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

#persp-latest-head .elementor-heading-title{color:var(--ml-paper)}

#persp-latest-grid.e-con{
  max-width:1300px;
  margin:clamp(44px,5vw,72px) auto 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  align-items:stretch;
}

#persp-article-1.e-con,
#persp-article-2.e-con,
#persp-article-3.e-con,
#persp-article-4.e-con,
#persp-article-5.e-con,
#persp-article-6.e-con{
  padding:24px;
  background-color:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  box-shadow:0 16px 36px rgba(0,0,0,.35);
  --width:100%;
  max-width:none;
  transition:background-color .32s ease,border-color .32s ease,transform .32s ease;
}

#persp-article-1:hover,
#persp-article-2:hover,
#persp-article-3:hover,
#persp-article-4:hover,
#persp-article-5:hover,
#persp-article-6:hover{
  background-color:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.24);
  transform:translateY(-3px);
}

#persp-article-art-1.e-con,
#persp-article-art-2.e-con,
#persp-article-art-3.e-con,
#persp-article-art-4.e-con,
#persp-article-art-5.e-con,
#persp-article-art-6.e-con{
  padding:0;
  aspect-ratio:16/10;
  overflow:hidden;
  background-color:#1a1a1a;
  border-radius:8px;
  --width:100%;
  max-width:none;
}

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

.ml-article-art img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:grayscale(1) contrast(1.08);
  transition:transform .5s ease;
}

#persp-latest-grid .e-con:hover .ml-article-art img{transform:scale(1.04)}

#persp-article-copy-1.e-con,
#persp-article-copy-2.e-con,
#persp-article-copy-3.e-con,
#persp-article-copy-4.e-con,
#persp-article-copy-5.e-con,
#persp-article-copy-6.e-con{
  padding:0;
  flex:1 1 auto;
  --width:100%;
  max-width:none;
}

#persp-latest .ml-title{margin-top:20px}

#persp-latest .ml-title .elementor-heading-title{
  font-weight:570;
  font-size:1.25rem;
  line-height:1.2;
  letter-spacing:-.025em;
}

#persp-latest .ml-excerpt{margin-top:10px}

#persp-latest .ml-excerpt,
#persp-latest .ml-excerpt p{
  font-size:.9688rem;
  line-height:1.68;
  color:rgba(255,255,255,.76);
}

#persp-latest .ml-go{margin-top:16px;align-self:flex-start}

#persp-latest .ml-go .elementor-button{font-size:.875rem}

/* ── Browse by topic ────────────────────────────────────────────── */

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

#persp-topics-head.e-con{
  max-width:1200px;
  margin:0 auto;
  padding:0;
  align-items:center;
  text-align:center;
}

#persp-topics-head .ml-section-title{margin-top:20px}

#persp-topics-grid.e-con{
  max-width:1200px;
  margin:clamp(48px,5vw,80px) auto 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  --width:100%;
}

/* A topic tile is the shared button shape given a card footprint, so an
   editor adds or removes a topic by adding or removing a button. */
#persp-topics-grid .ml-tile .elementor-button{
  display:flex;
  align-items:center;
  width:100%;
  min-height:100%;
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:500;
  font-size:1.1875rem;
  letter-spacing:.3px;
  text-align:left;
  color:var(--ml-ink);
  background-color:transparent;
  border:1px solid var(--pg-line-paper);
  border-radius:12px;
  padding:34px 30px;
  transition:background-color .3s ease,color .3s ease;
}

#persp-topics-grid .ml-tile .elementor-button:hover,
#persp-topics-grid .ml-tile .elementor-button:focus{
  background-color:var(--ml-ink);
  color:var(--ml-paper);
}

/* ── Publications teaser + newsletter (stone) ───────────────────── */

#persp-band.e-con{
  background-color:var(--pg-stone);
  color:var(--ml-ink);
  padding:clamp(96px,11vw,164px) var(--ml-gut);
  --width:100%;
  max-width:none;
}

#persp-band-wrap.e-con{
  max-width:1100px;
  margin:0 auto;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(40px,5vw,70px);
  align-items:start;
}

#persp-band-teaser.e-con,
#persp-band-stay.e-con{padding:0;--width:100%;max-width:none}

#persp-band .ml-subhead .elementor-heading-title{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:600;
  font-size:1.625rem;
  line-height:1.2;
  letter-spacing:.02em;
  margin-top:14px;
}

#persp-band .ml-body,
#persp-band .ml-body p{
  font-size:1.0312rem;
  line-height:1.68;
  color:var(--pg-mist-paper);
  max-width:46ch;
  margin-top:16px;
}

#persp-band .ml-btn{margin-top:28px}

/* Buttons on paper invert the ink-background defaults from ml-site.css. */
#persp-band .ml-btn-primary .elementor-button{
  background-color:var(--ml-ink);
  color:var(--ml-paper);
  border-color:var(--ml-ink);
}

#persp-band .ml-btn-primary .elementor-button:hover,
#persp-band .ml-btn-primary .elementor-button:focus{
  background-color:transparent;
  color:var(--ml-ink);
}

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

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

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

#persp-close-actions.e-con{
  margin-top:64px;
  padding:0;
  gap:20px;
  justify-content:center;
  flex-wrap:wrap;
  --width:auto;
}

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

#persp-close .ml-btn-primary .elementor-button:hover,
#persp-close .ml-btn-primary .elementor-button:focus{
  background-color:transparent;
  color:var(--ml-ink);
}

#persp-close .ml-btn-secondary .elementor-button{
  background-color:transparent;
  color:var(--ml-ink);
  border-color:var(--ml-ink);
}

#persp-close .ml-btn-secondary .elementor-button:hover,
#persp-close .ml-btn-secondary .elementor-button:focus{
  background-color:var(--ml-ink);
  color:var(--ml-paper);
}

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

@media (max-width:1180px){
  #persp-featured-wrap.e-con{grid-template-columns:minmax(0,1fr)}
  #persp-latest-grid.e-con{grid-template-columns:repeat(2,minmax(0,1fr))}
  #persp-topics-grid.e-con{grid-template-columns:repeat(2,minmax(0,1fr))}
  #persp-band-wrap.e-con{grid-template-columns:minmax(0,1fr);gap:50px}
  /* The second column becomes a following block, so the divide moves
     from the side to the top. */
  #persp-band-stay.e-con{
    border-top:1px solid var(--pg-line-paper);
    padding-top:40px;
  }
}

@media (max-width:782px){
  #persp-hero.e-con{background-position:58% 34%}
  #persp-latest-grid.e-con{grid-template-columns:minmax(0,1fr)}
  #persp-topics-grid.e-con{grid-template-columns:minmax(0,1fr)}
  #persp-featured .ml-body,
  #persp-featured .ml-body p{font-size:1.0625rem}
  #persp-topics-grid .ml-tile .elementor-button{
    font-size:1.0625rem;
    padding:28px 24px;
  }
}

@media (max-width:430px){
  #persp-hero.e-con,
  #persp-featured.e-con,
  #persp-latest.e-con,
  #persp-topics.e-con,
  #persp-band.e-con,
  #persp-close.e-con{padding-left:24px;padding-right:24px}
  #persp-close-actions .elementor-button{width:100%}
  #persp-band .ml-btn .elementor-button{width:100%;text-align:center}
  #persp-article-1.e-con,
  #persp-article-2.e-con,
  #persp-article-3.e-con,
  #persp-article-4.e-con,
  #persp-article-5.e-con,
  #persp-article-6.e-con{padding:20px}
}