/**
 * @file
 * Paragraph (bp-*) types and specific paragraph instances.
 */

div.clearfix.block.block-layout-builder.block-field-blocknodepagefield-two-column-layout > div > div.field--label{display: none}
#bp-tab-1859 > div > nav > div {justify-content: flex-end;}

/* Hidden by default: only the scrolling strip below needs the arrows. */
.paragraph--type--bp-tabs .bp-tabs-arrow {
  display: none;
}

/* tabs-scroller.js adds this for the length of a single measurement and takes
   it straight back off again, so it is never painted. The one line it forces is
   what the strip's own scrollWidth would otherwise hide: with flex-wrap still on,
   tabs that do not fit are moved to a second row instead of overflowing, so
   scrollWidth would always equal clientWidth. */
.paragraph--type--bp-tabs .nav-tabs.is-measuring {
  flex-wrap: nowrap;
}

.paragraph--type--bp-tabs .nav-tabs.is-measuring .nav-link {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* tabs-scroller.js adds this the moment the tabs stop fitting on one line, at
   whatever viewport width that happens to be. The strip is then kept on one line
   and scrolled sideways, instead of Bootstrap's default flex-wrap which stacks
   the tabs vertically. The two arrow buttons live on the surrounding <nav>. */
.paragraph--type--bp-tabs .bp-tabs-nav.is-scrolling {
  position: relative;
}

.paragraph--type--bp-tabs .bp-tabs-nav.is-scrolling .nav-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Line the snap points up with the 5px padding the strip starts with. */
  scroll-padding-inline: 5px;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
  scrollbar-width: none;
}

.paragraph--type--bp-tabs .bp-tabs-nav.is-scrolling .nav-tabs::-webkit-scrollbar {
  display: none;
}

.paragraph--type--bp-tabs .bp-tabs-nav.is-scrolling .nav-tabs .nav-link {
  flex: 0 0 auto;
  white-space: nowrap;
  scroll-snap-align: start;
}

.paragraph--type--bp-tabs .bp-tabs-nav.is-scrolling .bp-tabs-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background-color: #fff;
  color: var(--mt-color-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  font-size: 18px;
  line-height: 1;
}

.paragraph--type--bp-tabs .bp-tabs-nav.is-scrolling .bp-tabs-arrow--prev {
  left: 6px;
}

.paragraph--type--bp-tabs .bp-tabs-nav.is-scrolling .bp-tabs-arrow--next {
  right: 6px;
}

/* Nothing left to scroll to in that direction: no button at all. */
.paragraph--type--bp-tabs .bp-tabs-nav.is-scrolling .bp-tabs-arrow[disabled] {
  display: none;
}

/* A right-aligned scroller would come up already scrolled to the last tab,
   while the first tab is the active one. Needs the ID to beat the rule above. */
#bp-tab-1859 > div > nav.is-scrolling > div {
  justify-content: flex-start;
}

/* 1. Target the image container specifically in this 2-col layout */
.paragraph--type--bp-columns-two-uneven__2col-column1 .field--name-bp-image-field {
  height: 100%;
  min-height: 200px; /* Ensures a baseline height even with little text */
  display: flex;
}

/* 2. Force the image to cover the area without distortion */
.paragraph--type--bp-columns-two-uneven__2col-column1 img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* This is the secret for inconsistent sizes */
  object-position: center;
  border-radius: 12px; /* Consistent with your cards/video */
  box-shadow: 0 10px 30px rgba(var(--mt-color-base-value), 0.1);
  transition: transform 0.4s ease;
}


.paragraph--id--1188 .views-field-title {
  font-size: 22px;
  margin: 0 0 15px 0;
  border-bottom: 3px solid var(--mt-color-primary);
}
.paragraph--type--bp-simple .field--name-field-title,
/* .paragraph--type--bp-view .field--name-bp-header, */
.paragraph--type--bp-columns-two-uneven__2col-column2 .views-field-title > h5.field-content{
  display: block;
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--mt-color-base-dark);
  margin-bottom: 15px;
  line-height: 1.1;
}

.paragraph--id--1136 .paragraph--type--bp-columns-two-uneven__2col-column1{
  background-color: rgba(var(--mt-color-base-value), 0.05); /* Very light grey */
  padding: 1em!important;
  border-radius: 4px;
}
.paragraph--id--1136 .paragraph--type--bp-columns-two-uneven__2col-column2{
  background-color:#fff!important; /*exclude areas not following the sidebar rule*/
}
.paragraph--id--3429 .paragraph--type--bp-columns-two-uneven__2col-column2{
  background-color:#fff!important; /*exclude areas not following the sidebar rule*/
}