/* =====================================================
   DOAE RUN
   Public Team Gallery
   Part 1
   Reset + Layout
===================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Prompt',sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{

    background:#f5f7fb;

    color:#2d3436;

    font-size:15px;

    line-height:1.6;

}

/* =====================================================
   HEADER
===================================================== */

.header{

    background:
        linear-gradient(
            135deg,
            #6a11cb 0%,
            #2575fc 100%
        );

    color:#fff;

    padding:18px 28px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    box-shadow:
        0 8px 24px
        rgba(0,0,0,.12);

}

.header-left{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:24px;

    font-weight:700;

    letter-spacing:.3px;

}

.header-right{

    display:flex;

    align-items:center;

    gap:12px;

}

.public-badge{

    background:
        rgba(255,255,255,.18);

    color:#fff;

    padding:8px 18px;

    border-radius:30px;

    font-size:14px;

    font-weight:600;

    border:1px solid
        rgba(255,255,255,.25);

    backdrop-filter:blur(8px);

}

/* =====================================================
   CONTAINER
===================================================== */

.container{

    max-width:1200px;

    margin:30px auto;

    padding:0 18px;

}

/* =====================================================
   HERO
===================================================== */

.page-title{

    text-align:center;

    margin-bottom:30px;

}

.page-title h2{

    font-size:34px;

    font-weight:700;

    color:#1f2937;

    margin-bottom:10px;

}

.page-desc{

    color:#6b7280;

    font-size:16px;

}

.page-title::after{

    content:"";

    display:block;

    width:80px;

    height:4px;

    margin:18px auto 0;

    border-radius:20px;

    background:
        linear-gradient(
            90deg,
            #6a11cb,
            #2575fc
        );

}

/* =====================================================
   SECTION
===================================================== */

.section{

    margin-top:30px;

}

/* =====================================================
   CARD WRAPPER
===================================================== */

.card-wrapper{

    display:flex;

    flex-direction:column;

    gap:16px;

}

/* =====================================================
   SHADOW
===================================================== */

.shadow-soft{

    box-shadow:

        0 8px 24px
        rgba(0,0,0,.08);

}

/* =====================================================
   ANIMATION
===================================================== */

.fade-up{

    animation:fadeUp .45s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:
            translateY(18px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}
/* =====================================================
   SUMMARY
===================================================== */

.summary{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(240px,1fr));

    gap:18px;

    margin-bottom:32px;

}

.summary-card{

    position:relative;

    overflow:hidden;

    border-radius:22px;

    padding:22px 24px;

    color:#fff;

    transition:.25s;

    cursor:default;

    min-height:130px;

    box-shadow:
        0 12px 28px
        rgba(0,0,0,.10);

}

.summary-card:hover{

    transform:
        translateY(-5px);

    box-shadow:
        0 18px 34px
        rgba(0,0,0,.14);

}

/* ---------- ICON ---------- */

.summary-card::after{

    position:absolute;

    right:18px;

    top:12px;

    font-size:76px;

    font-weight:700;

    opacity:.10;

}

/* ---------- TITLE ---------- */

.summary-card small{

    display:block;

    font-size:14px;

    font-weight:500;

    opacity:.95;

    margin-bottom:8px;

}

/* ---------- VALUE ---------- */

.summary-card b{

    display:block;

    font-size:48px;

    line-height:1;

    font-weight:700;

    margin-top:10px;

}

/* =====================================================
   CARD COLORS
===================================================== */

.summary-total{

    background:
        linear-gradient(
            135deg,
            #ff9800,
            #ff6a00
        );

}

.summary-total::after{

    content:"👥";

}

.summary-team{

    background:
        linear-gradient(
            135deg,
            #6a11cb,
            #2575fc
        );

}

.summary-team::after{

    content:"🏁";

}

.summary-member{

    background:
        linear-gradient(
            135deg,
            #00c9a7,
            #00b894
        );

}

.summary-member::after{

    content:"✔";

}

