/* ==========================================================================
   ODISII COFFEE — RESPONSIVE STYLESHEET
   Mobile-First Breakpoints: 320px, 360px, 390px, 430px, 768px, 1024px, 1200px+
   ========================================================================== */

/* --------------------------------------------------------------------------
   DESKTOP & LARGE SCREENS (> 1024px)
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  .menu-toggle {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   TABLET & BELOW (< 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --header-height: 68px;
    --space-3xl: 3.5rem;
    --space-4xl: 4.5rem;
  }

  /* Navigation */
  .nav-desktop,
  .header-actions .btn {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  /* Hero & Editorial Splits */
  .editorial-split,
  .editorial-split.reversed {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .hero-home .editorial-split {
    display: flex;
    flex-direction: column-reverse;
  }

  .hero-content {
    padding-right: 0;
  }

  /* Grid adaptations */
  .challenge-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

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

  .footer-top {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
  }

  /* Workflow interactive panel */
  .workflow-content-panel {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    padding: var(--space-lg);
  }

  .workflow-image-frame {
    order: -1;
    max-height: 320px;
  }

  .contact-layout {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .faq-grid-2col {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .contact-info-panel {
    padding-right: 0;
  }
}

/* --------------------------------------------------------------------------
   MOBILE SCREENS (< 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --header-height: 62px;
    --space-2xl: 2.25rem;
    --space-3xl: 3rem;
  }

  .announcement-meta span:not(:first-child) {
    display: none;
  }

  .announcement-strip .container {
    justify-content: center;
  }

  .section {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
  }

  .grid-2,
  .grid-3,
  .grid-4,
  .challenge-grid,
  .service-grid,
  .partner-discovery-grid {
    grid-template-columns: 1fr;
  }

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

  .form-group.full-width {
    grid-column: 1;
  }

  /* Workflow Steps on Mobile */
  .workflow-nav {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }

  .workflow-step-btn {
    flex: 0 0 auto;
    min-width: 110px;
    scroll-snap-align: start;
    padding: var(--space-sm) var(--space-xs);
  }

  /* Lightbox on mobile */
  .lightbox-modal {
    padding: var(--space-sm);
  }

  .lightbox-image-wrap {
    max-height: 60vh;
  }

  .lightbox-nav-btn {
    top: auto;
    bottom: -50px;
    transform: none;
  }

  .lightbox-prev {
    left: 20%;
  }

  .lightbox-next {
    right: 20%;
  }

  .lightbox-close {
    top: -44px;
    right: 0;
  }

  /* Footer on mobile */
  .footer-top {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-xs);
    text-align: center;
  }

  /* Floating WhatsApp button adjustments */
  .floating-whatsapp-btn {
    bottom: 16px;
    right: 16px;
    padding: 8px 14px;
    font-size: 0.75rem;
  }

  .autofill-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* --------------------------------------------------------------------------
   SMALL PHONES (< 430px)
   -------------------------------------------------------------------------- */
@media (max-width: 430px) {
  :root {
    --container-pad: 1rem;
    --text-hero: 2.15rem;
    --text-page: 1.85rem;
    --text-section: 1.5rem;
  }

  .brand-logo {
    height: 36px;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
    align-items: stretch;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .cta-banner-actions {
    flex-direction: column;
    width: 100%;
    align-items: stretch;
  }

  .cta-banner-actions .btn {
    width: 100%;
  }

  .enquiry-form-card {
    padding: var(--space-md);
  }

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

  .gallery-item {
    aspect-ratio: 16 / 10;
  }

  .workflow-content-panel {
    padding: var(--space-md);
  }

  .founder-portrait-circle {
    width: 80px;
    height: 80px;
  }
}

/* --------------------------------------------------------------------------
   STRICT 320PX VIEWPORT COMPATIBILITY
   -------------------------------------------------------------------------- */
@media (max-width: 340px) {
  :root {
    --container-pad: 0.75rem;
    --text-hero: 1.85rem;
    --text-page: 1.6rem;
    --text-section: 1.35rem;
  }

  .brand-logo {
    height: 32px;
  }

  .meta-tag {
    font-size: 9px;
    padding: 2px 6px;
  }

  .btn {
    padding: 8px 14px;
    font-size: 0.75rem;
  }

  .filter-btn {
    padding: 6px 10px;
    font-size: 9px;
  }

  .floating-whatsapp-btn span {
    display: none;
  }

  .floating-whatsapp-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
}

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

  .marquee-track {
    animation: none !important;
    flex-wrap: wrap;
    justify-content: center;
  }

  .marquee-track .partner-duplicate {
    display: none !important;
  }

  .gallery-item img,
  .founder-portrait-circle img {
    transition: none !important;
  }

  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   TOUCH-FRIENDLY HIT TARGETS
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .btn,
  .nav-link,
  .drawer-link,
  .filter-btn,
  .workflow-step-btn,
  .form-input,
  .form-select,
  .menu-toggle {
    min-height: 44px;
  }
}