/**
 * SocialDripper - Home and Content Workspace
 * Product-facing content surfaces powered by existing workflow records.
 */

.home-workspace,
.content-workspace {
    display: grid;
    gap: 1rem;
}

.content-panel,
.content-header-panel,
.home-hero-panel,
.home-metric,
.content-card,
.content-empty-state {
    border: 1px solid rgba(18, 59, 63, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 20px 50px rgba(18, 59, 63, 0.08);
}

.home-hero-panel,
.content-header-panel,
.content-panel,
.content-empty-state {
    padding: 1rem;
}

.home-hero-panel h2,
.content-header-panel h2,
.content-panel h3,
.content-empty-state h3 {
    margin: 0 0 0.45rem;
    color: #123b3f;
}

.home-hero-panel p:not(.eyebrow),
.content-header-panel p,
.content-panel p,
.content-empty-state p {
    margin: 0;
}

.home-metric-grid {
    display: grid;
    gap: 0.75rem;
}

.home-metric {
    padding: 0.9rem;
}

.home-metric span,
.content-meta,
.content-card-footer span,
.content-next-muted {
    color: #607478;
    font-size: 0.86rem;
}

.home-metric strong {
    display: block;
    margin-top: 0.25rem;
    color: #123b3f;
    font-size: 1.75rem;
}

.content-panel {
    display: grid;
    gap: 0.85rem;
}

.content-panel-head {
    display: grid;
    gap: 0.8rem;
}

.home-attention-list,
.content-card-list {
    display: grid;
    gap: 0.75rem;
}

.home-attention-item {
    display: grid;
    gap: 0.75rem;
    padding: 0.85rem;
    border: 1px solid rgba(18, 59, 63, 0.1);
    border-radius: 8px;
    background: #fffdfa;
}

.home-attention-item strong,
.home-attention-item span {
    display: block;
}

.home-attention-item strong {
    color: #123b3f;
}

.home-attention-item span {
    margin-top: 0.25rem;
    color: #607478;
    font-size: 0.86rem;
}

.content-card {
    overflow: hidden;
    display: grid;
}

.content-card-preview {
    width: min(100%, 21rem);
    min-height: 0;
    max-height: none;
    justify-self: center;
    display: grid;
    place-items: center;
    aspect-ratio: var(--content-slide-aspect, 4 / 5);
    background: #f8f1e6;
    color: #31575c;
    font-weight: 850;
}

.content-card-preview img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: top center;
    background: #123b3f;
}

.content-card-body {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
    padding: 0.95rem;
}

.content-card-title-row {
    display: grid;
    gap: 0.55rem;
}

.content-card h3 {
    margin: 0;
    color: #123b3f;
    font-size: 1.02rem;
    line-height: 1.25;
}

.content-card-excerpt {
    display: -webkit-box;
    overflow: hidden;
    margin: 0.25rem 0 0;
    color: #31575c;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.content-card-footer {
    display: grid;
    gap: 0.65rem;
    margin-top: 0.25rem;
}

.content-status-pill {
    width: max-content;
    border-radius: 999px;
    padding: 0.24rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 850;
    white-space: nowrap;
}

.content-status-pill.draft {
    color: #31575c;
    background: #eef4f4;
}

.content-status-pill.ready,
.content-status-pill.needs_approval {
    color: #027a48;
    background: #ecfdf3;
}

.content-status-pill.scheduled,
.content-status-pill.upcoming {
    color: #123b3f;
    background: #f8f1e6;
}

.content-status-pill.published {
    color: #ffffff;
    background: #123b3f;
}

.content-empty-state {
    display: grid;
    gap: 0.75rem;
}

.content-preview-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(18, 59, 63, 0.42);
}

.content-preview-modal,
.content-schedule-modal {
    width: min(980px, 100%);
    max-height: calc(100vh - 2rem);
    overflow: auto;
    display: grid;
    gap: 0.9rem;
    border: 1px solid rgba(18, 59, 63, 0.12);
    border-radius: 8px;
    background: #fffdfa;
    padding: 1rem;
    box-shadow: 0 24px 70px rgba(18, 59, 63, 0.22);
}

.content-schedule-modal {
    width: min(520px, 100%);
}

.content-schedule-form {
    display: grid;
    gap: 0.85rem;
}

.content-preview-head,
.content-preview-actions {
    display: grid;
    gap: 0.75rem;
}

.content-preview-head h3,
.content-preview-head p,
.content-preview-caption {
    margin: 0;
}

.content-preview-head h3 {
    color: #123b3f;
}

.content-preview-head p,
.content-preview-caption {
    color: #607478;
}

.content-preview-carousel {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    gap: 0.5rem;
    align-items: center;
}

.content-carousel-nav {
    width: 42px;
    height: 54px;
    border: 1px solid rgba(18, 59, 63, 0.16);
    border-radius: 8px;
    background: #f8f1e6;
    color: #123b3f;
    font-size: 2rem;
    font-weight: 850;
    cursor: pointer;
}

.content-carousel-nav:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.content-preview-active-slide {
    margin: 0;
    display: grid;
    gap: 0.5rem;
    justify-items: center;
}

.content-preview-active-slide img {
    max-width: 100%;
    max-height: min(68vh, 720px);
    border-radius: 8px;
    background: #123b3f;
    object-fit: contain;
}

.content-preview-active-slide figcaption {
    color: #607478;
    font-size: 0.86rem;
    font-weight: 750;
}

.content-preview-thumbnails {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.15rem;
}

.content-preview-thumbnails button {
    flex: 0 0 58px;
    height: 72px;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 8px;
    background: #f8f1e6;
    padding: 0;
    cursor: pointer;
}

.content-preview-thumbnails button.active {
    border-color: #d65a2a;
}

.content-preview-thumbnails img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 768px) {
    .home-metric-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .content-panel-head,
    .home-attention-item,
    .content-card-title-row,
    .content-card-footer {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .content-card {
        grid-template-columns: minmax(150px, 0.22fr) minmax(0, 1fr);
    }

    .content-card-preview {
        width: min(100%, 21rem);
        max-height: none;
        justify-self: center;
    }

    .content-preview-head,
    .content-preview-actions {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }
}