/*
 * John Enghauser - Responsive layout overrides
 *
 * Original design stylesheets remain unchanged.
 * The existing slider implementation is intentionally untouched.
 */

/* =================================
   1. Global container
================================= */

#mainContainer {
  width: 100%;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

/* =================================
   2. Header
   Keep the existing slider dimensions,
   animation and internal styling intact.
================================= */

#header {
  width: 100%;
  max-width: 860px;
}

/* =================================
   3. Navigation
================================= */

#navigator {
  width: 100%;
  max-width: 860px;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}

#navigator a {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
}

#navigator a img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* =================================
   4. Tablet
================================= */

@media (max-width: 767px) {
  #navigator a {
    flex: 0 0 20%;
    width: 20%;
  }

  #navigator a img {
    width: 100%;
  }
}

/* =================================
   5. Mobile
================================= */

@media (max-width: 480px) {
  #navigator a {
    flex-basis: 33.333%;
    width: 33.333%;
  }
}


/* ==========================================
   RESPONSIVE NAVIGATION
   Desktop: 860px and above
   Mobile: below 860px
========================================== */

/* Desktop navigation */
#navigator .nav-desktop {
    display: flex;
    width: 100%;
    height: 52px;
    align-items: center;
}

#navigator .nav-mobile {
    display: none;
}


/* ==========================================
   Tablet and Mobile Navigation
========================================== */

@media screen and (max-width: 859px) {

    #navigator {
        width: 100%;
        max-width: 860px;
        height: auto;
        box-sizing: border-box;
        display: block;
    }

    /* Hide original image navigation */
    #navigator .nav-desktop {
        display: none;
    }

    /* Show mobile navigation */
    #navigator .nav-mobile {
        display: block;
        width: 100%;
    }

    /* Toggle button */
    #navigator .nav-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;

        width: 100%;
        min-height: 48px;
        padding: 10px 15px;

        border: 1px solid #6A704C;
        border-radius: 0;

        background: #000000;
        color: #C5C9AF;

        font-family: Verdana, Arial, sans-serif;
        font-size: 14px;
        font-weight: bold;

        cursor: pointer;
        box-sizing: border-box;
    }

    /* Hamburger icon */
    #navigator .nav-toggle-icon {
        display: flex;
        flex-direction: column;
        gap: 5px;
        width: 24px;
    }

    #navigator .nav-toggle-icon span {
        display: block;
        width: 24px;
        height: 2px;
        background: #C5C9AF;
        transition: 0.3s ease;
    }

    /* Menu links - hidden initially */
    #navigator .mobile-nav-links {
        display: none;
        width: 100%;
        box-sizing: border-box;
        background: #000000;
    }

    /* Show menu when opened */
    #navigator .mobile-nav-links.is-open {
        display: block;
    }

    /* Individual menu links */
    #navigator .mobile-nav-links a {
        display: block;
        width: 100%;
        padding: 12px 15px;

        box-sizing: border-box;

        color: #C5C9AF;
        font-family: Verdana, Arial, sans-serif;
        font-size: 13px;
        font-weight: bold;
        text-decoration: none;

        border-bottom: 1px solid #333333;
    }

    #navigator .mobile-nav-links a:hover {
        color: #E4CB8B;
        background: #201D18;
    }

}

/* ==========================================
   RESPONSIVE FOOTER
========================================== */

/* Desktop: 860px and above */

#footer {
    width: 860px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

#footer .footer-copyright {
    float: none;
    width: 500px;
    margin: 0;
    font-size: 11px;
}

#footer .footer-social {
    float: none;
    width: 300px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    text-align: right;
}

#footer .footer-social img {
    display: block;
    width: 30px;
    height: 30px;
}


/* ==========================================
   Tablet and Mobile: Below 860px
========================================== */

@media screen and (max-width: 859px) {

    #footer {
        width: 100%;
        height: auto !important;
        min-height: 40px;
        padding: 10px;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }

    #footer .footer-copyright {
        width: 100%;
        float: none;
        text-align: center;
        font-size: 11px;
        line-height: 1.8;
        margin: 0;
    }

    #footer .footer-social {
        width: 100%;
        float: none;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        text-align: center;
    }

    #footer .footer-social a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    #footer .footer-social img {
        width: 30px;
        height: 30px;
    }

}


/* Small mobile screens */

