/* produktpræsentation i flexbox med billede og tekst – bruges til Vores Vine og Vinsmagning */

.produktoversigt {
    display: flex; /* Flexbox for at få tekstsektion og billede til at være ved siden af hinanden */
    justify-content: center; /* Centrerer hele produktoversigten på siden */
    gap: 100px; /* For at få noget luft mellem billede og tekst */
    margin: 70px; /* Margin for at skabe luft mellem hver produktbeskrivelse */
}

.produktbeskrivelse {
    display: flex; /* Flexbox for at kunne bruge "column" så underoverskrift, brødtekst og læs mere-knap stables vertikalt (knap skal vises i bunden til højre) */
    flex-direction: column; /* Kolonnevisning for at placere indholdet under hinanden */
    justify-content: space-between; /* Fordeler pladsen mellem underoverskrift, brødtekst og knap */
}

.produktbeskrivelse h2 {
    text-align: center; /*Underoverskrift centreres for at skabe bedre balance i layoutet*/
    max-width: 15ch; /* Underoverskrifterne må maks. være ca. 20 anslag inkl. mellemrum, før de går ned på en ny linje. Dette er for at matche længden på brødteksten nedenunder bedre. */
}

.produktbeskrivelse p {
    text-align: left; /* Brødteksten er venstrestillet for at gøre den nemmere at læse */
    max-width: 45ch; /* Maksimal antal anslag for at holde linjerne korte og læsevenlige */
}


.knap-produktside {
    align-self: flex-end; /* Justerer knappen til højre i produktoversigten */
}

/* Responsivt design for produktoversigten */
@media (max-width: 768px) {
    .produktoversigt {
        flex-direction: column; /* På skærme under 768px vises billede og tekst i en kolonne frem for ved siden af hinanden på en række */
        align-items: center; /* Centrerer hele indholdet af containeren på siden */
        gap: 20px; /* Mindre afstand mellem elementerne ved responsiv visning */
    }


    .produktbillede-højre {
        flex-direction: column-reverse; /* Hvis billedet er på højre side, vises det responsivt over teksten i stedet for under. På den måde er rækkefølgen med billede efterfulgt af tekst fast ved responsiv visning frem for at skifte, som det gør ved en bredde over 768px. */
    }

    .knap-produktside {
        align-self: center; /* Knappen centreres ved responsive for et mere harmonisk og intuitivt layout */
        margin-top: 20px; /* Margin mellem brødtekst og knap for at skabe luft */
    }

}