/* IMPORTS */

@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

/* Fonts */

@font-face {
    font-family: fiesta;
    src: url(fonts/Fiesta.ttf);
}

.fiesta {
    font-family: fiesta;
}

/* Body and reset */

* {
    background-repeat: no-repeat;
    background-attachment: local;
    box-sizing: border-box;

}

a {
    color: inherit;
}

body {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

    font-family: "Zilla Slab", serif;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 2.5rem;

    color: #ca8533;

    hr {
        border-color: #ca8533;
    }
   
}

/* MAIN CLASSES*/

.deg180 {
    rotate: 180deg;
}

.deg90 {
    rotate: 90deg;
}

.deg270 {
    rotate: 270deg;
}

.display-none {
    display: none;
}

h1, h2, h3, h4 {
    margin: 0;
    font-family: fiesta;
}

h1 {
    padding-top: 7rem;
    font-size: 4rem;
}

h2 {
    font-size: 2rem;
}

p {
        margin-block-end: 0;
}

header, section {
    min-height: 100vh;
    width: 100%
}

section {

    text-align: center;
    width: 100%;
    padding: 0 0 2rem 0;
    min-height: 100vh;

}

p {
    padding: 0 2rem;
}

ul, li {
    font-family: inherit;
    font-size: inherit;
    
}

img {
    max-width: 100%;
}

.container {
    width: 100%; /* szerokość kontenera */
    margin: 20px auto; /* odzielić kontenery pionowo */
    position: relative; /* aby pozycjonować pseudo-element */

    padding: 0 2rem 2rem 2rem;
}

.content {
    max-height: 20vh; /* stała wysokość */
    overflow: hidden; /* ukrywanie treści wystającej */
    transition: max-height 0.3s ease; /* płynne przejście */
    position: relative; /* aby pseudo-element był względem rodzica */
    padding-bottom: 2rem;
    z-index: 8;
}

.content::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2rem; /* wysokość gradientu */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    pointer-events: none; /* pozwala kliknąć przycisk przez gradient */
    transition: opacity 0.3s ease;
}

.align-left {
    text-align: left;
}


.content.expanded {
    max-height: 1000vh; /* automatyczna wysokość po rozszerzeniu */
}

.showMoreBtn {
    position: relative;
    background: #fff;

    color: inherit;
    font-family: fiesta;
    font-size: 1.2rem;

    padding: 1rem 0;
    width: 100%;
    border: 2px solid #fff;
    border-radius: 0 0 2rem 2rem;

    cursor: pointer;
}

.showMoreBtn::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 1rem;
    left: 50%;
    background-color: #333333;
    transition: width 0.5s ease, left 0.5s ease;
}

.showMoreBtn:hover::after {
    width: 50%;
    left: 25%;
}

.video-container {
    position: relative;
    width: 90%;
    padding-bottom: 56.25%; /* 16:9 ratio */
    margin: 1rem auto 0;
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


.v-divider {
    width: 50%;
}

.inline-link {

    position: relative;

    display: flex;
    justify-content: space-between;
    align-items: center;
    
    margin: 1rem;
    padding: 0.5rem;

    border-radius: 1rem;

    background: rgba(255, 255, 255, 0.08);

    cursor: pointer;

    
    img {
        height: 2rem;
    }

    text-decoration: none;
}

.inline-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: 0.5em;
    left: 50%;
    background-color: #ca8533;
    transition: width 0.5s ease, left 0.5s ease;
}

.inline-link:hover::after {
    width: 50%;
    left: 25%;
}

.video-desc {
    font-size: 1.2rem;
    line-height: 1.5rem;
    margin-top: 0;
}

.button-container {

    padding: 1rem 1.5rem;
    
    display: flex;
    flex-wrap: wrap;

    justify-content: space-evenly;
    align-content: space-evenly;
}

.media-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 20vw;
    height: 20vw;

    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 5vw;

    padding: 2%;
}

/*PRELOADER */

#loader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;

    p, div {
        padding: 2rem;
        margin: 0 auto;
    }
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #ca8533;
    border-top: 5px solid #483100;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.page-content {
    display: none;
}


/* MENU */

.menu {
    a {
        color: #ca8533;
    }
}

.menu-bar-icon {

    z-index: 13;

    width: 5rem;
    height: 5rem;

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

    margin: 5px;
    border-radius: 25%;

    background: rgba(255, 255, 255, 0.1);

    padding: 1rem;

    img {
        max-width: 3rem;
    }

}

.burger {
    display: flex;
    flex-direction: column;
    align-items: center;

    justify-content: space-around;
   
    z-index: 11;
    
    cursor: pointer;

    padding: 1rem 1rem;

    span {
        display: block;

        width: 100%;
        height: 0.3rem;
        border-radius: 1.5rem;
        
        background: #ca8533;
        margin: 3px 0;
    }
}

.menu-bar {
    display: flex;
    justify-content: space-around;

    height: 6rem;
    width: 100%;

    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;

    background-color: rgba(0, 0, 0, 0.8);
    

    backdrop-filter: blur(3px);
}

