/* MCEE / Editorial Photography — V4
   Every newly integrated photo is a compressed WebP. Imagery is conceptual,
   not documentary evidence of an actual MCEE office, staff, or courses. */

/* Hero: natural portrait crop with no text or interface baked into the asset. */
.hero-editorial-photo { object-position: 50% 25%; }
.hero-visual::before {
  background: linear-gradient(180deg,rgba(19,24,37,0) 42%,rgba(18,24,42,.05) 63%,rgba(18,24,42,.62) 100%);
}

/* One still life complements the services introduction without interrupting
   the useful editorial index or forcing image cards onto the visitor. */
.services-section .section-heading-aside::after {
  content: '';
  display: block;
  height: 150px;
  width: 100%;
  margin-top: 19px;
  background: #e9ebf1 url('./assets/mcee-editorial-finance-still-life.webp') center 53% / cover no-repeat;
  border: 1px solid #e3e6ed;
  box-shadow: 9px 9px 0 -3px #e8ebf4;
}

/* Keep the hexagonal language; the second photo is a quiet architectural
   backdrop rather than replacing the custom identity concept. */
.about-split-art {
  background: linear-gradient(100deg,rgba(21,27,45,.83),rgba(31,39,65,.70)),
    url('./assets/mcee-editorial-office.webp') 48% center / cover no-repeat;
}
.brand-geometry { filter: drop-shadow(0 8px 24px rgba(0,0,0,.13)); }
.art-disclosure {
  position: absolute;
  bottom: 20px;
  left: 30px;
  font-size: 9px;
  font-weight: 500;
  color: #e7eaf5b8;
  z-index: 3;
  line-height: 1.8;
}

/* Related internal About page inherits the same photo language. */
.page[data-page='about'] .about-note {
  background: linear-gradient(120deg,rgba(29,35,55,.88),rgba(31,38,61,.82)),
    url('./assets/mcee-editorial-office.webp') center / cover no-repeat;
}

/* Education gets its own narrative asset instead of generic stock icons.
   Course cards retain their honest placeholder state. */
.page[data-page='academy'] > .section.container::before {
  content: '';
  display: block;
  width: 100%;
  height: clamp(230px,30vw,340px);
  margin: -18px 0 68px;
  background: #d4d9e4 url('./assets/mcee-editorial-learning.webp') center 54% / cover no-repeat;
  border: 1px solid #dfe3ed;
  box-shadow: 13px 13px 0 -5px #edf0f6;
}

@media (max-width: 960px) {
  .services-section .section-heading-aside::after { height: 126px; }
  .art-disclosure { font-size: 8px; left: 16px; }
}

@media (max-width: 720px) {
  .hero-editorial-photo { object-position: 50% 28%; }
  .services-section .section-heading-aside { width: 100%; max-width: none; }
  .services-section .section-heading-aside::after { height: 174px; margin-top: 22px; }
  .page[data-page='academy'] > .section.container::before { margin: 0 0 45px; height: 245px; background-position: 44% center; }
  .art-disclosure { left: 12px; bottom: 10px; }
}

@media (max-width: 460px) {
  .hero-editorial-photo { object-position: 50% 26%; }
  .services-section .section-heading-aside::after { height: 150px; }
  .page[data-page='academy'] > .section.container::before { height: 194px; }
}