/* ============================================================
   WOW THEME — ABOUT WOW PAGE STYLES
   ============================================================ */

/* HERO */
.aw-hero {
    background: var(--grad-primary);
    padding-block: var(--space-16);
    position: relative;
    overflow: hidden;
    text-align: center;
}
.aw-hero__glitter {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; opacity: 0.35;
    mix-blend-mode: screen; pointer-events: none;
}
.aw-hero__inner { position: relative; z-index: 1; }
.aw-hero__title {
    font-size: clamp(var(--text-5xl), 8vw, var(--text-7xl));
    color: var(--color-white);
    text-shadow: 2px 2px 0 rgba(4,42,93,0.3), 0 4px 16px rgba(4,42,93,0.25);
}
.label-accent--hero {
    font-family: var(--font-primary);
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: var(--text-base);
    color: var(--color-navy);
    margin-top: var(--space-2);
}

/* TAB NAV */
.aw-tabs {
    background: var(--color-white);
    border-bottom: 2px solid var(--color-navy-20);
    position: sticky; top: 72px; z-index: 50;
}
.aw-tabs__list {
    display: flex; list-style: none;
    padding: 0; margin: 0;
    overflow-x: auto; scrollbar-width: none;
}
.aw-tabs__list::-webkit-scrollbar { display: none; }
.aw-tabs__tab {
    flex-shrink: 0;
    padding: var(--space-4) var(--space-8);
    font-family: var(--font-primary);
    font-weight: 700; font-style: italic;
    text-transform: uppercase; letter-spacing: 0.06em;
    font-size: var(--text-sm); color: var(--color-navy-60);
    background: transparent; border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px; cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    white-space: nowrap;
}
.aw-tabs__tab:hover { color: var(--color-navy); }
.aw-tabs__tab.active { color: var(--color-navy); border-bottom-color: var(--color-navy); }

/* PANEL */
.aw-panel { display: none; }
.aw-panel.active { display: block; animation: panelFade 0.25s ease; }
@keyframes panelFade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── PANEL 1: WHAT IS WCS ─────────────────────────── */
.aw-wcs {
    overflow: hidden;
    padding-bottom: 0;
}
.aw-wcs__inner {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--space-12); align-items: end;
}
.aw-wcs__content {
    padding-bottom: var(--space-8);
}
.aw-wcs__heading {
    font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
    color: var(--color-navy); line-height: 1.0;
    margin-bottom: var(--space-5);
}
.aw-wcs__content p { color: var(--color-navy-80); line-height: 1.7; margin-bottom: var(--space-4); }
.aw-wcs__content p.aw-wcs__eyebrow,
p.aw-wcs__eyebrow {
    font-family: var(--font-primary); font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: var(--text-base); color: var(--color-navy-40);
    margin-bottom: var(--space-1);
    line-height: inherit;
}
.aw-wcs__photo-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    align-self: stretch;
}
.aw-wcs__blob {
    position: absolute;
    width: 860px; height: 860px;
    bottom: -280px; left: 60px;
    transform: none;
    background: var(--grad-yellow-pink) !important;
    border-radius: 62% 38% 46% 54% / 60% 44% 56% 40%;
    opacity: 0.7;
}
.aw-wcs__bokeh {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.35;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 0;
}
.aw-wcs__photo {
    position: relative; z-index: 1;
    width: 162%; height: auto; display: block;
    filter: drop-shadow(0 16px 48px rgba(4,42,93,0.15));
    max-height: 744px; object-fit: contain; object-position: bottom center;
    margin-top: auto;
    transform: scaleX(-1);
    margin-right: -100px;
}

