/* ============================================
   RESPONSIVE STYLES - Mobile First Approach
   ============================================ */

/* ==================
   MOBILE (< 576px)
   ================== */

/* Base mobile styles (including hero) are in main.css */

/* ==================
   SMALL TABLET (576px+)
   ================== */
@media (min-width: 576px) {
    :root {
        --space-xs: 8px;
        --space-sm: 16px;
        --space-md: 24px;
        --space-lg: 32px;
        --space-xl: 48px;
        --space-xxl: 64px;
    }

    .container {
        padding: 0 var(--space-lg);
    }

    /* Hero adjustments */
    .hero__title {
        font-size: clamp(36px, 5vw, 56px);
    }

    .hero__phone {
        font-size: clamp(36px, 5vw, 56px);
    }

    .hero__slide--3 {
        font-size: clamp(36px, 5vw, 56px);
    }
}

/* Advantages grid - single column on mobile */
@media (max-width: 768px) {
    .advantages-grid {
        grid-template-columns: 1fr !important;
        max-width: 80%;
        margin: 0 auto;
    }
}

/* Flip cards - compact on mobile (Oferta + Korzyści same sizes) */
@media (max-width: 768px) {
    .flip-card {
        min-height: 200px;
    }

    .flip-card__inner {
        min-height: 200px;
    }

    .flip-card__front,
    .flip-card__back {
        min-height: 200px;
        padding: 1rem;
    }

    .flip-card__icon {
        width: 50px;
        height: 50px;
        min-width: 50px;
        min-height: 50px;
        margin-bottom: 0.75rem;
    }

    .flip-card__icon-fa {
        font-size: 45px;
        margin-bottom: 0.75rem;
    }

    .flip-card__title {
        font-size: 15px;
        padding-bottom: 0.5rem;
    }

    .flip-card__text {
        font-size: 13px;
        line-height: 1.5;
        padding: 0.5rem;
    }

    .flip-card__list {
        font-size: 13px;
        line-height: 1.4;
    }

    .flip-card__list li {
        margin-bottom: 0.25rem;
    }
}

/* Extra small mobile - even more compact */
@media (max-width: 480px) {
    .flip-card {
        min-height: 180px;
    }

    .flip-card__inner {
        min-height: 180px;
    }

    .flip-card__front,
    .flip-card__back {
        min-height: 180px;
        padding: 0.75rem;
    }

    .flip-card__icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        margin-bottom: 0.5rem;
    }

    .flip-card__icon-fa {
        font-size: 40px;
        margin-bottom: 0.5rem;
    }

    .flip-card__title {
        font-size: 14px;
        padding-bottom: 0.4rem;
    }

    .flip-card__text {
        font-size: 12px;
        line-height: 1.4;
        padding: 0.4rem;
    }

    .flip-card__list {
        font-size: 12px;
        line-height: 1.3;
    }

    .flip-card__list li {
        margin-bottom: 0.2rem;
    }

    /* Back button (Powrót na stronę główną) – smaller on small screens */
    .btn-primary {
        padding: var(--space-sm) var(--space-md);
        font-size: 14px;
        white-space: normal;
    }
    .btn-primary svg {
        width: 16px;
        height: 16px;
    }
}

/* ==================
   TABLET (768px+)
   ================== */
