/* =========================================================
   Glory Community Church - Event
   Compact 4-column event dashboard
========================================================= */

.event-shell{
    width:100%;
    max-width:1540px;
    margin:0 auto;
    padding:34px 34px 58px;
    box-sizing:border-box;
}

/* ---------------------------------------------------------
   Member / guest panel
--------------------------------------------------------- */
.event-userbar{
    width:100%;
    margin:0 0 34px;
}

.event-member-panel{
    width:100%;
    box-sizing:border-box;
    padding:24px 28px 20px;
    border:1px solid #d9e2ee;
    border-radius:20px;
    background:linear-gradient(112deg,#eef6ff 0%,#f8f7fb 48%,#fff6ed 100%);
    box-shadow:0 8px 24px rgba(34,63,104,.08);
}

.event-user-main{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    min-height:32px;
    margin-bottom:18px;
    font-size:15px;
    color:#202936;
}

.event-user-main strong{
    font-size:18px;
    font-weight:700;
    letter-spacing:-.02em;
}

.event-user-main a{text-decoration:none}

.event-points{
    margin-left:4px;
    font-size:17px;
    font-weight:800;
    color:#b95f68;
}

.event-admin-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:5px 10px;
    border-radius:999px;
    background:#2367c4;
    color:#fff;
    font-size:11px;
    line-height:1;
    font-weight:700;
    box-shadow:0 3px 8px rgba(35,103,196,.18);
}

.event-mini-stats{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    width:100%;
}

.mini-card{
    min-height:94px;
    box-sizing:border-box;
    padding:16px 18px;
    border:1px solid rgba(130,150,175,.20);
    border-radius:16px;
    font-size:12px;
    line-height:1.45;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.62);
}

