/**
 * 6-cards.css
 * Article card styling — the .post elements in archives, widgets, homepage.
 *
 * Parent HTML for each card:
 * <article class="post">
 *   <div class="post-content">
 *     <a class="post-link" href="...">
 *       [div.post-thumb > picture/img]
 *       <div class="post-title"><h3>Title</h3></div>
 *     </a>
 *     [div.post-meta]
 *   </div>
 * </article>
 */

/* ─── Base card ─── */
.post .post-content {
    background: var(--adc-bg-card);
    border: 1px solid var(--adc-border);
    border-radius: var(--adc-radius);
    overflow: hidden;
    box-shadow: none;
    transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}
.post .post-content:hover {
    border-color: var(--adc-border-mid);
    box-shadow: var(--adc-shadow-sm);
    transform: translateY(-2px);
}

/* Thumbnail */
.post .post-thumb {
    overflow: hidden;
    border-bottom: 1px solid var(--adc-border);
    background: var(--adc-bg-alt);
}
.post .post-thumb img {
    transition: transform 500ms ease;
    object-fit: cover;
}
.post .post-content:hover .post-thumb img {
    transform: scale(1.04);
}

/* Category badge on image */
.post .post-thumb .post-cat {
    position: absolute;
    top: var(--adc-gap-3);
    inset-inline-start: var(--adc-gap-3);
    background: var(--adc-brand);
    color: #fff;
    font-size: var(--adc-text-xs);
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--adc-radius);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

/* Title area */
.post .post-title {
    padding: var(--adc-gap-4);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: var(--adc-gap-2);
}
.post .post-title h3 {
    font-size: var(--adc-text-xl);
    font-weight: 700;
    line-height: var(--adc-lh-heading);
    color: var(--adc-text);
    margin-bottom: 0;
    transition: color 200ms;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.post .post-link:hover h3 {
    color: var(--adc-brand-dark);
}

/* Post meta inside card */
.post .post-meta {
    padding: 0 var(--adc-gap-4) var(--adc-gap-3);
    margin-top: auto;
    font-size: var(--adc-text-xs);
    color: var(--adc-text-muted);
    gap: var(--adc-gap-2);
}
.post .post-meta-avatar img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--adc-bg-alt);
}

/* ─── ROW layout (horizontal card) — mobile default ─── */
.style-sm-row .post {
    flex-basis: 100% !important;
}
.style-sm-row .post .post-content {
    flex-direction: row !important;
    align-items: stretch;
}
.style-sm-row .post .post-thumb {
    border-bottom: none !important;
    border-inline-end: 1px solid var(--adc-border);
    flex-shrink: 0;
    width: 120px !important;
    min-height: auto !important;
}
.style-sm-row .post .post-thumb img {
    width: 120px !important;
    height: 100% !important;
    object-fit: cover;
}
.style-sm-row .post .post-title h3 {
    font-size: var(--adc-text-md) !important;
    -webkit-line-clamp: 2;
}
.style-sm-row .post .post-title {
    padding: var(--adc-gap-3);
}
.style-sm-row .post .post-meta {
    padding: 0 var(--adc-gap-3) var(--adc-gap-3);
}
.rtl.style-sm-row .post .post-thumb,
.rtl .style-sm-row .post .post-thumb {
    border-inline-end: none;
    border-inline-start: 1px solid var(--adc-border);
}

/* ─── No-thumbnail card ─── */
.post.has-no-thumb .post-title {
    padding: var(--adc-gap-5);
}
.post.has-no-thumb .post-title h3 {
    font-size: var(--adc-text-md);
}
.style-sm-row .post.has-no-thumb .post-content {
    flex-direction: column !important;
}

/* ─── COLUMN layout (vertical card) — desktop default ─── */
.style-lg-column .post .post-thumb {
    flex-shrink: 0;
}
.style-lg-column .post .post-thumb img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}