/* Mobile cards must size their grid rows from visible content, not desktop rows.
   Kept separate so desktop layout and hover behavior remain unchanged. */
@media (max-width: 640px) {
  .chapters .bento {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    align-items: stretch;
    gap: 18px;
  }

  .chapters .tile,
  .chapters .tile--xl {
    min-width: 0;
    min-height: 360px;
    height: auto;
    padding: 134px 22px 24px;
  }

  .chapters .tile-body,
  .chapters .tile--xl .tile-body {
    position: relative;
    inset: auto;
    flex: none;
    min-width: 0;
  }

  .chapters .tile-name,
  .chapters .tile--xl .tile-name {
    max-width: none;
    font-size: clamp(23px, 6vw, 28px);
    line-height: 1.15;
    overflow-wrap: anywhere;
    transform: none;
  }

  .chapters .tile-role,
  .chapters .tile--xl .tile-role {
    max-height: none;
    font-size: 15px;
    line-height: 1.4;
  }

  .chapters .tile-slide { display: none; }
  .chapters .tile-slide.is-on { display: flex; }
  .chapters .tile-slide span:last-child,
  .chapters .tile--xl .tile-slide span:last-child {
    min-width: 0;
    font-size: 14px;
    line-height: 1.5;
  }
  .chapters .tile-ico,
  .chapters .tile--xl .tile-ico { width: 36px; height: 36px; }
  .chapters .tile-ico svg,
  .chapters .tile--xl .tile-ico svg { width: 18px; height: 18px; }

  .chapters .tile-cta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 10px;
    letter-spacing: .08em;
    overflow-wrap: anywhere;
  }
  .chapters .tile-arrow { flex: none; width: 34px; height: 34px; }

  .chapters .tile-peek { flex: none; margin-bottom: 24px; }
  .chapters .tile-top,
  .chapters .tile--xl .tile-top { top: 20px; left: 22px; right: 22px; }
  .chapters .reel-nav,
  .chapters .tile--xl .reel-nav { top: 94px; width: 40px; height: 40px; }
  .chapters .reel-nav--prev,
  .chapters .tile--xl .reel-nav--prev { left: 22px; }
  .chapters .reel-nav--next,
  .chapters .tile--xl .reel-nav--next { right: 22px; }
}