/* =========================================================
   COMMUNITY AFFAIRS TEAM & REGIONAL MAP
   Mobile styles custom to page Nicor Gas 
   "Find-your-community-affairs-representative.html" page
   ========================================================= */

/* DESKTOP: arrange the four region labels horizontally. */
@media (min-width: 992px) {
  .community-affairs-section .color-legends > ul {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 0 !important;
    margin: 0 !important;
  }

  .community-affairs-section .color-legends > ul > .color-legend {
    display: flex !important;
    flex: 0 0 auto;
    align-items: center !important;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    white-space: nowrap;
  }
}

/* TABLET / MOBILE: show the map below the complete people column. */
@media (max-width: 991px) {
  /* Stack only the two outer columns, preserving their HTML order. */
  .community-affairs-section > .bootstrap-container > .row {
    display: flex !important;
    flex-direction: column;
  }

  .community-affairs-section > .bootstrap-container > .row > section {
    float: none !important;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
  }

  /* Override the visibility classes currently hiding the map section. */
  .community-affairs-section .column-40 .row.hidden-xs.hidden-sm {
    display: block !important;
  }

  /* Separate the map from the final staff member. */
  .community-affairs-section > .bootstrap-container > .row > .column-40 {
    margin-top: 24px;
  }

  /* Fit the map to its column while preserving its aspect ratio.
     Keep the existing desktop/mobile image visibility rules. */
  .community-affairs-section .column-40 .cmp-image__image {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}

/* MOBILE: set all six staff portraits to 250px wide.
   Target the staff columns because AEM places community-affairs-section
   on the Regional Managers row, below the outer column-60 element. */
@media (max-width: 767px) {
  .column-60 .column-75 .cmp-image__image {
    width: 250px !important;
    max-width: 100% !important;
    height: auto !important;
  }
}



/* Keep all four region labels in one row on desktop and mobile. */
.regional-map-section .color-legends > ul {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  gap: 10px !important;
  list-style: none;
  padding: 0 !important;
  margin: 0 !important;
}

.regional-map-section .color-legends > ul > .color-legend {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  white-space: nowrap;
}

/* Mobile: compact legend and smaller map. */
@media (max-width: 767px) {
  .regional-map-section .color-legends > ul {
    gap: 6px !important;
  }

  .regional-map-section .color-legends > ul > .color-legend {
    font-size: 12px !important;
  }

  /* Override the existing 22px circle dimensions and flex basis. */
  .regional-map-section .color-legends .color-legend::before {
    flex: 0 0 12px !important;
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    min-height: 12px !important;
    margin: 0 4px 0 0 !important;
  }


  .regional-map-section .cmp-image {
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
    width: 250px !important;
    max-width: 100% !important;
  }

  /* Preserve AEM's existing desktop/mobile image visibility. */
  .regional-map-section .cmp-image__image {
    margin-left: 0 !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}


/* White text on all four colored county labels, on desktop and mobile. */
.community-affairs-section .color-label,
.community-affairs-section .color-label strong {
  color: #fff !important;
}

/* MOBILE: align staff content-card text with the left edge of the photos. */
@media (max-width: 767px) {
  .community-affairs-section .wrap-content-card,
  .community-affairs-section .content-card--remove-width-padding,
  .community-affairs-section .content-card--remove-width-padding > .content-card--content {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
}


@media (max-width: 767px) {
  .column-60 .contentcard.cc-thumb-left,
  .column-60 .contentcard.cc-thumb-left .wrap-content-card,
  .column-60 .contentcard.cc-thumb-left .content-card,
  .column-60 .contentcard.cc-thumb-left .content-card--content,
  .column-60 .contentcard.cc-thumb-left .content-card--content > p {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  .column-60 .contentcard.cc-thumb-left {
    padding-left: 10px !important;
  }
}

/* Makes the map 320px x 250px in mobile phone */
@media (max-width: 767px) {
  .regional-map-section .cmp-image {
    width: 320px !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .regional-map-section .cmp-image__image {
    width: 100% !important;
    height: 250px !important;
    object-fit: contain;
    object-position: left top;
  }
}