/* ==========================================
   Southbound Cross Training Studio

   Colors/fonts come from css/style.css (loaded first on every
   page) — this file only adds Cross Training-specific layout.
========================================== */

:root{

    --transition:.25s ease;

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

    padding:40px;

}

#ct-root{

    max-width:1250px;

    margin:auto;

}

/* ==========================================
   Hero
========================================== */

.ct-hero{

    background:

        linear-gradient(
            145deg,
            rgba(30,48,37,.96),
            rgba(17,30,23,.95)
        );

    border:1px solid var(--border);

    border-radius:28px;

    padding:36px 40px;

    margin-bottom:28px;

    box-shadow:var(--shadow);

    backdrop-filter:blur(18px);

    position:relative;

    overflow:hidden;

}

.ct-hero::before{

    content:"";
    position:absolute;
    top:-50px;
    right:-20px;
    width:230px;
    height:230px;
    background-image:url('../icons/icon-512.png');
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    opacity:.06;
    mix-blend-mode:screen;
    filter:saturate(.9) brightness(1.15);
    pointer-events:none;

}

.ct-eyebrow{

    display:inline-block;

    padding:8px 16px;

    border-radius:999px;

    background:rgba(201,173,132,.15);

    color:var(--primary-light);

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.18em;

    text-transform:uppercase;

    margin-bottom:16px;

}

.ct-title{

    font-size:2.4rem;

    font-weight:800;

    line-height:1.1;

    margin-bottom:10px;

}

.ct-sub{

    color:var(--muted);

    line-height:1.6;

    font-size:1rem;

    max-width:600px;

}

.ct-stats-row{

    display:grid;

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

    gap:18px;

    margin-top:28px;

}

.ct-stat{

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

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

    border-radius:18px;

    padding:20px;

    transition:var(--transition);

}

.ct-stat:hover{

    transform:translateY(-4px);

    border-color:rgba(201,173,132,.4);

}

.ct-stat-val{

    font-size:1.7rem;

    font-weight:800;

    color:white;

    margin-bottom:6px;

}

.ct-stat-label{

    color:var(--muted);

    font-size:.75rem;

    letter-spacing:.06em;

    text-transform:uppercase;

}

/* ==========================================
   Toolbar
========================================== */

.ct-toolbar{

    display:flex;

    align-items:center;

    gap:14px;

    flex-wrap:wrap;

    margin-bottom:20px;

}

.ct-search{

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

    border:1px solid var(--border);

    color:white;

    border-radius:12px;

    padding:12px 16px;

    font-size:.9rem;

    min-width:220px;

    flex:1;

}

.ct-search:hover{

    border-color:rgba(201,173,132,.35);

}

.ct-search:focus{

    outline:none;

    border-color:var(--primary);

    background:rgba(201,173,132,.08);

}

.ct-filter-chips{

    display:flex;

    gap:8px;

    flex-wrap:wrap;

}

.ct-filter-chip{

    appearance:none;

    border:1px solid var(--border);

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

    color:var(--muted);

    padding:9px 16px;

    border-radius:999px;

    font-size:.8rem;

    font-weight:600;

    cursor:pointer;

    transition:.2s;

    display:flex;

    align-items:center;

    gap:6px;

    white-space:nowrap;

}

.ct-filter-chip:hover{

    border-color:rgba(201,173,132,.4);

    color:white;

}

.ct-filter-chip.active{

    background:

        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    color:var(--on-primary);

    border-color:transparent;

}

.ct-new-btn{

    appearance:none;

    border:none;

    cursor:pointer;

    padding:12px 22px;

    border-radius:12px;

    font-size:.88rem;

    font-weight:700;

    color:var(--on-primary);

    background:

        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    box-shadow:0 12px 26px rgba(166,138,98,.30);

    transition:.2s;

    white-space:nowrap;

}

.ct-new-btn:hover{

    transform:translateY(-2px);

    box-shadow:0 16px 32px rgba(166,138,98,.40);

}

/* ==========================================
   Library Grid + Cards
========================================== */

.ct-library-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));

    gap:18px;

    margin-bottom:28px;

}

.ct-library-empty{

    display:none;

    text-align:center;

    color:var(--muted);

    padding:40px 20px;

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

    border:1px dashed rgba(255,255,255,.12);

    border-radius:20px;

    margin-bottom:28px;

    font-size:.92rem;

}

.ct-library-empty.visible{

    display:block;

}

.ct-card{

    background:

        linear-gradient(
            145deg,
            rgba(24,40,31,.96),
            rgba(17,30,23,.95)
        );

    border:1px solid var(--border);

    border-radius:20px;

    padding:22px;

    transition:var(--transition);

    animation:ctFadeUp .3s ease;

}

