/* Cloud Kitchen Regional Cuisines - Responsive CSS */
/* Mobile-first approach */

/* Base styles are mobile-first in main.css */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
  
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-subtitle {
    font-size: 1.375rem;
  }
  
  .service-card {
    margin-bottom: 1.5rem;
  }
  
  .timeline-content {
    width: 48%;
  }
  
  .timeline-item:nth-child(odd) .timeline-content {
    margin-left: 2%;
  }
  
  .timeline-item:nth-child(even) .timeline-content {
    margin-right: 2%;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
  
  /* Typography adjustments */
  :root {
    --fs-h1: 2.5rem;
    --fs-h2: 2rem;
    --fs-h3: 1.625rem;
    --fs-body: 1.125rem;
  }
  
  /* Header */
  .navbar {
    padding: 1.5rem 0;
  }
  
  .navbar-brand {
    font-size: 1.75rem;
  }
  
  /* Hero adjustments */
  .hero-title {
    font-size: 3rem;
  }
  
  .hero-subtitle {
    font-size: 1.5rem;
  }
  
  .hero-desc {
    font-size: 1.125rem;
  }
  
  /* Section spacing */
  .section {
    padding: 5rem 0;
  }
  
  .section-title {
    margin-bottom: 4rem;
  }
  
  /* About features grid */
  .about-features .row {
    align-items: stretch;
  }
  
  .about-feature {
    height: 100%;
    margin-bottom: 0;
  }
  
  /* Services grid */
  .services-grid .row {
    align-items: stretch;
  }
  
  .service-card {
    height: 100%;
    margin-bottom: 0;
  }
  
  /* Features grid */
  .features-grid .row {
    align-items: stretch;
  }
  
  .feature-item {
    height: 100%;
    margin-bottom: 0;
  }
  
  /* Price plan grid */
  .priceplan-grid .row {
    align-items: stretch;
  }
  
  .priceplan-card {
    height: 100%;
    margin-bottom: 0;
  }
  
  /* Team grid */
  .team-grid .row {
    align-items: stretch;
  }
  
  .team-member {
    height: 100%;
    margin-bottom: 0;
  }
  
  /* Case studies grid */
  .casestudy-grid .row {
    align-items: stretch;
  }
  
  .casestudy-card {
    height: 100%;
    margin-bottom: 0;
  }
  
  /* Process steps - horizontal layout */
  .process-step {
    margin-bottom: 3rem;
  }
  
  .process-number {
    margin-right: 3rem;
  }
  
  /* Career grid */
  .career-grid .row {
    align-items: stretch;
  }
  
  .career-card {
    height: 100%;
    margin-bottom: 0;
  }
  
  /* Core info grid */
  .coreinfo-grid .row {
    align-items: stretch;
  }
  
  .coreinfo-card {
    height: 100%;
    margin-bottom: 0;
  }
  
  /* Contact form */
  .contact-form {
    padding: 4rem;
  }
  
  /* Blog grid */
  .blog-grid .row {
    align-items: stretch;
  }
  
  .blog-card {
    height: 100%;
    margin-bottom: 0;
  }
  
  /* FAQ items */
  .faq-items {
    max-width: 800px;
    margin: 3rem auto 0;
  }
  
  /* Gallery grid */
  .gallery-grid {
    columns: 2;
    column-gap: 2rem;
  }
  
  .gallery-item {
    display: inline-block;
    width: 100%;
    break-inside: avoid;
  }
  
  /* Footer */
  .footer {
    padding: 4rem 0 2rem;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
  
  /* Typography adjustments */
  :root {
    --fs-h1: 3rem;
    --fs-h2: 2.25rem;
    --fs-h3: 1.75rem;
    --fs-body: 1.125rem;
  }
  
  /* Header */
  .navbar-brand {
    font-size: 2rem;
  }
  
  /* Hero adjustments */
  .hero-title {
    font-size: 3.5rem;
  }
  
  .hero-subtitle {
    font-size: 1.625rem;
  }
  
  /* Section spacing */
  .section {
    padding: 6rem 0;
  }
  
  .section-title {
    margin-bottom: 5rem;
  }
  
  /* Services - 3 columns */
  .services-grid .col-lg-4 {
    margin-bottom: 2rem;
  }
  
  /* Process steps - better spacing */
  .process-step {
    margin-bottom: 4rem;
  }
  
  /* Timeline - full width */
  .timeline-items::before {
    display: block;
  }
  
  .timeline-content {
    width: 45%;
  }
  
  .timeline-item:nth-child(odd) .timeline-content {
    margin-left: 5%;
  }
  
  .timeline-item:nth-child(even) .timeline-content {
    margin-right: 5%;
  }
  
  /* Gallery - 3 columns */
  .gallery-grid {
    columns: 3;
  }
  
  /* Contact form - side by side */
  .contact-info {
    margin-top: 0;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
  
  /* Typography adjustments */
  :root {
    --fs-h1: 3.5rem;
    --fs-h2: 2.5rem;
    --fs-h3: 2rem;
  }
  
  /* Hero adjustments */
  .hero-title {
    font-size: 4rem;
  }
  
  .hero-subtitle {
    font-size: 1.75rem;
  }
  
  /* Section spacing */
  .section {
    padding: 7rem 0;
  }
  
  /* Services - better spacing */
  .services-grid .col-xl-4 {
    margin-bottom: 3rem;
  }
  
  /* Gallery - 4 columns */
  .gallery-grid {
    columns: 4;
  }
}

/* Extra extra large devices (1400px and up) */
@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
  
  /* Hero adjustments */
  .hero-title {
    font-size: 4.5rem;
  }
  
  .hero-subtitle {
    font-size: 2rem;
  }
  
  /* Section spacing */
  .section {
    padding: 8rem 0;
  }
}

/* Mobile-specific styles (up to 767px) */
@media (max-width: 767px) {
  /* Header */
  .navbar-collapse {
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    margin-top: 1rem;
    padding: 1rem;
  }
  
  .navbar-nav {
    text-align: center;
  }
  
  .navbar-nav .nav-link {
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid var(--primary-cream);
  }
  
  .navbar-nav .nav-link:last-child {
    border-bottom: none;
  }
  
  /* Hero */
  .hero {
    text-align: center;
    padding: 2rem 0;
  }
  
  .hero-content {
    margin-bottom: 2rem;
  }
  
  .hero-title {
    font-size: 2.25rem;
  }
  
  .hero-subtitle {
    font-size: 1.25rem;
  }
  
  /* Section spacing */
  .section {
    padding: 3rem 0;
  }
  
  .section-title {
    margin-bottom: 2rem;
  }
  
  .section-title h2 {
    font-size: 1.75rem;
  }
  
  /* Service cards */
  .service-card {
    margin-bottom: 2rem;
    min-height: 380px;
  }
  
  .service-content {
    padding: 1.5rem;
  }
  
  .service-desc {
    -webkit-line-clamp: 2;
    font-size: 0.95rem;
  }
  
  .service-features {
    -webkit-line-clamp: 3;
    font-size: 0.9rem;
  }
  
  .service-price {
    font-size: 1.25rem;
  }
  
  /* Price plan cards */
  .priceplan-card {
    margin-bottom: 2rem;
    min-height: 300px;
    padding: 1.5rem;
  }
  
  .priceplan-features ul {
    -webkit-line-clamp: 4;
    font-size: 0.9rem;
  }
  
  /* Process steps - vertical layout */
  .process-step {
    flex-direction: column;
    text-align: center;
    margin-bottom: 2rem;
  }
  
  .process-number {
    margin-right: 0;
    margin-bottom: 1rem;
  }
  
  /* Timeline - single column */
  .timeline-items::before {
    display: none;
  }
  
  .timeline-item {
    flex-direction: column;
    text-align: center;
  }
  
  .timeline-content {
    width: 100%;
    margin: 0 0 1rem 0;
  }
  
  .timeline-date {
    position: static;
    transform: none;
    display: inline-block;
    margin-bottom: 1rem;
  }
  
  /* Contact form */
  .contact-form {
    padding: 2rem;
  }
  
  /* Gallery - single column */
  .gallery-grid {
    columns: 1;
  }
  
  /* Footer */
  .footer {
    padding: 2rem 0 1rem;
  }
  
  .footer-section {
    margin-bottom: 2rem;
    text-align: center;
  }
  
  .footer-section:last-child {
    margin-bottom: 0;
  }
}

/* Tablet specific styles (768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  /* Gallery - 2 columns */
  .gallery-grid {
    columns: 2;
  }
  
  /* Services - 2 columns */
  .services-grid .col-md-6 {
    margin-bottom: 2rem;
  }
  
  /* Service cards for tablets */
  .service-card {
    min-height: 420px;
  }
  
  .service-desc {
    -webkit-line-clamp: 3;
  }
  
  .service-features {
    -webkit-line-clamp: 4;
  }
  
  /* Price plan cards for tablets */
  .priceplan-card {
    min-height: 320px;
  }
  
  .priceplan-features ul {
    -webkit-line-clamp: 5;
  }
  
  /* Team - 2 columns */
  .team-grid .col-md-6 {
    margin-bottom: 2rem;
  }
}