@media screen and (max-width: 480px) {

    #footer {
        padding: 12px 8px;
        gap: 10px;
    }

    #footer .footer-copyright {
        line-height: 1.9;
    }

    #footer .footer-social {
        gap: 10px;
    }

}



/* Music Advertisement - Desktop */
#musicAd {
    width: 860px;
    height: 82px;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    overflow: hidden;
    box-sizing: border-box;
    background: #000;
}

#musicAd img {
    display: block;
    flex-shrink: 0;
    height: 82px;
    max-width: none;
}

/* Responsive */
@media screen and (max-width: 859px) {
    #musicAd {
        width: 100%;
        max-width: 860px;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    #musicAd img {
        flex-shrink: 0;
    }
}

@media screen and (max-width: 480px) {
    #musicAd {
        justify-content: center;
    }
}

/* =========================================
   MAIN CONTENT - RESPONSIVE
   Desktop layout remains unchanged (860px)
========================================= */

/* Main container */
#bodyContainer {
    width: 860px;
    max-width: 100%;
    box-sizing: border-box;
}

/* Request section */
#request {
    width: 860px;
    max-width: 100%;
    box-sizing: border-box;
}

#request img {
    display: block;
    max-width: 100%;
    height: auto;
}


/* =========================================
   TABLET AND MOBILE
========================================= */

@media screen and (max-width: 859px) {

    /* Main two-column layout becomes one column */
    #bodyContainer {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 25px;
        box-sizing: border-box;
    }

    /* LEFT SECTION */
    #artistImage {
        width: 100%;
        max-width: 100%;
        float: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
    }

    /* Artist main image */
    #artistImage > img {
        display: block;
        width: 312px;
        max-width: 100%;
        height: auto;
    }

    /* Airplay information */
    #artistImage .airplaytext {
        width: 100%;
        max-width: 312px;
        box-sizing: border-box;
    }

    #artistImage .airplaytext img {
        max-width: 100%;
        height: auto;
    }

    #artistImage .airplaytext p {
        width: 100%;
        box-sizing: border-box;
    }

    /* YouTube videos */
    #artistImage .youtubevideo {
        width: 100%;
        max-width: 312px;
        text-align: center;
        box-sizing: border-box;
    }

    #artistImage .youtubevideo iframe {
        display: block;
        width: 100%;
        max-width: 220px;
        height: 203px;
        margin: 0 auto 20px;
        box-sizing: border-box;
    }


    /* RIGHT SECTION */
    #rightBody {
        width: 100%;
        max-width: 100%;
        float: none;
        box-sizing: border-box;
    }

    /* Artist logo */
    #rightBody #artistTitle {
        width: 100% !important;
        max-width: 100%;
        text-align: center;
        box-sizing: border-box;
    }

    #rightBody #artistTitle img {
        max-width: 100%;
        height: auto;
    }

    /* Social icons */
    #rightBody #artistLink {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
        text-align: center;
    }

    #rightBody #artistLink > div {
        width: 100% !important;
        float: none !important;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 5px;
        text-align: center !important;
        box-sizing: border-box;
    }

    /* Biography */
    #rightBody #mainBody {
        width: 100% !important;
        max-width: 100%;
        float: none;
        box-sizing: border-box;
        padding: 0 10px;
    }

    /* Spotify embeds */
    #rightBody #mainBody iframe {
        display: block;
        width: 100%;
        max-width: 525px;
        height: 400px;
        margin: 0 auto 20px;
        box-sizing: border-box;
    }

    /* Request image */
    #request {
        width: 100%;
        max-width: 100%;
        text-align: center;
        box-sizing: border-box;
    }

    #request img {
        width: 100%;
        height: auto;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media screen and (max-width: 480px) {

    #bodyContainer {
        gap: 20px;
    }

    #rightBody #mainBody {
        padding: 0 8px;
    }

    #artistImage .youtubevideo iframe {
        max-width: 100%;
    }

    #rightBody #mainBody iframe {
        height: 400px;
    }
}



/* =========================================
   GIGS PAGE RESPONSIVE
   Desktop width: 860px
========================================= */

/* Desktop */
.gigs-page {
    width: 860px;
    max-width: 100%;
    box-sizing: border-box;
}

.gigs-page .gigs-artist-image {
    width: 312px;
    float: left;
    box-sizing: border-box;
}

