/* ==========================================================================
   chladenie-vody.sk – responzívne štýly

   Tento súbor obsahuje výhradne media queries. Prepisujeme len tie vlastnosti,
   ktoré sa na danom zlome skutočne menia – desktopový základ zostáva
   v global.css.

   Zlomy sú zoradené zostupne, aby platilo prirodzené kaskádovanie.
   ========================================================================== */

/* --------------------------------------------------------- max-width: 1200px */
@media (max-width: 1200px) {

    /* header */
    .mega__inner { grid-template-columns: 1fr 18rem; }
    .mainnav__link { padding-inline: .5rem; }
    /* END header */

}

/* --------------------------------------------------------- max-width: 1024px */
@media (max-width: 1024px) {

    /* grids */
    .grid--4 { grid-template-columns: repeat(3, 1fr); }
    /* END grids */

    /* hero – zvislé oddeľovače by pri užšom páse tlačili text k ikone */
    .hero__features { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
    .hero__features li + li .hero__feature { padding-left: 0; border-left: 0; }
    /* END hero */

    /* header – náhľad by pri tejto šírke zúžil zoznam odkazov */
    .mega__inner { grid-template-columns: 1fr; }
    .mega__preview { display: none; }
    /* END header */

}

/* ---------------------------------------------------------- max-width: 991px */
@media (max-width: 991px) {

    /* header */
    .mainnav__inner { padding-block: 1rem; }
    .mainnav__list { display: none; }
    .burger { display: block; }
    .logo img { width: 143px; height: 41px; }
    /* END header */

}

/* ---------------------------------------------------------- max-width: 900px */
@media (max-width: 900px) {

    /* contact */
    .contact__grid { grid-template-columns: 1fr; }
    /* END contact */

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

    /* split */
    .split { grid-template-columns: 1fr; }
    /* END split */

}

/* ---------------------------------------------------------- max-width: 860px */
@media (max-width: 860px) {

    /* hero */
    .hero__grid { grid-template-columns: 1fr; }
    .hero__media { max-width: 22rem; margin-inline: 0; }
    .hero__lead { margin-bottom: 1.75rem; }
    /* END hero */

    /* grids */
    .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
    /* END grids */

    /* product */
    .product__grid { grid-template-columns: 1fr; }
    /* END product */

}

/* ---------------------------------------------------------- max-width: 640px */
@media (max-width: 640px) {

    /* form */
    .form__row { grid-template-columns: 1fr; }
    /* END form */

}

/* ---------------------------------------------------------- max-width: 560px */
@media (max-width: 560px) {

    /* grids */
    .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
    /* END grids */

    /* hero */
    .hero__stats { gap: 1rem 1.5rem; }
    .hero__stat-label { font-size: .6875rem; letter-spacing: .08em; }
    .hero__actions .btn { width: 100%; }
    .hero__features { grid-template-columns: 1fr; gap: 1rem; }
    /* END hero */

    /* use-card */
    .use-card { padding: 1.125rem 1.25rem; }
    /* END use-card */

    /* cycle */
    .cycle__step { grid-template-columns: 2.5rem 1fr; gap: .875rem; }
    .cycle__icon { width: 2.5rem; height: 2.5rem; }
    .cycle__step:not(:last-child)::before { left: 1.25rem; top: 3rem; }
    /* END cycle */

    /* footer */
    .footer__grid { grid-template-columns: 1fr; }
    /* END footer */

}

/* ---------------------------------------------------------- min-width: 992px */
@media (min-width: 992px) {

    /* header – mobilná zásuvka sa na desktope nevykresľuje */
    .drawer, .drawer-overlay { display: none; }
    /* END header */

}