/**
 * Images and Media CSS
 * Image and multimedia element control
 */

/* ========================================
   GENERAL IMAGES
   ======================================== */

/* Prevent images from overflowing */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Images inside text fields */
.field--type-text-with-summary img,
.text-formatted img {
  max-width: 100%;
  height: auto;
}

/* ========================================
   IMAGES IN CARDS
   ======================================== */

/* Images at the top of chapter cards */
.layout--threecol-section img,
.layout--twocol-section img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Image container inside card */
.block-content-basic img:first-child {
  margin-bottom: 0;
}

/* ========================================
   TOP BORDERS ON IMAGES
   ======================================== */

/* Images with blue top border */
img[style*="border-top:4px solid #006b99"],
img[style*="border-top:4px solid #007b99"],
img[style*="border-top:4px solid #007db3"] {
  border-top: 4px solid #006b99 !important;
  margin-top: 0 !important;
  display: block;
  width: 100%;
}

/* ========================================
   FLOATING IMAGES
   ======================================== */

/* Left floating image */
img.align-left,
.align-left img {
  float: left;
  margin: 0 1.5rem 1rem 0;
  max-width: 120px;
  height: auto;
}

/* Right floating image */
img.align-right,
.align-right img {
  float: right;
  margin: 0 0 1rem 1.5rem;
  max-width: 120px;
  height: auto;
}

/* Ensure floating images don't overflow */
.clearfix img.align-left,
.clearfix img.align-right {
  max-width: 30%;
}

/* ========================================
   SPECIFIC IMAGES
   ======================================== */

/* Director image */
.layout--threecol-section--50-25-25 img.align-left {
  max-width: 100px;
  width: 24%;
  height: auto;
  margin-right: 1rem;
}

/* Acknowledgments image */
.layout--threecol-section--50-25-25 img.align-right {
  max-width: 80px;
  width: 26%;
  height: auto;
  margin-left: 1rem;
}

/* Full Report image */
.card img.imagem {
  max-width: 150px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Images in Previous Topics */
.layout--twocol-section p[style*="border-top"] img {
  width: 68px;
  height: 57px;
  object-fit: cover;
  flex-shrink: 0;
}

/* ========================================
   ASPECT RATIO AND OBJECT FIT
   ======================================== */

/* Maintain aspect ratio of images in cards */
.layout--threecol-section .field__item > img:first-child,
.layout--twocol-section .field__item > img:first-child {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  height: auto;
}

/* ========================================
   IMAGE CONTAINERS
   ======================================== */

/* Ensure containers don't collapse */
.field__item {
  overflow: hidden;
}

/* Image wrapper */
.field--type-image {
  line-height: 0;
  margin-bottom: 0;
}

/* ========================================
   PREVENT OVERLAPPING
   ======================================== */

/* Reset problematic negative margins on images */
img[style*="margin-top:-20px"] {
  margin-top: 0 !important;
}

img[style*="margin-top:-40px"] {
  margin-top: 0 !important;
}

/* Ensure images don't overlap in 3-column layouts */
.layout--threecol-section--33-34-33 .layout__region {
  overflow: hidden;
}

/* ========================================
   LAZY LOADING AND PERFORMANCE
   ======================================== */

/* Images with lazy loading */
img[loading="lazy"] {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ========================================
   RESPONSIVE IMAGES
   ======================================== */

/* Ensure images are responsive */
@media (max-width: 768px) {
  img.align-left,
  img.align-right {
    float: none;
    margin: 0 auto 1rem;
    max-width: 200px;
  }

  .layout--threecol-section--50-25-25 img.align-left,
  .layout--threecol-section--50-25-25 img.align-right {
    float: none;
    margin: 0 auto 1rem;
    max-width: 150px;
  }
}


.view-mg-content-related-by-category .field--name-field-image img {
  width: 9rem;
  height: auto;
  display: block;
}


.field--name-field-image img {
  padding: 1rem 7% !important;
}

.readmore {
  padding: 0.2rem 7% !important;
}

.readmore:hover {
  text-decoration: none;
  border: 0;
}