/* groups/css/sagingcava-styles.css */
:root {
    --scv-main-yellow: #ffcb03; /* Dominant Yellow from logo BG */
    --scv-accent-blue: #00529F; /* French Flag Blue from logo */
    --scv-accent-red: #EF4135;    /* French Flag Red from logo */
    --scv-text-dark: #30336b; /* A deep, friendly dark blue/purple */
    --scv-text-light: #FFFFFF;
    --scv-bg-light-alt: #FFF9E6; /* Very light creamy yellow for alternate sections */
    --scv-card-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    --scv-font-headings: 'Poppins', sans-serif; /* Playful yet modern */
    --scv-font-main: 'Open Sans', sans-serif;

    /* Poster-inspired palette for "But I'M A CRÊPE" section */
    --crepe-bg: #FAF0E6; /* Linen / Light Beige */
    --crepe-text-dark: #704214; /* Chocolate Brown */
    --crepe-accent-red: #D9534F; /* Muted Red */
}

body {
    font-family: var(--scv-font-main);
    color: var(--scv-text-dark);
    line-height: 1.7;
    margin: 0; padding: 0;
    background-color: var(--scv-text-light); /* Default white */
}
.container { width: 90%; max-width: 1100px; margin: 0 auto; }

/* Hero Section - Seamless Yellow */
.scv-hero {
    background-color: var(--scv-main-yellow);
    background-image: linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
    background-size: 30px 30px, 30px 30px;
    color: var(--scv-text-dark);
    padding: 100px 0 70px 0;
    text-align: center;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.hero-content-scv {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}
.logo-container-scv {
    background-color: var(--scv-main-yellow);
    padding: 0px;
    border-radius: 12px;
    display: inline-block;
    margin-bottom: 0.5rem;
    line-height: 0;
}
.group-logo-scv {
    max-width: 220px;
    height: auto;
    display: block;
    vertical-align: bottom;
}
.hero-title-scv {
    font-family: var(--scv-font-headings);
    font-weight: 800;
    font-size: clamp(3rem, 8vw, 5rem);
    color: var(--scv-accent-blue);
    margin-bottom: 0.2rem;
    margin-top: -0.2em;
    padding-top: 0;
    line-height: 1;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.hero-subtitle-scv {
    font-family: var(--scv-font-headings);
    font-weight: 700;
    font-size: clamp(1.3rem, 4vw, 2rem);
    color: var(--scv-accent-red);
    margin-bottom: 1.8rem;
    margin-top: 0.8rem;
    line-height: 1.1;
}
.hero-description-scv {
    font-size: 1.1rem;
    margin-bottom: 2.5rem;
    max-width: 600px;
    margin-left: auto; margin-right: auto;
    color: var(--scv-text-dark);
    opacity: 0.9;
}
.btn.scv-hero-cta {
    background-color: var(--scv-accent-red);
    color: var(--scv-text-light);
    border: 2px solid var(--scv-accent-red);
    padding: 0.9rem 2.5rem;
    font-size: 1.05rem;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
}
.btn.scv-hero-cta:hover {
    background-color: #d9412c;
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 6px 15px rgba(239, 65, 53, 0.3);
}
/* General Content Sections */
.content-section { padding: 70px 0; }
.scv-alt-bg { background-color: var(--scv-bg-light-alt); }
.scv-light-bg { background-color: var(--scv-text-light); }

.section-title {
    font-family: var(--scv-font-headings); font-weight: 700;
    font-size: clamp(2rem, 4.5vw, 2.8rem); text-align: center;
    margin-bottom: 1.5rem; position: relative; padding-bottom: 0.75rem;
}
.scv-title-blue { color: var(--scv-accent-blue); }
.scv-title-red { color: var(--scv-accent-red); }
.scv-title-dark { color: var(--scv-text-dark); }

.section-title::after {
    content: ''; position: absolute; bottom: 0; left: 50%;
    transform: translateX(-50%); width: 70px; height: 4px; border-radius: 2px;
}
.scv-title-blue::after { background: linear-gradient(to right, var(--scv-accent-blue), var(--scv-main-yellow)); }
.scv-title-red::after { background: linear-gradient(to right, var(--scv-accent-red), lighten(var(--scv-accent-red), 15%)); }
.scv-title-dark::after { background: linear-gradient(to right, var(--scv-accent-blue), var(--scv-accent-red));}

.section-subtitle {
    text-align: center; font-size: 1.1rem; margin-bottom: 3rem;
    max-width: 700px; margin-left: auto; margin-right: auto; line-height: 1.8;
}
.scv-subtitle-dark { color: var(--scv-text-dark); opacity: 0.85; }


/* About Section */
.scv-about-section { background-color: var(--scv-text-light); }
.about-content-scv { display: flex; flex-wrap: wrap; align-items: center; gap: 3rem; }
.about-text-scv { flex: 1.2; min-width: 300px; }
.about-text-scv p { margin-bottom: 1rem; font-size: 1.05rem;}
.about-image-scv { flex: 1; min-width: 300px; text-align: center; }
.about-group-photo-scv {
    max-width: 100%; width: 450px; border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    border: 5px solid var(--scv-text-light);
}
.image-caption-scv { font-size: 0.9rem; color: #777; margin-top: 0.75rem; font-style: italic; }

/* Founders Section */
.founders-grid-scv { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; margin-top: 2rem; }
.founder-profile-scv {
    text-align: center; padding: 1.5rem;
    background-color: var(--scv-text-light); border-radius: 10px;
    box-shadow: var(--scv-card-shadow); transition: transform 0.3s ease;
}
.founder-profile-scv:hover { transform: translateY(-5px); }
.founder-profile-scv.main-founder { flex-basis: 280px; border-top: 5px solid var(--scv-accent-blue); }
.founder-profile-scv.co-founder { flex-basis: 220px; border-top: 4px solid var(--scv-accent-red); opacity: 0.9;}
.founder-profile-scv img {
    width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 0.75rem;
    border: 3px solid var(--scv-main-yellow);
}
.founder-profile-scv.main-founder img { width: 150px; height: 150px; }
.founder-profile-scv h4 { font-family: var(--scv-font-headings); font-weight: 700; color: var(--scv-text-dark); margin-bottom: 0.25rem; font-size: 1.2rem;}
.founder-profile-scv.main-founder h4 {font-size: 1.4rem;}
.founder-role { font-size: 0.9rem; color: #666; font-style: italic; }
.founder-nuance-scv {
    text-align: center; margin-top: 2rem; font-size: 0.95rem;
    color: var(--scv-text-dark); opacity: 0.7; display: flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.founder-nuance-scv i { color: var(--scv-accent-blue); }


/* Featured Video Section (Aljohn & Ernesto) */
.video-wrapper-scv {
    position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;
    max-width: 800px; margin: 2rem auto 0 auto; border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.video-wrapper-scv iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* "But I'M A CRÊPE" Meetup Section */
.scv-crepe-meetup-section { background-color: var(--crepe-bg); }
.scv-title-crepe { color: var(--crepe-text-dark); }
.scv-title-crepe::after { background: linear-gradient(to right, var(--crepe-accent-red), lighten(var(--crepe-accent-red), 20%)); }
.scv-subtitle-crepe { color: var(--crepe-text-dark); opacity: 0.9; }
.crepe-meetup-content {
    display: flex; flex-wrap: wrap; gap: 2.5rem; align-items: flex-start; margin-top: 2rem;
}
.crepe-poster-container { flex: 1; min-width: 280px; max-width: 400px; margin: 0 auto; }
.crepe-meetup-poster {
    width: 100%; height: auto; border-radius: 10px;
    box-shadow: 0 8px 20px rgba(112, 66, 20, 0.15);
    border: 3px solid var(--scv-text-light);
}
.crepe-gallery-container { flex: 1.5; min-width: 320px; }
.gallery-title-crepe {
    font-family: var(--scv-font-headings); font-size: 1.6rem;
    color: var(--crepe-text-dark); margin-bottom: 1.5rem; text-align: center;
    border-bottom: 2px solid var(--crepe-accent-red); padding-bottom: 0.5rem; display: inline-block;
}
/* Gallery Slider for Crepe Meetup */
.gallery-slider-container-scv { position: relative; display: flex; align-items: center; justify-content: center; margin-top: 1rem; padding: 0 35px; }
.gallery-grid-wrapper-scv { overflow: hidden; width: 100%; margin: 0 auto; }
.gallery-grid-scv { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); gap: 0.8rem; transition: transform 0.5s ease-in-out; }
@media (min-width: 768px) { .gallery-grid-scv { grid-auto-columns: minmax(200px, 1fr); } }
.gallery-item-scv { cursor: pointer; overflow: hidden; border-radius: 8px; box-shadow: var(--scv-card-shadow); transition: transform 0.3s ease; }
.gallery-item-scv img { width: 100%; height: 180px; object-fit: cover; display: block; transition: transform 0.4s ease; }
.gallery-item-scv:hover img { transform: scale(1.1); }
.gallery-nav-arrow-scv {
    position: absolute; top: 50%; transform: translateY(-50%); background-color: var(--crepe-accent-red); color: white;
    border: none; padding: 8px 10px; font-size: 20px; cursor: pointer; z-index: 10; border-radius: 50%;
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease;
}
.gallery-nav-arrow-scv:hover { background-color: darken(var(--crepe-accent-red), 10%); }
.gallery-nav-arrow-scv.prev-grid-arrow-scv { left: -5px; }
.gallery-nav-arrow-scv.next-grid-arrow-scv { right: -5px; }
.gallery-nav-arrow-scv.disabled { opacity: 0.4; cursor: default; background-color: lighten(var(--crepe-accent-red), 15%);}

/* SCV Modal Styles */
.modal-scv { display: none; position: fixed; z-index: 1050; padding-top: 20px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(48, 51, 107, 0.9); animation: fadeInModalSCV 0.3s ease-out;}
.modal-content-scv { margin: auto; display: block; max-width: 90%; max-height: 85vh; animation: zoomInModalSCV 0.3s ease-out;}
#caption-scv { margin: 10px auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ddd; padding: 10px 0; font-size: 1.1rem;}
.close-scv { position: absolute; top: 15px; right: 25px; color: #f1f1f1; font-size: 35px; font-weight: bold; transition: 0.3s; cursor: pointer;}
.close-scv:hover, .close-scv:focus { color: #bbb; text-decoration: none; }
.prev-scv, .next-scv { cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); padding: 12px 16px; color: white; font-weight: bold; font-size: 28px; transition: 0.4s ease; user-select: none; background-color: rgba(0,0,0,0.4); border-radius: 4px;}
.prev-scv { left: 10px; } .next-scv { right: 10px; }
.prev-scv:hover, .next-scv:hover { background-color: rgba(0,0,0,0.7); }
@keyframes fadeInModalSCV { from { opacity: 0; } to { opacity: 1; } }
@keyframes zoomInModalSCV { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }


/* How to Join Section */
.join-links-scv { text-align: center; margin-bottom: 2.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap:1rem; }
.btn.scv-join-btn {
    min-width: 280px; text-decoration: none; padding: 0.9rem 2rem;
    border-radius: 30px; font-weight: 700; font-size: 1rem;
}
.btn.scv-join-btn.btn-primary { background-color: var(--scv-accent-blue); color: var(--scv-text-light); border-color: var(--scv-accent-blue); }
.btn.scv-join-btn.btn-primary:hover { background-color: darken(var(--scv-accent-blue), 10%); }
.btn.scv-join-btn.btn-secondary { background-color: var(--scv-accent-red); color: var(--scv-text-light); border-color: var(--scv-accent-red); }
.btn.scv-join-btn.btn-secondary:hover { background-color: darken(var(--scv-accent-red), 10%); }
.community-snapshot-scv img {
    display: block; max-width: 600px; width: 100%; margin: 2rem auto 0 auto;
    border-radius: 10px; box-shadow: 0 8px 25px rgba(0,0,0,0.1); border: 3px solid var(--scv-text-light);
}

/* Final CTA Section */
.scv-final-cta-section {
    background-color: var(--scv-accent-blue);
    color: var(--scv-text-light);
}
.scv-final-cta-section .container {
    text-align: center;
}

.scv-title-cta {
    color: var(--scv-main-yellow);
}
.scv-title-cta::after {
    background: linear-gradient(to right, var(--scv-main-yellow), var(--scv-accent-red));
}
.scv-subtitle-cta {
    color: rgba(255,255,255,0.9);
}
.btn.scv-final-cta-btn {
    background-color: var(--scv-main-yellow);
    color: var(--scv-text-dark);
    border: 2px solid var(--scv-main-yellow);
    padding: 1rem 2.8rem;
    font-size: 1.15rem;
    border-radius: 30px;
    text-decoration: none;
    margin-top: 1rem;
    display: inline-block;
}
.btn.scv-final-cta-btn:hover {
    background-color: darken(var(--scv-main-yellow), 8%);
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 6px 18px rgba(255, 221, 87, 0.4);
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .about-content-scv { flex-direction: column-reverse; }
    .about-image-scv { margin-bottom: 2rem; }

    .crepe-meetup-content {
        flex-direction: column;
        align-items: center;
    }
    .crepe-poster-container {
        margin-bottom: 2rem;
        width: 100%; /* Take full width in column */
        max-width: 420px; /* Cap the width */
        margin-left: auto; /* Center if max-width is less than 100% of parent */
        margin-right: auto;
    }
    .crepe-gallery-container {
        width: 100%; /* Take full width in column */
        max-width: 480px; /* Cap the width, adjust to match poster if needed or allow slightly wider */
        margin-left: auto; /* Center if max-width is less than 100% of parent */
        margin-right: auto;
    }
}

@media (max-width: 768px) {
    .scv-hero { padding: 90px 0 50px 0; min-height: auto; }
    .group-logo-scv { max-width: 180px; }
    .founders-grid-scv { flex-direction: column; align-items: center; }
    .founder-profile-scv.main-founder, .founder-profile-scv.co-founder { flex-basis: auto; width: 90%; max-width: 280px;}
    .gallery-grid-scv { grid-auto-columns: minmax(160px, 1fr); }
    .gallery-nav-arrow-scv { width: 35px; height: 35px; font-size: 18px; padding: 6px 8px;}

    .hero-title-scv {
        font-size: clamp(2.8rem, 7vw, 4.5rem);
        margin-bottom: 0.1rem;
    }
    .hero-subtitle-scv {
        font-size: clamp(1.2rem, 3.8vw, 1.9rem);
        margin-top: 0.6rem;
        margin-bottom: 1.6rem;
    }
    .hero-description-scv {
        font-size: 1.05rem;
        margin-bottom: 2.2rem;
    }
    .btn.scv-hero-cta {
        padding: 0.85rem 2.2rem;
        font-size: 1.02rem;
    }

    .section-title {
        font-size: clamp(1.9rem, 4.2vw, 2.6rem);
        margin-bottom: 1.2rem;
    }
    .section-subtitle {
        font-size: 1.05rem;
        margin-bottom: 2.5rem;
    }

    .crepe-poster-container {
        width: 100%; /* Ensure it tries to fill available column width */
        max-width: min(400px, 85%); /* Responsive max-width */
        /* Centering handled by parent's align-items: center or its own margin:auto if needed */
    }
    .crepe-gallery-container {
        width: 100%; /* Ensure it tries to fill available column width */
        max-width: min(450px, 90%); /* Slightly wider or match poster: min(400px, 85%) */
         /* Centering handled by parent's align-items: center or its own margin:auto if needed */
    }
    .gallery-slider-container-scv {
        padding: 0 45px;
    }
    .gallery-item-scv img {
        height: 160px;
    }
    .gallery-nav-arrow-scv.prev-grid-arrow-scv {
        left: 5px;
    }
    .gallery-nav-arrow-scv.next-grid-arrow-scv {
        right: 5px;
    }

    .join-links-scv {
        gap: 0.8rem;
    }
    .btn.scv-join-btn {
        font-size: 0.98rem;
        padding: 0.85rem 1.8rem;
    }

    .btn.scv-final-cta-btn {
        padding: 0.9rem 2.5rem;
        font-size: 1.1rem;
    }
}

@media (max-width: 576px) {
    body {
        font-size: 0.95rem;
        line-height: 1.6;
    }
    .container {
        width: 95%;
    }

    .scv-hero {
        padding: 70px 0 40px 0;
    }
    .group-logo-scv {
        max-width: 150px;
    }
    .hero-title-scv {
        font-size: clamp(2.2rem, 8vw, 3.2rem);
        margin-top: -0.1em;
        margin-bottom: 0.1rem;
    }
    .hero-subtitle-scv {
        font-size: clamp(1.0rem, 4.5vw, 1.5rem);
        margin-top: 0.4rem;
        margin-bottom: 1.5rem;
    }
    .hero-description-scv {
        font-size: 0.95rem;
        margin-bottom: 2rem;
        max-width: 90%;
    }
    .btn.scv-hero-cta {
        padding: 0.8rem 1.8rem;
        font-size: 0.95rem;
    }

    .content-section {
        padding: 50px 0;
    }
    .section-title {
        font-size: clamp(1.7rem, 5.5vw, 2.2rem);
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
    }
    .section-title::after {
        width: 50px;
        height: 3px;
    }
    .section-subtitle {
        font-size: 0.95rem;
        margin-bottom: 2rem;
        max-width: 90%;
    }

    .about-text-scv p {
        font-size: 0.95rem;
    }
    .about-group-photo-scv {
        width: 100%;
    }
    .about-image-scv {
        min-width: unset;
    }
    .image-caption-scv {
        font-size: 0.85rem;
    }

    .founder-profile-scv {
        padding: 1.2rem 1rem;
    }
    .founder-profile-scv.main-founder, .founder-profile-scv.co-founder {
        width: 100%;
        max-width: 280px;
    }
    .founder-profile-scv img {
        width: 90px;
        height: 90px;
    }
    .founder-profile-scv.main-founder img {
        width: 110px;
        height: 110px;
    }
    .founder-profile-scv h4 { font-size: 1.05rem; }
    .founder-profile-scv.main-founder h4 {font-size: 1.2rem;}
    .founder-role { font-size: 0.85rem; }
    .founder-nuance-scv {
        font-size: 0.9rem;
        flex-direction: column;
        gap: 0.25rem;
        text-align: center;
    }

    .video-wrapper-scv {
        margin-top: 1.5rem;
    }

    .crepe-meetup-content {
        gap: 1.5rem;
    }
    .crepe-poster-container {
        width: 100%;
        max-width: 100%; /* Let it fill available space from parent .container */
        min-width: unset;
    }
    .crepe-gallery-container {
        width: 100%;
        /* max-width: 100%; /* Let it fill available space */
        min-width: unset;
    }
    .gallery-title-crepe {
        font-size: 1.3rem;
        margin-bottom: 1rem;
    }
    .gallery-slider-container-scv {
        padding: 0 40px;
    }
    .gallery-grid-scv {
        grid-auto-columns: minmax(140px, 1fr);
    }
     .gallery-item-scv img {
        height: 140px;
    }
    .gallery-nav-arrow-scv {
        width: 32px; height: 32px; font-size: 16px; padding: 4px 6px;
    }
    .gallery-nav-arrow-scv.prev-grid-arrow-scv {
        left: 4px;
    }
    .gallery-nav-arrow-scv.next-grid-arrow-scv {
        right: 4px;
    }

    .modal-content-scv {
        max-width: 95%;
        max-height: 75vh;
    }
    #caption-scv {
        font-size: 0.9rem;
    }
    .close-scv {
        font-size: 28px;
        top: 10px; right: 15px;
    }
    .prev-scv, .next-scv {
        padding: 8px 12px;
        font-size: 20px;
    }
    .prev-scv { left: 5px; }
    .next-scv { right: 5px; }

    .join-links-scv {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }
    .btn.scv-join-btn {
        width: 100%;
        max-width: 300px;
        font-size: 0.9rem;
        padding: 0.8rem 1.5rem;
        min-width: unset;
    }
    .btn.scv-join-btn i {
        margin-right: 0.4rem;
    }
    .community-snapshot-scv img {
        margin-top: 1.5rem;
    }

    .btn.scv-final-cta-btn {
        padding: 0.8rem 1.8rem;
        font-size: 1rem;
        width: 90%;
        max-width: 280px;
    }
    .btn.scv-final-cta-btn i {
        margin-right: 0.4rem;
    }
}

/* --- REVEAL ON SCROLL ANIMATIONS --- */
.scv-reveal-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scv-reveal-on-scroll.scv-visible {
    opacity: 1;
    transform: translateY(0);
}

.scv-reveal-on-scroll.delay-1 { transition-delay: 0.1s; }
.scv-reveal-on-scroll.delay-2 { transition-delay: 0.2s; }
.scv-reveal-on-scroll.delay-3 { transition-delay: 0.3s; }
.scv-reveal-on-scroll.delay-4 { transition-delay: 0.4s; }


/* Fallback for browsers that don't support IntersectionObserver well, or if JS fails */
.scv-reveal-on-scroll-fallback {
    opacity: 1;
    transform: translateY(0);
}

/* --- HERO PARALLAX BACKGROUND ADJUSTMENT --- */
.scv-hero {
    /* background-attachment: fixed; */
}