.mini-card:nth-child(1){background:linear-gradient(135deg,#edf5ff 0%,#f7fbff 100%)}
.mini-card:nth-child(2){background:linear-gradient(135deg,#f6efff 0%,#fbf8ff 100%)}
.mini-card:nth-child(3){background:linear-gradient(135deg,#edf9f6 0%,#f7fcfa 100%)}
.mini-card:nth-child(4){background:linear-gradient(135deg,#fff4e8 0%,#fffaf5 100%)}

.mini-card b{
    display:block;
    margin-bottom:5px;
    color:#263445;
    font-size:14px;
    font-weight:700;
}

.mini-card span{
    display:block;
    color:#5f6b78;
    font-size:12px;
}

.mini-card:nth-child(1) span{color:#2d6bc4}
.mini-card:nth-child(2) span{color:#7751b6}
.mini-card:nth-child(3) span{color:#287f7b}
.mini-card:nth-child(4) span{color:#b16a24}

.mini-bar{
    height:6px;
    margin-top:10px;
    overflow:hidden;
    border-radius:99px;
    background:rgba(118,137,160,.16);
}

.mini-bar i{
    display:block;
    height:100%;
    border-radius:99px;
    background:#4a83d2;
}

.mini-card:nth-child(4) .mini-bar i{background:#d18a42}

.event-exit-row{
    display:flex;
    justify-content:flex-end;
    width:100%;
    margin-top:14px;
    padding-top:13px;
    border-top:1px solid rgba(117,139,166,.16);
}

.event-exit-link{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:#55749a!important;
    text-decoration:none!important;
    font-size:12px;
}

.event-exit-link:hover{color:#2367c4!important}

.event-exit-icon{
    display:inline-flex;
    width:22px;
    height:22px;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(61,108,166,.25);
    border-radius:50%;
    background:rgba(255,255,255,.64);
    font-size:12px;
}

.event-user-main.guest{
    width:100%;
    justify-content:center;
    gap:10px;
    padding:18px 20px;
    box-sizing:border-box;
    border:1px solid #dce5f0;
    border-radius:16px;
    background:linear-gradient(110deg,#f0f6fd,#fff8f1);
    color:#5c6774;
}

.event-small-btn{
    padding:7px 13px;
    border:1px solid #d2dbe6;
    border-radius:20px;
    color:#374555;
    background:rgba(255,255,255,.70);
}

.event-small-btn.primary{
    background:#2367c4;
    color:#fff;
    border-color:#2367c4;
}

/* ---------------------------------------------------------
   Page heading
--------------------------------------------------------- */
.event-header{
    text-align:center;
    margin:22px 0 28px;
}

.event-header h1{
    margin:0 0 8px;
    color:#20242a;
    font-size:34px;
    line-height:1.25;
    letter-spacing:-.035em;
}

.event-header p{
    margin:0;
    color:#77808b;
    font-size:15px;
}

/* ---------------------------------------------------------
   Four compact game cards in one row
--------------------------------------------------------- */
.event-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:22px;
    width:100%;
}

.event-tile{
    min-width:0;
    overflow:hidden;
    border:1px solid #dfe5ec;
    border-radius:18px;
    background:#fff;
    box-shadow:0 8px 24px rgba(36,54,75,.07);
    transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}

.event-tile:hover{
    transform:translateY(-4px);
    border-color:#cfd9e6;
    box-shadow:0 15px 34px rgba(36,54,75,.12);
}

.event-card-visual{
    position:relative;
    height:218px;
    overflow:hidden;
    background:#eef2f6;
}

.event-card-visual img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .45s ease;
}

.event-tile:hover .event-card-visual img{transform:scale(1.035)}

.event-card-shade{
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(245,249,255,.97) 0%,rgba(245,249,255,.78) 47%,rgba(245,249,255,.18) 100%);
}

.quiz-card .event-card-shade{
    background:linear-gradient(90deg,rgba(249,244,255,.97) 0%,rgba(249,244,255,.80) 47%,rgba(249,244,255,.20) 100%);
}

.typing-card .event-card-shade{
    background:linear-gradient(90deg,rgba(240,250,248,.97) 0%,rgba(240,250,248,.80) 47%,rgba(240,250,248,.18) 100%);
}

.memory-card .event-card-shade{
    background:linear-gradient(90deg,rgba(255,247,238,.97) 0%,rgba(255,247,238,.80) 47%,rgba(255,247,238,.18) 100%);
}

.event-card-copy{
    position:absolute;
    z-index:2;
    left:22px;
    top:24px;
    width:62%;
}

.event-card-copy h2{
    margin:0 0 12px;
    color:#245fa7;
    font-size:25px;
    line-height:1.2;
    letter-spacing:-.035em;
}

.quiz-card .event-card-copy h2{color:#7650b4}
.typing-card .event-card-copy h2{color:#287f7b}
.memory-card .event-card-copy h2{color:#ae6827}

.event-card-copy p{
    margin:0;
    color:#49535e;
    font-size:13px;
    line-height:1.65;
    word-break:keep-all;
}

.event-card-footer{
    padding:0;
    background:rgba(255,255,255,.96);
}

.event-card-action{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:58px;
    box-sizing:border-box;
    padding:0 22px;
    border-top:1px solid #e3e8ee;
    color:#245fa7!important;
    text-decoration:none!important;
    font-size:14px;
    font-weight:700;
}

.quiz-card .event-card-action{color:#7650b4!important}
.typing-card .event-card-action{color:#287f7b!important}
.memory-card .event-card-action{color:#ae6827!important}

.event-card-arrow{
    font-size:23px;
    font-weight:400;
    transition:transform .2s ease;
}

.event-card-action:hover .event-card-arrow{transform:translateX(4px)}

.event-countdown{
    padding:10px 16px 12px;
    border-top:1px solid #edf0f3;
    background:#fbfcfd;
    color:#9a681d;
    font-size:11px;
    line-height:1.45;
    text-align:center;
}

.event-countdown strong{color:#8b5714}
.ended-note{color:#9b5555}
.is-locked .event-card-action{opacity:.55}
.is-locked .event-card-visual img{filter:saturate(.72)}

/* ---------------------------------------------------------
   Forms / admin / placeholder
--------------------------------------------------------- */
.event-form-wrap,.event-admin-wrap{
    max-width:620px;
    margin:45px auto 80px;
    padding:32px;
    border:1px solid #e5e5e5;
    border-radius:16px;
    background:#fff;
}
.event-form-wrap h2,.event-admin-wrap h2{margin-top:0}
.event-form-wrap label{display:block;margin:16px 0;font-weight:600;font-size:14px}
.event-form-wrap input{display:block;width:100%;box-sizing:border-box;margin-top:7px;padding:12px;border:1px solid #ddd;border-radius:8px}
.event-form-wrap button,.admin-save{width:100%;border:0;border-radius:8px;background:#2367c4;color:#fff;padding:13px;font-size:15px;font-weight:700;cursor:pointer}
.form-sub-link{display:block;text-align:center;margin-top:18px}
.admin-row{border:1px solid #eee;padding:16px;border-radius:10px;margin:14px 0}
.admin-row h3{margin:0 0 12px}.admin-row label{display:block;margin:8px 0}
.admin-row input[type=datetime-local]{padding:7px;border:1px solid #ddd;border-radius:6px}
.event-error{margin:0 0 15px;padding:12px 14px;background:#fff1f1;border:1px solid #f0caca;border-radius:8px;color:#a33;font-size:14px}
.event-placeholder{max-width:900px;margin:50px auto;padding:45px 30px;text-align:center;background:#fff;border:1px solid #e8e8e8;border-radius:16px}
.event-placeholder a{display:inline-block;margin-top:18px;padding:10px 18px;border-radius:24px;background:#2367c4;color:#fff;text-decoration:none}
.event-page-inner{max-width:1500px;margin:0 auto;padding:20px 32px 70px;box-sizing:border-box}

/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */
@media(max-width:1200px){
    .event-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .event-card-visual{height:230px}
}

@media(max-width:900px){
    .event-mini-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
    .event-user-main{justify-content:flex-start;flex-wrap:wrap}
}

@media(max-width:620px){
    .event-shell{padding:20px 14px 46px}
    .event-member-panel{padding:18px 15px 15px;border-radius:16px}
    .event-user-main{margin-bottom:13px}
    .event-user-main strong{font-size:16px}
    .event-mini-stats{grid-template-columns:1fr 1fr;gap:9px}
    .mini-card{min-height:86px;padding:13px 12px}
    .event-header{margin:22px 0 22px}
    .event-header h1{font-size:27px}
    .event-header p{font-size:14px}
    .event-grid{grid-template-columns:1fr;gap:16px}
    .event-card-visual{height:205px}
    .event-card-copy{left:20px;top:22px;width:65%}
    .event-card-copy h2{font-size:23px}
    .event-card-copy p{font-size:12.5px}
    .event-page-inner{padding:14px 14px 50px}
    .event-user-main.guest{justify-content:flex-start;flex-wrap:wrap}
}