@media (min-width: 768px) {
    /* Advantages - 2 columns */
    .advantages-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Modal */
    .modal__content {
        padding: var(--space-xxl);
    }

    .modal__title {
        font-size: 28px;
    }

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

    /* Carousel controls larger */
    .carousel__btn {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
}

/* ==================
   DESKTOP (992px+)
   ================== */
@media (min-width: 992px) {
    /* Navigation - horizontal layout */
    .navbar__container {
        padding: var(--space-md) var(--space-xl);
    }

    .navbar__logo img {
        height: 70px;
    }

    .navbar__toggle {
        display: none;
    }

    .navbar__menu {
        position: static;
        display: flex;
        flex-direction: row;
        background: transparent;
        padding: 0;
        transform: none;
        opacity: 1;
        border: none;
    }

    .navbar__link {
        font-size: 16px;
        padding: var(--space-xs) var(--space-md);
    }

    /* Hero (height from main.css, spacing from dividers) */
    .hero-container {
        margin: 0 auto;
    }

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

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

    .footer-column {
        text-align: left;
    }

    .footer-logo {
        margin-left: 0;
    }

    .footer-contact p {
        justify-content: flex-start;
    }

    /* Technology carousel - wider cards */
    .carousel--technology .tech-card {
        max-width: 800px;
    }

    .carousel--technology .tech-card__image {
        height: 400px;
    }
}

/* ==================
   MEDIUM SCREENS (900px - 1100px)
   Smooth transition zone
   ================== */
@media (min-width: 900px) and (max-width: 1100px) {
    .navbar__container {
        padding: 0.75rem 1.5rem;
    }

    .navbar__logo img {
        max-height: 55px;
        max-width: 180px;
    }

    .navbar__menu {
        gap: 1rem;
    }

    .navbar__link {
        font-size: 14px;
        padding: 0.5rem 0.75rem;
    }
}

/* ==================
   LARGE TABLET (768px - 991px)
   Last breakpoint before mobile menu
   ================== */
@media (min-width: 768px) and (max-width: 991px) {
    .navbar__container {
        padding: 0.75rem 1.25rem;
    }

    .navbar__logo img {
        max-height: 50px;
        max-width: 160px;
    }

    .navbar__menu {
        gap: 0.75rem;
    }

    .navbar__link {
        font-size: 13px;
        padding: 0.5rem 0.6rem;
    }
}

/* ==================
   WIDE DESKTOP (1200px+)
   Optimal spacing
   ================== */
@media (min-width: 1200px) {
    .navbar__container {
        padding: 1rem 2rem;
    }

    .navbar__logo img {
        max-height: 70px;
        max-width: 220px;
    }

    .navbar__menu {
        gap: 2rem;
    }

    .navbar__link {
        font-size: 16px;
        padding: 0.5rem 1rem;
    }
}

/* ==================
   LARGE DESKTOP (1092px+)
   ================== */
@media (min-width: 1092px) {
    /* Larger spacing */
    :root {
        --space-xl: 64px;
        --space-xxl: 96px;
    }

    /* Container max width enforced */
    .container {
        max-width: 1400px;
    }

    /* Section titles larger */
    .section-title {
        font-size: 40px;
    }

    /* Cards hover effects more pronounced */
    .card:hover,
    .card:focus-within {
        transform: translateY(-8px);
    }

    .tech-card:hover,
    .tech-card:focus-within {
        transform: translateY(-8px);
    }
}

/* ==================
   EXTRA LARGE (1400px+)
   ================== */
@media (min-width: 1400px) {
    /* Optimal reading width */
    .hero__content {
        padding: 2rem 1.5rem;
    }

    /* Technology cards even larger */
    .carousel--technology .tech-card {
        max-width: 900px;
    }
}

/* ==================
   PRINT STYLES
   ================== */
@media print {
    /* Hide interactive elements */
    .navbar,
    .modal,
    .back-to-top,
    .carousel__btn,
    .carousel__indicators,
    .skip-link {
        display: none !important;
    }

    /* Show all content */
    body {
        background: white;
        color: black;
    }

    /* Remove animations */
    * {
        animation: none !important;
        transition: none !important;
    }

    /* Page breaks */
    section {
        page-break-inside: avoid;
    }

    h1, h2, h3 {
        page-break-after: avoid;
    }
}

/* ==================
   ACCESSIBILITY - HIGH CONTRAST
   ================== */
@media (prefers-contrast: high) {
    :root {
        --brand-color: #ef7f1b;
        --bg-dark: #000000;
        --text-light: #ffffff;
    }

    * {
        border-color: currentColor !important;
    }

    .card,
    .tech-card,
    .advantage {
        border-width: 3px !important;
    }
}

/* ==================
   ACCESSIBILITY - REDUCED MOTION
   ================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Stop carousel autoplay */
    .carousel__track {
        transition: none !important;
    }

    /* Hide video, show static background */
    .hero__video {
        display: none;
    }

    .hero-container {
        background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
    }
}

