<template>
  <div class="newslettercta">
    <PageSection tone="brandreverse" content-size="default" padb="xs">
      <SectionTitle as="h1" tone="invert" pad="xs">
        NEWSLETTER
      </SectionTitle>

      <SectionContent pad="xs" class="newslettercta__content">
        <div class="newslettercta__content_text">
          <DsText as="p" tone="invert">
            Recevez l'actualité des concerts de l'Orchestre national d'Île-de-France par infolettre !
          </DsText>
        </div>
        <div class="newslettercta__button">
          <DsButton
            href="https://eb686efa.sibforms.com/serve/MUIFAP2a1WdNgM9e0cv4B5b_QwHC_QzCXtnwSoUEWllWVV1Kxq7vbzbRVWoIagXviq-jYQHuKv0-AN8cmEggeJnUds8C4VumwkC0dCTD0kQPVZ8nXWhXG5ABFo4EEys6OY-C_qQW4iUnWeq8cFA8X3dRaLj_q410BX_yvp6E8o5eOklPWsKkZnmXI1Qc31WqegQhTTkp_Z0Jhbg="
            target="_blank"
            rel="noopener noreferrer"
            textColor="invert"
            borderColor="invert"
          >
              Restez informé
          </DsButton>
        </div>

      </SectionContent>
    </PageSection>
  </div>
</template>

<script setup>
  import DsText from '@root/design-system/primitives/DsText.vue'
  import DsButton from '@root/design-system/primitives/DsButton.vue'
</script>

<style lang="scss">

  .newslettercta {
    margin-bottom: 30px;
  }

  .newslettercta__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 15px;
    column-gap: 25px;
    padding-right: 10px;

    .newslettercta__content_text {
      grid-column: 1;
    }
    .newslettercta__button {
      grid-column: 1;
      justify-self: center;
    }
    @media (min-width: 1000px) {
        .newslettercta__button {
            justify-self: center;
            margin-top: -10px;
        }
    }
  }
  @media (max-width: 300px) {
      .newslettercta__content {
          padding-left: calc(var(--sp-45) - 20px);
      }
  }
  @media (min-width: 500px) {
    .newslettercta__content {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      
      .newslettercta__button {
        grid-column: 2;
      }
    }
  }
</style>