.ct-card:hover{

    transform:translateY(-4px);

    border-color:rgba(201,173,132,.4);

    box-shadow:0 15px 32px rgba(0,0,0,.3);

}

.ct-card-top{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:14px;

}

.ct-card-icon{

    width:40px;

    height:40px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.2rem;

    flex-shrink:0;

}

.ct-card-name{

    font-weight:700;

    font-size:1.05rem;

    line-height:1.3;

}

.ct-card-category{

    color:var(--muted);

    font-size:.72rem;

    text-transform:uppercase;

    letter-spacing:.06em;

}

.ct-card-meta{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

    margin-bottom:14px;

}

.ct-card-meta-chip{

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

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

    border-radius:999px;

    padding:5px 12px;

    font-size:.72rem;

    color:var(--muted);

    font-weight:600;

}

.ct-card-blocks{

    display:flex;

    flex-direction:column;

    gap:6px;

    margin-bottom:16px;

}

.ct-card-block-row{

    display:flex;

    justify-content:space-between;

    font-size:.8rem;

    color:var(--muted);

    padding:6px 10px;

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

    border-radius:8px;

}

.ct-card-block-row span:first-child{

    color:var(--text);

}

.ct-card-actions{

    display:flex;

    gap:8px;

    flex-wrap:wrap;

}

.ct-card-btn{

    appearance:none;

    border:1px solid var(--border);

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

    color:var(--muted);

    padding:8px 12px;

    border-radius:10px;

    font-size:.76rem;

    font-weight:600;

    cursor:pointer;

    transition:.2s;

    flex:1;

    text-align:center;

}

.ct-card-btn:hover{

    border-color:rgba(201,173,132,.4);

    color:white;

}

.ct-card-btn.ct-card-btn-primary{

    background:

        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    color:var(--on-primary);

    border-color:transparent;

}

.ct-card-btn.ct-card-btn-danger:hover{

    background:rgba(239,68,68,.15);

    border-color:rgba(239,68,68,.4);

    color:#fca5a5;

}

/* ==========================================
   Attach Panel
========================================== */

.ct-attach-panel{

    background:

        linear-gradient(
            145deg,
            rgba(24,40,31,.96),
            rgba(17,30,23,.95)
        );

    border:1px solid var(--border);

    border-radius:26px;

    padding:32px;

    box-shadow:var(--shadow);

}

.ct-panel-title{

    font-size:1.3rem;

    font-weight:800;

    margin-bottom:20px;

}

.ct-attach-field{

    margin-bottom:20px;

}

.ct-field-label{

    display:block;

    font-size:.75rem;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:var(--primary-light);

    font-weight:700;

    margin-bottom:10px;

    margin-top:16px;

}

.ct-field-label:first-child{

    margin-top:0;

}

.ct-select{

    width:100%;

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

    border:1px solid var(--border);

    color:white;

    border-radius:12px;

    padding:12px 14px;

    font-size:.9rem;

    cursor:pointer;

}

.ct-select:hover{

    border-color:rgba(201,173,132,.35);

}

.ct-select:focus{

    outline:none;

    border-color:var(--primary);

}

.ct-week-chips{

    display:flex;

    gap:8px;

    overflow-x:auto;

    padding-bottom:8px;

    scrollbar-width:none;

}

.ct-week-chips::-webkit-scrollbar{

    display:none;

}

.ct-week-chip{

    flex:0 0 auto;

    padding:10px 16px;

    border-radius:999px;

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

    border:1px solid var(--border);

    color:var(--muted);

    font-size:.8rem;

    font-weight:600;

    cursor:pointer;

    transition:.2s;

}

.ct-week-chip:hover{

    border-color:rgba(201,173,132,.4);

    color:white;

}

.ct-week-chip.active{

    background:

        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    color:var(--on-primary);

    border-color:transparent;

}

.ct-day-pills{

    display:grid;

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

    gap:8px;

}

.ct-day-pill{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:4px;

    padding:12px 6px;

    border-radius:14px;

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

    border:1px solid var(--border);

    color:var(--muted);

    font-size:.78rem;

    font-weight:700;

    cursor:pointer;

    transition:.2s;

}

.ct-day-pill:hover{

    border-color:rgba(201,173,132,.4);

    color:white;

}

.ct-day-pill.active{

    background:

        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    color:var(--on-primary);

    border-color:transparent;

}

.ct-day-pill-badge{

    font-size:.62rem;

    font-weight:600;

    color:var(--green);

    background:rgba(34,197,94,.15);

    border-radius:999px;

    padding:2px 6px;

}

.ct-day-pill.active .ct-day-pill-badge{

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

    color:white;

}

/* ==========================================
   Day Preview
========================================== */

.ct-day-preview{

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

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

    border-radius:18px;

    padding:20px;

    margin-top:6px;

}

