/*
  Index
  ---------------------------------------------
  • Config
  • Base Styles
  • Background Images (per style)
  • Width – Full
  • Width – Contained
  • Style 1 – Vertical
  • Style 2 – Horizontal
  • Responsive
*/

/*
  • Config
---------------------------------------------
*/

/* No custom variables defined */

/*
  • Base Styles
---------------------------------------------
*/

.advanced-banner-component__container {
  background-color: #5D7374; /* fallback while image loads */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

/* Shared title & subtitle resets (wysiwyg output) */
.advanced-banner-component__title p,
.advanced-banner-component__subtitle p {
  margin: 0;
}

/*
  • Background Images (per style)
---------------------------------------------
*/

/* Style 1 – Vertical */
advanced-banner-component[data-style="vertical"] .advanced-banner-component__container {
  background-image: url('https://www.chapsvision.com/wp-content/uploads/2026/04/banner-1-scaled.webp');
}

/* Style 2 – Horizontal */
advanced-banner-component[data-style="horizontal"] .advanced-banner-component__container {
  background-image: url('https://www.chapsvision.com/wp-content/uploads/2026/04/banner-2-scaled.webp');
}

/*
  • Width – Full
  Banner bleeds to the viewport edges; no border-radius.
---------------------------------------------
*/

advanced-banner-component[data-width="full"] .advanced-banner-component__container {
  border-radius: 0;
}

/*
  • Width – Contained
  Banner sits inside the site container with rounded corners.
  The outer wrapper (container mx-auto px-5) provides the horizontal
  inset; border-radius is applied via the Blade conditional class.
---------------------------------------------
*/

advanced-banner-component[data-width="contained"] .advanced-banner-component__container {
  /* border-radius comes from Tailwind's rounded-lg utility applied in the view */
}

/*
  • Style 1 – Vertical (centered)
---------------------------------------------
*/

.advanced-banner-component__vertical {
  /* Buttons row alignment handled in utility classes */
}

/*
  • Style 2 – Horizontal (left/right)
---------------------------------------------
*/

.advanced-banner-component__horizontal {
  /* Prevent awkward shrinking handled by layout utilities */
}

.advanced-banner-component__actions {
  /* Buttons stack on mobile / row on desktop handled by utilities */
}

/*
  • Responsive
---------------------------------------------
*/

/* Below lg breakpoint (<1024px): horizontal layout collapses vertically */
@media (max-width: 1023px) {
  .advanced-banner-component__horizontal {
    flex-direction: column;
  }

  .advanced-banner-component__content {
    width: 100%;
  }

  .advanced-banner-component__actions {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* Small mobile: buttons full width */
@media (max-width: 639px) {
  .advanced-banner-component__actions {
    flex-direction: column;
  }

  .advanced-banner-component__actions .cv_button {
    width: 100%;
    text-align: center;
  }
}