/**
 * Article Card Component
 *
 * Single source of truth for post/article cards
 * Used on: homepage, search, archive, author, category pages
 *
 * @package MyChooz_Aesthetic
 * @version 0.0.1
 */

/* ═══════════════════════════════════════════════════════════════
   VARIABLES (inherit from parent or fallback)
   ═══════════════════════════════════════════════════════════════ */
:root {
    --card-bg: var(--hp-content, #ffffff);
    --card-border: var(--hp-border, #e5e7eb);
    --card-border-hover: var(--hp-border-hover, #d1d5db);
    --card-radius: var(--hp-radius-md, 8px);
    --card-text: var(--hp-text, #1a1a1a);
    --card-muted: var(--hp-muted, #6b7280);
    --card-primary: var(--hp-primary, #e71d1d);
    --card-transition: var(--hp-transition-normal, 150ms ease);
    --card-transition-slow: var(--hp-transition-slow, 300ms ease);
}

/* ═══════════════════════════════════════════════════════════════
   POSTS CONTAINER
   ═══════════════════════════════════════════════════════════════ */
.hp-posts {
    padding: 32px 0;
}

/* Posts grid - for PHP rendered pages (homepage) */
/* Only apply grid when directly containing .hp-post children */
.hp-posts__grid:not(.wp-block-query) {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Совпадает с --featured-gap в hp-featured__grid для единого ритма */
    gap: 18px;
}

/* Query wrapper should NOT be grid - just a flow container */
/* override: WP core block inline styles */
.wp-block-query.hp-posts__grid {
    display: block !important;
}

/* WordPress Query Loop grid - for block templates (archive, category) */
/* override: WP core block inline styles */
.wp-block-query .wp-block-post-template,
ul.wp-block-post-template {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
}

.wp-block-post-template > .wp-block-post,
ul.wp-block-post-template > li.wp-block-post {
    margin: 0 !important;
    width: 100% !important;
}

/* ═══════════════════════════════════════════════════════════════
   ARTICLE CARD
   ═══════════════════════════════════════════════════════════════ */
.hp-post {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--mca-card-shadow);
    transition: box-shadow var(--card-transition), border-color var(--card-transition);
}

.hp-post:hover {
    border-color: var(--card-border-hover);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* Image */
.hp-post__img {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
}

/* Badge стили едины: см. featured-grid.css .hp-fc__badge */

.hp-post__img a {
    display: block;
    width: 100%;
    height: 100%;
}

.hp-post__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--card-transition-slow);
}

.hp-post:hover .hp-post__img img {
    transform: scale(1.03);
}

/* Body */
.hp-post__body {
    padding: 13px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Meta (date, category) — −30% акцента (opacity 0.7), светло-серый тон */
.hp-post__meta {
    font-size: 11px;
    color: var(--mca-muted);
    opacity: 0.7;
    margin-bottom: 6px;
    text-align: center;
}

/* Убрать эмодзи в meta — WP core ставит img.emoji { display: inline !important }
   поэтому симметричный !important нужен. */
.hp-post__meta img.emoji {
    display: none !important;
}

/* Разделитель · с воздухом вокруг: "1 мес · Обзоры · Viktor I." */
.hp-post__meta-sep {
    margin: 0 4px;
}

.hp-post__meta a {
    color: var(--mca-muted);
    text-decoration: none;
}

.hp-post__meta a:hover {
    color: var(--card-muted);
}

/* Title */
.hp-post__title,
h2.hp-post__title.wp-block-post-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    flex: 1;
    color: var(--card-text);
    text-align: left;
    margin: 0;
}

.hp-post__title a {
    color: inherit;
    text-decoration: none;
}

.hp-post__title a:hover {
    color: var(--card-primary);
}

/* Footer (stats) */
.hp-post__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 8px 13px;
    border-top: 1px solid var(--card-border);
}

/* Stats (views, comments, likes) */
.hp-post__stats {
    display: flex;
    align-items: center;
    gap: 14px;
}

.hp-post__stat {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--mca-muted);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    text-decoration: none;
}

.hp-post__stat:hover {
    color: var(--card-text);
}

.hp-post__stat svg {
    width: 14px;
    height: 14px;
}

/* Vote buttons (like / dislike) */
.mca-like,
.mca-dislike {
    transition: color var(--card-transition);
}

.mca-like--liked {
    color: var(--card-primary);
}

.mca-like--liked .mca-vote__icon,
.mca-like--liked .mca-like__icon {
    fill: var(--card-primary);
    stroke: var(--card-primary);
}

.mca-dislike--disliked {
    color: var(--card-text);
}

.mca-dislike--disliked .mca-vote__icon {
    fill: var(--card-text);
    stroke: var(--card-text);
}

/* Empty state */
.hp-posts__empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--card-muted);
    padding: 40px;
}

/* Pagination inside grid (full width) */
.hp-posts__grid .wp-block-query-pagination {
    grid-column: 1 / -1;
    margin-top: 32px;
}

/* Load more button */
.hp-posts__more {
    text-align: center;
    margin-top: 32px;
}

.hp-posts__all-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--card-primary);
    text-decoration: none;
    transition: all var(--card-transition);
}

.hp-posts__all-link:hover {
    color: var(--card-text);
}

.hp-posts__all-link .hp-arrow {
    transition: transform 200ms ease;
}

.hp-posts__all-link:hover .hp-arrow {
    transform: translateX(4px);
}

/* Admin-only TODO reminder */
.hp-admin-todo {
    display: block;
    margin-top: 8px;
    padding: 4px 12px;
    font-size: 11px;
    color: var(--card-primary);
    border: 1px dashed var(--card-primary);
    border-radius: 4px;
    opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .hp-posts__grid,
    .wp-block-query .wp-block-post-template,
    ul.wp-block-post-template {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .hp-posts__grid,
    .wp-block-query .wp-block-post-template,
    ul.wp-block-post-template {
        grid-template-columns: 1fr !important;
    }
}

/* 480px: already 1fr from 768px breakpoint */