/**
 * Quwa Theme - Layout Styles
 *
 * 12-column grid system matching Figma design
 * Based on reference files: HomePage.tsx, SinglePost.tsx, Archive.tsx
 *
 * @package Quwa_Theme
 * @since 1.0.0
 */

/* ===========================
   RESET
   =========================== */

*, *::before, *::after {
  box-sizing: border-box;
}

/* ===========================
   CONTAINER
   =========================== */

.container {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

@media (min-width: 768px) {
  .container {
    padding-left: var(--container-padding-lg);
    padding-right: var(--container-padding-lg);
  }
}

.container-narrow {
  max-width: var(--container-narrow);
}

.container-fluid {
  max-width: none;
}

/* ===========================
   BASE GRID - Mobile First
   =========================== */

.layout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap-mobile);
}

/* Desktop Grid: 12 columns */
@media (min-width: 1024px) {
  .layout-grid {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--grid-gap);
  }
}

/* ===========================
   COLUMN LAYOUTS
   =========================== */

/* ===========================
   HOMEPAGE LAYOUT - Breaking Defense style
   =========================== */

/* -------------------------
   HERO SECTION: Full Width (no sidebar)
   Centered with whitespace on sides
   ------------------------- */
.layout-homepage-hero {
  display: block;
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1440px) {
  .layout-homepage-hero {
    max-width: 1100px;
  }
}

/* -------------------------
   LATEST NEWS: Content + Sidebar RIGHT
   Centered with sidebar on right for ads
   ------------------------- */
.layout-homepage-latest {
  display: block;
  width: 100%;
}

@media (min-width: 1024px) {
  .layout-homepage-latest {
    display: grid;
    /* Content (flexible, ~700px) + Sidebar (300px for ads) */
    grid-template-columns: 1fr 300px;
    gap: 32px;
    max-width: 1000px;
    margin-left: auto;   /* Center the grid */
    margin-right: auto;
  }
}

@media (min-width: 1440px) {
  .layout-homepage-latest {
    max-width: 1100px;
    gap: 40px;
  }
}

/* Right sidebar - hidden on mobile, visible on desktop */
.layout-homepage-latest .sidebar-right {
  display: none !important;
}

@media (min-width: 1024px) {
  .layout-homepage-latest .sidebar-right {
    display: block !important;
    width: 300px;
    flex-shrink: 0;
  }
}

/* Main content fills remaining space */
.layout-homepage-latest .main-content {
  min-width: 0;
  width: 100%;
}

/* -------------------------
   LEGACY: Original layout-homepage (for backwards compat)
   ------------------------- */
.layout-homepage {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap-mobile);
}

@media (min-width: 1024px) {
  .layout-homepage {
    grid-template-columns: 1fr 300px;
    gap: 32px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Hide legacy whitespace columns */
.layout-homepage .whitespace,
.layout-homepage-full .whitespace {
  display: none !important;
}

.layout-homepage .main-content {
  min-width: 0;
  width: 100%;
}

.layout-homepage .sidebar-right {
  display: none;
}

@media (min-width: 1024px) {
  .layout-homepage .sidebar-right {
    display: block;
    width: 300px;
  }
}

/* Homepage Full Width - for top ad section */
.layout-homepage-full {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.layout-homepage-full .lg\:col-span-11 {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Single Post: 1|7|4 columns (whitespace | content | sidebar) */
.layout-single {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap-mobile);
}

@media (min-width: 1024px) {
  .layout-single {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--grid-gap);
  }

  .layout-single .whitespace {
    grid-column: span 1;
  }

  .layout-single .main-content {
    grid-column: span 7;
  }

  .layout-single .sidebar-right {
    grid-column: span 4;
  }
}

/* Single Post Layout - Content LEFT, Sidebar RIGHT
   FIGMA: 12-col grid with 7-col content, 4-col sidebar */
.single-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 1024px) {
  .single-layout {
    grid-template-columns: minmax(0, 700px) 300px;
    gap: 48px;
    padding-left: 80px; /* FIGMA: matches lg:col-span-1 left spacer */
  }
}

/* Article Main Column - LEFT side */
.article-main {
  grid-column: 1;
  min-width: 0;
  max-width: 700px;  /* FIGMA: constrain content width like col-span-7 */
}

/* Article Sidebar - RIGHT side */
.article-sidebar {
  grid-column: 1;
  display: none !important;
}

@media (min-width: 1024px) {
  .article-sidebar {
    grid-column: 2;
    display: block !important;  /* Force visibility on desktop */
  }
}

/* Archive/Category/Tag: 1|8|3 columns */
.layout-archive {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap-mobile);
}

