/* ===================================================================
   Responsive layer.
   All adaptive rules for header, footer, and page components live here.
   Desktop layout stays defined in global.css / page-specific CSS.
   =================================================================== */

/* --- Base resets -------------------------------------------------- */

html {
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: #121212;
}

body {
    min-width: 320px;
    overflow: visible;
}

svg,
video,
canvas {
    max-width: 100%;
}

search {
    display: block;
}

.content,
.content > section,
.section,
.section-content,
.section-support {
    overflow-x: clip;
}

.container,
.server-info,
.profile,
.new-server,
.juxcoins,
.serverinfo,
.authentication,
.boost,
.support,
.server-card,
.server-card__content,
.server-card__info,
.server-details__wrapper,
.server-info__card,
.server-info__card-body,
.server-info__card-left,
.server-info__card-right,
.serverinfo__menagement,
.serverinfo__form,
.juxcoins__form,
.new-server__form,
.new-server__block,
.authorization,
.registration,
.new-password,
.reset-password,
.boost-box,
.boost-choice,
.delete-modal,
.screenshot-modal {
    min-width: 0;
}

.server-name,
.server-description,
.footer__copyright-text,
.footer__email,
.file-upload-status,
.file-upload-pick-btn,
.file-requirements,
.delete-modal__text,
.payment-success__text,
.server-info__desc-section__text,
.server-info__purchase-expires {
    overflow-wrap: anywhere;
}

.support__image-img,
.header__logo-image,
.footer__logo-img {
    display: block;
}

.support__image,
.support__content {
    min-width: 0;
}

.support__image-img {
    width: min(100%, 420px);
    height: auto;
}

