/*
 * Miarto Studio – Komponenten
 *
 * Cards, Alerts, Badges.
 * Alle Werte referenzieren Design Tokens aus variables.css.
 */

/* ============================================================
 * CARDS
 * ============================================================ */

.ms-card {
    background:    var(--ms-bg);
    border:        1px solid var(--ms-border);
    border-radius: var(--ms-radius-lg);
    overflow:      hidden;
    display:       flex;
    flex-direction: column;
    transition:    box-shadow var(--ms-transition), transform var(--ms-transition);
}

.ms-card:hover {
    box-shadow: var(--ms-shadow-md);
    transform:  translateY( -2px );
}

/* ---- Card-Bild ---- */

.ms-card__image {
    position:    relative;
    overflow:    hidden;
    aspect-ratio: 16 / 9;
}

.ms-card__image img {
    display:     block;
    width:       100%;
    height:      100%;
    object-fit:  cover;
    transition:  transform 0.4s ease;
}

.ms-card:hover .ms-card__image img {
    transform: scale( 1.04 );
}

/* ---- Card-Körper ---- */

.ms-card__body {
    padding:        var(--ms-space-6);
    flex:           1;
    display:        flex;
    flex-direction: column;
}

/* ---- Card-Kategorie/Label ---- */

.ms-card__label {
    font-size:      0.75rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--ms-accent);
    margin-bottom:  var(--ms-space-2);
}

/* ---- Card-Titel ---- */

.ms-card__title {
    font-family:   var(--ms-font-heading);
    font-size:     1.25rem;
    font-weight:   700;
    color:         var(--ms-text);
    margin:        0 0 var(--ms-space-3);
    line-height:   1.3;
}

.ms-card__title a {
    color:           inherit;
    text-decoration: none;
}

.ms-card__title a:hover {
    color: var(--ms-accent);
}

/* ---- Card-Text ---- */

.ms-card__text {
    font-size:     0.9375rem;
    color:         var(--ms-text-subtle);
    line-height:   1.6;
    margin-bottom: var(--ms-space-5);
    flex:          1;
}

/* ---- Card-Footer ---- */

.ms-card__footer {
    padding:    var(--ms-space-4) var(--ms-space-6);
    border-top: 1px solid var(--ms-border);
    display:    flex;
    align-items: center;
    justify-content: space-between;
    gap:        var(--ms-space-3);
}

/* ---- Card-Variante: Horizontal ---- */

.ms-card--horizontal {
    flex-direction: row;
}

.ms-card--horizontal .ms-card__image {
    aspect-ratio: 1;
    width:        200px;
    flex-shrink:  0;
}

/* ---- Card-Variante: Dunkel ---- */

.ms-card--dark {
    background:   var(--ms-color-anthracite);
    border-color: transparent;
}

.ms-card--dark .ms-card__title,
.ms-card--dark .ms-card__text {
    color: rgba( 255, 255, 255, 0.9 );
}

.ms-card--dark .ms-card__text {
    color: rgba( 255, 255, 255, 0.65 );
}

/* ---- Card-Grid ---- */

.ms-card-grid {
    display:               grid;
    grid-template-columns: repeat( auto-fill, minmax( 300px, 1fr ) );
    gap:                   var(--ms-space-8);
}

/* ============================================================
 * ALERTS
 * ============================================================ */

.ms-alert {
    display:       flex;
    gap:           var(--ms-space-4);
    padding:       var(--ms-space-4) var(--ms-space-5);
    border-radius: var(--ms-radius-md);
    border-left:   4px solid;
    font-size:     0.9375rem;
    line-height:   1.6;
    margin-bottom: var(--ms-space-5);
}

.ms-alert__icon {
    flex-shrink: 0;
    margin-top:  2px;
}

.ms-alert__body p:last-child {
    margin-bottom: 0;
}

/* Varianten – Farben via Design Tokens (Dark Mode in variables.css) */

.ms-alert--info {
    background:   var(--ms-alert-info-bg);
    border-color: var(--ms-alert-info-border);
    color:        var(--ms-alert-info-text);
}

.ms-alert--success {
    background:   var(--ms-alert-success-bg);
    border-color: var(--ms-alert-success-border);
    color:        var(--ms-alert-success-text);
}

.ms-alert--warning {
    background:   var(--ms-alert-warning-bg);
    border-color: var(--ms-alert-warning-border);
    color:        var(--ms-alert-warning-text);
}

.ms-alert--error {
    background:   var(--ms-alert-error-bg);
    border-color: var(--ms-alert-error-border);
    color:        var(--ms-alert-error-text);
}

/* ============================================================
 * BADGES
 * ============================================================ */

.ms-badge {
    display:        inline-flex;
    align-items:    center;
    padding:        var(--ms-space-1) var(--ms-space-3);
    font-size:      0.6875rem;
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius:  var(--ms-radius-xl);
    white-space:    nowrap;
    line-height:    1.4;
}

/* Badge-Varianten */

.ms-badge--default {
    background: var(--ms-surface);
    color:      var(--ms-text-subtle);
}

.ms-badge--primary {
    background: var(--ms-color-anthracite);
    color:      var(--ms-color-white);
}

.ms-badge--gold {
    background: var(--ms-accent);
    color:      var(--ms-color-white);
}

.ms-badge--outline {
    background:  transparent;
    color:       var(--ms-text-subtle);
    border:      1px solid var(--ms-border);
}

/* ============================================================
 * FAQ – DETAILS / ACCORDION (core/details WP-Block)
 * ============================================================ */

.wp-block-details {
    border-bottom: 1px solid var( --ms-border );
    padding:       var( --ms-space-5 ) 0;
}

.wp-block-details summary {
    font-family:  var( --ms-font-heading );
    font-weight:  700;
    font-size:    var( --ms-font-size-lg );
    line-height:  1.4;
    cursor:       pointer;
    list-style:   none;
    display:      flex;
    align-items:  center;
    gap:          var( --ms-space-4 );
    color:        var( --ms-text );
    user-select:  none;
}

.wp-block-details summary::-webkit-details-marker {
    display: none;
}

.wp-block-details summary::after {
    content:     '+';
    font-family: var( --ms-font-body );
    font-size:   1.25rem;
    font-weight: 300;
    margin-left: auto;
    color:       var( --ms-accent );
    flex-shrink: 0;
    transition:  transform var( --ms-transition );
}

.wp-block-details[open] summary::after {
    content:   '−';
    transform: none;
}

.wp-block-details > *:not( summary ) {
    padding-top: var( --ms-space-3 );
    color:       var( --ms-text-subtle );
    line-height: 1.75;
}