/**
 * DJ Refresh — "Built For Your Next Gig" bento.
 * Figma: 588px red testimonial tile on the left, 2x2 grid of 402x210 feature tiles right,
 * 24px gutters, 444px tall overall. Centred heading + lead above.
 */

.djr-bento {
  --djr-bento-gap: 24px;
  --djr-bento-radius: 12px;

  /* Figma: #f2f2f2, not the #f7f7f7 surface used elsewhere. */
  background: var(--djr-surface);
}

/* Figma sets the centred section titles (bento / audience / reels) at 34px — the
   left-aligned ones (categories / updates / arrivals) stay at 36px. */
.djr-bento .djr-section__title,
.djr-audience .djr-section__title,
.djr-reels .djr-section__title {
  font-size: clamp(26px, 2.8vw, 34px);
}

.djr-bento__grid {
  display: grid;
  grid-template-columns: 588fr 828fr;
  gap: var(--djr-bento-gap);
  align-items: stretch;
}

/* ---------- Testimonial ---------- */

.djr-bento__quote {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 48px;
  border-radius: var(--djr-bento-radius);
  background: var(--djr-red);
  color: var(--djr-white);
  overflow: hidden;
}

/* Oversized quotation mark, bled off the top-right corner. */
.djr-bento__mark {
  position: absolute;
  top: -60px;
  right: 24px;
  font-size: 220px;
  line-height: 1;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.16);
  pointer-events: none;
}

.djr-bento__stars {
  display: flex;
  gap: 6px;
  color: #ffcd3c;
}

/* The colour must be declared, not inherited: a plugin sheet styles bare `blockquote`,
   and an element rule always beats an inherited value. Same reason the newsletter h2
   declares its own colour. */
.djr-bento__quote-text {
  margin: 24px 0 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--djr-white);
}

/* Pushes the attribution to the bottom of the tile. */
.djr-bento__attrib {
  margin-top: auto;
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.djr-bento__name {
  font-size: 16px;
  font-weight: 700;
}

.djr-bento__role {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

/* ---------- Feature tiles ---------- */

/* Figma: two rows of fixed 210px tiles (210 + 24 + 210 = 444), which is what makes the
   right-hand grid exactly as tall as the testimonial beside it. Left to content height the
   tiles collapse to ~180 and the two columns stop lining up. */
.djr-bento__tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 210px;
  gap: var(--djr-bento-gap);
}

.djr-bento__tile {
  display: flex;
  flex-direction: column;
  padding: 26px 32px 32px;
  border-radius: var(--djr-bento-radius);
  background: var(--djr-white);
  border: 1px solid var(--djr-line);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.djr-bento__tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(12, 16, 22, 0.1);
}

.djr-bento__number {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--djr-red);
  letter-spacing: -0.02em;
}

.djr-bento__tile-title {
  margin-top: 18px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--djr-ink);
}

.djr-bento__tile-text {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--djr-body);
}

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

@media (max-width: 1100px) {
  /* minmax(0, 1fr), not 1fr: the plain 1fr keeps an implicit auto (min-content) minimum, so
     the horizontal tile rail's content forced the column — and the testimonial tile — wider
     than the container, clipping the quote. minmax(0,…) lets the column shrink to fit. */
  .djr-bento__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Grid children must be allowed to shrink below their content for the rail to scroll. */
  .djr-bento__quote,
  .djr-bento__scroller {
    min-width: 0;
  }

  .djr-bento__quote {
    padding: 36px;
  }

  .djr-bento__quote-text {
    font-size: 20px;
  }
}

/* The progress bar only appears once the tiles become a rail (mobile). */
.djr-bento__scroller .djr-scroller__bar {
  display: none;
  margin-top: 20px;
}

/*
 * Below 700px the four numbered tiles become a 2-up horizontal swipe rail (Figma mobile:
 * 165px tiles, 2 visible, progress bar) instead of stacking into a tall single column.
 */
@media (max-width: 700px) {
  .djr-bento__tiles {
    display: flex;
    grid-template-columns: none;
    grid-auto-rows: auto;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /*
     * Room for the tile's hover lift (-3px) and drop shadow. Because the rail must clip the
     * horizontal axis (overflow-x: auto), the vertical axis clips too — without this the top
     * edge and shadow of a lifted tile get cropped. The negative top margin re-absorbs the top
     * padding so the rail doesn't shift down; the bottom padding is offset by the tighter bar
     * margin below.
     */
    padding: 10px 4px 18px;
    margin-top: -10px;
  }

  .djr-bento__tiles::-webkit-scrollbar {
    display: none;
  }

  .djr-bento__tile {
    flex: 0 0 100%;
    scroll-snap-align: start;
    /* Let the tile hug its content height in the rail, not the desktop 210px row. */
    height: auto;
  }

  .djr-bento__scroller .djr-scroller__bar {
    display: block;
    /* The rail's 18px bottom padding already provides most of the gap to the bar. */
    margin-top: 4px;
  }
}