/* Print styles */
@media print {
  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  body {
    font-size: 12pt;
    line-height: 1.4;
  }
  
  .navbar,
  .hero,
  .contact-form,
  .footer {
    display: none !important;
  }
  
  .section {
    padding: 1rem 0;
    page-break-inside: avoid;
  }
  
  h1, h2, h3 {
    page-break-after: avoid;
  }
  
  img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --primary-orange: #e55100;
    --primary-green: #2e7d32;
    --primary-burgundy: #b71c1c;
    --primary-gold: #f57c00;
  }
  
  .navbar {
    background: white !important;
    border: 2px solid black;
  }
  
  .hero {
    background: white !important;
    color: black !important;
  }
  
  .hero-content {
    color: black !important;
  }
  
  .card, .service-card, .team-member, .blog-card {
    border: 2px solid black;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .hero::before {
    animation: none !important;
  }
  

}

/* Dark mode support (if needed in future) */

/* Focus styles for better accessibility */
:focus {
  outline: 3px solid var(--primary-orange);
  outline-offset: 2px;
}

.btn:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 107, 53, 0.25);
}

/* Skip link for screen readers */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--primary-orange);
  color: white;
  padding: 8px;
  text-decoration: none;
  z-index: 100;
  border-radius: 0 0 4px 4px;
}

.skip-link:focus {
  top: 0;
}

/* Improve touch targets for mobile */
@media (max-width: 767px) {
  .btn {
    min-height: 44px;
    min-width: 44px;
  }
  
  .navbar-nav .nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .faq-question {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* Landscape phone specific adjustments */
@media (max-width: 767px) and (orientation: landscape) {
  .hero {
    min-height: 70vh;
  }
  
  .section {
    padding: 2rem 0;
  }
}