/*
 * Coosemans Miami, Inc. - Responsive Stylesheet
 * Mobile-First Responsive Design
 * Version: 1.0
 */

/* ============================================
   MOBILE FIRST APPROACH
   Base styles in main.css are for mobile (320px+)
   ============================================ */

/* ============================================
   TABLET (768px and up)
   ============================================ */

@media (min-width: 768px) {
  /* Typography adjustments */
  :root {
    --font-size-h1: 52px;
    --font-size-h2: 40px;
    --font-size-h3: 30px;
  }

  /* Container */
  .container {
    padding: 0 40px;
  }

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

  /* Hero adjustments */
  .hero-content h1 {
    font-size: 60px;
  }

  .hero-content p {
    font-size: 24px;
  }

  /* Grid columns for tablet */
  .col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-md-3 { flex: 0 0 25%; max-width: 25%; }
  .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-md-9 { flex: 0 0 75%; max-width: 75%; }
  .col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-md-12 { flex: 0 0 100%; max-width: 100%; }

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

  /* Trust badges */
  .trust-badges {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Testimonials */
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer */
  .footer-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================
   DESKTOP (1024px and up)
   ============================================ */

@media (min-width: 1024px) {
  /* Typography */
  :root {
    --font-size-h1: 56px;
    --font-size-h2: 42px;
    --font-size-h3: 32px;
  }

  /* Section padding */
  section {
    padding: var(--section-padding-y) 0;
  }

  /* Hero */
  .hero-content h1 {
    font-size: 64px;
  }

  /* Grid columns for desktop */
  .col-lg-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  .col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
  .col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-lg-12 { flex: 0 0 100%; max-width: 100%; }

  /* Features grid */
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-2xl);
  }

  /* Trust badges */
  .trust-badges {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Testimonials */
  .testimonials-grid {
    grid-template-columns: repeat(3, 1fr);
  }

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

/* ============================================
   LARGE DESKTOP (1440px and up)
   ============================================ */

@media (min-width: 1440px) {
  /* Container wider on large screens */
  .container {
    max-width: 1320px;
  }

  /* Hero */
  .hero-content h1 {
    font-size: 72px;
  }

  /* Features can go to 3 columns on very large screens */
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================
   MOBILE SPECIFIC (below 768px)
   ============================================ */

@media (max-width: 767px) {
  /* Section padding reduced on mobile */
  section {
    padding: var(--section-padding-y-mobile) 0;
  }

  /* Typography smaller on mobile */
  h1 {
    font-size: 32px;
  }

  h2 {
    font-size: 28px;
  }

  h3 {
    font-size: 24px;
  }

  h4 {
    font-size: 20px;
  }

  /* Hero adjustments */
  .hero {
    min-height: 80vh;
  }

  .hero-content h1 {
    font-size: 36px;
  }

  .hero-content p {
    font-size: 18px;
  }

  .hero-buttons {
    flex-direction: column;
    width: 100%;
  }

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

  /* Navigation mobile */
  .nav-menu {
    display: none;
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    background-color: var(--color-white);
    flex-direction: column;
    padding: var(--spacing-md);
    box-shadow: var(--shadow-lg);
    gap: 0;
  }

  .nav-menu.active {
    display: flex;
  }

  .nav-menu li {
    border-bottom: 1px solid var(--color-border);
  }

  .nav-menu li:last-child {
    border-bottom: none;
  }

  .nav-menu a {
    padding: var(--spacing-md) 0;
    font-size: var(--font-size-large);
  }

  .mobile-menu-toggle {
    display: block;
  }

  /* Section headers */
  .section-header {
    margin-bottom: var(--spacing-2xl);
  }

  .section-title {
    font-size: 28px;
  }

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

  /* Cards stack on mobile */
  .features-grid,
  .trust-badges,
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  /* Feature items */
  .feature-content {
    padding: var(--spacing-md);
  }

  /* Footer */
  .footer {
    padding: var(--spacing-2xl) 0 var(--spacing-md);
  }

  .footer-content {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }

  /* Buttons full width on mobile */
  .btn-mobile-full {
    display: block;
    width: 100%;
  }

  /* Forms */
  .form-group {
    margin-bottom: var(--spacing-md);
  }

  /* Grid - all columns full width on mobile */
  .row {
    margin: 0;
  }

  .col,
  [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0;
    margin-bottom: var(--spacing-md);
  }

  /* Card images smaller on mobile */
  .card-image,
  .feature-image-container {
    height: 200px;
  }

  /* Testimonial adjustments */
  .testimonial {
    padding: var(--spacing-md);
  }

  .customer-photo {
    width: 50px;
    height: 50px;
  }
}

/* ============================================
   TABLET LANDSCAPE (1024px - 1279px)
   ============================================ */

@media (min-width: 1024px) and (max-width: 1279px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  /* Remove unnecessary elements when printing */
  .header,
  .mobile-menu-toggle,
  .nav-menu,
  .hero,
  .btn,
  .footer {
    display: none;
  }

  /* Ensure content is visible */
  body {
    color: #000;
    background: #fff;
  }

  /* Page breaks */
  section {
    page-break-inside: avoid;
  }

  /* Links show URLs */
  a[href]:after {
    content: " (" attr(href) ")";
  }

  /* Remove shadows and transitions */
  * {
    box-shadow: none !important;
    transition: none !important;
  }
}

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

/* ============================================
   HIGH CONTRAST MODE
   ============================================ */

@media (prefers-contrast: high) {
  :root {
    --color-border: #000;
  }

  .btn-outline {
    border-width: 3px;
  }

  .form-control {
    border-width: 3px;
  }
}

/* ============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================ */

@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets for mobile */
  .btn {
    min-height: 44px;
    min-width: 44px;
  }

  .nav-menu a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .form-control {
    min-height: 44px;
  }

  /* Remove hover effects on touch devices */
  .card:hover,
  .feature-item:hover,
  .testimonial:hover {
    transform: none;
  }

  .btn-primary:hover,
  .btn-secondary:hover {
    transform: none;
  }
}

/* ============================================
   LANDSCAPE ORIENTATION (Mobile)
   ============================================ */

@media (max-height: 600px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding: var(--spacing-4xl) 0;
  }

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

/* ============================================
   SPECIFIC COMPONENT RESPONSIVE ADJUSTMENTS
   ============================================ */

/* Products Grid */
@media (min-width: 768px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .products-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1280px) {
  .products-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Team Grid */
@media (min-width: 768px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .team-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1280px) {
  .team-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* FAQ Accordion */
@media (max-width: 767px) {
  .faq-item {
    margin-bottom: var(--spacing-md);
  }

  .faq-question {
    font-size: var(--font-size-base);
    padding: var(--spacing-md);
  }
}

/* Contact Info Grid */
@media (min-width: 768px) {
  .contact-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
  }
}

@media (min-width: 1024px) {
  .contact-info-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Stats/Numbers Section */
@media (max-width: 767px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }
}

@media (min-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Blog Preview Grid */
@media (min-width: 768px) {
  .blog-preview-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .blog-preview-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* How It Works Steps */
@media (max-width: 767px) {
  .steps-grid {
    grid-template-columns: 1fr;
  }

  .step-number {
    font-size: 48px;
  }
}

@media (min-width: 768px) {
  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .steps-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .step-number {
    font-size: 72px;
  }
}

/* ============================================
   UTILITY RESPONSIVE CLASSES
   ============================================ */

/* Hide on mobile */
@media (max-width: 767px) {
  .hide-mobile {
    display: none !important;
  }
}

/* Hide on tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .hide-tablet {
    display: none !important;
  }
}

/* Hide on desktop */
@media (min-width: 1024px) {
  .hide-desktop {
    display: none !important;
  }
}

/* Show only on mobile */
@media (min-width: 768px) {
  .show-mobile-only {
    display: none !important;
  }
}

/* Show only on tablet */
.show-tablet-only {
  display: none !important;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .show-tablet-only {    display: block !important;
  }
}

/* Show only on desktop */
@media (max-width: 1023px) {
  .show-desktop-only {
    display: none !important;
  }
}

/* Text alignment responsive */
@media (max-width: 767px) {
  .text-mobile-center {
    text-align: center !important;
  }

  .text-mobile-left {
    text-align: left !important;
  }
}

/* Spacing responsive utilities */
@media (max-width: 767px) {
  .mt-mobile-0 { margin-top: 0 !important; }
  .mb-mobile-0 { margin-bottom: 0 !important; }
  .pt-mobile-0 { padding-top: 0 !important; }
  .pb-mobile-0 { padding-bottom: 0 !important; }
}

/* ============================================
   BREAKPOINT REFERENCE
   ============================================ */

/*
  Mobile:         320px - 767px
  Tablet:         768px - 1023px
  Desktop:        1024px - 1439px
  Large Desktop:  1440px+

  Use mobile-first approach:
   - Base styles apply to mobile
   - Use min-width media queries to enhance for larger screens
   - Use max-width sparingly, only for mobile-specific overrides
*/