/* Hero-billede */

.hero-billede {
    max-width: 100%; /* Maksimal bredde tilføjet for at forhindre, containeren fylder mere end hele viewportens bredde */
    overflow: hidden; /* Forhindrer at billedet strækker sig uden for containerens bredde */
  }
  
  .hero-billede img {
    width: 100%; /* Billedet fylder containerens bredde */
    height: auto; /* Højden justeres automatisk, så billedets proportioner bliver holdt */
    display: block; /* Fjerner eventuelt mellemrum under billedet */
  }

  .hero-billede {
    overflow-x: hidden; /* Forhindrer der kommer en horisontal scrollbar, hvis indholdet strækker sig længere end bredden på viewportern */
}

/* Slider med vine */

.vine-overskrift {
    margin-left: 50px; /* Margin til venstre for at give luft mellem overskriften og venstre kant af viewporten */
    margin-bottom: -40px; /* Negativ margin for at skabe mindre afstand ned til slideren, så det er mere tydeligt overskriften hører til der.*/
  }

.vine-container {
    display: flex; /* Flexbox for at arrangere vinene i en række */
    justify-content: center; /* Centrerer indholdet horisontalt */
    align-items: center; /* Centrerer indholdet vertikalt */
    margin-bottom: 30px; /* Margin under slideren for at skabe luft */
    padding: 30px; /* Padding omkring slideren for at skabe luft */
  }

  .vine-container::-webkit-scrollbar {
    height: 10px; /* Højden på scrollbar sættes til 0 for at skjule den */
  }

  .vine-container::-webkit-scrollbar-track {
    background: none; /* Ingen baggrund på scrollbarens track */
    border-radius: 10px; /* Rundede hjørner på scrollbarens track */
  }

  .vine-container::-webkit-scrollbar-thumb {
    background-color: #ccc; /* Hvid farve på scrollbarens "thumb" */
    border-radius: 10px; /* Rundede hjørner på scrollbarens "thumb" */
  }

  .vine-container::-webkit-scrollbar-thumb:hover {
    background-color: #888; /* Hvid farve på scrollbarens "thumb" */
    border-radius: 10px; /* Rundede hjørner på scrollbarens "thumb" */
  }

.vine-container {
  width: 100%; /* Giver slideren fuld bredde af viewporten */
  overflow-y: hidden; /* Forhindrer vertikal scrollbar, da vi kun vil have horisontal scrolling */
}

/* Scrollbar i slideren */

.scrollbar {
  display: flex; /* Flexbox for at få vinene til at stå på række */
  min-width: 100%; /* Så scrollbarens bredde er den samme som viewportens bredde */
  align-items: center; /* Centrerer indholdet vertikalt i slideren */
  justify-content: start; /* Justerer indholdet til venstre i slideren */
  overflow-x: auto; /* Gør det muligt at scrolle horisontalt */
  overflow-y: hidden; /* Forhindrer vertikal scrollbar, da der kun skal være  horisontal scrolling */
}

.slide {
  width: 400px; /* Fast bredde på hver vin for at sikre en ensartet størrelse */
  flex-shrink: 0; /* Forhindrer at vinen skaleres ned, når der er for mange i slideren */
  margin-bottom: 20px; /* Margin under hver vin for at skabe luft */
  display: flex; /* Flexbox for at arrangere indholdet i hver vin */
  flex-direction: column; /* Kolonne for at arrangere billede og tekst vertikalt */
  justify-content: center; /* Centrerer indholdet vertikalt */
  align-items: center; /* Centrerer indholdet horisontalt */
  scroll-snap-align: start; /* Sørger for at hver vin starter ved begyndelsen af viewporten, når der scrollet */
}

.slide h5 {
  margin-top: 5px; /* Margin rundt om produktnavnet for at skabe luft */
  margin-bottom: 30px; 
  max-width: 15ch; /* Maksimal bredde så produktnavnene står på mere end en linje, så de står lige under den tilhørende vin */
  text-align: center; /* Centrerer produktnavnet */
}

