body { font-family: sans-serif; text-align: center; padding: 20px; background: #f0f8ff; color: #333; }
.container { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.card { background: white; padding: 20px; border-radius: 15px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); width: 280px; }
.status { font-size: 1.8em; font-weight: bold; margin: 15px 0; }
.details { color: #555; font-size: 0.9em; margin-top: 10px; border-top: 1px solid #eee; padding-top: 10px; }

#current-obs { padding: 15px; margin: 20px auto; font-weight: bold; transition: all 0.3s; max-width: 600px; }

.section-card {
    background: white; padding: 20px; border-radius: 15px;
    max-width: 600px; margin: 20px auto;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); text-align: left;
}

.schedule-item, .forecast-row { border-bottom: 1px solid #eee; padding: 10px 0; display: flex; justify-content: space-between; }
.schedule-item:last-child, .forecast-row:last-child { border-bottom: none; }

#meteostation-widget-MADIS_KRET2 { max-width: 600px; margin: 20px auto; border-radius: 15px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.source-note { font-size: 0.75em; color: #888; margin-top: 5px; text-align: center; }

/* Layout Controls */
.layout-controls {
    margin-bottom: 20px;
}
.layout-controls button {
    padding: 10px 15px;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
}
.layout-controls button:hover {
    background-color: #f0f0f0;
}

/* Default Layout for Forecasts */
.forecast-container {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap on smaller screens */
    justify-content: space-around; /* Distributes space around items */
    gap: 20px; /* Adds some space between the forecast boxes */
    max-width: 1240px;
    margin: 0 auto;
}

.forecast-container > .section-card {
    flex: 1; /* Allows both forecast boxes to grow and share space */
    min-width: 350px; /* Prevents them from becoming too narrow */
    margin: 0; /* Override the margin:auto from .section-card */
}

/* Flow View Styles */
#content-wrapper.flow-view {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 1600px;
    margin: 0 auto;
}

/* In flow-view, make containers 'disappear' so their children can flow */
#content-wrapper.flow-view > .container,
#content-wrapper.flow-view > .forecast-container {
    display: contents;
}

/* In flow-view, all cards become flex items */
#content-wrapper.flow-view .card,
#content-wrapper.flow-view .section-card,
#content-wrapper.flow-view #current-obs,
#content-wrapper.flow-view #meteostation-widget-MADIS_KRET2 {
    flex: 1 1 350px; /* Grow, shrink, with a base width */
    max-width: 500px; /* Limit max width for readability */
    margin: 0; /* Reset margin: auto from .section-card */
    width: auto; /* Reset width from .card */
}