/* ============================================================
   ELEKTOR — Responsive Stylesheet (Mobile-First)
   Breakpoints:
     Desktop:      1200px+
     Laptop:       992px–1199px
     Tablet:       768px–991px
     Mobile Large: 576px–767px
     Mobile Small: < 576px
   ============================================================ */

/* ----------------------------------------------------------
   LAPTOP  (max 1199px)
   ---------------------------------------------------------- */
@media (max-width: 1199px) {
    :root { --section-pad: 96px; }

    h1 { font-size: 52px; }
    h2 { font-size: 40px; }

    .hero__headline { font-size: 52px; }
    .hero__content { padding-left: 40px; padding-right: 40px; }

    .footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
        gap: 32px;
    }

    .checkout-layout {
        grid-template-columns: 58fr 42fr;
        gap: 32px;
    }
}

/* ----------------------------------------------------------
   TABLET  (max 991px)
   ---------------------------------------------------------- */
@media (max-width: 991px) {
    :root { --section-pad: 80px; }

    h1 { font-size: 44px; }
    h2 { font-size: 36px; }
    h3 { font-size: 26px; }

    /* Header */
    .main-nav { display: none; }
    .hamburger-btn { display: flex; }

    /* Hero */
    .hero {
        grid-template-columns: 1fr;
        height: auto;
        padding-top: 80px;
        min-height: 100vh;
    }
    .hero__content {
        padding: 64px 24px 48px;
        order: 2;
    }
    .hero__headline { font-size: 44px; }
    .hero__image-wrap {
        order: 1;
        height: 50vh;
        min-height: 360px;
    }
    .hero__image-wrap::before {
        width: 100%;
        height: 80px;
        top: auto;
        bottom: 0;
        background: linear-gradient(to top, var(--bg-primary), transparent);
    }
    .hero__sub { max-width: 100%; }

    /* Category grid */
    .grid-4 { grid-template-columns: 1fr 1fr; }

    /* Product grid */
    .section-row { flex-direction: column; align-items: flex-start; gap: 12px; }

    /* Feature cards */
    .feature-cards-grid { grid-template-columns: 1fr 1fr; }

    /* Lookbook */
    .lookbook { height: 420px; }
    .lookbook__title { font-size: 42px; }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    .footer-brand { grid-column: 1 / -1; }

    /* Product detail */
    .product-detail__split {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Cart */
    .cart-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .order-summary { position: static; }

    /* Checkout */
    .checkout-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .checkout-summary { position: static; }

    /* Contact */
    .contact-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* About story */
    .story-block {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .story-block--reverse { direction: ltr; }

    /* Stats */
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }

    /* Shipping */
    .shipping-cards { grid-template-columns: 1fr; }

    /* Size guide */
    .measure-steps { grid-template-columns: 1fr; }

    /* Mission cards */
    .grid-3 { grid-template-columns: 1fr; }

    /* About hero */
    .about-hero { height: 50vh; }
    .about-hero__title { font-size: 42px; }

    /* Form rows */
    .form-row { grid-template-columns: 1fr; }
    .form-row--3 { grid-template-columns: 1fr; }

    /* Checkout progress */
    .progress-connector { width: 40px; }
    .progress-step__label { display: none; }

    /* Newsletter */
    .newsletter__form {
        flex-direction: column;
        border: none;
        border-radius: 0;
        gap: 12px;
    }
    .newsletter__input {
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--bg-tertiary);
    }
    .newsletter__btn {
        border-radius: 6px;
        border: none;
        border-left: none;
        width: 100%;
        justify-content: center;
    }
}

