/**
 * Main CSS Entry Point
 *
 * This file imports all component CSS files.
 * Think of this like React's index.js that imports all components.
 *
 * Build commands:
 *   Development: npm run css:build
 *   Watch mode:  npm run css:watch
 *   Production:  npm run css:prod
 */

/* ============================================
   1. Base Layer - Foundation
   ============================================ */
@import url("./base/reset.0b9634766bd6.css");
@import url("./base/variables.142b4e71178c.css");
@import url("./base/typography.888debb1ad39.css");
@import url("./base/sections.56291d7040dc.css");

/* ============================================
   2. Layout Components - Page structure
   ============================================ */
@import url("./layout/Container.3fecfe724842.css");
@import url("./layout/Navbar.9b7270727009.css");
@import url("./layout/Footer.4aae3ac9cde3.css");

/* ============================================
   3. Reusable Components - UI primitives
   ============================================ */
@import url("./components/Button.78880520a69b.css");
@import url("./components/Card.59713d34bc62.css");
@import url("./components/Tag.67a2b7a6cfdf.css");
@import url("./components/StatusBadge.6497c57bdc98.css");
@import url("./components/PhoneMockup.20ffbaa5fdc9.css");
@import url("./components/SectionHeader.945a560c300b.css");

/* ============================================
   4. Section Components - Composed sections
   ============================================ */
@import url("./sections/Hero.db6cef46cdb0.css");
@import url("./sections/TechGrid.cf7e4c66a1da.css");
@import url("./sections/ProjectCard.1f98c0e8db21.css");
@import url("./sections/PostCard.9bde1487a974.css");
@import url("./sections/Timeline.e6476becd572.css");
@import url("./sections/ResumeExport.8f71c19aae24.css");

/* ============================================
   5. Page-Specific Styles
   ============================================ */
@import url("./pages/BlogDetail.8cb3a4966fc1.css");
@import url("./pages/BlogList.11205809d592.css");
@import url("./pages/Error404.a9a6f0e462e3.css");

/* ============================================
   6. Responsive Utilities
   ============================================ */

/* Mobile-first responsive breakpoint */
@media (max-width: 768px) {
  .Container {
    padding: 0 var(--spacing-sm);
  }

  .Navbar__links {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .Hero__content {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .Hero__title {
    font-size: 2.5rem;
  }

  .Hero__image {
    order: -1;
  }

  .PhoneMockup {
    width: 240px;
    height: 480px;
  }

  .ProjectCard__grid {
    grid-template-columns: 1fr;
  }

  .PostCard__grid {
    grid-template-columns: 1fr;
  }

  .Footer__content {
    flex-direction: column;
    gap: var(--spacing-lg);
  }

  .Footer__bottom {
    flex-direction: column;
    gap: var(--spacing-sm);
    text-align: center;
  }

  .SectionHeader {
    flex-direction: column;
    align-items: flex-start;
  }

  .SectionHeader__title {
    font-size: 2rem;
  }
}

@media print {
  .hide-on-print {
    display: none !important;
  }
}