/**
 * Homepage layout fixes
 * Keep Juicer social feed as spaced cards at all zoom/reload states.
 */

/* -------------------------------------------------------------------------- */
/* Amplify / Carers Count slide — left image always uses Breakdance media    */
/* -------------------------------------------------------------------------- */
.breakdance .bde-column-18-150,
.breakdance .bde-column-56766-384 {
  overflow: hidden;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  align-self: stretch;
  height: 100%;
  max-height: 442px;
  background: transparent !important;
}

/* Whatever image is set on the left Amplify column — show it, fill the panel */
.breakdance .bde-column-18-150 .bde-image2,
.breakdance .bde-column-18-150 .bde-image,
.breakdance .bde-column-18-150 img,
.breakdance .bde-image2-18-358.bde-image2,
.breakdance .bde-image2-18-358,
.breakdance .bde-image2-18-358 img,
.breakdance .bde-column-56766-384 .bde-image2,
.breakdance .bde-column-56766-384 .bde-image,
.breakdance .bde-column-56766-384 img,
.breakdance .bde-image2-56766-385.bde-image2,
.breakdance .bde-image2-56766-385,
.breakdance .bde-image2-56766-385 img {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 442px !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.breakdance .bde-column-18-150 .breakdance-image-container,
.breakdance .bde-column-18-150 .breakdance-image-clip,
.breakdance .bde-image2-18-358 .breakdance-image-container,
.breakdance .bde-image2-18-358 .breakdance-image-clip,
.breakdance .bde-column-56766-384 .breakdance-image-container,
.breakdance .bde-column-56766-384 .breakdance-image-clip,
.breakdance .bde-image2-56766-385 .breakdance-image-container,
.breakdance .bde-image2-56766-385 .breakdance-image-clip {
  height: 100% !important;
  max-height: 442px !important;
  width: 100% !important;
}

/* -------------------------------------------------------------------------- */
/* Juicer – 3-column grid (reload + zoom safe)                                */
/* -------------------------------------------------------------------------- */
.juicer-feed,
.juicer-feed .j-stacker {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  position: relative !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.juicer-feed .j-stacker {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 28px !important;
}

.juicer-feed .j-stack {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  display: block !important;
  float: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  position: relative !important;
}

.juicer-feed .j-stack > li.feed-item {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  float: none !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  margin: 0 0 28px 0 !important;
  height: auto !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden;
  background: #fff;
}

.juicer-feed .cv-juicer-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 28px !important;
  width: 100% !important;
  max-width: 100% !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.juicer-feed .cv-juicer-row > li.feed-item {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: unset !important;
  margin: 0 !important;
}

.juicer-feed .j-poster {
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  overflow: hidden;
  flex: 0 0 auto;
}

.juicer-feed .j-text {
  padding: 12px !important;
  min-height: 0 !important;
  height: auto !important;
  flex: 1 1 auto;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.juicer-feed .j-meta {
  margin-top: auto !important;
  flex: 0 0 auto;
  padding: 0 12px 10px !important;
}

.juicer-feed li.feed-item .j-image,
.juicer-feed .j-image,
.juicer-feed .cv-juicer-row > li.feed-item .j-image {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
  flex: 0 0 auto;
}

.juicer-feed li.feed-item .j-image img,
.juicer-feed .j-image img,
.juicer-feed .jcr-post-media,
.juicer-feed img.jcr-post-media,
.juicer-feed .cv-juicer-row > li.feed-item .j-image img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  transform: none !important;
}

.breakdance .bde-column-18-265,
.breakdance .bde-code-block-18-341,
.breakdance .bde-code-block-18-341 .juicer-feed {
  overflow: visible !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 1023px) {
  .juicer-feed .cv-juicer-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  .juicer-feed .j-stacker {
    flex-direction: column !important;
  }

  .juicer-feed .cv-juicer-row {
    grid-template-columns: 1fr !important;
  }
}

/* Shared shell: header + heroes use one centered max-width on all screens    */
/* -------------------------------------------------------------------------- */
:root {
  --cv-shell-max: var(--bde-section-width, 1210px);
  --cv-shell-pad: 20px;
}

.breakdance .bde-header-builder-26-100 .bde-header-builder__container,
.breakdance .bde-section-26-120 .section-container,
.breakdance section.bde-section:has(.col-left-hero-cm) > .section-container,
.breakdance .bde-section-18-305 .section-container,
.breakdance .bde-section-18-247 .section-container {
  max-width: var(--cv-shell-max) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

.breakdance .bde-section-18-305 .section-container,
.breakdance .bde-section-18-247 .section-container {
  --bde-section-width: var(--cv-shell-max) !important;
}

.breakdance .bde-header-builder-26-100 .bde-header-builder__container,
.breakdance .bde-section-26-120 .section-container {
  padding-left: var(--cv-shell-pad) !important;
  padding-right: var(--cv-shell-pad) !important;
}

/* Default heroes: stay inside shared shell (Education submenu uses MU full-bleed) */
.breakdance section.bde-section:has(.col-left-hero-cm) {
  background-color: #fff !important;
  background-image: none !important;
}

.breakdance section.bde-section:has(.col-left-hero-cm) > .section-container {
  --bde-section-width: var(--cv-shell-max) !important;
  background-color: transparent !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: hidden !important;
}

.breakdance section.bde-section:has(.col-left-hero-cm) > .section-container > .bde-columns {
  background: transparent !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 0 !important;
  column-gap: 0 !important;
}

.breakdance section.bde-section:has(.col-left-hero-cm) .col-left-hero-cm.bde-column {
  background-color: #d1eefc !important;
  padding-left: 48px !important;
  padding-right: 48px !important;
}

/* Hero titles on light blue must be black (many pages still use white) */
.breakdance .col-left-hero-cm .bde-heading,
.breakdance .col-left-hero-cm h1,
.breakdance .col-left-hero-cm h2,
.breakdance .col-left-hero-cm h3 {
  color: #212121 !important;
}

.breakdance section.bde-section:has(.col-left-hero-cm) .bde-column:not(.col-left-hero-cm) {
  padding: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
}

.breakdance section.bde-section:has(.col-left-hero-cm) .bde-column:not(.col-left-hero-cm) .bde-image2 {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

@media (max-width: 1119px) {
  .breakdance section.bde-section:has(.col-left-hero-cm) .col-left-hero-cm.bde-column {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

@media (max-width: 767px) {
  .breakdance section.bde-section:has(.col-left-hero-cm) .col-left-hero-cm.bde-column {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* -------------------------------------------------------------------------- */
/* CV Hero Slider: edge-to-edge even inside Boxed Sections                      */
/* -------------------------------------------------------------------------- */
.breakdance section.bde-section:has(.cv-hero-slider),
.breakdance .bde-section:has(.cv-hero-slider) {
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: visible !important;
}

.breakdance section.bde-section:has(.cv-hero-slider) > .section-container,
.breakdance .bde-section:has(.cv-hero-slider) > .section-container {
  display: contents !important;
}

.breakdance .bde-column:has(.cv-hero-slider),
.breakdance .bde-div:has(> .cv-hero-slider) {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: none !important;
}

.breakdance .cv-hero-slider {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

.breakdance .cv-hero-slider .cv-hero-slider__wrap,
.breakdance .cv-hero-slider .breakdance-swiper-wrapper {
  --swiper-padding-h: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

@media (max-width: 1024px) {
  .breakdance .cv-hero-slider .cv-hero-slide__inner,
  .breakdance .cv-hero-slider .swiper-slide {
    overflow: hidden !important;
  }
  .breakdance .cv-hero-slider .cv-hero-slide__shell {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    overflow: hidden !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }
  .breakdance .cv-hero-slider .swiper-slide .cv-hero-slide__inner .cv-hero-slide__shell .cv-hero-slide__content,
  .breakdance .cv-hero-slider .cv-hero-slide__content,
  .breakdance .cv-hero-slider .cv-hero-slide__content[data-block-align] {
    --cv-hero-content-width: 100% !important;
    --cv-hero-ox: 0px !important;
    --cv-hero-oy: 0px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important;
    align-items: center !important;
    text-align: center !important;
    transform: none !important;
  }
  .breakdance .cv-hero-slider .swiper-slide .cv-hero-slide__title,
  .breakdance .cv-hero-slider .swiper-slide .cv-hero-slide__description,
  .breakdance .cv-hero-slider .swiper-slide .cv-hero-slide__description p,
  .breakdance .cv-hero-slider .swiper-slide .cv-hero-slide__actions,
  .breakdance .cv-hero-slider .cv-hero-slide__title,
  .breakdance .cv-hero-slider .cv-hero-slide__description,
  .breakdance .cv-hero-slider .cv-hero-slide__description p,
  .breakdance .cv-hero-slider .cv-hero-slide__actions,
  .breakdance .cv-hero-slider [data-align] {
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
  }
  .breakdance .cv-hero-slider .cv-hero-slide__actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .breakdance .cv-hero-slider .cv-hero-slide__button,
  .breakdance .cv-hero-slider .cv-hero-slide__description a {
    width: auto !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    white-space: normal !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}