@layer hpds-components {
  .hpds-hero {
    isolation: isolate;
    overflow: clip;
    position: relative;
  }

  .hpds-hero--managed {
    align-items: end;
    display: grid;
    min-block-size: var(--hpds-hero-height, min(47rem, 82vh));
  }

  .hpds-hero--compact { --hpds-hero-height: clamp(18rem, 42vh, 28rem); }
  .hpds-hero--category { --hpds-hero-height: clamp(22rem, 54vh, 36rem); }
  .hpds-hero--club { --hpds-hero-height: clamp(30rem, 72vh, 44rem); }

  .hpds-hero__media,
  .hpds-hero__overlay {
    inset: 0;
    position: absolute;
  }

  .hpds-hero__media { z-index: -2; }

  .hpds-hero__media :is(img, picture, video),
  .hpds-hero__media > picture > img {
    block-size: 100%;
    inline-size: 100%;
    object-fit: cover;
    object-position: var(--hpds-hero-position, 50% 50%);
  }

  .hpds-hero__overlay {
    background: rgb(17 17 17 / var(--hpds-hero-overlay, 0.38));
    z-index: -1;
  }

  .hpds-hero__inner {
    inline-size: min(100% - (2 * var(--hpds-gutter)), var(--hpds-container-wide));
    margin-inline: auto;
    padding-block: clamp(var(--hpds-space-7), 9vw, var(--hpds-space-10));
    position: relative;
  }

  .hpds-hero__content {
    color: var(--hpds-hero-text, #ffffff);
    max-inline-size: var(--hpds-hero-content-width, 42rem);
  }

  .hpds-hero__title {
    color: inherit;
    font-size: var(--hpds-font-size-900);
    font-weight: var(--hpds-weight-black);
    line-height: var(--hpds-line-tight);
    margin: 0;
    max-inline-size: 100%;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  .hpds-hero__description {
    color: inherit;
    font-size: var(--hpds-font-size-400);
    line-height: 1.55;
    margin-block: var(--hpds-space-4) 0;
    max-inline-size: 38rem;
  }

  .hpds-hero__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--hpds-space-3);
    margin-block-start: var(--hpds-space-6);
  }

  .hpds-hero--light {
    --hpds-hero-overlay: 0.08;
    --hpds-hero-text: var(--hpds-color-text);
  }

  .hpds-hero--align-center .hpds-hero__content { margin-inline: auto; text-align: center; }
  .hpds-hero--align-center .hpds-hero__actions { justify-content: center; }
  .hpds-hero--align-end .hpds-hero__content { margin-inline-start: auto; }

  /* Elementor owns geometry. HPDS only provides isolation and named child styles. */
  .hpds-hero--elementor {
    isolation: isolate;
    overflow: clip;
  }

  .hpds-hero--elementor :where(.hpds-hero__title, .elementor-heading-title.hpds-hero__title) {
    color: var(--hpds-hero-text, inherit);
    font-family: var(--hpds-font-display);
    font-size: var(--hpds-font-size-900);
    font-weight: var(--hpds-weight-black);
    letter-spacing: 0;
    line-height: var(--hpds-line-tight);
  }

  .hpds-hero--elementor .elementor-background-overlay { pointer-events: none; }

  .hpds-hero--editorial-frame {
    --hpds-hero-overlay: 0.22;
    --hpds-hero-height: min(48rem, 82vh);
    border-block: 1px solid color-mix(in srgb, var(--hpds-color-accent) 45%, transparent);
  }

  .hpds-hero--editorial-frame::before {
    border: 1px solid rgb(255 255 255 / 0.58);
    content: "";
    inset: var(--hpds-space-5);
    pointer-events: none;
    position: absolute;
    z-index: 1;
  }

  .hpds-hero--editorial-frame::after {
    align-items: center;
    background: var(--hpds-color-accent);
    color: #111111;
    content: attr(data-hpds-rail);
    display: flex;
    font-size: var(--hpds-font-size-100);
    font-weight: var(--hpds-weight-bold);
    inset: 0 0 0 auto;
    justify-content: center;
    letter-spacing: 0;
    padding-inline: 0.65rem;
    position: absolute;
    text-orientation: mixed;
    writing-mode: vertical-rl;
    z-index: 2;
  }

  .hpds-hero--editorial-frame .hpds-hero__content {
    background: rgb(13 13 13 / 0.82);
    padding: clamp(var(--hpds-space-5), 4vw, var(--hpds-space-8));
  }

  .hpds-hero--dark-split {
    align-items: stretch;
    background: var(--hpds-color-brand);
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    min-block-size: var(--hpds-hero-height, min(46rem, 80vh));
  }

  .hpds-hero--dark-split .hpds-hero__media {
    grid-column: 2;
    grid-row: 1;
    inset: auto;
    min-block-size: 100%;
    position: relative;
    z-index: 0;
  }

  .hpds-hero--dark-split .hpds-hero__overlay {
    background: rgb(13 13 13 / 0.08);
    grid-column: 2;
    grid-row: 1;
    z-index: 1;
  }

  .hpds-hero--dark-split .hpds-hero__inner {
    align-items: center;
    display: flex;
    grid-column: 1;
    grid-row: 1;
    inline-size: 100%;
    max-inline-size: none;
    padding: clamp(var(--hpds-space-6), 6vw, var(--hpds-space-10));
    z-index: 2;
  }

  .hpds-hero--dark-split .hpds-hero__content {
    color: #ffffff;
  }

  .hpds-hero--metrics {
    --hpds-hero-text: var(--hpds-color-text);
    background: var(--hpds-color-mist);
    color: var(--hpds-color-text);
  }

  .hpds-hero--metrics .hpds-hero__overlay {
    background: rgb(255 255 255 / 0.08);
  }

  .hpds-hero__metrics {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-block-start: var(--hpds-space-7);
    max-inline-size: 54rem;
  }

  .hpds-stat-tile {
    background: var(--hpds-color-surface);
    border-block-start: 2px solid var(--hpds-color-accent);
    min-block-size: 8rem;
    padding: var(--hpds-space-4);
  }

  .hpds-stat-tile__value {
    color: var(--hpds-color-brand);
    display: block;
    font-family: var(--hpds-font-display);
    font-size: var(--hpds-font-size-600);
    font-weight: var(--hpds-display-weight, var(--hpds-weight-bold));
    line-height: var(--hpds-line-tight);
  }

  .hpds-stat-tile__label {
    color: var(--hpds-color-text-muted);
    display: block;
    font-size: var(--hpds-font-size-200);
    margin-block-start: var(--hpds-space-2);
  }

  @media (max-width: 767px) {
    .hpds-hero--managed { min-block-size: var(--hpds-hero-height-mobile, 75vh); }
    .hpds-hero__title, .hpds-hero--elementor :where(.hpds-hero__title, .elementor-heading-title.hpds-hero__title) { font-size: var(--hpds-font-size-700); }
    .hpds-hero__description { font-size: var(--hpds-font-size-300); }
    .hpds-hero__actions { align-items: stretch; flex-direction: column; }
    .hpds-hero__actions .hpds-button { inline-size: 100%; }
    .hpds-hero--editorial-frame::before { inset: var(--hpds-space-3); }
    .hpds-hero--editorial-frame::after { display: none; }
    .hpds-hero--editorial-frame .hpds-hero__content { padding: var(--hpds-space-5); }
    .hpds-hero--dark-split { display: flex; flex-direction: column; min-block-size: 0; }
    .hpds-hero--dark-split .hpds-hero__media { aspect-ratio: 4 / 5; min-block-size: 0; order: 1; }
    .hpds-hero--dark-split .hpds-hero__overlay { display: none; }
    .hpds-hero--dark-split .hpds-hero__inner { order: 2; padding: var(--hpds-space-6) var(--hpds-gutter); }
    .hpds-hero__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
}