@layer responsive {

/* Responsive Enhancements - Mobile-First Approach */

/* ===================================
   Tablet and Up (768px / 48rem)
   =================================== */

@media (min-width: 48rem) {
  /* Responsive Typography Scale (1.333 ratio) */
  :root {
    --font-size-2xl: 1.777rem;     /* ~28px */
    --font-size-3xl: 2.369rem;     /* ~38px */
    --font-size-4xl: 3.157rem;     /* ~51px */
    --font-size-5xl: 4.209rem;     /* ~67px */
    --section-spacing: var(--space-4xl);
  }
  /* Layout adjustments */
  main {
    padding: var(--space-2xl) var(--space-lg);
  }

  /* Hero - more generous spacing */
  #hero {
    padding: var(--space-3xl) 0;
  }

  #hero .positioning {
    font-size: var(--font-size-2xl);
  }

  /* Credibility Strip - 2 columns on tablet */
  .credibility-list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

  /* Capabilities - 3 columns on tablet */
  .capabilities-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
  }

  /* Principles - single column at all breakpoints for deliberate reading rhythm */

  /* Work cards - maintain single column but increase spacing */
  .work-grid {
    gap: var(--space-2xl);
  }

  /* Footer - side-by-side layout on tablet+ */
  footer {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* ===================================
   Desktop (1024px / 64rem)
   =================================== */

@media (min-width: 64rem) {
  /* Hero - even more generous spacing */
  #hero {
    padding: var(--space-4xl) 0;
  }

  /* Work cards - could use 2 columns if desired, keeping 1 for now */
  /* .work-grid {
    grid-template-columns: repeat(2, 1fr);
  } */
}

/* ===================================
   Large Desktop (1280px / 80rem)
   Optional: Add subtle enhancements for very large screens
   =================================== */

@media (min-width: 80rem) {
  /* Optional: Increase max-width for very large screens */
  /* Or add more subtle spacing adjustments */
}

/* ===================================
   Container Queries
   =================================== */

/* Work grid container - larger card padding at wider container widths */
@container work-grid (min-width: 48rem) {
  .card-summary {
    padding: var(--space-xl);
  }

  .project-card.expanded .expanded-content {
    padding: var(--space-xl);
  }
}

/* Project card container - adjust description size based on card width */
@container project-card (min-width: 30rem) {
  .description {
    font-size: var(--font-size-xl);
  }
}

@container project-card (min-width: 40rem) {
  .description {
    font-size: var(--font-size-2xl);
  }
  .expanded-content ul {
    column-count: 2;
    column-gap: var(--space-2xl);
    column-width: 34ch;
  }
  /* Keep list items from splitting across columns */
  .expanded-content li {
    break-inside: avoid;
    color: var(--color-text-body-strong);
  }
  /* Keep headings full width */
  .expanded-content h4,
  .expanded-content button.collapse-toggle {
    column-span: all;
  }
}

} /* end @layer responsive */