/* Side med grid til vinbeskrivelser. Denne bruges på siden "Solaris" */

/* Flexbox til introsektion da den er delt i tre med indhold, der skal vises på række */

.vinintro {
    display: flex; /* Flexbox for at centrere hele introsektionen på siden */
    flex-direction: row; /* Rækkevisning for at placere tekst og billede ved siden af hinanden */
    justify-content: space-between; /* Fordeler pladsen mellem tekst og billede */
    align-items: stretch; /* Strækker elementerne i introsektionen, så de fylder hele højden af containeren */
    padding: 60px 80px; /* Padding for at give luft omkring indholdet i introsektionen */
    max-width: 1200px; /* Maksimal bredde for at begrænse bredden på introsektionen */
    margin: 0 auto; /* Centrerer introsektionen horisontalt på siden */
}

.vinintro-tekst {
    display: flex; /* Flexbox for at arrangere tekst i en kolonne */
    flex-direction: column; /* Tekst vises i en kolonne */
    justify-content: space-between; /* Fordeler pladsen mellem overskrift brødtekst og knap */
    flex: 1; /* Giver tekstboksen en fleksibel bredde, så den fylder den resterende plads i containeren */
}

.vinintro-tekst h1 {
    max-width: 15ch; /* Maksimalt antal anslag for at sørge for, at overskriften ikke bliver for lang */
    text-align: center; /* Centrerer hovedoverskriften for at skabe balance i layoutet */
}

.vinintro-tekst p {
    max-width: 45ch; /* Maksimalt antal anslag for at holde brødteksten på ca. 60 anslag inkl. mellemrum for at forbedre læsbarheden */
    font-family: "futura-pt", Helvetica, sans-serif; /* Futura PT til brødtekst */
    line-height: 1.6; /* Linjeafstand for at forbedre læsbarheden */
    font-size: 16px; /* Størrelse på brødtekst */
}

.knap-vinbeskrivelse {
    align-self: flex-end; /* Justerer knappen til bunden af boksen */
}

.vinintro-billede {
    display: flex; /* Flexbox for at arrangere indholdet på en række */
    flex-direction: row; /* Rækkevisning for at placere billedet og certifikaterne ved siden af hinanden */
    align-items: center; /* Centrerer billedet horisontalt */
    gap: 30px; /* Giver luft mellem billedet og teksten */
    flex: 1; /* Giver billedet en fleksibel bredde, så det fylder den resterende plads i containeren */
    justify-content: center; /* Centrerer billedet i containeren */
}


.vinintro-certifikater {
    display: flex; /* Flexbox for at arrangere certifikaterne i en række */
    flex-direction: column; /* Certifikaterne vises i en kolonne */
    align-items: flex-start; /* Venstrejusterer certifikaterne, så de står på linje vertikalt */
    gap: 20px; /* Giver luft mellem certifikaterne */
}

.vinintro-certifikater img {
    height: 100px; /* Billederne i certifikaterne skal have en fast højde */
    width: auto; /* Bredden justeres automatisk for at bevare proportionerne */
}

/* Vinbeskrivelse med info om vinen og smagsprofil */

.vinbeskrivelse {
   display: grid; /* Grid-layout for at arrangere ikonerne i et gitter. Jeg har valgt grid frem for flexbox, da indholdet her skal vises i både kolonner og rækker */
   grid-template-columns: 1fr 1fr; /* To kolonner, der hver tager halvdelen af bredden */
   grid-template-areas: 
    "vinflaske-billede smagsprofil"
    "madparring solaris-info"
    "solaris-klima smagsnoter"; /* Definerer områderne i gitteret */
}

.ikoner img {
    width: 80px; /* Billederne i ikonerne skal have en fast bredde */
    height: auto; /* Højden justeres automatisk for at bevare proportionerne */
    margin-bottom: 10px; /* Margin under billederne for at skabe luft */
}

.ikoner {
  display: flex; /* Flexbox for at arrangere ikonerne i en række */
  gap: 40px; /* Giver luft mellem ikonerne */
  justify-content: center;  /* Centrerer ikonerne horisontalt */
}

