/* ==============================================================
   K3 — Bento grid

   Six cells, six compositions. Placement is entirely grid areas, so
   the markup stays a flat list in reading order and re-drawing the
   mosaic is one declaration.
   ============================================================== */

.bento {
  background: var(--color-surface);
  color: var(--color-ink);
  padding-block: var(--space-9);
}

.bento__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}


/* --- Header ---------------------------------------------------- */

.bento__header {
  margin-bottom: var(--bento-grid-gap);
  text-align: center;
}

.bento__heading {
  margin: 0 0 var(--bento-header-gap);
  font-size: var(--text-section-heading);
  line-height: var(--leading-display);
  color: var(--color-heading-display);
  text-wrap: balance;
}

.bento__subheading {
  /* A measure, not a container: the reference breaks this to two
     centred lines and a full-width sentence would read as one long
     line instead. */
  max-width: 34em;
  margin: 0 auto var(--bento-cta-gap);
  font-size: var(--text-bento-sub);
  line-height: var(--leading-body);
  text-wrap: balance;
}


/* --- The mosaic -------------------------------------------------
   Rows are auto, not a fixed track list. The wireframe draws
   140/65/164, but in the reference those are content heights — a
   fixed row would clip a card whose copy grew. The spans make the
   shape; the content makes the heights.
   ------------------------------------------------------------------ */

.bento__list {
  display: grid;
  /* minmax(0, 1fr), not 1fr: a grid track's automatic minimum is its
     content, so a long word in one card would push the whole column
     wider than its share. This project has paid for that twice. */
  grid-template-columns: repeat(var(--bento-cols), minmax(0, 1fr));
  grid-template-areas:
    "fee     online  collect collect driver  driver"
    "account account collect collect driver  driver"
    "account account collect collect deposit deposit";
  gap: var(--bento-gap);
}

.bento__item--fee     { grid-area: fee; }
.bento__item--online  { grid-area: online; }
.bento__item--account { grid-area: account; }
.bento__item--collect { grid-area: collect; }
.bento__item--driver  { grid-area: driver; }
.bento__item--deposit { grid-area: deposit; }


/* --- Card -------------------------------------------------------- */

.bento__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: var(--bento-card-min);
  padding: var(--bento-card-pad);
  background: var(--color-bento-tint);
  color: var(--color-ink);
}

.bento__card--dark {
  background: var(--color-bento-dark);
  color: var(--color-ink-inverse);
}

.bento__card--accent {
  background: var(--color-bento-accent);
}

/* Pushes the copy to the foot of the card, which is where the
   reference puts it on every cell that has room to spare. */
.bento__body {
  margin-top: auto;
}

.bento__figure {
  margin: 0 0 var(--space-3);
  font-size: var(--text-bento-figure);
  line-height: var(--leading-none);
}

.bento__title {
  margin: 0;
  font-size: var(--text-bento-title);
  /* Explicit rather than left to the <h3> UA default: it happens to
     compute to the same 700 either way, but every sibling title in
     this system (.cartypes__title, .pillars__title) declares its
     weight, and this was the one relying on an accident instead. */
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.bento__text {
  margin: var(--space-2) 0 0;
  font-size: var(--text-md);
  line-height: var(--leading-body);
}


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

.bento__media {
  background: var(--color-bento-media);
  overflow: hidden;
}

.bento__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Above and below: the media takes the leftover height, so two cards
   of different copy lengths still line their images up. */
.bento__card--media-above .bento__media { order: -1; flex: 1 1 auto; margin-bottom: var(--space-5); }
.bento__card--media-below .bento__media { flex: 1 1 auto; margin-top: var(--space-5); }

/* Inline: a small mark beside the text rather than a panel. */
.bento__card--media-inline { flex-direction: row; align-items: center; gap: var(--space-4); }
.bento__card--media-inline .bento__body { margin-top: 0; }
.bento__card--media-inline .bento__media { flex: 0 0 auto; width: 5rem; }

/* Fill: the image is the card. Text sits on top of it, so the card
   becomes the positioning context and the copy is lifted above.
   The scrim is not decoration — contrast over a photograph cannot be
   measured, and white type on an unknown image is the §22 failure.
   It does nothing visible over the placeholder; it earns its place
   the moment a real photograph lands. */
.bento__card--media-fill {
  position: relative;
  isolation: isolate;
}

.bento__card--media-fill .bento__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.bento__card--media-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .25) 45%, rgba(0, 0, 0, 0) 70%);
}


/* --- Action -------------------------------------------------------- */

.bento__action {
  align-self: flex-end;
  margin-top: var(--space-4);
  border: 1px solid currentColor;
  border-radius: 50%;
}

.bento__action-icon {
  width: var(--icon-md);
  height: var(--icon-md);
  stroke-width: var(--icon-stroke);
}


/* ==============================================================
   K4 — Responsive

   The six-column mosaic degrades quietly and then breaks hard.
   Measured, by grid width:

       1279  col 200   card content 152   caption 2 lines
       1063  col 164                116            3
        905  col 137                 89            3
        793  col 119                 71            4
        674  col  99                 51            4
        534  col  76                 28            5   figure clipped
        294  col  36                -12            5   PAGE OVERFLOWS

   Negative content width: the card's own padding exceeds its column.
   Nothing warns you between 4 lines and that — the caption just keeps
   growing until the layout gives out.

   Two stages, and the mosaic is only used where it is comfortable:
   six columns while a single-column card still holds its caption in
   three lines (~860px of grid), then a two-column stack, then one.

   Container queries, not media queries: this grid sits inside a
   centred container and, in the style guide, inside a second padded
   box on top of that. Same correction §21 and §23 needed.
   ============================================================== */

.bento__inner {
  container-type: inline-size;
}

@container (max-width: 859px) {

  /* Only the pair stays paired; everything else takes the full row.
     Re-drawing the mosaic is the areas and nothing else — no markup
     moves, so reading order is untouched. */
  .bento__list {
    grid-template-areas:
      "fee     online"
      "account account"
      "collect collect"
      "driver  driver"
      "deposit deposit";
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The fill card has no content tall enough to give it presence once
     it is a full-width band rather than a three-row column. */
  .bento__card--media-fill {
    min-height: 16rem;
  }
}

@container (max-width: 399px) {

  .bento__list {
    grid-template-areas:
      "fee"
      "online"
      "account"
      "collect"
      "driver"
      "deposit";
    grid-template-columns: minmax(0, 1fr);
  }
}