<meta name="viewport" content="width=device-width, initial-scale=1" />

/* Базова структура */
@media тип-медіа and (умова) {
    /* CSS-правила, що діють тільки при виконанні умови */
    .element {
        color: red;
    }
}

/* Базові стилі */
.btn {
    background: blue;
}

/* Media query — застосовується ПРИ умові */
@media (max-width: 600px) {
    .btn {
        background: red;
    } /* Перекриває blue на малих екранах */
}

@media screen {
    /* Для екранів (монітори, телефони, планшети) */
}
@media print {
    /* Для друку — CSS друку */
}
@media all {
    /* Для всіх пристроїв (за замовчуванням) */
}

@media print {
    .no-print {
        display: none;
    } /* Сховати навігацію, рекламу */
    body {
        font-size: 12pt;
    } /* Пунктовий розмір для друку */
    a::after {
        content: ' (' attr(href) ')';
    } /* Показати URL */
    @page {
        margin: 2cm;
    } /* Поля сторінки */
}

/* Застосувати, коли ширина viewport ≥ 768px */
@media (min-width: 768px) { ... }

/* Застосувати, коли ширина viewport ≤ 767px */
@media (max-width: 767px) { ... }

/* Діапазон: від 768px до 1199px */
@media (min-width: 768px) and (max-width: 1199px) { ... }

/* Замість: @media (max-width: 767px) */
@media (width <= 767px) { ... }

/* Замість: @media (min-width: 768px) and (max-width: 1199px) */
@media (768px <= width <= 1199px) { ... }

@media (orientation: portrait) {
    /* Портретна орієнтація (вище, ніж ширше) */
    .sidebar {
        display: none;
    }
}

@media (orientation: landscape) {
    /* Альбомна орієнтація (ширше, ніж вище) */
    .sidebar {
        display: block;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0f172a;
        --text: #f1f5f9;
        --accent: #818cf8;
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --bg: #ffffff;
        --text: #1e293b;
        --accent: #6366f1;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* Вимкнути або зменшити анімації для людей із вестибулярними розладами */
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* Чи може пристрій виконати :hover? */
@media (hover: hover) {
    /* Тільки для пристроїв із мишею — показати hover-ефекти */
    .btn:hover {
        background: dark;
    }
}

/* Точність вказівника */
@media (pointer: coarse) {
    /* Сенсорний екран — збільшити кнопки для пальця */
    .btn {
        min-height: 44px;
        padding: 0 1.5rem;
    }
}

@media (pointer: fine) {
    /* Миша — стандартний розмір */
    .btn {
        min-height: 32px;
    }
}

/* Для Retina/HiDPI дисплеїв */
@media (min-resolution: 2dppx) {
    .logo {
        background-image: url('logo@2x.png');
    }
}

/* Зберегти breakpoints як коментарі або через @custom-media (CSS Level 5) */
/* Зараз стандартний патерн: */
@media (min-width: 768px) {
    /* md */
}
@media (min-width: 1024px) {
    /* lg */
}
@media (min-width: 1280px) {
    /* xl */
}

@media screen and (min-width: 768px) and (orientation: landscape) {
    /* Екран, ширина ≥ 768px, альбомна орієнтація */
}

@media (max-width: 767px), print {
    /* Мобільний АБО при друку */
    .sidebar {
        display: none;
    }
}

@media not print {
    /* Все, крім друку */
    .no-print-element {
        display: block;
    }
}

@media only screen and (min-width: 768px) {
    /* `only` ігнорується сучасними браузерами, але не дозволяє
       старим браузерам застосовувати правила без підтримки media features */
}

img,
video,
iframe {
    max-width: 100%; /* Ніколи не виходить за межі батька */
    height: auto; /* Зберігає пропорції */
}

<img
    src="image-800.jpg"
    srcset="image-400.jpg 400w, image-800.jpg 800w, image-1600.jpg 1600w"
    sizes="
        (max-width: 600px) 100vw,
        (max-width: 1200px) 50vw,
        33vw
    "
    alt="Адаптивне зображення"
/>

<picture>
    <!-- Мобільне зображення (вертикальний кроп) -->
    <source media="(max-width: 767px)" srcset="hero-mobile.jpg" />
    <!-- Планшетне -->
    <source media="(max-width: 1023px)" srcset="hero-tablet.jpg" />
    <!-- За замовчуванням — десктоп -->
    <img src="hero-desktop.jpg" alt="Hero image" />
</picture>

<picture>
    <!-- WebP для сучасних браузерів -->
    <source type="image/webp" srcset="image.webp" />
    <!-- AVIF — ще ефективніший (Chrome 85+, Firefox 113+) -->
    <source type="image/avif" srcset="image.avif" />
    <!-- JPEG як fallback -->
    <img src="image.jpg" alt="..." />
</picture>

.nav {
    flex-direction: column;
    gap: 0.5rem;

    /* Вкладений media query (CSS Nesting, 2023+) */
    @media (min-width: 768px) {
        flex-direction: row;
        gap: 1.5rem;
    }
}

.hero {
    /* Стара проблема */
    height: 100vh; /* Може бути більше за видиму зону на iOS Safari */

    /* Нові одиниці */
    height: 100svh; /* Small Viewport Height — без адресного рядка */
    height: 100dvh; /* Dynamic Viewport Height — оновлюється при скролі */
    height: 100lvh; /* Large Viewport Height — з адресним рядком */
}

@media print {
    /* 1. Сховати непотрібне при друку */
    header,
    footer,
    nav,
    .sidebar,
    .advertisement,
    .cookie-banner,
    .back-to-top,
    video,
    iframe {
        display: none !important;
    }

    /* 2. Скинути фони та тіні (економія чорнила) */
    * {
        background: transparent !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    /* 3. Встановити шрифт та розміри для друку */
    body {
        font-family: Georgia, serif;
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
    }

    h1 {
        font-size: 22pt;
    }
    h2 {
        font-size: 18pt;
    }
    h3 {
        font-size: 14pt;
    }

    /* 4. Показати URL посилань */
    a[href]::after {
        content: ' (' attr(href) ')';
        font-size: 10pt;
        color: #555;
    }

    /* Не показувати для внутрішніх посилань */
    a[href^='#']::after {
        content: none;
    }

    /* 5. Контроль розривів сторінки */
    h2,
    h3 {
        page-break-after: avoid; /* Не розривати після заголовка */
    }

    img {
        max-width: 100% !important;
        page-break-inside: avoid; /* Не розривати зображення */
    }

    table {
        border-collapse: collapse;
        page-break-inside: avoid;
    }

    /* 6. Налаштування полів сторінки */
    @page {
        margin: 2cm;
        size: A4 portrait; /* або landscape */
    }

    /* Перша сторінка з більшим верхнім відступом */
    @page :first {
        margin-top: 4cm;
    }
}

.invoice {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
}

/* На екрані — красивий дизайн */
.invoice-header {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: white;
    padding: 2rem;
    border-radius: 12px;
    margin-bottom: 2rem;
}

/* При друці — лише рамка замість градієнта */
@media print {
    .invoice-header {
        background: none !important;
        color: black !important;
        border: 2px solid black;
        border-radius: 0;
    }

    .invoice-footer {
        position: fixed;
        bottom: 0;
        /* Підвал на кожній сторінці */
        border-top: 1px solid #ccc;
        padding-top: 0.5rem;
    }
}