/*
|--------------------------------------------------------------------------
| ClubPortal Framework
|--------------------------------------------------------------------------
|
| Datei   : components.css
| Bereich : Framework
| Aufgabe : Wiederverwendbare UI-Komponenten
| Version : 0.6.0-alpha
| Autor   : Ralf Hohnbaum & ChatGPT
|
*/

/* ==========================================================================
   Container
   ========================================================================== */

.container{
    width:min(var(--content-width),92%);
    margin:0 auto;
}

.card{
    background:var(--color-surface);
    border-radius:var(--radius-medium);
    padding:1.5rem;
    box-shadow:var(--shadow-small);
}

.page-subtitle{
    color:var(--color-muted);
}

.button{
    border-radius:var(--radius-small);
}

.notice{
    border-radius:var(--radius-small);
    background:var(--color-surface);
}


/* ==========================================================================
   Badges
   ========================================================================== */

.badge{
    display:inline-block;

    padding:.3rem .8rem;

    border-radius:999px;

    font-size:.85rem;
}


/* ==========================================================================
   Hinweise
   ========================================================================== */

.notice{
    padding:1rem 1.2rem;

    border-left:5px solid #888;

    border-radius:8px;

    background:#f7f7f7;

    margin:1rem 0;
}


/* ==========================================================================
   Flex
   ========================================================================== */

.flex{
    display:flex;
}

.flex-between{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.flex-center{
    display:flex;
    justify-content:center;
    align-items:center;
}

.portal-form{

    display:grid;

    gap:1.25rem;

    margin-top:1rem;

    max-width:900px;

    padding:1.5rem;

    background:#fff;

    border:1px solid #e1e5eb;

    border-radius:14px;

box-shadow: 0 4px 14px rgba(0,0,0,.05);

}

.portal-form__field{

    display:grid;

    gap:.45rem;

}

.portal-form__label{

    font-weight:600;

    font-size:.92rem;

    color:#374151;

}

.portal-form__input{

    width:100%;

    padding:.75rem .9rem;

    border:1px solid #d7dce3;

    border-radius:10px;

    background:#fff;

    font-size:.95rem;

    transition:.15s;

    box-sizing:border-box;

}

.portal-form__input:focus{

    outline:none;

    border-color:#2f7cf6;

    box-shadow:0 0 0 3px rgba(47,124,246,.12);

}

.portal-form textarea{

    resize:vertical;

    min-height:120px;

}

.portal-form__actions{

    display:flex;

    justify-content:flex-end;

    gap:1rem;

    margin-top:1rem;

}

.portal-event-image{

    margin-top:1rem;

    margin-bottom:1.5rem;

}

.portal-event-image{
    margin-top:1rem;
    margin-bottom:1.5rem;
}

.portal-event-image img{
    display:block;

    width:100%;
    max-width:640px;

    max-height:360px;

    height:auto;

    border-radius:14px;

    object-fit:contain;
}


/* ==========================================================================
   Grid
   ========================================================================== */

.grid{
    display:grid;
    gap:1.5rem;
}

.portal-button{

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    text-decoration:none;

}

.portal-button--primary{}

.portal-button--secondary{}

.portal-button--danger{}

.portal-button--ghost{}