/* layout.css — page grid and result grid. Aspect-ratio breakpoints. */
@layer layout {
  /* The container IS the viewport — no inner max-width. Padding scales with
     viewport so on small screens content hugs edges, on huge screens
     content doesn't pool in a narrow column. The user explicitly asked
     for this: the entire window is the canvas. */
  main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-l);
    padding-inline: var(--topbar-pad-x);
    padding-block: var(--space-l);
    inline-size: 100%;
  }

  .page-head {
    display: grid;
    gap: var(--space-xs);
  }

  .page-head h1 {
    font-size: var(--type-h1);
    letter-spacing: -0.02em;
  }

  .tagline {
    color: var(--muted);
    font-size: var(--type-small);
  }

  .auth-bar {
    display: inline-flex;
    align-items: center;
    gap: var(--space-s);
    color: var(--muted);
    font-size: var(--type-small);
    margin-block-start: var(--space-xs);
  }

  .auth-user {
    color: var(--fg);
  }

  .search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-m);
    align-items: start;
  }

  .tiles {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-l);
  }

  .result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: var(--space-m);
    min-inline-size: 0;
  }

  /* square-ish + landscape — put the form inline with room */
  @media (aspect-ratio >= 1/1) {
    .search-form {
      grid-template-columns: minmax(0, 1fr) auto auto;
      align-items: center;
    }
  }

  /* landscape — show Lens + Cosmos side by side inside each tile */
  @media (aspect-ratio >= 4/3) {
    .tile-buckets {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .result-grid {
      grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    }
  }

  @media (aspect-ratio >= 16/9) {
    .result-grid {
      grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    }
  }

  /* tall portrait — compact paddings */
  @media (aspect-ratio < 3/4) {
    main {
      padding-inline: var(--space-m);
      padding-block: var(--space-m);
      gap: var(--space-m);
    }

    .result-grid {
      grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
      gap: var(--space-s);
    }

    .tile-thumb {
      inline-size: 3.5rem;
      block-size: 3.5rem;
    }
  }
}