.menu {
    pointer-events: none;

    position: fixed;
    z-index: 9;
    top: 0;
    left: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;

    font-family: fiesta;
    color: #ca8533;
    font-size: 3rem;

    background-color: black;

    height: 100vh;
    width: 100%;

    transition: left 0.5s;

    .divider {
        width: 50%;
    }

    

    ul {
        pointer-events: none;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;

        margin-block-start: 0;
        margin-block-end: 0;
        padding-inline-start: 0;

        width: 100%;
    }

    li {
        list-style: none;

        a {
            position: relative;
            pointer-events: auto;

            display: inline-block;
            text-decoration: none;

            padding: 0.5rem 0;
            transition: color 0.3s ease;
        }

        a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 50%;
            background-color: #ca8533;
            transition: width 0.5s ease, left 0.5s ease;
        }

        a:hover::after {
            width: 100%;
            left: 0;
        }

        a:active {
            color: #c9c9c9;
        }

        a:active::after {
            background-color: #c9c9c9;
        }

        
    }

}

.hide {
    left: 100vw;
}


/* HEADER */

header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background-image: url("imgs/band_webp600.webp");
    background-size: contain;
    background-position: center bottom;

    background-color: black;
    margin: 0;
}

.logo {

    height: 50vh;
    width: 70%;
    background-image: url("imgs/hard_rockets_vertical.webp");
    background-size: contain;
    background-position: top;

}

/* O NAS */

#onas {
    color: #333333;

    background-image: url(imgs/onas600.webp), url(imgs/sky600.webp);
    background-position: bottom;
    background-size: contain, cover;

    h2 {
        padding-top: 2rem;
    }

    li {
        line-height: 1.5em;
        margin-bottom: 1em;
    }

}

.sklad {
    
    div {

        p:nth-child(even) {
            margin-block-start: 0;
        }

    }
}

/* MUZYKA */

#muzyka {
    background-color: black;

    h1 {
        padding-bottom: 2rem;
    }

    p {
        line-height: 2rem;
    }

    .fiesta {
        display: inline-block;
        line-height: 2.2rem;
        margin-top: 0.5rem;
        
    }

    img {
        max-width: 90%;
    }

    .inline-link {
        margin-top: 1rem;
        margin-bottom: 1rem;

    }


}

#koncerty {

    
    
    
    background-color: #000;

    padding-bottom: 12rem;

    h1 {
        background: url(imgs/konc11.webp);
        background-position: bottom;
        background-size: contain;
        background-repeat: no-repeat;

        width: 100%;
        height: calc(55vw + 5rem);
        line-height: calc(65vw + 5rem);

    }
    

    .inline-link {
        justify-content: center;
        margin: 5px 0 0 0;
    }

    

    ul {
        
        padding: 0;
        
    }

    li {
        list-style: none;
        display: flex;
        align-items: center;
        flex-direction: column;
        padding: 2rem;

        i {
            display: inline-block;
            font-size: 1rem;
            line-height: 1.4rem;
            padding: 0.5rem 0;
        }

        br {
            display: none;
        }
        
        

        div:nth-of-type(odd){      
            flex-grow: 1;
            max-width: 305px;

            img {
                min-width: 300px;
                height: 300px;
                border-radius: 1rem;
                box-shadow: 5px 5px 0px 0px rgba(255, 255, 255, 0.2);
            }
        }

        div:nth-of-type(even){
            height: auto;
            padding: 0;
        } 

        
    }
   
}

#kontakt {
    background: url(imgs/kontakt600.webp);
    background-size: cover;
    background-position: bottom;

    h1 {
        padding-bottom: 3rem;
    }

    .inline-link {
        display: flex;
        flex-direction: column;
        background-color: rgba(0, 0, 0, 0.7);
        
    }

    a {
        padding-top: 1rem;
        padding-bottom: 1rem;
        margin: 0 auto;
        font-size: 1.2rem;

    }
}


@media only screen and (min-width: 473px) {

    .video-container {
        position: relative;
        width: 90%;
        padding-bottom: 56.25%; /* 16:9 ratio */
        margin: 0 auto 2rem;
    }

}

