/* ==========================================================================
   LAYOUTS — Containers, grids, section spacing, and layout mode classes
   l-* naming: l-app (shell), l-marketing, l-hub, l-article, l-tool, l-legal, l-sitemap
   Bridge: .page, .site-main, .page-container, .content-shell remain valid.
   Depends on: tokens.css
   ========================================================================== */


/* ==========================================================================
   SHELL — l-app wraps the full page
   ========================================================================== */

.l-app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Push footer to bottom when content is short */
.l-app > main {
  flex: 1;
}


/* ==========================================================================
   CONTAINERS
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: 24px;
}

.container-wide {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 24px;
}

.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: 24px;
}

/* Legacy .page and main.page — preserved for backward compat */
.page,
main.page {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: 24px;
}

.page-container {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding-top: clamp(14px, 2.4vw, 28px);
  padding-bottom: clamp(30px, 4.8vw, 64px);
}

/* site-main adds top breathing room */
.site-main {
  padding-top: var(--space-7);
}

/* content-shell caps width inside site-main */
.content-shell {
  max-width: var(--container-lg);
}

/* Article reading container */
.article-container {
  max-width: 72ch;
  margin-inline: auto;
  padding-inline: 20px;
}

.article-container p {
  line-height: var(--line-height-relaxed);
}

.article-container ul,
.article-container ol {
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-5);
}

.article-container li {
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-2);
}

html.dark .page-container {
  background: transparent;
}


/* ==========================================================================
   SECTION SPACING
   ========================================================================== */

section {
  padding-block: var(--space-9);       /* 80px default */
  margin-bottom: clamp(28px, 3vw, 52px);
}

.section-tight {
  padding-block: var(--space-7);       /* 48px */
}

.section-compact {
  padding-block: var(--space-5);       /* 24px */
}

.section {
  margin-bottom: clamp(40px, 4.8vw, 84px);
}

@media (max-width: 768px) {
  section {
    padding: 40px 0;
  }
}


/* ==========================================================================
   GRID SYSTEM
   ========================================================================== */

/* Auto-fit grids — various names preserved for backward compat */
.grid,
.cards-grid,
.pillars-grid,
.latest-posts-grid,
.features-grid,
.feature-grid,
.topic-grid,
.post-related-grid,
.related-posts__grid,
.tools-grid,
.articles-grid,
.tips-grid {
  display: grid;
  gap: clamp(14px, 2vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: stretch;
  grid-auto-flow: row;
}

/* Named column grids */
.grid-2 {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row;
  align-items: stretch;
}

.grid-4 {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(4, 1fr);
}

/* Two-col specialty grids */
.tool-grid,
.calculator-grid,
.faq-grid,
.section-grid,
.benefit-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(2, 1fr);
}

/* New c-* grid aliases */
.c-card-grid {
  display: grid;
  gap: clamp(14px, 2vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: stretch;
}

/* Grid breakpoints */
@media (max-width: 1100px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .grid,
  .grid-3,
  .cards-grid,
  .pillars-grid,
  .latest-posts-grid,
  .features-grid,
  .feature-grid,
  .topic-grid,
  .post-related-grid,
  .related-posts__grid,
  .tools-grid,
  .articles-grid,
  .tips-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .cards-grid,
  .pillars-grid,
  .latest-posts-grid,
  .features-grid,
  .feature-grid,
  .topic-grid,
  .post-related-grid,
  .related-posts__grid,
  .tools-grid,
  .tool-grid,
  .articles-grid,
  .faq-grid,
  .section-grid,
  .benefit-grid,
  .tips-grid,
  .calculator-grid,
  .c-card-grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   LAYOUT MODES — applied on <main>
   Frontmatter key: uiLayout: marketing | hub | article | tool | legal | sitemap
   Maps to class:   l-marketing | l-hub | l-article | l-tool | l-legal | l-sitemap
   ========================================================================== */

/*
  l-marketing  — Homepage & landing pages. No max-width on main; sections are
                 full-width with inner containers controlling width.
*/
/*
  l-hub  — Hub pages (library, tools, system). Constrained content width,
           standard vertical rhythm.
*/
/*
  l-article  — Long-form articles. Narrows .page-container & .content-shell
               to the article reading width.
*/
.l-article .page-container,
.l-article .content-shell {
  max-width: min(1380px, calc(100vw - 32px));
}

.c-doc-shell {
  position: relative;
}

.c-doc-layout {
  display: grid;
  grid-template-columns: minmax(0, 72ch) minmax(240px, 280px);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.c-doc-layout__main {
  min-width: 0;
}

.c-doc-layout__sidebar {
  min-width: 0;
}

@media (max-width: 1100px) {
  .l-article .page-container,
  .l-article .content-shell {
    max-width: min(980px, calc(100vw - 24px));
  }

  .c-doc-layout {
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 28px;
  }
}

@media (max-width: 900px) {
  .l-article .page-container,
  .l-article .content-shell {
    max-width: var(--container-article);
  }

  .c-doc-layout {
    grid-template-columns: 1fr;
  }

  .c-doc-layout__sidebar {
    display: none;
  }
}

/*
  l-tool  — Calculator / tool pages. Moderate max-width with breathing room.
*/
.l-tool .page-container,
.l-tool .content-shell {
  max-width: var(--container-md);
}

/*
  l-legal  — Privacy, terms. Narrow document feel.
*/
.l-legal .page-container,
.l-legal .content-shell {
  max-width: var(--container-narrow);
}

/*
  l-sitemap  — Sitemap page. Medium-narrow list layout.
*/
.l-sitemap .page-container,
.l-sitemap .content-shell {
  max-width: var(--container-sm);
}


/* ==========================================================================
   RESPONSIVE CONTAINERS
   ========================================================================== */

@media (max-width: 768px) {
  .container,
  .page,
  main.page {
    padding-inline: 16px;
  }
}

@media (max-width: 600px) {
  .container {
    width: 92%;
  }

  .page-container,
  main.page {
    padding: 20px;
  }
}