/* Override main > .section styles to allow full width (single banner) */
main > .section.cms-secondary-banner-container {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Allow `.section.no-padding-y` to override the vertical padding even when the
   banner is in a grid layout (which uses !important for its 32px padding). */
main > .section.cms-secondary-banner-container[class*="grid-"].no-padding-y {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* The inner banner card uses Tailwind utilities `my-[32px]` (margin) and
   `pb-[18px]` (padding) to space itself vertically inside the section.
   When the parent section has `.no-padding-y`, also zero those out so the
   visual spacing fully collapses. */
.section.cms-secondary-banner-container.no-padding-y .cms-secondary-banner-content > .secondary-banner-card {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* The inner banner card has `box-shadow: 0px 2px 20px 2px rgba(73,73,73,0.25)`,
   which extends ~24px outside its bounds. Without `no-padding-y`, the 32px
   margin gives the shadow room to render. With `no-padding-y` the margin is 0,
   so the shadow would be clipped by the section's `overflow: hidden`.
   Allow the section to render the shadow outside its box. The inner block
   keeps its own `overflow-hidden` (Tailwind) for the rounded image, so this
   doesn't break the rounded corners. */
.section.cms-secondary-banner-container.no-padding-y {
  overflow: visible !important;
}

/* Remove the rendered card's built-in margin/mx so banners fill the grid
   cell edge-to-edge, matching the alignment of surrounding content.
   `.secondary-banner-card` is the SecondaryBanner render root. It must NOT use
   the `.block` class: EDS's loadSection selects `div.block` and would try to
   load it as a block (/blocks/undefined/*). */
main > .section.cms-secondary-banner-container[class*="grid-"] .cms-secondary-banner-wrapper > .secondary-banner-card {
  margin: 0 !important;
  width: 100%;
  max-width: 100%;
}

/* Dark gradient overlay on the image so white text stands out
   (mimics the original linear-gradient mask from avianca.com). */
main > .section.cms-secondary-banner-container[class*="grid-"] .cms-secondary-banner-wrapper > .secondary-banner-card > div > div > div:first-child {
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.7) 100%);
}

.cms-secondary-banner-wrapper {
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cms-secondary-banner-wrapper > .cms-secondary-banner {
  width: 100%;
  max-width: 100%;
}



.cms-secondary-banner .cms-secondary-banner-content > div:first-child {
  width: auto;
  margin-inline: auto;
}

/* Full-cover mode (no condor): second line smaller, matching legacy avianca.com
   where <small> (first line) was 82% of the title size.
   We invert the logic: base is the smaller size, ::first-line is the larger. */
.cms-secondary-banner-wrapper .banner-title-scaled {
  font-size: 16px;
  line-height: 1.3;
}

.cms-secondary-banner-wrapper .banner-title-scaled::first-line {
  font-size: 20px;
}

@media (min-width: 1024px) {
  .cms-secondary-banner-wrapper .banner-title-scaled {
    font-size: 24px;
  }

  .cms-secondary-banner-wrapper .banner-title-scaled::first-line {
    font-size: 32px;
  }
}