/*
  Responsive Styles for PC Sales Website
  Description: Fluid scaling from iPhone 12 Mini (360px) to ultrawide (5120px+)
  Author: [Your Name]
  Last updated: March 2025
  
  Approach: clamp()-based fluid scaling eliminates hard jumps between breakpoints.
  Base range: 360px (iPhone 12 Mini) → 1920px (Full HD) → 5120px (Ultrawide)
  
  Minimal breakpoints retained only for structural layout changes.
*/

/* Fluid root variables — scale smoothly across all viewports */
:root {
    /* Font sizes: min @ 360px, fluid middle, max @ 1920px+ */
    --font-size-base: clamp(14px, 0.5vw + 12px, 20px);
    --font-size-h1: clamp(1.4rem, 1vw + 1.1rem, 2.5rem);
    --font-size-h2: clamp(1.2rem, 0.8vw + 0.9rem, 2rem);
    --font-size-h3: clamp(1rem, 0.6vw + 0.8rem, 1.5rem);

    /* Container: fluid width with sensible bounds */
    --container-width: 100%;
    --container-padding: clamp(10px, 2vw, 50px);

    /* Carousel */
    --carousel-aspect-ratio: 56.25%; /* 16:9 */

    /* Carousel controls */
    --carousel-btn-size: clamp(28px, 4vw, 60px);
    --carousel-btn-icon: clamp(22px, 3vw, 45px);
    --carousel-indicator-size: clamp(8px, 1vw, 15px);
    --carousel-indicator-gap: clamp(4px, 0.5vw, 6px);
    --carousel-indicators-bottom: clamp(5px, 2vw, 30px);
}

/* Base styles for all screen sizes */
body {
    font-size: var(--font-size-base);
    padding: clamp(10px, 2vw, 20px);
}

.container {
    width: clamp(320px, 90vw, 1600px);
    padding: var(--container-padding);
    margin: 0 auto;
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }

/* Carousel — responsive with aspect ratio */
.carousel {
    position: relative;
    width: 100%;
    padding-top: var(--carousel-aspect-ratio);
    overflow: hidden;
}

.carousel-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    transition: transform 0.5s ease;
}

.carousel-slide {
    position: relative;
    min-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: var(--carousel-btn-size);
    height: var(--carousel-btn-size);
}

.carousel-btn i {
    font-size: var(--carousel-btn-icon);
}

.carousel-indicators:not(.toolbar-indicators) {
    bottom: var(--carousel-indicators-bottom);
}

.carousel-indicator {
    width: var(--carousel-indicator-size);
    height: var(--carousel-indicator-size);
    margin: 0 var(--carousel-indicator-gap);
}

/* Mobile-only: increase tap targets for touch */
@media screen and (max-width: 680px) {
    .carousel-indicator {
        min-width: 12px;
        min-height: 12px;
        margin: 0 6px;
    }
}

/* Print styles */
@media print {
    body {
        padding: 0.4in;
        font-size: 12pt;
        color: #222;
        background-color: white;
    }
    
    .carousel {
        display: none;
    }
    
    .container {
        max-width: 100%;
        box-shadow: none;
        padding: 0;
        margin: 0;
    }
    
    a {
        color: #000;
        text-decoration: underline;
    }
}