/*
 * Launch91 — Layout, Readability & Full-Width Overhaul
 *
 * Architecture:
 *   - Page containers: max-width 1440px, gutters 1rem mobile / 3rem tablet / 4rem desktop
 *   - Article page: wrapper = full 1440px (headline/image span full width)
 *                   reading column (.article-body) = max 760px centered inside wrapper
 *   - Homepage/archive: full 1440px grids
 *   - Mobile: all gutters shrink gracefully, no layout breakage
 *   - NO font-family changes, NO color changes, NO design language changes
 *
 * @package Launch91
 */

/* ==========================================================================
   1. CSS CUSTOM PROPERTIES — single source of truth for layout
   ========================================================================== */

:root {
  --site-max:       1440px;
  --gutter-sm:      1rem;    /* mobile (≤767px) */
  --gutter-md:      3rem;    /* tablet (768–1023px) */
  --gutter-lg:      4rem;    /* desktop (1024px+) */
  --article-read:   760px;   /* reading column — text only */
}

/* ==========================================================================
   2. CONTAINER WIDTHS — all main wrappers to 1440px
   ========================================================================== */

/* BEM containers (main.css) — upgrade from 1200px */
.site-header__inner,
.search-bar__inner,
.hero,
.category-tabs__inner,
.article-section__inner,
.archive-section__inner,
.podcast-archive__inner,
.newsletter-inline__inner,
.footer-newsletter__inner,
.footer-inner__content,
.article-header__inner,
.related-articles__inner,
.episode-header__inner,
.episode-embed__inner,
.episode-timestamps,
.episode-notes__inner,
.page-single__inner,
.about-page__inner,
.newsletter-page__inner,
.search-section__inner,
.error-404__inner,
.error-404__recent-inner {
  max-width: var(--site-max);
  padding-left: var(--gutter-sm);
  padding-right: var(--gutter-sm);
}

/* Tailwind-based containers (front-page, archive, footer, single) */
.max-w-\[1400px\] {
  max-width: var(--site-max) !important;
}

/* Tablet gutters */
@media (min-width: 768px) {
  .site-header__inner,
  .search-bar__inner,
  .hero,
  .category-tabs__inner,
  .article-section__inner,
  .archive-section__inner,
  .podcast-archive__inner,
  .newsletter-inline__inner,
  .footer-newsletter__inner,
  .footer-inner__content,
  .article-header__inner,
  .related-articles__inner,
  .episode-header__inner,
  .episode-embed__inner,
  .episode-timestamps,
  .episode-notes__inner,
  .page-single__inner,
  .about-page__inner,
  .newsletter-page__inner,
  .search-section__inner,
  .error-404__inner,
  .error-404__recent-inner {
    padding-left: var(--gutter-md);
    padding-right: var(--gutter-md);
  }
}

/* Desktop gutters */
@media (min-width: 1024px) {
  .site-header__inner,
  .article-section__inner,
  .archive-section__inner,
  .footer-inner__content,
  .newsletter-inline__inner,
  .footer-newsletter__inner,
  .hero {
    padding-left: var(--gutter-lg);
    padding-right: var(--gutter-lg);
  }
}

/* ==========================================================================
   3. ARTICLE PAGE — full-width wrapper, narrow reading column
   ========================================================================== */

/*
 * The article <article> and related-posts <div> now use max-w-[1400px].
 * Their own gutters come from px-4 md:px-8 lg:px-16 on the HTML element.
 * The READING TEXT (article-body) stays narrow and centered for readability.
 */

.article-body {
  font-size: 1.125rem !important;
  line-height: 1.85 !important;
  /* No max-width — fills same width as hero image.
     Gutters come from the article wrapper's px-4 md:px-8 lg:px-16. */
}

