/* ==========================================================
   Everydisc — Responsive / Mobile-first overrides
   Breakpoints:
     ≤ 1200px  tablet
     ≤  768px  mobile
   ========================================================== */

/* ── 0. Global container ─────────────────────────────────── */
.container {
    width: 100%;
    max-width: 1164px;
}

/* ── 1. Hamburger button + wrap (hidden on desktop) ─────── */
.header__burger-wrap {
    display: none; /* hidden on desktop and tablet, shown only in mobile MQ */
}
.nav__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    gap: 5px;
    flex-shrink: 0;
}
.nav__burger span {
    display: block;
    width: 24px;
    height: 2px;
    background: #051670;   /* dark navy — visible on white header background */
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav--open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav--open .nav__burger span:nth-child(2) { opacity: 0; }
.nav--open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── 2. Tablet (≤ 1200px) ────────────────────────────────── */
/* NOTE: header layout is intentionally NOT changed here —
   the original uses position:absolute for the logo and works
   fine at all desktop widths. Only non-header elements get
   tablet tweaks. */
@media (max-width: 1200px) {

    /* Band page */
    .band__logo {
        min-width: 220px;
        margin-right: 20px;
    }

    /* Album */
    .album__name  { width: 180px; }
    .album__album { width: 200px; }
}

/* ── 3. Mobile (≤ 768px) ─────────────────────────────────── */
@media (max-width: 768px) {

    /* ── 3.1 Header ── */
    .header {
        height: auto;
        padding: 10px 0;
    }
    .header .container {
        flex-direction: row;
        flex-wrap: wrap;          /* allows login bar to drop to its own row */
        align-items: center;
        justify-content: space-between;
        gap: 0;
    }
    /* Login row: user icon + LogIn + SignUp on left, Premium button on right */
    .header__login {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        order: 10;
        width: 100%;
        padding: 5px 15px;
        font-size: 12px;
        border-top: 1px solid #e8e8e8;
        gap: 8px;
        box-sizing: border-box;
    }
    /* Push premium promo image to the far right */
    .header__login .premium-promo {
        margin-left: auto;
    }
    .header__login .premium-promo img {
        height: 38px !important;
        margin-left: 0 !important;
        display: block;
    }
    .header__logo {
        position: static;
        transform: none;
        margin: 0;
        order: 1;
    }
    .header__logo a svg {
        width: 56px;
        height: 56px;
    }
    .header__logo a span {
        font-size: 14px;
    }
    .header__logo p {
        font-size: 8px;
    }
    .header__logo:before,
    .header__logo:after {
        display: none;
    }
    .header__extra {
        order: 2;
        margin-left: 0;
        width: auto;
    }
    .header__search {
        width: 120px;
        min-width: 0;
    }
    .header__lang,
    .header__favourites,
    .header__mail {
        display: none;
    }
    .header__burger-wrap {
        order: 0;
        display: flex;
        align-items: center;
    }

    /* ── 3.2 Nav — always visible on mobile (no JS toggle needed) ── */

    /* Remove the -34px pull-up that overlaps the header login row on mobile */
    .nav {
        margin-top: 0 !important;
    }

    /* Hamburger no longer needed; hide it */
    .header__burger-wrap {
        display: none !important;
    }

    /* nav__top: always show the dark-blue bar with links stacked */
    .nav__top {
        display: block;
        padding-top: 0 !important; /* beats app.css padding-top:28px */
    }
    .nav__top .container {
        flex-direction: column;
        padding: 0;
    }
    /* Both ULs always visible, stacked vertically */
    .nav__top .container > ul {
        display: flex !important;
        flex-direction: column;
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .nav__top .container > ul li {
        margin-right: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.15);
    }
    .nav__top .container > ul li a {
        padding: 12px 20px;
        display: block;
    }

    /* nav__bottom: always visible, full-width orange bar */
    .nav__bottom {
        display: block;
    }
    .nav__bottom .container {
        flex-direction: column;
        gap: 0;
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .nav__bottom a {
        width: 100%;
        padding: 12px 15px !important;
        height: auto;
        justify-content: flex-start;
        box-sizing: border-box;
    }
    .nav__bottom a:before,
    .nav__bottom a:after {
        display: none;
    }

    /* ── 3.3 Main offset fix ── */
    .main {
        margin-top: 0;
    }

    /* ── 3.4 Home page ── */

    /* Slider: !important needed to beat app.css height:430px and overflow:hidden */
    .main-slider {
        height: auto !important;
        overflow: visible !important;
        min-height: 56vw;
    }
    /* Flickity sets width via JS — force override with high specificity + !important */
    .main-slider .main-slider__item,
    .main-slider__item {
        width: 100% !important;
        height: 56vw !important;
        min-height: 200px !important;
        max-height: 340px !important;
        border-right: none;
    }
    .main-slider__band {
        padding: 6px 15px;
        font-size: 11px;
    }
    .main-slider__info {
        min-height: auto;
        padding: 8px 15px;
    }

    /* Main content columns stack */
    .main-content .container {
        flex-direction: column;
    }
    .main-content section {
        width: 100%;
    }
    .fresh {
        margin-right: 0;
        margin-bottom: 30px;
    }

    /* 2026 Albums: 2-column grid, fixed height so not all 100 show at once.
       !important needed to beat app.css height:600px and ss-container JS inline styles */
    .fresh__content {
        height: 460px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }
    .fresh__content ul {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 4px;
        margin: 0;
    }
    .fresh__content ul li {
        margin-bottom: 0 !important;
        list-style: none;
    }
    /* Square album tile: padding-bottom trick — most reliable cross-browser */
    .fresh__content ul li > div,
    .fresh__content ul li > a {
        position: relative !important;
        display: block;
        width: 100%;
        height: 0 !important;
        padding-bottom: 100% !important; /* 1:1 square */
        overflow: hidden;
    }
    /* Image fills the square absolutely */
    .fresh__content ul li img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block;
    }
    /* Info overlay pinned to bottom of square */
    .fresh__info {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        padding: 6px 8px !important;
        min-height: auto !important;
        font-size: 11px !important;
        background-color: rgba(0,0,0,0.75);
        z-index: 1;
    }
    .fresh__info > div {
        max-width: 100%;
    }
    .fresh__value {
        display: none;           /* hide "GO >>" arrow in compact grid */
    }

    /* ── 3.5 Album page ── */
    .album__main .container {
        flex-direction: column;
    }
    .album__cover {
        width: 100%;
        min-width: 0;
        margin-right: 0;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .album__cover img {
        width: 160px;
        height: 160px;
    }
    .album__info {
        width: 100%;
    }
    .album__band {
        flex-wrap: wrap;
        gap: 10px;
    }
    .album__name  { width: auto; flex: 1 1 100%; }
    .album__album { width: auto; flex: 1 1 100%; }
    .album__year  { flex: 1 1 100%; }
    .album__bottom {
        flex-direction: column;
    }
    .album__bottom > ul:first-child,
    .album__bottom > ul:last-child {
        width: 100%;
        padding-right: 0;
        text-align: left;
    }
    .album__bottom > ul:last-child > li span:first-child {
        width: auto;
    }
    /* Description + tracklist: стопка (Rate сверху, Tracks снизу) */
    .album__content:after { display: none; }
    .album section.flex,
    .album > .flex,
    .album__description ~ div {
        flex-direction: column;
    }
    .album__section > .container.flex {
        flex-direction: column !important;
    }
    .album__description,
    .album__content {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 15px 10px;
    }
    /* Favourites */
    .album__favourites .flex {
        flex-direction: column;
    }
    .album__favourite,
    .album__popular {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #fff;
        padding: 20px 0;
    }

    /* ── 3.6 Band/Artist page ── */
    .band__main .container {
        flex-direction: column;
    }
    .band__logo {
        min-width: 0;
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
    }
    .band__logo img {
        max-width: 200px;
        margin: 0 auto;
    }
    .band__info {
        width: 100%;
        padding-top: 0;
    }
    .band__info ul {
        width: 100%;
        text-align: left;
    }
    .band__info ul > li span:first-child {
        width: auto;
    }
    .band__biography .flex {
        flex-direction: column;
    }
    .band__photo {
        min-width: 0;
        width: 100%;
        height: auto;
        margin-left: 0;
        margin-top: 15px;
    }
    .band__photo img {
        width: 100%;
        height: auto;
    }
    .band__songs .container {
        flex-direction: column;
    }
    .band__songs section {
        width: 100%;
    }
    .band__songs section:last-child {
        padding-left: 0;
        margin-top: 20px;
    }

    /* ── 3.7 Feed / Listening ── */
    .listening__item .container {
        flex-direction: column;
    }
    .listening__cover {
        width: 100%;
        min-width: 0;
        margin-right: 0;
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        gap: 15px;
    }
    .listening__cover img {
        width: 80px;
        height: 80px;
        min-width: 80px;
        margin-bottom: 0;
    }
    .listening__info {
        width: 100%;
    }
    .listening__band {
        flex-wrap: wrap;
    }
    .listening__name  { width: 100%; padding-right: 0; }
    .listening__album { width: 100%; }
    .listening__bottom {
        flex-direction: column;
        padding-left: 0;
        gap: 10px;
    }
    .listening__add-comment {
        width: 100%;
        margin-right: 0;
    }

    /* ── 3.8 Top page ── */
    .top .container.flex {
        flex-direction: column;
    }
    .top-list {
        width: 100%;
    }
    .top-list + .top-list {
        margin-top: 30px;
    }

    /* ── 3.9 User profile ── */
    .user .container.flex {
        flex-direction: column;
    }
    .user__account .flex {
        flex-direction: column;
    }
    .user__avatar {
        min-width: 0;
        max-width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
        text-align: center;
    }
    .user__info {
        width: 100%;
    }
    .user__listens > ul > li span:first-child {
        width: auto;
    }
    .user__row--action a:last-child {
        margin-left: 20px;
    }

    /* ── 3.10 Friends / Search results ── */
    .friends__photo { width: 60px; }
    .friends__nickname,
    .friends__name,
    .friends__birthday,
    .friends__gender,
    .friends__place {
        width: auto;
        flex: 1;
    }

    /* ── 3.11 Main blog (home) ── */
    .main-blog {
        width: 100%;
    }
    .main-blog__content.flex {
        flex-direction: column;
    }
    .main-blog__posts {
        width: 100%;
        height: auto;
        margin-right: 0;
        margin-bottom: 20px;
    }

    /* ── 3.12 Styled list covers ── */
    .styled-list__cover {
        min-width: 44px;
        margin-right: 12px;
    }
    .styled-list__cover img {
        width: 44px;
        height: 44px;
    }

    /* ── 3.13 Section title ── */
    .section-title {
        font-size: 15px;
    }

    /* ── 3.14 Footer ── */
    .footer .container {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    .social {
        margin-left: 0;
    }

    /* ── 3.15 New album form ── */
    .new-album { padding: 30px 0 20px; }
    .new-album__form .form__select-wrapper,
    .new-album__form input {
        max-width: 100%;
    }
    .new-album__submit { max-width: 100%; }

    /* ── 3.16 Modal / Popups ── */
    /* Zoom popup: image must stay square regardless of natural dimensions.
       :width/:height HTML attrs are overridden by CSS !important. */
    .modal__window img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        display: block !important;
        max-width: 100% !important;
    }

    /* Use absolute positioning on the window so left+right anchors the width
       exactly — no calc(), no box-sizing ambiguity, no flex math. */
    .modal {
        padding: 0 !important;
        display: block !important;    /* disable flex; window positions itself */
        overflow-y: auto !important;
    }
    .modal__window {
        position: absolute !important;
        left: 12px !important;
        right: 12px !important;
        top: 60px !important;         /* clear the header */
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    /* form--small has width:460px in app.css — wider than the modal window.
       All descendant widths (100%) resolve against 460px → overflow.
       Force the form itself to fit first. */
    .modal .form,
    .modal .form--small {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Stack inline form rows vertically */
    .form__field.flex {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px;
    }
    /* Override all fixed-width inputs/selects (209px, 136px, inline style="width:128px") */
    .modal input,
    .modal select,
    .modal textarea,
    .form__input--popup,
    .form__input--third,
    .form__select--popup {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-right: 0 !important;
        margin-bottom: 8px;
    }
    .form__select-wrapper {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .new-band { width: 100%; }
    .new-band .form__field input { width: 100%; margin-right: 0; margin-bottom: 8px; }
    .new-band .form__select { width: 100%; }
    .new-band textarea { width: 100%; }

    /* ── 3.17 General flex reset ── */
    .flex--j-between { flex-wrap: wrap; }

    /* Post / content page */
    .post { padding: 30px 0 20px; }

    /* Album section (description+tracks) flex */
    .album .container > .flex {
        flex-direction: column;
    }
}

/* ── 4. Very small screens (≤ 380px) ─────────────────────── */
@media (max-width: 380px) {
    .header__search { width: 90px; }
    .header__logo a svg { width: 44px; height: 44px; }
    .main-slider__item { height: 70vw; }
}