/* =========================
   MOBILE FIRST – XS (0–576px)
   Mali telefoni
========================= */

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #ffe4ec; /* ROZA – MOBITEL */
    color: #333;
    line-height: 1.6;
}

header {
    background-color: #ff5fa2;
    color: white;
    padding: 2rem 1rem;
    text-align: center;
}

section {
    background-color: white;
    margin: 1rem;
    padding: 1.5rem;
    border-radius: 10px;
}

.device-info::after {
    content: "XS – Mali mobilni telefoni (0–576px)";
    font-weight: bold;
}

/* =========================
   SMALL – SM (576–768px)
   Veći telefoni
========================= */
@media (min-width: 576px) {
    body {
        background-color: #fff3cd; /* ŽUTA – VEĆI MOBITEL */
    }

    .device-info::after {
        content: "SM – Veći mobilni telefoni (576–768px)";
    }
}

/* =========================
   MEDIUM – MD (768–992px)
   Tableti
========================= */
@media (min-width: 768px) {
    body {
        background-color: #d6f0ff; /* PLAVA – TABLET */
    }

    section {
        max-width: 720px;
        margin: 2rem auto;
    }

    .device-info::after {
        content: "MD – Tableti (768–992px)";
    }
}

/* =========================
   LARGE – LG (992–1200px)
   Desktop
========================= */
@media (min-width: 992px) {
    body {
        background-color: #d4edda; /* ZELENA – LAPTOP */
    }

    section {
        max-width: 900px;
    }

    .device-info::after {
        content: "LG – Desktop računala (992–1200px)";
    }
}

/* =========================
   EXTRA LARGE – XL (1200px+)
   Veliki desktop
========================= */
@media (min-width: 1200px) {
    body {
        background-color: #e2e3e5; /* SIVA – VELIKI DESKTOP */
    }

    section {
        max-width: 1100px;
    }

    .device-info::after {
        content: "XL – Veliki desktop zasloni (1200px+)";
    }
}

/* =========================
   PRINT – CRNO BIJELO
========================= */
@media print {
    body {
        background: white;
        color: black;
    }

    header {
        background: white;
        color: black;
        border-bottom: 2px solid black;
    }

    section {
        border: 1px solid black;
    }
}