{"version":3,"file":"-emo2sVp.js","sources":["../../../../components/landing/HeroPanel.vue"],"sourcesContent":["<template>\n  <div\n    class=\"hero-landing\"\n    :class=\"[\n      {\n        [`bg-type-${blok.bgType}`]: blok.bgType,\n        [`bg-${blok.bgColor || blok.vertical}`]: !blok.bgColorCustom\n          ? blok.bgColor || blok.vertical\n          : false,\n        'no-panel': !blok.panel?.length,\n      },\n    ]\"\n    :style=\"{\n      backgroundColor: blok.bgColorCustom,\n    }\"\n  >\n    <GridContainer class=\"content-container\">\n      <div class=\"image-container\" v-if=\"viewport.isGreaterThan('lg')\">\n        <StoryblokImg :image=\"blok.image\" />\n      </div>\n      <GridItem\n        class=\"text-container\"\n        :size-md=\"blok.panel?.length ? 2 : 4\"\n        :size-lg=\"blok.panel?.length ? 6 : 10\"\n        :size-xl=\"blok.panel?.length ? 4 : 6\"\n      >\n        <LandingBreadcrumbs :color-type=\"blok.bgType\" v-if=\"blok.breadcrumbs\" />\n        <RichText class=\"category-title\" :text=\"blok.category\" />\n        <RichText class=\"hero-title\" :text=\"blok.title\" />\n      </GridItem>\n      <GridItem\n        :size-md=\"2\"\n        :offset-md=\"2\"\n        :offset-lg=\"7\"\n        :size-lg=\"5\"\n        :size-xl=\"4\"\n        :offset-xl=\"8\"\n        v-if=\"blok.panel?.length\"\n        id=\"hero-panel\"\n        class=\"panel\"\n      >\n        <slot name=\"panel\" />\n      </GridItem>\n      <GridItem\n        :size-md=\"blok.panel?.length ? 2 : 4\"\n        :size-lg=\"blok.panel?.length ? 6 : 10\"\n        :size-xl=\"blok.panel?.length ? 4 : 6\"\n        class=\"info-container\"\n        v-if=\"\n          blok.bulletList?.length || blok.buttons?.length || blok.googleRating\n        \"\n      >\n        <GoogleRating\n          :blok=\"blok.googleRating.content\"\n          v-if=\"blok.googleRating\"\n        />\n        <ul class=\"info-list\" v-if=\"blok.bulletList?.length\">\n          <li v-for=\"bullet in blok.bulletList\">\n            <StoryblokImg :image=\"bullet.image\" height=\"24\" width=\"24\" />\n            <RichText :text=\"bullet.text\" />\n          </li>\n        </ul>\n        <div class=\"btn-container\" v-if=\"blok.buttons?.length\">\n          <NavigationButton :blok=\"button\" v-for=\"button in blok.buttons\" />\n        </div>\n      </GridItem>\n    </GridContainer>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { GridContainer, GridItem } from \"cja-phoenix\";\nimport { HeroLandingStoryblok } from \"~/types/bloks\";\n\ndefineProps<{\n  blok: HeroLandingStoryblok;\n}>();\n\nconst viewport = useViewport();\n</script>\n\n<style lang=\"scss\" scoped>\n.hero-landing {\n  box-shadow: $box-shadow-m-inner-bottom;\n\n  .content-container {\n    padding-top: 32px;\n    padding-bottom: 32px;\n    position: relative;\n\n    @media screen and (min-width: $break-md-min) {\n      padding-top: 56px;\n      padding-bottom: 56px;\n      grid-template-rows: auto 1fr;\n    }\n  }\n\n  .image-container {\n    display: flex;\n    align-items: flex-end;\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    bottom: 0;\n    left: 0;\n    z-index: 0;\n\n    @media screen and (max-width: $break-lg-max) {\n      display: none;\n    }\n\n    img {\n      display: block;\n      margin: 0 auto;\n      height: 100%;\n      width: 100%;\n      object-fit: contain;\n      object-position: bottom;\n    }\n  }\n\n  .text-container {\n    margin: 0 auto 24px;\n    max-width: 360px;\n    z-index: 1;\n\n    @media screen and (min-width: $break-md-min) {\n      max-width: none;\n      margin: 0 0 24px;\n    }\n\n    .breadcrumbs {\n      margin-bottom: 16px;\n\n      @media screen and (min-width: $break-md-min) {\n        margin-bottom: 24px;\n      }\n    }\n\n    .category-title {\n      margin-bottom: 16px;\n\n      :deep(p),\n      :deep(h1) {\n        font-weight: 700;\n        font-size: 20px;\n        line-height: 24px;\n        margin: 0;\n      }\n    }\n\n    .hero-title {\n      :deep(h1),\n      :deep(h2) {\n        margin: 0;\n        font-weight: 800;\n        font-size: 26px;\n        line-height: 32px;\n\n        @media screen and (min-width: $break-lg-min) {\n          font-size: 32px;\n          line-height: 40px;\n        }\n\n        b {\n          font-weight: 800;\n          @include text-gradient-cja;\n          display: inline;\n        }\n      }\n    }\n  }\n\n  .panel {\n    z-index: 1;\n    display: flex;\n    align-items: center;\n\n    @media screen and (min-width: $break-md-min) {\n      grid-row: 1 / 3;\n    }\n  }\n\n  .info-container {\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    z-index: 1;\n    margin-top: 40px;\n\n    @media screen and (min-width: $break-md-min) {\n      grid-column-start: 1;\n      margin-top: 0;\n    }\n\n    .info-list {\n      display: flex;\n      flex-direction: column;\n      gap: 24px;\n      list-style: none;\n      padding: 0;\n      margin: 0 auto;\n      max-width: 360px;\n\n      @media screen and (min-width: $break-md-min) {\n        order: 1;\n        max-width: none;\n        margin: 0;\n      }\n\n      li {\n        display: flex;\n        align-items: flex-start;\n        gap: 8px;\n        font-weight: 700;\n        font-size: 16px;\n        line-height: 20px;\n\n        @media screen and (min-width: $break-md-min) {\n          font-size: 18px;\n          line-height: 22px;\n        }\n      }\n    }\n\n    .btn-container {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 16px;\n      margin: 24px auto 0;\n      max-width: 360px;\n\n      @media screen and (min-width: $break-md-min) {\n        order: 2;\n        max-width: none;\n        margin: 24px 0 0;\n      }\n\n      btn,\n      a {\n        width: 100%;\n\n        @media screen and (min-width: $break-md-min) {\n          width: auto;\n          min-width: 200px;\n        }\n      }\n    }\n\n    .google-rating {\n      margin-top: -16px;\n\n      @media screen and (max-width: $break-sm-max) {\n        max-width: 360px;\n        margin-left: auto;\n        margin-right: auto;\n      }\n\n      @media screen and (min-width: $break-md-min) {\n        order: 3;\n        margin-top: 60px;\n      }\n    }\n  }\n\n  &:not(.no-panel) {\n    .google-rating {\n      + .info-list,\n      + .btn-container {\n        @media screen and (max-width: $break-sm-max) {\n          margin-top: 24px;\n          border-top: 1px solid $light-grey;\n          padding-top: 24px;\n        }\n      }\n    }\n  }\n\n  &.no-panel {\n    .content-container {\n      row-gap: 24px;\n    }\n\n    .image-container {\n      img {\n        object-position: bottom right;\n      }\n    }\n\n    .text-container {\n      margin-bottom: 0;\n    }\n\n    .info-container {\n      margin-top: 0;\n\n      .btn-container {\n        margin-top: 0;\n      }\n\n      .info-list + .btn-container {\n        margin-top: 24px;\n      }\n\n      .google-rating {\n        @media screen and (max-width: $break-sm-max) {\n          order: 3;\n          margin-top: 24px;\n        }\n\n        @media screen and (min-width: $break-md-min) {\n          margin-top: 50px;\n        }\n      }\n    }\n  }\n\n  &.bg-type-dark {\n    .text-container,\n    .info-container {\n      color: $white;\n    }\n  }\n}\n</style>\n"],"names":["viewport","useViewport"],"mappings":"mdA8EA,MAAMA,EAAWC,EAAY"}