.ct-preview-head{

    display:flex;

    justify-content:space-between;

    align-items:baseline;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:14px;

}

.ct-preview-week{

    font-weight:700;

    font-size:1rem;

}

.ct-preview-dates{

    color:var(--muted);

    font-size:.82rem;

}

.ct-preview-main{

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

    border-radius:12px;

    padding:12px 14px;

    margin-bottom:14px;

    font-size:.88rem;

    color:var(--muted);

}

.ct-preview-main strong{

    color:white;

}

.ct-preview-attached-title{

    font-size:.75rem;

    text-transform:uppercase;

    letter-spacing:.06em;

    color:var(--muted);

    margin-bottom:10px;

}

.ct-attached-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:rgba(201,173,132,.08);

    border:1px solid rgba(201,173,132,.2);

    border-radius:10px;

    padding:10px 12px;

    margin-bottom:8px;

    font-size:.82rem;

}

.ct-attached-item-info strong{

    color:white;

}

.ct-attached-item-info span{

    color:var(--muted);

    display:block;

    font-size:.75rem;

    margin-top:2px;

}

.ct-detach-btn{

    appearance:none;

    border:1px solid rgba(239,68,68,.3);

    background:rgba(239,68,68,.1);

    color:#fca5a5;

    border-radius:8px;

    padding:6px 10px;

    font-size:.72rem;

    cursor:pointer;

    transition:.2s;

    flex-shrink:0;

}

.ct-detach-btn:hover{

    background:#ef4444;

    color:white;

}

.ct-preview-empty{

    color:var(--muted);

    font-size:.82rem;

    font-style:italic;

}

/* ==========================================
   Attach Button + Error
========================================== */

.ct-attach-btn{

    appearance:none;

    border:none;

    cursor:pointer;

    width:100%;

    padding:16px;

    border-radius:14px;

    font-size:1rem;

    font-weight:700;

    margin-top:24px;

    color:var(--on-primary);

    background:

        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    box-shadow:0 12px 30px rgba(166,138,98,.30);

    transition:.25s;

}

.ct-attach-btn:hover{

    transform:translateY(-2px);

    box-shadow:0 18px 35px rgba(166,138,98,.40);

}

.ct-attach-error{

    margin-top:12px;

    color:#fca5a5;

    font-size:.85rem;

    min-height:1.1em;

}

.ct-attach-success{

    margin-top:12px;

    color:var(--green);

    font-size:.85rem;

    min-height:1.1em;

}

/* ==========================================
   Modal
========================================== */

.ct-modal-overlay{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(4,10,7,.7);

    backdrop-filter:blur(6px);

    z-index:100;

    align-items:center;

    justify-content:center;

    padding:20px;

}

.ct-modal-overlay.open{

    display:flex;

}

.ct-modal{

    background:

        linear-gradient(
            160deg,
            rgba(26,42,33,.98),
            rgba(14,26,20,.98)
        );

    border:1px solid var(--border);

    border-radius:24px;

    max-width:600px;

    width:100%;

    max-height:88vh;

    display:flex;

    flex-direction:column;

    box-shadow:0 30px 70px rgba(0,0,0,.5);

    animation:ctFadeUp .25s ease;

}

.ct-modal-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 26px;

    border-bottom:1px solid var(--border);

}

.ct-modal-title{

    font-size:1.15rem;

    font-weight:800;

}

.ct-modal-close{

    appearance:none;

    border:none;

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

    color:var(--muted);

    width:32px;

    height:32px;

    border-radius:10px;

    cursor:pointer;

    font-size:.9rem;

    transition:.2s;

}

.ct-modal-close:hover{

    background:rgba(239,68,68,.2);

    color:#fca5a5;

}

.ct-modal-body{

    padding:22px 26px;

    overflow-y:auto;

}

.ct-input,
.ct-textarea{

    width:100%;

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

    border:1px solid var(--border);

    color:white;

    border-radius:10px;

    padding:11px 14px;

    font-size:.9rem;

    font-family:inherit;

    margin-bottom:4px;

}

.ct-input:hover,
.ct-textarea:hover{

    border-color:rgba(201,173,132,.35);

}

.ct-input:focus,
.ct-textarea:focus{

    outline:none;

    border-color:var(--primary);

    background:rgba(201,173,132,.08);

}

.ct-textarea{

    resize:vertical;

}

.ct-category-chips{

    display:flex;

    gap:8px;

    flex-wrap:wrap;

    margin-bottom:6px;

}

.ct-category-chip{

    appearance:none;

    border:1px solid var(--border);

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

    color:var(--muted);

    padding:8px 14px;

    border-radius:999px;

    font-size:.78rem;

    font-weight:600;

    cursor:pointer;

    transition:.2s;

    display:flex;

    align-items:center;

    gap:6px;

}

