/* etusivu_uusi.css - T-Malli 11% Banner / 89% (450px List + Remaining Content) */

/* --- CORE SETUP --- */
body, html {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    /* ADDED: Hides the horizontal scrollbar if an element pokes outside */
    overflow-x: hidden;
}

/* --- 1. BANNER (#banneri) --- */
#banneri {
height: 11vh;
width: 100%;
margin: 0;
padding: 0;
}

/* --- 2.  (#listaohjaus) --- */
#listaohjaus {
flex-grow: 1;
width: 100%;
display: flex;
/* ADDED: Ensures no extra padding or margin on the container itself */
margin: 0;
padding: 0;
}

/* --- 3. LISTA (aside inside #listaohjaus) --- */
#listaohjaus aside {
/* FORCED WIDTH: The combination of these ensures a fixed 450px width */
width: 866px;
flex-basis: 866px;
flex-shrink: 0; /* Prevents shrinking */

height: 100%;

/* ADDED: Ensures no extra padding or margin is affecting the total size */
margin: 0;
padding: 0;
}

/* --- 4.  (#etusisalto) --- */
#etusisalto {
flex-grow: 1;
height: 100%;

/* Ensures no extra padding or margin */
margin: 0;
padding: 0;

flex-shrink: 0;
min-width: 0;
}

/* --- 5. IFRAME FILLERS &  REUNA --- */
/* Ensures that iframes fill their parent container and have no default border */
#banneri iframe,
#listaohjaus aside iframe,
#etusisalto iframe {
width: 100%;
height: 100%;
/* ADDED: Removes default spacing/padding often found on iframes */
display: block;
margin: 0;
padding: 0;
}
/* ADDED: Forces all images inside the main content area to stay within bounds. */
#etusisalto img,
#listaohjaus aside img {
max-width: 100%;
height: auto;
/* Optional: Sets the image itself as a block element for cleaner rendering */
display: block;
}