/* Article headline — spans full wrapper width */
article h1.font-heading {
  font-size: clamp(1.875rem, 4vw, 3.25rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  max-width: none;                   /* full width — not constrained like text */
}

/* Article hero image — full wrapper width */
article .w-full.mb-8 {
  max-width: none;
}

/* Author row — full wrapper width */
article .flex.items-center.gap-3.mb-6 {
  max-width: none;
}

/* Category + date meta row */
article .flex.flex-wrap.items-center.gap-2.mb-4 {
  max-width: none;
}

/* Newsletter CTA, tags, author bio — all fill full wrapper width like the image */
#articleNewsletterCTA,
article .mt-8.pt-6.border-t-2,
article .mt-8.pt-8.border-t-4 {
  max-width: none;
}

/* Article body paragraphs */
.article-body p {
  margin-bottom: 1.75rem !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

.article-body h2 {
  font-size: 1.5rem !important;
  margin-top: 2.75rem !important;
  margin-bottom: 1rem !important;
  line-height: 1.25 !important;
}

.article-body h3 {
  font-size: 1.25rem !important;
  margin-top: 2.25rem !important;
  margin-bottom: 0.75rem !important;
  line-height: 1.3 !important;
}

.article-body ul,
.article-body ol {
  padding-left: 1.75rem;
  margin-bottom: 1.75rem;
  line-height: 1.8;
}

.article-body li { margin-bottom: 0.65rem; }

.article-body blockquote {
  font-size: 1.15rem !important;
  line-height: 1.72 !important;
  margin: 2.25rem 0 !important;
  padding: 1rem 1.5rem !important;
}

/* Tailwind class overrides on the article-body div */
div.article-body.text-base,
div.article-body.leading-relaxed {
  font-size: 1.125rem !important;
  line-height: 1.85 !important;
}

/* Related posts grid — span full wrapper */
.max-w-\[1400px\] .grid.grid-cols-1.md\:grid-cols-2.gap-6 {
  max-width: none;
}

/* Mobile: tighten article body text */
@media (max-width: 639px) {
  .article-body {
    font-size: 1.0625rem !important;
    line-height: 1.8 !important;
  }
  .article-body p { margin-bottom: 1.5rem !important; }
  .article-body h2 {
    font-size: 1.3125rem !important;
    margin-top: 2rem !important;
  }
  .article-body h3 { font-size: 1.125rem !important; }
  article h1.font-heading {
    font-size: 1.75rem;
    line-height: 1.22;
  }
}

/* ==========================================================================
   4. GLOBAL TYPOGRAPHY
   ========================================================================== */

html { font-size: 17px; }

body {
  line-height: 1.75;
  letter-spacing: 0.012em;
}

@media (max-width: 639px) {
  html { font-size: 16px; }
  body { line-height: 1.7; }
}

@media (min-width: 1440px) {
  html { font-size: 18px; }
}

/* ==========================================================================
   5. HOMEPAGE — Card & section typography
   ========================================================================== */

/* Hero card headline */
.lg\:col-span-8 h2.font-heading {
  font-size: clamp(1.5rem, 2.8vw, 2.5rem);
  line-height: 1.2;
}

/* Hero excerpt */
.lg\:col-span-8 .text-sm.max-w-2xl {
  font-size: 0.9375rem !important;
  line-height: 1.7;
}

/* Card h3/h2 titles */
.brutalist-card h3.font-heading,
.brutalist-card h2.font-heading {
  font-size: 1.0625rem;
  line-height: 1.3;
}

/* Card excerpts */
.brutalist-card p.text-xs,
.brutalist-card p.text-sm {
  font-size: 0.875rem !important;
  line-height: 1.65 !important;
}

/* Card meta */
.brutalist-card .text-\[10px\] {
  font-size: 0.6875rem !important;
  letter-spacing: 0.04em;
}

/* Latest stories list titles */
.space-y-6 h3.font-heading {
  font-size: 1rem;
  line-height: 1.35;
}

@media (min-width: 768px) {
  .space-y-6 h3.font-heading.md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.35;
  }
}

/* Sidebar newsletter widget body */
.brutalist-card p.text-xs.font-body {
  font-size: 0.9375rem !important;
  line-height: 1.65 !important;
}

/* Section heading labels */
h2.font-heading.font-bold.text-2xl {
  font-size: 1.375rem;
}

@media (min-width: 768px) {
  h2.font-heading.font-bold.text-2xl,
  h2.font-heading.md\:text-3xl {
    font-size: 1.75rem;
  }
}

/* ==========================================================================
   6. ARCHIVE / CATEGORY PAGES
   ========================================================================== */

main h1.font-heading.font-bold {
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  line-height: 1.2;
}

/* Archive card titles */
.grid h2.font-heading.text-base,
.grid h3.font-heading.text-base {
  font-size: 1rem !important;
  line-height: 1.35 !important;
}

@media (min-width: 768px) {
  .grid h2.font-heading.text-base,
  .grid h3.font-heading.text-base {
    font-size: 1.0625rem !important;
  }
}

/* Archive card excerpts */
.grid p.text-xs {
  font-size: 0.875rem !important;
  line-height: 1.6 !important;
}

/* ==========================================================================
   7. MOBILE NAV
   ========================================================================== */

.mobile-nav-overlay a {
  font-size: 1.625rem !important;
  padding: 1rem 0 !important;
}

/* ==========================================================================
   8. PAGE CONTENT (About, Privacy, Terms, etc.)
   ========================================================================== */

.page-content p {
  font-size: 1.0625rem !important;
  line-height: 1.85 !important;
  margin-bottom: 1.5rem !important;
}

.page-content h2 { font-size: 1.625rem; margin-top: 2.5rem; margin-bottom: 1rem; }
.page-content h3 { font-size: 1.3rem; margin-top: 2rem; margin-bottom: 0.75rem; }

.page-content ul,
.page-content ol { padding-left: 1.75rem; margin-bottom: 1.5rem; }
.page-content li { margin-bottom: 0.5rem; line-height: 1.75; }

@media (max-width: 639px) {
  .page-content p { font-size: 1rem !important; line-height: 1.75 !important; }
  .page-content h2 { font-size: 1.375rem; }
  .page-content h3 { font-size: 1.125rem; }
}

/* ==========================================================================
   9. FOOTER
   ========================================================================== */

footer p.text-sm.font-body {
  font-size: 0.9375rem !important;
  line-height: 1.7 !important;
}

footer .space-y-2.text-xs.font-heading li a {
  font-size: 0.875rem !important;
}

footer .text-\[10px\].font-heading { font-size: 0.75rem !important; }

/* ==========================================================================
   10. NEWSLETTER
   ========================================================================== */

.newsletter-inline__text,
.footer-newsletter__text { font-size: 1rem; line-height: 1.7; }

/* ==========================================================================
   11. PODCAST & SEARCH
   ========================================================================== */

.episode-notes p,
.episode-notes .article-body { font-size: 1.0625rem; line-height: 1.8; }

/* ==========================================================================
   12. RESPONSIVE SAFETY
   ========================================================================== */

@media (max-width: 767px) {
  /* Prevent any horizontal overflow */
  body { overflow-x: hidden; }

  /* Homepage hero height shorter on mobile */
  .h-\[300px\] { height: 220px; }

  /* Keep article body text from overflowing phone */
  .article-body { overflow-wrap: break-word; }
}

/* Tablet-only 2-col grid (sm breakpoint) */
@media (min-width: 640px) and (max-width: 767px) {
  .grid-cols-1:not(.mobile-single) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}