.summary-notteam{

    background:
        linear-gradient(
            135deg,
            #ff4d4d,
            #d63031
        );

}

.summary-notteam::after{

    content:"✖";

}

/* =====================================================
   SUMMARY ANIMATION
===================================================== */

.summary-card::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:60%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            rgba(255,255,255,0),

            rgba(255,255,255,.20),

            rgba(255,255,255,0)

        );

    transition:.8s;

}

.summary-card:hover::before{

    left:130%;

}

/* =====================================================
   MOBILE
===================================================== */

@media(max-width:768px){

    .summary{

        grid-template-columns:
            repeat(2,1fr);

    }

    .summary-card{

        min-height:110px;

        padding:18px;

    }

    .summary-card b{

        font-size:36px;

    }

}

@media(max-width:520px){

    .summary{

        grid-template-columns:1fr;

    }

    .summary-card{

        min-height:auto;

    }

}
/* =====================================================
   TEAM CARD
===================================================== */

.card{

    background:#ffffff;

    border-radius:20px;

    padding:22px;

    margin-bottom:16px;

    border:1px solid #edf1f7;

    box-shadow:
        0 8px 24px rgba(0,0,0,.06);

    transition:
        transform .25s,
        box-shadow .25s;

}

.card:hover{

    transform:translateY(-3px);

    box-shadow:
        0 14px 32px rgba(0,0,0,.10);

}

/* =====================================================
   TOP AREA
===================================================== */

.top{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:18px;

    flex-wrap:wrap;

}

/* =====================================================
   TEAM TITLE
===================================================== */

.team-title{

    font-size:22px;

    font-weight:700;

    color:#1f2937;

    line-height:1.5;

}

.team-code{

    display:inline-block;

    margin-right:12px;

    padding:8px 16px;

    border-radius:30px;

    background:
        linear-gradient(
            135deg,
            #6a11cb,
            #2575fc
        );

    color:#fff;

    font-size:14px;

    font-weight:700;

    letter-spacing:.6px;

    box-shadow:
        0 6px 16px
        rgba(37,117,252,.30);

}

/* =====================================================
   TEAM DETAIL
===================================================== */

.team-sub{

    margin-top:10px;

    color:#6b7280;

    font-size:15px;

    line-height:1.9;

}

/* =====================================================
   BUTTON
===================================================== */

.btn-public{

    background:
        linear-gradient(
            135deg,
            #6a11cb,
            #8e2de2
        );

    color:#ffffff !important;

    border:none;

    border-radius:12px;

    padding:12px 22px;

    font-size:15px;

    font-weight:700;

    text-decoration:none;

    cursor:pointer;

    transition:.25s;

    box-shadow:
        0 8px 20px
        rgba(106,17,203,.30);

}

.btn-public:hover{

    background:
        linear-gradient(
            135deg,
            #7b1fe0,
            #9c4dff
        );

    color:#ffffff !important;

    transform:translateY(-2px);

    box-shadow:
        0 14px 30px
        rgba(106,17,203,.45);

}

/* =====================================================
   PROGRESS
===================================================== */

.progress{

    margin-top:18px;

    background:#edf2f7;

    border-radius:30px;

    overflow:hidden;

    height:8px;

}

.progress-bar{

    height:8px;

    border-radius:30px;

    transition:width .35s;

}

/* =====================================================
   LEADER
===================================================== */

.leader-public{

    margin-top:18px;

    padding:14px 16px;

    background:#f8fafc;

    border-left:4px solid #2563eb;

    border-radius:12px;

}

.leader-public strong{

    display:block;

    color:#1f2937;

    font-size:17px;

    margin-bottom:6px;

}

.leader-public small{

    color:#6b7280;

    font-size:14px;

}

/* =====================================================
   EMPTY
===================================================== */

.empty{

    background:#fff;

    border-radius:20px;

    padding:60px;

    text-align:center;

    color:#6b7280;

    border:1px solid #edf1f7;

    box-shadow:
        0 8px 24px rgba(0,0,0,.06);

}

