/**
 * RK Social Integrator - Frontend Styles
 *
 * @package RK_Social_Integrator
 * @since 2.0.0
 */

/* ============================================
   Design Tokens
   ============================================ */
:root {
    /* Brand */
    --rk-linkedin-blue:       #0A66C2;
    --rk-linkedin-blue-dark:  #004182;
    --rk-linkedin-blue-mid:   #0a2540;
    --rk-linkedin-blue-light: #e8f4fc;
    --rk-linkedin-border-doc: #c5d9e8;
    --rk-linkedin-doc-bg-end: #dce8f0;

    /* Neutrals */
    --rk-color-text-primary:   #1a1a1a;
    --rk-color-text-secondary: #595959;
    --rk-color-text-muted:     #767676;
    --rk-color-text-inverse:   #ffffff;
    --rk-color-surface:        #ffffff;
    --rk-color-surface-subtle: #f7f7f7;
    --rk-color-border:         #e2e2e2;
    --rk-color-border-light:   #f0f0f0;
    --rk-color-error:          #dc3232;

    /* Interactive */
    --rk-color-link:       var(--rk-linkedin-blue);
    --rk-color-link-hover: var(--rk-linkedin-blue-dark);

    /* Carousel nav */
    --rk-nav-bg:           #ffffff;
    --rk-nav-border:       #d4d4d4;
    --rk-nav-color:        #1a1a1a;
    --rk-nav-bg-hover:     var(--rk-linkedin-blue);
    --rk-nav-border-hover: var(--rk-linkedin-blue);
    --rk-nav-color-hover:  #ffffff;

    /* Elevation — layered shadows */
    --rk-shadow-xs: 0 1px 2px rgba(0, 0, 0, .06);
    --rk-shadow-sm: 0 2px 6px rgba(0, 0, 0, .08),  0 1px 2px rgba(0, 0, 0, .06);
    --rk-shadow-md: 0 4px 16px rgba(0, 0, 0, .10), 0 2px 4px rgba(0, 0, 0, .06);
    --rk-shadow-lg: 0 8px 28px rgba(0, 0, 0, .12), 0 2px 6px rgba(0, 0, 0, .06);

    /* Shape */
    --rk-radius-sm:     6px;
    --rk-radius-md:     10px;
    --rk-radius-lg:     14px;
    --rk-radius-pill:   999px;
    --rk-radius-circle: 50%;

    /* Typography */
    --rk-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                      Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --rk-font-size-xs:      11px;
    --rk-font-size-sm:      12px;
    --rk-font-size-base:    14px;
    --rk-font-size-md:      15px;
    --rk-font-size-lg:      16px;
    --rk-font-size-avatar:  18px;
    --rk-font-weight-normal:   400;
    --rk-font-weight-medium:   500;
    --rk-font-weight-semibold: 600;
    --rk-font-weight-bold:     700;
    --rk-line-height-body: 1.65;

    /* Spacing */
    --rk-space-xs: 6px;
    --rk-space-sm: 10px;
    --rk-space-md: 14px;
    --rk-space-lg: 18px;
    --rk-space-xl: 24px;

    /* Timing */
    --rk-ease-out:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --rk-duration-fast: 180ms;
    --rk-duration-std:  260ms;

    /* Avatar placeholder gradient */
    --rk-avatar-gradient: linear-gradient(135deg, #47B0A3 0%, #4FB799 40%, #4CC86F 75%, #84BA4C 100%);
}

/* ============================================
   Social Post Card
   ============================================ */

.rk-social-post-card {
    font-family: var(--rk-font-family);
    background: var(--rk-color-surface);
    border-radius: var(--rk-radius-md);
    box-shadow: var(--rk-shadow-sm);
    overflow: hidden;
    transition: transform var(--rk-duration-std) var(--rk-ease-out),
                box-shadow var(--rk-duration-std) var(--rk-ease-out);
    height: 100%;
    display: flex;
    flex-direction: column;
    will-change: transform, box-shadow;
}

.rk-social-post-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--rk-shadow-md);
}

.rk-social-post-card:focus-within {
    outline: 2px solid var(--rk-linkedin-blue);
    outline-offset: 2px;
}

.rk-social-post-card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Header */
.rk-social-post-header {
    padding: var(--rk-space-lg) var(--rk-space-lg) var(--rk-space-md);
    border-bottom: 1px solid var(--rk-color-border-light);
}

.rk-social-post-author {
    display: flex;
    align-items: center;
    gap: var(--rk-space-md);
}

