/* --- File: ./app/static/css/pages/blog_overview.css --- */
/* Stile für die Blog-Übersicht */

/* Container für Steuerelemente (Suche, Anzahl, Ansicht) */
.blog-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.875rem;
    padding: 0.4rem 1rem;
    background-color: var(--box-bg-color);
    border-radius: 8px;
    box-shadow: 0 2px 5px var(--box-shadow-color);
    gap: 1rem;
}

/* Gruppen innerhalb der Leiste */
.blog-controls .search-control,
.blog-controls .posts-per-page-control,
.blog-controls .tag-cloud-toggle-control,
.blog-controls .view-switch-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Label für Kontrollgruppen */
.blog-controls .controls-label { color: var(--text-color-light); font-size: 0.9em; white-space: nowrap; margin-right: 3px; }

/* Suchfeld */
#blog-search { padding: 0.35rem 0.65rem; height: 30px; font-size: 0.85rem; background-color: var(--input-bg); color: var(--input-text); border: 1px solid var(--input-border-color); border-radius: 12px; flex-grow: 1; min-width: 150px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.2); font-family: inherit; box-sizing: border-box; }
#blog-search:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 4px var(--input-focus-shadow), inset 0 1px 3px rgba(0,0,0,0.3); }
#search-button { background: var(--btn-secondary-bg); border: 1px solid var(--border-color); color: var(--btn-secondary-text); padding: 0.35rem 0.65rem; height: 30px; border-radius: 12px; cursor: pointer; transition: background-color 0.2s; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }
#search-button:hover { background-color: var(--btn-secondary-hover-bg); color: var(--btn-secondary-text); }

/* Auswahl Posts pro Seite */
#posts-per-page { padding: 0.35rem 0.65rem; height: 30px; font-size: 0.85rem; background-color: var(--input-bg); color: var(--input-text); border: 1px solid var(--input-border-color); border-radius: 12px; cursor: pointer; font-family: inherit; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 1.8em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23cccccc'%3E%3Cpath fill-rule='evenodd' d='M4.22 6.22a.75.75 0 011.06 0L8 8.94l2.72-2.72a.75.75 0 111.06 1.06l-3.25 3.25a.75.75 0 01-1.06 0L4.22 7.28a.75.75 0 010-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.5em center; background-size: 1em auto; }
/* Pfeilfarbe im Light-Theme anpassen */
html[data-theme="light"] #posts-per-page {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23444444'%3E%3Cpath fill-rule='evenodd' d='M4.22 6.22a.75.75 0 011.06 0L8 8.94l2.72-2.72a.75.75 0 111.06 1.06l-3.25 3.25a.75.75 0 01-1.06 0L4.22 7.28a.75.75 0 010-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
#posts-per-page:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 4px var(--input-focus-shadow); }

/* Tag Cloud Toggle & Ansichtsumschalter Buttons */
#tag-cloud-toggle-btn,
.blog-controls .view-switch-control .view-switch-btn,
#search-button {
    background: var(--btn-secondary-bg); border: 1px solid var(--border-color); color: var(--text-color-light); padding: 0.35rem 0.65rem; height: 30px; font-size: 0.9rem; border-radius: 12px; cursor: pointer; transition: background-color 0.2s, color 0.2s, transform 0.1s; font-weight: bold; display: inline-flex; align-items: center; justify-content: center; line-height: 1; box-sizing: border-box; min-width: 30px; }
#tag-cloud-toggle-btn i,
.blog-controls .view-switch-control .view-switch-btn i,
#search-button i { margin: 0; width: 14px; text-align: center; vertical-align: middle; font-size: 1em; }
#tag-cloud-toggle-btn:hover,
.blog-controls .view-switch-control .view-switch-btn:hover,
#search-button:hover { background-color: var(--btn-secondary-hover-bg); color: var(--text-color); transform: translateY(-1px); }
#tag-cloud-toggle-btn.active,
.blog-controls .view-switch-control .view-switch-btn.active { background-color: var(--accent-color); color: var(--btn-primary-text); border-color: var(--accent-color); cursor: default; transform: none; }

/* Spezifische Overrides für das helle Theme für besseren Kontrast */
html[data-theme="light"] #tag-cloud-toggle-btn,
html[data-theme="light"] .blog-controls .view-switch-control .view-switch-btn,
html[data-theme="light"] #search-button {
    background-color: transparent;
    color: var(--text-color-light);
    border-color: var(--border-color);
}
html[data-theme="light"] #tag-cloud-toggle-btn:hover,
html[data-theme="light"] .blog-controls .view-switch-control .view-switch-btn:hover,
html[data-theme="light"] #search-button:hover {
    background-color: var(--table-row-even-bg);
    color: var(--text-color);
    border-color: var(--border-color-light);
}
html[data-theme="light"] #tag-cloud-toggle-btn.active,
html[data-theme="light"] .blog-controls .view-switch-control .view-switch-btn.active {
    background-color: var(--accent-color);
    color: var(--btn-primary-text);
    border-color: var(--accent-color);
}


/* Responsive Anpassung für die Controls */
@media (max-width: 880px) {
    .blog-controls { flex-direction: column; align-items: stretch; }
    .blog-controls .posts-per-page-control select { width: 100%; }
    .blog-controls .tag-cloud-toggle-control,
     .blog-controls .view-switch-control { justify-content: center; }
}


/* --- Styles für Grid, Cards etc. --- */

.blog-posts-container { display: grid; grid-template-columns: repeat(auto-fit, 256px); gap: 1.5rem; padding: 1.25rem 0; justify-content: center; }

