/* =========================
   BASE
   ========================= */

* {
    box-sizing: border-box;
}

html {
    background: #1a1a1a;
    scrollbar-width: none;
}

html::-webkit-scrollbar {
    display: none;
}

body {
    margin: 0;
    padding: 20px;

    min-height: 100vh;

    background: #1a1a1a;
    color: #fff;

    font-family: "Lucida Console", "Courier New", monospace; /* 1a, 2a i ultima opció. */
    font-size: 13px;
    line-height: 1.35;
    font-weight: 400;

    -webkit-font-smoothing: antialiased;
}

/* =========================
   LINKS
   ========================= */

a {
    color: #fff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


/* =========================
   HEADER
   ========================= */

header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 70px;
}

.name {
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
}


/* =========================
   NAVIGATION
   ========================= */

nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;

    gap: 0 18px;
}

nav a {
    font-weight: 400;
}


/* =========================
   CONTENT
   ========================= */

main {
    width: 100%;
}

h1,
h2,
h3 {
    margin: 0 0 20px 0;

    font-size: 13px;
    line-height: 1.3;
    font-weight: 400;
}

p {
    margin: 0 0 12px 0;
}


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

@media (max-width: 700px) {

    body {
        padding: 14px;
    }

    header {
        display: block;
        margin-bottom: 50px;
    }

    .name {
        display: block;
        margin-bottom: 18px;
    }

    nav {
        justify-content: flex-start;
        gap: 6px 16px;
    }
}

/* =========================
   RELEASES
   ========================= */

.releases h1 {
    margin-bottom: 30px;
}


/* FILA */

.release-track {
    width: 100%;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    padding: 10px 0;

    border-top: 1px solid #555;
}

.release-track:last-child {
    border-bottom: 1px solid #555;
}



/* PART CLICABLE */

.track-play-icon {
    margin-right: 12px;
    cursor: pointer;
}

.track-main {
    display: flex;
    align-items: center;

    justify-self: start;

    cursor: pointer;
}

.track-cover {
    width: 70px;
    height: 70px;

    object-fit: cover;

    margin-right: 18px;
}

.track-title {
    font-size: 13px;
}

.track-main:hover .track-title {
    text-decoration: underline;
}


/* SEGONA COLUMNA: ALBUM + DATA */

.track-meta {
    justify-self: center;
    white-space: nowrap;
}


/* AMAGAR ALBUM/DATA QUAN FALTA ESPAI */

@media (max-width: 850px) {

    .release-track {
        grid-template-columns: 1fr auto;
    }

    .track-meta {
        display: none;
    }

    .track-download {
        justify-self: end;
    }
}


/* DOWNLOAD */

.track-download {
    justify-self: end;
    margin-right: 15px;
    white-space: nowrap;
}

.track-download-icon {
    display: block;

    width: 22px;
    height: 22px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;

    stroke-linecap: square;
    stroke-linejoin: miter;
}

/* =========================
   PLAYER
   ========================= */

#player {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    display: none;
    align-items: center;

    min-height: 82px;
    padding: 12px 26px;

    background: #fff;
    color: #000;

    z-index: 1000;
}

#player.open {
    display: flex;
}


/* =========================
   PLAYER - BOTONS GENERALS
   ========================= */

#player button {
    appearance: none;
    -webkit-appearance: none;

    margin: 0;
    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;
    color: #000;

    font: inherit;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* =========================
   PLAYER - ESQUERRA
   PREV / PLAY / NEXT
   ========================= */

.player-left {
    display: flex;
    align-items: center;

    gap: 20px;

    margin-right: 30px;
}

.player-left button {
    width: 28px;
    height: 34px;
}

.player-left svg {
    display: block;

    width: 100%;
    height: 100%;

    fill: #000;
}


/* Play / pause */

.pause-icon {
    display: none !important;
}

#play-button.playing .play-icon {
    display: none;
}

#play-button.playing .pause-icon {
    display: block !important;
}


/* =========================
   PLAYER - CENTRE
   TRACK + TEMPS + BARRA
   ========================= */

.player-center {
    width: min(480px, 50vw);
    min-width: 250px;
}

#player-title {
    margin-bottom: 8px;

    color: #000;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* =========================
   PLAYER - PROGRESS
   ========================= */

.player-progress {
    display: grid;

    grid-template-columns:
        auto
        minmax(120px, 1fr)
        auto;

    align-items: center;

    gap: 12px;
}

#current-time,
#total-time {
    color: #000;
    white-space: nowrap;
}