/* Why We Love */
.aw-why__eyebrow {
    text-align: center; font-family: var(--font-primary);
    font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.12em; font-size: var(--text-base);
    color: var(--color-navy-60); margin-bottom: var(--space-1);
}
.aw-why__heading {
    text-align: center;
    font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
    color: var(--color-navy); margin-bottom: var(--space-10);
}
.aw-why__cards {
    display: grid; grid-template-columns: repeat(3, minmax(0, 200px));
    gap: var(--space-8);
    justify-content: center;
}
.aw-why__card {
    border-radius: var(--radius-lg);
    padding: var(--space-8) var(--space-6) var(--space-10);
    display: flex; flex-direction: column;
    align-items: center; gap: var(--space-5); text-align: center;
    box-shadow: 0 8px 32px rgba(4,42,93,0.15);
    margin-top: 40px;
    min-height: 280px;
    justify-content: flex-start;
}
.aw-why__card--blue    { background: var(--grad-primary); }
.aw-why__card--coral   { background: var(--grad-coral-peach); }
.aw-why__card--lavender{ background: var(--grad-blue-lavender); }
.aw-why__card p { color: var(--color-white); font-size: var(--text-lg); line-height: 1.6; font-weight: 600; margin-top: auto; margin-bottom: auto; }
.aw-why__icon-wrap {
    position: relative;
    width: 80px; height: 80px;
    margin-top: -80px;
    flex-shrink: 0;
}
.aw-why__icon-grad {
    position: absolute;
    inset: -8px;
    border-radius: var(--radius-full);
    opacity: 0.4;
}
.aw-why__icon-wrap--blue   .aw-why__icon-grad { background: var(--grad-primary); }
.aw-why__icon-wrap--coral  .aw-why__icon-grad { background: var(--grad-coral-peach); }
.aw-why__icon-wrap--lavender .aw-why__icon-grad { background: var(--grad-blue-lavender); }
.aw-why__icon-circle {
    position: relative; z-index: 1;
    width: 100%; height: 100%;
    border-radius: var(--radius-full);
    background: var(--color-white);
    box-shadow: var(--shadow-card-hover);
    display: flex; align-items: center; justify-content: center;
}
.aw-why__icon-placeholder {
    width: 32px; height: 32px;
    background: var(--color-navy-20);
    border-radius: var(--radius-sm);
}
.aw-why__icon-img {
    width: 36px; height: 36px;
    object-fit: contain;
}

/* CTA */
.aw-cta { background: var(--grad-primary); padding-block: var(--space-16); }
.aw-cta__card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card-hover);
    padding: var(--space-12) var(--space-10);
    max-width: 900px;
    margin-inline: auto;
    text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: var(--space-6);
}
.aw-cta__card .btn {
    margin-top: var(--space-4);
}
.aw-cta__eyebrow {
    font-family: var(--font-primary); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.12em;
    font-size: var(--text-base); color: var(--color-navy-60);
}
.aw-cta__heading {
    font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
    color: var(--color-navy);
}

/* ── PANEL 2: MEET THE TEAM ───────────────────────── */
.aw-instructors__heading {
    font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
    color: var(--color-navy); text-align: center;
    margin-bottom: var(--space-2);
}
.aw-instructors__sub {
    text-align: center; color: var(--color-navy-60);
    font-size: var(--text-base); margin-bottom: var(--space-10);
}
.aw-instructors__grid {
    display: grid; grid-template-columns: repeat(3,1fr);
    gap: var(--space-8);
}
.aw-instructor-tile {
    background: none; border: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center;
    gap: var(--space-3); padding: 0;
    transition: transform var(--transition-base);
}
.aw-instructor-tile:hover { transform: translateY(-4px); }
.aw-instructor-tile__photo {
    width: 100%; aspect-ratio: 1;
    border-radius: var(--radius-lg);
    overflow: hidden; box-shadow: var(--shadow-card-hover);
}
.aw-instructor-tile__img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: top center; display: block;
}
.aw-instructor-tile[data-instructor="gary"] .aw-instructor-tile__img {
    object-position: center 20%;
}
.aw-instructor-tile[data-instructor="chris"] .aw-instructor-tile__img {
    object-fit: cover;
    object-position: top center;
    transform: scale(1.15) translateY(2%);
}
.aw-instructor-tile__name {
    font-family: var(--font-primary); font-weight: 700;
    font-size: var(--text-xl); color: var(--color-navy);
    text-align: center;
}