.ikoner span {
  display: flex; /* Flexbox for at arrangere tekst og billede i ikonerne */    
  flex-direction: column; /* Kolonnevisning for at placere tekst under billedet */
  align-items: center; /* Centrerer tekst og billede i ikonerne */
  font-size: 20pt; /* Størrelse på labels ud for ikonerne */
  font-family: "marine-up", Helvetica, sans-serif;
  text-align: center; 
}

.smagsprofil-linje {
  display: flex; /* Flexbox for at få lingerne til at stå på række */
  justify-content: space-between; /* Fordeler pladsen ligeligt mellem ikonerne */
  margin-bottom: 20px; /* Margin under hver linje for at skabe luft */
}

.smagsprofil-linje img {
    width: 80px; /* Billederne i ikonerne skal have en fast bredde */
    height: auto; /* Højden justeres automatisk for at bevare proportionerne */
}

.smagsprofil-linje span {
  display: flex; /* Flexbox for at arrangere tekst og billede i linjerne */
  align-items: center; /* Centrerer tekst og billede i linjerne */
}

.smagsprofil-linje > span:first-child,
.smagsprofil-linje > span:last-child {
  width: 80px; /* Giver labels en fast bredde */
  text-align: left; /* Venstrestiller labels for at gøre layoutet mere ensartet */
  align-self: flex-start; /* Justerer labels til toppen af linjen */
}

.bred-label {
  width: 120px; /* For at gøre plads til det længere ord "kraftig" uden cut-off */
}

.vinflaske-billede {
  grid-area: vinflaske-billede;
  display: flex;
}

.vinflaske-billede img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* Fylder hele området */
  display: block;      /* Fjerner inline gap */
}


.smagsprofil {
  grid-area: smagsprofil;
  background-color: rgba(166, 119, 0, 0.6);
  padding: 20px; /* Padding for at give luft omkring teksten i smagsprofil-sektionen */
  overflow: visible; /* Sørger for at indholdet teksten ikke bliver cut-off, hvis den er for lang */
  display: flex; /* Flexbox for at arrangere indholdet i en kolonne */
  flex-direction: column; /* Kolonnevisning for at placere smagsprofilen under billedet */
  align-items: center; /* Centrerer indholdet i madparring-sektionen */
  justify-content: center; /* Centrerer indholdet vertikalt */
}

.madparring {
  grid-area: madparring;
  background-color: rgba(166, 119, 0, 0.6);
  padding: 20px; /* Padding for at give luft omkring teksten i madparring-sektionen */
  display: flex; /* Flexbox for at arrangere indholdet i en kolonne */
  flex-direction: column; /* Kolonnevisning */
  align-items: center; /* Centrerer indholdet i madparring-sektionen */
  justify-content: center; /* Centrerer indholdet vertikalt */
}

.solaris-info {
  grid-area: solaris-info;
  background-color: #CBE3E2; /* Baggrundsfarve der matcher baggrundsfarven på billedet, der også er med i dette grid */
}

.solaris-klima {
  grid-area: solaris-klima;
  background-color: #CBE3E2;
}

.smagsnoter {
  grid-area: smagsnoter; 
  background-color: rgba(166, 119, 0, 0.6);
  display: flex; /* Flexbox for at arrangere indholdet i en kolonne */
  flex-direction: column; /* Kolonnevisning for at placere smagsnoter under de øvrige sektioner */
  align-items: center; /* Centrerer indholdet i smagsnoter-sektionen */
  justify-content: center; /* Centrerer indholdet vertikalt */
}

.vinbeskrivelse span {
  font-family: "marine-up", Helvetica, sans-serif; /* Marine Up på labels for at matche øvrige over- og underskrifter */
  font-size: 20pt; /* Størrelse på labels i vinbeskrivelsen */
  text-align: center; /* Centrerer labels for at skabe balance i layoutet */
  margin-bottom: 10px; /* Margin under labels for at skabe luft */
}

.vinbeskrivelse h2 {
  text-align: center; /* centrering af overskriften for at passe til layoutet på resten af websitet */
  margin-left: auto; /* Ovenstående centrerer ikke overskriften helt. Derfor bruges margin-left + margin right auto */
  margin-right: auto;
  margin-bottom: 20; /* Margin under og overskrifter for at skabe luft */
  max-width: 15ch; 
}