.gigs-page .gigs-right-body {
    width: 535px;
    float: left;
    box-sizing: border-box;
}

.gigs-page .gigs-main-body {
    box-sizing: border-box;
}

.gigs-page .newsSpace {
    width: 518px;
    box-sizing: border-box;
}

.gigs-page .newsSpace iframe {
    max-width: 100%;
}


/* =========================================
   TABLET AND MOBILE
========================================= */

@media screen and (max-width: 859px) {

    .gigs-page {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin: 0 auto;
        padding: 0;
        box-sizing: border-box;
    }

    /* Artist Image */
    .gigs-page .gigs-artist-image {
        width: 100%;
        max-width: 312px;
        float: none;
        margin: 0 auto;
        text-align: center;
    }

    .gigs-page .gigs-artist-image img {
        display: block;
        width: 312px;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }

    /* Right Content */
    .gigs-page .gigs-right-body {
        width: 100% !important;
        max-width: 100%;
        float: none;
        margin: 0 auto;
        padding: 0;
        box-sizing: border-box;
        text-align: center;
    }

    /* Artist Logo */
    .gigs-page #artistTitle {
        width: 100% !important;
        max-width: 100%;
        text-align: center;
        margin: 0 auto;
    }

    .gigs-page #artistTitle img {
        max-width: 100%;
        height: auto;
    }

    /* Social Links */
    .gigs-page #artistLink {
        width: 100% !important;
        max-width: 100%;
        margin: 0 auto;
        text-align: center;
    }

    .gigs-page #artistLink .socialLinks {
        width: 100% !important;
        float: none !important;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 5px;
        text-align: center !important;
        margin: 0 auto;
    }

    /* Main Body */
    .gigs-page .gigs-main-body {
        width: 100% !important;
        max-width: 100%;
        float: none;
        margin: 0 auto;
        padding: 0;
        box-sizing: border-box;
    }

    /* Gigs Content */
    .gigs-page .newsSpace {
        width: 100% !important;
        max-width: 518px;
        float: none;
        margin: 0 auto;
        padding: 0 10px;
        box-sizing: border-box;
        text-align: left;
    }

    /* Gigs Feed */
    .gigs-page #json_gigs_feed {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
        overflow-wrap: anywhere;
    }

    .gigs-page #json_gigs_feed table {
        width: 100% !important;
        max-width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
    }

    .gigs-page #json_gigs_feed td {
        overflow-wrap: anywhere;
        word-wrap: break-word;
        vertical-align: top;
    }

    .gigs-page #json_gigs_feed td:first-child {
        width: 110px;
    }

    .gigs-page #json_gigs_feed img {
        display: block;
        max-width: 100%;
        height: auto;
    }

    /* Spotify */
    .gigs-page .newsSpace iframe {
        display: block;
        width: 100% !important;
        max-width: 525px;
        height: 352px;
        margin: 20px auto;
        box-sizing: border-box;
    }

    /* Request Section */
    #request {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        text-align: center;
        box-sizing: border-box;
    }

    #request img {
        display: block;
        width: 100%;
        max-width: 860px;
        height: auto;
        margin: 0 auto;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media screen and (max-width: 480px) {

    .gigs-page {
        gap: 15px;
    }

    .gigs-page .newsSpace {
        width: 100% !important;
        max-width: 100%;
        padding: 0 8px;
    }

    .gigs-page #json_gigs_feed td:first-child {
        width: 85px;
    }

    .gigs-page .newsSpace iframe {
        width: 100% !important;
        height: 352px;
    }

}
/* Fix Gigs page social icons alignment */

@media screen and (max-width: 859px) {

    /* Only the parent container */
    .gigs-page #artistLink > div.socialLinks {
        width: 100% !important;
        float: none !important;

        display: flex !important;
        flex-direction: row !important;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;

        gap: 5px;
        text-align: center !important;
    }

    /* Individual social links */
    .gigs-page #artistLink > div.socialLinks > a {
        display: inline-flex !important;
        flex: 0 0 auto;
        width: auto !important;
        float: none !important;
        margin: 0;
        padding: 0;
    }

    /* Social icons */
    .gigs-page #artistLink > div.socialLinks > a img {
        display: block;
        width: 30px;
        height: 30px;
    }

}


/* =========================================
   MEDIA PAGE - IMAGE BUTTONS
========================================= */

