/* ──────────────────────────────────────────────────────────────────────────────
   DΛREΛKT_ SOCIAL -- MODULE: social.facebook
   Classification : Social Atom | Facebook Feed | Smash Balloons Masonry
   Version        : 4.0.0 | Genesis-Final . Layered . Token-Scoped
   File           : /tools/modules/social.facebook/social.facebook.css
   Maintainer     : DΛREΛKT_ UI TEAM
   ────────────────────────────────────────────────────────────────────────────── */

@layer atoms {
  /* --- Tokens ──────────────────────────────────────────────────────────────── */
  :root {
    --social-fb-accent: #1877F2;
    --social-fb-radius: 12px;
    --social-fb-gap: 1rem;
    --social-fb-card-bg: #fff;
    --social-fb-card-border: #e0e0e0;
    --social-fb-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    --social-fb-card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.1);
    --social-fb-text-fg: #333;
    --social-fb-date-fg: #65676b;
    --social-fb-title-fg: #111;
    --social-fb-follow-fg: var(--social-fb-accent);
    --social-fb-skeleton-bg: #e8e8e8;
    --social-fb-skeleton-shine: #f5f5f5;
    --social-fb-cols: 3;
  }

  /* --- Wrapper — full width of parent container ──────────────────────────── */
  .social-fb__wrap {
    width: 100%;
    display: block;
    box-sizing: border-box;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     HERO HEADER — Cover Photo + Page Identity (full width)
     ═══════════════════════════════════════════════════════════════════════════ */

  .social-fb__hero {
    border-radius: var(--social-fb-radius);
    overflow: hidden;
    border: 1px solid var(--social-fb-card-border);
    background: var(--social-fb-card-bg);
    box-shadow: var(--social-fb-card-shadow);
    margin-bottom: var(--social-fb-gap);
  }

  /* --- Cover Photo ────────────────────────────────────────────────────────── */
  .social-fb__cover {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .social-fb__cover-img {
    width: 100%;
    aspect-ratio: 820 / 312;
    object-fit: cover;
    display: block;
  }

  /* Fan count badge — bottom-right of cover */
  .social-fb__fan-badge {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    padding: 0.35rem 0.65rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1877F2;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  }

  /* --- Page Identity ──────────────────────────────────────────────────────── */
  .social-fb__page-identity {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
  }

  .social-fb__avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 3px solid var(--social-fb-card-bg);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  }

  .social-fb__page-info {
    flex: 1;
    min-width: 0;
    text-align: left;
  }

  .social-fb__page-name {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--social-fb-title-fg);
    text-decoration: none;
    line-height: 1.3;
  }

  a.social-fb__page-name:hover {
    text-decoration: underline;
  }

  .social-fb__page-about {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    color: var(--social-fb-date-fg);
    line-height: 1.4;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     LEGACY HEADER — Fallback when no page meta
     ═══════════════════════════════════════════════════════════════════════════ */

  .social-fb__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: var(--social-fb-gap);
    flex-wrap: wrap;
  }

  .social-fb__title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--social-fb-title-fg);
    line-height: 1.3;
  }

  .social-fb__page-link {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--social-fb-accent);
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s ease;
  }

  .social-fb__page-link:hover {
    opacity: 0.75;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     POST FEED — CSS Columns for true masonry (no empty space)
     CSS columns fills top→bottom per column, so SSR reorders posts using
     column-fill interleaving to achieve left→right row-first reading order.
     ═══════════════════════════════════════════════════════════════════════════ */

  .social-fb__feed {
    columns: var(--social-fb-cols);
    column-gap: var(--social-fb-gap);
  }

  /* --- Individual Post ────────────────────────────────────────────────────── */
  .social-fb__post {
    background: var(--social-fb-card-bg);
    border: 1px solid var(--social-fb-card-border);
    border-radius: var(--social-fb-radius);
    overflow: hidden;
    box-shadow: var(--social-fb-card-shadow);
    transition: box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
    break-inside: avoid;            /* prevent column breaks mid-card */
    margin-bottom: var(--social-fb-gap); /* vertical spacing between cards */
  }

  .social-fb__post:hover {
    box-shadow: var(--social-fb-card-shadow-hover);
  }

  /* Hidden posts for Load More */
  .social-fb__post--hidden {
    display: none;
  }

  /* --- Post Header (avatar + author + date) ───────────────────────────────── */
  .social-fb__post-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem 0.375rem;
    text-align: left;
  }

  .social-fb__post-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
  }

  .social-fb__post-meta {
    flex: 1;
    min-width: 0;
  }

  .social-fb__post-author {
    display: block;
    font-weight: 700;
    font-size: 0.8125rem;
    color: var(--social-fb-title-fg);
    line-height: 1.3;
  }

  .social-fb__post-date {
    display: block;
    font-size: 0.75rem;
    color: var(--social-fb-date-fg);
    line-height: 1.3;
  }

  /* --- Post Text ──────────────────────────────────────────────────────────── */
  .social-fb__post-text {
    padding: 0.375rem 0.875rem 0.5rem;
    text-align: left;
  }

  .social-fb__post-text p {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--social-fb-text-fg);
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .social-fb__post-text-full {
    display: none;
  }

  .social-fb__post-text-full[hidden] {
    display: none;
  }

  .social-fb__post-text-full:not([hidden]) {
    display: block;
  }

  /* See More button — inline, styled as link */
  .social-fb__see-more {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--social-fb-date-fg);
    cursor: pointer;
    font-size: 0.8125rem;
  }

  .social-fb__see-more:hover {
    text-decoration: underline;
  }

  /* --- Post Image ─────────────────────────────────────────────────────────── */
  .social-fb__post-image-wrap {
    overflow: hidden;
    line-height: 0;
    margin: 0 0.625rem;
    border-radius: 8px;
  }

  .social-fb__post-image {
    width: 100%;
    display: block;
    object-fit: cover;
    border-radius: 8px;
  }

  /* --- Post Image Gallery (thumbnail strip below hero) ──────────────────── */
  .social-fb__post-thumbs {
    display: flex;
    gap: 3px;
    line-height: 0;
    margin: 3px 0.625rem 0;
  }

  .social-fb__post-thumb {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-width: 0;
    border-radius: 6px;
  }

  .social-fb__post-thumb img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border-radius: 6px;
  }

  .social-fb__post-thumb--more::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 6px;
  }

  .social-fb__post-thumb-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    z-index: 1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  }

  /* --- Post Footer (engagement + action links) ────────────────────────────── */
  .social-fb__post-footer {
    padding: 0.5rem 0.875rem 0.625rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: auto;         /* push footer to bottom of card */
    border-top: 1px solid #f0f0f0;
  }

  /* --- Engagement Stats ──────────────────────────────────────────────────── */
  .social-fb__engagement {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.75rem;
    color: var(--social-fb-date-fg);
  }

  .social-fb__stat {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
  }

  .social-fb__stat svg {
    flex-shrink: 0;
    opacity: 0.7;
  }

  /* --- Post Action Links ─────────────────────────────────────────────────── */
  .social-fb__post-actions {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
  }

  .social-fb__post-link {
    color: var(--social-fb-date-fg);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
  }

  .social-fb__post-link:hover {
    color: var(--social-fb-accent);
    text-decoration: underline;
  }

  .social-fb__post-action-sep {
    color: var(--social-fb-date-fg);
    opacity: 0.5;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     ACTIONS ROW — Load More + Follow
     ═══════════════════════════════════════════════════════════════════════════ */

  .social-fb__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: var(--social-fb-gap);
  }

  /* Load More Button */
  .social-fb__load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 2.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--social-fb-accent);
    background: var(--social-fb-card-bg);
    border: 2px solid var(--social-fb-accent);
    border-radius: calc(var(--social-fb-radius) * 0.67);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
  }

  .social-fb__load-more:hover {
    background: var(--social-fb-accent);
    color: #fff;
  }

  .social-fb__load-more:active {
    transform: scale(0.97);
  }

  /* Follow Button */
  .social-fb__follow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--social-fb-follow-fg);
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: calc(var(--social-fb-radius) * 0.5);
    transition: background 0.2s ease, color 0.2s ease;
  }

  .social-fb__follow:hover {
    background: rgba(24, 119, 242, 0.08);
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     SKELETON LOADING
     ═══════════════════════════════════════════════════════════════════════════ */

  .social-fb__skeleton .social-fb__post {
    border-color: transparent;
  }

  @keyframes social-fb-shimmer {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     RESPONSIVE
     ═══════════════════════════════════════════════════════════════════════════ */

  /* 2 columns for medium screens */
  @media (max-width: 900px) {
    :root {
      --social-fb-cols: 2;
    }
  }

  /* 1 column for small screens */
  @media (max-width: 600px) {
    :root {
      --social-fb-cols: 1;
    }

    .social-fb__avatar {
      width: 48px;
      height: 48px;
    }

    .social-fb__page-name {
      font-size: 1.1rem;
    }

    .social-fb__post-footer {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     DARK MODE
     ═══════════════════════════════════════════════════════════════════════════ */

  @media (prefers-color-scheme: dark) {
    .social-fb__wrap {
      --social-fb-card-bg: #1e1e1e;
      --social-fb-card-border: #333;
      --social-fb-text-fg: #ddd;
      --social-fb-date-fg: #999;
      --social-fb-title-fg: #eee;
    }
  }
}