/**
 * CMS Feed – Public Stylesheet
 *
 * Prefix: .fd-
 * Design-Tokens werden via PHP :root{} inline injiziert.
 *
 * @package CMS_Feed
 */

/* -------------------------------------------------------------------------
 * Design Tokens (Fallbacks)
 * ---------------------------------------------------------------------- */
:root {
    --fd-primary:       #0891b2;
    --fd-accent:        #e0f2fe;
    --fd-hdr-from:      #0c4a6e;
    --fd-hdr-to:        #0891b2;
    --fd-hdr-title:     #ffffff;
    --fd-card-bg:       #ffffff;
    --fd-card-border:   #e2e8f0;
    --fd-radius:        10px;
    --fd-text:          #1e293b;
    --fd-text-muted:    #64748b;
    --fd-text-light:    #94a3b8;
    --fd-bg:            #f1f5f9;
    --fd-border:        #e2e8f0;
    --fd-shadow:        0 1px 4px rgba(0,0,0,.06);
    --fd-shadow-hover:  0 4px 16px rgba(0,0,0,.10);
    --fd-font:          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --fd-content-max:   var(--container-width, 1100px);
}

/* -------------------------------------------------------------------------
 * Base
 * ---------------------------------------------------------------------- */
.fd-body {
    margin: 0;
    padding: 0;
    font-family: var(--fd-font);
    color: var(--fd-text);
    background: var(--fd-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* -------------------------------------------------------------------------
 * Header
 * ---------------------------------------------------------------------- */
.fd-header {
    background: linear-gradient(135deg, var(--fd-hdr-from), var(--fd-hdr-to));
    color: var(--fd-hdr-title);
    width: min(calc(100% - 2rem), var(--fd-content-max));
    margin: 1.25rem auto 0;
    padding: 1.35rem clamp(1rem, 2vw, 1.5rem) 1.1rem;
    border-radius: var(--fd-radius);
    box-shadow: var(--fd-shadow);
}

.fd-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 30rem);
    grid-template-areas:
        "breadcrumb search"
        "title search"
        "desc search";
    align-items: start;
    column-gap: 1.5rem;
    row-gap: .2rem;
    max-width: none;
    margin: 0;
}

.fd-header__breadcrumb {
    grid-area: breadcrumb;
    margin-bottom: .5rem;
}

.fd-header__breadcrumb a {
    color: rgba(255,255,255,.75);
    text-decoration: none;
    font-size: .875rem;
    transition: color .2s;
}

.fd-header__breadcrumb a:hover {
    color: #fff;
}

.fd-header__title {
    grid-area: title;
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    font-weight: 700;
    margin: 0 0 .35rem;
    line-height: 1.2;
}

.fd-header__icon {
    margin-right: .25rem;
}

.fd-header__desc {
    grid-area: desc;
    font-size: .95rem;
    opacity: .85;
    margin: 0 0 .9rem;
    max-width: 62ch;
}

/* -------------------------------------------------------------------------
 * Suche
 * ---------------------------------------------------------------------- */
.fd-search {
    display: flex;
    grid-area: search;
    align-self: end;
    justify-self: end;
    width: min(100%, 30rem);
    max-width: 30rem;
    margin-top: 0;
}

.fd-search__input {
    flex: 1;
    padding: .625rem 1rem;
    border: 2px solid rgba(255,255,255,.25);
    border-right: none;
    border-radius: var(--fd-radius) 0 0 var(--fd-radius);
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: .95rem;
    outline: none;
    transition: border-color .2s, background .2s;
}

.fd-search__input::placeholder {
    color: rgba(255,255,255,.55);
}

.fd-search__input:focus {
    border-color: rgba(255,255,255,.5);
    background: rgba(255,255,255,.18);
}

.fd-search__btn {
    padding: .625rem .875rem;
    border: 2px solid rgba(255,255,255,.25);
    border-left: none;
    border-radius: 0 var(--fd-radius) var(--fd-radius) 0;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    transition: background .2s;
}

.fd-search__btn:hover {
    background: rgba(255,255,255,.25);
}

/* -------------------------------------------------------------------------
 * Main
 * ---------------------------------------------------------------------- */
.fd-main {
    width: min(calc(100% - 2rem), var(--fd-content-max));
    margin: 0 auto;
    padding: 1rem 0 1.5rem;
}

/* -------------------------------------------------------------------------
 * Bereich-Navigation
 * ---------------------------------------------------------------------- */
.fd-cat-nav {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--fd-border);
}

.fd-cat-nav__item {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .5rem 1rem;
    border-radius: var(--fd-radius);
    background: var(--fd-card-bg);
    border: 1px solid var(--fd-card-border);
    color: var(--fd-text);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 500;
    transition: all .2s;
}

.fd-cat-nav__item:hover {
    background: var(--fd-accent);
    border-color: var(--fd-primary);
    color: var(--fd-primary);
}

.fd-cat-nav__item--active {
    background: var(--fd-primary);
    border-color: var(--fd-primary);
    color: #fff;
}

.fd-cat-nav__item--active:hover {
    background: var(--fd-primary);
    color: #fff;
}

.fd-cat-nav__icon {
    font-size: 1.1rem;
}

/* -------------------------------------------------------------------------
 * Such-Hinweis
 * ---------------------------------------------------------------------- */
.fd-search-hint {
    background: var(--fd-accent);
    padding: .75rem 1rem;
    border-radius: var(--fd-radius);
    font-size: .875rem;
    color: var(--fd-text);
    margin-bottom: 1.5rem;
}

.fd-search-hint a {
    color: var(--fd-text-muted);
    text-decoration: none;
}