@media (min-width: 1024px) {
  .layout-archive {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--grid-gap);
  }

  .layout-archive .whitespace {
    grid-column: span 1;
  }

  .layout-archive .main-content {
    grid-column: span 8;
  }

  .layout-archive .sidebar-right,
  .layout-archive .sidebar {
    grid-column: span 3;
  }
}

/* ===========================
   ARCHIVE PAGE - BREAKING DEFENSE STYLE
   Centered layout with large bold H1
   =========================== */

.archive-page {
  background-color: #fff;
}

/* Archive Header - Centered Large Bold Title */
.archive-header-centered {
  text-align: center;
  padding: 40px 24px;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .archive-header-centered {
    padding: 48px 40px;
  }
}

@media (min-width: 1024px) {
  .archive-header-centered {
    padding: 56px 60px 48px;
  }
}

.archive-header-inner {
  max-width: 900px;
  margin: 0 auto;
}

/* Main Archive Title - Large, Bold, Centered */
.archive-title-main {
  font-family: var(--font-heading, 'Poppins', sans-serif);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-heading, #111827);
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

@media (min-width: 768px) {
  .archive-title-main {
    font-size: 3rem;
  }
}

@media (min-width: 1024px) {
  .archive-title-main {
    font-size: 3.5rem;
  }
}

.archive-description {
  font-family: var(--font-body, 'Vollkorn', serif);
  font-size: 1.125rem;
  color: var(--color-text-secondary, #6b7280);
  max-width: 600px;
  margin: 16px auto 0;
  line-height: 1.6;
}

/* Archive Content Section */
.archive-content-section {
  padding: 32px 24px 48px;
}

@media (min-width: 768px) {
  .archive-content-section {
    padding: 40px 40px 64px;
  }
}

@media (min-width: 1024px) {
  .archive-content-section {
    padding: 48px 60px 80px;
  }
}

/* Archive Layout - Centered Content + Sidebar */
.archive-layout-centered {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .archive-layout-centered {
    grid-template-columns: 1fr 320px;
    gap: 48px;
  }
}

/* Main Content Area */
.archive-main-content {
  min-width: 0;
}

.archive-posts-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 768px) {
  .archive-posts-list {
    gap: 32px;
  }
}

/* Archive Pagination */
.archive-pagination {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--color-border, #e5e7eb);
}

.pagination-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.pagination-links a,
.pagination-links span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  font-family: var(--font-heading, 'Poppins', sans-serif);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.pagination-links a {
  background-color: #f3f4f6;
  color: var(--color-heading, #111827);
}

.pagination-links a:hover {
  background-color: var(--color-accent, #0B5563);
  color: #fff;
}

.pagination-links span.current {
  background-color: var(--color-accent, #0B5563);
  color: #fff;
}

/* No Posts State */
.archive-no-posts {
  text-align: center;
  padding: 64px 24px;
}

.archive-no-posts h2 {
  font-family: var(--font-heading, 'Poppins', sans-serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-heading, #111827);
  margin-bottom: 12px;
}

.archive-no-posts p {
  color: var(--color-text-secondary, #6b7280);
  margin-bottom: 24px;
}

/* Archive Sidebar */
.archive-sidebar {
  display: none;
}

@media (min-width: 1024px) {
  .archive-sidebar {
    display: block;
  }
}

.archive-sidebar-sticky {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.archive-sidebar-widgets {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Sidebar Recommended Section */
.sidebar-recommended {
  background-color: #f9fafb;
  padding: 20px;
  border-radius: 4px;
}

.recommended-posts-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.recommended-post-item {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.recommended-post-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.recommended-post-category {
  display: inline-block;
  margin-bottom: 8px;
}

.recommended-post-category a {
  font-family: var(--font-heading, 'Poppins', sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent, #0B5563);
  text-decoration: none;
}

.recommended-post-category a:hover {
  text-decoration: underline;
}

.recommended-post-title {
  margin: 0;
  font-family: var(--font-heading, 'Poppins', sans-serif);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
}

.recommended-post-title a {
  color: var(--color-heading, #111827);
  text-decoration: none;
}

.recommended-post-title a:hover {
  color: var(--color-accent, #0B5563);
}

/* Sidebar Tags Cloud */
.sidebar-tags-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sidebar-tag {
  display: inline-block;
  padding: 6px 12px;
  font-family: var(--font-heading, 'Poppins', sans-serif);
  font-size: 0.75rem;
  font-weight: 500;
  background-color: #f3f4f6;
  color: var(--color-text-secondary, #6b7280);
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.sidebar-tag:hover {
  background-color: var(--color-accent, #0B5563);
  color: #fff;
}

/* Sidebar Ad Spacing */
.sidebar-ad-bottom {
  margin-top: 8px;
}

/* Archive 2|8|2: For archives with sidebars on both sides */
.layout-archive-full {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap-mobile);
}

@media (min-width: 1024px) {
  .layout-archive-full {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--grid-gap);
  }

  .layout-archive-full .sidebar-left {
    grid-column: span 2;
  }

  .layout-archive-full .main-content {
    grid-column: span 8;
  }

  .layout-archive-full .sidebar-right {
    grid-column: span 2;
  }
}

/* Tag Page Hero: Split layout */
.layout-tag-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap-mobile);
}

@media (min-width: 1024px) {
  .layout-tag-hero {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--grid-gap);
  }

  .layout-tag-hero .tag-info {
    grid-column: span 5;
  }

  .layout-tag-hero .tag-featured {
    grid-column: span 7;
  }
}

/* Legacy layout-main for backwards compatibility */
.layout-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap-mobile);
}

@media (min-width: 1024px) {
  .layout-main {
    grid-template-columns: 1fr var(--sidebar-width);
    gap: var(--grid-gap);
  }
}

/* ===========================
   HIDE ELEMENTS RESPONSIVELY
   =========================== */

/* Hide sidebars and whitespace on mobile/tablet */
@media (max-width: 1023px) {
  .sidebar-left,
  .sidebar-right,
  .sidebar,
  .whitespace {
    display: none;
  }

  .main-content {
    grid-column: 1 !important;
  }
}

/* ===========================
   SIDEBAR STICKY
   =========================== */

.sidebar-sticky {
  position: sticky;
  top: var(--space-8); /* 32px from top */
  align-self: flex-start;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.sidebar-widget {
  padding: var(--space-6);
  background-color: var(--color-white);
}

.sidebar-widget-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-heading);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

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

.section {
  margin-bottom: var(--space-12); /* 48px mobile */
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

@media (min-width: 1024px) {
  .section {
    margin-bottom: var(--space-16); /* 64px desktop */
  }
}

.section-sm {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.section-lg {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

@media (min-width: 768px) {
  .section {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }

  .section-lg {
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
  }
}

/* ===========================
   POST GRIDS (within main content)
   =========================== */

.posts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap-mobile);
}

@media (min-width: 768px) {
  .posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .posts-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Featured Articles: 3 columns on desktop with 32px gap per Figma */
.featured-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap-mobile);
}

@media (min-width: 768px) {
  .featured-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8); /* 32px gap per Figma */
  }
}

/* Homepage Section Spacing */
.section-hero {
  /* No top padding - hero connects to ad section */
}

.section-latest {
  padding-top: var(--space-8);
  padding-bottom: var(--space-12);
}

@media (min-width: 1024px) {
  .section-latest {
    padding-top: var(--space-8);
    padding-bottom: var(--space-16);
  }
}

/* Latest News List */
.latest-news-list {
  /* Container for latest news items */
}

/* 12-column grid utility */
.grid-12 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 1024px) {
  .grid-12 {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-8);
  }
}

/* Column spans */
.col-span-1 { grid-column: span 1; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }
.col-span-7 { grid-column: span 7; }
.col-span-8 { grid-column: span 8; }
.col-span-9 { grid-column: span 9; }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12 { grid-column: span 12; }
.col-span-full { grid-column: 1 / -1; }

/* Responsive column spans */
@media (min-width: 1024px) {
  .lg\:col-span-1 { grid-column: span 1; }
  .lg\:col-span-2 { grid-column: span 2; }
  .lg\:col-span-3 { grid-column: span 3; }
  .lg\:col-span-4 { grid-column: span 4; }
  .lg\:col-span-5 { grid-column: span 5; }
  .lg\:col-span-6 { grid-column: span 6; }
  .lg\:col-span-7 { grid-column: span 7; }
  .lg\:col-span-8 { grid-column: span 8; }
  .lg\:col-span-9 { grid-column: span 9; }
  .lg\:col-span-10 { grid-column: span 10; }
  .lg\:col-span-11 { grid-column: span 11; }
  .lg\:col-span-12 { grid-column: span 12; }
}

/* ===========================
   AD UNIT LAYOUTS
   =========================== */

/* Top Header Ad - Left aligned with content */
.ad-section-top {
  margin-bottom: var(--space-8);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.ad-section-top .container {
  display: flex;
  justify-content: flex-start;
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

@media (min-width: 1024px) {
  .ad-section-top .container {
    padding-left: calc(var(--container-padding-lg) + 8.33%);
  }
}

/* Ad wrapper */
.ad-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  margin: var(--space-8) 0;
}

/* Sidebar Ad */
.sidebar-ad {
  margin-bottom: var(--space-8);
}

/* ===========================
   HERO SECTION
   =========================== */

.hero-article {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--space-8);
}

.hero-article-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

@media (min-width: 1024px) {
  .hero-article-image {
    height: 500px;
  }
}

/* No image placeholder */
.hero-no-image {
  width: 100%;
  height: 400px;
  background: var(--color-bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

@media (min-width: 1024px) {
  .hero-no-image {
    height: 500px;
  }
}

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

.grid {
  display: grid;
  gap: var(--grid-gap);
}

.grid-cols-1 {
  grid-template-columns: repeat(1, 1fr);
}

.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Responsive grid columns */
@media (min-width: 640px) {
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ===========================
   FLEXBOX UTILITIES
   =========================== */

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.flex-row {
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

/* Flex alignment */
.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.items-end {
  align-items: flex-end;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

/* Flex justify */
.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

/* Flex grow/shrink */
.flex-1 {
  flex: 1 1 0%;
}

.flex-auto {
  flex: 1 1 auto;
}

.flex-none {
  flex: none;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.shrink-0 {
  flex-shrink: 0;
}

.flex-grow {
  flex-grow: 1;
}

/* ===========================
   GAP UTILITIES
   =========================== */

.gap-0 { gap: 0; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.gap-10 { gap: var(--space-10); }
.gap-12 { gap: var(--space-12); }

/* Row and column gap */
.gap-x-4 { column-gap: var(--space-4); }
.gap-x-6 { column-gap: var(--space-6); }
.gap-x-8 { column-gap: var(--space-8); }

.gap-y-4 { row-gap: var(--space-4); }
.gap-y-6 { row-gap: var(--space-6); }
.gap-y-8 { row-gap: var(--space-8); }

/* ===========================
   STICKY
   =========================== */

.sticky {
  position: sticky;
  top: var(--space-4);
}

@media (min-width: 1024px) {
  .lg\:sticky {
    position: sticky;
    top: var(--space-4);
  }
}

/* Top-0 for sticky nav */
.top-0 {
  top: 0;
}

/* ===========================
   POSITION UTILITIES
   =========================== */

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.right-4 {
  right: var(--space-4);
}

/* ===========================
   WIDTH & HEIGHT
   =========================== */

.w-full {
  width: 100%;
}

.w-auto {
  width: auto;
}

.w-48 {
  width: 12rem;
}

.w-64 {
  width: 16rem;
}

.w-20 {
  width: 5rem;
}

.h-full {
  height: 100%;
}

.h-auto {
  height: auto;
}

.h-9 {
  height: 2.25rem;
}

.h-12 {
  height: 3rem;
}

.h-20 {
  height: 5rem;
}

.h-24 {
  height: 6rem;
}

.h-screen {
  height: 100vh;
}

.min-h-screen {
  min-height: 100vh;
}

.min-w-0 {
  min-width: 0;
}

.max-w-full {
  max-width: 100%;
}

.max-w-none {
  max-width: none;
}

.max-w-prose {
  max-width: var(--content-max);
}

.max-w-4xl {
  max-width: 56rem;
}

/* ===========================
   ASPECT RATIOS
   =========================== */

.aspect-auto { aspect-ratio: auto; }
.aspect-square { aspect-ratio: 1/1; }
.aspect-video { aspect-ratio: 16/9; }
.aspect-hero { aspect-ratio: 21/9; }
.aspect-4-3 { aspect-ratio: 4/3; }

/* ===========================
   DISPLAY UTILITIES
   =========================== */

.hidden {
  display: none;
}

.block {
  display: block;
}

@media (min-width: 640px) {
  .sm\:block { display: block; }
  .sm\:hidden { display: none; }
}

@media (min-width: 768px) {
  .md\:block { display: block; }
  .md\:flex { display: flex; }
  .md\:hidden { display: none; }
}

@media (min-width: 1024px) {
  .lg\:block { display: block; }
  .lg\:flex { display: flex; }
  .lg\:hidden { display: none; }
}

/* ===========================
   BORDER UTILITIES
   =========================== */

.border {
  border: 1px solid var(--color-border);
}

.border-t {
  border-top: 1px solid var(--color-border);
}

.border-b {
  border-bottom: 1px solid var(--color-border);
}

.border-y {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.border-b-2 {
  border-bottom: 2px solid var(--color-border);
}

.border-black {
  border-color: var(--color-black);
}

.border-gray-200 {
  border-color: var(--color-gray-200);
}

/* ===========================
   SPACING STACK (space-y)
   =========================== */

.space-y-4 > * + * {
  margin-top: var(--space-4);
}

.space-y-6 > * + * {
  margin-top: var(--space-6);
}

.space-y-8 > * + * {
  margin-top: var(--space-8);
}

/* ===========================
   PADDING UTILITIES
   =========================== */

.py-6 {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.py-8 {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.py-12 {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.my-6 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
}

/* ===========================
   SCREEN READER ONLY
   =========================== */

.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;
}

/* ===========================
   HOMEPAGE CENTERED CONTAINER
   Breaking Defense style - more whitespace
   =========================== */

/* Homepage container - narrower for more whitespace */
body.home .site-content .container {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

@media (min-width: 768px) {
  body.home .site-content .container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (min-width: 1024px) {
  body.home .site-content .container {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (min-width: 1440px) {
  body.home .site-content .container {
    max-width: 1200px;
    padding-left: 48px;
    padding-right: 48px;
  }
}

/* Latest News section container - centered (same as hero) */
body.home .section-latest .container {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1024px) {
  body.home .section-latest .container {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (min-width: 1440px) {
  body.home .section-latest .container {
    max-width: 1200px;
  }
}

/* ===========================
   FOOTER CONTAINER
   =========================== */

/* Footer container */
.site-footer .container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

@media (min-width: 768px) {
  .site-footer .container {
    padding-left: 24px;
    padding-right: 24px;
  }
}