/* Page hero: how a page of the shop's website opens (ShopPage) and the
   blog's index — its title large in the heading face, a few words, and the
   page's picture below. It follows the style's home hero (looks.css):
   split      the picture beside the words from a tablet's width
   typographic the title larger still, the picture smaller
   minimal    the title at a section's size */
.page-hero {
  display: grid;
  gap: var(--space-m-l);
  padding-block-start: var(--space-s-m);
}

.page-hero__text {
  --flow-space: var(--space-s);

  max-inline-size: var(--column-content);
}

.page-hero__title {
  font-family: var(--font-display);
  font-size: calc(var(--step-6) * var(--display-scale, 1));
  font-size-adjust: var(--font-display-adjust);
  font-weight: var(--font-display-weight);
  letter-spacing: calc(var(--font-display-tracking) + var(--heading-case-tracking, 0em));
  line-height: var(--leading-flat);
  overflow-wrap: break-word;
  text-transform: var(--heading-case, none);
  text-wrap: balance;
}

.page-hero__intro {
  color: var(--color-muted);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  max-inline-size: var(--measure);
  text-wrap: pretty;
}

.page-hero__picture {
  aspect-ratio: 21 / 9;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  inline-size: 100%;
  object-fit: cover;
}

@media (max-width: 40rem) {
  .page-hero__picture {
    aspect-ratio: 4 / 3;
  }
}

@media (min-width: 48rem) {
  [data-look-home-hero="split"] .page-hero[data-picture="true"] {
    align-items: center;
    grid-template-columns: 1fr 1fr;

    .page-hero__picture {
      aspect-ratio: 4 / 5;
    }
  }
}

[data-look-home-hero="typographic"] .page-hero__title {
  font-size: calc(var(--step-6) * 1.4 * var(--display-scale, 1));
}

[data-look-home-hero="typographic"] .page-hero__picture {
  aspect-ratio: 3 / 1;
}

[data-look-home-hero="minimal"] .page-hero__title {
  font-size: calc(var(--step-4) * var(--display-scale, 1));
}

.page-hero__draft {
  align-self: flex-start;
}

/* The style's pictures (data-look-images): mono in black and white, duotone
   in the accent (picture-filters.css) */
[data-look-images="mono"] .page-hero__picture {
  filter: grayscale(1) contrast(1.06);
}

[data-look-images="duotone"] .page-hero__picture {
  filter: contrast(1.1) url(#shop-duotone);
}