/* Instructor Modal */
.aw-modal {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-6);
}
.aw-modal[hidden] { display: none; }
.aw-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(4,42,93,0.5);
    backdrop-filter: blur(4px);
}
.aw-modal__box {
    position: relative; z-index: 1;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-modal);
    max-width: 820px; width: 100%;
    max-height: 90vh; overflow-y: auto;
}
.aw-modal__close {
    position: absolute; top: var(--space-4); right: var(--space-4);
    width: 36px; height: 36px; border-radius: var(--radius-full);
    border: none; background: var(--color-navy-20);
    color: var(--color-navy); font-size: 1.25rem; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background var(--transition-fast);
    z-index: 2;
}
.aw-modal__close:hover { background: var(--color-navy); color: var(--color-white); }
.aw-modal__inner {
    display: grid; grid-template-columns: 260px 1fr;
    gap: 0;
}
.aw-modal__photo-col {
    display: flex; flex-direction: column;
    align-items: center; gap: var(--space-4);
    padding: var(--space-8);
    border-right: 1px solid var(--color-navy-20);
}
.aw-modal__photo-wrap {
    width: 100%; aspect-ratio: 3/4;
    border-radius: var(--radius-md); overflow: hidden;
}
.aw-modal__photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.aw-modal__links { display: flex; gap: var(--space-3); }
.aw-modal__link {
    width: 40px; height: 40px; border-radius: var(--radius-full);
    background: var(--color-navy); color: var(--color-white);
    display: flex; align-items: center; justify-content: center;
    transition: opacity var(--transition-fast);
    text-decoration: none;
}
.aw-modal__link:hover { opacity: 0.8; }
.aw-modal__content {
    padding: var(--space-8);
    display: flex; flex-direction: column; gap: var(--space-4);
}
.aw-modal__name {
    font-size: var(--text-4xl); color: var(--color-navy); line-height: 1.0;
}
.aw-modal__role { margin-bottom: var(--space-2); }
.aw-modal__bio { display: flex; flex-direction: column; gap: var(--space-4); }
.aw-modal__bio p { color: var(--color-navy-80); line-height: 1.7; }
.aw-modal__bio a { color: var(--color-navy); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* DJ Crew */
.aw-djs { background: var(--grad-blue-cyan); position: relative; overflow: hidden; }
.aw-djs__heading {
    text-align: center; font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
    color: var(--color-white);
    text-shadow: 2px 2px 0 rgba(4,42,93,0.3), 0 4px 16px rgba(4,42,93,0.25);
    margin-bottom: var(--space-10);
}
.aw-djs__grid {
    display: grid; grid-template-columns: repeat(3,1fr);
    gap: var(--space-8); max-width: 900px; margin-inline: auto;
}
.aw-dj-tile { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.aw-dj-tile__photo {
    width: 100%; aspect-ratio: 1; border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
}
.aw-dj-tile__img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: top center;
    display: block;
}
.aw-dj-tile__spotify {
    position: absolute; bottom: var(--space-2); right: var(--space-2);
    width: 36px; height: 36px;
    background: transparent;
    border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-white);
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.5));
    transition: transform var(--transition-fast), opacity var(--transition-fast);
    z-index: 2;
}
.aw-dj-tile__spotify svg { width: 24px; height: 24px; }
.aw-dj-tile__spotify:hover { transform: scale(1.15); opacity: 0.85; }
.aw-dj-tile__real-name {
    font-family: var(--font-primary); font-weight: 700; font-style: normal;
    text-transform: uppercase; letter-spacing: 0.06em;
    font-size: var(--text-base); color: var(--color-navy); text-align: center;
    margin-top: var(--space-2);
    margin-bottom: -4px;
}
.aw-dj-tile__name {
    font-family: var(--font-primary); font-weight: 800; font-style: italic;
    text-transform: uppercase; letter-spacing: 0.05em;
    font-size: var(--text-xl); color: var(--color-white); text-align: center;
    text-shadow: 1px 1px 0 rgba(4,42,93,0.4), 0 2px 8px rgba(4,42,93,0.3);
}

