/* Featured Releases — proportional text, no clipping, small tablets stack */

/* ===== Tunables & Derived Sizing ===== */
.wp-block-umaisha-featured-releases {
  /* layout gaps */
  --fr-gap: clamp(24px, 4vw, 64px);           /* gap BETWEEN cards (desktop) / rows (mobile) */
  --fr-inner-gap: clamp(12px, 2vw, 20px);     /* gap between text and image inside a card */

  /* cover-art side (square) limits */
  --fr-side-max: 300px;                       /* cap cover-art width/height → caps card height */
  --fr-side-min-mob: 160px;                   /* min side when stacked */
  --fr-side-min-desk: 200px;                  /* min side when side-by-side */

  /* MOBILE (stacked): ensure 2*side + inner-gap ≤ 90vw (≥5% margins) */
  --fr-side: clamp(
    var(--fr-side-min-mob),
    calc( (90vw - var(--fr-inner-gap)) / 2 ),
    var(--fr-side-max)
  );

  /* Text scales **proportionally to cover-art** on both sides of the breakpoint */
  --fr-kicker-ratio: 0.115;                   /* h3 kicker size = side * ratio */
  --fr-title-ratio:  0.098;                   /* title size = side * ratio  */
  --fr-cta-ratio:    0.070;                   /* CTA size = side * ratio    */

  --fr-kicker-size: clamp(18px, calc(var(--fr-side) * var(--fr-kicker-ratio)), 36px);
  --fr-title-size:  clamp(16px, calc(var(--fr-side) * var(--fr-title-ratio)),  30px);
  --fr-cta-size:    clamp(12px, calc(var(--fr-side) * var(--fr-cta-ratio)),    22px);
}

/* DESKTOP (two-up) starts at 1024px so **small tablets stack** */
@media (min-width: 1024px) {
  .wp-block-umaisha-featured-releases {
    /* Solve: 4*side + 2*inner-gap + gap ≤ 90vw (≥5% margins) */
    --fr-side: clamp(
      var(--fr-side-min-desk),
      calc( (90vw - var(--fr-gap) - (2 * var(--fr-inner-gap))) / 4 ),
      var(--fr-side-max)
    );
  }
}

/* ===== Row Container ===== */
.wp-block-umaisha-featured-releases .uma-fr__row {
  display: grid;
  grid-template-columns: 1fr;                            /* stacked by default */
  gap: var(--fr-gap);
  justify-content: center;
  margin-inline: auto;
  /* fits one card within 90vw to keep ≥5% margins */
  width: min(90vw, calc(2 * var(--fr-side) + var(--fr-inner-gap)));
}

@media (min-width: 1024px) {
  .wp-block-umaisha-featured-releases .uma-fr__row {
    grid-template-columns: repeat(2, calc(2 * var(--fr-side) + var(--fr-inner-gap)));
    /* total: 2 cards + center gap, all within 90vw */
    width: min(
      90vw,
      calc( 2 * (2 * var(--fr-side) + var(--fr-inner-gap)) + var(--fr-gap) )
    );
  }
}

/* ===== Card (two columns: text + image) ===== */
.wp-block-umaisha-featured-releases .uma-fr__card {
  position: relative;
  display: grid;
  grid-template-columns: var(--fr-side) var(--fr-side);
  align-items: start;                                     /* top-align text & image */
  gap: var(--fr-inner-gap);
  height: var(--fr-side);                                 /* cap card height to image side */
}

.wp-block-umaisha-featured-releases .uma-fr__card--album  { justify-items: end; }   /* text flush toward gap */
.wp-block-umaisha-featured-releases .uma-fr__card--single { justify-items: start; }

/* Keep both columns pinned to the top edge */
.wp-block-umaisha-featured-releases .uma-fr__media,
.wp-block-umaisha-featured-releases .uma-fr__text { align-self: start; }

/* ===== Image & Badge ===== */
.wp-block-umaisha-featured-releases .uma-fr__media { margin: 0; position: relative; }
.wp-block-umaisha-featured-releases .uma-fr__img {
  width: var(--fr-side);
  height: var(--fr-side);
  object-fit: cover;
  aspect-ratio: 1 / 1;
  display: block;
  border-radius: .5rem;
}
.wp-block-umaisha-featured-releases .uma-fr__badge {
  position: absolute; bottom: .5rem;
  z-index: 2;
  font-size: var(--fr-cta-size);
  padding: .25rem .5rem;
  border-radius: .375rem;
  background: #000;
  color: #fff;
  pointer-events: none;
}
.wp-block-umaisha-featured-releases .uma-fr__badge--right {
  left: .5rem;
}
.wp-block-umaisha-featured-releases .uma-fr__badge--left {
  right: .5rem;
}

/* ===== Text Column ===== */
.wp-block-umaisha-featured-releases .uma-fr__text {
  position: relative;                                     /* for absolute CTA placement */
  display: grid;
  grid-template-rows: auto auto 1fr;                      /* kicker, title, free space */
  row-gap: 0.75em;                                           /* ~1em between kicker and title */
  height: 100%;
}
.wp-block-umaisha-featured-releases .uma-fr__text--right { text-align: right;  justify-self: end; }
.wp-block-umaisha-featured-releases .uma-fr__text--left  { text-align: left;   justify-self: start; }

/* Kicker (h3) — proportional, allowed to wrap if needed */
.wp-block-umaisha-featured-releases .uma-fr__kicker {
  margin: 0;
  font-size: var(--fr-kicker-size);                       /* proportional to cover side */
  overflow-wrap: anywhere;                                /* allow wrap; avoid clipping */
}

/* Title — proportional; prefer ≤2 lines */
.wp-block-umaisha-featured-releases .uma-fr__title {
  margin: 0;
  font-size: var(--fr-title-size);                        /* proportional to cover side */
  line-height: 1.05;
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 2;                                  /* tolerate two lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* CTA — proportional, ~75% down the text column, anchored left/right by side */
.wp-block-umaisha-featured-releases .uma-fr__cta {
  position: absolute;
  top: 75%;
  transform: translateY(-50%);
  margin: 0;
  font-size: var(--fr-cta-size);                          /* proportional to cover side */
}
.wp-block-umaisha-featured-releases .uma-fr__text--left  .uma-fr__cta { left: 0;  right: auto; }
.wp-block-umaisha-featured-releases .uma-fr__text--right .uma-fr__cta { right: 0; left:  auto; }

/* Full-card overlay link */
.wp-block-umaisha-featured-releases .uma-fr__overlayLink {
  position: absolute; inset: 0; z-index: 1;
  text-indent: -9999px; overflow: hidden;
}