/* =============================================================
    greatsuccess.dk — Brand palette
    ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&family=Roboto+Mono:wght@400;700&display=swap');

/* ── Design tokens ── */
:root {
    /* New brand palette */
    --primary:          #00B386; /* bright green */
    --primary-dark:     #004F3B; /* dark green */
    --dark:             #353534; /* primary text / dark gray */
    --muted:            #7F7D7B; /* muted gray */
    --white:            #FFFFFF;

    --bg:               var(--white);
    --card-bg:          var(--white);
    --text:             var(--dark);
    --text-muted:       var(--muted);
    --border:           #e6e5e5;
    --shadow:           none; /* remove glowing shadows */
    --shadow-hover:     none;
    --radius:           14px;
    --radius-sm:        8px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Roboto', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
    width: min(100% - 2rem, 1200px);
    margin-inline: auto;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
    background: linear-gradient(90deg, var(--primary-dark) 0%, var(--primary-dark) 100%);
    padding: 1rem 0;
    box-shadow: none;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; }

.logo {
    font-size: 1.75rem;
    font-weight: 900;
    color: var(--white);
    letter-spacing: -0.5px;
    line-height: 1;
}

.logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--primary-dark);
    border-radius: 8px;
    margin-right: 8px;
    vertical-align: middle;
    font-size: 1rem;
    font-weight: 900;
    color: var(--white);
    font-family: 'Roboto', sans-serif;
    letter-spacing: 0;
}

.tagline { color: rgba(255,255,255,0.85); font-size:0.78rem; margin-top:3px; font-weight:300; }

.admin-link { background: transparent; border: 2px solid var(--primary); color: var(--primary); padding: 0.42rem 1.1rem; border-radius:100px; font-size:0.8rem; font-weight:700; text-decoration:none; transition: background .18s, color .18s; letter-spacing:.6px; text-transform:uppercase; white-space:nowrap; }
.admin-link:hover{ background:var(--primary); color:var(--white); }

.hero h2 {
    font-size: 2.6rem;
    font-weight: 900;
    color: var(--dark);
    letter-spacing: -1.5px;
    line-height: 1.1;
}

.hero h2 .accent { color: var(--primary); }

.hero p { color: var(--text-muted); margin-top: .75rem; font-size: 1rem; max-width: 500px; margin-inline: auto; line-height: 1.6; }

.loop-badge { display: inline-block; background: transparent; color: var(--muted); font-family: 'Roboto Mono', monospace; font-size: 0.72rem; font-weight: 700; padding: .28rem .8rem; border-radius: 100px; margin-top: .9rem; letter-spacing: 1.5px; text-transform: uppercase; }

/* ============================================================
   SECTION HEADER (grid title row)
   ============================================================ */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.section-title { font-size:1.3rem; font-weight:900; color:var(--dark); letter-spacing:-0.3px; }

.section-title::after { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); vertical-align: middle; margin-left: 6px; margin-bottom: 2px; }

/* ============================================================
   CLIP GRID
   ============================================================ */
.clip-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    padding-bottom: 3rem;
}

.clip-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    transition: transform .15s;
}

.clip-card:hover { transform: translateY(-4px); }

.clip-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.clip-video { width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--dark); display:block; }

.clip-content {
    padding: .9rem 1rem 1rem;
}

.clip-content h3 { font-size: .95rem; font-weight: 700; color: var(--dark); margin-bottom: .25rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.meta { font-size: .75rem; color: var(--primary-dark); font-weight: 600; font-family: 'Roboto Mono', monospace; margin-bottom: .35rem; letter-spacing: .2px; }

.clip-content .clip-desc {
    font-size: .82rem;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
    margin-bottom: .5rem;
}

/* ── Tags ── */
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .5rem;
}

.tag { background: rgba(0,0,0,.04); color: var(--muted); font-size: .68rem; font-weight: 700; padding: .18rem .55rem; border-radius: 100px; letter-spacing: .25px; }

/* ── Empty state ── */
.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 1rem;
    color: var(--text-muted);
}

.empty-state h3 { font-size:1.4rem; font-weight:700; color:var(--dark); margin-bottom:.5rem; }

.empty-state p { font-size: .9rem; }

/* ============================================================
   SINGLE CLIP PAGE
   ============================================================ */
.single-clip-page { padding: 2rem 0 3rem; }

.single-clip-card { display: grid; grid-template-columns: 420px 1fr; gap: 0; background: var(--card-bg); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border); }

.single-video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--dark); display: block; }

