/* ==========================================================================
   blocks/link-tiles/style.css — acf/link-tiles (S2). Live: section.bg--secondary.wlp-pad-top--none,
   .grid--auto-3 of .wlp-imgbox tiles. Spec: docs/scout/SECTIONS-A.md §2, docs/BLOCKS.md §4.2.
   Mobile-first: base = live ≤478px (row tiles, 180px, phone images); ≥479px = column tiles, 250px.
   Section heights: 841.77 / 591.45 / 340px at 390 / 768 / 1440 (1 / 2 / 3 columns).
   Reproduced on purpose (DI-D10): on narrow phones a long heading word keeps its min-content width, so the
   centred heading + button row is wider than the tile and sticks out on both sides ("OUR STORIES", 4.47px at 390).
   ========================================================================== */

.block-link-tiles {
  --tile-heading-size: clamp(4rem, calc(0.478vw + 3.847rem), 4.5rem);   /* live .wlp-imgbox__heading (one-off) */
}

/* ACSS .grid--auto-3: auto-fit columns no narrower than 70 % of a third of --content-width
   (1 column below ~640px of grid width, 2 up to ~980px, then 3). */
.block-link-tiles__grid {
  --tile-min: calc((var(--content-width) - 2 * var(--grid-gap)) / 3 * 0.7);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--tile-min), (100% - 2 * var(--grid-gap)) / 3)), 1fr));
  gap: var(--grid-gap);
  width: 100%;
}

/* Tile: live .wlp-imgbox (+ .grid--auto > * and .brxe-div defaults). Not a link, no hover of its own. */
.block-link-tiles__tile {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  row-gap: var(--space-s);
  column-gap: var(--content-gap);
  min-width: 0;
  max-width: 100%;
  min-height: 18rem;                                 /* live .wlp-imgbox ≤478 (180px) */
  padding: 2rem;                                     /* live .wlp-imgbox */
  overflow-wrap: break-word;
  border-radius: var(--radius-l);
  background-image: var(--tile-bg-m, var(--tile-bg, none));
  background-size: cover;
  background-position: center center;
}

.block-link-tiles__tile--desktop-only {
  display: none;
}

.block-link-tiles__heading {
  width: 100%;
  max-width: 25rem;                                  /* live .wlp-imgbox__heading */
  color: var(--white);
  font-size: var(--tile-heading-size);
  text-align: center;
  text-transform: uppercase;
}

.block-link-tiles__heading--compact {
  font-size: 2.5rem;                                 /* live #brxe-hhovhr ≤478 */
}

/* Buttons v2 locks (docs/design/BUTTONS.md §4.3). Phones: live's 10px padding in the tight tile row (36 tall, 48
   when "See Your Future Star" wraps). ≥479: md side padding, but live's 48 box: the column tile centres heading +
   button vertically (justify-content: center), so md's 44 would leave the section rect alone yet drop every tile
   heading by 2px (measured: S2 3050 / 3583 px outside the button masks at 768 / 1440). Live's white phone border
   is retired: every secondary has the #1263FF outline. */
.block-link-tiles__button {
  --btn-h: 3.6rem;
  --btn-padding-inline: 1rem;
}

@media (min-width: 479px) {
  .block-link-tiles__tile {
    flex-direction: column;
    min-height: 25rem;                               /* live .wlp-imgbox (250px) */
    background-image: var(--tile-bg, var(--tile-bg-m, none));
    background-position: 0 0;                        /* live: no position set above 478px */
  }

  .block-link-tiles__tile--mobile-only {
    display: none;
  }

  .block-link-tiles__tile--desktop-only {
    display: flex;
  }

  .block-link-tiles__heading--compact {
    font-size: var(--tile-heading-size);
  }

  .block-link-tiles__button {
    --btn-h: 4.8rem;                                 /* Buttons v2 lock: live's 48 (md is 44) */
    --btn-padding-inline: var(--btn-md-pad-x);
  }
}