/**
 * @file
 * Section 10: Images.
 *
 * Split from css/staged-edits-from-gui.css (see docs/Theme updates.md for
 * the full split file list).
 */

/* --------- 10.1. Hero / Header images ---------------------------------- */

.img-header-bg {
  height: 300px;
  position: relative;
  background-size: cover;
  background-position: center;
}

.hero {
  margin-top: -300px;
  width: 100%;
  height: 300px;
  position: relative;
}

/* Hero image sizing */
.view-id-7_2_hero .field--name-field-media-image img,
.field--name-field-featured-image .field--name-field-media-image img {
  display: block;
  max-width: none;
  height: 300px;
  width: 100vw;
  /* Note Nina tested changing this to 100% to try solve the widths issue with home page images but it did not change anything, and 100vw is required for eg for Inside Look featured images to fill the horizontal space properly, so returned to 100vw */
  margin: 0 auto;
  object-fit: cover;
  object-position: center center;
}

/* Headers on hero images */
.view-id-7_2_hero h1 {
  margin-bottom: 0;
}

/* @TODO Nina to likely delete because of Al's header image fix and focal points but first confirming focal point works properly as does not seem consistent 
.pos-t { background-position: top; }
.pos-m { background-position: center; }
.pos-b { background-position: bottom; }
end of delete */

/* Media image layouts */
.node .overflow-auto .field--type-image,
.overflow-auto .field--type-image img {
  margin: 0;
}


/* --------- 10.2. Featured images --------------------------------------- */

/* Featured image overlay for basic page */
#views-bootstrap-7-1-featured-images-basic-page-block-1 {
  padding-right: 0;
}

#views-bootstrap-7-1-featured-images-basic-page-block-1 .list-group-item {
  height: 300px;
}

#views-bootstrap-7-1-featured-images-basic-page-block-1 h1 {
  color: #fff;
  padding-right: 25px;
  padding-left: 10px;
}

#views-bootstrap-7-1-featured-images-basic-page-block-1 h1,
#views-bootstrap-7-1-featured-images-basic-page-block-1 .views-field.views-field-title {
  position: relative;
  z-index: 101;
  margin-top: -316px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#views-bootstrap-7-1-featured-images-basic-page-block-1 img {
  width: auto !important;
  height: 300px !important;
  max-width: 100%;
  /* was 100vw; changing to try solve widths issue @TODO Nina delete comment */
  /* max-width: calc(100vw - var(--drupal-displace-offset-left, 0px));  was max-width and calc(100vw - var(--drupal-displace-offset-left, 0px)); hiding to try solve widths issue @TODO Nina delete comment */
}

/* Featured image picture wrapper */
.field--name-field-featured-image picture {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: calc(100vw - var(--drupal-displace-offset-left, 0px));
  margin: 0 auto;
  overflow: hidden;
}

/* @TODO AL was commented out already - delete if not needed */
/*.views-field-field-featured-image .field--name-field-media-image {
  overflow: hidden;
}*/

/* Featured image trigger overrides */
#block-korumo-bootstrap-barrio-featuredimage-2 .trigger.focusable {
  left: -32px !important;
}

.field--name-field-featured-image .trigger.focusable {
  left: -68px !important;
}

/* Articles have featured images in the body */
.node--type-articles .field--name-field-featured-image .field--name-field-media-image {
  max-width: 100%;
}


/* --------- 10.3. Other full-width images ------------------------------- */

/*  Homepage full-width sections — neutralise Bootstrap's .row negative margins so the row doesn't poke past the viewport edge.
    IMPORTANT: kept simple. Earlier attempts also zeroed --bs-gutter-x and .row > * padding which stripped legit
    Bootstrap utility paddings (px-3, ps-md-3, mt-lg-5, etc.) on inner cols and broke the home page layout.
    Just nullify the negative margins. Inner col gutters/utilities are preserved. */
.path-frontpage .row {
  margin-left: 0;
  margin-right: 0;
}



/* --------- 10.4. Full-width images hack --------- */

/* @todo Alabandit: fix this in Our Teams header and replace. */

.view-id-7_3_header_media_file .views-field-field-media-image .field-content {
  width: 100%;
  max-height: 300px;
}

.view-id-7_3_header_media_file .views-field-field-media-image .field-content img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center 80%;
}

.view-id-7_3_header_media_file .views-field-nothing {
  position: relative;
  z-index: 101;
  margin-top: -316px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Delete?
.views-field-field-media-image .field-content {
  width: 100%;
  max-height: 300px;
}

.views-field-field-media-image .field-content img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: bottom;
}

.view-id-7_3_header_media_file .views-field-nothing {
  position: relative;
  z-index: 101;
  margin-top: -316px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}*/

/* Other Our Team things to KEEP in place please */

.pill-wrap {
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* --------- 10.5. View media images --------- */
.views-field .field--type-image img {
  margin: 0;
}