.detail-text {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

.version-picker__dropdown,
.tag-picker__dropdown {
    max-width: calc(100vw - 32px);
}

/* --- Header & footer: fluid scaling ------------------------------ */

@media (max-width: 1157px) {
    .footer__logo-img,
    .header__logo-image {
        width: clamp(5.5rem, 4rem + 2vw, 8.5rem);
        height: auto;
    }

    .header__button-icon {
        width: clamp(1.0625rem, 0.9812rem + 0.3717vw, 1.25rem);
        height: clamp(1.0625rem, 0.9812rem + 0.3717vw, 1.25rem);
    }

    .header__button {
        padding-inline: clamp(0.625rem, 0.3539rem + 1.2392vw, 1.25rem);
    }

    .footer__copyright-text {
        max-width: 600px;
    }

    .footer__social-icon {
        width: clamp(1.375rem, 1.2124rem + 0.7435vw, 1.75rem);
    }
}

/* --- Footer: copyright stacks ------------------------------------ */

@media (max-width: 1070px) {
    .footer__copyright {
        row-gap: 25px;
        flex-direction: column;
    }

    .footer__copyright-text {
        text-align: center;
    }
}

/* --- New breakpoint: footer column layout on tablets ------------- */

@media (max-width: 960px) {
    .footer__middle {
        flex-direction: column;
        align-items: center;
        gap: 25px;
        margin-bottom: 35px;
        text-align: center;
    }

    .footer__bottom {
        text-align: center;
    }

    .footer__email {
        margin-top: 0;
    }

    .footer__socials {
        gap: 25px;
        width: 100%;
        justify-content: center;
        margin-top: 10px;
    }
}

@media (max-width: 900px) {
    .tags-widget {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .tags-widget__right {
        width: 100%;
    }
}

/* --- Header: hide button text, keep icons ------------------------ */

@media (max-width: 825px) {
    .header__button-text {
        display: none;
    }
}

@media (max-width: 768px) {
    :root {
        --container-padding-x: 18px;
    }

    .servers__categories {
        flex-wrap: nowrap;
        justify-content: center;
    }

    .server-info__desc-section__text,
    .server-info__purchases,
    .server-status {
        max-width: 100%;
    }

    .server-info__icons {
        flex-wrap: wrap;
        gap: 24px 30px;
    }

    .servers__search-bar {
        width: 100%;
        max-width: 100%;
    }

    fieldset.servers__filters {
        width: 100%;
        flex-wrap: wrap;
        gap: 15px;
        justify-content: center;
    }

    .servers__version,
    .servers__filters .version-picker,
    .servers__filters .tag-picker {
        min-width: 0;
        max-width: 100%;
    }

    .servers__socials {
        max-width: 100%;
        flex-wrap: wrap;
        gap: 20px;
    }

    .label-row,
    .user-info__actions,
    .user-servers__header,
    .daily-redeem__form,
    .new-server__confirmation,
    .delete-modal__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

    .label-row {
        max-width: 100%;
        gap: 8px 12px;
    }

    .file-upload-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 44px;
    }

    .file-upload-trigger,
    .file-upload-status,
    .file-upload-pick-btn {
        min-width: 0;
        max-width: 100%;
    }

    .file-upload-status,
    .file-upload-pick-btn {
        white-space: normal;
    }

    .next__button,
    .serverinfo__button {
        width: 100%;
        max-width: none;
    }

    .user-servers__button,
    .user-servers__header .add-server-btn-wrapper {
        width: auto;
        max-width: none;
        margin-left: auto;
        flex: 0 0 auto;
    }

    .delete-modal-overlay,
    .screenshot-modal-overlay {
        padding: 24px 16px;
    }

    .delete-modal {
        width: min(100%, 560px);
    }

    .screenshot-modal {
        width: min(100%, 900px);
    }
}

@media (max-width: 640px) {
    .user-servers__header {
        align-items: flex-start;
    }

    .daily-redeem__action-wrap,
    .daily-redeem__trigger {
        width: 100%;
    }

    .daily-redeem__dropdown {
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
    }

    .delete-modal__actions {
        flex-direction: column;
    }

    .delete-modal__btn {
        width: 100%;
    }
}


@media (max-width: 540px) {
    .server-info__card-row {
        row-gap: 22px;
    }

    .server-info__card-left {
        width: 100%;
    }

    .server-info__card-left .server-placeholder {
        width: 100%;
        max-width: 100%;
    }

    .server-info__card-left .server-details {
        justify-content: center;
        width: 100%;
        min-height: 0;
        height: auto;
        column-gap: 20px;
        row-gap: 12px;
        padding-top: 2px;
    }

    .server-info__card-right {
        width: 100%;
        gap: 14px;
    }

    .server-info__card-right .server-link-wrapper,
    .server-info__card-right .server-link,
    .server-info__boost-btn {
        width: 100%;
    }

    .server-info__card-right .server-link,
    .server-info__boost-btn {
        height: 52px;
    }
}

/* --- Footer: nav stacks vertically ------------------------------- */

@media (max-width: 499px) {
    .footer__nav {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }
}

@media (max-width: 480px) {
    :root {
        --container-padding-x: 16px;
    }

    .input-counter-wrapper .juxmc-input {
        padding-right: 12px;
        padding-bottom: 28px;
    }

    .input-char-counter {
        top: auto;
        bottom: 8px;
        transform: none;
        font-size: 11px;
    }

    .file-upload-row {
        grid-template-columns: minmax(0, 1fr) 40px;
    }

    .file-upload-thumb {
        width: 40px;
        height: 40px;
    }

    .file-upload-thumb-img {
        width: 32px;
        height: 32px;
    }

    .authorization-button,
    .registration__button,
    .new-password__button,
    .boost-input__button,
    .password-reset__button {
        padding: 18px 20px;
    }

    .boost-choice__cards {
        flex-direction: column;
    }

    .badge-type {
        flex: 0 0 calc(33.33% - 8px);
    }

    .user-servers__button,
    .user-servers__header .add-server-btn-wrapper {
        width: 100%;
        flex-basis: 100%;
        margin-left: 0;
    }
}

@media (max-width: 400px) {
    .daily-calendar {
        grid-template-columns: repeat(2, 1fr);
    }

    .badge-type {
        flex: 0 0 calc(50% - 6px);
    }
}