/* =============================================================================
   FRAMEWORK PAGE STYLES
   ========================================================================== */

/* Framework Page Layout */
.framework-page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* Grid System - Dynamic layout using named grid areas */
.framework-grid {
  --grid-gap: 1rem;
  
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
    "hero hero hero hero hero hero hero actions actions actions actions actions"
    "hero hero hero hero hero hero hero actions actions actions actions actions"
    "results-header results-header results-header results-header results-header results-header results-header results-header results-header results-header results-header results-header"
    "results results results results results results results results results results results results"
    "detailed-results detailed-results detailed-results detailed-results detailed-results detailed-results detailed-results detailed-results detailed-results detailed-results detailed-results detailed-results"
    "app-header app-header app-header app-header app-header app-header app-header app-header app-header app-header app-header app-header"
    "status status status status status tech tech tech tech tech tech tech"
    "links links links links links tech tech tech tech tech tech tech"
    "links links links links links tech tech tech tech tech tech tech"
    "requirements requirements requirements requirements requirements requirements requirements requirements requirements requirements requirements requirements"
    "requirements requirements requirements requirements requirements requirements requirements requirements requirements requirements requirements requirements"
    "implementation implementation implementation implementation implementation implementation implementation implementation implementation implementation implementation implementation"
    "implementation implementation implementation implementation implementation implementation implementation implementation implementation implementation implementation implementation"
    "info-header info-header info-header info-header info-header info-header info-header info-header info-header info-header info-header info-header"
    "stats stats stats stats stats stats stats stats stats stats stats stats"
    "example example example example example example video video video video video video"
    "example example example example example example video video video video video video"
    "about-section about-section about-section about-section about-section about-section about-section about-section about-section about-section about-section about-section"
    "thoughts thoughts thoughts thoughts thoughts thoughts thoughts thoughts thoughts thoughts thoughts thoughts"
    "choosing-header choosing-header choosing-header choosing-header choosing-header choosing-header choosing-header choosing-header choosing-header choosing-header choosing-header choosing-header"
    "stack-match stack-match stack-match stack-match stack-match stack-match stack-match stack-match stack-match stack-match stack-match stack-match"
    "nav nav nav nav nav nav nav nav nav nav nav nav";
  
  gap: var(--grid-gap);
  margin: 2rem auto;
  max-width: 64rem;
}

/* Grid Areas - Named areas for easy maintenance */
.framework-hero { grid-area: hero; }
.framework-actions { grid-area: actions; }
.group-header-results { grid-area: results-header; }
.framework-results-summary { grid-area: results; }
.detailed-results { grid-area: detailed-results; }
.group-header-app { grid-area: app-header; }
.framework-status { grid-area: status; }
.framework-links { grid-area: links; }
.framework-tech { grid-area: tech; }
.app-requirements-section { grid-area: requirements; }
.framework-implementation-section { grid-area: implementation; }
.group-header-info { grid-area: info-header; }
.framework-stats { grid-area: stats; }
.framework-example-app { grid-area: example; }
.framework-video { grid-area: video; }
.framework-about-section { grid-area: about-section; }
.framework-thoughts-section { grid-area: thoughts; }
.group-header-choosing { grid-area: choosing-header; }
.stack-match-section { grid-area: stack-match; }
.framework-nav { grid-area: nav; }

/* =============================================================================
   SHARED COMPONENTS
   ========================================================================== */

/* Base Card Styles */
article,
.card {
  background: var(--card-bg);
  border-radius: var(--border-radius, 16px);
  padding: var(--card-padding, 2rem);
  box-shadow: var(--shadow);
  height: 100%;
}

/* Card Variants */
.card-small {
  border-radius: calc(var(--border-radius, 16px) * 0.75);
  padding: 1rem;
}

.card-compact {
  padding: 1.5rem;
}

/* Typography */
.card-title,
h2, h3, h4 {
  margin: 0 0 1rem 0;
  color: var(--heading-color, var(--text-color));
}

h4 {
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0;
  opacity: 0.8;
  color: currentColor;
}

.card-title { font-size: 2rem; }
.card-subtitle { 
  margin: 0;
  color: var(--text-muted);
  font-size: 1.1rem;
}

.hero-content h2 {
  margin: 0 0 0.5rem 0;
  font-size: 2rem;
  color: var(--heading-color, var(--text-color));
}

.hero-tagline {
  margin: 0;
  color: var(--text-muted);
  font-size: 1.1rem;
}

.framework-tech h3,
.framework-video h3 {
  margin: 0 0 1rem 0;
  color: var(--heading-color, var(--text-color));
}

.framework-video p {
  line-height: 1.6;
  margin: 0 0 1rem 0;
}

.text-label {
  color: var(--text-muted);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Interactive Elements */
.interactive-card {
  transition: all 0.3s ease;
  cursor: pointer;
}

.interactive-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover, 0 8px 25px rgba(0,0,0,0.15));
}

