/* =============================================
   RESPONSIVE CSS - MOBILE FIRST APPROACH
   Tea Tasting Room & E-commerce Template
   ============================================= */

/* =============================================
   MOBILE FIRST (Base styles for mobile)
   ============================================= */

/* Hero Section Mobile */
.hero {
  padding: var(--spacing-2xl) 0;
  text-align: center;
}

.hero-content {
  padding: 0 var(--spacing-md);
}

.hero-title {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--spacing-md);
}

.hero-subtitle {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-lg);
}

.hero-desc {
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-xl);
}

/* Navigation Mobile */
.navbar-nav {
  flex-direction: column;
  width: 100%;
}

.navbar-nav .nav-link {
  padding: var(--spacing-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.navbar-toggler {
  border: none;
  padding: var(--spacing-sm);
}

.navbar-toggler:focus {
  box-shadow: none;
}

/* Sections Mobile */
.section {
  padding: var(--spacing-2xl) 0;
}

.section-title {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--spacing-md);
}

.section-subtitle {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-sm);
}

.section-desc {
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-xl);
}

/* Grid Mobile */
.services-grid,
.features-grid,
.priceplan-grid,
.team-grid,
.reviews-slider,
.casestudy-grid,
.process-steps,
.career-grid,
.coreinfo-grid,
.blog-grid {
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

.about-features {
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

.contact-info {
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

/* Timeline Mobile */
.timeline-container::before {
  left: 20px;
}

.timeline-item {
  width: calc(100% - 40px);
  left: 40px !important;
  margin-bottom: var(--spacing-lg);
}

.timeline-item::before {
  left: -35px !important;
}

/* Footer Mobile */
.footer-content {
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
  text-align: center;
}

/* Form Mobile */
.contact-form {
  padding: var(--spacing-lg);
  margin: 0 var(--spacing-md);
}

/* Team Images Mobile */
.team-member img {
  width: 120px;
  height: 120px;
}

/* Service Items Mobile */
.service-item,
.priceplan-item,
.casestudy-item,
.career-item,
.coreinfo-item {
  padding: var(--spacing-lg);
}

/* Gallery Mobile */
.gallery-item {
  height: 200px;
}

/* =============================================
   SMALL TABLETS (576px and up)
   ============================================= */
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }

  .hero-title {
    font-size: var(--font-size-3xl);
  }

  .hero-subtitle {
    font-size: var(--font-size-xl);
  }

  .section-title {
    font-size: var(--font-size-3xl);
  }

  .section-subtitle {
    font-size: var(--font-size-xl);
  }

  .about-features {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-info {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-form {
    padding: var(--spacing-xl);
  }



  .process-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .team-member img {
    width: 140px;
    height: 140px;
  }
}

/* =============================================
   MEDIUM TABLETS (768px and up)
   ============================================= */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }

  .hero {
    text-align: left;
  }

  .hero-title {
    font-size: var(--font-size-4xl);
  }

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

  .hero-desc {
    font-size: var(--font-size-lg);
  }

  .navbar-nav {
    flex-direction: row;
  }

  .navbar-nav .nav-link {
    border-bottom: none;
  }

  .services-grid,
  .features-grid,
  .reviews-slider,
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .priceplan-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-features {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-info {
    grid-template-columns: repeat(3, 1fr);
  }



  .process-steps {
    grid-template-columns: repeat(3, 1fr);
  }

  .career-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .coreinfo-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-content {
    grid-template-columns: repeat(2, 1fr);
    text-align: left;
  }

  .timeline-container::before {
    left: 50%;
  }

  .timeline-item {
    width: 45%;
  }

  .timeline-item:nth-child(odd) {
    left: 0;
  }

  .timeline-item:nth-child(even) {
    left: 55%;
  }

  .timeline-item::before {
    width: 20px;
    height: 20px;
  }

  .timeline-item:nth-child(odd)::before {
    right: -35px;
  }

  .timeline-item:nth-child(even)::before {
    left: -35px;
  }

  .team-member img {
    width: 150px;
    height: 150px;
  }

  /* Hero Two-Column Layout */
  .hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
    align-items: center;
  }

  .hero-text {
    padding-right: var(--spacing-lg);
  }

  .hero-image {
    text-align: center;
  }

  .hero-image img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
  }
}