.slide:hover {
  transform: scale(1.03); /* Forstørrer vinen en smule ved hover for at give en visuel effekt */
  transition: transform 0.3s ease; /* Gør overgangen glidende */
}

.slide img {
  width: 100%; /* Billedet fylder hele bredden af sin container */
  height: auto; /* Højden justeres automatisk for at bevare proportionerne */
  display: block; /* Fjerner eventuelt mellemrum under billedet */
}

.scrollbar {
  padding-top: 10px;
  padding-bottom: 30px;
  margin-bottom: 20px;
}

.pil {
  font-size: 30px; /* Størrelse på pilene */
  cursor: pointer; /* Skifter markøren til en hånd ved hover for at vise, at pilene skulle være klikbare for dermed at gøre designet mere brugervenligt og intuitivt. (Dette virker selvfølgelig ikke grundet manglende javascript, men blot for at illustrere, hvordan det skulle fungere). */
  padding: 10px;  
  position: absolute; /* Absolut positionering anvendes for at placere pilene inden i slideren */
  border: none; /* Ingen kant rundt om pilene */
  background: transparent; /* Gennemsigtig baggrund, så der ikke er en grim default-baggrund bag pilene */
}

.venstre {
  left: 10px; /* Placering af venstre pil */
}

.hoejre {
  right: 10px; /* Placering af højre pil */
}

.vine-container {
  position: relative; /* Nødvendigt for at positionere pilene tæt ved containeren */
}

/* Brandhistorie-tekst */

.brandhistorie {
    display: flex; /* Flexbox bruges for at centrere hele introsektionen på siden */
    flex-direction: column; /* Kolonne så overskrift og tekst vises vertikalt i stedet for horisontalt */
    align-items: center; /* Centrerer indholdet på siden */
    margin-bottom: 50px; /* For at skabe luft mellem introteksten og den nedenstående sektion */
  }
  
  .brandhistorie h2 {
    text-align: center; /* Centrerer hovedoverskriften */
    max-width: 12ch; /* Maksimalt antal anslag for at sørge for, overskriften deler sig på to linjer frem for at blive for lang. Dette giver et mere læsevenligt layout. */
  }
  
  .brandhistorie p {
    text-align: left; /* Brødteksten er venstrestillet for at gøre den nemmere at læse */
    max-width: 42ch; /* Maksimalt antal anslag for at holde brødteksten på ca. 60 anslag inkl. mellemrum for at forbedre læsbarheden */
  }

/* Responsivt design til forsiden */

  @media (max-width: 768px) {
  /* Hero-billede */
  .hero-billede img {
    height: auto; /* Højden justeres automatisk for at bevare proportionerne */
    object-fit: cover; /* Sikrer at billedet dækker hele containeren */
  }

  /* Slider overskrift */
  .vine-overskrift {
    margin: 20px 20px 0 20px; /* Mindre margin for at passe til den mindre skærm */
    text-align: center; /* Centrerer overskriften for at gøre den mere læsevenlig på mindre skærme */
  }

  /* Slider */
  .vine-container {
    padding: 10px 0; /* Mindre padding på mindre skærme */
    margin: 0; /* Fjerner margin under slideren, så det passer bedre til den mindre skærm */
    padding: 20px; /* Padding omkring slideren for at skabe luft */
  }

  .scrollbar {
    padding: 10px;
    gap: 10px;
  }

  .slide {
    width: 250px;
    margin: 0 10px;
  }

  /* Brandhistorie-sektion */

  .brandhistorie h2 {
    text-align: center; /* Centrerer hovedoverskriften */
    max-width: 12ch; /* Maksimalt antal anslag for at sørge for, overskriften deler sig på to linjer frem for at blive for lang. Dette giver et mere læsevenligt layout. */
  }
  
  .brandhistorie p {
    text-align: left; /* Brødteksten er venstrestillet for at gøre den nemmere at læse */
    max-width: 42ch; /* Maksimalt antal anslag for at holde brødteksten på ca. 60 anslag inkl. mellemrum for at forbedre læsbarheden */
  }
}