/**
 * ╔══════════════════════════════════════╗
 * ║  KLUE DIGITAL — responsive.css       ║
 * ║  Mobile-first breakpoints            ║
 * ║  Versão: 2.0.0                       ║
 * ╚══════════════════════════════════════╝
 */

/* ────────────────────────────────────────
   BREAKPOINTS
   ──────────────────────────────────────── */

/* Small devices (mobile) */
@media (max-width: 640px) {
  :root {
    --section-py: clamp(2rem, 5vw, 4rem);
    --container-px: 24px;
  }

  html {
    font-size: 15px;
  }

  .container {
    width: calc(100% - var(--container-px));
  }

  /* Hero */
  .hero {
    min-height: 80vh;
    padding-top: var(--sp-20);
    padding-bottom: var(--sp-12);
  }

  .hero-title .line-1,
  .hero-title .line-2 {
    font-size: clamp(28px, 7vw, 48px);
  }

  .hero-sub {
    font-size: 14px;
    margin-bottom: var(--sp-6);
  }

  .hero-cta-row {
    flex-direction: column;
    gap: var(--sp-4);
  }

  .btn-primary,
  .btn-secondary {
    width: 100%;
  }

  .hero-scroll {
    display: none;
  }

  .hero-orb {
    width: 100vw;
    height: 100vw;
    top: -50%;
    right: -50%;
    opacity: 0.5;
  }

  /* Header */
  .header-row {
    padding: var(--sp-4) var(--sp-6);
  }

  .logo-img {
    height: 36px;
  }

  /* Forms */
  .form-row {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  .form-group {
    margin-bottom: var(--sp-4);
  }

  .form-group input,
  .form-group textarea {
    padding: var(--sp-3);
  }

  /* Stats */
  .stats-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  /* Cards */
  .card {
    padding: var(--sp-6);
  }

  .card-img {
    height: 160px;
    margin-bottom: var(--sp-4);
  }

  /* Section titles */
  .section-title {
    font-size: var(--fs-2xl);
    margin-bottom: var(--sp-4);
  }

  /* Buttons */
  .btn {
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-xs);
  }

  /* Mobile menu */
  .mobile-menu {
    width: 100vw;
    padding: var(--sp-20) var(--sp-6);
    gap: var(--sp-4);
  }

  .mob-link {
    font-size: 20px;
  }

  /* Hamburger */
  .hamburger {
    width: 40px;
    height: 40px;
  }

  .ham-line {
    width: 18px;
    height: 1.5px;
  }

  /* Toast */
  .toast {
    bottom: var(--sp-4);
    left: var(--sp-4);
    right: var(--sp-4);
    font-size: var(--fs-xs);
    padding: var(--sp-3) var(--sp-4);
  }

  /* Grid */
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }

  /* Flex */
  .flex-col-mobile {
    flex-direction: column;
  }
}

/* Medium devices (tablets) */
@media (min-width: 641px) and (max-width: 1024px) {
  :root {
    --section-py: clamp(3rem, 6vw, 5rem);
    --container-px: 32px;
  }

  html {
    font-size: 16px;
  }

  /* Hero */
  .hero {
    min-height: 90vh;
    padding-top: var(--sp-20);
  }

  .hero-title .line-1,
  .hero-title .line-2 {
    font-size: clamp(40px, 7.5vw, 80px);
  }

  .hero-cta-row {
    flex-wrap: wrap;
  }

  /* Section titles */
  .section-title {
    font-size: var(--fs-3xl);
  }

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

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

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

  /* Forms */
  .form-row {
    grid-template-columns: 1fr 1fr;
  }

  /* Cards */
  .card {
    padding: var(--sp-6);
  }

  .card-img {
    height: 200px;
  }
}

/* Large devices (desktop) */
@media (min-width: 1025px) {
  :root {
    --section-py: clamp(4rem, 8vw, 8rem);
    --container-px: 48px;
  }

  /* Header desktop nav visible */
  .hamburger {
    display: none;
  }

  .mobile-menu {
    display: none !important;
  }

  .nav-desktop {
    display: flex !important;
  }

  /* Hero */
  .hero {
    min-height: 100vh;
    padding-top: var(--sp-24);
  }

  .hero-title .line-1,
  .hero-title .line-2 {
    font-size: clamp(60px, 8vw, 112px);
  }

  .hero-scroll {
    display: flex;
  }

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

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

  /* Stats */
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Cards */
  .card {
    padding: var(--sp-8);
  }

  .card-img {
    height: 280px;
  }

  /* Section titles */
  .section-title {
    font-size: var(--fs-4xl);
  }

  /* Forms */
  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* X-Large devices (4K) */
@media (min-width: 1440px) {
  :root {
    --container: 1320px;
  }

  .section-title {
    font-size: clamp(3rem, 4vw, 5rem);
  }

  .hero-title .line-1,
  .hero-title .line-2 {
    font-size: clamp(80px, 8vw, 140px);
  }
}

/* ────────────────────────────────────────
   ORIENTATION
   ──────────────────────────────────────── */

@media (orientation: landscape) and (max-height: 600px) {
  .hero {
    min-height: auto;
    padding: var(--sp-12);
  }

  .hero-scroll {
    display: none;
  }
}

/* ────────────────────────────────────────
   DEVICE CAPABILITIES
   ──────────────────────────────────────── */

/* High DPI / Retina displays */
@media (min-resolution: 192dpi) {
  body::after {
    opacity: 0.02;
  }
}

/* Touch devices */
@media (hover: none) and (pointer: coarse) {
  /* Hide custom cursor on touch devices */
  .cursor,
  .cursor-dot {
    display: none !important;
  }

  /* Larger touch targets */
  .btn {
    padding: var(--sp-4) var(--sp-6);
    min-height: 44px;
  }

  a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Remove hover states */
  .card:hover {
    transform: none;
  }

  .btn-hero:hover {
    transform: none;
  }

  /* Simpler animations for touch */
  @media (prefers-reduced-motion: no-preference) {
    * {
      --dur-fast: 300ms;
    }
  }
}

/* Pointer devices only */
@media (hover: hover) and (pointer: fine) {
  /* Smooth hover transitions */
  .btn,
  .card,
  a {
    transition: all var(--dur-base) var(--ease-out);
  }
}

/* ────────────────────────────────────────
   PRINT STYLES
   ──────────────────────────────────────── */

@media print {
  body::after {
    display: none;
  }

  .hero-scroll,
  .cursor,
  .cursor-dot,
  .hamburger,
  .mobile-menu,
  footer {
    display: none;
  }

  .container {
    width: 100%;
    max-width: 100%;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  img {
    max-width: 100%;
  }
}

/* ────────────────────────────────────────
   COLOR SCHEME PREFERENCES
   ──────────────────────────────────────── */

/* Dark mode (default) */
@media (prefers-color-scheme: dark) {
  /* Already dark by default */
}

/* Light mode (if needed in future) */
@media (prefers-color-scheme: light) {
  /* Could implement light theme here */
}

/* ────────────────────────────────────────
   PERFORMANCE
   ──────────────────────────────────────── */

/* Reduce animations on slower devices */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High contrast mode for accessibility */
@media (prefers-contrast: more) {
  :root {
    --clr-border: var(--clr-white);
  }

  .card,
  .form-group input,
  .form-group textarea {
    border-width: 2px;
  }

  *:focus-visible {
    outline-width: 3px;
  }
}