/**
 * Responsive Design
 * Mobile-first responsive styles and breakpoints
 */

/* Mobile Devices (< 768px) */
@media (max-width: 768px) {
    :root {
        --font-size-base: 13px;
        --font-size-grub: 14px;
        --font-size-boot: 12px;
        --spacing-lg: 1rem;
    }

    .grub-screen,
    .boot-sequence,
    .terminal {
        padding: var(--spacing-sm);
    }

    .input-line { flex-wrap: wrap; }
}

/* Small Mobile (< 480px) */
@media (max-width: 480px) 
{
    :root 
    {
        --font-size-base: 12px;
        --font-size-grub: 13px;
        --font-size-boot: 11px;
    }
}

/* Landscape Mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .grub-screen,
    .boot-sequence,
    .terminal {
        padding: var(--spacing-xs) var(--spacing-sm);
    }
}

/* Tablet & Above (>= 768px) */
@media (min-width: 768px) {
    :root {
        --font-size-base: 14px;
    }
}

/* Desktop (>= 1024px) */
@media (min-width: 1024px) {

}

/* Large Desktop (>= 1440px) */
@media (min-width: 1440px) {

}