/* ==========================================================================
   post.css — Glideslope AI article detail page styles
   Extracted from post.php inline <style> blocks.
   ========================================================================== */

/* --- Lazy-load placeholder (featured media) --- */
.featured-media-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--color-elevate);
    border-bottom: 1px solid var(--color-border);
    overflow: hidden;
    margin-bottom: 24px;
    position: relative;
    border-radius: 12px;
}
.featured-media-placeholder.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
    border: 5px solid rgba(128, 128, 128, 0.2);
    border-top-color: var(--color-text-muted);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
.featured-media-placeholder .story-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.featured-media-placeholder .story-image.placeholder {
    object-fit: cover;
    padding: 0;
    opacity: 0.4;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* ==========================================================================
   Snap card (off-screen render target for html2canvas)
   ========================================================================== */
#snapCard { width: 800px; height: 1000px; position: relative; overflow: hidden; background: #0b0b0b; }
#snapCard.banner { width: 1600px; height: 900px; }

/* Banner two-column grid */
#snapCard.banner .snap-content { display: grid; grid-template-columns: 1fr 520px; column-gap: 28px; align-items: start; }
#snapCard.banner #snapSentiment,
#snapCard.banner #snapPulse { grid-column: 2; }
#snapCard.banner #snapTitle,
#snapCard.banner #snapDesc,
#snapCard.banner #snapMeta,
#snapCard.banner #snapHash { grid-column: 1; }

/* Banner typography */
#snapCard.banner #snapTitle {
    font-size: 60px;
    line-height: 1.12;
    margin-bottom: 14px;
    max-height: calc(3 * 1.12em + 0.55em);
    padding-bottom: 0.40em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
#snapCard.banner #snapDesc  { font-size: 24px; line-height: 1.35; margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#snapCard.banner #snapMeta  { font-size: 16px; }
#snapCard.banner #snapHash  { font-size: 13px; }
#snapCard.banner #snapSentiment .snap-sentiment-header { font-size: 18px; margin-bottom: 18px; }
#snapCard.banner #snapSentiment .snap-sentiment-info   { font-size: 16px; }
#snapCard.banner #snapSentiment .snap-sentiment-labels span { font-size: 12px; }
#snapCard.banner #snapPulse .snap-pulse-header  { font-size: 18px; margin-bottom: 8px; }
#snapCard.banner #snapPulse .snap-pulse-content { font-size: 16px; line-height: 1.45; }

/* Post (portrait) card typography */
#snapCard .snap-brand        { font-size: 18px; }
#snapCard #snapNotesUser     { font-size: 30px; }
#snapCard #snapNotesText     { font-size: 30px; max-height: none; overflow-y: visible; }
#snapCard #snapTitle         { font-size: 44px; line-height: 1.2; margin-bottom: 18px; }
#snapCard #snapDesc          { font-size: 22px; line-height: 1.4; margin-bottom: 22px; }
#snapCard #snapMeta          { font-size: 16px; }
#snapCard #snapHash          { font-size: 13px; }
#snapCard #snapSentiment .snap-sentiment-header  { font-size: 19px; margin-bottom: 28px; }
#snapCard #snapSentiment .snap-sentiment-info    { font-size: 17px; }
#snapCard #snapSentiment .snap-sentiment-labels span { font-size: 13px; }
#snapCard #snapPulse .snap-pulse-header          { font-size: 19px; margin-bottom: 8px; }
#snapCard #snapPulse .snap-pulse-content         { font-size: 17px; line-height: 1.5; }