/* Ambassadors */
.aw-ambassadors { background: var(--color-white); position: relative; overflow: hidden; padding-bottom: 0; }
.aw-ambassadors__inner {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--space-12); align-items: end;
}
.aw-ambassadors__content {
    padding-bottom: var(--space-16);
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3);
}
.aw-ambassadors__heading {
    font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
    color: var(--color-navy); margin-bottom: var(--space-1);
}
.aw-ambassadors__content p { color: var(--color-navy-80); line-height: 1.7; }
.aw-ambassadors__photo-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    align-self: stretch;
}
.aw-ambassadors__blob {
    position: absolute;
    width: 820px; height: 820px;
    bottom: -300px; right: -280px;
    background: linear-gradient(135deg, #fae9a2, #ff9a5b) !important;
    border-radius: 38% 62% 54% 46% / 44% 60% 40% 56%;
    opacity: 0.85;
}
.aw-ambassadors__bokeh {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0.25;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 0;
}
.aw-ambassadors__photo {
    position: relative; z-index: 1;
    width: 190%; height: auto; display: block;
    filter: drop-shadow(0 16px 48px rgba(4,42,93,0.15));
    max-height: 780px; object-fit: contain; object-position: top center;
    margin-top: auto;
    margin-right: -120px;
    -webkit-mask-image: linear-gradient(to right, black 55%, transparent 90%);
    mask-image: linear-gradient(to right, black 55%, transparent 90%);
}

.aw-volunteers__form {
    text-align: center;
    padding: var(--space-10);
    margin-top: var(--space-8);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
}
.aw-volunteers__form-text {
    color: var(--color-navy-80);
    font-size: var(--text-lg);
    max-width: 480px;
    line-height: 1.6;
}

/* Volunteers */
.aw-volunteers { background: var(--grad-primary); }
.aw-volunteers__heading {
    text-align: center; font-size: clamp(var(--text-3xl),4vw,var(--text-5xl));
    color: var(--color-white);
    text-shadow: 2px 2px 0 rgba(4,42,93,0.3), 0 4px 16px rgba(4,42,93,0.25);
    margin-bottom: var(--space-4);
}
.aw-volunteers__sub {
    text-align: center; color: var(--color-navy-80);
    font-style: normal; font-weight: 400; max-width: 560px; margin-inline: auto;
    margin-bottom: var(--space-10); line-height: 1.6;
}
.aw-volunteers__cards {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--space-6); margin-bottom: var(--space-6);
}
.aw-volunteers__card h3 {
    font-size: var(--text-2xl); color: var(--color-navy);
    margin-bottom: var(--space-4);
}
.aw-volunteers__card ul {
    list-style: disc; padding-left: var(--space-8);
    display: flex; flex-direction: column; gap: var(--space-2);
    color: var(--color-navy-80); font-size: var(--text-sm); line-height: 1.6;
}
.aw-volunteers__form {
    padding: var(--space-8); min-height: 160px;
    display: flex; align-items: center; justify-content: center;
}

/* ── PANEL 3: CULTURE & SAFETY ────────────────────── */
.aw-tellsafe__heading {
    font-size: clamp(var(--text-3xl),5vw,var(--text-5xl));
    color: var(--color-navy); margin-bottom: var(--space-4);
}
.aw-tellsafe__sub {
    color: var(--color-navy-80); max-width: 500px; margin-inline: auto;
    line-height: 1.7; margin-bottom: var(--space-8);
}
.aw-tellsafe__ways-heading {
    font-size: var(--text-2xl); color: var(--color-navy);
    margin-bottom: var(--space-8);
}
.aw-tellsafe__ways {
    display: grid; grid-template-columns: repeat(3,1fr);
    gap: var(--space-6); text-align: left;
}
.aw-tellsafe__way-icon {
    width: 56px; height: 56px;
    background: var(--grad-primary);
    border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-white);
    margin-bottom: var(--space-4);
    margin-inline: auto;
}
.aw-tellsafe__way h4 {
    font-size: var(--text-lg); color: var(--color-navy);
    margin-bottom: var(--space-3);
    text-align: center;
}
.aw-tellsafe__way p { color: var(--color-navy-80); font-size: var(--text-sm); line-height: 1.6; text-align: center; }

