/* ============================================================================
   ARCHIVE PAGES STYLES
   Styles specific to archive pages with proper container structure
   Based on presta-modern-base.css but with block layout instead of grid
   ========================================================================= */

/* Import base styles - CSS variables, typography, colors are inherited */
/* The presta-modern-base.css should be loaded before this file */

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

/* Main container - max-width 1440px, centered */
.archive-container {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(20px, 10vw, 147px);
}

@media (max-width: 768px) {
  .archive-container {
    padding: 0 1.5rem;
  }
}

/* ============================================================================
   SECTION STRUCTURE
   ========================================================================= */

/* Archive section - block layout, no grid */
.archive-section {
  display: block;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  position: relative;
  overflow: visible;
}

/* Section inner container - no padding, aligns with post list */
.archive-section-inner {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

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

.archive-section.archive-hero {
  padding-top: clamp(40px, 8vw, 80px);
  padding-bottom: clamp(40px, 8vw, 80px);
}

/* Hero content alignment */
.archive-hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ============================================================================
   CONTENT SECTION
   ========================================================================= */

.archive-section.archive-content {
  margin-top: 0;
  padding-bottom: clamp(40px, 8vw, 80px);
}

/* Post list wrapper */
.archive-post-list-wrapper {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

/* ============================================================================
   FOOTER CTA SECTION
   ========================================================================= */

.archive-section.archive-footer-cta {
  padding-top: clamp(40px, 8vw, 80px);
  padding-bottom: clamp(40px, 8vw, 80px);
  min-height: 100svh;
  display: grid;
  place-content: center;
}

/* Primary color scheme for footer */
.archive-section.archive-footer-cta {
  --background: var(--primary);
  --foreground: var(--primary-foreground);
  --heading: var(--primary-foreground);
  --text: var(--primary-foreground);
  --brand: var(--primary-foreground);
}

/* ============================================================================
   TYPOGRAPHY (inherited from base, but archive-specific overrides)
   ========================================================================= */

/* Archive hero title - 88px font size */
.archive-section.archive-hero .lp-title {
  font-size: clamp(3.5rem, 5.5vw, 5.5rem); /* 56px to 88px */
  line-height: 1.1;
  letter-spacing: -0.0375em;
  margin-block-end: 48px;
}

/* ============================================================================
   UTILITY CLASSES
   ========================================================================= */

.pt-0 {
  padding-top: 0;
}

.pb-0 {
  padding-bottom: 0;
}