/*

* LAYOUT BUILDER STYLES 

*/

.layout + .layout {
  margin-top: var(--row-gap-md);
/*   border: 1px solid blue; */
}

.layout .block + .block {
  margin-top: var(--row-gap-lg);
 /*  border: 1px solid red; */
}


@media (min-width: 992px) {

/*     body:not(.path-taxonomy) h1, */
    :not(.full-full-width) h1 {
        padding-bottom: 0.66em;
    }

    .layout .block + .block {
        margin-top: var(--row-gap-lg);
    }
    
    .layout .block + .block.block-field-blocknodelanding-pagefield-short-tagline {
        margin-top: 0;
    }
    
    .layout .block.short-tagline,
    .node--type-legacy-page
    .layout .block.short-tagline {
      margin-top: 0!important;
    }

    .layout .block-inline-blockbasic + .block-inline-blockbasic {
        border-top: 1px solid var(--lightest-visible);
        padding-top: var(--row-gap-sm);
    }
}





.layout--twocol-section {
    gap: 1em;
    justify-content: space-between;
}

.layout__region--second .field--type-image {
   width: 100%;
}


/*
*
* for pages that don't have LB active but still need 2-col functionality,
*  duplicate styles from two-col. 
*       ex. Organizational Units = Taxonomy, needs twig template, not LB
*
*/

/*
 * @file
 * Provides the layout styles for two-column layout section.
 */

.layout--twocol-section {
  display: flex;
  flex-wrap: wrap;
}

.layout--twocol-section > .layout__region {
  flex: 0 1 100%;
}

/* 
  ** ohhh bootstrap... these column sizes aren't readable for mid-size devices -
  ** let's go bigger 40em = 640px ---->> 768px 
@media screen and (min-width: 40em) { */
@media screen and (min-width: 768px) {
  .layout--twocol-section.layout--twocol-section--50-50 > .layout__region--first,
  .layout--twocol-section.layout--twocol-section--50-50 > .layout__region--second {
    flex: 0 1 50%;
  }

  .layout--twocol-section.layout--twocol-section--33-67 > .layout__region--first,
  .layout--twocol-section.layout--twocol-section--67-33 > .layout__region--second {
    flex: 0 1 33%;
  }

/* fix also in base.css -- repeat here because this overrides that one */
  .layout--twocol-section.layout--twocol-section--33-67 > .layout__region--second,
  .layout--twocol-section.layout--twocol-section--67-33 > .layout__region--first {
    /* flex: 0 1 67%; */
    flex: 0 1 64%; 
  }

  .layout--twocol-section.layout--twocol-section--25-75 > .layout__region--first,
  .layout--twocol-section.layout--twocol-section--75-25 > .layout__region--second {
    flex: 0 1 25%;
  }

  .layout--twocol-section.layout--twocol-section--25-75 > .layout__region--second,
  .layout--twocol-section.layout--twocol-section--75-25 > .layout__region--first {
    flex: 0 1 75%;
  }
}