/* Desktop */
.media-main-body {
    width: 100%;
    box-sizing: border-box;
}

.media-buttons {
    display: grid;
    grid-template-columns: repeat(3, 148px);
    gap: 8px;
    justify-content: start;
    align-items: start;
}

.media-buttons a {
    display: block;
    width: 148px;
    max-width: 100%;
}

.media-buttons img {
    display: block;
    width: 148px;
    max-width: 100%;
    height: auto;
}


/* Tablet */
@media screen and (max-width: 859px) {

    .media-main-body {
        width: 100% !important;
        max-width: 100%;
        margin: 0 auto;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .media-buttons {
        grid-template-columns: repeat(2, minmax(0, 148px));
        justify-content: center;
        gap: 10px;
    }

    .media-buttons a {
        width: 100%;
    }

    .media-buttons img {
        width: 100%;
        height: auto;
    }

}


/* Small Mobile */
@media screen and (max-width: 360px) {

    .media-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .media-buttons a {
        width: 100%;
    }

    .media-buttons img {
        width: 100%;
        height: auto;
    }

}

/* Shop section - Desktop */
.shop-responsive {
    width: 440px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
    box-sizing: border-box;
}

.shop-responsive .shop-item {
    width: 200px;
    flex: 0 0 200px;
    text-align: center;
    box-sizing: border-box;
}

.shop-responsive .shop-cover {
    display: block;
    width: 100%;
    height: auto;
}

.shop-responsive .shop-icon {
    display: inline-block;
    width: 35px;
    height: auto;
    vertical-align: middle;
}


/* Tablet and Mobile */
@media screen and (max-width: 859px) {

    .shop-responsive {
        width: 100%;
        max-width: 440px;
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
    }

    .shop-responsive .shop-item {
        width: 200px;
        flex: 0 1 200px;
    }

    .shop-responsive .shop-cover {
        width: 100%;
        height: auto;
    }

}


/* Small Mobile */
@media screen and (max-width: 480px) {

    .shop-responsive {
        width: 100%;
        justify-content: center;
        gap: 15px;
    }

    .shop-responsive .shop-item {
        width: 200px;
        flex: 0 1 200px;
    }

}



/* =========================================
   CONTACT PAGE - RESPONSIVE
========================================= */

/* Main content */
.contact-page #mainBody {
    box-sizing: border-box;
}

/* =========================================
   CONTACT INFORMATION GRID
   DESKTOP: 2 COLUMNS x 2 ROWS
========================================= */

.contact-page #mainBody .contact-grid {
    width: 100%;
    max-width: 535px;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    column-gap: 20px;
    row-gap: 25px;

    box-sizing: border-box;
}

.contact-page #mainBody .contactSpace {
    width: 100%;
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 8px;
    margin: 0;

    float: none;
    box-sizing: border-box;
}

/* Logo */
.contact-page #mainBody .contactSpaceImage {
    width: 150px;
    max-width: 100%;

    flex: none;
    float: none;

    margin: 0;
    text-align: left;
}

.contact-page #mainBody .contactSpaceImage img {
    display: block;

    width: 150px;
    max-width: 100%;
    height: auto;
}

/* Address text */
.contact-page #mainBody .contactSpaceText {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    flex: none;
    float: none;

    margin: 0;
    text-align: left;

    overflow-wrap: break-word;
    box-sizing: border-box;
}


/* =========================================
   CONTACT FORM
========================================= */

.contact-page #mainBody .contact-form-wrap {
    width: 100%;
    max-width: 535px;
    box-sizing: border-box;
}

.contact-page #bprcontact {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.contact-page #bprcontact table {
    width: 100% !important;
    max-width: 100%;

    border-collapse: collapse;
    box-sizing: border-box;
}

.contact-page #bprcontact td {
    box-sizing: border-box;
    vertical-align: top;
}

.contact-page #bprcontact input[type="text"],
.contact-page #bprcontact input[type="email"],
.contact-page #bprcontact textarea {
    max-width: 100%;
    box-sizing: border-box;
}

.contact-page #bprcontact .g-recaptcha {
    max-width: 100%;
}

/* Modal */
.contact-page #msgModal > div {
    width: calc(100% - 30px);
    max-width: 520px;

    margin: 25vh auto !important;
    box-sizing: border-box;
}