@media only screen and (min-width: 768px) {

    section {

        padding-top: 4rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    header {
        background-image: url("imgs/band_webp.webp");

           .logo {

               height: 50vh;
               width: 90%;
               background-image: url("imgs/hard_rockets_horizontal.webp");
               background-size: contain;
               background-position: center;
           }

       }

       .menu {

        li {
            padding: 2rem;
            font-size: 4rem;
        }
    }

    .menu-bar {
        justify-content: unset;
    }

    .burger {
        margin-left: auto;
    }

    #onas {

        background-image: url(imgs/onas.webp), url(imgs/sky.webp);

        .intro {

            .content {

                font-size: 2rem;
                font-style: italic;
                max-height: 200vh;
                max-width: 60vw;

                margin: 0 auto;
            }
        
            .showMoreBtn {
                display: none;
            }
    
        }

        .content::after {
            display: none;
        }

    }

    .cols-4 {

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;

        .col {
           padding: 2rem 0; 
           flex-basis: 24%;
        }

    }

    .sklad {

        .content {
            max-height: 200vh;
        }

        .showMoreBtn {
            display: none;
        }

        
    }

    .col {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;

    }

    .historia-i-osiagniecia {

    

        .content {
            max-height: 1vh;
            max-width: 60vw;
            margin: 0 auto;
            position: relative;
            left: 0;
        }


        .content.expanded {

           margin-top: 3rem;

            max-height: 2000vh;

        }

        .showMoreBtn {

            border-radius: 2rem;
            width: 50%;

        }

    }

    #muzyka {

        align-items: center;

        hr {
            border-color: #ca8533;
        }

        p, hr, a, .button-container .inline-link{

            max-width: 60vw;
            text-align: center;

        }

        p {
            margin: 1rem auto;
        }

        .button-container {
            margin: 0 auto;
            justify-content: center;

        }

        .media-button {

            width: 6rem;
            height: 6rem;
            border-radius: 1rem;
            padding: 1rem;

            margin: 0 1rem;
        }

        .inline-link {
            margin: 1rem auto;
        }

        .v-divider {

           width: 12rem;
        }

    }

    #koncerty {

        padding-top: 0;

        h1 {
            padding-top: 0rem;
            height: 50vw;
            line-height: 20vw;
        }

        li {
            flex-direction: column;
            padding: 0 20vw 6rem;
            margin: 0 auto;

            .inline-link {
                margin: 5px 0 0 0;
            }

            div:nth-of-type(even){
                flex-grow: 2;
                margin-right: 0;
                
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                
               
            }

            
        }
    
    }

    

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (orientation: portrait) {

    
    p {
        font-size: 2rem;
    }

    .cols-4 {

        .col {
           padding: 2rem 0; 
           flex-basis: 47%;
        }

    }

    #muzyka {

        .video-desc {

            font-size: 1.6rem;

        }

        .inline-link {
            padding: 1.6rem;

            border-radius: 5rem;

            width: 90%;

            margin: 1.6rem auto;
        }
    }

    #kontakt {

        a {
            font-size: 2rem;
            padding: 1.5rem;
        }

    }   
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) and (orientation: landscape) {

   
    .menu-bar {
        height: auto;
    }

    .menu-bar-icon {

        width: 3rem;
        height: 3rem;
    
        display: flex;
        align-items: center;
        justify-content: center;
    
        margin: 0.5rem 0 0.5rem 0.5rem;
        border-radius: 25%;
    
        background: rgba(255, 255, 255, 0.1);
    
        padding: 1rem;

        img {
            max-width: 1.7rem;
        }
    
    }

    .burger {
        display: none;
    }

    .menu {
   
        position: fixed;
        top: 0;
        left: 0;
        right: 0;

        z-index: 12;

        background: none;

        flex-direction: row;
        align-items: center;
        

        height: 4rem;

        ul {
            flex-direction: row;
            justify-content: space-around;
            align-items: center;

            padding-left: 11rem;

            li {
                font-size: 3rem;
                padding: 0;
            }
        }

        img {
            display: none
        }

    }

    header {

        .logo {
            width: 80%;
            background-position: top;
        }

    }

    #muzyka {

        .fiesta {
            font-size: 2.5rem;
        }
    }

    #kontakt {

        display: flex;
        flex-direction: column;
        justify-content: center;

        background: url(imgs/kontakt.webp);
        background-size: cover;
        background-position: bottom right;

        .inline-link {
            background: none;
        }

    }
}

}

/* Large devices (laptops/desktops, 1279px and up) */
@media only screen and (min-width: 1279px) and (orientation: landscape) {
 
    #koncerty {

        ul {
            margin-top: -10vw;
        }

        li {
            flex-direction: row;

            div {
                padding: 1rem 0;
            }

            div:nth-of-type(even){
                flex-grow: 2;
                margin-right: 0;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                align-items: start;
                height: 305px;
                 
                padding: 0 0 0 3rem;

            }
        }
    }

}

/* WPOM */

.body_album {
    padding: 20px;
    background-color: #490d0d;

    h1 {
        line-height: 1.2;
    }
}

.container_album {
    padding-top: 60px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    
  }
  
  .cover_album img {
    width: 100%;
    max-width: 500px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  }
  
  .links_album {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  
  .btn_album {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #000000;
    color: #ca8533;
    padding: 14px 20px;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    transition: background-color 0.3s;
  }
  
  .btn_album img {
    height: 24px;
  }
  
  .btn_album:hover {
    background-color: #17a94d;
  }
  
  /* Layout for larger screens */
  @media (min-width: 768px) {
    .container_album {
      flex-direction: row;
      align-items: flex-start;
      justify-content: center;
    }
  
    .cover_album {
      flex: 0 0 50%;
      max-width: 500px;
    }
  
    .links_album {
      flex: 0 0 50%;
      padding-left: 40px;
      justify-content: center;
    }
  }

  .mobile-bar-album {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1001;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 20px;
  }
  
  /* przycisk X */
  .close-btn-album {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }
  
  /* pokaż tylko na ekranach wąskich (mobilnych) */
  @media (max-width: 767px) {
    .mobile-bar-album {
      display: flex;
    }
  
  }