{"version":3,"file":"Bp60NdTA.js","sources":["../../../../node_modules/vue-socials/dist/esm/components/SReddit/SReddit.js","../../../../node_modules/vue-socials/dist/esm/components/STelegram/STelegram.js","../../../../components/blog/SocialLinks.vue","../../../../storyblok/blog/content/Post.vue"],"sourcesContent":["import { defineComponent } from 'vue';\nimport BaseSocials from '../../mixins/BaseSocial/BaseSocial.js';\nimport getSerialisedParams from '../../utils/getSerialisedParams.js';\n\n/**\n * Hey!\n *\n * SReddit component used for Reddit social network\n * @link https://www.reddit.com/\n */\n/**\n * Share parameters for link\n */\n\nvar SReddit = /* #__PURE__ */defineComponent({\n  name: 'SReddit',\n  mixins: [BaseSocials('Reddit', undefined, undefined, undefined, false)],\n  computed: {\n    networkURL: function networkURL() {\n      var BASE_URL = 'https://reddit.com/submit';\n      var shareOptions = this.shareOptions;\n      var url = shareOptions.url,\n          title = shareOptions.title,\n          text = shareOptions.text,\n          selftext = shareOptions.selftext;\n      var serialisedParams = getSerialisedParams({\n        url: url,\n        title: title,\n        text: text,\n        selftext: selftext\n      });\n      return \"\".concat(BASE_URL).concat(serialisedParams);\n    }\n  },\n  render: function render() {\n    return this.generateComponent(this.networkURL);\n  }\n});\n\nexport default SReddit;\n","import { defineComponent } from 'vue';\nimport BaseSocials from '../../mixins/BaseSocial/BaseSocial.js';\nimport getSerialisedParams from '../../utils/getSerialisedParams.js';\n\n/**\n * Hey!\n *\n * STelegram component used for Telegram social network\n * @link https://telegram.org/\n */\n/**\n * Share parameters for link\n * @link https://core.telegram.org/widgets/share#custom-buttons\n */\n\nvar STelegram = /* #__PURE__ */defineComponent({\n  name: 'STelegram',\n  mixins: [BaseSocials('Telegram')],\n  computed: {\n    networkURL: function networkURL() {\n      var BASE_URL = 'https://t.me/share/url';\n      var shareOptions = this.shareOptions;\n      var url = shareOptions.url,\n          text = shareOptions.text;\n      var serialisedParams = getSerialisedParams({\n        url: url,\n        text: text\n      });\n      return \"\".concat(BASE_URL).concat(serialisedParams);\n    }\n  },\n  render: function render() {\n    return this.generateComponent(this.networkURL);\n  }\n});\n\nexport default STelegram;\n","<template>\n  <div class=\"social-links\">\n    <SFacebook\n      v-bind=\"{ shareOptions: shareOptionsFacebook }\"\n      class=\"btn-social btn-facebook\"\n    >\n      <span class=\"m-cgg-icon--facebook\"></span>\n    </SFacebook>\n    <SWhatsApp\n      v-bind=\"{ shareOptions: shareOptionsWhatsapp }\"\n      class=\"btn-social btn-whatsapp\"\n    >\n      <span class=\"m-cgg-icon--whatsapp\"></span>\n    </SWhatsApp>\n    <SLinkedIn\n      v-bind=\"{ shareOptions: shareOptionsLinkedIn }\"\n      class=\"btn-social btn-linkedin\"\n    >\n      <span class=\"m-cgg-icon--linkedin\"></span>\n    </SLinkedIn>\n    <STwitter\n      v-bind=\"{ shareOptions: shareOptionsTwitter }\"\n      class=\"btn-social btn-twitter\"\n    >\n      <span class=\"m-cgg-icon--twitter\"></span>\n    </STwitter>\n    <STelegram\n      v-bind=\"{ shareOptions: shareOptionsTelegram }\"\n      class=\"btn-social btn-telegram\"\n    >\n      <span class=\"m-cgg-icon--telegram\"></span>\n    </STelegram>\n    <SReddit\n      v-bind=\"{ shareOptions: shareOptionsReddit }\"\n      class=\"btn-social btn-reddit\"\n    >\n      <span class=\"m-cgg-icon--reddit\"></span>\n    </SReddit>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  SFacebook,\n  SWhatsApp,\n  SLinkedIn,\n  STwitter,\n  STelegram,\n  SReddit,\n} from \"vue-socials\";\n\nconst props = defineProps<{\n  title: string;\n}>();\n\nconst { t } = useI18n();\n\nconst { path } = useRoute();\n\nconst shareOptionsFacebook = ref();\nconst shareOptionsWhatsapp = ref();\nconst shareOptionsLinkedIn = ref();\nconst shareOptionsTwitter = ref();\nconst shareOptionsTelegram = ref();\nconst shareOptionsReddit = ref();\n\nonMounted(() => {\n  const postUrl = location.origin + path;\n\n  shareOptionsFacebook.value = {\n    url: postUrl,\n    quote: t(\"shareOptions.facebook.quote\"),\n    hashtag: t(\"shareOptions.facebook.hashtag\"),\n  };\n\n  shareOptionsWhatsapp.value = {\n    text: t(\"shareOptions.whatsapp.text\", { url: postUrl }),\n  };\n\n  shareOptionsLinkedIn.value = {\n    url: postUrl,\n  };\n\n  shareOptionsTwitter.value = {\n    url: postUrl,\n    text: t(\"shareOptions.twitter.text\"),\n    hashtags: [\n      t(\"shareOptions.twitter.hashtag1\"),\n      t(\"shareOptions.twitter.hashtag2\"),\n    ],\n    via: \"ComparaJá.pt\",\n  };\n\n  shareOptionsTelegram.value = {\n    url: postUrl,\n    text: t(\"shareOptions.telegram.text\"),\n  };\n\n  shareOptionsReddit.value = {\n    url: postUrl,\n    title: props.title,\n    text: t(\"shareOptions.reddit.text\"),\n  };\n});\n</script>\n\n<style lang=\"scss\" scoped>\n.social-links {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: 16px;\n\n  .btn-social {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    width: 32px;\n    height: 32px;\n    color: $white;\n    background: $black;\n    border-radius: 50%;\n\n    &:hover {\n      text-decoration: none;\n    }\n  }\n\n  .btn-facebook {\n    background: #1877f2;\n  }\n\n  .btn-whatsapp {\n    background: linear-gradient(0deg, #20b038 0%, #60d66a 100%);\n  }\n\n  .btn-linkedin {\n    background: #0a66c2;\n  }\n\n  .btn-twitter {\n    background: #000;\n  }\n\n  .btn-telegram {\n    background: #2aabee;\n  }\n\n  .btn-reddit {\n    background: #ff4500;\n  }\n}\n</style>\n\n<i18n lang=\"json\">\n{\n  \"pt\": {\n    \"shareOptions\": {\n      \"facebook\": {\n        \"quote\": \"Vejam este artigo da ComparaJá\",\n        \"hashtag\": \"#comparaja #tempoedinheiro\"\n      },\n      \"whatsapp\": {\n        \"text\": \"Vi este artigo da ComparaJá {url}\"\n      },\n      \"twitter\": {\n        \"text\": \"Vejam este artigo da ComparaJá\",\n        \"hashtag1\": \"#comparaja\",\n        \"hashtag2\": \"#tempoedinheiro\"\n      },\n      \"telegram\": {\n        \"text\": \"Vi este artigo da ComparaJá\"\n      },\n      \"reddit\": {\n        \"text\": \"Acho este artigo da ComparaJá relevante para aqui\"\n      }\n    }\n  }\n}\n</i18n>\n","<template>\n  <GridContainer class=\"blog-post-container\" v-if=\"blok && story\">\n    <GridItem :size-xl=\"9\" ref=\"postWrapper\">\n      <div class=\"category-container\">\n        <NuxtLink\n          :href=\"`/blog/temas?category=${post.category}`\"\n          class=\"category\"\n          >{{ post.category }}</NuxtLink\n        >\n      </div>\n      <h1>{{ post.title }}</h1>\n      <div class=\"post-details\">\n        <div class=\"worker-info\">\n          <div class=\"specialist\" v-if=\"specialist\">\n            <StoryblokImg\n              :image=\"specialist.content.image\"\n              width=\"24\"\n              height=\"24\"\n            />\n            {{ t(\"article.author.specialist\") }}\n            <NuxtLink :href=\"`/${specialist.full_slug}`\">\n              {{ specialist.content.name }}\n            </NuxtLink>\n          </div>\n          <div class=\"author\">\n            <StoryblokImg\n              :image=\"author.content.image\"\n              width=\"24\"\n              height=\"24\"\n            />\n            {{ t(\"article.author.editor\") }}\n            <NuxtLink :href=\"`/${author.full_slug}`\">\n              {{ author.content.name }}\n            </NuxtLink>\n          </div>\n        </div>\n        <div class=\"post-info\">\n          <div class=\"read-time\">\n            <span class=\"m-cgg-icon--time\"></span>\n            {{ getEstimatedReadTime(post.body) }}\n          </div>\n          <div class=\"publish-date\" v-if=\"story.first_published_at\">\n            <span class=\"m-cgg-icon--datepicker\"></span>\n            {{ displayDate(story.first_published_at) }}\n          </div>\n        </div>\n      </div>\n      <div class=\"post-excerpt\">\n        <RichText :text=\"post.excerpt\" />\n      </div>\n      <div class=\"topics-btn-container\">\n        <button @click=\"topicsModal.openModal()\">\n          {{ t(\"article.btn.topics\") }}\n          <span class=\"m-cgg-icon--chevron-right\"></span>\n        </button>\n        <Modal ref=\"topicsModal\" v-if=\"topicList?.length\">\n          <template #header>{{ t(\"modal.title\") }}</template>\n          <template #body>\n            <div class=\"topics-modal-content\">\n              <div class=\"topics-container\">\n                <div class=\"subtitle\">\n                  {{ t(\"modal.subtitle\") }}\n                </div>\n                <nav>\n                  <ul>\n                    <li v-for=\"topic in topicList\">\n                      <NuxtLink\n                        :href=\"topic.href\"\n                        class=\"topic\"\n                        @click.prevent=\"smoothScroll\"\n                      >\n                        {{ topic.text }}\n                        <span class=\"m-cgg-icon--chevron-right\"></span>\n                      </NuxtLink>\n                    </li>\n                  </ul>\n                </nav>\n              </div>\n            </div>\n          </template>\n        </Modal>\n      </div>\n      <div class=\"post-image\">\n        <StoryblokImg\n          v-if=\"post.featuredImage\"\n          :image=\"post.featuredImage\"\n          width=\"940\"\n          height=\"230\"\n        />\n      </div>\n      <div class=\"tag-list\">\n        <span class=\"title\">{{ t(\"article.tags\") }}:</span>\n        <Scaffold v-for=\"tag in story.tag_list.filter((t) => t != 'Rubrica')\">\n          <NuxtLink class=\"tag-link\" :href=\"`/blog/pesquisa?tag=${tag}`\">\n            {{ tag }}\n          </NuxtLink>\n        </Scaffold>\n      </div>\n      <NewsletterSidebar class=\"newsletter-signup-post\" />\n      <div\n        ref=\"postBodyContainer\"\n        class=\"post-body-container\"\n        :class=\"{ 'clamp-active': clampActive }\"\n      >\n        <div class=\"post-body-wrapper\" ref=\"postBodyWrapper\">\n          <RichText :text=\"post.body\" />\n        </div>\n      </div>\n      <div class=\"continue-container\" v-if=\"clampActive\">\n        <CjaButton\n          :color=\"'blue'\"\n          :icon=\"'m-cgg-icon--chevron-down'\"\n          @click=\"disableClamp\"\n          >{{ t(\"article.btn.clamp\") }}</CjaButton\n        >\n      </div>\n      <hr />\n      <div class=\"post-bottom\">\n        <div class=\"social-links-container\">\n          <h3>{{ t(\"social-links.title\") }}</h3>\n          <BlogSocialLinks :title=\"post.title\" />\n        </div>\n        <div class=\"author-container\">\n          <div class=\"author-info\">\n            <div class=\"image-container\">\n              <StoryblokImg\n                :image=\"(specialist || author).content.image\"\n                width=\"44\"\n                height=\"44\"\n              />\n            </div>\n            <div class=\"title-container\">\n              {{ (specialist || author).content.name }}\n            </div>\n            <div class=\"role-container\">\n              {{ (specialist || author).content.role }}\n            </div>\n          </div>\n          <div class=\"btn-container\">\n            <CjaButton\n              :type=\"'tertiary'\"\n              :icon=\"'m-cgg-icon--chevron-right'\"\n              :href=\"`/${(specialist || author).full_slug}`\"\n              :alt-anchor=\"NuxtLink\"\n            >\n              {{ t(\"author.btn\") }}\n            </CjaButton>\n          </div>\n        </div>\n      </div>\n      <div class=\"related-container\" v-if=\"relatedPosts?.length\">\n        <div class=\"header-container\">\n          <h3>{{ t(\"related-posts.title\") }}</h3>\n        </div>\n        <div class=\"related-wrapper\">\n          <PostPreview v-for=\"post in relatedPosts\" :post=\"post\" />\n        </div>\n      </div>\n    </GridItem>\n    <GridItem class=\"sidebar\" :size-xl=\"3\">\n      <FixedContainer\n        :position=\"{ top: `${sidebarTopOffset}px`, bottom: '32px' }\"\n        :size=\"{ height: sidebarHeight }\"\n        :scroll-threshold=\"-sidebarTopOffset\"\n        :scroll-limit-el=\"postWrapper?.$el\"\n      >\n        <div class=\"sidebar-wrapper\">\n          <NewsletterSidebar\n            ref=\"sidebarNewsletter\"\n            v-if=\"post.sidebarType == 'newsletter'\"\n          />\n          <BannerSidebar\n            :blok=\"sidebarBannerData\"\n            ref=\"sidebarBanner\"\n            v-else-if=\"\n              post.sidebarType == 'category-banner' && sidebarBannerData\n            \"\n          />\n          <div\n            class=\"topics-container\"\n            v-if=\"topicList?.length\"\n            :style=\"{ maxHeight: topicsMaxHeight }\"\n          >\n            <div class=\"title\">{{ t(\"topics.title\") }}</div>\n            <div class=\"topics-wrapper\">\n              <nav>\n                <NuxtLink\n                  :href=\"topic.href\"\n                  class=\"topic\"\n                  :class=\"{ active: activeTopic == topic.href }\"\n                  @click.prevent=\"smoothScroll\"\n                  v-for=\"topic in topicList\"\n                >\n                  {{ topic.text }}\n                </NuxtLink>\n              </nav>\n            </div>\n          </div>\n        </div>\n      </FixedContainer>\n    </GridItem>\n  </GridContainer>\n  <Transition name=\"fade\">\n    <div class=\"scroll-progress\" v-if=\"scrollProgressVisible\">\n      <div class=\"progress\" :style=\"{ width: `${scrollProgress}%` }\"></div>\n    </div>\n  </Transition>\n</template>\n\n<script setup lang=\"ts\">\nimport { NuxtLink } from \"#components\";\nimport {\n  CjaButton,\n  FixedContainer,\n  GridContainer,\n  GridItem,\n  Modal,\n  Scaffold,\n} from \"cja-phoenix\";\nimport { getEstimatedReadTime } from \"@/utils/getEstimatedReadTime\";\nimport { PostStoryblok } from \"~/types/bloks\";\nimport { useRelatedPosts } from \"~/composables/storyblok/useRelatedPosts\";\n\nconst { blok: post, story } = defineProps<{\n  blok: PostStoryblok;\n  story: any;\n}>();\n\nconst { t } = useI18n();\nconst route = useRoute();\nconst { storyblokVersion, siteURL } = useRuntimeConfig().public;\n\nconst author = post.author;\nconst specialist = post.specialist;\n\nconst clampActive = ref(true);\nconst topicsModal = ref();\nconst postWrapper = ref();\nconst postBodyContainer = ref();\nconst postBodyWrapper = ref();\nconst sidebarNewsletter = ref();\nconst sidebarBanner = ref();\n\nconst sidebarBannerData =\n  post.sidebarType == \"category-banner\"\n    ? await useStoryblokApi()\n        .get(\"cdn/stories\", {\n          version: storyblokVersion as \"published\" | \"draft\",\n          content_type: \"blog-banner\",\n          filter_query: {\n            category: {\n              like: post.category,\n            },\n          },\n        })\n        .then((d) => d.data.stories[0].content)\n    : undefined;\n\nconst topicList = computed(() =>\n  post.body.content\n    ?.filter((c: any) => c.type == \"heading\" && c.attrs.level == 2 && c.content)\n    .map((h: any, i: number) => ({\n      text: h.content?.map((c: any) => c.text).join(\"\"),\n      href: `#heading-${i + 1}`,\n    }))\n);\n\nconst topicPositions: Ref<{ id: string; position: number }[]> = ref([]);\nconst activeTopic = ref();\n\nconst initTopics = () => {\n  const headingList = postBodyWrapper.value.querySelectorAll(\n    \".post-body-container h2\"\n  );\n\n  for (let i = 0; i < headingList.length; i++) {\n    const el = headingList[i];\n\n    el.id = `heading-${i + 1}`;\n    topicPositions.value.push({\n      id: el.id,\n      position: el.offsetTop,\n    });\n  }\n};\n\nconst topicsMaxHeight = ref();\n\nconst sidebarTopOffset = ref();\nconst sidebarHeight = ref();\n\nconst scrollProgress = ref();\nconst scrollProgressVisible = ref();\n\nconst checkScrollProgress = () => {\n  const scrollYBottom = window.scrollY + window.innerHeight;\n\n  const postTop = postBodyContainer.value.offsetTop;\n  const postBottom = postTop + postBodyContainer.value.offsetHeight;\n  const postHeight = postBodyWrapper.value.offsetHeight;\n\n  const progressTop = window.scrollY - postTop;\n  const progressBottom = scrollYBottom - postTop;\n\n  if (scrollYBottom > postTop && scrollYBottom < postBottom) {\n    scrollProgress.value = (progressBottom * 100) / postHeight;\n    scrollProgressVisible.value = true;\n  } else {\n    scrollProgressVisible.value = false;\n    activeTopic.value = null;\n  }\n\n  if (window.scrollY < postBottom) {\n    const closestTopicPosition = topicPositions.value\n      .map((t) => t.position)\n      .reduce((prev, curr) =>\n        Math.abs(curr - progressTop) < Math.abs(prev - progressTop)\n          ? curr\n          : prev\n      );\n\n    activeTopic.value = `#${\n      topicPositions.value.find((t) => t.position == closestTopicPosition)?.id\n    }`;\n  }\n};\n\nconst displayDate = (targetDate: Date) => {\n  const date = new Date(targetDate);\n\n  const month = date.toLocaleString(\"pt\", { month: \"short\" }).split(\".\")[0];\n\n  return `${date.getDate()} ${month}, ${date.getFullYear()}`;\n};\n\nconst disableClamp = () => {\n  clampActive.value = false;\n\n  window.requestAnimationFrame(() => {\n    checkScrollProgress();\n  });\n};\n\nconst smoothScroll = (e: Event) => {\n  disableClamp();\n  // @ts-ignore\n  const scrollTarget = document.querySelector(e.target.getAttribute(\"href\"));\n  const sidebarTopOffset = (\n    document.querySelector(\"#page-header\") as HTMLElement\n  ).offsetHeight;\n\n  if (topicsModal.value?.active) {\n    topicsModal.value.closeModal();\n  }\n\n  window.requestAnimationFrame(() => {\n    window.scrollTo({\n      top: scrollTarget.offsetTop - sidebarTopOffset - 16,\n      behavior: \"smooth\",\n    });\n  });\n};\n\nconst { posts: relatedPosts } = useRelatedPosts(post.category, story.id);\n\nconst setTopicsHeight = () => {\n  window.requestAnimationFrame(() => {\n    topicsMaxHeight.value = `${\n      parseInt(sidebarHeight.value) -\n      (sidebarNewsletter.value?.$el.clientHeight ||\n        sidebarBanner.value?.$el.clientHeight) -\n      24\n    }px`;\n  });\n};\n\nwatch(\n  () => sidebarNewsletter.value?.active,\n  () => {\n    setTopicsHeight();\n  }\n);\n\nonMounted(() => {\n  sidebarTopOffset.value =\n    (document.querySelector(\"#page-header\")\n      ? (document.querySelector(\"#page-header\") as HTMLElement).clientHeight\n      : 0) + 48;\n  sidebarHeight.value = `${window.innerHeight - sidebarTopOffset.value - 32}px`;\n\n  initTopics();\n  setTopicsHeight();\n  window.addEventListener(\"scroll\", checkScrollProgress);\n});\n\nonUnmounted(() => {\n  window.removeEventListener(\"scroll\", checkScrollProgress);\n});\n\nuseJsonld({\n  \"@context\": \"https://schema.org\",\n  \"@type\": post.postType == \"news\" ? \"NewsArticle\" : \"Article\",\n  headline: post.title,\n  description: extractRichText(post.excerpt),\n  timeRequired: getEstimatedReadTime(post.body, true),\n  datePublished: story.first_published_at,\n  image: post.featuredImage.filename as string,\n  publisher: {\n    \"@type\": \"Organization\",\n    name: \"ComparaJá.pt\",\n    url: siteURL as string,\n    logo: \"https://a.storypost.com/f/223704/125x26/bb79b70cf7/cpj_logo.svg\",\n  },\n  mainEntityOfPage: `https://www.comparaja.pt${route.fullPath}`,\n  author: [\n    {\n      \"@type\": \"Person\",\n      name: author.content.name,\n      url: `${siteURL}/${author.full_slug}`,\n      image: author.content.image.filename,\n    },\n    specialist && {\n      \"@type\": \"Person\",\n      name: specialist.content.name,\n      url: `${siteURL}/${specialist.full_slug}`,\n      image: specialist.content.image.filename,\n    },\n  ],\n});\n</script>\n\n<style lang=\"scss\" scoped>\n.blog-post-container {\n  padding-top: 48px;\n  padding-bottom: 48px;\n}\n\n.category-container {\n  display: flex;\n  justify-content: center;\n\n  .category {\n    padding: 4px 16px;\n    border-radius: 16px;\n    background: $extra-light-blue;\n    color: $main-blue;\n    font-size: 16px;\n    line-height: 20px;\n    font-weight: 300;\n    transition: all 0.3s ease-in-out;\n\n    &:hover {\n      text-decoration: none;\n      background-color: $main-blue;\n      color: $white;\n    }\n  }\n}\n\nh1 {\n  font-size: 24px;\n  line-height: 30px;\n  margin-bottom: 24px;\n  font-weight: 800;\n\n  @media screen and (min-width: $break-md-min) {\n    text-align: center;\n  }\n\n  @media screen and (min-width: $break-lg-min) {\n    font-size: 30px;\n    line-height: 36px;\n  }\n}\n\n.post-details {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-bottom: 24px;\n\n  @media screen and (min-width: $break-md-min) {\n    flex-direction: row;\n    justify-content: center;\n    gap: 16px;\n  }\n\n  @media screen and (min-width: $break-lg-min) {\n    gap: 24px;\n  }\n\n  .worker-info {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    flex-wrap: wrap;\n    gap: 4px;\n\n    @media screen and (min-width: $break-xs-min) {\n      gap: 16px;\n      justify-content: flex-start;\n    }\n\n    @media screen and (min-width: $break-md-min) {\n      justify-content: center;\n    }\n\n    @media screen and (min-width: $break-lg-min) {\n      gap: 24px;\n    }\n\n    > div:not(:first-child) {\n      @media screen and (min-width: $break-xs-min) {\n        border-left: 1px solid $blue-grey;\n        padding-left: 16px;\n      }\n\n      @media screen and (min-width: $break-lg-min) {\n        padding-left: 24px;\n      }\n    }\n  }\n\n  .post-info {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    gap: 8px;\n\n    @media screen and (min-width: $break-xs-min) {\n      justify-content: flex-start;\n      gap: 16px;\n    }\n\n    @media screen and (min-width: $break-md-min) {\n      border-left: 1px solid $blue-grey;\n      padding-left: 16px;\n      justify-content: center;\n    }\n\n    @media screen and (min-width: $break-lg-min) {\n      padding-left: 24px;\n      gap: 24px;\n    }\n\n    > div:not(:first-child) {\n      @media screen and (min-width: $break-xs-min) {\n        border-left: 1px solid $blue-grey;\n        padding-left: 16px;\n      }\n\n      @media screen and (min-width: $break-lg-min) {\n        padding-left: 24px;\n      }\n    }\n  }\n\n  .author,\n  .specialist {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    line-height: 18px;\n\n    @media screen and (max-width: $break-xs-min) {\n      line-height: 24px;\n    }\n\n    img {\n      overflow: hidden;\n      border-radius: 50%;\n\n      @media screen and (max-width: $break-sm-max) {\n        display: none;\n      }\n    }\n\n    a {\n      color: $main-blue;\n      transition: all 0.3s ease-in-out;\n\n      &:hover {\n        color: $dark-blue;\n        text-decoration: none;\n      }\n    }\n  }\n\n  .publish-date,\n  .read-time {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    line-height: 24px;\n    color: $dark-blue;\n\n    span {\n      font-size: 20px;\n    }\n  }\n\n  .publish-date {\n    text-transform: capitalize;\n  }\n}\n\n.post-excerpt {\n  margin-bottom: 32px;\n\n  :deep(p) {\n    line-height: 150%;\n  }\n}\n\n.topics-btn-container {\n  display: flex;\n  justify-content: center;\n  margin-bottom: 32px;\n\n  button {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 16px;\n    background: $white;\n    padding: 24px 30px;\n    color: $dark-blue;\n    font-size: 16px;\n    font-weight: 700;\n    line-height: 24px;\n    border-radius: 16px;\n    box-shadow: $box-shadow-s;\n    outline: none;\n    border: none;\n    width: 100%;\n\n    @media screen and (min-width: $break-xs-min) {\n      width: auto;\n    }\n\n    span {\n      font-weight: 700;\n    }\n  }\n\n  @media screen and (min-width: $break-xl-min) {\n    display: none;\n  }\n}\n\n.post-image {\n  border-radius: 16px;\n  overflow: hidden;\n\n  img {\n    display: block;\n    width: 100%;\n    object-fit: cover;\n  }\n}\n\n.tag-list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  margin: 16px 0 32px;\n  font-size: 16px;\n  line-height: 20px;\n\n  @media screen and (min-width: $break-md-min) {\n    justify-content: center;\n  }\n\n  .title {\n    font-weight: 700;\n  }\n\n  .tag-link {\n    color: $main-blue;\n    cursor: pointer;\n\n    &:hover {\n      text-decoration: none;\n    }\n\n    &:not(:nth-child(2)) {\n      border-left: 1px solid $blue-grey;\n      padding-left: 8px;\n    }\n  }\n}\n\n.post-body-container {\n  margin: 32px 0 40px;\n\n  &.clamp-active {\n    position: relative;\n    max-height: 100vh;\n    overflow: hidden;\n\n    &:after {\n      content: \"\";\n      position: absolute;\n      left: 0;\n      bottom: 0;\n      width: 100%;\n      height: 300px;\n      background: linear-gradient(180deg, transparent, $white);\n    }\n  }\n\n  .post-body-wrapper {\n    :deep(a:not(.cja-btn)) {\n      color: inherit;\n      text-decoration: underline;\n    }\n\n    :deep(h2) {\n      margin-top: 40px;\n    }\n\n    :deep(h3) {\n      margin-top: 30px;\n    }\n\n    :deep(img) {\n      max-width: 100%;\n      display: block;\n      margin: 16px 0;\n    }\n\n    :deep(p) {\n      line-height: 150%;\n    }\n\n    :deep(.embed-container) {\n      margin: 48px 0;\n    }\n  }\n}\n\nhr {\n  margin: 48px 0;\n  background-color: $light-grey;\n  height: 1px;\n  border: none;\n}\n\n.post-bottom {\n  display: grid;\n\n  @media screen and (min-width: $break-lg-min) {\n    grid-template-columns: 1fr 1fr;\n  }\n}\n\n.author-container {\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  align-items: center;\n  padding: 24px 30px;\n  max-width: 570px;\n  margin: 0 auto 32px;\n  border-radius: 16px;\n  background: $white;\n  box-shadow: $box-shadow-s;\n\n  .author-info {\n    display: grid;\n    grid-template-columns: 50px 1fr;\n    grid-template-rows: repeat(2, min-content);\n    column-gap: 12px;\n\n    .image-container {\n      grid-area: 1 / 1 / 3 / 2;\n      background: $gradient-cja-1;\n      border-radius: 50%;\n      overflow: hidden;\n      width: 50px;\n      height: 50px;\n      padding: 3px;\n\n      img {\n        width: 44px;\n        height: 44px;\n        border-radius: 50%;\n      }\n    }\n\n    .title-container {\n      grid-area: 1 / 2 / 2 / 3;\n      font-size: 20px;\n      font-weight: 700;\n      line-height: 26px;\n    }\n\n    .role-container {\n      grid-area: 2 / 2 / 3 / 3;\n      color: $blue-grey;\n      font-size: 16px;\n      line-height: 22px;\n    }\n  }\n}\n\n.related-container {\n  .header-container {\n    h3 {\n      margin: 0 0 32px;\n      @include blog-header;\n    }\n  }\n\n  .related-wrapper {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 32px 24px;\n\n    @media screen and (min-width: $break-md-min) and (max-width: $break-md-max) {\n      display: flex;\n      flex-wrap: wrap;\n      justify-content: center;\n    }\n\n    @media screen and (min-width: $break-lg-min) {\n      grid-template-columns: repeat(3, 1fr);\n      max-width: none;\n    }\n\n    .post-preview {\n      @media screen and (min-width: $break-md-min) and (max-width: $break-md-max) {\n        flex-basis: calc(50% - 12px);\n      }\n    }\n  }\n}\n\n.social-links-container {\n  margin-bottom: 32px;\n\n  h3 {\n    font-size: 20px;\n    line-height: 28px;\n    text-align: center;\n    margin: 0 0 24px;\n  }\n}\n\n.continue-container {\n  display: flex;\n  justify-content: center;\n}\n\n.newsletter-signup-post {\n  @media screen and (min-width: $break-xl-min) {\n    display: none;\n  }\n}\n\n.sidebar {\n  @media screen and (max-width: $break-lg-max) {\n    display: none;\n  }\n\n  .sidebar-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n  }\n\n  .topics-container {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n    border-radius: 16px;\n    border: 1px solid $light-grey;\n    background: $white;\n    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);\n    padding: 24px;\n    max-height: calc(100vh - 283px);\n\n    .topics-wrapper {\n      flex-grow: 1;\n      overflow-y: auto;\n    }\n  }\n}\n\n.topics-container {\n  .title {\n    font-size: 20px;\n    line-height: 26px;\n    font-weight: 800;\n  }\n\n  .subtitle {\n    color: $blue-grey;\n    font-size: 16px;\n    line-height: 24px;\n    margin-bottom: 16px;\n  }\n\n  nav {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n\n    .topic {\n      display: flex;\n      flex-direction: row;\n      justify-content: space-between;\n      gap: 12px;\n      align-items: center;\n      font-size: 16px;\n      line-height: 24px;\n      color: inherit;\n      transition: all 0.2s ease-in-out;\n\n      &:hover {\n        color: $main-blue;\n        text-decoration: none;\n      }\n\n      &.active {\n        color: $main-blue;\n        font-weight: 700;\n      }\n    }\n  }\n}\n\n.topics-modal-content {\n  ul {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n\n    li {\n      padding: 16px 0;\n      border-top: 1px solid $extra-light-blue;\n    }\n  }\n}\n\n.scroll-progress {\n  position: fixed;\n  top: 60px;\n  width: 100%;\n\n  .progress {\n    height: 5px;\n    background: linear-gradient(90deg, $main-blue, $bright-green);\n  }\n\n  &.fade-enter-active,\n  &.fade-leave-active {\n    transition: all 0.3s ease-in-out;\n  }\n\n  &.fade-enter-from,\n  &.fade-leave-to {\n    opacity: 0;\n  }\n\n  &.fade-enter-to,\n  &.fade-leave-from {\n    opacity: 1;\n  }\n}\n\n.metadata-info {\n  display: none;\n}\n</style>\n\n<i18n lang=\"json\">\n{\n  \"pt\": {\n    \"article\": {\n      \"author\": {\n        \"editor\": \"Editor:\",\n        \"specialist\": \"Especialista:\"\n      },\n      \"tags\": \"Tags\",\n      \"btn\": {\n        \"topics\": \"Ver tópicos do artigo\",\n        \"clamp\": \"Continuar a ler\"\n      }\n    },\n    \"related-posts\": {\n      \"title\": \"Artigos relacionados\"\n    },\n    \"social-links\": {\n      \"title\": \"Partilha o artigo com quem mais gostas!\"\n    },\n    \"author\": {\n      \"btn\": \"Ver mais artigos do autor\"\n    },\n    \"topics\": {\n      \"title\": \"Tópicos do artigo\"\n    },\n    \"modal\": {\n      \"title\": \"Tópicos do artigo\",\n      \"subtitle\": \"Seleciona o tópico que pretendes ler\"\n    }\n  }\n}\n</i18n>\n"],"names":["SReddit","defineComponent","BaseSocials","BASE_URL","shareOptions","url","title","text","selftext","serialisedParams","getSerialisedParams","STelegram","props","__props","t","useI18n","path","useRoute","shareOptionsFacebook","ref","shareOptionsWhatsapp","shareOptionsLinkedIn","shareOptionsTwitter","shareOptionsTelegram","shareOptionsReddit","onMounted","postUrl","route","storyblokVersion","siteURL","useRuntimeConfig","author","specialist","clampActive","topicsModal","postWrapper","postBodyContainer","postBodyWrapper","sidebarNewsletter","sidebarBanner","sidebarBannerData","__temp","__restore","_withAsyncContext","useStoryblokApi","d","topicList","computed","_a","c","h","i","topicPositions","activeTopic","initTopics","headingList","el","topicsMaxHeight","sidebarTopOffset","sidebarHeight","scrollProgress","scrollProgressVisible","checkScrollProgress","scrollYBottom","postTop","postBottom","postHeight","progressTop","progressBottom","closestTopicPosition","prev","curr","displayDate","targetDate","date","month","disableClamp","smoothScroll","e","scrollTarget","relatedPosts","useRelatedPosts","setTopicsHeight","_b","watch","onUnmounted","useJsonld","extractRichText","getEstimatedReadTime"],"mappings":"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","x_google_ignoreList":[0,1]}