.single-clip-content {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.single-clip-content h1 { font-size:1.9rem; font-weight:900; line-height:1.15; color:var(--dark); letter-spacing:-0.5px; }

.single-clip-content .meta { font-size: .85rem; }

.single-clip-content .description {
    color: var(--text-muted);
    line-height: 1.7;
    font-size: .93rem;
}

.category-badge {
    display: inline-block;
    background: var(--primary);
    color: var(--white);
    font-size: .72rem;
    font-weight: 700;
    padding: .25rem .75rem;
    border-radius: 100px;
    letter-spacing: .6px;
    text-transform: uppercase;
    align-self: flex-start;
}

.back-link {
    color: var(--muted);
    text-decoration: none;
    font-weight: 700;
    font-size: .88rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    transition: color .15s;
}

.back-link:hover { color: var(--primary); }

/* ============================================================
   FORMS & BUTTONS (shared: upload + login)
   ============================================================ */
.auth-page {
    flex: 1;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.auth-card, .upload-form-card { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 8px 40px rgba(0,0,0,.18); padding:2rem 2rem 2.25rem; width:100%; max-width:520px; display:flex; flex-direction:column; gap:.7rem; }

.auth-card { margin: 0 auto; }
.upload-form-card { margin: 0 auto; }

.auth-card h1 {
    font-size: 1.75rem;
    font-weight: 900;
    color: var(--primary);
    margin-bottom: .2rem;
}

.upload-form-card h2 {
    font-size: 1.45rem;
    font-weight: 900;
    color: var(--dark);
    margin-bottom: .2rem;
}

label {
    font-size: .82rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: .3px;
    margin-bottom: -.3rem;
}

input[type="text"],
input[type="password"],
input[type="number"],
textarea,
select {
    width: 100%;
    padding: .68rem .9rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: .93rem;
    color: var(--text);
    background: #fafafa;
    transition: border-color .18s, background .18s;
    outline: none;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary);
    background: #fff;
}

textarea { resize: vertical; }

input[type="file"] {
    padding: .55rem .7rem;
    border: 2px dashed var(--border);
    border-radius: var(--radius-sm);
    width: 100%;
    font-size: .87rem;
    background: #fafafa;
    cursor: pointer;
    transition: border-color .18s;
    font-family: inherit;
}

input[type="file"]:hover { border-color: var(--primary); }

button,
.btn {
    background: var(--primary);
    color: var(--white);
    border: none;
    padding: .78rem 1.5rem;
    border-radius: 100px;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    letter-spacing: .5px;
    text-transform: uppercase;
    transition: background .12s, transform .12s;
    font-family: inherit;
}

button:hover,
.btn:hover { background: var(--primary-dark); transform: translateY(-1px); }

button:active, .btn:active { transform: translateY(0); }

.btn-danger { background: #e74c3c; }
.btn-danger:hover { background: #c0392b; }

.btn-sm {
    padding: .35rem .85rem;
    font-size: .75rem;
}

/* ============================================================
   ADMIN PAGES
   ============================================================ */
.admin-page,
.admin-form-page { padding: 2rem 0 3rem; }

.admin-page-title { font-size:1.3rem; font-weight:900; color:var(--dark); margin-bottom:1.25rem; }

.admin-table-wrap { overflow-x:auto; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--border); }

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}

.admin-table th {
    padding: .85rem 1rem;
    background: var(--dark);
    color: var(--primary);
    text-align: left;
    font-size: .73rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    white-space: nowrap;
}

.admin-table td { padding:.85rem 1rem; border-bottom:1px solid var(--border); color:var(--text); vertical-align:middle; }

.admin-table tr:last-child td { border-bottom: none; }

.admin-table tr:hover td { background: rgba(0,0,0,.03); }

.admin-table .actions { display: flex; gap: .4rem; align-items: center; }

/* ─── Alerts ─── */
.alert,
.success {
    padding: .85rem 1rem;
    border-radius: var(--radius-sm);
    font-size: .88rem;
    font-weight: 500;
}

.alert { background: #fff4f4; color: #9f2f2f; border: 1px solid #f5c6c6; }
.success { background: #f2fff9; color: var(--primary-dark); border: 1px solid #cdeedb; }

/* ─── Small logo (admin header) ─── */
.small-logo { font-size: 1.2rem !important; font-weight: 900; color: var(--primary) !important; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--white); color: var(--muted); text-align: center; padding: 1.4rem 1rem; font-size: .78rem; margin-top: auto; letter-spacing: .3px; }
.site-footer .footer-accent { color: var(--primary); font-weight: 700; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .clip-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .single-clip-card { grid-template-columns: 1fr; }

    .single-video {
        aspect-ratio: 1 / 1;
        min-height: auto;
    }

    .single-clip-content { padding: 1.25rem; }

    .hero h2 { font-size: 1.9rem; }

    .logo { font-size: 1.45rem; }
}

@media (max-width: 560px) {
    .clip-grid { grid-template-columns: 1fr; }

    .header-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-actions { width: 100%; }

    .header-actions .admin-link { flex: 1 1 100%; text-align: center; }

    .admin-link { width: 100%; text-align: center; }

    button { width: 100%; }

    .upload-form-card,
    .auth-card { padding: 1.5rem; }
}