.vinbeskrivelse p {
  font-family: "futura-pt", Helvetica, sans-serif; /* Futura PT til brødtekst */
  line-height: 1.6; /* Linjeafstand for at forbedre læsbarheden */
  font-size: 16px; /* Størrelse på brødtekst */
  margin: 20px auto; /* Mere luft top og bund. Centrerer teksten i hver sektion */
  max-width: 45ch; /* Maksimal antal anslag for at holde linjerne korte og læsevenlige */
}

/* Styles til responsive */

@media (max-width: 768px) {
    .vinintro {
        flex-direction: column; /* Kolonnevisning for at placere tekst og billede under hinanden */
        align-items: center; /* Centrerer indholdet horisontalt */
    }

  .vinintro-tekst h1 {
    font-size: 30px; /* Mindre skriftstørrelse */
    max-width: 100%; /* Giver mere plads til overskriften i responsive */
  }

  .knap-vinbeskrivelse {
    align-self: center; /* Centrerer knappen for at skabe balance i layoutet */
    margin-top: 20px;
  }

  .vinintro-billede {
    flex-direction: column; /* Kolonnevisning */
    align-items: center; /* Centrerer billedet og certifikaterne */
    gap: 20px; 
  }

  .vinintro-certifikater {
    flex-direction: row; /* Rækkevisning for at placere certifikaterne ved siden af hinanden */
    justify-content: center; /* Centrerer certifikaterne horisontalt */
    gap: 15px;
  }

  .vinintro-certifikater img {
    height: 60px; /* Mindre størrelse i responsive */
  }
}

/* Responsive styles til vinbeskrivelse-grid (smagsprofil) */
@media (max-width: 768px) {

    .vinbeskrivelse {
        display: flex; /* Flexbox for at arrangere indholdet i en kolonne */
        flex-direction: column; /* Kolonnevisning for at placere alle sektioner under hinanden */
    }
    .vinflaske-billede img {
    width: 100%; /* Billedet fylder hele bredden af sin container */
    height: auto; /* Højden justeres automatisk for at bevare proportionerne */
  }

  .smagsprofil,
  .madparring,
  .solaris-info,
  .solaris-klima,
  .smagsnoter {
    padding: 20px;
    text-align: center; /* Centrerer teksten i hver sektion for at skabe balance i layoutet */
  }

  .ikoner {
    flex-wrap: wrap; 
    gap: 20px;
  }

  .ikoner img {
    width: 60px; /* Mindre størrelse på ikoner i responsive */
  }

  .smagsprofil-linje {
    display: flex; /* Flexbox for at arrangere smagsprofilerne i en kolonne ved responsv visning */
    align-items: center; 
    text-align: center;
  }

  .smagsprofil-linje span {
    justify-content: center; /* Centrerer indholdet i hver linje */
    margin-bottom: 10px; /* Margin under hver linje for at skabe luft */
  }

  .smagsprofil-linje > span:first-child,
  .smagsprofil-linje > span:last-child {
    width: 40px; /* Giver labels en mindre bredde */
    text-align: center; /* Centrerer labels for at gøre layoutet mere ensartet */
  }

  .vinbeskrivelse h2 {
    font-size: 24px; /* Mindre skriftstørrelser i responsive */
    max-width: 25ch;
  }

  .vinbeskrivelse p {
    font-size: 15px;
    max-width: 70%; /* Giver mere plads til brødteksten i responsive */
    text-align: left; /* Venstrestiller brødteksten for bedre læsbarhed */
  }
  .vinbeskrivelse span {
    font-size: 20px; /* Mindre skriftstørrelse for labels i responsive */
  }

}

/* Elementer byttes rundt i responsive, så profilerne, der beskriver vinen altid kommer før det billede/tekst, der står ved siden af i desktop-versionen */
@media (max-width: 768px) {
  .smagsprofil { order: 1; }
  .vinflaske-billede { order: 2; }
  .madparring { order: 3; }
  .solaris-info { order: 4; }
  .smagsnoter { order: 5; }
  .solaris-klima { order: 6; }
}