/* /assets/css/responsive.css */
/* ==========================================================================
   DESKTOP & TABLET SCALING (Responsive Geometry)
   ========================================================================== */

/* TABLET (768px and up) */
@media (min-width: 768px) {
    /* Reveal Desktop Navbar Elements */
    .desktop-only { display: flex !important; }
    .mobile-menu-btn { display: none !important; }
    
    .nav-links { display: flex; gap: 24px; align-items: center; font-weight: 600; }
    
    /* Hero Typography Scales Up */
    .hero-section h1 { font-size: 3.5rem; }
    .hero-section p { font-size: 1.25rem; }
    
    /* 2 Columns on Tablet */
    .tools-grid { grid-template-columns: repeat(2, 1fr); }
    #results-container { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    
    /* Forms side-by-side */
    .input-group { flex-direction: row; gap: 24px; }
    .gender-selector { flex-direction: row; }
    .button-group { flex-direction: row; justify-content: center; }
    .btn { width: auto; min-width: 250px; }
    
    /* Footer Spacing */
    .footer-container { grid-template-columns: 2fr 1fr 1fr; }
}

/* DESKTOP (1024px and up) */
@media (min-width: 1024px) {
    .hero-section { padding: 100px 20px 80px; }
    
    /* 3 Columns on Desktop (The sweet spot) */
    .tools-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
    
    /* Hover Interactions (Only enabled on devices with mice) */
    .tool-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); border-color: var(--primary); }
    .btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(79, 70, 229, 0.6); }
}

/* ULTRA WIDE (1440px and up) */
@media (min-width: 1440px) {
    /* 4 Columns for huge monitors to prevent stretching */
    .tools-grid { grid-template-columns: repeat(4, 1fr); }
}