/*
 * posts-card-variants.css
 *
 * Customer-facing feed post card styles, ported from
 * members-area/public/css/admin.css (.fp-*) so the Compose Post preview
 * renders pixel-identically to what customers actually see.
 *
 * Includes:
 *   - Post chrome (.fp-header / .fp-avatar / .fp-author* / .fp-meta /
 *     .fp-follow-btn / .fp-more / .fp-body)
 *   - Link preview (.fp-link-preview)
 *   - Nine article display variants:
 *       1. Article Hero (cover-top)        .fp-article (default)
 *       2. Magazine Feature                 .fp-article--magazine
 *       3. Cover Overlay                    .fp-article--cover-overlay
 *       4. Compact (cover-left)             .fp-article--cover-left
 *       5. Banner Strip                     .fp-article--banner
 *       6. Pull Quote                       .fp-article--quote
 *       7. Text Only (minimal)              .fp-article-text-only--minimal
 *       8. Notification                     .fp-article--notification
 *       9. Domain Chip                      .fp-article--domain-chip
 *
 * Tokens (--c-*, --sp-*, --fs-*, --radius*) are inherited from panel.css
 * which already mirrors members-area design tokens.
 */

/* ============================================================
   Post chrome (avatar, header row, author, meta, follow, more)
   ============================================================ */
.fp-pin-label {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-3) var(--sp-4) 0;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-primary);
}
.fp-header {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4) var(--sp-2);
    position: relative;
}
@media (min-width: 1400px) {
    .fp-header {
        padding: var(--sp-4) var(--sp-5) var(--sp-2);
    }
}
.fp-avatar {
    width: var(--tap-min);
    height: var(--tap-min);
    border-radius: var(--radius-full);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--c-bg);
    cursor: pointer;
    transition: opacity var(--ease-fast);
}
.fp-avatar:hover {
    opacity: 0.85;
}
.fp-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fp-author-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.fp-author-link:hover .fp-author {
    text-decoration: underline;
}
.fp-author-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.fp-author {
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: 1.3;
}
.fp-meta {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    line-height: 1.3;
}
.fp-follow-btn {
    background: var(--c-hover, var(--slate-100));
    border: none;
    color: var(--c-text, var(--slate-700));
    font-size: var(--fs-xs);
    font-weight: 500;
    padding: 2px var(--sp-2);
    border-radius: var(--radius);
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.4;
    transition: background var(--ease), color var(--ease);
}
.fp-follow-btn:hover {
    background: var(--c-border, var(--slate-200));
}
.fp-follow-btn.is-following {
    background: var(--c-primary, #355f96);
    color: #fff;
}
.fp-follow-btn.is-following:hover {
    background: var(--red-500);
    color: #fff;
}
.fp-more {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--c-text-soft);
    cursor: pointer;
    font-size: var(--fs-xl);
    padding: var(--sp-2);
    border-radius: var(--radius-full);
    line-height: 1;
    min-height: var(--tap-min);
    min-width: var(--tap-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.fp-more:hover {
    background: var(--c-hover);
    color: var(--c-text-muted);
}

/* Body text */
.fp-body {
    padding: var(--sp-1) var(--sp-4) var(--sp-3);
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--c-text);
}
@media (min-width: 1400px) {
    .fp-body {
        padding: var(--sp-1) var(--sp-5) var(--sp-3);
    }
}
.fp-body p {
    margin-bottom: var(--sp-2);
}
.fp-body p:last-child {
    margin-bottom: 0;
}

/* Footer / engagement row (Like / Comment / Repost) */
.fp-footer {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-4);
    border-top: 1px solid var(--c-border);
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
}
.fp-footer__counts {
    display: flex;
    gap: var(--sp-3);
}
.fp-footer__actions {
    margin-left: auto;
    display: flex;
    gap: var(--sp-3);
}
.fp-footer__actions span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ============================================================
   Basic link preview (used by some variants)
   ============================================================ */
.fp-link-preview {
    display: block;
    border: var(--border-width) solid var(--c-border);
    border-radius: var(--radius);
    overflow: hidden;
    margin: 0 var(--sp-4) var(--sp-3);
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--ease);
}
@media (min-width: 1400px) {
    .fp-link-preview {
        margin: 0 var(--sp-5) var(--sp-3);
    }
}
.fp-link-preview:hover {
    box-shadow: var(--shadow);
}
.fp-link-preview img {
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    display: block;
}
.fp-link-preview-body {
    padding: var(--sp-3) var(--sp-4);
}
.fp-link-preview-domain {
    font-size: var(--fs-xs);
    color: var(--c-text-soft);
    text-transform: uppercase;
    letter-spacing: var(--badge-ls);
}
.fp-link-preview-title {
    font-size: var(--fs-base);
    font-weight: 600;
    margin: var(--nudge) 0;
}
.fp-link-preview-desc {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    line-height: var(--lh);
}

/* ============================================================
   Article card variants (base + 9 modifiers)
   ============================================================ */

/* Base / cover-top */
.fp-article {
    display: block;
    border: var(--border-width) solid var(--c-border);
    border-radius: var(--radius);
    overflow: hidden;
    margin: 0 var(--sp-4) var(--sp-3);
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    transition: box-shadow var(--ease);
    background: var(--c-surface);
}
@media (min-width: 1400px) {
    .fp-article { margin: 0 var(--sp-5) var(--sp-3); }
}
.fp-article:hover {
    box-shadow: var(--shadow);
}
.fp-article:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--focus-ring-width) var(--c-focus-ring);
}
.fp-article-cover { position: relative; }
.fp-article-cover img {
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    display: block;
}
.fp-article-video-badge {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    width: 32px;
    height: 32px;
    background: var(--c-overlay-medium);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}