/* Barra */

#progress-bar {
    appearance: none;
    -webkit-appearance: none;

    width: 100%;
    height: 4px;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;
    outline: 0;

    background:
        linear-gradient(
            to right,
            #000 0%,
            #000 var(--progress, 0%),
            #ccc var(--progress, 0%),
            #ccc 100%
        );

    cursor: pointer;
}


/* Treure barra nativa Chrome */

#progress-bar::-webkit-slider-runnable-track {
    height: 4px;
    background: transparent;
    border: 0;
}


/* Cursor Chrome */

#progress-bar::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;

    width: 6px;
    height: 10px;

    margin-top: -3px;

    border: 0;
    border-radius: 0;

    background: #000;
}


/* Firefox */

#progress-bar::-moz-range-track {
    height: 4px;

    border: 0;

    background: transparent;
}

#progress-bar::-moz-range-thumb {
    width: 6px;
    height: 10px;

    border: 0;
    border-radius: 0;

    background: #000;
}


/* =========================
   PLAYER - DRETA
   SHUFFLE / CLOSE
   ========================= */

.player-right {
    margin-left: auto;

    display: flex;
    align-items: center;

    gap: 32px;
}


/* Shuffle */

#shuffle-button {
    width: 26px;
    height: 26px;
}

#shuffle-button svg {
    display: block;

    width: 100%;
    height: 100%;

    fill: none;
    stroke: #000;
    stroke-width: 2;

    stroke-linecap: square;
    stroke-linejoin: miter;
}

#shuffle-button {
    opacity: 0.4;
}

#shuffle-button.active {
    opacity: 1;
}


/* =========================
   CLOSE
   ========================= */

#close-player {
    position: relative;

    width: 30px;
    height: 30px;

    font-size: 0;
}

#close-player::before,
#close-player::after {
    content: "";

    position: absolute;

    left: 14px;
    top: 4px;

    width: 3px;
    height: 22px;

    background: #000;
}

#close-player::before {
    transform: rotate(45deg);
}

#close-player::after {
    transform: rotate(-45deg);
}

/* =========================
   PLAYER - ESPAI FINAL
   ========================= */

body.player-open {
    padding-bottom: 105px;
}


/* =========================
   SHOWS
   ========================= */


/* UPCOMING / PAST */

.shows-section h2 {
    width: fit-content;

    color: #000;
    background: #fff;

    padding: 0 2px;
    margin-bottom: 20px;
}


/* ESPAI ENTRE UPCOMING I PAST */

.shows-section + .shows-section {
    margin-top: 30px;
}


/* MISSATGE SENSE DATES */

.no-shows {
    padding: 10px 0;
}


/* =========================
   SHOW ROWS
   ========================= */

.show-row {
    width: 100%;

    border-top: 1px solid #555;
}

.show-row:last-child {
    border-bottom: 1px solid #555;
}


/* TOTA LA FILA QUAN TÉ LINK */

.show-link {
    width: 100%;

    display: grid;

    grid-template-columns:
        150px
        minmax(0, 1fr)
        180px;
    
    column-gap: 30px;

    align-items: center;

    min-height: 44px;
}


/* DATA */

.show-date {
    white-space: nowrap;
}


/* NOM EVENT */

.show-venue {
    min-width: 0;
}


/* CIUTAT */

.show-city {
    text-align: right;
    white-space: nowrap;
}





/* =========================
   ABOUT
   ========================= */

.about-page header {
    margin-bottom: 25px;
}

.about-content {
    display: grid;
    grid-template-columns:
        330px
        minmax(0, 600px);

    gap: 40px;
    align-items: start;
}

.about-image img {
    display: block;
    width: 100%;
    height: auto;
}

.photo-caption {
    width: 100%;
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.3;
    text-align: left;
}

.about-text p {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    text-align: justify;
}

.about-text h2:not(:first-child) {
    margin-top: 60px;
}





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

@media (max-width: 700px) {

    .track-cover {
        width: 55px;
        height: 55px;

        margin-right: 12px;
    }

    .track-download {
        margin-left: 30px;
    }

    #player {
        padding: 0 14px;
    }

    #player-title {
        display: none;
    }

    #close-player {
        margin-left: 15px;
    }

     /* SHOWS */

    .show-row,
    .show-link {
        grid-template-columns:
            85px
            1fr;
    }

    .show-city {
        display: none;
    }

    .about-content {
    grid-template-columns: 1fr;
    }

    .about-image {
        max-width: 300px;
    }
}