/* ----------------------------------------------------------
   MOBILE LARGE  (max 767px)
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    :root { --section-pad: 64px; }

    .container { padding: 0 16px; }

    h1 { font-size: 36px; }
    h2 { font-size: 28px; }
    h3 { font-size: 22px; }
    h4 { font-size: 18px; }

    .site-header { height: 64px; }
    .page-header { padding: 108px 0 48px; }

    /* Hero */
    .hero { padding-top: 64px; }
    .hero__headline { font-size: 36px; }
    .hero__sub { font-size: 16px; }
    .hero__actions { flex-direction: column; }
    .hero__actions .btn { width: 100%; justify-content: center; }

    /* Category cards — 2 columns at this breakpoint */
    .category-card { aspect-ratio: 4/3; }

    /* All 4-col grids become 2 columns at mobile large */
    .grid-4 { grid-template-columns: 1fr 1fr; }

    /* Lookbook */
    .lookbook { height: 360px; }
    .lookbook__title { font-size: 32px; }
    .lookbook__content { padding: 0 16px; max-width: 100%; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    /* Cart item */
    .cart-item { flex-direction: column; }
    .cart-item__image { width: 100%; height: auto; aspect-ratio: 3/2; }
    .cart-item__right { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }

    /* Section heading */
    .lookbook__title { font-size: 32px; }

    /* About */
    .about-hero { margin-top: 64px; height: 45vh; }
    .about-hero__title { font-size: 36px; }
    .about-hero__sub { font-size: 15px; }

    .stats-grid { grid-template-columns: 1fr 1fr; }
    .stat-item__number { font-size: 36px; }

    .team-cta { height: 360px; }
    .team-cta__title { font-size: 30px; }

    /* Shipping */
    .return-step { flex-direction: column; gap: 12px; }

    /* Checkout */
    .checkout-header__inner { flex-direction: row; }

    /* Product info */
    .product-gallery__thumbs { grid-template-columns: repeat(4, 1fr); }
    .size-options { flex-wrap: wrap; }
    .trust-badges { flex-direction: column; gap: 12px; }

    /* Tab bar */
    .tab-btn { padding: 12px 20px; font-size: 13px; }

    /* Newsletter */
    .newsletter__title { font-size: 28px; }
}

/* ----------------------------------------------------------
   MOBILE SMALL  (max 575px)
   ---------------------------------------------------------- */
@media (max-width: 575px) {
    :root { --section-pad: 56px; }

    h1 { font-size: 30px; }
    h2 { font-size: 24px; }

    .hero__headline { font-size: 30px; }

    /* Product grid — single column */
    .grid-4,
    .grid-3,
    .grid-2 { grid-template-columns: 1fr; }

    .category-card { aspect-ratio: 3/2; }

    /* Section label smaller */
    .section-label { font-size: 11px; }

    /* Buttons */
    .btn { padding: 14px 28px; font-size: 13px; }

    /* Card */
    .card { padding: 24px; }

    /* Footer */
    .footer-brand { grid-column: auto; }

    /* Stats */
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .stat-item__number { font-size: 32px; }

    /* Lookbook */
    .lookbook { height: 320px; }

    /* Newsletter */
    .newsletter { padding: 56px 0; }

    /* Accordion */
    .accordion__header { padding: 16px 18px; }

    /* Product gallery thumbnails */
    .product-gallery__thumbs { grid-template-columns: repeat(3, 1fr); }

    /* Checkout progress */
    .checkout-progress { padding: 20px 0; }
    .progress-connector { width: 24px; }

    /* Contact */
    .contact-form-card { padding: 24px; }
    .contact-form__title { font-size: 20px; }

    /* Pagination */
    .pagination__info { display: none; }

    /* Filter bar */
    .filter-bar { gap: 8px; padding: 12px 16px; }
    .filter-select { font-size: 12px; padding: 8px 28px 8px 12px; }

    /* Order summary */
    .order-summary { padding: 24px; }
    .order-summary__total-price { font-size: 22px; }

    /* Tab bar */
    .tab-bar { overflow-x: auto; }
    .tab-btn { white-space: nowrap; }

    /* Section row */
    .section-row__link { font-size: 13px; }

    /* Mission card */
    .mission-card__top-bar { margin: -32px -32px 28px; }
}

/* ----------------------------------------------------------
   PRINT
   ---------------------------------------------------------- */
@media print {
    .site-header,
    .site-footer,
    .mobile-menu,
    .search-overlay,
    .btn,
    .filter-bar,
    .newsletter { display: none !important; }

    body {
        background: #fff;
        color: #000;
    }
}