/* =============================================
   LARGE TABLETS (992px and up)
   ============================================= */
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }

  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .priceplan-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .team-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .reviews-slider {
    grid-template-columns: repeat(3, 1fr);
  }

  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .about-features {
    grid-template-columns: repeat(4, 1fr);
  }

  .features-grid {
    grid-template-columns: repeat(4, 1fr);
  }



  .process-steps {
    grid-template-columns: repeat(5, 1fr);
  }

  .coreinfo-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-content {
    grid-template-columns: repeat(3, 1fr);
  }

  .casestudy-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .career-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Navigation improvements */
  .navbar-nav .nav-link {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  /* Section improvements */
  .section {
    padding: var(--spacing-3xl) 0;
  }

  .service-item,
  .priceplan-item,
  .casestudy-item,
  .career-item,
  .coreinfo-item {
    padding: var(--spacing-xl);
  }

  /* Contact form improvements */
  .contact-form {
    padding: var(--spacing-2xl);
  }

  /* Gallery improvements */
  .gallery-item {
    height: 250px;
  }
}

/* =============================================
   DESKTOP (1200px and up)
   ============================================= */
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }

  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .team-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .coreinfo-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-content {
    grid-template-columns: repeat(4, 1fr);
  }



  /* Large desktop specific styles */
  .hero-title {
    font-size: 3.5rem;
  }

  .section-title {
    font-size: 2.5rem;
  }

  .navbar-brand {
    font-size: var(--font-size-2xl);
  }
}

/* =============================================
   EXTRA LARGE DESKTOP (1400px and up)
   ============================================= */
@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }

  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .coreinfo-grid {
    grid-template-columns: repeat(3, 1fr);
  }



  /* Extra spacing for very large screens */
  .hero {
    padding: var(--spacing-3xl) 0;
  }

  .section {
    padding: 5rem 0;
  }
}

/* =============================================
   PORTRAIT TABLET SPECIFIC
   ============================================= */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-text {
    padding-right: 0;
    margin-bottom: var(--spacing-xl);
  }

  .services-grid,
  .features-grid,
  .reviews-slider,
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .priceplan-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .team-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =============================================
   LANDSCAPE PHONE SPECIFIC
   ============================================= */
@media (min-width: 480px) and (max-width: 767px) and (orientation: landscape) {
  .hero {
    height: auto;
    padding: var(--spacing-xl) 0;
  }

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

  .hero-subtitle {
    font-size: var(--font-size-lg);
  }

  .section {
    padding: var(--spacing-xl) 0;
  }

  .navbar-nav .nav-link {
    padding: var(--spacing-sm) var(--spacing-md);
  }
}

/* =============================================
   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;
  }

  h1, h2, h3, h4, h5, h6 {
    break-after: avoid;
    break-inside: avoid;
  }

  .navbar,
  .footer,
  .hero,
  .contact-form {
    display: none;
  }

  .section {
    padding: 1rem 0;
  }

  .container {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  a {
    text-decoration: underline;
  }

  a[href^="http"]:after {
    content: " (" attr(href) ")";
  }

  img {
    max-width: 100% !important;
    height: auto !important;
  }

  .page-break {
    page-break-before: always;
  }
}

/* =============================================
   ACCESSIBILITY - REDUCED MOTION
   ============================================= */
@media (prefers-reduced-motion: reduce) {
  /* Disable all animations and transitions */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Remove transform effects */
  .service-item:hover,
  .priceplan-item:hover,
  .team-member:hover,
  .review-item:hover,
  .casestudy-item:hover,
  .process-item:hover,
  .timeline-item:hover,
  .career-item:hover,
  .coreinfo-item:hover,
  .blog-item:hover,
  .gallery-item:hover,
  .contact-form button:hover,
  .btn:hover {
    transform: none !important;
  }

  /* Remove parallax effects */
  .hero::before {
    transform: none !important;
  }

  /* Simplify focus states */
  *:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }
}

/* =============================================
   HIGH CONTRAST MODE
   ============================================= */
@media (prefers-contrast: high) {
  :root {
    --color-primary-1: #000000;
    --color-primary-2: #000000;
    --color-dark-4: #000000;
    --color-light-3: #ffffff;
    --color-light-1: #ffffff;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
  }

  body {
    background-color: white;
    color: black;
  }

  .navbar {
    background: black;
    color: white;
  }

  .navbar-brand,
  .navbar-nav .nav-link {
    color: white !important;
  }

  .hero,
  .about,
  .features,
  .reviews,
  .process {
    background: white;
    color: black;
  }

  .hero .section-title,
  .hero .section-subtitle,
  .about .section-title,
  .about .section-subtitle,
  .features .section-title,
  .features .section-subtitle,
  .reviews .section-title,
  .reviews .section-subtitle,
  .process .section-title,
  .process .section-subtitle {
    color: black;
  }

  .footer {
    background: black;
    color: white;
  }

  .service-item,
  .priceplan-item,
  .team-member,
  .review-item,
  .casestudy-item,
  .career-item,
  .coreinfo-item,
  .blog-item,
  .contact-form,
  .contact-info-item {
    background: white;
    color: black;
    border: 2px solid black;
  }
}