.rk-social-post-avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--rk-radius-circle);
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: var(--rk-shadow-xs);
}

.rk-social-post-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Company / LinkedIn page logo */
.rk-social-post-avatar--linkedin-logo {
    border-radius: var(--rk-radius-sm);
    background: var(--rk-color-surface);
    border: 1px solid var(--rk-color-border);
}

.rk-social-post-avatar--linkedin-logo img {
    object-fit: contain;
    object-position: center;
    padding: 4px;
    box-sizing: border-box;
}

.rk-social-post-avatar-placeholder {
    background: var(--rk-avatar-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rk-color-text-inverse);
    font-weight: var(--rk-font-weight-bold);
    font-size: var(--rk-font-size-avatar);
    border-radius: var(--rk-radius-circle);
}

.rk-social-post-author-info {
    flex: 1;
    min-width: 0;
}

.rk-social-post-author-name {
    font-weight: var(--rk-font-weight-semibold);
    font-size: var(--rk-font-size-lg);
    color: var(--rk-color-text-primary);
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rk-social-post-platform {
    display: flex;
    align-items: center;
    gap: var(--rk-space-xs);
    flex-wrap: wrap;
}

.rk-platform-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--rk-radius-pill);
    color: var(--rk-color-text-inverse);
    font-size: var(--rk-font-size-xs);
    font-weight: var(--rk-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.6;
}

/* Override inline style for LinkedIn — use the correct brand blue */
.rk-social-post-card[data-platform="linkedin"] .rk-platform-badge {
    background-color: var(--rk-linkedin-blue) !important;
}

.rk-social-post-time {
    font-size: var(--rk-font-size-sm);
    color: var(--rk-color-text-muted);
}

/* Content */
.rk-social-post-content {
    padding: var(--rk-space-md) var(--rk-space-lg);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.rk-social-post-text {
    color: var(--rk-color-text-primary);
    line-height: var(--rk-line-height-body);
    margin-bottom: var(--rk-space-sm);
    font-size: var(--rk-font-size-md);
}

.rk-social-post-text p {
    margin: 0 0 var(--rk-space-sm) 0;
}

.rk-social-post-text p:last-child {
    margin-bottom: 0;
}

.rk-social-post-text--truncated {
    font-size: var(--rk-font-size-md);
    line-height: var(--rk-line-height-body);
}

.rk-social-post-text--truncated p {
    margin: 0;
}

/* ── Read More / Show Less ── */
.rk-post-text-full {
    display: none;
}

.rk-post-text-full.is-expanded {
    display: block;
}

.rk-post-text-preview.is-hidden {
    display: none;
}

.rk-read-more-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: var(--rk-space-xs);
    padding: 0;
    background: none;
    border: none;
    color: var(--rk-linkedin-blue);
    font-size: var(--rk-font-size-base);
    font-weight: var(--rk-font-weight-medium);
    font-family: var(--rk-font-family);
    cursor: pointer;
    text-decoration: none;
    transition: color var(--rk-duration-fast) var(--rk-ease-out);
    line-height: 1;
}

.rk-read-more-toggle:hover {
    color: var(--rk-linkedin-blue-dark);
}

.rk-read-more-toggle::after {
    content: "›";
    font-size: 16px;
    line-height: 1;
    display: inline-block;
    transition: transform var(--rk-duration-fast) var(--rk-ease-out);
}

.rk-read-more-toggle[aria-expanded="true"]::after {
    transform: rotate(90deg);
}

/* Media */
.rk-social-post-media {
    margin-top: var(--rk-space-sm);
    border-radius: var(--rk-radius-sm);
    overflow: hidden;
    background: var(--rk-color-surface-subtle);
}

.rk-social-post-media img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform var(--rk-duration-std) var(--rk-ease-out);
}

.rk-social-post-media:hover img {
    transform: scale(1.015);
}

/* Video / document on LinkedIn when no thumbnail URL */
.rk-social-post-media--video,
.rk-social-post-media--document {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--rk-color-text-inverse);
    border-radius: var(--rk-radius-sm);
    overflow: hidden;
    position: relative;
    min-height: 150px;
    transition: opacity var(--rk-duration-fast) var(--rk-ease-out),
                transform var(--rk-duration-fast) var(--rk-ease-out);
}

.rk-social-post-media--video:hover,
.rk-social-post-media--document:hover {
    opacity: 0.93;
    transform: scale(0.99);
}

.rk-social-post-media-video-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, #1a1a2e 0%, var(--rk-linkedin-blue) 55%, var(--rk-linkedin-blue-dark) 100%);
}

