@media only screen and (min-width: 320px) {
    :root{
        --box-shadow: 0 8px 20px rgba(0,0,0,0.4);
        --hero-title-font-size: 30px;
        --hero-excerpt-font-size: 16px;
        --hero-excerpt-font-weight: 600;
    }
    /*Background stuff*/
    .color-section{
        background-image: url('img/lk-porras-lines-bg.svg');
        background-size: auto;
        background-position: top left;
        background-repeat: repeat;
    }
    .color-section.wrapper-alternate-color, .color-section.green-color-section{
        background-image:none;
    }
    .color-section.lk-porras-bg{
        background-image: url('img/lk-porras-lines-bg.svg');
        background-size: auto;
        background-position: top left;
        background-repeat: repeat;
    }
    .wrapper-alternate-color.lk-porras-bg{
        background-image: url('img/lk-porras-lines-bg-on-black.svg');
    }
    .laskutustiedot.wrapper-alternate-color{
        
    }
    .laskutustiedot.wrapper-alternate-color .gb-container{
        background:#000000;
    }
    /*Green layer on top of images*/
    .aas-slide figure::after,
    figure:has(> img.green-layer):after,
    .hero-with-img figure:after, .editor-styles-wrapper .hero-with-img figure:after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1;
        transition: all 1s ease-in-out;
        background-color:rgba(0, 0, 0, 0.3);
        background-size: cover;
        background-position:bottom right;
        mix-blend-mode: multiply;
    }
    /*Column row*/
    .gb-container.column-row, .editor-styles-wrapper .gb-container.column-row{
        margin-bottom:40px;
    }
    .column-row > .gb-container{
        margin-bottom:40px;
    }
    .column-row > .gb-container:last-child{
        margin-bottom:0px;
    }
    .contact-info-card{
        margin-bottom:40px;
    }
    /*Contact info card*/
    .contact-info-card > .gb-container, .editor-styles-wrapper .contact-info-card > .gb-container{
        padding:10px 20px;
        background-color:white;
        font-size:16px;
        font-weight:600;
        color:black;
    }
    .contact-info-card img, .editor-styles-wrapper .contact-info-card img{
        width:100%;
        height:200px;
        object-fit: cover;
        object-position: top center;
    }
    .contact-info-card p, .editor-styles-wrapper .contact-info-card p, .contact-info-card a, .editor-styles-wrapper .contact-info-card a{
        font-size:16px;
        font-weight:600;
        color:black;
        margin-bottom:10px;
    }
    .contact-info-card h4, .editor-styles-wrapper .contact-info-card h4{
        font-size:22px;
        font-weight:600;
        color:black;
        margin-bottom:10px;
    }
    /*Product column*/
    .product-column{
        margin-bottom:0px;
    }
    .product-column:last-child{
        margin-bottom:0px;
    }
    .product-column .gallery-slider{
        margin-bottom:20px;
    }
    .product-column h3,.editor-styles-wrapper .product-column h3{
        font-weight:600;
    }
    .product-column-text{
        font-size:12px;
    }
    .product-column-text ul ul{
        margin-top:10px;
        font-size:0.8em;
    }
    
    /* ==========================================================================
    LK Porras Background Pattern - Dynamic Version
    JavaScript generoi SVG-taustakuvion dynaamisesti
    Viivat piirtyvät yksitellen (stagger animation)
    Käyttö: Lisää .lk-porras-bg-dynamic luokka elementtiin
    
    Data-attribuutit (optionaaliset):
    - data-min-width="0.1"          (Ohuimman viivan leveys)
    - data-max-width="13"            (Paksumman viivan leveys)
    - data-sections="8"              (Sektioita per rivi)
    - data-rows="12"                 (Rivien määrä)
    - data-opacity="0.497"           (Läpinäkyvyys)
    - data-animation-delay="0"       (Viive ms)
    ========================================================================== */

    .lk-porras-bg-dynamic {
        background-image:none;
        position: relative;
        overflow: hidden;
    }

    /* SVG wrapper - täyttää koko elementin */
    .lk-porras-bg-svg-wrapper {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        opacity: 0;
    }

    .lk-porras-bg-svg-wrapper svg {
        width: 100%;
        height: 100%;
        display: block;
    }

    /* Container fade-in (käynnistyy JS:llä) */
    .lk-porras-bg-dynamic.lk-porras-bg-revealed .lk-porras-bg-svg-wrapper {
        animation: lk-porras-container-reveal 0.5s ease-out forwards;
    }

    @keyframes lk-porras-container-reveal {
        to {
            opacity: 1;
        }
    }
    .lk-porras-description{
        opacity:0;
        transform: translateY(10px);
        transition: all 2s 1.5s ease;
    }
    .lk-porras-bg-revealed .lk-porras-description{
        opacity:1;
        transform: translateY(0);
    }

    .wrapper-alternate-color .hint-icon{
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='430' height='430' fill='none' viewBox='0 0 430 430'%3E%3Cg stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='12'%3E%3Cpath stroke='white' d='M368.199 241.8c-3.2 11.9-7.8 29.3-12.8 47.9-9.1 34.1-25.5 54-25.5 54l-11 41.1-76.3-20.4-43.2-11.6 11-41.1a105.8 105.8 0 0 1-27-70.2l-.2-54.1c0-6.6 5.1-12 11.7-12.4 17.5-1 32.4 12.7 32.9 30.2l.6 20 9.5-35.5'/%3E%3Cpath stroke='white' d='m233.5 205.8 31.2-116.4C267 80.6 277 75.7 285.8 78c9.8 2.6 14.7 12.5 12.1 22.3l-30.7 114.5m33.601 9 14.1-52.8c2.3-8.8 11.3-14 20.1-11.6 9.8 2.6 15.7 12.7 13 22.6l-13.6 50.9m.099 0 7-26.2c2.5-9.3 11.3-12 20.6-9.5s14.8 12 12.3 21.3l-6.3 23.3'/%3E%3Cpath stroke='white' d='m267.199 214.8 36.8-137.5c2.5-9.3 12-14.8 21.3-12.3s14.8 12 12.3 21.3l-36.8 137.5'/%3E%3Cpath stroke='white' d='M69 74.8c83.3-16.7 149.9 0 149.9 0'/%3E%3Cpath stroke='white' d='m206.001 55.1 13 19.7-19.7 12.9'/%3E%3C/g%3E%3C/svg%3E");
        margin-bottom:10px;
    }
    .wrapper-alternate-color .post-scroller-hint .hint-text{
        color:white;
    }
    /*LKDS Lightbox*/
    .lkds-gallery, .editor-styles-wrapper .lkds-gallery{
        display:flex;
        flex-wrap:wrap;
        justify-content:space-between;
    }
    .lkds-gallery .lkds-gallery-item, .editor-styles-wrapper .lkds-gallery .lkds-gallery-item{
        width:100%;
        display:flex;
        justify-content:space-between;
        margin-bottom:40px;
    }
    .lkds-gallery .lkds-gallery-item figure, .editor-styles-wrapper .lkds-gallery .lkds-gallery-item figure{
        width:49%;
        aspect-ratio: 1 / 1;
    }
    .lkds-gallery .lkds-gallery-item img, .editor-styles-wrapper .lkds-gallery .lkds-gallery-item img{
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center;
        max-height: none;
    }
    /*Custom stuff*/
    #yhteystiedot{margin-top:0px;}
    #yhteystiedot.column-row.yhteystietonosto-enkku{margin-top:var(--default-margin-top); margin-bottom:var(--default-margin-bottom);}
    .privacy-policy h1{font-size:28px;}
    .privacy-policy h2{font-size:24px;}
    .privacy-policy h3{font-size:20px;}
    /*List customazation*/
    .hero-with-img + .color-section li{
        padding-left:4px;
    }
    .hero-with-img + .color-section li::marker{
        
        
    }
    .hero-with-img + .color-section li:has(> a)::marker{
        font-weight:bold;
        content:'>';
    }
    .wp-block-list a{
        text-decoration: underline;
    }
    .wp-block-list a:hover{
        text-decoration:none;
    }
}
@media only screen and (min-width: 768px) {
    :root{
        --hero-title-font-size: 40px;
    }
    #yhteystiedot.column-row{margin-bottom:0px;}
    #yhteystiedot .contact-info-card{
        margin-bottom:0px;
    }
    .contact-info-card p, .editor-styles-wrapper .contact-info-card p, .contact-info-card a, .editor-styles-wrapper .contact-info-card a{
        font-size:14px;
    }
    .product-column{
        margin-bottom:0px;
    }
    .product-column h3,.editor-styles-wrapper .product-column h3{
        font-size:20px;
    }
    .product-column-text{
        font-size:14px;
    }
    /*LKDS gallery*/
    .lkds-gallery .lkds-gallery-item, .editor-styles-wrapper .lkds-gallery .lkds-gallery-item{
        width:49%;
    }

}

@media only screen and (min-width: 990px) {
    .menu-item-has-children .dropdown-menu-toggle{
        display:none;
    }
    .contact-info-card img, .editor-styles-wrapper .contact-info-card img{
        height:300px;
    }
    .contact-info-card p, .editor-styles-wrapper .contact-info-card p, .contact-info-card a, .editor-styles-wrapper .contact-info-card a{
        font-size:16px;
    }
    .product-column h3,.editor-styles-wrapper .product-column h3{
        font-size:24px;
    }
}
@media only screen and (min-width: 1280px) {
    :root{
        --hero-title-font-size: 60px;
        --hero-title-line-height: 1.1em;
    }
    .contact-info-card img, .editor-styles-wrapper .contact-info-card img{
        
    }
    .lk-porras-description{
        max-width:900px;
        margin:0 auto;
    }
    .lk-porras-description .very-large-text{
        font-size:35px;
    }
}