/* ========================
   DESKTOP STYLES (min-width: 901px)
   ======================== */

:root {
    --header-font-size: 4vw;
    --year-font-size: 5vw;
    --month-font-size: 2vw;
    --info-font-size: 3.5vw;
    --clock-font-size: 3.5vw;
    --button-font-size: 2.0vw;
}

/* Header - 15% van schermhoogte, tekst naar boven */
.header {
    height: 15vh;
    align-items: flex-start; /* Tekst naar boven */
    padding-top: 10px; /* Kleine padding van boven */
}

.header h1 {
    font-size: var(--header-font-size);
    margin-top: 0;
}

/* Main content - 85% van schermhoogte */
.main-content {
    height: 85vh;
}

/* Desktop layout met image rechts */
.year-month {
    margin-right: 85vh;
}

.info-section {
    margin-right: 85vh;
}

.info-line {
    font-size: var(--info-font-size);
}

.bottom-section {
    margin-right: 85vh;
}

.year {
    font-size: var(--year-font-size);
}

.month {
    font-size: var(--month-font-size);
}

.station {
    font-size: calc(var(--clock-font-size) * 0.8);
}

.clock {
    font-size: var(--clock-font-size);
}

.footer {
    font-size: calc(var(--info-font-size) * 0.8);
}

.btn {
    font-size: var(--button-font-size);
}

/* Image container - desktop positioning */
.image-container {
    height: 85vh;
    width: 85vh;
    max-width: calc(100vw - 40px);
    max-height: calc(100vw - 40px);
    position: absolute;
    right: 20px;
    bottom: 20px;
}

/* Responsive aanpassingen binnen desktop range */
@media (max-width: 1200px) {
    :root {
        --header-font-size: 5vw;
        --year-font-size: 6vw;
        --month-font-size: 3vw;
        --info-font-size: 3.5vw;
        --clock-font-size: 4vw;
        --button-font-size: 3.0vw;
    }
}

@media (max-width: 900px) {
    :root {
        --header-font-size: 6vw;
        --year-font-size: 7vw;
        --month-font-size: 4vw;
        --info-font-size: 3.5vw;
        --clock-font-size: 4.5vw;
        --button-font-size: 3.0vw;
    }

    .bottom-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .bottom-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .left-column {
        gap: 5px;
    }

    .control-buttons {
        gap: 8px;
    }
}