.rk-social-post-media-play {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
}

.rk-social-post-media--document {
    background: linear-gradient(180deg, var(--rk-linkedin-blue-light) 0%, var(--rk-linkedin-doc-bg-end) 100%);
    color: var(--rk-linkedin-blue-mid);
    padding: 20px var(--rk-space-md);
    gap: var(--rk-space-sm);
    border: 1px solid var(--rk-linkedin-border-doc);
}

.rk-social-post-media--document .rk-social-post-media-label {
    color: var(--rk-linkedin-blue-mid);
    font-weight: var(--rk-font-weight-semibold);
    font-size: var(--rk-font-size-base);
    text-align: center;
}

.rk-social-post-media--video .rk-social-post-media-label {
    position: relative;
    z-index: 1;
    margin-top: var(--rk-space-xs);
    font-size: var(--rk-font-size-sm);
    font-weight: var(--rk-font-weight-semibold);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.rk-social-post-media-doc-icon {
    position: relative;
    z-index: 1;
}

/* Engagement */
.rk-social-post-engagement {
    padding: var(--rk-space-md) var(--rk-space-lg);
    border-top: 1px solid var(--rk-color-border-light);
    background: var(--rk-color-surface-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--rk-space-sm);
}

.rk-social-post-stats {
    display: flex;
    gap: var(--rk-space-xs);
    flex-wrap: wrap;
    align-items: center;
}

/* Pill chips for each stat */
.rk-stat-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px 3px 7px;
    border-radius: var(--rk-radius-pill);
    background: var(--rk-color-surface);
    border: 1px solid var(--rk-color-border);
    color: var(--rk-color-text-secondary);
    font-size: var(--rk-font-size-sm);
    line-height: 1;
    transition: background var(--rk-duration-fast) var(--rk-ease-out),
                border-color var(--rk-duration-fast) var(--rk-ease-out),
                color var(--rk-duration-fast) var(--rk-ease-out);
}

.rk-stat-item:hover {
    background: var(--rk-linkedin-blue-light);
    border-color: var(--rk-linkedin-blue);
    color: var(--rk-linkedin-blue-dark);
}

.rk-stat-icon {
    font-size: 13px;
    line-height: 1;
}

.rk-stat-value {
    font-weight: var(--rk-font-weight-semibold);
    font-size: var(--rk-font-size-sm);
}

.rk-social-post-actions {
    flex-shrink: 0;
}

/* Read-on link — pill button */
.rk-social-post-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--rk-linkedin-blue);
    text-decoration: none;
    font-size: var(--rk-font-size-base);
    font-weight: var(--rk-font-weight-medium);
    padding: 4px 10px 4px 8px;
    border-radius: var(--rk-radius-pill);
    border: 1px solid transparent;
    transition: color var(--rk-duration-fast) var(--rk-ease-out),
                background var(--rk-duration-fast) var(--rk-ease-out),
                border-color var(--rk-duration-fast) var(--rk-ease-out);
}

.rk-social-post-link:hover {
    color: var(--rk-linkedin-blue-dark);
    background: var(--rk-linkedin-blue-light);
    border-color: var(--rk-linkedin-blue);
}

.rk-social-post-link--linkedin {
    gap: 5px;
}

.rk-social-post-link--linkedin .rk-read-on-text {
    margin-right: 1px;
}

.rk-linkedin-icon {
    flex-shrink: 0;
    vertical-align: middle;
    display: inline-block;
}

.rk-external-icon {
    font-size: 11px;
    opacity: 0.75;
}

/* ============================================
   Grid Layout
   ============================================ */

.rk-social-posts-grid {
    margin: var(--rk-space-xl) 0;
}

.rk-social-posts-grid-inner {
    display: grid;
    gap: var(--rk-space-xl);
}

.rk-social-posts-grid-cols-1 {
    grid-template-columns: 1fr;
}

.rk-social-posts-grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.rk-social-posts-grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.rk-social-posts-grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* ============================================
   Masonry Layout
   ============================================ */

.rk-social-posts-masonry {
    margin: var(--rk-space-xl) 0;
}

.rk-social-posts-masonry-inner {
    column-gap: var(--rk-space-xl);
    column-fill: balance;
}

.rk-social-posts-masonry-cols-1 {
    column-count: 1;
}

.rk-social-posts-masonry-cols-2 {
    column-count: 2;
}

.rk-social-posts-masonry-cols-3 {
    column-count: 3;
}

