/* fcc-layout.css — Grid, container, and responsive utilities
 *
 * Depends on: fcc-tokens.css
 *
 * Breakpoints:
 *   sm:  ≥560px
 *   md:  ≥768px
 *   lg:  ≥1024px
 *   xl:  ≥1280px
 */

/* ── Container ─────────────────────────────────────────────────────────────── */
.fcc-container       { max-width: var(--container);    margin: 0 auto; padding: 0 var(--sp-6); }
.fcc-container--sm   { max-width: var(--container-sm); }
.fcc-container--lg   { max-width: var(--container-lg); }
.fcc-container--xl   { max-width: var(--container-xl); }

/* ── Stack (vertical flex) ─────────────────────────────────────────────────── */
.fcc-stack     { display: flex; flex-direction: column; gap: var(--sp-4); }
.fcc-stack--sm { gap: var(--sp-2); }
.fcc-stack--lg { gap: var(--sp-8); }

/* ── Row (horizontal flex) ─────────────────────────────────────────────────── */
.fcc-row          { display: flex; align-items: center; gap: var(--sp-4); }
.fcc-row--sm      { gap: var(--sp-2); }
.fcc-row--between { justify-content: space-between; }
.fcc-row--wrap    { flex-wrap: wrap; }

/* ── Grid ──────────────────────────────────────────────────────────────────── */
.fcc-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}
.fcc-grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); }
.fcc-grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.fcc-grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }

/* Fixed column grids (responsive) */
.fcc-cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.fcc-cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.fcc-cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }

@media (max-width: 767px) {
  .fcc-cols-2, .fcc-cols-3, .fcc-cols-4 {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .fcc-cols-3 { grid-template-columns: repeat(2, 1fr); }
  .fcc-cols-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ── Section spacing ───────────────────────────────────────────────────────── */
.fcc-section {
  padding-top: var(--sp-10);
  padding-bottom: var(--sp-10);
}

/* ── Topbar offset (push content below fixed topbar) ───────────────────────── */
.fcc-below-topbar {
  padding-top: var(--topbar-h, 56px);
}

/* ── Visually hidden (accessible) ──────────────────────────────────────────── */
.fcc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Truncate text ─────────────────────────────────────────────────────────── */
.fcc-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fcc-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fcc-line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Prose (long-form text) ────────────────────────────────────────────────── */
.fcc-prose {
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--text);
}
.fcc-prose h1, .fcc-prose h2, .fcc-prose h3 {
  line-height: var(--leading-tight);
  margin: var(--sp-8) 0 var(--sp-3);
}
.fcc-prose h1 { font-size: var(--text-3xl); }
.fcc-prose h2 { font-size: var(--text-2xl); }
.fcc-prose h3 { font-size: var(--text-xl); }
.fcc-prose p { margin: 0 0 var(--sp-4); }
.fcc-prose a { color: var(--accent); }
.fcc-prose a:hover { color: var(--accent-2); text-decoration: underline; }
.fcc-prose code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--overlay-light);
  padding: 0.15em 0.35em;
  border-radius: var(--radius-sm);
}