/* ============================================================
   OVB24 PR Story Search – Stylesheet
   Version: 1.0.0
   ============================================================ */

/* ── Custom Properties ──────────────────────────────────────── */
.ovb24-pr-wrap {
    --pr-red:        #E30613;
    --pr-red-dark:   #b80510;
    --pr-bg:         #f4f5f7;
    --pr-surface:    #ffffff;
    --pr-border:     #e2e4e9;
    --pr-text:       #1a1d23;
    --pr-text-muted: #6b7280;
    --pr-text-light: #9ca3af;
    --pr-accent:     #2563eb;
    --pr-accent-bg:  #eff6ff;
    --pr-radius:     10px;
    --pr-radius-sm:  6px;
    --pr-shadow:     0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.05);
    --pr-shadow-lg:  0 4px 24px rgba(0,0,0,.10);
    --pr-font:       -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --pr-transition: 180ms ease;

    font-family:     var(--pr-font);
    color:           var(--pr-text);
    background:      var(--pr-bg);
    min-height:      100vh;
    padding:         0 0 60px;
    box-sizing:      border-box;
}

.ovb24-pr-wrap *, .ovb24-pr-wrap *::before, .ovb24-pr-wrap *::after {
    box-sizing: inherit;
}

/* ── Header ─────────────────────────────────────────────────── */
.ovb24-pr-header {
    background:    var(--pr-surface);
    border-bottom: 1px solid var(--pr-border);
    padding:       0 24px;
    position:      sticky;
    top:           0;
    z-index:       100;
}

.ovb24-pr-header__inner {
    max-width:      960px;
    margin:         0 auto;
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    height:         56px;
    gap:            16px;
}

.ovb24-pr-header__logo {
    display:     flex;
    align-items: center;
    gap:         10px;
}

.ovb24-pr-header__title {
    font-size:   15px;
    font-weight: 700;
    letter-spacing: -.2px;
    color:       var(--pr-text);
}

.ovb24-pr-header__badge {
    font-size:        11px;
    font-weight:      600;
    letter-spacing:   .5px;
    text-transform:   uppercase;
    color:            var(--pr-text-muted);
    background:       var(--pr-bg);
    border:           1px solid var(--pr-border);
    border-radius:    20px;
    padding:          3px 10px;
}

/* ── Suchleiste ─────────────────────────────────────────────── */
.ovb24-pr-search-bar {
    background:    var(--pr-surface);
    border-bottom: 1px solid var(--pr-border);
    padding:       20px 24px;
}

.ovb24-pr-search-bar__inner {
    max-width: 960px;
    margin:    0 auto;
}

.ovb24-pr-search-bar__field-wrap {
    position:      relative;
    display:       flex;
    align-items:   center;
}

.ovb24-pr-search-bar__icon {
    position:      absolute;
    left:          14px;
    color:         var(--pr-text-muted);
    pointer-events: none;
    flex-shrink:   0;
}

.ovb24-pr-search-bar__input {
    width:         100%;
    height:        48px;
    padding:       0 44px 0 46px;
    font-size:     16px;
    font-family:   var(--pr-font);
    color:         var(--pr-text);
    background:    var(--pr-bg);
    border:        2px solid var(--pr-border);
    border-radius: var(--pr-radius);
    outline:       none;
    transition:    border-color var(--pr-transition), box-shadow var(--pr-transition);
    -webkit-appearance: none;
    appearance:    none;
}

.ovb24-pr-search-bar__input:focus {
    border-color: var(--pr-red);
    box-shadow:   0 0 0 3px rgba(227,6,19,.12);
    background:   var(--pr-surface);
}

.ovb24-pr-search-bar__input::placeholder {
    color: var(--pr-text-light);
}

/* Clear-Button */
.ovb24-pr-search-bar__clear {
    position:      absolute;
    right:         12px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    width:         28px;
    height:        28px;
    border:        none;
    background:    transparent;
    color:         var(--pr-text-muted);
    border-radius: 50%;
    cursor:        pointer;
    transition:    background var(--pr-transition), color var(--pr-transition);
    padding:       0;
}

.ovb24-pr-search-bar__clear:hover {
    background: var(--pr-border);
    color:      var(--pr-text);
}

/* Meta-Zeile unter dem Suchfeld */
.ovb24-pr-search-bar__meta {
    margin-top:  8px;
    font-size:   13px;
    color:       var(--pr-text-muted);
    min-height:  18px;
}

.ovb24-pr-search-bar__meta strong {
    color: var(--pr-text);
}