.ct-category-chip:hover{

    border-color:rgba(201,173,132,.4);

    color:white;

}

.ct-category-chip.active{

    color:white;

    border-color:transparent;

}

/* ==========================================
   Blocks Builder (drag to reorder)
========================================== */

.ct-blocks-list{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-bottom:12px;

}

.ct-block-row{

    display:grid;

    grid-template-columns:20px 1.4fr 70px 100px 1.4fr 28px;

    gap:8px;

    align-items:center;

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

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

    border-radius:12px;

    padding:10px;

    transition:.15s;

}

.ct-block-row.ct-dragging{

    opacity:.4;

}

.ct-block-row.ct-drag-over{

    border-color:var(--primary);

    background:rgba(201,173,132,.08);

}

.ct-block-drag-handle{

    color:var(--muted);

    cursor:grab;

    text-align:center;

    font-size:.9rem;

    user-select:none;

}

.ct-block-input{

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

    border:1px solid transparent;

    color:white;

    border-radius:8px;

    padding:8px 10px;

    font-size:.82rem;

    width:100%;

    min-width:0;

}

.ct-block-input:hover{

    border-color:rgba(201,173,132,.3);

}

.ct-block-input:focus{

    outline:none;

    border-color:var(--primary);

}

.ct-block-select{

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

    border:1px solid transparent;

    color:white;

    border-radius:8px;

    padding:8px 6px;

    font-size:.78rem;

    width:100%;

}

.ct-block-remove{

    appearance:none;

    border:1px solid rgba(239,68,68,.3);

    background:rgba(239,68,68,.1);

    color:#fca5a5;

    border-radius:8px;

    width:28px;

    height:28px;

    cursor:pointer;

    font-size:.7rem;

    transition:.2s;

}

.ct-block-remove:hover{

    background:#ef4444;

    color:white;

}

.ct-add-block-btn{

    appearance:none;

    border:1px dashed rgba(201,173,132,.4);

    background:rgba(201,173,132,.08);

    color:var(--primary-light);

    border-radius:10px;

    padding:10px 16px;

    font-size:.82rem;

    font-weight:600;

    cursor:pointer;

    transition:.2s;

    margin-bottom:20px;

}

.ct-add-block-btn:hover{

    background:rgba(201,173,132,.16);

    border-color:var(--primary);

}

/* ==========================================
   Modal Footer
========================================== */

.ct-modal-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 26px;

    border-top:1px solid var(--border);

    flex-wrap:wrap;

    gap:12px;

}

.ct-modal-total{

    color:var(--primary-light);

    font-weight:700;

    font-size:.9rem;

    font-family:"JetBrains Mono",monospace;

}

.ct-modal-actions{

    display:flex;

    gap:10px;

}

.ct-btn-secondary,
.ct-btn-primary{

    appearance:none;

    border:none;

    cursor:pointer;

    padding:11px 20px;

    border-radius:12px;

    font-size:.85rem;

    font-weight:700;

    transition:.2s;

}

.ct-btn-secondary{

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

    color:var(--muted);

}

.ct-btn-secondary:hover{

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

    color:white;

}

.ct-btn-primary{

    color:var(--on-primary);

    background:

        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    box-shadow:0 10px 24px rgba(166,138,98,.3);

}

.ct-btn-primary:hover{

    transform:translateY(-2px);

}

/* ==========================================
   Animations
========================================== */

@keyframes ctFadeUp{

    from{

        opacity:0;

        transform:translateY(14px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================
   Scrollbars
========================================== */

::-webkit-scrollbar{

    width:10px;

    height:10px;

}

::-webkit-scrollbar-track{

    background:#0a150f;

}

::-webkit-scrollbar-thumb{

    background:#2e4a3a;

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary);

}

*{

    scrollbar-color:#2e4a3a #0a150f;

}

/* ==========================================
   Responsive
========================================== */

@media (max-width:900px){

    .ct-stats-row{

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

    }

}

@media (max-width:700px){

    body{

        padding:20px;

    }

    .ct-hero{

        padding:26px;

    }

    .ct-title{

        font-size:1.9rem;

    }

    .ct-library-grid{

        grid-template-columns:1fr;

    }

    .ct-block-row{

        grid-template-columns:1fr;

    }

    .ct-block-drag-handle{

        display:none;

    }

    .ct-day-pills{

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

    }

}

@media (max-width:480px){

    .ct-stats-row{

        grid-template-columns:1fr;

    }

    .ct-modal-footer{

        flex-direction:column;

        align-items:stretch;

    }

    .ct-modal-actions{

        justify-content:stretch;

    }

    .ct-modal-actions button{

        flex:1;

    }

}