/* Home page sections sit 80px apart, as on faberpet.ro. */
.pbly .home-page .section { padding-block: var(--pbly-space-10); }

/* The last section's own padding is the gap above the footer here. */
.pbly .home-page + .site-footer { margin-top: 0; }

/* Section titles are a little larger here than on the product page, as on faberpet.ro
   ("Link-uri utile" and the popular-categories box keep the product page's size). */
.pbly .home-page .section-header__title {
  font-size: var(--pbly-font-size-xl-plus);
  line-height: var(--pbly-font-line-height-snug);
}

.pbly .home-page .useful-links .section-header__title {
  font-size: var(--pbly-text-heading-md-font-size);
  line-height: 1;
}

/* Hero: the Figma artwork behind the text, with a white wave along the bottom edge. */
.pbly .home-page .home-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 28.125rem;
  overflow: hidden;
  padding-block: 0;
  background: var(--pbly-color-palette-mint-bright) url("../../images/home/hero-desktop.jpg") center / cover no-repeat;
}

.pbly .home-hero__content {
  display: grid;
  justify-items: start;
  gap: var(--pbly-space-5);
  max-width: 31rem;
}

.pbly .home-hero__title {
  font-size: var(--pbly-font-size-display);
  font-weight: var(--pbly-font-weight-bold);
  line-height: var(--pbly-font-line-height-tight);
}

.pbly .home-hero__text { font-weight: var(--pbly-font-weight-medium); }

.pbly .home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pbly-space-3);
  margin-top: var(--pbly-space-3-5);
}

.pbly .home-hero__actions .pbly-btn {
  padding-inline: var(--pbly-space-4);
  line-height: 1;
}

.pbly .home-hero__partners {
  background: var(--pbly-color-palette-mint-bright);
  color: var(--pbly-color-palette-green-dark);
}

.pbly .home-hero__partners:hover { background: color-mix(in srgb, var(--pbly-color-palette-mint-bright) 97%, var(--pbly-color-palette-black)); }

.pbly .home-hero__wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: var(--pbly-space-4);
  fill: var(--pbly-color-background);
}

/* Popular categories: photo tiles with the name over a dark fade. */
.pbly .home-categories__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pbly-space-5);
}

.pbly .home-categories__tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 12.5rem;
  padding: var(--pbly-space-6);
  overflow: hidden;
  border-radius: var(--pbly-radius-xl);
  color: var(--pbly-color-palette-white);
  text-decoration: none;
}

.pbly .home-categories__tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pbly .home-categories__tile::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 50%, var(--pbly-color-palette-black));
  content: "";
  opacity: 0.75;
  transition: opacity 0.3s;
}

/* As on faberpet.ro, the fade almost disappears on hover. */
.pbly .home-categories__tile:hover::after { opacity: 0.1; }

.pbly .home-categories__name {
  position: relative;
  z-index: 1;
  font-size: var(--pbly-font-size-md-plus);
  font-weight: var(--pbly-font-weight-bold);
  line-height: var(--pbly-font-line-height-snug);
}

/* Tablets, as on faberpet.ro: 80px side margins on this page, the tall artwork under the text
   (faded out behind it, across the full width) and two tiles per row. */
@media (max-width: 64rem) {
  .pbly .home-page .wrapper { width: min(100% - 2 * var(--pbly-space-20), var(--pbly-layout-wrapper-max)); }
  .pbly .home-page .popular-categories > .wrapper { width: 100%; }
  .pbly .home-page .section.popular-categories { padding-block: 0 var(--pbly-space-10); }

  .pbly .home-page .home-hero {
    align-items: flex-start;
    min-height: 56.25rem;
    padding-top: var(--pbly-space-20);
    background-image: url("../../images/home/hero-tall.jpg");
    background-position: center bottom;
  }

  .pbly .home-hero__content {
    max-width: none;
    border-image: linear-gradient(var(--pbly-color-palette-mint-light) 75%, transparent) fill 0 / 0 / var(--pbly-space-20) 100vw calc(2 * var(--pbly-space-20));
  }
  .pbly .home-categories__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phones: a shorter hero and one tile per row. */
@media (max-width: 47.9375rem) {
  .pbly .home-page .wrapper { width: min(100% - 2 * var(--pbly-layout-wrapper-gutter), var(--pbly-layout-wrapper-max)); }
  .pbly .home-page .popular-categories > .wrapper { width: 100%; }

  .pbly .home-page .section.popular-categories,
  .pbly .home-page .section.shipping-info { padding-bottom: 0; }
  .pbly .home-page .shipping-info__card { padding: var(--pbly-space-5); }

  .pbly .home-page .home-hero {
    min-height: 35rem;
    padding-top: var(--pbly-space-10);
  }

  .pbly .home-hero__content {
    border-image: linear-gradient(var(--pbly-color-palette-mint-light) 70%, transparent) fill 0 / 0 / var(--pbly-space-10) 100vw calc(2 * var(--pbly-space-20));
  }

  .pbly .home-hero__title { font-size: var(--pbly-font-size-display-sm); }
  .pbly .home-categories__grid { grid-template-columns: minmax(0, 1fr); }
}