/* =========================================================
   Homepage Banner (v2)
   Structure:
   1) Container & slide base
   2) Text block (heading, copy, buttons)
   3) Media (image)
   4) Brand motifs (before/after gradients)
   5) Media queries (mobile-first)
   ========================================================= */


/* ===================================
   1) CONTAINER & SLIDE BASE
   =================================== */
#homepage-banner {
   position: relative;
   border-bottom: .25px solid var(--border-color);
}

.banner-slide {
   display: flex;
   flex-direction: column;
   height: 392px;
   background-color: #F4F4F4;
}

#homepage-banner .splide__arrow--next {
    border-radius: 4px 0 0 4px;
}

#homepage-banner .splide__arrow--prev {
    border-radius: 0 4px 4px 0;
}


/* ===================================
   2) TEXT BLOCK (HEADING, COPY, BUTTONS)
   =================================== */
.banner-text {
   margin: auto 0;
   text-align: center;
   padding-inline: 32px;
}

.banner-text h1 {
   margin-bottom: .5rem;
   color: var(--base-emphasis);
   font-family: var(--heading-font);
   font-weight: 400;
   font-size: var(--text-3xl);
   line-height: 1.3;
}

.banner-text h1 .h1-emphasis {
   display: block;
   font-weight: 600;
}

.banner-text p {
   margin-bottom: .75rem;
   font-size: var(--text-base);
}

/* Buttons */
.banner-text .btn-row {
   width: 100%;
}

.banner-text .btn-row a {
   display: flex;
   align-items: center;
   justify-content: center;
   width: fit-content;
   height: 32px;
   padding: 0 1rem;
   margin: 0 auto;
   text-decoration: none;
   text-transform: uppercase;
   letter-spacing: .5px;
   /* fix: add unit */
   font-size: var(--text-sm);
   font-weight: 600;
   background-color: var(--button-emphasis);
   color: var(--button-emphasis-content);
}

.banner-text .btn-row .primary-link {
   background-color: var(--button-emphasis);
   color: var(--button-emphasis-content);
}

.banner-text .btn-row .primary-link:is(:hover, :focus) {
   background-color: var(--button-emphasis-focus);
}


/* ===================================
   3) MEDIA (IMAGE)
   =================================== */
.banner-slide picture {
   /* keeps layout stable on row layout */
   flex-shrink: 0;
}

.banner-slide__img {
   width: 100%;
   height: 165px;
   object-fit: cover;
   object-position: center;
}


/* ===================================
   4) BRAND MOTIFS (GRADIENT BARS)
   =================================== */
.brand-motif__after {
   width: 100%;
   height: 32px;
   background: linear-gradient(180deg,
         rgba(51, 191, 213, 1) 0%,
         rgba(51, 191, 213, 1) 22.22%,
         rgba(62, 82, 163, 1) 22.23%,
         rgba(62, 82, 163, 1) 55.55%,
         /* fix: 55%.55% -> 55.55% */
         rgba(57, 32, 124, 1) 55.56%,
         rgba(57, 32, 124, 1) 100%);
}


/* ===================================
   5) MEDIA QUERIES
   =================================== */

/* ≥640px: row layout, shorter slide, left-align text */
@media (min-width: 640px) {
   .banner-slide {
      flex-direction: row;
      align-items: center;
      height: 208px;
   }

   .brand-motif__before {
      flex-shrink: 0;
      width: 48px;
      height: 100%;
      background: linear-gradient(-90deg,
            rgba(51, 191, 213, 1) 0%,
            rgba(51, 191, 213, 1) 22.22%,
            rgba(62, 82, 163, 1) 22.23%,
            rgba(62, 82, 163, 1) 55.55%,
            /* fix: 55%.55% -> 55.55% */
            rgba(57, 32, 124, 1) 55.56%,
            rgba(57, 32, 124, 1) 100%);
   }

   .banner-text {
      margin: 0;
      text-align: left;
   }

   .banner-text .btn-row a {
      margin: 0;
   }

   .banner-slide__img {
      width: 208px;
      height: 208px;
      object-fit: cover;
      object-position: center;
   }

   .brand-motif__after {
      display: none;
      visibility: hidden;
   }
}

/* ≥768px: scale up */
@media (min-width: 768px) {
   .banner-slide {
      height: 334px;
   }

   .banner-text h1 {
      margin-bottom: .75rem;
      font-size: var(--text-4xl);
   }

   .banner-text p {
      margin-bottom: 1rem;
      font-size: var(--text-lg);
   }

   .banner-text .btn-row a {
      font-size: var(--text-base);
   }

   .banner-slide__img {
      width: 334px;
      height: 334px;
   }
}

/* ≥1024px: further scaling */
@media (min-width: 1024px) {
   .brand-motif__before {
      width: 80px;
   }

   .banner-text h1 {
      margin-bottom: 1rem;
      font-size: var(--text-5xl);
   }

   .banner-text h1 .h1-emphasis {
      font-size: var(--text-6xl);
   }

   .banner-text p {
      margin-bottom: 1.25rem;
      font-size: var(--text-xl);
   }

   .banner-text .btn-row a {
      height: 40px;
      padding: 0 1.5rem;
      line-height: 1;
      font-size: var(--text-lg);
   }
}

/* ≥1280px: larger type / controls */
@media (min-width: 1280px) {
   .banner-text h1 {
      font-size: var(--text-6xl);
   }

   .banner-text h1 .h1-emphasis {
      font-size: 2.884rem;
   }

   /* keep exact */
   .banner-text p {
      font-size: var(--text-2xl);
   }

   .banner-text .btn-row a {
      height: 48px;
   }
}

/* ≥1536px: roomy layout, dynamic inset */
@media (min-width: 1536px) {
   .brand-motif__before {
      width: 144px;
   }

   .banner-slide {
      height: 440px;
   }

   .banner-text {
      flex-grow: 1;
      padding-left: clamp(32px, 5vw, calc(((100vw - 1440px) / 2) - 144px));
   }

   .banner-text h1 {
      font-size: 3rem;
      line-height: 1.1;
   }

   .banner-text h1 .h1-emphasis {
      font-size: 3.5rem;
   }

   .banner-slide__img {
      width: 440px;
      height: 440px;
   }



   /* Optional: align Splide arrows with padded edges
  #homepage-banner .splide__arrow.splide__arrow--prev {
    left: calc(((100vw - 1440px) / 2) - 2.5rem);
    border-radius: 4px;
  }
  #homepage-banner .splide__arrow.splide__arrow--next {
    right: calc(((100vw - 1440px) / 2) - 2.5rem);
    border-radius: 4px;
  }
  */
}