/* ── Status / Spinner ───────────────────────────────────────── */
.ovb24-pr-status {
    display:        flex;
    align-items:    center;
    gap:            10px;
    max-width:      960px;
    margin:         24px auto 0;
    padding:        0 24px;
    font-size:      14px;
    color:          var(--pr-text-muted);
}

.ovb24-pr-spinner svg {
    animation: ovb24-spin 0.8s linear infinite;
    color:     var(--pr-red);
}

@keyframes ovb24-spin {
    to { transform: rotate(360deg); }
}

/* ── Ergebnisliste ──────────────────────────────────────────── */
.ovb24-pr-results {
    max-width: 960px;
    margin:    24px auto 0;
    padding:   0 24px;
    display:   flex;
    flex-direction: column;
    gap:       12px;
}

/* ── Empty State ────────────────────────────────────────────── */
.ovb24-pr-empty-state {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    padding:        60px 24px;
    text-align:     center;
    color:          var(--pr-text-muted);
    gap:            12px;
}

.ovb24-pr-empty-state svg {
    opacity: .35;
}

.ovb24-pr-empty-state p {
    margin:    0;
    font-size: 15px;
}

.ovb24-pr-empty-state__hint {
    font-size: 13px !important;
    color:     var(--pr-text-light);
}

/* ── Story-Karte ────────────────────────────────────────────── */
.ovb24-pr-card {
    background:    var(--pr-surface);
    border:        1px solid var(--pr-border);
    border-radius: var(--pr-radius);
    box-shadow:    var(--pr-shadow);
    overflow:      hidden;
    display:       flex;
    gap:           0;
    transition:    box-shadow var(--pr-transition), border-color var(--pr-transition);
    animation:     ovb24-card-in 220ms ease both;
}

.ovb24-pr-card:hover {
    box-shadow:    var(--pr-shadow-lg);
    border-color:  #c9cdd6;
}

@keyframes ovb24-card-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Thumbnail */
.ovb24-pr-card__thumb {
    flex-shrink:  0;
    width:        140px;
    min-height:   120px;
    overflow:     hidden;
    background:   var(--pr-bg);
    position:     relative;
}

.ovb24-pr-card__thumb img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform 300ms ease;
}

.ovb24-pr-card:hover .ovb24-pr-card__thumb img {
    transform: scale(1.04);
}

.ovb24-pr-card__thumb-placeholder {
    width:           100%;
    height:          100%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--pr-text-light);
    min-height:      120px;
}

/* Inhalt */
.ovb24-pr-card__body {
    flex:    1;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap:     8px;
    min-width: 0;
}

/* Kopfzeile: Typ-Badge + Datum */
.ovb24-pr-card__meta-top {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-wrap:   wrap;
}

.ovb24-pr-card__type-badge {
    font-size:      10px;
    font-weight:    700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color:          var(--pr-red);
    background:     #fff0f0;
    border:         1px solid #ffd0d0;
    border-radius:  4px;
    padding:        2px 7px;
    line-height:    1.6;
}

.ovb24-pr-card__date {
    font-size:  12px;
    color:      var(--pr-text-muted);
    margin-left: auto;
    white-space: nowrap;
}

/* Titel */
.ovb24-pr-card__title {
    margin:      0;
    font-size:   16px;
    font-weight: 700;
    line-height: 1.35;
    color:       var(--pr-text);
}

.ovb24-pr-card__title a {
    color:           inherit;
    text-decoration: none;
    transition:      color var(--pr-transition);
}

.ovb24-pr-card__title a:hover {
    color: var(--pr-red);
}

/* Excerpt */
.ovb24-pr-card__excerpt {
    font-size:   13.5px;
    color:       var(--pr-text-muted);
    line-height: 1.55;
    margin:      0;
    display:     -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:    hidden;
}

/* Permalink-Zeile */
.ovb24-pr-card__permalink-row {
    display:     flex;
    align-items: center;
    gap:         8px;
    margin-top:  2px;
    flex-wrap:   wrap;
}

.ovb24-pr-card__permalink {
    font-size:       12.5px;
    color:           var(--pr-accent);
    text-decoration: none;
    font-family:     "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    background:      var(--pr-accent-bg);
    border:          1px solid #bfdbfe;
    border-radius:   var(--pr-radius-sm);
    padding:         3px 8px;
    overflow:        hidden;
    text-overflow:   ellipsis;
    white-space:     nowrap;
    max-width:       420px;
    transition:      background var(--pr-transition), border-color var(--pr-transition);
    display:         inline-block;
}

