/*
 * .c-bento: a grid of tiles of different sizes, for services and for the ten category families.
 * Order is carried by size and tone, not by numbers. Tiles are flat fields (no border, no shadow).
 *
 *   <ul class="c-bento">
 *     <li class="c-bento__tile c-bento__tile--wide c-bento__tile--primary">
 *       <h3 class="c-bento__title">Haz visible tu negocio</h3>
 *       <p class="c-bento__text">Registro gratis, en cinco minutos.</p>
 *     </li>
 *     <li class="c-bento__tile c-bento__tile--alt">...</li>
 *   </ul>
 *
 * Tone modifiers: --alt (surface-alt), --primary (deep green), --tint (light green), --action (yellow,
 * at most one tile per grid), --plain (white; use only on an alternate section). Size modifiers: --wide
 * (2 columns), --tall (2 rows). A tile that is a link: put .c-bento__link on the title link (stretched).
 */
.c-bento {
  display: grid;
  gap: var(--md-space-3);
  grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: dense;
}

@media (min-width: 40em) {
  .c-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .c-bento {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--md-space-4);
  }
}

.c-bento__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--md-space-2);
  min-block-size: 11rem;
  padding: var(--md-space-5);
  border-radius: var(--md-radius-lg);
  background: var(--md-color-surface-alt);
  color: var(--md-color-ink);
  transition: transform var(--md-duration-base) var(--md-ease-out);
}

@media (min-width: 40em) {
  .c-bento__tile--wide {
    grid-column: span 2;
  }

  .c-bento__tile--tall {
    grid-row: span 2;
    min-block-size: 22rem;
  }
}

.c-bento__tile--primary {
  background: var(--md-color-primary);
  color: var(--md-color-on-primary);
}

.c-bento__tile--tint {
  background: var(--md-color-tint-primary);
}

.c-bento__tile--action {
  background: var(--md-color-action);
  color: var(--md-color-on-action);
}

.c-bento__tile--plain {
  background: var(--md-color-surface);
}

.c-bento__title {
  font-family: var(--md-font-display);
  font-size: var(--md-font-size-xl);
  font-weight: var(--md-weight-black);
  line-height: var(--md-leading-tight);
  letter-spacing: var(--md-tracking-tight);
}

.c-bento__text {
  max-inline-size: 30ch;
}

/* A figure on a tile: a large number, with a caption under it. */
.c-bento__figure {
  font-family: var(--md-font-display);
  font-size: var(--md-font-size-3xl);
  font-weight: var(--md-weight-black);
  line-height: 1;
}

.c-bento__link {
  color: inherit;
  text-decoration: none;
}

.c-bento__link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.c-bento__link:focus-visible {
  outline: none;
}

/* The ring is drawn on the stretched ::after (the tile edge), so it needs no :has(). */
.c-bento__link:focus-visible::after {
  border-radius: var(--md-radius-lg);
  outline: var(--md-focus-width) solid var(--md-color-primary);
  outline-offset: var(--md-focus-offset);
}

.c-bento__tile--primary .c-bento__link:focus-visible::after {
  outline-color: var(--md-color-action);
}

/* Decorative trazo art in a corner of a tile (an <img> with alt="" or a .c-trazo-line). */
.c-bento__art {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: 55%;
  max-inline-size: 12rem;
  pointer-events: none;
}

@media (hover: hover) {
  a.c-bento__tile:hover,
  .c-bento__tile:has(.c-bento__link:hover) {
    transform: translateY(calc(-1 * var(--md-space-1)));
  }
}