/* =============================================
   DARK MODE (if user prefers dark)
   ============================================= */

/* =============================================
   RETINA/HIGH DPI DISPLAYS
   ============================================= */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Optimize for high DPI displays */
  img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }

  /* Adjust border widths for crisp lines */
  .service-item,
  .priceplan-item,
  .contact-form input,
  .contact-form textarea {
    border-width: 0.5px;
  }
}

/* =============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================= */
@media (hover: none) and (pointer: coarse) {
  /* Increase touch targets for mobile */
  .navbar-nav .nav-link {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .btn {
    padding: var(--spacing-lg) var(--spacing-xl);
    font-size: var(--font-size-lg);
  }

  .contact-form input,
  .contact-form textarea {
    padding: var(--spacing-lg);
    font-size: var(--font-size-lg);
  }

  .faq-question {
    padding: var(--spacing-lg);
  }

  /* Remove hover effects that don't work on touch */
  .service-item:hover,
  .priceplan-item:hover,
  .team-member:hover,
  .review-item:hover,
  .casestudy-item:hover,
  .process-item:hover,
  .timeline-item:hover,
  .career-item:hover,
  .coreinfo-item:hover,
  .blog-item:hover,
  .gallery-item:hover {
    transform: none;
  }

  /* Optimize scrolling for touch */
  .services-grid,
  .team-grid {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
}

/* =============================================
   OLDER BROWSER SUPPORT
   ============================================= */
@supports not (display: grid) {
  .services-grid,
  .features-grid,
  .priceplan-grid,
  .team-grid,
  .reviews-slider,
  .casestudy-grid,
  .process-steps,
  .career-grid,
  .coreinfo-grid,
  .blog-grid,
  .about-features,
  .contact-info,
  .footer-content {
    display: flex;
    flex-wrap: wrap;
  }

  .services-grid > *,
  .features-grid > *,
  .priceplan-grid > *,
  .team-grid > *,
  .reviews-slider > *,
  .casestudy-grid > *,
  .process-steps > *,
  .career-grid > *,
  .coreinfo-grid > *,
  .blog-grid > *,
  .about-features > *,
  .contact-info > *,
  .footer-content > * {
    flex: 1 1 300px;
    margin: var(--spacing-sm);
  }
}

/* =============================================
   INTERNET EXPLORER SPECIFIC
   ============================================= */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .hero-content {
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr;
    -ms-grid-column-gap: var(--spacing-2xl);
  }

  .hero-text {
    -ms-grid-column: 1;
  }

  .hero-image {
    -ms-grid-column: 2;
  }

  .services-grid,
  .features-grid,
  .priceplan-grid,
  .team-grid,
  .reviews-slider,
  .casestudy-grid,
  .process-steps,
  .career-grid,
  .coreinfo-grid,
  .blog-grid {
    display: -ms-grid;
  }
}

/* =============================================
   FIREFOX SPECIFIC
   ============================================= */
@-moz-document url-prefix() {
  .contact-form input,
  .contact-form textarea {
    -moz-appearance: none;
  }

  .btn {
    -moz-appearance: none;
  }
}

/* =============================================
   SAFARI SPECIFIC
   ============================================= */
@supports (-webkit-appearance: none) {
  .contact-form input,
  .contact-form textarea {
    -webkit-appearance: none;
  }

  .btn {
    -webkit-appearance: none;
  }

  /* Fix for iOS Safari viewport issues */
  .hero {
    height: 100vh;
    height: -webkit-fill-available;
  }
}

/* =============================================
   UTILITIES FOR RESPONSIVE DESIGN
   ============================================= */
.show-mobile {
  display: block;
}

.hide-mobile {
  display: none;
}

@media (min-width: 768px) {
  .show-mobile {
    display: none;
  }

  .hide-mobile {
    display: block;
  }

  .show-desktop {
    display: block;
  }

  .hide-desktop {
    display: none;
  }
}

@media (max-width: 767px) {
  .show-desktop {
    display: none;
  }

  .hide-desktop {
    display: block;
  }
}

/* =============================================
   CONTAINER QUERIES (Future-proofing)
   ============================================= */
@supports (container-type: inline-size) {
  .services-grid,
  .features-grid,
  .priceplan-grid,
  .team-grid,
  .reviews-slider,
  .casestudy-grid,
  .process-steps,
  .career-grid,
  .coreinfo-grid,
  .blog-grid {
    container-type: inline-size;
  }

  @container (min-width: 300px) {
    .service-item,
    .feature-item,
    .priceplan-item,
    .team-member,
    .review-item,
    .casestudy-item,
    .process-item,
    .career-item,
    .coreinfo-item,
    .blog-item,
    .gallery-item {
      min-width: 250px;
    }
  }
}