/* vinoversigt.css */

/* Generelle stilarter */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Hero sektion */

.sektion1 {
    height: 70vh; /* Gør sektionen fuld højde */;
    display: flex;
    position: relative;
    align-items: center; /* Centrerer indholdet vertikalt */
    justify-content: left; /* Centrerer indholdet horisontalt */
    overflow: hidden;

} 

.image-container {
    position: absolute; /* Gør at billedet kan placeres bag teksten */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Skjuler eventuelle overflødige dele af billedet */
}


.container-sektion1 {
    position: relative; /* Gør at containeren kan placeres ovenpå billedet */
    height: 90vh;
    width: 100%;
    left: 0%; /* Justerer containeren til venstre */
    display: flex;
    flex-direction: column; /* Gør containeren til en kolonne */
    
    align-items: center; 
    justify-content: center; /* Centrerer indholdet vertikalt */
    align-self: stretch; /* Gør at containeren strækker sig over hele bredden */
    padding: 110px 120px;/* Tilføjer luft i top og højre */
    z-index: 2; /* Sørger for at containeren er ovenpå baggrundsbilledet */
    background-color: rgba(0, 0, 0, 0.5); /* lys grå med let gennemsigtighed */

}

.container-sektion1 h1 {
    line-height: 60px; /* Justerer linjehøjden for bedre læsbarhed */
    text-align: center;
    margin-bottom: 0.5rem;;

    
}

.container-sektion1 p {
    line-height: 30px; /* Justerer linjehøjden for bedre læsbarhed */
    text-align: center;
    max-width: 800px; /* Begrænser bredden af teksten for bedre læsbarhed */
}


.sektion1-image {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.sektion1-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Sørger for, at billedet dækker hele området */
    display: block; /* Fjerner eventuelle mellemrum under billedet */
}

.btn-content {
    display: flex;
    justify-content: center; 
    gap: 16px; /* Tilføjer mellemrum mellem knapperne */ 
    flex-wrap: wrap; /* Gør at knapperne kan brydes til næste linje, hvis der ikke er plads */
}

/* sektion2 - grid items*/
.grid-sektion {
    background-color: var(--tertiary-color); /* Lysere beige baggrund */
    
    min-height: 70vh;
    width: 100%;
    
    align-items: center;
    text-align: left;
    padding: 112px 120px;
    gap: 2rem;
    flex-wrap: wrap; /* indholdet kan tilpasse sig mindre skærme*/
}

.text-content2 {
    display: flex;
    flex-direction: column; /* Gør at teksten er i en kolonne */
    align-items: left; /* Justerer teksten til venstre */
    justify-content: center; /* Centrerer teksten vertikalt */
    padding: 0px 80px; /* Tilføjer luft i bunden og venstre */

}

.container-sektion2 {
    padding: 0px 80px; /* Tilføjer luft i bunden og venstre */
    display: flex;
    
}

.grid-items1 {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Tre kolonner af lige bredde */
    grid-template-rows: repeat(2, auto); /* To rækker af lige højde */
    gap: 30px; /* Tilføjer mellemrum mellem elementerne i grid item */
}

.item {
    background-color: var(--tertiary-color); /* beige baggrund */
    padding: 20px; /* Tilføjer luft inden i grid item */
    text-align: left;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Tilføjer en let skygge for dybde */
    transition: transform 0.3s ease;

}

.item:hover {
    transform: translateY(-5px); /* Giver en let hævning ved hover */
}

.item img {
    width: 100%; /* Gør at billedet fylder hele bredden af grid item */
    height: 400px; /* Bevarer billedets proportioner */
    object-fit: cover; /* Sørger for, at billedet dækker hele området */
    margin-bottom: 20px; /* Tilføjer mellemrum under billedet */
}


/* sektion3 - smagsnuancer */
.sektion3 {
    background-color: var(--primary-color); /* beige baggrund */
    
    min-height: 80vh;
    width: 100%;
    
    align-items: center;
    text-align: left;
    padding: 112px 120px;
    gap: 2rem;
    flex-wrap: wrap; /* indholdet kan tilpasse sig mindre skærme*/

}

.container-sektion3 {
    display: flex;
    max-width: 1200px; /* Begrænser bredden af containeren */
    height: 100%;
    flex-direction: row; /* Gør at indholdet er i en række */
    align-items: center;
    justify-content: space-between;
    padding-left: 80px;
  
}

