/**
 * Page Hero — archive/page title banner.
 *
 * GENERATED from Figma `fleur-shop-archive / hero` (measured). Consumes tokens.
 *
 * @package wp-design-library/components
 */

.wpdl-page-hero {
  margin-block: 0 !important;
  padding: 0 !important;
}

.wpdl-page-hero__columns.wp-block-columns {
  align-items: stretch;
  gap: 0 !important;
  margin-block: 0;
  min-block-size: 17.5rem; /* 280px measured */
}

/* Copy column — pad-inline 80 (space.80), vertical-centered, gap 12 (space.3) */
.wpdl-page-hero__copy.wp-block-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-basis: 56%;
  gap: var(--wp--custom--space--3);
  padding-block: var(--wp--custom--space--7);
  padding-inline: var(--wp--custom--space--80);
}

.wpdl-page-hero__copy > * {
  margin-block: 0 !important;
}

/* Title — serif, ~48px (Figma) */
.wpdl-page-hero__title {
  margin: 0;
  font-family: var(--wp--custom--font--family--display);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); /* → 48px @1440 */
  font-weight: 400;
  line-height: 1.1;
  color: var(--wp--custom--semantic--color--text--primary);
}

/* Description — ink secondary, 16px */
.wpdl-page-hero__desc {
  margin: 0;
  font-family: var(--wp--custom--font--family--body);
  font-size: var(--wp--custom--typography--size--base, 1rem);
  line-height: 1.55;
  color: var(--wp--custom--semantic--color--text--secondary);
  max-inline-size: 40rem;
}

/* Media column — full-bleed photo filling 280px height */
.wpdl-page-hero__media.wp-block-column {
  flex-basis: 44%;
  margin-block: 0;
}

.wpdl-page-hero__media .wp-block-image,
.wpdl-page-hero__media .wp-block-image figure {
  block-size: 100%;
  width: 100%;
  margin: 0;
}

.wpdl-page-hero__media .wp-block-image img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 17.5rem;
  object-fit: cover;
}

/* Mobile — stack: photo on top, copy below */
@media (width < 48em) {
  .wpdl-page-hero__columns.wp-block-columns {
    flex-wrap: wrap !important;
    min-block-size: 0;
  }
  .wpdl-page-hero__copy.wp-block-column {
    order: 2;
    flex-basis: 100% !important;
    flex-grow: 0 !important;
    padding-block: var(--wp--custom--space--7);
    padding-inline: var(--wp--custom--space--6);
  }
  .wpdl-page-hero__media.wp-block-column {
    order: 1;
    flex-basis: 100% !important;
    flex-grow: 0 !important;
  }
  .wpdl-page-hero__media .wp-block-image img {
    min-block-size: 12rem;
  }
}