.rk-social-posts-masonry-cols-4 {
    column-count: 4;
}

.rk-social-posts-masonry-item {
    break-inside: avoid;
    margin-bottom: var(--rk-space-xl);
    page-break-inside: avoid;
}

/* ============================================
   Carousel Layout
   ============================================ */

.rk-social-posts-carousel {
    margin: var(--rk-space-xl) 0;
    position: relative;
}

.rk-social-posts-carousel-inner {
    margin-bottom: var(--rk-space-lg);
}

.rk-social-posts-carousel-item {
    padding: 0 12px;
}

.rk-social-posts-carousel-nav {
    display: flex;
    justify-content: center;
    gap: var(--rk-space-sm);
    margin-top: var(--rk-space-lg);
}

.rk-carousel-prev,
.rk-carousel-next {
    background: var(--rk-nav-bg);
    border: 1.5px solid var(--rk-nav-border);
    border-radius: var(--rk-radius-circle);
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--rk-nav-color);
    box-shadow: var(--rk-shadow-xs);
    transition: background var(--rk-duration-fast) var(--rk-ease-out),
                border-color var(--rk-duration-fast) var(--rk-ease-out),
                color var(--rk-duration-fast) var(--rk-ease-out),
                box-shadow var(--rk-duration-fast) var(--rk-ease-out),
                transform var(--rk-duration-fast) var(--rk-ease-out);
}

.rk-carousel-prev:hover,
.rk-carousel-next:hover {
    background: var(--rk-nav-bg-hover);
    border-color: var(--rk-nav-border-hover);
    color: var(--rk-nav-color-hover);
    box-shadow: var(--rk-shadow-sm);
    transform: scale(1.07);
}

.rk-carousel-prev:active,
.rk-carousel-next:active {
    transform: scale(0.96);
}

.rk-carousel-prev:focus-visible,
.rk-carousel-next:focus-visible {
    outline: 2px solid var(--rk-linkedin-blue);
    outline-offset: 3px;
}

.rk-carousel-prev svg,
.rk-carousel-next svg {
    width: 18px;
    height: 18px;
    pointer-events: none;
}

/* Carousel button click-pulse (added via JS) */
.rk-carousel-btn--active {
    transform: scale(0.93) !important;
}

/* ============================================
   Empty State
   ============================================ */

.rk-social-posts-empty {
    text-align: center;
    padding: 36px 20px;
    color: var(--rk-color-text-muted);
}

.rk-social-posts-empty p {
    margin: 0;
    font-size: var(--rk-font-size-lg);
}

.rk-social-posts-empty .rk-social-posts-sync-hint {
    margin-top: var(--rk-space-sm);
    font-size: var(--rk-font-size-base);
    color: var(--rk-linkedin-blue);
}

.rk-social-posts-empty .rk-social-posts-sync-hint a {
    color: var(--rk-linkedin-blue);
    text-decoration: underline;
}

.rk-social-posts-empty .rk-social-posts-sync-hint a:hover {
    color: var(--rk-linkedin-blue-dark);
}

/* ============================================
   Responsive Design
   ============================================ */

@media (max-width: 1200px) {
    .rk-social-posts-grid-cols-4 {
        grid-template-columns: repeat(3, 1fr);
    }

    .rk-social-posts-masonry-cols-4 {
        column-count: 3;
    }
}

@media (max-width: 1024px) {
    .rk-social-posts-grid-cols-3,
    .rk-social-posts-grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .rk-social-posts-masonry-cols-3,
    .rk-social-posts-masonry-cols-4 {
        column-count: 2;
    }
}

@media (max-width: 768px) {
    .rk-social-posts-grid-cols-2,
    .rk-social-posts-grid-cols-3,
    .rk-social-posts-grid-cols-4 {
        grid-template-columns: 1fr;
    }

    .rk-social-posts-masonry-cols-2,
    .rk-social-posts-masonry-cols-3,
    .rk-social-posts-masonry-cols-4 {
        column-count: 1;
    }

    .rk-social-post-engagement {
        flex-direction: column;
        align-items: flex-start;
    }

    .rk-social-post-stats {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .rk-social-post-header,
    .rk-social-post-content,
    .rk-social-post-engagement {
        padding: var(--rk-space-sm) var(--rk-space-md);
    }

    .rk-social-post-avatar {
        width: 38px;
        height: 38px;
    }

    .rk-social-post-author-name {
        font-size: var(--rk-font-size-base);
    }

    .rk-read-more-toggle {
        font-size: var(--rk-font-size-xs);
    }
}