/* =========================================================
   BM SHELL
   Estructura general:
   hero arriba
   frames + contenido abajo
========================================================= */

.bm-shell{
  display: grid;
  grid-template-columns: var(--bm-shell-side-width) minmax(0, 1fr) var(--bm-shell-side-width);
  gap: var(--bm-frame-shell-gap);
  align-items: start;
  width: min(1600px, 100%);
  margin: 0 auto;
  padding: 0 14px;
  box-sizing: border-box;
}

.bm-shell__side{
  min-width: 0;
  width: 100%;
}

.bm-shell__main{
  min-width: 0;
  width: 100%;
}

/* Zona central cuando el portal va solo */
.bm-portal--center-only{
  padding: 18px 0 34px;
}

.bm-portal--center-only .bm-wrap{
  width: 100%;
  max-width: 100%;
}

.bm-portal--center-only .bm-col--center{
  width: 100%;
  min-width: 0;
}

/* Tablet horizontal */
@media (max-width: 1100px){
  .bm-shell{
    grid-template-columns: clamp(180px, 21vw, 240px) minmax(0, 1fr) clamp(180px, 21vw, 240px);
    gap: 12px;
    padding: 0 10px;
  }
}

/* Móvil / tablet angosta */
@media (max-width: 800px){
  .bm-shell{
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    padding: 0 10px;
  }

  .bm-shell__side{
    display: flex;
    width: 100%;
  }

  .bm-shell__main{
    width: 100%;
    order: 1;
  }

  .bm-shell__side--left{
    order: 2;
  }

  .bm-shell__side--right{
    order: 3;
  }

  .bm-portal--center-only{
    padding: 14px 0 18px;
  }
}

/* =========================================================
   FULL WIDTH OVERRIDES
========================================================= */
.bm-shell{
  width: var(--bm-site-fluid-width, calc(100% - 8px));
  max-width: none;
  padding-left: 4px;
  padding-right: 4px;
}

@media (max-width: 1100px){
  .bm-shell{
    width: var(--bm-site-fluid-width, calc(100% - 8px));
    padding-left: 4px;
    padding-right: 4px;
  }
}

@media (max-width: 800px){
  .bm-shell{
    width: var(--bm-site-fluid-width, calc(100% - 8px));
    padding-left: 4px;
    padding-right: 4px;
  }
}

@media (min-width: 801px){
  .bm-single-frame-shell,
  .bm-archive-frame-shell{
    display: grid;
    grid-template-columns: var(--bm-frame-rail-width) minmax(0, 1fr) var(--bm-frame-rail-width);
    gap: var(--bm-frame-shell-gap);
    align-items: start;
  }

  .bm-single-frame-shell > .bm-home-stage__side,
  .bm-archive-frame-shell > .bm-home-stage__side{
    position: sticky;
    top: calc(var(--bm-header-height, 0px) + 14px);
    min-height: 0;
    height: auto;
  }

  .bm-single-frame-main,
  .bm-archive-frame-main{
    min-width: 0;
  }
}