{"version":3,"file":"C7qpdrMH.js","sources":["../../../../storyblok/ProviderInfo.vue"],"sourcesContent":["<template>\n  <div class=\"provider-info\" :class=\"{ [`bg-${blok.bgColor}`]: blok.bgColor }\">\n    <GridContainer>\n      <GridItem :size-xl=\"10\" :offset-xl=\"1\" class=\"provider-info-container\">\n        <div class=\"text-container\">\n          <h2>{{ blok.title }}</h2>\n          <div class=\"text-wrapper\" :class=\"{ 'clamp-active': clampActive }\">\n            <RichText :text=\"blok.description\" />\n          </div>\n          <button\n            class=\"btn-read-more\"\n            @click=\"clampActive = false\"\n            v-if=\"clampActive\"\n          >\n            {{ t(\"read_more\") }}\n          </button>\n        </div>\n        <div class=\"image-container\">\n          <StoryblokImg :image=\"blok.image\" />\n        </div>\n      </GridItem>\n    </GridContainer>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { GridContainer, GridItem } from \"cja-phoenix\";\nimport { ProviderInfoStoryblok } from \"~/types/bloks\";\n\ndefineProps<{ blok: ProviderInfoStoryblok }>();\n\nconst { t } = useI18n();\n\nconst clampActive = ref(true);\n</script>\n\n<style lang=\"scss\" scoped>\n.provider-info {\n  padding: 60px 0;\n\n  .provider-info-container {\n    display: grid;\n    grid-template-rows: 100px auto;\n    gap: 32px;\n    justify-items: center;\n\n    @media screen and (min-width: $break-md-min) {\n      align-items: center;\n      grid-template-rows: auto;\n      grid-template-columns: 1fr 200px;\n      gap: 40px;\n    }\n  }\n\n  .image-container {\n    grid-area: 1 / 1 / 2 / 2;\n    border: 1px solid $light-grey;\n    background: $white;\n    border-radius: 8px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 24px 32px;\n\n    @media screen and (min-width: $break-md-min) {\n      grid-area: 1 / 2 / 2 / 3;\n    }\n\n    img {\n      display: block;\n      max-width: 100%;\n      max-height: 100%;\n    }\n  }\n\n  .text-container {\n    h2 {\n      font-size: 30px;\n      font-weight: 700;\n      @include text-gradient-dark-blue;\n      margin: 0 0 24px;\n    }\n\n    .text-wrapper {\n      margin-bottom: 16px;\n\n      &.clamp-active {\n        max-height: 96px;\n        overflow: hidden;\n      }\n\n      :deep(p) {\n        font-size: 16px;\n        line-height: 24px;\n\n        &:first-child {\n          margin-top: 0;\n        }\n\n        &:last-child {\n          margin-bottom: 0;\n        }\n      }\n    }\n\n    .btn-read-more {\n      color: $main-blue;\n      font-size: 16px;\n      line-height: 24px;\n      text-decoration-line: underline;\n      padding: 0;\n      border: none;\n      background: none;\n      cursor: pointer;\n      transition: all 0.2s ease-in-out;\n\n      &:hover {\n        text-decoration: none;\n        color: $dark-blue;\n      }\n    }\n  }\n}\n</style>\n\n<i18n lang=\"json\">\n{\n  \"pt\": {\n    \"read_more\": \"Ler mais\"\n  }\n}\n</i18n>\n"],"names":["t","useI18n","clampActive","ref"],"mappings":"4RA+BM,KAAA,CAAE,EAAAA,CAAE,EAAIC,EAAQ,EAEhBC,EAAcC,EAAI,EAAI"}