.blog-post-card { background-color: var(--box-bg-color); border-radius: 0.75rem; overflow: hidden; box-shadow: 0 6px 12px var(--box-shadow-color); display: flex; flex-direction: column; text-decoration: none; color: var(--box-text-color); transition: transform 0.2s ease, box-shadow 0.2s ease; border: none; box-sizing: border-box; width: 256px; }
.blog-post-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px var(--box-shadow-color); text-decoration: none; }

.post-thumbnail-container {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    background-color: var(--input-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-color-light);
}
.post-thumbnail-container img.thumbnail { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-thumbnail-container.placeholder .icon-placeholder { color: var(--text-color-very-light); font-size: 3em; }

.blog-post-card .card-content { padding: 0.9375rem; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; min-height: 150px; box-sizing: border-box; }

.blog-post-card h2 { margin: 0 0 0.625rem 0; font-size: 1.3rem; color: var(--box-h2-color); border: none; padding: 0; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; min-height: calc(1.3em * 2); }
.blog-post-card:hover h2 { color: var(--link-hover-color); text-decoration: underline; }

.blog-post-card p.post-preview { margin: 0 0 0.625rem 0; font-size: 0.9rem; line-height: 1.5; color: var(--box-text-light); flex-grow: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

.blog-post-card .details { font-size: 0.8rem; color: var(--text-color-very-light); margin-top: auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; border-top: 1px solid var(--border-color-light); padding-top: 0.625rem; flex-shrink: 0; }
.blog-post-card .details span { white-space: nowrap; display: inline-flex; align-items: center; }
.blog-post-card .details i { margin-right: 4px; color: var(--text-color-very-light); width: 12px; text-align: center; }

/* Listenansicht-Modus */
.blog-posts-container.list-mode { display: flex; flex-direction: column; gap: 1rem; }
.blog-posts-container.list-mode .blog-post-card { flex-direction: row; height: auto !important; align-items: flex-start; gap: 1rem; padding: 0.75rem; box-sizing: border-box; width: 100%; }
.blog-posts-container.list-mode .post-thumbnail-container { width: 120px; height: 90px; border-bottom: none; border-right: 1px solid var(--border-color-light); flex-shrink: 0; border-radius: 0.375rem; align-self: center; }
.blog-posts-container.list-mode .post-thumbnail-container img.thumbnail { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-posts-container.list-mode .post-thumbnail-container.placeholder { min-height: 75px; height: 75px; }
.blog-posts-container.list-mode .post-thumbnail-container.placeholder .icon-placeholder { font-size: 2em; }
.blog-posts-container.list-mode .card-content { padding: 0; flex-grow: 1; justify-content: flex-start; min-height: 75px; height: auto; }
.blog-posts-container.list-mode h2 { margin-bottom: 0.5rem; font-size: 1.3rem; -webkit-line-clamp: unset; min-height: initial; }
.blog-posts-container.list-mode p.post-preview { font-size: 0.9rem; margin-bottom: 0.75rem; -webkit-line-clamp: 4; }
.blog-posts-container.list-mode .details { margin-top: auto; padding-top: 0.5rem; border-top: 1px solid var(--border-color-light); justify-content: flex-start; gap: 1rem; }

/* Leere Nachricht */
.no-data-msg#no-posts-message { text-align: center; margin-top: 3rem; color: var(--text-color-light); font-style: italic; grid-column: 1 / -1; width: 100%; }

/* Styling für Entwurf-Karten */
html[data-theme="dark"] .blog-post-card.post-draft-card { opacity: 0.7; border-left: 3px solid #ffcc80; }
html[data-theme="light"] .blog-post-card.post-draft-card { opacity: 0.8; border-left: 3px solid #ffa000; background-color: #fff3e0; }

/* Skeleton Loading für Blog-Karten */
@keyframes skeleton-pulse {
  0% { background-color: var(--input-bg); }
  50% { background-color: var(--box-border-color); }
  100% { background-color: var(--input-bg); }
}

.blog-post-card.skeleton {
    cursor: progress;
    pointer-events: none;
}
.blog-post-card.skeleton:hover {
    transform: none;
    box-shadow: 0 6px 12px var(--box-shadow-color);
}
.blog-post-card.skeleton .post-thumbnail-container {
    animation: skeleton-pulse 1.8s ease-in-out infinite;
}
.blog-post-card.skeleton .skeleton-text {
    background-color: var(--input-bg);
    border-radius: 4px;
    animation: skeleton-pulse 1.8s ease-in-out infinite;
    color: transparent;
    user-select: none;
}
.blog-post-card.skeleton h2 .skeleton-text {
    width: 80%;
    height: 1.3rem;
    margin-bottom: 0.8rem;
}
.blog-post-card.skeleton p.post-preview .skeleton-text {
    height: 0.9rem;
    margin-bottom: 0.5rem;
}
.blog-post-card.skeleton p.post-preview .skeleton-text:last-child {
    width: 60%;
}
.blog-post-card.skeleton .details .skeleton-text {
    width: 80px;
    height: 0.8rem;
}

/* Skeleton im Listenmodus */
.blog-posts-container.list-mode .blog-post-card.skeleton {
    align-items: center;
}
.blog-posts-container.list-mode .blog-post-card.skeleton .post-thumbnail-container {
    width: 120px;
    height: 90px; /* 4:3 ratio for 120px width */
    min-height: 90px;
}
.blog-posts-container.list-mode .blog-post-card.skeleton .card-content {
    justify-content: space-between;
}