.ovb24-pr-card__permalink:hover {
    background:   #dbeafe;
    border-color: #93c5fd;
}

/* Copy-Button */
.ovb24-pr-copy-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           5px;
    font-size:     12px;
    font-weight:   600;
    color:         var(--pr-text-muted);
    background:    transparent;
    border:        1px solid var(--pr-border);
    border-radius: var(--pr-radius-sm);
    padding:       3px 10px;
    cursor:        pointer;
    transition:    all var(--pr-transition);
    white-space:   nowrap;
    font-family:   var(--pr-font);
}

.ovb24-pr-copy-btn:hover {
    background:   var(--pr-bg);
    border-color: #9ca3af;
    color:        var(--pr-text);
}

.ovb24-pr-copy-btn--copied {
    color:        #16a34a !important;
    border-color: #86efac !important;
    background:   #f0fdf4 !important;
}

/* Tags & Kategorien */
.ovb24-pr-card__taxonomy {
    display:  flex;
    gap:      5px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.ovb24-pr-card__tag {
    font-size:      11px;
    color:          var(--pr-text-muted);
    background:     var(--pr-bg);
    border:         1px solid var(--pr-border);
    border-radius:  20px;
    padding:        2px 8px;
    white-space:    nowrap;
}

.ovb24-pr-card__tag--cat {
    color:      #6d28d9;
    background: #f5f3ff;
    border-color: #ddd6fe;
}

/* ACF-Felder */
.ovb24-pr-card__acf {
    margin-top:  4px;
    display:     flex;
    flex-wrap:   wrap;
    gap:         4px 12px;
}

.ovb24-pr-card__acf-item {
    font-size: 11.5px;
    color:     var(--pr-text-muted);
}

.ovb24-pr-card__acf-item strong {
    color:       var(--pr-text);
    font-weight: 600;
}

/* Autor */
.ovb24-pr-card__author {
    font-size:  11.5px;
    color:      var(--pr-text-light);
    margin-top: auto;
    padding-top: 4px;
}

/* ── Trennlinie Ergebniszähler ──────────────────────────────── */
.ovb24-pr-results-header {
    max-width:   960px;
    margin:      20px auto 0;
    padding:     0 24px;
    display:     flex;
    align-items: center;
    gap:         12px;
}

.ovb24-pr-results-header__count {
    font-size:   13px;
    font-weight: 600;
    color:       var(--pr-text-muted);
}

.ovb24-pr-results-header__line {
    flex:        1;
    height:      1px;
    background:  var(--pr-border);
}

/* ── Pagination ─────────────────────────────────────────────── */
.ovb24-pr-pagination {
    max-width:  960px;
    margin:     24px auto 0;
    padding:    0 24px;
    text-align: center;
}

/* ── Buttons ────────────────────────────────────────────────── */
.ovb24-pr-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    font-size:     14px;
    font-weight:   600;
    font-family:   var(--pr-font);
    border-radius: var(--pr-radius-sm);
    padding:       9px 20px;
    cursor:        pointer;
    transition:    all var(--pr-transition);
    border:        none;
    outline:       none;
}

.ovb24-pr-btn--outline {
    background:   var(--pr-surface);
    border:       2px solid var(--pr-border);
    color:        var(--pr-text);
}

.ovb24-pr-btn--outline:hover {
    border-color: var(--pr-red);
    color:        var(--pr-red);
}

/* ── Zugangsverweigerung ────────────────────────────────────── */
.ovb24-pr-access-denied {
    max-width:   480px;
    margin:      60px auto;
    padding:     32px;
    text-align:  center;
    background:  #fff8f8;
    border:      1px solid #fecaca;
    border-radius: var(--pr-radius);
    color:       #991b1b;
    font-family: var(--pr-font);
}

/* ── Highlight (Suchbegriff) ────────────────────────────────── */
.ovb24-pr-highlight {
    background:    #fef9c3;
    color:         #713f12;
    border-radius: 2px;
    padding:       0 1px;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 640px) {
    .ovb24-pr-header__badge { display: none; }

    .ovb24-pr-card__thumb {
        width:      100px;
        min-height: 100px;
    }

    .ovb24-pr-card__permalink {
        max-width: 200px;
    }

    .ovb24-pr-card__body {
        padding: 12px 14px;
    }

    .ovb24-pr-card__title {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .ovb24-pr-card {
        flex-direction: column;
    }

    .ovb24-pr-card__thumb {
        width:      100%;
        height:     160px;
        min-height: unset;
    }
}