/* ==================
   DARK MODE (if system prefers)
   ================== */
@media (prefers-color-scheme: dark) {
    /* Already dark by default, but reinforce */
    body {
        background: var(--bg-dark);
        color: var(--text-light);
    }
}

/* ==================
   TOUCH DEVICES
   ================== */
@media (hover: none) and (pointer: coarse) {
    /* Larger tap targets for touch */
    .navbar__link,
    .card,
    .advantage,
    button,
    a {
        min-height: 44px;
        min-width: 44px;
    }

    /* Remove hover effects on touch devices */
    .card:hover,
    .tech-card:hover {
        transform: none;
    }

    /* Larger carousel controls */
    .carousel__btn {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }
}

/* ==================
   LANDSCAPE ORIENTATION
   ================== */
@media (orientation: landscape) and (max-height: 600px) {
    .modal__container {
        max-height: 80vh;
        max-height: calc(100dvh - 1rem);
    }
}

/* Modal: shorter on small screens, smaller type, backdrop fully covers viewport */
@media (max-width: 600px) {
    .modal__container {
        max-height: 65vh;
        max-height: 65dvh;
    }

    .modal__content {
        padding: var(--space-md);
    }

    .modal__title {
        font-size: 1.125rem;
        margin-bottom: var(--space-sm);
    }

    .modal__body {
        font-size: 0.875rem;
        line-height: 1.6;
    }

    .modal__body p {
        margin-bottom: var(--space-sm);
    }

    .modal__footer {
        margin-top: var(--space-md);
    }

    .modal__button {
        font-size: 0.875rem;
        padding: var(--space-xs) var(--space-md);
    }

    .modal .modal__content .modal__close {
        top: 12px;
        right: 12px;
        width: 32px;
        height: 32px;
        font-size: 16px;
    }
}

/* Modal: significantly smaller at smallest breakpoints */
@media (max-width: 400px) {
    .modal {
        padding: 0.5rem;
    }

    .modal__container {
        max-height: 58vh;
        max-height: 58dvh;
        width: 95%;
    }

    .modal__content {
        padding: 0.75rem 1rem;
        border-width: 2px;
    }

    .modal__title {
        font-size: 1rem;
        margin-bottom: 0.35rem;
        padding-right: 2rem;
    }

    .modal__body {
        font-size: 0.8125rem;
        line-height: 1.55;
    }

    .modal__body p {
        margin-bottom: 0.35rem;
    }

    .modal__footer {
        margin-top: 0.75rem;
    }

    .modal__button {
        font-size: 0.8125rem;
        padding: 0.5rem 0.75rem;
    }

    .modal .modal__content .modal__close {
        top: 8px;
        right: 8px;
        width: 28px;
        height: 28px;
        font-size: 14px;
        border-width: 1.5px;
    }
}

@media (max-width: 360px) {
    .modal__container {
        max-height: 55vh;
        max-height: 55dvh;
    }

    .modal__content {
        padding: 0.5rem 0.75rem;
    }

    .modal__title {
        font-size: 0.9375rem;
    }

    .modal__body {
        font-size: 0.75rem;
        line-height: 1.5;
    }

    .modal__body p {
        margin-bottom: 0.25rem;
    }

    .modal__button {
        font-size: 0.75rem;
        padding: 0.45rem 0.6rem;
    }

    .modal .modal__content .modal__close {
        top: 6px;
        right: 6px;
        width: 26px;
        height: 26px;
        font-size: 12px;
    }
}

@media (max-height: 500px) {
    .modal__container {
        max-height: 60vh;
        max-height: 60dvh;
    }
}