/* =========================================
   TABLET AND MOBILE
========================================= */

@media screen and (max-width: 859px) {

    .contact-page #mainBody {
        width: 100% !important;
        max-width: 100%;

        float: none;
        margin: 0 auto;

        padding: 0 12px;
        box-sizing: border-box;
    }

    .contact-page #mainBody .contact-grid {
        width: 100%;
        max-width: 535px;

        margin-left: auto;
        margin-right: auto;
    }

    .contact-page #mainBody .contact-form-wrap {
        width: 100%;
        max-width: 535px;

        margin-left: auto;
        margin-right: auto;
    }

    .contact-page #bprcontact {
        width: 100%;
    }

    .contact-page #bprcontact input[type="text"],
    .contact-page #bprcontact input[type="email"],
    .contact-page #bprcontact textarea {
        width: 100%;
    }

}


/* =========================================
   SMALL MOBILE
   ONE COLUMN + CENTERED SECTIONS
========================================= */

@media screen and (max-width: 600px) {

    /* Single column */
    .contact-page #mainBody .contact-grid {
        width: 100%;

        grid-template-columns: minmax(0, 1fr);
        justify-items: center;

        row-gap: 25px;

        margin-left: auto;
        margin-right: auto;
    }

    /* Center each contact section */
    .contact-page #mainBody .contactSpace {
        width: 100%;
        max-width: 300px;

        margin-left: auto;
        margin-right: auto;
    }

    /* Center logo */
    .contact-page #mainBody .contactSpaceImage {
        width: 150px;
        text-align: center;
    }

    .contact-page #mainBody .contactSpaceImage img {
        margin-left: auto;
        margin-right: auto;
    }

    /* Keep address text left aligned */
    .contact-page #mainBody .contactSpaceText {
        width: 100%;
        max-width: 100%;

        text-align: left;
    }


    /* Contact form table */
    .contact-page #bprcontact table,
    .contact-page #bprcontact tbody,
    .contact-page #bprcontact tr {
        display: block;
        width: 100%;
    }

    .contact-page #bprcontact td {
        display: block;
        width: 100% !important;

        padding: 5px 0;
    }

    .contact-page #bprcontact td[colspan="2"] {
        padding-top: 10px;
    }

    .contact-page #bprcontact label {
        display: block;
        width: 100%;
    }

    .contact-page #bprcontact input[type="text"],
    .contact-page #bprcontact input[type="email"],
    .contact-page #bprcontact textarea {
        display: block;
        width: 100%;
        max-width: 100%;
    }

    .contact-page #bprcontact .g-recaptcha {
        transform-origin: left top;
        max-width: 100%;
    }

}


/* =========================================
   VERY SMALL SCREENS
========================================= */

@media screen and (max-width: 360px) {

    .contact-page #mainBody {
        padding-left: 8px;
        padding-right: 8px;
    }

    .contact-page #msgModal > div {
        width: calc(100% - 20px);
    }

}





/* =========================================
   DOWNLOAD PAGE - RESPONSIVE
   Desktop design remains unchanged
========================================= */

/* Main content */
.download-page #mainBody {
    box-sizing: border-box;
}

/* Newsletter information */
.download-page #mainBody .download-welcome {
    box-sizing: border-box;
}

.download-page #mainBody .joinSpaceText {
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
}

/* Download track sections */
.download-page #mainBody .download-track {
    box-sizing: border-box;
}

.download-page #mainBody .newsSpaceImage,
.download-page #mainBody .newsSpaceText {
    box-sizing: border-box;
}


/* =========================================
   TABLET AND MOBILE
========================================= */

