/* hero.css: ported 1:1 from foodforjoe.es CSS modules (hash suffixes removed). */

/* ── Hero ── */
.Hero_hero {
  --hero-beige:#f3ece0;
  position:relative;
  display:flow-root;
  margin-top:calc(-1 * var(--header-height, 0px));
  padding-top:var(--header-height,0);
  background-color:var(--hero-beige);
}

.Hero_hero:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:var(--header-height,0);
  background:linear-gradient(to bottom,var(--hero-beige),transparent);
  pointer-events:none;
}

@media (max-width:1199px) {
  .Hero_hero:after {
    content:"";
    display:block;
    aspect-ratio:960/320;
    background:url("../../../assets/images/hero/hero-mobile.jpg") 50%/cover no-repeat;
    background-image:-webkit-image-set(url("../../../assets/images/hero/hero-mobile.avif") type("image/avif"),url("../../../assets/images/hero/hero-mobile.jpg") type("image/jpeg"));
    background-image:image-set(url("../../../assets/images/hero/hero-mobile.avif") type("image/avif"),url("../../../assets/images/hero/hero-mobile.jpg") type("image/jpeg"));
  }
}

.Hero_title {
  margin-top:50px;
  margin-bottom:20px;
  text-align:center;
  line-height:1.04;
  font-size:35px;
}

.Hero_subtitle {
  max-width:200px;
  margin:0 auto;
}

.Hero_titleFirstLine {
  text-align:center;
  display:inline;
}

.Hero_titleSecondLine {
  text-align:center;
  display:inline-block;
  margin-top:-10px;
}

.Hero_petName {
  display:inline-block;
  color:var(--color-dark-yellow);
  transform:translateY(8px);
  overflow:visible;
  animation:Hero_fadeInFromLeft .9s cubic-bezier(.4,0,.2,1) 0s 1 normal;
}

@keyframes Hero_fadeInFromLeft {
  0% {
    -webkit-clip-path:polygon(-100% -20%,0 0,0 150%,0 150%);
    clip-path:polygon(-100% -20%,0 0,0 150%,0 150%);
    opacity:0;
    filter:blur(2px);
  }
  to {
    -webkit-clip-path:polygon(-60% -20%,100% 0,80% 150%,0 150%);
    clip-path:polygon(-60% -20%,100% 0,80% 150%,0 150%);
    opacity:1;
    filter:blur(0);
  }
}

.Hero_subtitle {
  text-align:center;
  margin-bottom:16px;
  font-size:15px;
  font-family:var(--font-family-serif-light);
  font-weight:200;
}

.Hero_subtitle br {
  display:none;
}

.Hero_cta {
  display:flex;
  justify-content:center;
  text-align:center;
  margin:0 auto 12px;
  width:-moz-fit-content;
  width:fit-content;
  flex-direction:column;
  row-gap:10px;
}

.Hero_cta button {
  display:block;
}

.Hero_petButtonsContainer {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background-color:var(--color-white);
  border-radius:8px;
  padding:20px;
  margin-top:10px;
  width:100%;
}

.Hero_heroBadge {
  margin-top:10px;
  text-decoration:none;
}

.Hero_petButtonsTitle {
  margin-bottom:10px;
  font-family: var(--font-family-serif-medium); font-variation-settings: var(--gp-medium-axes);
  font-size:24px;
}

.Hero_petButtons {
  display:flex;
  flex-direction:row;
  justify-content:center;
  column-gap:10px;
  row-gap:16px;
  flex-wrap:wrap;
  margin:5px 0;
}

.Hero_petButtons>* {
  flex:1 1;
}

.Hero_petButtons button {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 15px;
}

.Hero_buttonIcon {
  width:30px;
  height:auto;
  margin-right:9px;
}

.Hero_celebrateLink {
  display:block;
  margin-top:12px;
  text-align:center;
}

.Hero_specialOffer {
  display:block;
  width:100%;
  margin-bottom:18px;
  color:var(--color-green);
  font-family: var(--font-family-serif-medium); font-variation-settings: var(--gp-medium-axes);
  font-size:14px;
  font-style:normal;
  font-weight:400;
  line-height:21px;
  letter-spacing:.01em;
  text-align:center;
}

@media (min-width:1200px) {
  .Hero_hero {
    min-height:calc(600px + var(--header-height, 0px));
    max-height:calc(830px + var(--header-height, 0px));
    position:relative;
    background-image:url("../../../assets/images/hero/hero-desktop.jpg");
    background-image:-webkit-image-set(url("../../../assets/images/hero/hero-desktop.avif") type("image/avif") 1x,url("../../../assets/images/hero/hero-desktop.jpg") type("image/jpeg") 1x,url("../../../assets/images/hero/hero-desktop-2x.avif") type("image/avif") 2x,url("../../../assets/images/hero/hero-desktop-2x.jpg") type("image/jpeg") 2x);
    background-image:image-set(url("../../../assets/images/hero/hero-desktop.avif") type("image/avif") 1x,url("../../../assets/images/hero/hero-desktop.jpg") type("image/jpeg") 1x,url("../../../assets/images/hero/hero-desktop-2x.avif") type("image/avif") 2x,url("../../../assets/images/hero/hero-desktop-2x.jpg") type("image/jpeg") 2x);
    background-position:100%;
    background-size:min(100%,2300px) auto;
    background-repeat:no-repeat;
  }
}

@media (min-width:1200px) {
  .Hero_heroContent {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    position:relative;
    top:-50px;
    height:100%;
    z-index:1;
    min-height:750px;
  }
}

@media (min-width:1200px) {
  .Hero_celebrateLink {
    display:none;
  }
}

@media (min-width:1200px) {
  .Hero_title {
    font-size:62px;
    line-height:64px;
    margin-top:0;
    margin-bottom:37px;
    text-align:left;
    line-height:1;
    z-index:1;
    position:relative;
  }
}

@media (min-width:1200px) {
  .Hero_titleFirstLine,
  .Hero_titleSecondLine {
    margin-left:0;
    z-index:1;
    position:relative;
  }
}

@media (min-width:1200px) {
  .Hero_titleSecondLine {
    text-align:left;
  }
}

@media (min-width:1200px) {
  .Hero_petName {
    transform:translateZ(0);
    color:var(--color-dark-yellow);
    position:absolute;
    margin-top:-24px;
    margin-left:14px;
    z-index:1;
    width:-moz-fit-content;
    width:fit-content;
    min-width:300px;
    top:0;
    left:100%;
    text-align:left;
    animation-duration:2s;
  }
}

@media (min-width:1200px) {
  .Hero_subtitle {
    text-align:left;
    margin:0 0 16px;
    z-index:1;
    position:relative;
    width:calc(50% - 140px);
    min-width:500px;
    font-size:18px;
  }
}

@media (min-width:1200px) {
  .Hero_subtitle br {
    display:block;
  }
}

@media (min-width:1200px) {
  .Hero_cta {
    margin:0 0 15px;
    justify-content:flex-start;
    z-index:1;
    position:relative;
  }
}

@media (min-width:1200px) {
  .Hero_petButtonsTitle {
    font-size:34px;
  }
}

@media (min-width:1200px) {
  .Hero_petButtons {
    justify-content:flex-start;
  }
}

@media (min-width:1200px) {
  .Hero_specialOffer {
    text-align:center;
    margin-left:0;
    z-index:1;
    position:relative;
    width:228px;
    font-size:16px;
  }
}

@media (min-width:1200px) {
  .Hero_petButtonsContainer {
    padding:25px 30px 20px;
  }
}

@media (min-width:1200px) {
  .Hero_petButtons button {
    padding:0 20px;
  }
}