/* Responsive CSS for Digital Brand Storytelling Template */
/* Mobile-first approach with conservative breakpoints */

/* Base styles already defined in main.css for mobile */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
  
  .hero-title {
    font-size: 2.5rem;
  }
  
  .service-card {
    margin-bottom: 2rem;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
  
  .hero-title {
    font-size: 3rem;
  }
  
  .section-title {
    font-size: 2rem;
  }
  
  .hero-shape {
    display: block;
  }
  
  section {
    padding: 4rem 0;
  }
  
  .team-photo {
    width: 120px;
    height: 120px;
  }
  
  .price-amount {
    font-size: 3rem;
  }
  
  /* Two column layout for services */
  .services-grid .col-lg-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  
  /* Two column layout for team */
  .team-grid .col-lg-4:nth-child(3) {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
  
  .hero-title {
    font-size: 3.5rem;
  }
  
  /* Three column layout for services */
  .services-grid .col-lg-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  
  /* Full grid layout for team */
  .team-grid .col-lg-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  
  .team-grid .col-lg-4:nth-child(3) {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  
  /* Side-by-side layout for about section */
  .about-content {
    display: flex;
    align-items: center;
    gap: 3rem;
  }
  
  .about-text {
    flex: 1;
  }
  
  .about-features {
    flex: 1;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
  
  .hero-title {
    font-size: 4rem;
  }
  
  /* Full grid layout */
  .row {
    margin-left: -15px;
    margin-right: -15px;
  }
  
  .col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* Extra extra large devices (1400px and up) */
@media (min-width: 1400px) {
  .container {
    max-width: var(--container-max-width);
  }
}

/* Mobile-specific adjustments */
@media (max-width: 767px) {
  /* Navigation */
  .navbar-nav {
    text-align: center;
    padding: 1rem 0;
  }
  
  .navbar-nav .nav-link {
    padding: 0.75rem 1rem;
    font-size: 1.1rem;
  }
  
  /* Hero section mobile */
  #hero {
    min-height: 80vh;
    text-align: center;
  }
  
  .hero-title {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  
  .hero-subtitle {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
  }
  
  .hero-desc {
    font-size: 1rem;
    margin-bottom: 2rem;
  }
  
  /* Button adjustments */
  .btn-primary-custom,
  .btn-secondary-custom {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
    padding: 15px 20px;
  }
  
  /* Cards mobile spacing */
  .service-card,
  .team-member,
  .review-card,
  .price-card,
  .feature-item,
  .blog-card,
  .case-study-card {
    margin-bottom: 2rem;
  }
  
  /* Form mobile */
  .contact-form {
    padding: 2rem 1.5rem;
    margin: 1rem;
  }
  
  .form-control {
    padding: 15px 16px;
    font-size: 16px; /* Prevent zoom on iOS */
  }
  
  /* Timeline mobile */
  .timeline-item {
    padding-left: 2rem;
  }
  
  .timeline-item::before {
    left: 0;
    width: 8px;
    height: 8px;
  }
  
  .timeline-item::after {
    left: 3px;
  }
  
  /* Process steps mobile */
  .process-number {
    width: 50px;
    height: 50px;
    font-size: 1.25rem;
  }
  
  /* Gallery mobile */
  .gallery-item {
    margin-bottom: 1rem;
  }
  
  .gallery-item img {
    height: 200px;
  }
  
  /* Footer mobile */
  .footer-section {
    text-align: center;
    margin-bottom: 2rem;
  }
  
  /* FAQ mobile */
  .faq-question,
  .faq-answer {
    padding: 1rem;
  }
  
  /* Blog mobile */
  .blog-image {
    height: 180px;
  }
  
  /* About features mobile */
  .about-feature {
    margin-bottom: 1rem;
  }
  
  /* Career items mobile */
  .career-item {
    padding: 1.5rem;
    margin-bottom: 1rem;
  }
  
  /* Core info mobile */
  .core-info-item {
    margin-bottom: 1rem;
    padding: 1rem;
  }
  
  .core-info-icon {
    font-size: 1.5rem;
  }
}

/* Tablet-specific adjustments */
@media (min-width: 768px) and (max-width: 991px) {
  /* Hero adjustments for tablet */
  .hero-title {
    font-size: 2.75rem;
  }
  
  /* Services grid - 2 columns */
  .services-row .col-lg-4:nth-child(odd) {
    clear: left;
  }
  
  /* Team grid - 2 columns with centered last item */
  .team-row .col-lg-4:nth-child(3),
  .team-row .col-lg-4:nth-child(4) {
    flex: 0 0 50%;
    max-width: 50%;
  }
  
  .team-row .col-lg-4:nth-child(5) {
    flex: 0 0 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
  }
  
  /* Price plans - 3 columns but stacked differently */
  .price-row .col-lg-4 {
    margin-bottom: 2rem;
  }
  
  /* Features - 2 columns */
  .features-row .col-lg-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  
  /* Blog - 2 columns */
  .blog-row .col-lg-4:nth-child(3) {
    flex: 0 0 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
  }
}

/* High DPI/Retina displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Ensure crisp images and icons */
  .service-icon,
  .feature-icon,
  .core-info-icon {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* Print styles */
@media print {
  /* Hide navigation and interactive elements */
  .navbar,
  .btn,
  .contact-form,
  .hero-shape {
    display: none;
  }
  
  /* Ensure good contrast */
  body {
    color: #000;
    background: #fff;
    overflow-x: hidden;
}
  
  /* Adjust spacing for print */
  section {
    padding: 1rem 0;
    break-inside: avoid;
  }
  
  .service-card,
  .team-member,
  .review-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ddd;
  }
}

/* Landscape orientation on mobile */
@media (max-width: 767px) and (orientation: landscape) {
  #hero {
    min-height: 100vh;
  }
  
  .hero-title {
    font-size: 2.25rem;
  }
  
  section {
    padding: 3rem 0;
  }
}

/* Accessibility - Motion preferences */
@media (prefers-reduced-motion: reduce) {
  /* Remove hover transforms on mobile to improve performance */
  @media (max-width: 767px) {
    .service-card:hover,
    .team-member:hover,
    .feature-item:hover,
    .blog-card:hover,
    .case-study-card:hover,
    .career-item:hover,
    .core-info-item:hover,
    .price-card:hover,
    .gallery-item:hover {
      transform: none;
    }
  }
}

/* Focus styles for keyboard navigation */
@media (min-width: 768px) {
  .btn:focus,
  .form-control:focus,
  .nav-link:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
  }
}

/* Very large screens optimization */
@media (min-width: 1600px) {
  .container {
    max-width: 1500px;
  }
  
  .hero-title {
    font-size: 4.5rem;
  }
  
  .section-title {
    font-size: 2.5rem;
  }
  
  /* Increase spacing on very large screens */
  section {
    padding: 5rem 0;
  }
}

/* Specific grid adjustments for different sections */

/* Services Grid Responsive */
@media (min-width: 576px) and (max-width: 767px) {
  .services-grid .col-lg-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .services-grid .col-lg-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* Team Grid Responsive */
@media (min-width: 576px) and (max-width: 767px) {
  .team-grid .col-lg-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  
  .team-grid .col-lg-4:nth-child(5) {
    flex: 0 0 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
  }
}

/* Features Grid Responsive */
@media (min-width: 576px) and (max-width: 991px) {
  .features-grid .col-lg-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* Blog Grid Responsive */
@media (min-width: 576px) and (max-width: 767px) {
  .blog-grid .col-lg-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .blog-grid .col-lg-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  
  .blog-grid .col-lg-4:nth-child(3) {
    flex: 0 0 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
  }
} 

.hero-content {
    padding-top: 150px;
}