/*
 * Styles for the new wiggy-brand-page.ftl template.
 * Using a mobile-first approach.
 */

:root {
    --grid-gap: 0rem; /* Gap between grid items */
}

/* Basic resets from style-common.css */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Define body font from style-common.css */
body {
    font-family: Tenderness, sans-serif;
    /* The problematic flexbox layout is NOT copied over. */
    /* The page-wrapper will handle the min-height. */
}

.page-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    max-width: 1600px; /* Asetetaan maksimileveys koko sivulle */
    margin: 0 auto; /* Keskitetään koko sivu */
    overflow-x: hidden; /* Estää sivuttaisen ylivuodon ja vierityspalkin */
}

.top-banner-area,
.page-header,
footer {
    width: 100%;
    flex-shrink: 0; /* Prevent header/footer from shrinking */
}


/* Main content grid layout */
.main-content {
    display: grid;
    grid-template-columns: 1fr; /* Default to a single column */
    gap: var(--grid-gap);
    padding: var(--grid-gap);
    width: 100%;
    flex-grow: 1; /* Allow main content to grow and fill space */
}

/* On larger screens (e.g., tablets and desktops), use a 2-column layout */
@media (min-width: 801px) {

    /* Lisätään tilaa eri sisältöalueiden väliin */
    .main-content > .cms-area:not(:last-child) {
        margin-bottom: 6rem;
    }
    /* Make fullWide span correctly */
    .main-content > .cms-area-fullWide { 
        grid-column: 1 / -1; 
    }
    
    /* Set cms-area-1 and 2 to be 80% wide and centered */
    .main-content > .cms-area-1,
    .main-content > .cms-area-2 {
        grid-column: 1 / -1; /* Varmistetaan, että vievät koko gridin leveyden */
        width: 80%;
        justify-self: center; /* Keskitetään alue grid-sarakkeessa */
    }

    /* Asetetaan media-bannereiden flow-asettelu päälle vain leveillä näytöillä */
    .main-content > .cms-area-1,
    .main-content > .cms-area-2 {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around; /* Jakaa tyhjän tilan tasaisesti komponenttien ympärille */
    }

    /* Asetetaan korttimainen asettelu VAIN area-1 ja area-2 sisällä oleville komponenteille */
    .main-content > .cms-area-1 > *,
    .main-content > .cms-area-2 > * {
        margin-bottom: 1rem;
        flex-grow: 1; /* Sallii korttien kasvaa täyttämään tilaa */
        flex-basis: 30%; /* Yrittää asettaa 3 korttia riville */
        max-width: 450px; /* Kiinteä maksimileveys yhdelle kortille */
    }

    /* Varmistetaan, että promo-banner vie aina 100% leveyden */
    .main-content > .cms-area-1 > .promo-banner-link,
    .main-content > .cms-area-2 > .promo-banner-link {
        flex-basis: 100%;
        max-width: 100%;
    }
}

/* On mobile screens, move the top banner below the header */
@media (max-width: 800px) {
    /* Vaihdetaan headerin ja bannerin järjestystä flexboxin order-ominaisuudella */
    .page-header { order: 1; }
    .top-banner-area { order: 2; }
    .navigation-area { order: 3; }
    .main-content { order: 4; }
    footer { order: 5; }
}

/* Popup styles (copied from old style-common.css) */
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--main-1-transparent);
  display: none; /* Initially hidden */
  z-index: 3000; /* Ensure it's on top of everything */
  text-align: center;
  padding-top: 20%; /* Siirretään sisältöä alas näytön yläreunasta */
}

.popup-content {
  font-size: 1.25em;
  font-weight: bold;
  margin-bottom: 1.5rem;
}

.popup-buttons {
  display: flex;
  flex-direction: row; /* Asetetaan napit vierekkäin */
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.popup-buttons button {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background-color: var(--highlight-1);
  color: white;
  font-weight: bold;
  width: 100%;
  max-width: 250px;
}