.empty h3{

    font-size:26px;

    margin-bottom:10px;

}

.empty p{

    font-size:15px;

}

/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:768px){

    .card{

        padding:18px;

    }

    .top{

        flex-direction:column;

        align-items:flex-start;

    }

    .btn-public{

        width:100%;

        margin-top:12px;

    }

    .team-title{

        font-size:20px;

    }

}

@media(max-width:480px){

    .team-title{

        font-size:18px;

    }

    .team-code{

        display:block;

        margin-bottom:10px;

        margin-right:0;

        width:max-content;

    }

    .leader-public{

        padding:12px;

    }

}
/* =====================================================
   SEARCH (Sprint 2 Ready)
===================================================== */

.search-box{

    margin-bottom:22px;

}

.search-input{

    width:100%;

    padding:14px 18px;

    border:1px solid #dbe4f0;

    border-radius:14px;

    background:#fff;

    font-size:15px;

    transition:.25s;

    outline:none;

}

.search-input:focus{

    border-color:#2563eb;

    box-shadow:
        0 0 0 4px rgba(37,99,235,.12);

}

/* =====================================================
   FILTER BAR
===================================================== */

.filter-bar{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

    align-items:center;

    margin-bottom:24px;

}

.filter-select{

    padding:10px 14px;

    border:1px solid #dbe4f0;

    border-radius:12px;

    background:#fff;

    min-width:180px;

}

/* =====================================================
   MODAL
===================================================== */

.modal-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    display:none;

    align-items:center;

    justify-content:center;

    z-index:9999;

}

.modal-overlay.show{

    display:flex;

}

.modal-card{

    width:min(650px,95%);

    background:#fff;

    border-radius:20px;

    padding:24px;

    box-shadow:

        0 24px 60px rgba(0,0,0,.20);

    animation:modalShow .20s ease;

}

@keyframes modalShow{

    from{

        transform:translateY(20px);

        opacity:0;

    }

    to{

        transform:translateY(0);

        opacity:1;

    }

}

.modal-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:18px;

}

.modal-title{

    font-size:22px;

    font-weight:700;

}

.modal-close{

    background:none;

    border:none;

    cursor:pointer;

    font-size:26px;

}

/* =====================================================
   MEMBER LIST
===================================================== */

.member-list{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.member-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 14px;

    border:1px solid #eef2f7;

    border-radius:12px;

    background:#fafbfd;

}

.member-row strong{

    color:#1f2937;

}

.member-row small{

    color:#6b7280;

}

/* =====================================================
   BADGE
===================================================== */

.badge{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:5px 10px;

    border-radius:20px;

    font-size:12px;

    font-weight:600;

}

.badge-primary{

    background:#dbeafe;

    color:#1d4ed8;

}

.badge-success{

    background:#dcfce7;

    color:#15803d;

}

.badge-warning{

    background:#fef3c7;

    color:#b45309;

}

/* =====================================================
   FOOTER
===================================================== */

.footer{

    margin-top:40px;

    padding:20px;

    text-align:center;

    color:#94a3b8;

    font-size:14px;

}

/* =====================================================
   UTILITIES
===================================================== */

.text-center{

    text-align:center;

}

.mt-10{

    margin-top:10px;

}

.mt-20{

    margin-top:20px;

}

.mt-30{

    margin-top:30px;

}

.hidden{

    display:none !important;

}

/* =====================================================
   LOADING
===================================================== */

.loading{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

}

.spinner{

    width:38px;

    height:38px;

    border:4px solid #e5e7eb;

    border-top-color:#2563eb;

    border-radius:50%;

    animation:spin .8s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

/* =====================================================
   MOBILE
===================================================== */

@media(max-width:768px){

    .filter-bar{

        flex-direction:column;

        align-items:stretch;

    }

    .filter-select{

        width:100%;

    }

    .modal-card{

        padding:18px;

    }

    .member-row{

        flex-direction:column;

        align-items:flex-start;

        gap:6px;

    }

}