/* =============================================================================
   SPECIFIC COMPONENTS
   ========================================================================== */

/* Hero Section */
.framework-hero {
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  gap: 1.5rem;
  padding: 2rem;
}

.framework-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--fw-color, var(--primary-color, #3498db));
}

.hero-icon {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

/* Actions */
.framework-actions {
  display: flex;
  flex-direction: column;
  gap: calc(var(--grid-gap) * 0.75);
  @media (max-width: 600px) {
    flex-direction: column !important;
  }
}

.action-card {
  flex: 1;
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: var(--text-color);
  font-size: 1.1rem;
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.action-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover, 0 8px 25px rgba(0,0,0,0.15));
  color: var(--text-color);
}

.action-primary {
  background: var(--fw-color, var(--primary-color, #3498db));
  color: var(--primary-text, white);
}

.action-primary:hover {
  color: var(--primary-text, white);
}

.action-icon {
  width: 24px;
  height: 24px;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.action-card:hover .action-icon {
  opacity: 1;
}

/* Stats */
.framework-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: calc(var(--grid-gap) * 0.75);
}

.stat-card {
  text-align: center;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.stat-primary {
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--fw-color, var(--primary-color, #3498db));
  margin: 0;
  line-height: 1.2;
}

.stat-secondary {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.3;
}

.stat-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-color);
  margin: 0;
  text-transform: capitalize;
}

/* Lists */
.info-list,
.tech-list,
.status-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.info-list li,
.tech-list li,
.status-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-color, #f0f0f0);
  display: flex;
  justify-content: space-between;
}

.info-list li:last-child,
.tech-list li:last-child,
.status-list li:last-child {
  border-bottom: none;
}

.info-key,
.tech-key {
  color: var(--text-muted);
}

.info-value,
.tech-value {
  font-family: var(--mono-font, monospace);
  background: var(--code-bg, #f8f9fa);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9rem;
}

.badge {
  height: 1.4rem;
  min-width: 4rem;
  background: #33fb8b;
  border-radius: 3px;
  text-align: center;
}

/* App Requirements Section */
.app-requirements-section {

  .requirement-group {
    display: flex;
    gap: 1rem;
    div { flex: 1; }
    ul {
      margin-top: 0.5rem;
      padding-left: 1rem;
      list-style: circle;
    }
  }
  .screenshot {
    width: 300px;
    height: fit-content;
    border-radius: 0.5rem;
  }
}

/* Example App */
.framework-example-app h4,
.framework-example-app p {
  margin: 0;
}

.example-app-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--secondary-bg, #f5f5f5);
  border-radius: 0.5rem;
  padding: 0.5rem;
  margin-top: 1.5rem;
}

.example-app-links {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

/* Resource Links */
.resource-links {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.resource-link {
  background: color-mix(in srgb, var(--fw-color, var(--primary-color, #3498db)) 10%, transparent);
  color: var(--fw-color, var(--primary-color, #3498db));
  padding: 0.5rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.resource-link:hover {
  background: color-mix(in srgb, var(--fw-color, var(--primary-color, #3498db)) 20%, transparent);
}

/* Framework Links */
.framework-links {
  .links-list {
    column-count: 2;
    margin: 0;
    padding-left: 0;
    list-style: none;
  }
}

/* Video Container */
.video-container {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  padding-top: 57%;
  box-shadow: 1px 1px 7px 1px var(--fw-color, var(--primary-color, #3498db));
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Results Summary */
.framework-results-summary {
  padding: 1.5rem;
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
}

/* Summary result cards */
.result-card {
  background: var(--secondary-bg, #f8f9fa);
  border-radius: 0.75rem;
  padding: 1rem;
  text-align: center;
  transition: all 0.3s ease;
}

.result-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.result-card h4 {
  margin: 0 0 0.5rem 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.result-value {
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--fw-color, var(--primary-color, #3498db));
  margin: 0.25rem 0;
  line-height: 1.2;
}

.result-detail {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0;
}

/* Detailed Results Cards */
.detailed-results {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

.results-detail-card {
  background: var(--card-bg);
  border-radius: var(--border-radius, 16px);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}

.results-detail-card h4 {
  margin: 0 0 1rem 0;
  color: var(--text-color);
  font-size: 1rem;
  font-weight: 600;
}

.metrics-grid {
  display: grid;
  gap: 0.75rem;
}

.metrics-grid-4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.metrics-grid-5 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}


/* Detailed metric items - smaller version of metric cards */
.metric-item {
  background: var(--secondary-bg, #f8f9fa);
  border-radius: 0.5rem;
  padding: 0.75rem;
  text-align: center;
  transition: all 0.3s ease;
}

.metric-item:hover {
  transform: translateY(-1px);
}

.metric-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.metric-value {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--fw-color, var(--primary-color, #3498db));
  line-height: 1.2;
}

/* Navigation */
.framework-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--grid-gap) * 0.75);
}

.nav-card {
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--text-color);
  text-align: center;
  padding: 1rem;
  transition: all 0.3s ease;
}

.nav-card:hover {
  transform: translateY(-2px);
  color: var(--text-color);
  box-shadow: var(--shadow-hover, 0 8px 25px rgba(0,0,0,0.15));
}

.nav-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.25rem;
}

.nav-title {
  font-weight: 600;
  font-size: 0.9rem;
}

/* =============================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

/* Tablet: Clean 6-column grid */
@media (max-width: 1024px) {
  .framework-grid {
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas:
      "hero hero hero hero hero hero"
      "hero hero hero hero hero hero"
      "actions actions actions actions actions actions"
      "results-header results-header results-header results-header results-header results-header"
      "results results results results results results"
      "detailed-results detailed-results detailed-results detailed-results detailed-results detailed-results"
      "app-header app-header app-header app-header app-header app-header"
      "status status status tech tech tech"
      "links links links tech tech tech"
      "links links links tech tech tech"
      "requirements requirements requirements requirements requirements requirements"
      "requirements requirements requirements requirements requirements requirements"
      "implementation implementation implementation implementation implementation implementation"
      "implementation implementation implementation implementation implementation implementation"
      "info-header info-header info-header info-header info-header info-header"
      "stats stats stats stats stats stats"
      "example example example video video video"
      "example example example video video video"
      "about-section about-section about-section about-section about-section about-section"
      "thoughts thoughts thoughts thoughts thoughts thoughts"
      "choosing-header choosing-header choosing-header choosing-header choosing-header choosing-header"
      "stack-match stack-match stack-match stack-match stack-match stack-match"
      "nav nav nav nav nav nav";
  }

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

  .requirement-group {
    flex-wrap: wrap;
    justify-content: center;
  }

  .detailed-results {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }

  .detailed-results .performance-card {
    grid-column: 1 / -1;
  }
}

/* Mobile: Switch to flex layout */
@media (max-width: 768px) {
  .framework-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  
  /* Mobile-specific adjustments */
  .framework-links .links-list {
    column-count: 1;
  }
  
  .app-requirements-section .requirement-group {
    flex-direction: column;
  }
  
  .app-requirements-section .screenshot {
    width: 100%;
    max-width: 300px;
  }
  
  .results-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
  }
  
  .result-card {
    padding: 0.75rem;
  }
  
  .result-value {
    font-size: 1.5rem;
  }
  
  .detailed-results {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .metrics-grid-4,
  .metrics-grid-5 {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  
  .metric-item {
    padding: 0.5rem;
  }
  
  .metric-value {
    font-size: 1rem;
  }
  
  /* Stack Match responsive styles */
  .stack-match-section {
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem 1rem;
  }
  
  .stack-match-info {
    min-width: auto;
  }
  
  .stack-match-screenshot {
    width: 100%;
    max-width: 400px;
    align-self: center;
  }
  
  .button-wrap {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .primary-cta,
  .secondary-cta {
    text-align: center;
  }
}

/* Stack Match Section */
.stack-match-section {
  background: white;
  border: 1px solid var(--card-border, #e0e0e0);
  border-radius: var(--border-radius, 16px);
  padding: 2rem 1rem 1rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  box-shadow: var(--shadow);
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.stack-match-info {
  flex: 1;
  min-width: 300px;
}

.stack-match-info h3 {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0 0 1rem 0;
  font-size: 1.4rem;
  color: var(--text-color);
}

.stack-match-info p {
  margin: 0 0 1.5rem 0;
  line-height: 1.6;
  color: var(--text-color);
}

.stack-match-screenshot {
  border-radius: 8px;
  box-shadow: var(--shadow-lg, 0 10px 25px rgba(0,0,0,0.15));
  transition: transform 0.3s ease;
  width: 400px;
  max-width: 100%;
  height: auto;
}

.stack-match-section:hover .stack-match-screenshot {
  transform: translateY(-2px);
}

.button-wrap {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.primary-cta,
.secondary-cta {
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  display: inline-block;
}

.primary-cta {
  background: var(--fw-color, var(--primary-color, #3498db));
  color: white;
}

.primary-cta:hover {
  background: color-mix(in srgb, var(--fw-color, var(--primary-color, #3498db)) 90%, black);
  transform: translateY(-1px);
  color: white;
}

.secondary-cta {
  background: var(--secondary-bg, #f8f9fa);
  color: var(--text-color);
  border: 1px solid var(--border-color, #e0e0e0);
}

.secondary-cta:hover {
  background: var(--border-color, #e0e0e0);
  transform: translateY(-1px);
  color: var(--text-color);
}

.group-header h2 {
  margin: 0;
  opacity: 0.7;
  font-weight: 500;
  margin-top: 1rem;
}