/* ==========================================================================
   SEO Engine Design System — Layout Utilities
   UI-0020: Section Padding Standards
   UI-0021: Container Width Tokens and .container base class
   UI-0022: Card Padding Standards (padding utilities)
   Depends on: tokens.css (spacing tokens must be loaded first)
   Breakpoints: mobile < 768px, tablet 768-1023px, desktop >= 1024px
   ========================================================================== */

/* --------------------------------------------------------------------------
   Skip Navigation Link (Accessibility)
   Visually hidden until focused, allows keyboard users to skip navigation
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 10000;
  padding: 8px 16px;
  background: var(--color-primary, #2563eb);
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top 200ms ease;
}

.skip-link:focus {
  top: 0;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   UI-0021: .container Base Class
   Max 1440px, centered, responsive horizontal padding
   Desktop: 40px, Tablet: 32px, Mobile: 20px
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-2xl);  /* 1440px */
  margin-right: auto;
  margin-left: auto;
  padding-right: 40px;
  padding-left: 40px;
}

@media (max-width: 1023px) {
  .container {
    padding-right: 32px;
    padding-left: 32px;
  }
}

@media (max-width: 767px) {
  .container {
    padding-right: 20px;
    padding-left: 20px;
  }
}

/* Container width variant classes */
.container-xs  { max-width: var(--container-xs);  }   /* 512px */
.container-sm  { max-width: var(--container-sm);  }   /* 640px */
.container-md  { max-width: var(--container-md);  }   /* 768px */
.container-lg  { max-width: var(--container-lg);  }   /* 1024px */
.container-xl  { max-width: var(--container-xl);  }   /* 1280px */
.container-2xl { max-width: var(--container-2xl); }   /* 1440px */

/* --------------------------------------------------------------------------
   UI-0020: Section Padding Standards

   Hero Section:
     Desktop:  128px top / 96px bottom
     Tablet:   80px top / 64px bottom
     Mobile:   64px top / 48px bottom

   Standard Section:
     Desktop:  96px top and bottom
     Tablet:   64px top and bottom
     Mobile:   48px top and bottom

   Compact Section:
     Desktop:  64px top and bottom
     Tablet:   48px top and bottom
     Mobile:   32px top and bottom
   -------------------------------------------------------------------------- */

/* Hero Section */
.section-hero {
  padding-top:    var(--space-32);  /* 128px */
  padding-bottom: var(--space-24);  /* 96px  */
}

@media (max-width: 1023px) {
  .section-hero {
    padding-top:    var(--space-20);  /* 80px */
    padding-bottom: var(--space-16);  /* 64px */
  }
}

@media (max-width: 767px) {
  .section-hero {
    padding-top:    var(--space-16);  /* 64px */
    padding-bottom: var(--space-12);  /* 48px */
  }
}

/* Standard Section */
.section-standard {
  padding-top:    var(--space-24);  /* 96px */
  padding-bottom: var(--space-24);  /* 96px */
}

@media (max-width: 1023px) {
  .section-standard {
    padding-top:    var(--space-16);  /* 64px */
    padding-bottom: var(--space-16);  /* 64px */
  }
}

@media (max-width: 767px) {
  .section-standard {
    padding-top:    var(--space-12);  /* 48px */
    padding-bottom: var(--space-12);  /* 48px */
  }
}

/* Compact Section */
.section-compact {
  padding-top:    var(--space-16);  /* 64px */
  padding-bottom: var(--space-16);  /* 64px */
}

@media (max-width: 1023px) {
  .section-compact {
    padding-top:    var(--space-12);  /* 48px */
    padding-bottom: var(--space-12);  /* 48px */
  }
}

@media (max-width: 767px) {
  .section-compact {
    padding-top:    var(--space-8);   /* 32px */
    padding-bottom: var(--space-8);   /* 32px */
  }
}

/* --------------------------------------------------------------------------
   UI-0022: Card Padding Utilities
   Note: Full card component styles are in components/cards.css.
   These are the canonical padding values per spec.

   Compact Card:  16px  — tight dashboard widgets
   Standard Card: 24px  — default content and lead cards
   Large Card:    32px  — feature cards
   Stat Card:     24px  — dashboard stat cards (alias of standard)
   Feature Card:  32px  — feature cards (alias of large)
   Pricing Card:  40px  — pricing cards

   If components/cards.css is loaded these will be superseded there.
   -------------------------------------------------------------------------- */
.compact-card  { padding: var(--space-4);  }   /* 16px */
.standard-card { padding: var(--space-6);  }   /* 24px */
.large-card    { padding: var(--space-8);  }   /* 32px */
.stat-card     { padding: var(--space-6);  }   /* 24px */
.feature-card  { padding: var(--space-8);  }   /* 32px */
.pricing-card  { padding: var(--space-10); }   /* 40px */