/* valokuvaus-styles.css */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Arial',sans-serif;background:#1a1a1a;color:#fff;line-height:1.6;overflow-x:hidden}

/* Evästebanneri */
#cookie-banner {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #1f1f1f;
    color: #ddd;
    padding: 18px 20px;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 40px;
    z-index: 9999;
    border-top: 1px solid #333;
    box-shadow: 0 -8px 25px rgba(0,0,0,0.8);
    font-size: 0.96rem;
    transform: translateY(100%);
    transition: transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#cookie-banner.show { transform: translateY(0); }
#cookie-banner p { margin: 0; max-width: 820px; line-height: 1.45; }
#cookie-banner .buttons { display: flex; gap: 12px; flex-shrink: 0; }
#cookie-banner button {
    padding: 11px 26px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}
#cookie-banner .btn-reject { background: transparent; color: #bbb; border: 2px solid #555; }
#cookie-banner .btn-reject:hover { background: #333; color: #fff; }
#cookie-banner .btn-accept { background: #4ade80; color: #000; border: none; }
#cookie-banner .btn-accept:hover { background: #5aff90; transform: translateY(-2px); }

/* Päätyylit */
#home{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden}
#home video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:-1}
#home h2{font-size:clamp(2.5rem,8vw,4.5rem);text-shadow:0 0 40px rgba(0,0,0,.9);margin-bottom:20px}
#photo-button-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-top: 40px;
    z-index: 10;
}
.btn {
    background:#333;
    color:#fff;
    padding:14px 32px;
    border-radius:50px;
    text-decoration:none;
    font-size:1.1rem;
    transition:.3s;
    box-shadow:0 4px 15px rgba(0,0,0,.5);
    cursor:pointer;
    white-space:nowrap;
}
.btn:hover {background:#4ade80;transform:translateY(-3px);}

#dynamic-title {position: relative;overflow: visible;display: flex;align-items: center;justify-content: center;margin: 80px auto 60px;padding: 40px 20px;min-height: 160px;z-index: 5;}
#dynamic-title span {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: auto;max-width: 90vw;text-align: center;font-size: clamp(2.2rem, 7vw, 4rem);font-weight: bold;text-shadow: 0 4px 20px rgba(0,0,0,.8);pointer-events: none;white-space: nowrap;will-change: transform, opacity;}

.about-section{max-width:1200px;margin:80px auto;display:flex;align-items:center;gap:60px;flex-wrap:wrap;padding:0 20px}
.about-text{flex:1.5;min-width:300px;font-size:1.35rem;color:#e0e0e0;line-height:1.8}
.about-image{position:relative;flex:1;min-width:300px;max-width:500px;height:600px;border-radius:20px;overflow:hidden;box-shadow:0 15px 50px rgba(0,0,0,.9)}
.about-image img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.about-image img.active{opacity:1}

.project-section { max-width: 1400px; margin: 100px auto 80px; padding: 0 20px; }
.project-header { margin-bottom: 2.5rem; }
.project-header .subtitle { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.15rem; font-weight: 500; color: #4ade80; margin-bottom: 0.6rem; }
#changing-title-container { position: relative; width: 100%; min-height: 4rem; display: flex; align-items: center; }
.changing-title { font-size: clamp(2.0rem, 6.5vw, 3.0rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; text-shadow: 0 4px 15px rgba(0,0,0,0.5); transition: all 0.45s cubic-bezier(0.4,0,0.2,1); }
.slide-up-exit { transform: translateY(-130%); opacity: 0; }
.slide-up-enter-prep { transform: translateY(130%); opacity: 0; transition: none; }
.slide-up-active { transform: translateY(0); opacity: 1; }

#changing-grid,
.static-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.25rem;
    transition: opacity 0.65s ease;
    min-height: 320px;
    position: relative;
}
#changing-grid .group,
.static-gallery .static-item {
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0 12px 35px rgba(0,0,0,.55);
    background: #111;
}
#changing-grid img,
.static-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}
#changing-grid .group:hover img,
.static-gallery .static-item:hover img {
    transform: scale(1.08);
}

#category-dots { display: flex; gap: 10px; justify-content: center; margin: 25px auto 0; flex-wrap: wrap; }
.category-dot { width: 11px; height: 11px; background: #444; border-radius: 50%; transition: all 0.35s ease; cursor: pointer; }
.category-dot.active { background: #4ade80; transform: scale(1.45); box-shadow: 0 0 12px rgba(74,222,128,0.6); }

/* Hinnoittelu */
#pricing{max-width:1400px;margin:80px auto;padding:0 20px;min-height:300px}
#pricing h2{font-size:clamp(2.2rem,7vw,3.5rem);margin-bottom:20px;text-align:center}
#pricing .disclaimer{font-size:1rem;color:#bbb;text-align:center;margin-bottom:40px}

.upper-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;margin-bottom:40px}
.lower-row{display:grid;gap:30px}

.pricing-box{background:#222;padding:30px;border-radius:20px;box-shadow:0 15px 50px rgba(0,0,0,.6);text-align:center;transition:transform .3s ease}
.pricing-box:hover{transform:translateY(-10px)}
.upper-row .pricing-box h3{font-size:1.6rem;margin-bottom:15px}
.upper-row .pricing-box .price{font-size:2.4rem}
.lower-row .pricing-box h3{font-size:2rem;margin-bottom:20px}
.lower-row .pricing-box .price{font-size:2.8rem}
.pricing-box ul{list-style:none;text-align:left;margin:20px 0;font-size:1.2rem;line-height:1.8}
.pricing-box ul li{padding-left:20px;position:relative}
.pricing-box ul li::before{content:"–";position:absolute;left:0;color:#4ade80}
.pricing-box ul li strong{font-size:1.4rem;font-weight:bold}
.pricing-box .quote{font-size:1.1rem;color:#aaa;font-style:italic;margin-top:20px}

.contact-box{background:#333;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;border-radius:20px;box-shadow:0 15px 50px rgba(0,0,0,.6)}
.contact-box p{font-size:1.3rem;margin-bottom:30px;text-align:center}
.contact-btn{background:#4ade80;color:#000;padding:15px 30px;border-radius:50px;text-decoration:none;font-size:1.3rem;font-weight:bold;transition:.3s}
.contact-btn:hover{background:#5aff90;transform:scale(1.05)}

#location-selector{max-width:1400px;margin:60px auto 100px;padding:0 20px;text-align:center}
#location-selector h2{font-size:clamp(1.8rem,5vw,2.8rem);margin-bottom:24px;color:#4ade80}
#location-selector select{width:100%;max-width:420px;padding:14px 20px;font-size:1.25rem;background:#222;color:#eee;border:2px solid #444;border-radius:12px;appearance:none;cursor:pointer;transition:.3s}
#location-selector select:hover,#location-selector select:focus{border-color:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,0.2);outline:none}
#location-selector .info{margin-top:16px;font-size:1.05rem;color:#aaa}

#final-contact{max-width:1400px;margin:0 auto 100px;padding:0 20px;display:grid;grid-template-columns:1fr 1fr;gap:40px}
#final-contact .contact-info,
#final-contact .qr-box {background:#222;padding:40px;border-radius:20px;box-shadow:0 15px 50px rgba(0,0,0,.6);min-height:420px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition: all 0.35s ease;}
#final-contact .contact-info:hover,
#final-contact .qr-box:hover {transform: translateY(-8px) scale(1.015);box-shadow: 0 25px 70px rgba(0,0,0,.75);background: #2a2a2a;}
#final-contact .contact-info h2{font-size:2.2rem;margin-bottom:30px}
#final-contact .contact-info p{font-size:1.4rem;margin:20px 0;}
#final-contact .contact-info:hover p { color: #e0e0e0; }
#final-contact .contact-info a{color:#4ade80;text-decoration:none;}
#final-contact .contact-info a:hover { color: #6aff9c; }
#final-contact .qr-box{cursor:pointer}
#final-contact .qr-box a{display:block;width:100%;max-width:430px}
#final-contact .qr-box img{width:100%;height:auto;border-radius:12px;transition:opacity .3s}
#final-contact .qr-box:hover img{opacity:0.92}

footer{background:#000;padding:40px 20px;text-align:center;font-size:1rem;border-top:1px solid #333}

@media(max-width:992px){
    .about-section{flex-direction:column;text-align:center}
    #final-contact{grid-template-columns:1fr}
    #changing-grid, .static-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width:768px){
    #changing-grid, .static-gallery { grid-template-columns: 1fr; }
    #changing-title-container { min-height: 6rem; }
    #location-selector select{max-width:100%}
    .static-gallery { margin: 80px auto 100px; }
    #cookie-banner { flex-direction: column; text-align: center; gap: 15px; padding: 20px 15px; }
    #cookie-banner .buttons { width: 100%; justify-content: center; }
   
    /* Hinnoittelu – kaikki allekkain */
    .upper-row,
    .lower-row {
        grid-template-columns: 1fr !important;
        gap: 25px;
    }
    .lower-row .contact-box {
        order: 2;
    }
}