/* ==========================================================================
   Editorial Visual System V1 — Phase 11.1
   Reusable image architecture for Knowledge Center + Knowledge Articles.
   Structural only — no typography, spacing system, color palette, or
   branding overrides outside image containers.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Editorial hero wrapper
   -------------------------------------------------------------------------- */

.editorial-hero {
  /* Marker class — pairs with existing kc-hero / article-hero-v2 blocks */
}

.editorial-hero__media {
  width: 100%;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   Hero media — 16:9 premium image area
   -------------------------------------------------------------------------- */

.hero-media {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 24px;
  background-color: #F5F5F5;
}

.hero-media__picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-media__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.kc-hero .editorial-hero__media {
  margin-top: 0;
  margin-bottom: 56px;
}

.article-hero-v2 .hero-media {
  margin-top: 48px;
}

/* --------------------------------------------------------------------------
   In-article editorial images
   -------------------------------------------------------------------------- */

.article-image {
  display: block;
  width: 100%;
  margin: 48px 0;
  overflow: hidden;
  border-radius: 20px;
  background-color: #F5F5F5;
}

.article-image__picture {
  display: block;
  width: 100%;
  height: 100%;
}

.article-image__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.article-image-large {
  aspect-ratio: 16 / 9;
}

.article-image-technical {
  aspect-ratio: 4 / 3;
}

.article-image-wide {
  aspect-ratio: 16 / 9;
}

.article-image-comparison {
  aspect-ratio: 21 / 9;
}

.article-image-portrait {
  aspect-ratio: 4 / 5;
}

.article-image-square {
  aspect-ratio: 1 / 1;
}

.article-image-panorama {
  aspect-ratio: 21 / 9;
}

/* Industry panel side media — portrait editorial proof */
.editorial-industry-media {
  display: block;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 24px;
  background-color: #F5F5F5;
}

.editorial-industry-media__picture {
  display: block;
  width: 100%;
  height: 100%;
}

.editorial-industry-media__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.editorial-industry-media.editorial-image-portrait,
.editorial-industry-media.article-image-portrait {
  aspect-ratio: 4 / 5;
}

/* Contact page hero — 4:3 side editorial (Phase 15.1) */
.editorial-contact-hero {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 24px;
  background-color: #F5F5F5;
}

.editorial-contact-hero__picture {
  display: block;
  width: 100%;
  height: 100%;
}

.editorial-contact-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Neutral empty slot — hides transparent structural img, shows block only */
.hero-media[data-editorial-placeholder] .hero-media__image,
.article-image[data-editorial-placeholder] .article-image__media,
.editorial-industry-media[data-editorial-placeholder] .editorial-industry-media__image,
.editorial-contact-hero[data-editorial-placeholder] .editorial-contact-hero__image {
  opacity: 0;
}

/* --------------------------------------------------------------------------
   Captions
   -------------------------------------------------------------------------- */

.article-caption {
  margin: 12px 0 0;
  padding: 0 8px;
  font-size: var(--text-body-s);
  font-weight: var(--text-body-weight);
  line-height: var(--lh-body-tight);
  color: var(--color-text-muted);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
  .hero-media {
    border-radius: 20px;
  }

  .article-image {
    margin: 40px 0;
    border-radius: 16px;
  }

  .editorial-industry-media,
  .editorial-contact-hero {
    border-radius: 20px;
  }

  .kc-hero .editorial-hero__media {
    margin-bottom: 48px;
  }

  .article-hero-v2 .hero-media {
    margin-top: 40px;
  }
}

@media (max-width: 575px) {
  .hero-media {
    border-radius: 16px;
  }

  .article-image {
    margin: 32px 0;
    border-radius: 14px;
  }

  .editorial-industry-media,
  .editorial-contact-hero {
    border-radius: 16px;
  }

  .kc-hero .editorial-hero__media {
    margin-bottom: 40px;
  }

  .article-hero-v2 .hero-media {
    margin-top: 32px;
  }
}