.fd-search-hint a:hover {
    color: var(--fd-primary);
}

/* -------------------------------------------------------------------------
 * Grid-Layout
 * ---------------------------------------------------------------------- */
.fd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

/* -------------------------------------------------------------------------
 * Listen-Layout
 * ---------------------------------------------------------------------- */
.fd-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.fd-list .fd-card {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 0;
}

.fd-list .fd-card__image {
    height: 100%;
    object-fit: cover;
    border-radius: var(--fd-radius) 0 0 var(--fd-radius);
}

.fd-list .fd-card__image-link {
    display: block;
    overflow: hidden;
    border-radius: var(--fd-radius) 0 0 var(--fd-radius);
}

/* -------------------------------------------------------------------------
 * Magazin-Layout
 * ---------------------------------------------------------------------- */
.fd-magazine {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.fd-magazine .fd-card--hero {
    grid-column: 1 / -1;
}

.fd-magazine .fd-card--hero .fd-card__image {
    height: 280px;
}

.fd-magazine .fd-card--hero .fd-card__title {
    font-size: 1.35rem;
}

/* -------------------------------------------------------------------------
 * Feed-Card
 * ---------------------------------------------------------------------- */
.fd-card {
    background: var(--fd-card-bg);
    border: 1px solid var(--fd-card-border);
    border-radius: var(--fd-radius);
    overflow: hidden;
    transition: box-shadow .25s, transform .25s;
}

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

.fd-card--featured {
    border-color: var(--fd-primary);
    box-shadow: 0 0 0 1px var(--fd-primary);
}

.fd-card__image-link {
    display: block;
    overflow: hidden;
}

.fd-card__image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    transition: transform .3s;
}

.fd-card:hover .fd-card__image {
    transform: scale(1.03);
}

.fd-card__body {
    padding: 1rem 1.25rem 1.25rem;
}

.fd-card__badge {
    display: inline-block;
    background: #fef3c7;
    color: #92400e;
    font-size: .7rem;
    font-weight: 700;
    padding: .15rem .5rem;
    border-radius: 4px;
    margin-bottom: .5rem;
}

.fd-card__title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 .5rem;
}

.fd-card__title a {
    color: var(--fd-text);
    text-decoration: none;
    transition: color .2s;
}

.fd-card__title a:hover {
    color: var(--fd-primary);
}

.fd-card__excerpt {
    font-size: .875rem;
    color: var(--fd-text-muted);
    line-height: 1.6;
    margin: 0 0 .75rem;
}

.fd-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .75rem;
    font-size: .78rem;
    color: var(--fd-text-light);
}

.fd-card__source {
    font-weight: 600;
    color: var(--fd-primary);
}

.fd-card__date {
    white-space: nowrap;
}

.fd-card__author {
    font-style: italic;
}

/* -------------------------------------------------------------------------
 * Empty-State
 * ---------------------------------------------------------------------- */
.fd-empty {
    text-align: center;
    padding: 3rem 1rem;
}

.fd-empty__icon {
    font-size: 3rem;
    margin: 0 0 .5rem;
}

.fd-empty__text {
    color: var(--fd-text-muted);
    font-size: 1rem;
}

/* -------------------------------------------------------------------------
 * Paginierung
 * ---------------------------------------------------------------------- */
.fd-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .75rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--fd-border);
}

.fd-pagination__btn {
    display: inline-block;
    padding: .5rem 1rem;
    background: var(--fd-card-bg);
    border: 1px solid var(--fd-card-border);
    border-radius: var(--fd-radius);
    color: var(--fd-primary);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 500;
    transition: all .2s;
}

.fd-pagination__btn:hover {
    background: var(--fd-accent);
    border-color: var(--fd-primary);
}

.fd-pagination__info {
    font-size: .85rem;
    color: var(--fd-text-light);
}

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */
@media (max-width: 768px) {
    .fd-header {
        width: min(calc(100% - 1rem), var(--fd-content-max));
        margin-top: .75rem;
        padding: 1rem .95rem .9rem;
    }

    .fd-header__inner {
        grid-template-columns: 1fr;
        grid-template-areas:
            "breadcrumb"
            "title"
            "desc"
            "search";
        row-gap: .25rem;
    }

    .fd-header__title {
        font-size: 1.25rem;
    }

    .fd-main {
        width: min(calc(100% - 1rem), var(--fd-content-max));
        padding: .85rem 0 1.25rem;
    }

    .fd-grid {
        grid-template-columns: 1fr;
    }

    .fd-list .fd-card {
        grid-template-columns: 1fr;
    }

    .fd-list .fd-card__image-link {
        border-radius: var(--fd-radius) var(--fd-radius) 0 0;
    }

    .fd-list .fd-card__image {
        border-radius: var(--fd-radius) var(--fd-radius) 0 0;
        height: 180px;
    }

    .fd-magazine {
        grid-template-columns: 1fr;
    }

    .fd-magazine .fd-card--hero .fd-card__image {
        height: 200px;
    }

    .fd-search {
        justify-self: stretch;
        width: 100%;
        max-width: 100%;
        margin-top: .35rem;
    }

    .fd-cat-nav {
        gap: .35rem;
    }

    .fd-cat-nav__item {
        padding: .375rem .75rem;
        font-size: .8rem;
    }
}

@media (max-width: 480px) {
    .fd-header__desc {
        font-size: .9rem;
        margin-bottom: .75rem;
    }

    .fd-card__body {
        padding: .875rem 1rem 1rem;
    }

    .fd-card__title {
        font-size: .95rem;
    }

    .fd-card__image {
        height: 150px;
    }
}