@layer site-banner-components {

  /*
    Contratto strutturale: safe-zone e' il primo figlio vuoto, riservato alla
    leggibilita' dell'header. L'header e' pero' nel flusso prima del banner,
    quindi safe-zone non introduce spazio visibile.
  */
  site-banner {
    box-sizing: border-box;
    color: var(--site-banner-foreground, #fff);
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    min-block-size: var(--site-banner-block-size);
  }

  site-banner > safe-zone {
    display: block;
    min-block-size: 0;
    min-block-size: var(--site-banner-header-safe-block-size, 0);
    pointer-events: none;
    flex: 0 0 auto;
  }

  site-banner > :is(band, band-desktop, band-mobile) {
    box-sizing: border-box;
    display: block;
    inline-size: 100%;
    min-inline-size: 0;
    flex: 1 0 0;
  }

  /* L'altezza responsive misura l'intero Banner: safe-zone e band condividono lo spazio. */
  .site-banner--viewport-height.site-banner--templated > site-banner {
    display: flex;
    flex-direction: column;
    min-block-size: var(--site-banner-block-size);
  }

  .site-banner--viewport-height.site-banner--templated > site-banner > safe-zone {
    flex: 0 0 auto;
  }

  .site-banner--viewport-height.site-banner--templated > site-banner > :is(band, band-desktop, band-mobile) {
    flex: 1 0 0;
  }

  site-banner > band-desktop {
    display: none;
  }

  site-banner > band-mobile {
    display: block;
    background-size: contain !important;
  }

  site-banner > :is(band, band-desktop, band-mobile) .col-center {
    box-sizing: border-box;
    min-inline-size: 0;
  }

  site-banner .col-center {
    padding: 0 1rem;
  }

  site-banner a {
    color: inherit;
    text-decoration: none;

    &.cta {
      border: 1.5px solid var(--site-banner-foreground, #fff);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.5rem 1rem;
      border-radius: 0.5rem;
      font-weight: bold;
      font-size: 1.1em;

      &.inverse {
        background-color: var(--site-banner-foreground, #ffffff);
        color: var(--site-banner-background, #25245d);
      }
    }
  }

  @media (width > 50rem) {
    site-banner>band-desktop {
      display: block;
    }

    site-banner>band-mobile {
      display: none;
    }
  }
}