/* 
 * Fil: details-v2.2.css
 * Version: 2.2
 * Placering: /home/buddhidk/public_html/ver-2.2/css/details-v2.2.css
 * Root: /home/buddhidk/public_html/ver-2.2
 * 
 * Formål: Håndterer layout og design for detaljeringssiden i version 2.2.
 *
 * Særlige beskeder til chatgpt: 
 * - Undlad på nogen måde at redigere i denne kommentar-sektion!
 * - Undlad at ændre på numrene i nummereringen herunder og undlad selv at tilføje numre, medmindre jeg specifikt beder dig om det!
 * - Vær særligt opmærksom på ikke at fjerne eksisterende nødvendig kode i denne fil!
 */

/* 1 - Layout til body */
body {
  background: linear-gradient(rgba(200, 200, 200, 0.4), rgba(200, 200, 200, 0.4)), url('../../images/gold-bg.jpg') repeat;
  background-size: cover; /* Juster billedets skalering */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #000; /* Skift tekstfarven til sort for kontrast, hvis baggrunden bliver lys */
    font-family: 'Roboto', sans-serif;
}

/* 2 - Layout til container */
.details-container {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
    padding: 20px;
}

/* 3 - Styling til titlen */
.details-title {
    font-size: 1.5em;
    margin-bottom: 10px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* 4 - Styling til coveret */
.details-cover {
    max-width: 300px;
    border-radius: 5px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
}

/* 5 - Styling til indholdssektion */
.details-content {
    flex: 1;
}

/* 6 - Styling til beskrivelsen */
.details-description {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 0.9em;
    line-height: 1.5em;
}

/* 7 - Styling til øvrige detaljer */
.details-id,
.details-runtime,
.details-genre,
.details-providers {
    margin-bottom: 10px;
    font-size: 0.8em;
}

/* 8 - Styling af IMDB rating */
.details-imdb {
    background-color: #f5c518;
    color: #000000;
    font-weight: bold;
    font-size: 12px;
    padding: 1px 3px;
    border-radius: 4px;
    font-family: Arial, sans-serif;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
}

/* 9 - Styling af TMDB rating */
.details-tmdb {
    background-color: #032541;
    color: #ffffff;
    font-weight: bold;
    font-size: 0.72em;
    padding: 1px 3px;
    border-radius: 4px;
    font-family: Arial, sans-serif;
}

/* 10 - Standard link-styling inden for ratings */
.details-imdb a,
.details-tmdb a {
    color: inherit; /* Arver farven fra forældreelementet */
    text-decoration: none; /* Fjern understregning */
    font-weight: inherit; /* Arver fed skrift fra forældreelementet */
}

/* 11 - Styling til ratings-container og spilletid */
.ratings-container {
    display: flex;
    align-items: center; /* Midterstil alle elementer lodret */
    gap: 10px; /* Plads mellem elementerne */
}

/* 12 - Styling til runtime */
.details-runtime {
    line-height: 1; /* Sørger for ensartet lodret justering */
    margin-top: 0; /* Fjerner eventuel ekstra margin, som kan påvirke placeringen */
    margin-bottom: 0; /* Samme som ovenfor */
}

/* 13 - Styling til fejlmeddelelser */
.details-error {
    color: red;
    font-weight: bold;
    margin-top: 20px;
}

/* 14 - Mobiloptimering */
@media (max-width: 768px) {
    .details-container {
        flex-direction: column; /* Stak elementerne vertikalt */
        align-items: center;
        gap: 10px;
        padding: 10px;
    }
    /* 15 - Responsiv styling af cover */
    .details-cover {
        max-width: 100%; /* Gør billedet responsivt */
        margin-bottom: 10px;
    }
    /* 16 - Responsiv styling af titlen */
    .details-title {
        font-size: 1em; /* Reducer fontstørrelsen på mindre skærme */
        text-align: center;
    }
    /* 17 - Responsiv styling af indhold */
    .details-content {
        width: 100%; /* Udnyt hele skærmens bredde */
        text-align: left;
    }
    /* 18 - Responsiv styling af IMDB rating */
    .details-imdb {
        background-color: #f5c518;
        color: #000000;
        font-weight: bold;
        font-size: 12px;
        padding: 1px 3px;
        border-radius: 4px;
        font-family: Arial, sans-serif;
        box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
    }
    /* 19 - Responsiv styling af TMDB rating */
    .details-tmdb {
        background-color: #032541;
        color: #ffffff;
        font-weight: bold;
        font-size: 0.72em;
        padding: 1px 3px;
        border-radius: 4px;
        font-family: Arial, sans-serif;
    }
    /* 20 - Responsiv styling af ratings-container */
    .ratings-container {
        display: flex; /* Sørg for, at elementerne vises på samme linje */
        flex-wrap: nowrap; /* Forhindrer linjeskift */
        align-items: center; /* Lodret midterstilling */
        gap: 10px; /* Plads mellem elementerne */
    }
    
    /* 21 - Responsiv styling af øvrige detaljer */
    .details-id,
    .details-description,
    .details-genre,
    .details-providers {
        font-size: 1em; /* Reducer fontstørrelsen lidt for at passe bedre til skærmen */
    }
    /* 22 - Responsiv styling af runtime */
    .details-runtime {
        font-size: 0.9em; /* Mindre font for spilletiden */
        line-height: 1; /* Ensartet linjehøjde */
        margin-top: 0;
        margin-bottom: 0;
    }
}