/* ========================================
   DIAL GRID - MOBILE OPTIMIZATION
   Makes the 7 dials responsive on all devices
   ======================================== */

/* BASE DIAL STYLES - KEEP DESKTOP LOOK */
.dial-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.dial {
  position: relative;
  transition: transform 0.3s ease;
}

.dial:hover {
  transform: translateY(-8px);
}

/* PERFORMANCE DIAL - ALWAYS BIGGER */
.dial-container.col-span-2 .dial {
  width: 16rem; /* 256px */
  height: 16rem;
}

/* REGULAR DIALS */
.dial-container:not(.col-span-2) .dial {
  width: 14rem; /* 224px */
  height: 14rem;
}

/* ========================================
   TABLET BREAKPOINT (768px - 1023px)
   ======================================== */
@media (max-width: 1023px) and (min-width: 768px) {
  /* 2 columns on tablet */
  .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }

  /* Performance dial stays bigger but not full width */
  .dial-container.col-span-2 {
    grid-column: span 2 !important;
  }

  .dial-container.col-span-2 .dial {
    width: 20rem; /* 320px - bigger on tablet */
    height: 20rem;
  }

  /* Regular dials sized for 2-column layout */
  .dial-container:not(.col-span-2) .dial {
    width: 14rem; /* 224px */
    height: 14rem;
  }
}

/* ========================================
   MOBILE BREAKPOINT (below 768px)
   ======================================== */
@media (max-width: 767px) {
  /* SINGLE COLUMN LAYOUT */
  .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    padding: 0 1rem !important;
  }

  /* Performance dial - larger on mobile */
  .dial-container.col-span-2 {
    grid-column: span 1 !important;
  }

  .dial-container.col-span-2 .dial {
    width: 100% !important;
    max-width: 20rem !important; /* 320px max */
    height: 20rem !important;
  }

  /* Regular dials - consistent size */
  .dial-container:not(.col-span-2) .dial {
    width: 100% !important;
    max-width: 16rem !important; /* 256px max */
    height: 16rem !important;
  }

  /* Center all dials */
  .dial-container {
    justify-content: center;
    margin: 0 auto;
  }

  /* Adjust padding inside dials */
  .dial-face {
    padding: 1.25rem !important;
  }

  /* Adjust icon sizes */
  .dial-face .w-20.h-20 {
    width: 4rem !important;
    height: 4rem !important;
  }

  .dial-face .w-16.h-16 {
    width: 3.5rem !important;
    height: 3.5rem !important;
  }

  /* Adjust font sizes */
  .dial-face h3 {
    font-size: 1.25rem !important; /* 20px */
    margin-bottom: 0.5rem !important;
  }

  .dial-face .text-4xl {
    font-size: 2rem !important; /* 32px */
  }

  .dial-face .text-3xl {
    font-size: 1.75rem !important; /* 28px */
  }

  /* Core Web Vitals section - adjust width */
  .dial-face .max-w-40 {
    max-width: 100% !important;
    width: 90% !important;
  }

  .dial-face .text-xs {
    font-size: 0.75rem !important; /* 12px */
  }

  .dial-face .text-sm {
    font-size: 0.875rem !important; /* 14px */
  }
}

/* ========================================
   SMALL MOBILE (below 480px)
   ======================================== */
@media (max-width: 479px) {
  /* Slightly smaller dials on very small screens */
  .dial-container.col-span-2 .dial {
    max-width: 18rem !important; /* 288px max */
    height: 18rem !important;
  }

  .dial-container:not(.col-span-2) .dial {
    max-width: 15rem !important; /* 240px max */
    height: 15rem !important;
  }

  /* Tighter spacing */
  .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
    gap: 0.75rem !important;
    padding: 0 0.75rem !important;
  }

  /* Smaller text on tiny screens */
  .dial-face h3 {
    font-size: 1.125rem !important; /* 18px */
  }

  .dial-face .text-4xl {
    font-size: 1.75rem !important; /* 28px */
  }

  .dial-face .text-3xl {
    font-size: 1.5rem !important; /* 24px */
  }

  .dial-face .w-20.h-20 {
    width: 3.5rem !important;
    height: 3.5rem !important;
  }

  .dial-face .w-16.h-16 {
    width: 3rem !important;
    height: 3rem !important;
  }

  .dial-face i {
    font-size: 1.25rem !important; /* 20px */
  }
}

/* ========================================
   TOUCH OPTIMIZATION
   ======================================== */
@media (hover: none) and (pointer: coarse) {
  /* Disable hover effects on touch devices */
  .dial:hover {
    transform: none !important;
  }

  /* Add touch feedback instead */
  .dial:active {
    transform: scale(0.98) !important;
    transition: transform 0.1s ease !important;
  }

  /* Make touch targets larger */
  .dial {
    min-height: 12rem !important;
    min-width: 12rem !important;
  }
}

/* ========================================
   GLASS EFFECT OPTIMIZATION FOR MOBILE
   ======================================== */
@media (max-width: 767px) {
  /* Simplify glass effect on mobile for performance */
  .dial-face.glass-effect {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  /* Ensure text is always readable */
  .dial-face h3,
  .dial-face .text-4xl,
  .dial-face .text-3xl,
  .dial-face .text-xs,
  .dial-face .text-sm {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }
}

/* ========================================
   GRADIENT TEXT FIX FOR MOBILE
   ======================================== */
@media (max-width: 767px) {
  /* Ensure gradient text shows properly */
  .bg-gradient-to-r.bg-clip-text.text-transparent,
  .performance-score,
  .visibility-score {
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }
}

/* ========================================
   LOADING SKELETON OPTIMIZATION
   ======================================== */
@media (max-width: 767px) {
  .skeleton-loading {
    animation: skeleton-pulse 1.5s ease-in-out infinite;
  }

  @keyframes skeleton-pulse {
    0%,
    100% {
      opacity: 0.4;
    }
    50% {
      opacity: 0.8;
    }
  }
}

/* ========================================
   CORE WEB VITALS SECTION - MOBILE FIX
   ======================================== */
@media (max-width: 767px) {
  /* Ensure Core Web Vitals section doesn't overflow */
  .dial-face .mt-3.text-xs.space-y-1 {
    margin-top: 0.75rem !important;
    width: 100% !important;
    padding: 0 0.5rem !important;
  }

  .dial-face .flex.justify-between {
    gap: 0.5rem !important;
  }

  /* Color-coded values */
  #dial-lcp-value,
  #dial-cls-value,
  #dial-inp-value {
    font-weight: 700 !important;
    font-size: 0.75rem !important;
  }
}

/* ========================================
   ACCESSIBILITY - FOCUS STATES
   ======================================== */
.dial:focus,
.dial-face:focus {
  outline: 2px solid #8b5cf6 !important;
  outline-offset: 4px !important;
}

/* ========================================
   DARK MODE COMPATIBILITY
   ======================================== */
@media (max-width: 767px) {
  /* Ensure dark mode text is readable on mobile */
  .dark .dial-face h3,
  .dark .dial-face .text-gray-600,
  .dark .dial-face .text-gray-300 {
    color: #e5e7eb !important;
  }

  .dark .dial-face {
    background: rgba(30, 41, 59, 0.7) !important;
  }
}

/* ========================================
   PREVENT HORIZONTAL SCROLL
   ======================================== */
.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
  max-width: 100%;
  overflow-x: hidden;
}

.dial-container {
  max-width: 100%;
  overflow: visible;
}