/* ==========================================================================
   responsive.css — dostosowanie układu: desktop → tablet → telefon.
   Punkty przełamania: 1180px, 960px (nawigacja i panele), 720px, 480px.
   ========================================================================== */

@media (max-width: 1180px) {
    .main-nav__link {
        padding-inline: var(--space-3);
    }

    .main-nav__link::after {
        left: var(--space-3);
        right: var(--space-3);
    }

    .header-actions__login {
        display: none;
    }

    .hero__inner {
        gap: var(--space-8);
    }

    .toolbar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .toolbar > .field:first-child {
        grid-column: 1 / -1;
    }

    .toolbar__actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .course-layout {
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: var(--space-7);
    }

    .footer-grid {
        grid-template-columns: 1.4fr repeat(3, 1fr);
        gap: var(--space-7);
    }
}

@media (max-width: 960px) {
    :root {
        --header-height: 68px;
        --header-height-compact: 60px;
    }

    /* Nawigacja przechodzi do menu hamburgerowego */
    .main-nav,
    .header-actions__cta {
        display: none;
    }

    .header-actions {
        margin-left: auto;
    }

    .menu-toggle {
        display: inline-flex;
    }

    .hero__inner {
        grid-template-columns: 1fr;
    }

    .hero__content {
        text-align: center;
    }

    .hero__description {
        margin-inline: auto;
    }

    .hero__actions {
        justify-content: center;
    }

    .hero__visual {
        max-width: 420px;
    }

    .hero__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .feature-grid,
    .course-grid,
    .post-grid,
    .steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .steps::before {
        display: none;
    }

    .carousel__card {
        grid-template-columns: 1fr;
    }

    .carousel__media {
        aspect-ratio: 16 / 8;
    }

    .post-card--featured {
        grid-template-columns: 1fr;
    }

    .post-card--featured .post-card__media {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .post-card--featured .post-card__body {
        padding: var(--space-6);
    }

    .filters__body {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .course-layout,
    .article-layout,
    .contact-layout,
    .faq-layout,
    .panel-grid {
        grid-template-columns: 1fr;
    }

    .purchase-card,
    .article-aside {
        position: static;
    }

    .course-layout__aside {
        order: -1;
    }

    .footer-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .auth-layout {
        grid-template-columns: 1fr;
    }

    .auth-aside {
        min-height: 260px;
        padding: var(--space-7);
    }

    .auth-aside__logo {
        top: var(--space-7);
        left: var(--space-7);
        width: 56px;
        height: 56px;
    }

    /* Panele: sidebar jako szuflada */
    .app-layout {
        grid-template-columns: 1fr;
    }

    .app-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: var(--z-drawer);
        width: min(300px, 86vw);
        background: var(--drawer-background);
        box-shadow: var(--shadow-lg);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform var(--duration-base) var(--ease-out), visibility 0s linear var(--duration-base);
    }

    .app-sidebar.is-open {
        transform: translateX(0);
        visibility: visible;
        transition: transform var(--duration-base) var(--ease-out), visibility 0s;
    }

    .app-sidebar__close,
    .app-topbar__toggle {
        display: inline-flex;
    }

    .app-topbar {
        padding-inline: var(--space-5);
    }

    .demo-banner {
        margin-inline: var(--space-5);
    }

    .app-content {
        padding: var(--space-5);
    }

    .user-chip__text {
        display: none;
    }

    .user-chip {
        padding-right: 4px;
    }
}

@media (max-width: 720px) {
    :root {
        --section-padding: 3.25rem;
    }

    .section-header {
        margin-bottom: var(--space-7);
    }

    .header-actions__prefs .lang-switch__btn {
        min-width: 34px;
    }

    .feature-grid,
    .course-grid,
    .post-grid,
    .steps,
    .check-list {
        grid-template-columns: 1fr;
    }

    .gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form-grid,
    .form-grid--3 {
        grid-template-columns: 1fr;
    }

    .toolbar {
        grid-template-columns: 1fr;
        padding: var(--space-4);
    }

    .toolbar__actions .btn {
        width: 100%;
    }

    /* Filtry katalogu zwijane na telefonach */
    .filters__toggle {
        display: inline-flex;
        width: 100%;
    }

    .filters:not(.is-open) .filters__body {
        display: none;
    }

    .filters.is-open .filters__body {
        margin-top: var(--space-4);
    }

    .filters__body {
        grid-template-columns: 1fr;
    }

    .filters__price {
        grid-column: auto;
    }

    .carousel__content {
        padding: var(--space-5);
    }

    .carousel__title {
        font-size: var(--fs-xl);
    }

    /* Tabele zamieniają się w karty */
    .table-wrap--stack {
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .data-table--stack {
        min-width: 0;
    }

    .data-table--stack thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .data-table--stack,
    .data-table--stack tbody,
    .data-table--stack tr,
    .data-table--stack td {
        display: block;
        width: 100%;
    }

    .data-table--stack tbody {
        display: grid;
        gap: var(--space-4);
    }

    .data-table--stack tbody tr,
    .data-table--stack tbody tr:nth-child(even) {
        padding: var(--space-4);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        background: var(--color-surface);
        box-shadow: var(--shadow-sm);
    }

    .data-table--stack td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
        padding: var(--space-2) 0;
        border-bottom: 1px solid var(--color-divider);
        text-align: right;
    }

    .data-table--stack td::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-size: var(--fs-xs);
        font-weight: var(--fw-semibold);
        text-transform: uppercase;
        letter-spacing: var(--tracking-wide);
        color: var(--color-text-muted);
        text-align: left;
    }

    .data-table--stack td:first-child {
        display: block;
        padding-top: 0;
        text-align: left;
        font-size: var(--fs-md);
    }

    .data-table--stack td:first-child::before {
        display: block;
        margin-bottom: var(--space-1);
    }

    .data-table--stack td.data-table__actions {
        width: 100%;
        padding-top: var(--space-3);
        border-bottom: 0;
        text-align: left;
    }

    .data-table--stack td.data-table__actions::before {
        display: none;
    }

    .data-table--stack td.data-table__actions > .btn,
    .data-table--stack td.data-table__actions .data-table__actions-group {
        width: 100%;
    }

    .data-table--stack td.data-table__actions .data-table__actions-group {
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .data-table--stack .progress-wrap {
        min-width: 160px;
    }

    .contact-form,
    .auth-card {
        padding: var(--space-6);
    }

    .instructor-card {
        flex-direction: column;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-bottom {
        flex-direction: column;
    }

    .continue-item {
        grid-template-columns: 72px 1fr;
    }

    .continue-item img {
        width: 72px;
        height: 40px;
    }

    .continue-item .btn {
        grid-column: 1 / -1;
    }

    .detail-list {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }

    .detail-list dd {
        margin-bottom: var(--space-3);
    }

    .modal-backdrop {
        align-items: flex-end;
        padding: 0;
    }

    .modal {
        max-height: 92dvh;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }

    .modal__body {
        padding: var(--space-5);
    }

    .modal__footer .btn {
        flex: 1;
    }

    .toast-region {
        right: var(--space-3);
        left: var(--space-3);
        bottom: var(--space-3);
        width: auto;
    }

    .app-topbar__title,
    .app-topbar [data-reset-demo] {
        display: none;
    }
}

@media (max-width: 480px) {
    .logo__text {
        display: none;
    }

    .header-actions {
        gap: var(--space-1);
    }

    .hero__stats {
        gap: var(--space-2);
    }

    .stat {
        padding: var(--space-3);
    }

    .hud-card {
        min-width: 120px;
        padding: var(--space-2) var(--space-3);
    }

    .hud-card--rank {
        left: 0;
    }

    .hud-card--accuracy {
        right: 0;
    }

    .hero__actions .btn {
        width: 100%;
    }

    .carousel__facts {
        grid-template-columns: 1fr;
    }

    .demo-access__buttons {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .course-card__footer {
        flex-direction: column;
        align-items: stretch;
    }

    .course-card__footer .btn {
        width: 100%;
    }

    .app-topbar {
        gap: var(--space-2);
        padding-inline: var(--space-3);
    }

    .user-chip {
        display: none;
    }

    .app-content {
        padding: var(--space-4);
    }

    .demo-banner {
        margin-inline: var(--space-4);
    }
}

@media (min-width: 961px) {
    .app-overlay {
        display: none;
    }
}

@media print {
    .site-header,
    .site-footer,
    .back-to-top,
    .app-sidebar,
    .app-topbar,
    .toast-region {
        display: none !important;
    }

    body {
        background: #ffffff;
        color: #000000;
    }
}