/**
 * DJ Refresh — Hero.
 *
 * Figma: 1600x725. Image bleeds full width, anchored right; a linear gradient darkens the
 * left so the white copy card reads against it. The overlay header floats on top, so the
 * card is pushed down to clear it.
 */

.djr-hero {
  /*
   * Everything here is FLUID so the hero adapts continuously across desktop sizes rather
   * than holding a fixed layout until a breakpoint. The failure mode we're avoiding: a fixed
   * 640px card + 120px gutters puts the card's right edge at 760px, which covers the DJ on
   * any screen under ~1300px. The card and gutter now shrink with the viewport so the subject
   * stays visible all the way down to the mobile flip at 768px.
   *
   * Figma desktop values (1600) are the clamp maxima: gutter 120, card 640, height 725.
   */
  --djr-hero-h: clamp(520px, 40vw, 600px);
  --djr-hero-card-w: clamp(400px, 44vw, 640px);
  /* 7.5vw so the gutter reaches the Figma 120px exactly at the 1600 design width (and clamps
     there on wider screens); it eases down to 40px on the narrowest desktop. */
  --djr-hero-gutter: clamp(40px, 7.5vw, 120px);
  /* Feedback (Userback #8098489): the banner was tall enough to push "Our Products" (Shop by
     Category) fully below the fold on a ~824px viewport. The hero has no fixed height — its
     height is card-top + card content + card-bottom — so trimming these two offsets is what
     shrinks the banner. Lowered from 196/136 to bring the next section up ~120px while still
     clearing the 100px overlay nav. */
  --djr-hero-card-top: clamp(112px, 8.5vw, 124px);
  --djr-hero-card-bottom: clamp(52px, 5vw, 72px);
  --djr-hero-card-pad: clamp(36px, 4vw, 60px);

  position: relative;
  display: block;
  overflow: hidden;
  background: var(--djr-ink);
}

/* ---------- Media ---------- */

/*
 * The photo is inset from the left, not full-bleed (Figma: it starts at 20.56% and runs to
 * the right edge). That is what keeps the DJ — the subject — clear of the copy card instead
 * of hidden behind it. The area to its left is the hero's own dark background.
 */
.djr-hero__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 20.5%;
  z-index: 0;
}

.djr-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Bias the crop left within the photo so she stays in frame as the page narrows. */
  object-position: 35% center;
}

/* Runs across the FULL hero (photo + the dark band behind the card), so it is a sibling of
   the media rather than a child. Figma: black -> transparent, 22% -> 67%. */
.djr-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgb(0, 0, 0) 22%, rgba(0, 0, 0, 0) 67%);
}

/* ---------- Copy card ---------- */

/* The nav (100px) overlaps the top of this section; the card's 196px offset clears it. */
.djr-hero__container {
  position: relative;
  z-index: 1;
  padding-top: var(--djr-hero-card-top);
  padding-bottom: var(--djr-hero-card-bottom);
  padding-left: var(--djr-hero-gutter);
  padding-right: var(--djr-hero-gutter);
}

.djr-hero__card {
  width: 100%;
  max-width: var(--djr-hero-card-w);
  padding: var(--djr-hero-card-pad);
  border-radius: var(--djr-radius);
  background: var(--djr-white);
  display: flex;
  flex-direction: column;
  /* Gap scales a little with the card so a narrow card isn't over-spaced. */
  gap: clamp(18px, 1.8vw, 24px);
}

/* ...but only 12px between the headline and the paragraph, which Figma groups together. */
.djr-hero__description {
  margin-top: -12px;
}

.djr-hero__heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Fluid across the whole desktop range; 60px at 1600 down to ~34px on the narrowest
     desktop, so the headline always fits the shrinking card. */
  font-size: clamp(34px, 3.9vw, var(--djr-h1));
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.djr-hero__heading-lead {
  color: var(--djr-ink);
}

.djr-hero__heading-accent {
  color: var(--djr-red);
}

.djr-hero__description {
  font-size: clamp(15px, 1.15vw, var(--djr-lead));
  line-height: 1.5;
  color: var(--djr-body);
}

.djr-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/*
 * Self-adapting CTAs: each wants ~200px. While both fit (wide card) they sit side by side
 * and share the row; once the card narrows past ~416px they wrap to a stack, each growing to
 * full width. `white-space: nowrap` keeps the labels on one line either way, so "Browse
 * Products" never breaks mid-label. No breakpoint required.
 */
.djr-hero__btn {
  flex: 1 1 200px;
  min-width: 0;
  white-space: nowrap;
  text-decoration: none!important;
}

/* ---------- Responsive ---------- */

/*
 * Below 768px the desktop card-over-photo layout runs out of room even with the fluid card,
 * so we flip to the phone treatment from the Figma mobile frame (390x540). Structurally
 * different from desktop: the near-complete photo sits as a band at the TOP and fades down
 * into solid black; the white card rides that black area at the bottom, never covering the
 * subject. Black hero background, image band pinned top, transparent->black scrim, card
 * anchored to the bottom, CTAs stacked full-width.
 */
@media (max-width: 768px) {
  .djr-hero {
    /*
     * The photo is shown at its natural aspect, so its height is 2/3 of the viewport width
     * (the source is 3:2). The hero must be that tall PLUS room for the card to sit on black
     * beneath it — otherwise the card overlaps the photo (which is what broke at 768). This
     * grows the hero with the viewport so there's always black space for the card.
     */
    --djr-hero-img-h: 66.67vw;
    --djr-hero-h: calc(var(--djr-hero-img-h) + 300px);
    background: #000000;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  /* Image band at the top, natural aspect (almost the whole photo), not a full-height crop. */
  .djr-hero__media {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    height: auto;
    overflow: visible;
  }

  .djr-hero__image {
    width: 100%;
    height: auto;
    object-position: center;
    transform: none;
  }

  /* Dissolves the photo into the black background: clear over the top, solid black by the
     bottom of the image — so the card lands on black. Height tracks the image height. */
  .djr-hero__scrim {
    top: 0;
    bottom: auto;
    height: var(--djr-hero-img-h);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, #000000 94%);
  }

  .djr-hero__container {
    /* Reserve room at the top for the transparent overlay nav to sit over the hero photo, and to
       drop the copy card below the image so the photo (and the DJ) reads on mobile — matching the
       Figma mobile hero. Roughly the photo height, so the card lands on the black band beneath it. */
    padding-top: 58vw;
    padding-bottom: 24px;
    padding-left: var(--djr-gutter);
    padding-right: var(--djr-gutter);
  }

  .djr-hero__card {
    max-width: none;
    padding: 24px;
    gap: 14px;
    border-radius: 8px;
  }

  .djr-hero__heading {
    font-size: 34px;
  }

  .djr-hero__description {
    font-size: 15px;
  }

  /* CTAs stack full-width. */
  .djr-hero__actions {
    flex-direction: column;
    gap: 10px;
  }

  /*
   * Reset the base `flex: 1 1 200px`: in a COLUMN the grow factor would stretch each button
   * to fill the card's height (the 200px-tall buttons bug). Here they hug their content.
   */
  .djr-hero__btn {
    flex: 0 0 auto;
    width: 100%;
  }
}