/* Code of Conduct */
.aw-coc { background: var(--grad-blue-lavender); position: relative; overflow: hidden; }
.aw-coc__bokeh {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0.25;
    mix-blend-mode: screen;
    pointer-events: none;
}
.aw-coc__header {
    text-align: center; margin-bottom: var(--space-6); position: relative; z-index: 1;
}
.aw-coc__header h2 {
    color: var(--color-white);
    text-shadow: 2px 2px 0 rgba(4,42,93,0.3), 0 4px 16px rgba(4,42,93,0.25);
}
.aw-coc__intro {
    max-width: 720px; margin-inline: auto;
    color: var(--color-navy-80); line-height: 1.7; font-size: var(--text-base);
    margin-bottom: var(--space-10);
    text-align: center;
    position: relative; z-index: 1;
}
.aw-coc__card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card-hover);
    overflow: hidden;
    max-width: 720px;
    margin-inline: auto;
    position: relative; z-index: 1;
}
.aw-coc__list { display: flex; flex-direction: column; }
.aw-coc__item {
    display: grid; grid-template-columns: 60px 1fr;
    gap: var(--space-4); align-items: start;
    padding: var(--space-6) var(--space-8);
    border-radius: 0;
}
.aw-coc__item--alt { background: rgba(4,42,93,0.04); }
.aw-coc__icon-col { display: flex; justify-content: center; padding-top: 4px; }
.aw-coc__icon { width: 40px; height: 40px; }
.aw-coc__icon-img { width: 40px; height: 40px; object-fit: contain; }
.aw-coc__text h3 { font-size: var(--text-base); color: var(--color-navy); margin-bottom: var(--space-2); }
.aw-coc__text p { color: var(--color-navy-80); line-height: 1.7; margin-bottom: var(--space-2); font-size: var(--text-sm); }
.aw-coc__pledge { font-weight: 700; color: var(--color-navy) !important; }

/* RESPONSIVE */
@media (max-width: 900px) {
    .aw-wcs__inner, .aw-why__cards, .aw-ambassadors__inner,
    .aw-volunteers__cards, .aw-tellsafe__ways { grid-template-columns: 1fr; }
    .aw-instructors__grid { grid-template-columns: 1fr; }
    .aw-modal__inner { grid-template-columns: 1fr; }
    .aw-modal__photo-col { border-right: none; border-bottom: 1px solid var(--color-navy-20); }
    .aw-modal__photo-wrap { max-width: 200px; aspect-ratio: 1; margin-inline: auto; }
    .aw-wcs__content, .aw-ambassadors__content { padding-bottom: var(--space-8); }
    .aw-ambassadors__photo-wrap { min-height: 300px; }

    /* WCS blob — pushed well below text on mobile */
    .aw-wcs__blob {
        width: 600px; height: 600px;
        bottom: -330px; left: -40px;
    }
    /* Make the couple photo larger on mobile */
    .aw-wcs__photo {
        width: 130%;
        margin-right: -60px;
    }

    /* Fix 3: Why We Love cards — horizontal layout, more padding, condensed */
    .aw-why__card {
        padding: var(--space-6) var(--space-8);
        min-height: 0;
        flex-direction: row;
        align-items: center;
        gap: var(--space-5);
        text-align: left;
        margin-top: 20px;
    }
    .aw-why__icon-wrap {
        margin-top: 0;
        flex-shrink: 0;
    }
    .aw-why__card p {
        margin: 0;
    }

    /* Ambassadors blob — pushed well below text on mobile */
    .aw-ambassadors__blob {
        width: 600px; height: 600px;
        bottom: -370px; right: -180px;
    }
    .aw-ambassadors__photo {
        width: 160%;
        margin-right: -80px;
    }
}
@media (max-width: 600px) {
    .aw-djs__grid { grid-template-columns: repeat(2,1fr); }
    .aw-coc__item { grid-template-columns: 40px 1fr; }
    .aw-tabs__list {
        flex-direction: column;
        align-items: stretch;
        overflow-x: visible;
    }
    .aw-tabs__tab {
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-xs);
        border-bottom: 3px solid transparent;
        border-left: none;
        margin-bottom: 0;
        width: 100%;
        text-align: center;
    }
    .aw-tabs__tab.active {
        border-bottom-color: var(--color-navy);
        border-left-color: transparent;
        background: rgba(100, 180, 240, 0.15);
    }
    .aw-tabs { position: static; top: unset; overflow: visible; }
    .aw-tabs .container {
        max-width: 100%;
        padding-inline: 0;
    }
    .aw-tabs__list { overflow-x: visible; }
}

@media (max-width: 900px) {
    .aw-coc__header h2 {
        font-size: clamp(var(--text-4xl), 12vw, var(--text-6xl));
    }
}