/* ============================================
   LEX & ASSOCIADOS - RESPONSIVE STYLES
   Media queries for all breakpoints
   ============================================ */

/* ============================================
   BREAKPOINT VARIABLES REFERENCE:
   Mobile:  < 480px
   Tablet:  480px – 768px
   Desktop: 768px – 1200px
   Large:   > 1200px
   ============================================ */

/* ============================================
   HOMEPAGE LAYOUT BREAKPOINTS
   ============================================ */
@media (max-width: 768px) {
  .services-grid,
  .services-preview__grid {
    grid-template-columns: 1fr;
  }
  .testimonials-grid,
  .testimonials__grid {
    grid-template-columns: 1fr;
  }
  .blog-preview-grid,
  .blog-preview__grid {
    grid-template-columns: 1fr;
  }
  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero__buttons {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 480px) {
  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================
   LARGE DESKTOP (> 1200px)
   ============================================ */
@media (min-width: 1200px) {
  .container {
    max-width: var(--container-xl);
  }
}

/* ============================================
   DESKTOP (768px - 1199px)
   ============================================ */
@media (max-width: 1199px) {
  :root {
    --font-size-5xl: 4.5rem;
    --font-size-4xl: 3.5rem;
    --font-size-3xl: 2.25rem;
  }

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

/* ============================================
   TABLET (768px - 991px)
   ============================================ */
@media (max-width: 991px) {
  :root {
    --font-size-5xl: 3.5rem;
    --font-size-4xl: 2.5rem;
    --font-size-3xl: 1.75rem;
    --font-size-2xl: 1.5rem;
    
    --space-xl: 4rem;
    --space-2xl: 6rem;
  }

  /* Grid adjustments */
  .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Hero adjustments */
  .hero__title {
    font-size: var(--font-size-4xl);
  }

  /* Stats counters */
  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

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

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

  /* Testimonials */
  .testimonials__grid {
    grid-template-columns: 1fr;
  }

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

  /* About columns */
  .about__grid {
    grid-template-columns: 1fr;
  }

  /* Contact grid */
  .contact__grid {
    grid-template-columns: 1fr;
  }

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

/* ============================================
   MOBILE (< 768px)
   ============================================ */
@media (max-width: 767px) {
  :root {
    --font-size-5xl: 2.5rem;
    --font-size-4xl: 2rem;
    --font-size-3xl: 1.5rem;
    --font-size-2xl: 1.25rem;
    
    --space-lg: 3rem;
    --space-xl: 4rem;
    --space-2xl: 5rem;
    
    --navbar-height: 64px;
  }

  /* Container padding */
  .container {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }

  /* Section padding */
  .section {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
  }

  /* Single column grids */
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: 1fr;
  }

  /* Hero section */
  .hero__title {
    font-size: var(--font-size-3xl);
  }

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

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

  .hero__buttons .btn {
    width: 100%;
  }

  /* Stats counters */
  .stats__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

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

  /* Services grid */
  .services__grid {
    grid-template-columns: 1fr;
  }

  /* Team grid */
  .team__grid {
    grid-template-columns: 1fr;
  }

  /* Blog grid */
  .blog__grid {
    grid-template-columns: 1fr;
  }

  /* Cases grid */
  .cases__grid {
    grid-template-columns: 1fr;
  }

  /* Testimonials */
  .testimonials__grid {
    grid-template-columns: 1fr;
  }

  /* Differentials grid */
  .differentials__grid {
    grid-template-columns: 1fr;
  }

  /* Timeline */
  .timeline {
    padding-left: 1.5rem;
  }

  .timeline__item::before {
    width: 10px;
    height: 10px;
    transform: translateX(-4px);
  }

  /* Progress bars */
  .progress-bar__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  /* Contact form */
  .contact__form-wrapper {
    padding: var(--space-md);
  }

  /* Footer */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    text-align: center;
  }

  .footer__brand {
    max-width: 100%;
  }

  .footer__logo {
    align-items: center;
  }

  .footer__social {
    justify-content: center;
  }

  .footer__title::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .footer__links {
    align-items: center;
  }

  .footer__contact-item {
    justify-content: center;
  }

  .footer__bottom-content {
    flex-direction: column;
    text-align: center;
    gap: var(--space-sm);
  }

  /* CTA Banner */
  .cta-banner {
    padding: var(--space-lg) var(--space-md);
  }

  .cta-banner__buttons {
    flex-direction: column;
    width: 100%;
  }

  .cta-banner__buttons .btn {
    width: 100%;
  }

  /* Awards strip */
  .awards__grid {
    grid-template-columns: 1fr;
  }

  /* Blog post */
  .blog-post__layout {
    grid-template-columns: 1fr;
  }

  .blog-post__sidebar {
    order: -1;
  }

  /* Scroll to top button */
  .scroll-to-top {
    width: 44px;
    height: 44px;
    bottom: 5rem;
    right: 1rem;
  }

  /* Accessibility widget */
  .accessibility {
    bottom: 5rem;
    left: 1rem;
  }
}

/* ============================================
   SMALL MOBILE (< 480px)
   ============================================ */
@media (max-width: 479px) {
  :root {
    --font-size-5xl: 2rem;
    --font-size-4xl: 1.75rem;
    --font-size-3xl: 1.375rem;
    
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
  }

  /* Cards */
  .card--service,
  .card--testimonial,
  .card--case {
    padding: var(--space-md);
  }

  /* Buttons */
  .btn {
    padding: 0.875rem 1.5rem;
    font-size: var(--font-size-xs);
  }

  /* Form inputs */
  .form-input {
    padding: 0.875rem 1rem;
  }

  /* Section badge */
  .section-badge {
    font-size: 0.625rem;
    padding: 0.375rem 0.75rem;
  }

  /* Breadcrumb */
  .breadcrumb {
    font-size: var(--font-size-xs);
  }

  /* Mobile menu */
  .navbar__mobile-link {
    font-size: var(--font-size-lg);
  }

  /* Hero */
  .hero__title {
    font-size: var(--font-size-2xl);
  }

  /* Counter */
  .counter__number {
    font-size: var(--font-size-2xl);
  }

  /* Blog card */
  .card--blog__title {
    font-size: var(--font-size-lg);
  }

  /* Team card */
  .card--team__name {
    font-size: var(--font-size-md);
  }

  /* Case card */
  .card--case__title {
    font-size: var(--font-size-md);
  }

  /* Testimonial card */
  .card--testimonial__text {
    font-size: var(--font-size-sm);
  }

  /* Contact info strip */
  .contact-info__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    text-align: center;
  }

  /* Awards */
  .award-card {
    padding: var(--space-sm);
  }

  .award-card__title {
    font-size: var(--font-size-sm);
  }

  /* 404 page */
  .error-404__code {
    font-size: var(--font-size-4xl);
  }
}

/* ============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================ */
@media (pointer: coarse) {
  /* Larger touch targets */
  .navbar__link,
  .footer__link,
  .btn {
    min-height: 44px;
  }

  /* Remove hover effects on touch */
  .card--team__image {
    filter: grayscale(0%);
  }

  .card--blog__content {
    transform: translateY(40%);
  }

  .card--blog__excerpt,
  .card--blog__meta,
  .card--blog__link {
    opacity: 1;
  }

  /* Disable complex hover effects */
  .hover-lift:hover,
  .hover-glow:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ============================================
   LANDSCAPE ORIENTATION ON MOBILE
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding-top: calc(var(--navbar-height) + var(--space-lg));
    padding-bottom: var(--space-lg);
  }

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

  .scroll-indicator {
    display: none;
  }

  .navbar__mobile-menu {
    padding-top: var(--space-lg);
    justify-content: flex-start;
    overflow-y: auto;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
  .navbar,
  .footer,
  .loader,
  .accessibility,
  .scroll-to-top,
  .scroll-indicator,
  .hero__particles {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  .section {
    padding: 1rem 0;
    page-break-inside: avoid;
  }

  a {
    text-decoration: underline;
    color: black;
  }

  .card {
    border: 1px solid var(--color-gray-300);
    box-shadow: none;
  }
}