/* Responsive CSS for ChemiCan Consulting multi-page website */

/* Mobile First Approach */
@media only screen and (max-width: 576px) {
  /* Typography */
  h1 {
    font-size: 1.8rem;
  }
  
  h2 {
    font-size: 1.5rem;
  }
  
  h3 {
    font-size: 1.2rem;
  }
  
  /* Layout */
  .container {
    padding: 0 10px;
  }
  
  .section {
    padding: 2rem 0;
  }
  
  /* Header */
  .header {
    height: 70px;
  }
  
  .navbar {
    height: 70px;
  }
  
  .logo img {
    height: 40px;
  }
  
  .logo-text {
    font-size: 1.2rem;
  }
  
  /* Hero Section */
  .hero {
    padding: 3rem 0;
    margin-top: 70px;
  }
  
  .hero h1 {
    font-size: 1.8rem;
  }
  
  .hero p {
    font-size: 1rem;
  }
  
  /* Page Header */
  .page-header {
    background: linear-gradient(to right, var(--primary-red), var(--primary-orange));
    padding: 3rem 0;
    margin-top: 70px;
  }
  
  .page-header h1 {
    font-size: 1.8rem;
  }
  
  /* Cards */
  .card-img {
    height: 150px;
  }
  
  /* Workstreams */
  .workstreams-container {
    grid-template-columns: 1fr;
  }
  
  /* Industries */
  .industries-container {
    grid-template-columns: 1fr 1fr;
  }
  
  /* Partners */
  .partner-logo {
    height: 60px;
  }
  
  /* Features */
  .features-container {
    grid-template-columns: 1fr;
  }
  
  /* Team */
  .team-container {
    grid-template-columns: 1fr;
  }
  
  .team-img {
    width: 150px;
    height: 150px;
  }
  
  /* Blog */
  .blog-container {
    grid-template-columns: 1fr;
  }
  
  /* Case Studies */
  .case-studies-container {
    grid-template-columns: 1fr;
  }
  
  /* Contact */
  .contact-form {
    padding: 1.5rem;
  }
  
  /* Footer */
  .footer-container {
    grid-template-columns: 1fr;
  }
}

/* Tablet */
@media only screen and (min-width: 577px) and (max-width: 768px) {
  /* Typography */
  h1 {
    font-size: 2rem;
  }
  
  h2 {
    font-size: 1.8rem;
  }
  
  /* Layout */
  .section {
    padding: 3rem 0;
  }
  
  /* Workstreams */
  .workstreams-container {
    grid-template-columns: 1fr 1fr;
  }
  
  /* Industries */
  .industries-container {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Features */
  .features-container {
    grid-template-columns: 1fr 1fr;
  }
  
  /* Team */
  .team-container {
    grid-template-columns: 1fr 1fr;
  }
  
  /* Blog */
  .blog-container {
    grid-template-columns: 1fr 1fr;
  }
  
  /* Case Studies */
  .case-studies-container {
    grid-template-columns: 1fr 1fr;
  }
  
  /* Footer */
  .footer-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Small Desktop */
@media only screen and (min-width: 769px) and (max-width: 992px) {
  /* Workstreams */
  .workstreams-container {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Industries */
  .industries-container {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Features */
  .features-container {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Team */
  .team-container {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Blog */
  .blog-container {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Case Studies */
  .case-studies-container {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Footer */
  .footer-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Large Desktop */
@media only screen and (min-width: 993px) {
  /* Workstreams */
  .workstreams-container {
    grid-template-columns: repeat(4, 1fr);
  }
  
  /* Industries */
  .industries-container {
    grid-template-columns: repeat(5, 1fr);
  }
  
  /* Features */
  .features-container {
    grid-template-columns: repeat(4, 1fr);
  }
  
  /* Team */
  .team-container {
    grid-template-columns: repeat(4, 1fr);
  }
  
  /* Blog */
  .blog-container {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Case Studies */
  .case-studies-container {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Footer */
  .footer-container {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Print Styles */
@media print {
  .header, .footer, .cta-section, .back-to-top {
    display: none;
  }
  
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
  }
  
  a {
    color: #000;
    text-decoration: underline;
  }
  
  .container {
    width: 100%;
    max-width: none;
    padding: 0;
  }
  
  .hero, .page-header {
    background: none !important;
    color: #000;
    padding: 1rem 0;
    margin-top: 0;
  }
  
  .hero h1, .page-header h1 {
    color: #000;
  }
  
  .section {
    padding: 1rem 0;
    page-break-inside: avoid;
  }
  
  .card, .workstream-card, .industry-item, .feature-item, .team-member, .blog-card, .case-study-card {
    box-shadow: none;
    border: 1px solid #ddd;
  }
  
  .card:hover, .workstream-card:hover, .industry-item:hover, .feature-item:hover, .blog-card:hover, .case-study-card:hover {
    transform: none;
    box-shadow: none;
  }
}