.text-content3 {
    padding-left: 80px;
}

.content-images3 {
    display: flex;
    flex-direction: row; /* Gør at billederne er i en række */
    padding-top: 20px;
    gap: 100px; /* Tilføjer mellemrum mellem tekst og billede */
}

.img1 img, .img2 img, .img3 img {
    max-width: 100%; /* Begrænser bredden af billederne */
    height: 400px; /* Bevarer billedets proportioner */
}

/* sektion4 - kendetegn */

.sektion4 {
    background-color: var(--tertiary-color); /* Lysere beige baggrund */
    
    min-height: 100vh;
    width: 100%;
    
    align-items: center;
    text-align: left;
    padding: 112px 120px;
    flex-wrap: wrap; /* indholdet kan tilpasse sig mindre skærme*/

}

.container-sektion4 {
    display: flex;
    max-width: 1200px; /* Begrænser bredden af containeren */
    height: 100%;
    flex-direction: row; /* Gør at indholdet er i en række */
    align-items: center;
    justify-content: space-between;
    padding-left: 80px;
  
}

.text-content4 {
    justify-content: center;
    text-align: center;

}

.text-content4 h1 {
    margin-bottom: 0.5rem;
}

.content-images4 {
    display: flex;
    flex-direction: row; /* Gør at billederne er i en række */
    gap: 48px; /* Tilføjer mellemrum mellem tekst og billede */

}

.image1 img, .image2 img, .image3 img {
    max-width: 100%; /* Begrænser bredden af billederne */
    height: 220px; /* Bevarer billedets proportioner */
}
    
/* sektion5 - nyheder */
.sektion5 {
    background-color: var(--secondary-color); /* grøn baggrund */
    
    min-height: 100vh;
    width: 100%;
    
    align-items: center;
    text-align: left;
    padding: 112px 120px;
    gap: 2rem;
    flex-wrap: wrap; /* indholdet kan tilpasse sig mindre skærme*/
}

.text-content5 {
    display: flex;
    flex-direction: column; /* Gør at teksten er i en kolonne */
    align-items: left; /* Justerer teksten til venstre */
    justify-content: center; /* Centrerer teksten vertikalt */
    padding: 0px 80px; /* Tilføjer luft i bunden og venstre */
}

.produkt-navn {
    display: flex;
    flex-direction: row; /* Gør at indholdet er i en række */
    justify-content: space-between; /* Fordeler pladsen mellem elementerne */
    gap: 20px; /* Tilføjer mellemrum mellem elementerne*/
}



/* Responsive design */

@media (max-width: 768px) {

h1 {
    font-size: 38px;
  }
  
h2 {
    font-size: 20px;
  }
  
p, ul, li, a {
    font-size: 16px;
  }

.sektion1 {
    display: flex;
    align-items: flex-start;
    min-height: 70vh;
    text-align: left;
  }

.sektion3,
.sektion4,
.sektion5,
.grid-sektion {
    padding: 3rem 3rem;
  }

.container-sektion1,
.container-sektion3,
.container-sektion4 {
    padding: 1rem 1rem;
  }

.container-sektion2 {
    padding: 0 1rem;
    flex-direction: column;
    align-items: center;
  }

.grid-items1 {
    grid-template-columns: 1fr; /* Én kolonne på mobil */
    gap: 1.5rem;
  }

.item img,
.img1 img, .img2 img, .img3 img {
    height: 400px;
    max-width: 100%;
  }

.image1 img, .image2 img, .image3 img {
    display: flex;
    flex-direction: column;
    margin: 0 0;
    padding: 0;
    width: 100%;
    max-width: 300px;
    height: 200px;
}

.image1 p, .image2 p, .image3 p {
    margin: 0;
    padding: 0
}

.text-content2,
.text-content3,
.text-content4,
.text-content5 {
    padding: 0.5rem 1rem;
    text-align: left;
  }

.content-images3 {
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
  }

.content-images4, .image1, .image2, .image3 {
    display: flex;
    flex-direction: column;
    width: 100%;

    align-items: flex-start;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
    
}

.btn-content {
    flex-direction: row;
    gap: 1rem;
  }
}