/* =============================================================
   barrio_npm — responsive breakpoints
   Layout twocol, Display Suite 2col, frontpage hero hide-on-small,
   form widths, conference block stacking. Slick/slideshow widths
   skipped pending slick port (deferred per prototype-theme-plan.md). */

/* ---------- Display Suite 2col stacked fluid ----------
   Base layout rules + small-screen stacking. Used by person nodes
   and other DS-rendered entities. */

.ds-2col-stacked-fluid > .group-left  { float: left; width: 33%; }
.ds-2col-stacked-fluid > .group-right { float: left; width: 66%; }

.ds-2col-stacked-fluid > .group-left img {
  width: 90%;
  height: 90%;
}

/* ---------- Large devices (>= 992px) ---------- */

@media (min-width: 992px) {
  .layout--twocol > .layout__region--first {
    flex: 0 1 66%;
    padding-right: 1em;
  }
  .layout--twocol > .layout__region--second {
    flex: 0 1 33%;
    padding-left: 1em;
  }

  .bg-img-hero-center { min-height: 5em; }
}

/* ---------- Medium devices (768–991px) ---------- */

@media (min-width: 768px) and (max-width: 991.98px) {
  .layout--twocol > .layout__region--first {
    flex: 0 1 50%;
    padding-right: 1em;
  }
  .layout--twocol > .layout__region--second {
    flex: 0 1 50%;
    padding-left: 1em;
  }

  #front-hero-text-background { display: none !important; }
}

/* ---------- Small devices (576–767.98px) ---------- */

@media (min-width: 576px) and (max-width: 767.98px) {
  #hero-image-links { flex-direction: column; }

  .conference-block-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .conference-logo {
    margin-bottom: 1.5rem;
  }

  .conference-content {
    text-align: center;
  }
}

/* ---------- Extra-small devices (< 576px) ---------- */

@media (max-width: 575.98px) {
  #front-hero-text-background { display: none !important; }
  #hero-image-links            { flex-direction: column; }

  .ds-2col-stacked-fluid > .group-left,
  .ds-2col-stacked-fluid > .group-right {
    float: left;
    width: 100%;
  }

  .ds-2col-stacked-fluid > .group-left img,
  .ds-2col-stacked-fluid > .group-right img {
    width: 100%;
    height: auto;
  }

  fieldset.js-form-item select,
  .views-exposed-form input[type="text"] {
    width: 350px;
    box-sizing: border-box;
  }

  .conference-block-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .conference-logo {
    margin-bottom: 1.5rem;
  }

  .conference-content {
    text-align: center;
  }
}