/* ═══════════════════════════════════════════════════════════════════
   AnimeRank v9 — LAYOUTS
   Grids · Flex compositions · Container queries · Page templates
   Load order: 2 of 5  (critical, blocking)
═══════════════════════════════════════════════════════════════════ */

@layer layouts;

@layer layouts {
  /* ──────────────────────────────────────────────────────────────
     GRID — anime poster grid (auto-fill, 2:3 cards)
  ────────────────────────────────────────────────────────────── */
  .grid-anime {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
    gap: var(--space-md);
  }
  @media (min-width: 768px)  { .grid-anime { gap: var(--space-md); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }
  @media (min-width: 1024px) { .grid-anime { gap: var(--space-lg); grid-template-columns: repeat(auto-fill, minmax(192px, 1fr)); } }
  @media (min-width: 1280px) { .grid-anime { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
  @media (min-width: 1536px) { .grid-anime { grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); } }
  @media (min-width: 1920px) { .grid-anime { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } }

  .grid-anime--dense  { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-sm); }
  .grid-anime--spacey { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-xl); }

  /* ──────────────────────────────────────────────────────────────
     RAIL — horizontal scroll (continue-watching, recommendations)
  ────────────────────────────────────────────────────────────── */
  .rail {
    position: relative;
    --rail-fade-color: var(--surface-canvas);
  }
  .rail__title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-block-end: var(--space-md);
  }
  .rail__title-text { font-size: var(--text-lg); font-weight: var(--w-semibold); letter-spacing: var(--tracking-tight); }
  .rail__see-all { color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--w-medium); }
  .rail__see-all:hover { color: var(--brand-text); }

  .rail__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(140px, 28vw, 200px);
    gap: var(--space-md);
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter-page);
    padding-inline: var(--gutter-page);
    margin-inline: calc(-1 * var(--gutter-page));
    padding-block: var(--space-xs);
    scrollbar-width: none;
  }
  .rail__track::-webkit-scrollbar { display: none; }
  .rail__track > * { scroll-snap-align: start; }
  @media (min-width: 1024px) { .rail__track { grid-auto-columns: 200px; } }
  @media (min-width: 1536px) { .rail__track { grid-auto-columns: 216px; } }

  /* Edge fade overlays */
  .rail::before, .rail::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: var(--gutter-page);
    pointer-events: none;
    z-index: 2;
  }
  .rail::before { inset-inline-start: 0;  background: linear-gradient(90deg, var(--rail-fade-color), transparent); }
  .rail::after  { inset-inline-end: 0;    background: linear-gradient(270deg, var(--rail-fade-color), transparent); }

  /* ──────────────────────────────────────────────────────────────
     PAGE TEMPLATES
  ────────────────────────────────────────────────────────────── */
  .layout-detail {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  @media (min-width: 1024px) {
    .layout-detail {
      grid-template-columns: minmax(0, 1fr) 320px;
      gap: var(--space-2xl);
    }
  }

  .layout-profile {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    align-items: start;
  }
  @media (min-width: 1024px) {
    .layout-profile {
      grid-template-columns: 240px minmax(0, 1fr);
      gap: var(--space-xl);
    }
  }

  .layout-watch {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: var(--space-lg);
  }
  @media (min-width: 1280px) {
    .layout-watch {
      grid-template-columns: minmax(0, 1fr) 360px;
      grid-template-rows: auto;
    }
  }

  .layout-discover {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  @media (min-width: 1024px) {
    .layout-discover {
      grid-template-columns: 280px minmax(0, 1fr);
      gap: var(--space-xl);
    }
  }

  /* ──────────────────────────────────────────────────────────────
     SECTION rhythm
  ────────────────────────────────────────────────────────────── */
  .section { padding-block: var(--gutter-section); }
  .section--hero { padding-block: 0 var(--gutter-section); }
  .section--tight { padding-block: var(--space-lg); }

  .section__header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-md);
    margin-block-end: var(--space-lg);
    flex-wrap: wrap;
  }
  .section__title { font-size: var(--text-xl); font-weight: var(--w-semibold); letter-spacing: var(--tracking-tight); }
  .section__subtitle { color: var(--text-secondary); margin-block-start: var(--space-2xs); }

  /* ──────────────────────────────────────────────────────────────
     SPLIT — two-column with optional reverse
  ────────────────────────────────────────────────────────────── */
  .split {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  @media (min-width: 768px)  { .split { grid-template-columns: 1fr 1fr; } }
  .split--reverse > :first-child { order: 2; }
  @media (min-width: 768px)  { .split--reverse > :first-child { order: 0; } }
  .split--narrow-first { grid-template-columns: 1fr; }
  @media (min-width: 768px)  { .split--narrow-first { grid-template-columns: 320px 1fr; } }

  /* ──────────────────────────────────────────────────────────────
     CLUSTER — flex-wrap rows (pills, chips)
  ────────────────────────────────────────────────────────────── */
  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
  }
  .cluster--md { gap: var(--space-md); }
  .cluster--lg { gap: var(--space-lg); }

  /* ──────────────────────────────────────────────────────────────
     FRAME — fixed aspect-ratio container with cover image
  ────────────────────────────────────────────────────────────── */
  .frame { position: relative; overflow: hidden; border-radius: var(--radius-md); background: var(--surface-elevated); }
  .frame > img, .frame > video, .frame > picture > img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
  }
  .frame--2-3   { aspect-ratio: 2 / 3; }
  .frame--16-9  { aspect-ratio: 16 / 9; }
  .frame--4-3   { aspect-ratio: 4 / 3; }
  .frame--1-1   { aspect-ratio: 1 / 1; }
  .frame--21-9  { aspect-ratio: 21 / 9; }

  /* ──────────────────────────────────────────────────────────────
     CENTER — full-bleed centered content
  ────────────────────────────────────────────────────────────── */
  .center {
    display: grid;
    place-items: center;
    text-align: center;
    min-height: 60vh;
  }

  /* ──────────────────────────────────────────────────────────────
     CONTAINER QUERIES — components adapt to slot, not viewport
  ────────────────────────────────────────────────────────────── */
  .container-host { container: host / inline-size; }
  .card-host      { container: card / inline-size; }
  .rail-host      { container: rail / inline-size; }

  @container card (min-width: 220px) { .card-anime__title { font-size: var(--text-base); } }
  @container card (min-width: 280px) {
    .card-anime__synopsis { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  }

  @container host (min-width: 720px) {
    .composed-card { grid-template-columns: 200px 1fr; }
  }

  /* ──────────────────────────────────────────────────────────────
     STICKY rail / sidebar
  ────────────────────────────────────────────────────────────── */
  .sticky-top {
    position: sticky;
    top: calc(var(--header-height) + var(--space-md));
    align-self: start;
  }
  @media (max-width: 1023px) { .sticky-top { position: static; } }

  /* ──────────────────────────────────────────────────────────────
     BOTTOM TAB BAR — mobile primary nav
  ────────────────────────────────────────────────────────────── */
  .tabbar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: var(--z-fixed);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    height: 64px;
    padding-bottom: env(safe-area-inset-bottom, 0);
    background: var(--surface-glass);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border-block-start: 1px solid var(--border-subtle);
  }
  @media (min-width: 1024px) { .tabbar { display: none; } }
  body { padding-bottom: 64px; padding-bottom: calc(64px + env(safe-area-inset-bottom, 0)); }
  @media (min-width: 1024px) { body { padding-bottom: 0; } }

  /* ──────────────────────────────────────────────────────────────
     MEDIA-OBJECT — image + content side by side
  ────────────────────────────────────────────────────────────── */
  .media-object {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-md);
    align-items: start;
  }
  .media-object__media { flex-shrink: 0; }
}