/* =========================================================
   FILE: /css/legacy/fgh.images.css
   FGH v2 — IMAGES SYSTEM
   Phase 6 — Legacy Alias Collapse
   ========================================================= */

/* =========================================================
   HERO IMAGE (semantic)
   ========================================================= */

.content-image {
  height: auto;
  border-radius: 10px;

  /* resting elevation */
  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.18),
    0 10px 18px rgba(0, 0, 0, 0.2);

  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}

/* =========================================================
   FLOAT / INSET HERO MODE
   ========================================================= */

.image-hero-float {
  width: min(25%, 260px);
  height: auto;
  display: block;
}

a.media-popup-link > img.image-hero-float {
  display: block;
}

article.content-article a.media-popup-link.media-anchor {
  float: right;
  margin: 0.25rem 0 1rem 1.5rem;
  max-width: 45%;
}

article.content-article h2 + img.content-image.image-hero-float {
  clear: both;
  float: right;
  margin-top: 0.6rem;
}

/* =========================================================
   WIDE HERO MODE
   ========================================================= */

.image-hero-wide {
  width: 100%;
  max-width: 520px;
  display: block;
  float: none;
  margin: 0.75rem auto 1.25rem;
}

/* =========================================================
   HERO SIZE VARIANTS
   ========================================================= */

.image-hero-narrow {
  width: min(20%, 180px);
  float: none;
  margin: 0.5rem auto 1rem;
  display: block;
}

.image-hero-medium {
  width: min(35%, 320px);
  float: none;
  margin: 0.5rem auto 1rem;
  display: block;
}

/* =========================================================
   INLINE POST IMAGES
   ========================================================= */

.image-inline-left {
  float: left;
  margin: 0.25rem 1.25rem 1rem 0;
  max-width: 30%;
  height: auto;
  border-radius: 12px;
}

.image-inline-right {
  float: right;
  margin: 0.25rem 0 1rem 1.25rem;
  max-width: 30%;
  height: auto;
  border-radius: 12px;
}

article.content-article img.image-inline-left,
article.content-article img.image-inline-right {
  max-width: 30%;
  height: auto;
}

article.content-article img.image-inline-right {
  float: right;
  margin: 0 0 1rem 1.5rem;
}

article.content-article img.image-inline-left {
  float: left;
  margin: 0 1.5rem 1rem 0;
}

article.content-article a.media-popup-link img.image-inline-left,
article.content-article a.media-popup-link img.image-inline-right {
  max-width: 30%;
  height: auto;
}

/* =========================================================
   FLOAT CONTAINER LAYER
   ========================================================= */

.media-float-right {
  float: right;
  margin: 0.25rem 0 1rem 1.25rem;
  width: auto;
  max-width: none;
}

.media-float-left {
  float: left;
  margin: 0.25rem 1.25rem 1rem 0;
  width: auto;
  max-width: none;
}

.media-block {
  display: block;
  float: none;
  margin: 0.75rem auto 1.25rem;
  text-align: center;
}
/* =========================================================
   CENTERED CONTENT IMAGE (non-float, image-only)
   ========================================================= */

.media-centered {
  display: block;
  float: none;
  margin: 1rem auto 1.5rem;
  width: fit-content;
  max-width: 100%;
  text-align: center;
}
/* =========================================================
   POPUP LINK GEOMETRY
   ========================================================= */

a.media-popup-link {
  display: inline-block;
  margin: 0;
  padding: 0;
  border: 0;
  text-decoration: none;
  cursor: zoom-in;
}

a.media-popup-link > img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}
/* =========================================================
   HERO IMAGE NORMALIZATION (override utility leakage)
   ========================================================= */

article.content-article a.media-popup-link > img:not(.image-hero-float) {
  width: auto;
  max-width: 100%;
  margin-left: 0;
  display: block;
}