.fp-article-video-badge svg {
    fill: var(--white);
    stroke: var(--white);
}
.fp-article-info {
    padding: var(--sp-3) var(--sp-4);
}
.fp-article-source {
    font-size: var(--fs-xs);
    color: var(--c-text-soft);
    text-transform: uppercase;
    letter-spacing: var(--badge-ls);
    margin-bottom: var(--nudge);
}
.fp-article-title {
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: var(--nudge);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fp-article-summary {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    line-height: var(--lh);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Variant: cover-left (Compact) */
.fp-article--cover-left .fp-article-row {
    display: flex;
    gap: 0;
}
.fp-article--cover-left .fp-article-cover--left {
    flex: 0 0 140px;
    position: relative;
}
.fp-article--cover-left .fp-article-cover--left img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    min-height: 120px;
}
.fp-article--cover-left .fp-article-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media (min-width: 640px) {
    .fp-article--cover-left .fp-article-cover--left {
        flex: 0 0 180px;
    }
}

/* Variant: cover-overlay */
.fp-article--cover-overlay .fp-article-cover--overlay {
    position: relative;
}
.fp-article--cover-overlay .fp-article-cover--overlay img {
    aspect-ratio: 16 / 9;
}
.fp-article-overlay-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--sp-5) var(--sp-4) var(--sp-4);
    background: linear-gradient(transparent, rgba(0, 0, 0, .75));
    color: var(--white);
}
.fp-article-overlay-text .fp-article-source {
    color: rgba(255, 255, 255, .7);
}
.fp-article-overlay-text .fp-article-title {
    color: var(--white);
    font-size: var(--fs-lg);
}

/* Variant: minimal (Text Only) */
.fp-article-text-only {
    padding: var(--sp-4);
    background: var(--c-surface);
    border: var(--border-width) solid var(--c-border);
    border-radius: var(--radius);
    margin: 0 var(--sp-4) var(--sp-3);
}
@media (min-width: 1400px) {
    .fp-article-text-only { margin: 0 var(--sp-5) var(--sp-3); }
}
.fp-article-text-only--minimal {
    border-left: 3px solid var(--c-primary);
}
.fp-article-tag {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--c-primary);
    letter-spacing: 0.08em;
    margin-bottom: var(--sp-1);
}

/* Variant: quote (Pull Quote) */
.fp-article--quote {
    border-left: 4px solid var(--c-primary);
    background: color-mix(in srgb, var(--c-primary) 4%, var(--c-surface, #fff));
}
.fp-article-quote {
    padding: var(--sp-4) var(--sp-5);
}
.fp-article-quote-text {
    font-size: var(--fs-lg, 1.0625rem);
    font-style: italic;
    line-height: 1.55;
    margin: 0 0 var(--sp-3);
    padding: 0;
    border: 0;
    color: var(--c-text);
}
.fp-article-quote-source {
    padding-top: var(--sp-2);
    border-top: 1px solid var(--c-border);
}
.fp-article-quote-source .fp-article-title {
    font-size: var(--fs-sm);
    -webkit-line-clamp: 1;
}
.fp-article-quote-source .fp-article-source {
    margin-top: var(--nudge, 2px);
}

/* Variant: banner (Banner Strip) */
.fp-article--banner .fp-article-cover--banner img {
    aspect-ratio: 3 / 1;
}

/* Variant: magazine (Magazine Feature) */
.fp-article--magazine .fp-article-row--magazine {
    display: flex;
    gap: 0;
}
.fp-article--magazine .fp-article-cover--magazine {
    flex: 0 0 58%;
    position: relative;
}
.fp-article--magazine .fp-article-cover--magazine img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    min-height: 180px;
}
.fp-article--magazine .fp-article-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.fp-article-title--lg {
    font-size: var(--fs-lg, 1.0625rem);
    line-height: 1.25;
}
@media (max-width: 639px) {
    .fp-article--magazine .fp-article-row--magazine {
        flex-direction: column;
    }
    .fp-article--magazine .fp-article-cover--magazine {
        flex: none;
    }
    .fp-article--magazine .fp-article-cover--magazine img {
        aspect-ratio: 2 / 1;
        min-height: 0;
    }
}

/* Variant: notification (Notification) */
.fp-article--notification {
    border-top: 3px solid var(--c-primary);
}
.fp-article-notification {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
}
.fp-article-notification-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--c-primary) 12%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-primary);
}
.fp-article-notification-body {
    flex: 1;
    min-width: 0;
}
.fp-article-notification-body .fp-article-title {
    -webkit-line-clamp: 2;
}
.fp-article-notification-body .fp-article-source {
    margin-top: var(--nudge, 2px);
}

/* Variant: domain-chip (Domain Chip)
 * Compact pill that just shows the source domain, like a sharable
 * link badge. Not in members-area as a separate variant; built here
 * as a minimal sibling of text-only. */
.fp-article--domain-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 6px 12px;
    border: var(--border-width) solid var(--c-border);
    border-radius: var(--radius-full);
    background: var(--c-surface);
    margin: 0 var(--sp-4) var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--c-text);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--ease);
}
.fp-article--domain-chip:hover {
    background: var(--c-hover);
}
.fp-article--domain-chip .fp-article-domain-favicon {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    object-fit: cover;
    background: var(--c-bg);
    flex-shrink: 0;
}
.fp-article--domain-chip .fp-article-domain-name {
    color: var(--c-text-soft);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--badge-ls);
}
.fp-article--domain-chip .fp-article-domain-title {
    font-weight: 500;
    color: var(--c-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   Compose preview frame: wraps a feed card in the dark canvas the
   members-area uses to show how a post looks against the theme.
   ============================================================ */
.fp-card {
    background: var(--c-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--c-border);
}