@media screen and (max-width: 859px) {

    /* Main body */
    .download-page #mainBody {
        width: 100% !important;
        max-width: 100%;
        float: none;
        margin: 0 auto;
        padding: 0 12px;
        box-sizing: border-box;
    }

    /* Newsletter content */
    .download-page #mainBody .download-welcome {
        width: 100% !important;
        max-width: 535px;
        margin-left: auto;
        margin-right: auto;
        float: none;
        box-sizing: border-box;
    }

    .download-page #mainBody .joinSpaceText {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-wrap: break-word;
    }

    /* Download track */
    .download-page #mainBody .download-track {
        width: 100% !important;
        max-width: 535px;
        margin: 20px auto;
        float: none;

        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 15px;

        box-sizing: border-box;
    }

    .download-page #mainBody .download-track .newsSpaceImage {
        width: 148px;
        max-width: 100%;
        flex: 0 0 148px;
        float: none;
    }

    .download-page #mainBody .download-track .newsSpaceImage img {
        display: block;
        width: 148px;
        max-width: 100%;
        height: auto;
    }

    .download-page #mainBody .download-track .newsSpaceText {
        width: auto;
        max-width: 100%;
        min-width: 0;
        flex: 1 1 180px;
        float: none;
        overflow-wrap: break-word;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media screen and (max-width: 600px) {

    /* Center newsletter block */
    .download-page #mainBody .download-welcome {
        width: 100%;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Newsletter text stays left aligned */
    .download-page #mainBody .joinSpaceText {
        text-align: left;
    }

    /* Stack download image and text */
    .download-page #mainBody .download-track {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 10px;
    }

    .download-page #mainBody .download-track .newsSpaceImage {
        width: 148px;
        flex: 0 0 auto;
    }

    .download-page #mainBody .download-track .newsSpaceText {
        width: 100%;
        flex: 0 0 auto;
        text-align: center;
    }

}


/* =========================================
   VERY SMALL SCREENS
========================================= */

@media screen and (max-width: 360px) {

    .download-page #mainBody {
        padding-left: 8px;
        padding-right: 8px;
    }

}
/* =========================================
   DOWNLOAD TRACKS - SIDE BY SIDE
========================================= */

.download-page #mainBody .download-tracks {
    width: 100%;
    max-width: 535px;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    margin: 0 auto;
    box-sizing: border-box;
}

.download-page #mainBody .download-track {
    width: 100%;
    min-width: 0;
    margin: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    box-sizing: border-box;
}

.download-page #mainBody .download-track .newsSpaceImage {
    width: 148px;
    max-width: 100%;
    float: none;
}

.download-page #mainBody .download-track .newsSpaceImage img {
    display: block;
    width: 148px;
    max-width: 100%;
    height: auto;
}
/* =========================================
   ARTIST LINK - MOBILE CENTERING
   Keep original button arrangement
========================================= */

@media screen and (max-width: 859px) {

    .download-page #artistLink {
        width: 100% !important;
        max-width: 100%;
        float: none;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        box-sizing: border-box;
    }

    .download-page #artistLink img {
        vertical-align: middle;
    }

}

.download-page #mainBody .download-track .newsSpaceText {
    width: 100%;
    float: none;
    box-sizing: border-box;
}


/* Mobile: stack vertically */
@media screen and (max-width: 600px) {

    .download-page #mainBody .download-tracks {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: 25px;
    }

    .download-page #mainBody .download-track {
        align-items: center;
        text-align: center;
    }

    .download-page #mainBody .download-track .newsSpaceText {
        text-align: center;
    }

}

/* =====================================
   PHOTO GALLERY RESPONSIVE
===================================== */

.photo-gallery-page {
    box-sizing: border-box;
    width: 100%;
}

.photo-gallery-page .mediaImagetitle {
    display: block;
    max-width: 100%;
    height: auto;
}

.photo-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 100px);
    gap: 10px;
    margin-bottom: 20px;
    align-items: start;
}

.photo-gallery-grid a {
    display: block;
    width: 100px;
    max-width: 100%;
}

.photo-gallery-grid img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Tablet and mobile */

@media (max-width: 859px) {

    .photo-gallery-page {
        width: 100%;
        max-width: 440px;
        margin-left: auto;
        margin-right: auto;
    }

    .photo-gallery-grid {
        grid-template-columns: repeat(4, minmax(0, 100px));
        justify-content: center;
        gap: 10px;
    }

}

/* Small mobile */

@media (max-width: 480px) {

    .photo-gallery-page {
        width: 100%;
        padding: 0 10px;
    }

    .photo-gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 100px));
        justify-content: center;
        gap: 10px;
    }

}
.photo-gallery-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 15px 20px;
}

.photo-gallery-grid > div {
    display: block;
    margin: 0 !important;
    padding: 0;
    line-height: 0;
}

.photo-gallery-grid a {
    display: block;
    margin: 0 !important;
    padding: 0;
}

.photo-gallery-grid img {
    display: block;
    margin: 0 !important;
    position: static;
}