/* SECTION */
.workshop-section {
    padding: 100px 40px;
    text-align: center;
    background: #f5f5f5; /* light grey like your reference */
    border-radius: 12px;
}

/* HEADER */
.workshop-sub {
    font-size: 12px;
    letter-spacing: 2px;
    margin-bottom: 10px;
    color: #333;
}

.workshop-header h2 {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 80px;
}

/* STATS ROW */
.workshop-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
}

/* EACH BLOCK */
.stat {
    text-align: center;
}

/* SMALL LABEL */
.stat .label {
    font-size: 12px;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

/* BIG RED TEXT */
.stat h3 {
    font-size: 42px;
    color: #d60000;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
}

/* VERTICAL LINE */
.divider {
    width: 1px;
    height: 80px;
    background: rgba(0,0,0,0.2);
}

/* SECTION */
.workshop-about {
    display: flex;
    align-items: center;
    gap: 60px;
    padding: 80px 40px;
}

/* LEFT VIDEO */
.about-media {
    flex: 1;

    /* CONTROL HEIGHT */
    height: 420px; /* adjust: 380–450 depending on look */

    border-radius: 25px;
    overflow: hidden;
}

.about-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* RIGHT CONTENT */
.about-content {
    flex: 1;
    max-width: 600px;
}

/* SUB TEXT */
.about-sub {
    font-size: 12px;
    letter-spacing: 2px;
    margin-bottom: 15px;
    color: #333;
}

/* TITLE */
.about-content h2 {
    font-family: 'Playfair Display', serif;
    font-size: 44px;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 20px;
}

/* NORMAL TEXT */
.about-text {
    font-size: 14px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 15px;
}

/* ITALIC LINE */
.about-highlight {
    font-size: 14px;
    font-style: italic;
    color: #777;
    margin-bottom: 20px;
}
/* SECTION */
.workshop-module {
    margin: 40px;
    padding: 60px;
    background: #f3f3f3;
    border-radius: 30px;
}

/* LAYOUT */
.module-content {
    display: flex;
    align-items: center;
    gap: 60px;
}

/* LEFT */
.module-text {
    flex: 1;
}

/* RIGHT */
.module-image {
    flex: 1;

    /* FIX HEIGHT */
    aspect-ratio: 4 / 3; /* maintain aspect ratio */

    border-radius: 15px;
    overflow: hidden;
}
.module-image img {
    width: 100%;
    height: 100%; /* IMPORTANT */
    object-fit:fill; /* crop instead of stretch */
    transition: 0.5s ease;
    border-radius: 15px;
}
/* SUB */
.module-sub {
    font-size: 12px;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

/* TITLE */
.module-text h2 {
    font-family: 'Playfair Display', serif;
    font-size: 42px;
    margin-bottom: 20px;
}

/* DESC */
.module-text p {
    font-size: 14px;
    color: #666;
    line-height: 1.8;
}

/* TABS */
.module-tabs {
    margin-top: 40px;
    display: flex;
    gap: 20px;
    font-size: 14px;
}

/* DEFAULT TAB */
.tab {
    color: #aaa;
    cursor: pointer;
    transition: 0.3s;
}

/* ACTIVE TAB */
.tab.active {
    color: #000;
    font-weight: 500;
}
/* SECTION */
.upcoming {
    padding: 80px 40px;
    text-align: center;
}

/* HEADER */
.upcoming-header p {
    font-size: 14px;
    margin-bottom: 10px;
    color: #555;
}

.upcoming-header h2 {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    margin-bottom: 60px;
}

/* GRID */
.upcoming-grid {
    display: flex;
    justify-content: flex-start;
    gap: 80px;
    flex-wrap: wrap;
}

/* CARD */
.workshop-card {
    width: 320px;              /* FIXED WIDTH */
    text-align: left;
}

/* IMAGE BOX */
.card-img {
    width: 100%;
    height: 220px;             /* FIXED HEIGHT */
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 15px;
}

/* IMAGE */
.card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;         /* NO DISTORTION */
    display: block;
}

/* META */
.card-meta {
    font-size: 12px;
    color: #666;
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

/* TITLE */
.workshop-card h3 {
    font-size: 22px;
    margin-bottom: 5px;
}

/* LOCATION */
.location {
    font-size: 13px;
    color: #888;
    margin-bottom: 15px;
}

/* BUTTON */
.register-btn {
    background: #000;
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 14px;
    transition: 0.3s;
}

.register-btn:hover {
    background: #333;
}
/* SECTION */
.takeaways {
    padding: 80px 40px;
    text-align: center;
}

/* HEADER */
.takeaways-header p {
    font-size: 14px;
    margin-bottom: 10px;
    color: #555;
}

.takeaways-header h2 {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    margin-bottom: 10px;
}

.takeaways-header span {
    font-size: 14px;
    color: #777;
}

/* GRID */
.takeaways-grid {
    margin-top: 60px;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 50px 40px; /* vertical / horizontal */
}

/* CARD */
.takeaway-card {
    text-align: center;
}

/* IMAGE BOX */
.takeaway-img {
    width: 100%;
    height: 140px; /* LOCKED HEIGHT */
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 15px;
}

/* IMAGE */
.takeaway-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* TITLE */
.takeaway-card h3 {
    font-size: 18px;
    margin-bottom: 8px;
}

/* TEXT */
.takeaway-card p {
    font-size: 13px;
    color: #777;
    line-height: 1.6;
}
.quote-section {
    text-align: center;
    margin-top: 20px;
    padding: auto;  
}

/* ROTATING LOGO */
.quote-logo {
    width: 70px;
    margin: 0 auto 25px;
}

.quote-logo img {
    width: 100%;
    opacity:1;

    animation: rotateLogo 12s linear infinite;
}

/* ROTATION */
@keyframes rotateLogo {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* QUOTE TEXT */
.quote-text {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    line-height: 1.6;
    color: #222;
    font-weight: 600;
}

/* AUTHOR */
.quote-author {
    margin-top: 16px;
    font-size: 16px;
    color: #e53935;
    font-style: italic;
}
.quote-logo:hover img {
    animation-play-state: paused;
}
/* SECTION */
.mastermind {
    padding: auto;
    margin-top: -80px;
}

/* OUTER BOX */
.mastermind-box {
    display: flex;
    align-items: center;
    gap: 60px;

    background: #f3f3f3;
    padding: 40px;
    border-radius: 30px;
}

/* LEFT IMAGE */
.mastermind-media {
    flex: 1;

    /* LOCK FRAME */
    height: 500px;

    border-radius: 20px;
    overflow: hidden;
}

/* IMAGE */
.mastermind-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* RIGHT CONTENT */
.mastermind-content {
    flex: 1;
    max-width: 550px; /* PREVENT TEXT STRETCH */
}

/* SUB */
.mm-sub {
    font-size: 12px;
    letter-spacing: 2px;
    margin-bottom: 10px;
    color: #444;
}

/* TITLE */
.mastermind-content h2 {
    font-family: 'Playfair Display', serif;
    font-size: 42px;
    margin-bottom: 20px;
}

/* TEXT */
.mm-text {
    font-size: 14px;
    line-height: 1.8;
    color: #666;
    margin-bottom: 15px;
}
/* SECTION */
.classroom {
    padding: 40px 0px;
    margin-bottom: 0px;
}

/* TITLE */
.classroom-title {
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    margin-bottom: 30px;
}

/* SCROLL CONTAINER */
.video-scroll {
    display: flex;
    gap: 16px;

    overflow-x: auto;
    scroll-behavior: smooth;

    padding-left: 0px;   /* small controlled space */
    padding-right: 12px;

    scroll-snap-type: x mandatory;
}

/* HIDE SCROLLBAR (clean look) */
.video-scroll::-webkit-scrollbar {
    display: none;
}

/* VIDEO CARD */
.video-card {
    flex: 0 0 auto;

    width: 420px;
    aspect-ratio: 16 / 9;

    border-radius: 16px;
    overflow: hidden;
    background: #000;
}
/* VIDEO */
.video-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* SECTION */
.film-section {
    position: relative;

    width: 100vw;
    left: 50%;
    transform: translateX(-50%);

    margin: 100px 0;
}
/* TITLE */
.film-title {
    font-size: 38px;
    text-align: center;
    margin-bottom: 40px;
}

/* WRAPPER */
.film-strip-wrapper {
    width: 100%;
    overflow: hidden;
    background: linear-gradient(to bottom, #000, #111);
    padding: 20px 0;    
    border-radius: 12px;   /* space above/below images */
}

/* STRIP */
.film-strip {
    display: flex;
    gap: 16px;
    width: max-content;
    will-change: transform;
}

/* FRAME */
.film-frame {
    flex: 0 0 280px;
    height: 180px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
    background: #f5f5f5;
}

/* IMAGE */
.film-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.faq-section {
    margin: 120px 0;
    padding: 0 40px;
}

.faq-sub {
    text-align: center;
    letter-spacing: 2px;
    font-size: 14px;
    margin-bottom: 10px;
}

.faq-title {
    text-align: center;
    font-size: 42px;
    margin-bottom: 60px;
}

/* LIST */
.faq-list {
    max-width: 900px;
    margin: auto;
}

/* ITEM */
.faq-item {
    border-bottom: 1px solid #ddd;
    padding: 20px 10px;
    cursor: pointer;
    transition: 0.3s;
}

/* QUESTION ROW */
.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* TEXT */
.faq-question h4 {
    font-size: 16px;
    font-weight: 500;
}

/* HEART */
.faq-heart {
    color: red;
    font-size: 16px;
}

/* ANSWER */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    font-size: 14px;
    color: #555;
    transition: 0.4s ease;
    margin-top: 10px;
}

/* ACTIVE */
.faq-item.active {
    background: #f5f5f5;
}

.faq-item.active .faq-answer {
    max-height: 200px;
}
/* ================= RESPONSIVE SYSTEM ================= */

/* ===== TABLET (≤1024px) ===== */
@media (max-width: 1024px) {

    /* SECTION SPACING */
    .workshop-section,
    .workshop-about,
    .workshop-module,
    .upcoming,
    .takeaways {
        padding: 60px 20px;
    }

    /* HEADER */
    .workshop-header h2 {
        font-size: 34px;
        margin-bottom: 40px;
    }

    /* STATS */
    .workshop-stats {
        gap: 30px;
        flex-wrap: wrap;
    }

    .divider {
        display: none;
    }

    /* ABOUT */
    .workshop-about {
        flex-direction: column;
        gap: 30px;
    }

    .about-media {
        height: 300px;
    }

    .about-content h2 {
        font-size: 32px;
    }

    /* MODULE */
    .module-content {
        flex-direction: column;
        gap: 30px;
    }

    .module-text h2 {
        font-size: 30px;
    }

    /* UPCOMING */
    .upcoming-grid {
        gap: 30px;
    }

    .workshop-card {
        width: 260px;
    }

    /* TAKEAWAYS */
    .takeaways-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    /* MASTERMIND */
    .mastermind-box {
        flex-direction: column;
        gap: 30px;
    }

    .mastermind-media {
        height: 300px;
    }

    /* CLASSROOM */
    .video-card {
        width: 420px;
        height: 260px;
    }

    /* FILM STRIP */
    .film-frame {
        flex: 0 0 220px;
        height: 140px;
    }

    /* FAQ */
    .faq-title {
        font-size: 32px;
    }
}


/* ===== MOBILE (≤768px) ===== */
@media (max-width: 768px) {

    /* HEADER */
    .workshop-header h2 {
        font-size: 26px;
    }

    /* STATS STACK */
    .workshop-stats {
        flex-direction: column;
        gap: 20px;
    }

    .stat h3 {
        font-size: 30px;
    }

    /* ABOUT */
    .about-content h2 {
        font-size: 24px;
    }

    .about-text,
    .about-highlight {
        font-size: 13px;
    }

    /* MODULE */
    .module-text h2 {
        font-size: 24px;
    }

    .module-tabs {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    /* UPCOMING */
    .upcoming-grid {
        flex-direction: column;
        align-items: center;
    }

    .workshop-card {
        width: 100%;
        max-width: 320px;
    }

    /* TAKEAWAYS */
    .takeaways-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* QUOTE */
    .quote-text {
        font-size: 24px;
    }

    /* MASTERMIND */
    .mastermind-content h2 {
        font-size: 26px;
    }

    .mm-text {
        font-size: 13px;
    }

    /* CLASSROOM */
    .video-card {
        width: 300px;
        height: 200px;
    }

    /* FILM STRIP */
    .film-frame {
        flex: 0 0 180px;
        height: 120px;
    }

    /* FAQ */
    .faq-section {
        padding: 0 20px;
    }

    .faq-title {
        font-size: 26px;
    }

    .faq-question h4 {
        font-size: 14px;
    }
}


@media (max-width: 480px) {

    /* ===== GLOBAL ===== */
    section {
        margin-top: 28px;
    }

    .workshop-section,
    .workshop-module,
    .upcoming,
    .takeaways {
        padding: 20px 10px;   /* 🔥 reduced */
    }

    /* ===== HEADER ===== */
    .workshop-header {
        margin-bottom: 16px;
    }

    .workshop-header h2 {
        font-size: 20px;
        line-height: 1.3;
        margin-bottom: 12px;
    }

    .workshop-sub {
        font-size: 11px;
        letter-spacing: 1px;
    }

    /* ===== STATS ===== */
    .workshop-stats {
        gap: 12px;
    }

    .stat h3 {
        font-size: 20px;
    }

    /* ===== ABOUT ===== */
    .workshop-about {
        gap: 16px;
    }

    .about-media {
        border-radius: 12px;
        aspect-ratio: 16/9; /* taller on mobile */
    }

    .about-content h2 {
        font-size: 18px;
        margin-bottom: 8px;
    }

    .about-text,
    .about-highlight {
        font-size: 13px;
        line-height: 1.5;
    }

    /* ===== MODULE ===== */
    .workshop-module {
        padding: 18px 10px;
        border-radius: 12px;
        margin: 16px 6px;
    }

    .module-content {
        gap: 14px;
    }

    .module-text h2 {
        font-size: 18px;
        margin-bottom: 8px;
    }
    .module-image{
    max-height: 300px;
    width: 100%;
    }
    .module-text p {
        font-size: 13px;
        line-height: 1.5;
    }

    .module-tabs {
        margin-top: 14px;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .tab {
        font-size: 12px;
    }

    /* ===== UPCOMING ===== */
    .upcoming-header {
        margin-bottom: 16px;
    }

    .card-img {
        height: 170px;
        border-radius: 12px;
    }

    .workshop-card h3 {
        font-size: 16px;
    }

    .location {
        font-size: 13px;
    }

    .register-btn {
        padding: 10px 16px;
        font-size: 13px;
        border-radius: 20px;
    }

    /* ===== TAKEAWAYS (🔥 FIXED TO 2 GRID) ===== */
    .takeaways-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .takeaway-img {
        min-height: 160px;
        border-radius: 10px;
    }

    .takeaway-card h3 {
        font-size: 14px;
    }

    .takeaway-card p {
        font-size: 12px;
        line-height: 1.4;
    }

    /* ===== QUOTE ===== */
    .quote-section {
        margin-top: 28px;
    }

    .quote-text {
        font-size: 17px;
        line-height: 1.4;
    }

    .quote-author {
        font-size: 12px;
    }

    /* ===== MASTERMIND ===== */
    .mastermind {
        margin-top: 28px;
    }

    .mastermind-box {
        padding: 16px 10px;
        border-radius: 12px;
        gap: 14px;
    }

    .mastermind-media {
        height: 180px;
        border-radius: 12px;
    }

    .mastermind-content h2 {
        font-size: 18px;
    }

    .mm-text {
        font-size: 13px;
        line-height: 1.5;
    }

    /* ===== CLASSROOM ===== */
    .classroom {
        padding: 28px 10px;
    }

    .classroom-title {
        font-size: 20px;
        margin-bottom: 16px;
    }

    .video-card {
        width: 88vw;
        aspect-ratio: 16 / 9;
        border-radius: 12px;
    }

    /* ===== FILM STRIP ===== */
    .film-title {
        font-size: 20px;
        margin-bottom: 16px;
    }

    .film-frame {
        flex: 0 0 150px;   /* 🔥 bigger */
        height: 145px;
    }
    .film-frame img {
        object-fit: cover; /* 🔥 crop instead of contain */
    }

    /* ===== FAQ ===== */
    .faq-section {
        margin-top: 40px;
        padding: 0 10px;
    }

    .faq-title {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .faq-item {
        padding: 12px 6px;
    }

    .faq-question h4 {
        font-size: 14px;
    }

    .faq-answer {
        font-size: 13px;
        line-height: 1.5;
    }

}