/* Phone-only appearance overrides.
   This file is loaded after the shared styles, only at 560px and below.
   Keep changes inside this media query so laptop styling stays independent. */
@media (max-width: 560px) {
  :root {
    --mobile-card-columns: 4;
    --mobile-platform-columns: 6;
    --mobile-card-gap: 8px;
  }

  /* Platforms stay on one line; arrows reveal the rest. */
  .phone-carousel,
  .popular-carousel {
    position: relative;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 24px;
    gap: 6px;
    align-items: center;
    padding-bottom: 0;
  }
  .phone-carousel > button,
  .popular-carousel > .popular-arrow {
    position: static;
    display: grid;
    place-items: center;
    width: 24px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 1px solid rgb(var(--primary-rgb) / .35);
    border-radius: 999px;
    background: var(--surface-800);
    color: var(--text);
    font-size: 10px;
    cursor: pointer;
  }
  .phone-carousel > button:disabled { opacity: .25; cursor: default; }
  .phone-carousel > button:hover:not(:disabled) { background: var(--accent-dim); border-color: var(--accent); }
  .phone-platform-carousel > .platform-grid {
    grid-template-columns: none;
    grid-template-rows: 1fr;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--mobile-platform-columns) - 1) * 6px) / var(--mobile-platform-columns));
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .phone-platform-carousel .platform-grid::-webkit-scrollbar { display: none; }
  .phone-platform-carousel .platform-card { gap: 7px; padding: 4px 0 8px; scroll-snap-align: start; }
  .platform-logo { width: min(44px, 100%); height: auto; aspect-ratio: 1; border-radius: 10px; }
  .platform-name { font-size: 8px; }

  /* Catalog, search results, saved titles, and collection filters. */
  .film-grid {
    grid-template-columns: repeat(var(--mobile-card-columns), minmax(0, 1fr));
    gap: 18px var(--mobile-card-gap);
  }
  #catalog-pagination { gap: 10px; }

  /* Movie rows use a left arrow, a scrolling viewport, and a right arrow. */
  .popular-carousel .popular-grid {
    grid-template-columns: none;
    grid-auto-columns: calc((100% - (var(--mobile-card-columns) - 1) * var(--mobile-card-gap)) / var(--mobile-card-columns));
    column-gap: var(--mobile-card-gap);
    row-gap: 0;
  }

  /* Platform movies/series, recommendations, and chronological title rows. */
  .platform-title-row,
  .detail-poster-row {
    grid-auto-columns: calc((100% - (var(--mobile-card-columns) - 1) * var(--mobile-card-gap)) / var(--mobile-card-columns));
    gap: var(--mobile-card-gap);
  }

  .film-grid .card-info,
  .platform-title-row .film-card .card-info,
  .detail-poster-row .film-card .card-info { padding: 8px 0 0; }
  .film-grid .card-title,
  .platform-title-row .film-card .card-title,
  .detail-poster-row .film-card .card-title { margin-top: 3px; font-size: 11px; }
  .film-grid .card-year,
  .platform-title-row .card-year,
  .detail-poster-row .card-year { font-size: 10px; }
  .film-grid .card-meta,
  .platform-title-row .card-meta,
  .detail-poster-row .card-meta { gap: 3px; margin-top: 5px; font-size: 9px; }
  .film-grid .card-meta > span:first-child,
  .platform-title-row .card-meta > span:first-child,
  .detail-poster-row .card-meta > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .film-grid .card-meta .rating,
  .platform-title-row .card-meta .rating,
  .detail-poster-row .card-meta .rating { flex-shrink: 0; white-space: nowrap; }
}