/**
 * FB Auto Feed Pro — Frontend Styles
 * Version: 1.0.0
 */

/* ── CSS Custom Properties ─────────────────────────────────────── */
:root {
  --sk-primary:       #1877f2;
  --sk-primary-dark:  #0d6efd;
  --sk-card-bg:       #ffffff;
  --sk-border:        #e4e6ea;
  --sk-text:          #1c1e21;
  --sk-text-muted:    #65676b;
  --sk-radius:        12px;
  --sk-shadow:        0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.06);
  --sk-shadow-hover:  0 4px 12px rgba(0,0,0,.15);
  --sk-gap:           20px;
  --sk-transition:    all .2s ease;
}

/* ── Base ──────────────────────────────────────────────────────── */
.sk-feed *,
.sk-feed *::before,
.sk-feed *::after {
  box-sizing: border-box;
}

.sk-feed {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--sk-text);
  line-height: 1.5;
}

/* ── GDPR Notice ────────────────────────────────────────────────── */
.sk-gdpr-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 18px;
  margin-bottom: 20px;
  background: #f0f7ff;
  border: 1px solid #bfdbfe;
  border-radius: var(--sk-radius);
  font-size: .875rem;
  color: #1e3a5f;
}

.sk-gdpr-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }

/* ── Notice states ──────────────────────────────────────────────── */
.sk-notice {
  padding: 14px 18px;
  border-radius: var(--sk-radius);
  margin: 12px 0;
  font-size: .9rem;
}
.sk-notice--warning  { background:#fff8e1; border:1px solid #fbbf24; color:#78350f; }
.sk-notice--error    { background:#fff1f2; border:1px solid #fca5a5; color:#991b1b; }
.sk-notice--info     { background:#f0f9ff; border:1px solid #7dd3fc; color:#075985; }

/* ═════════════════════════════════════════════════════════════════
   GRID LAYOUT
═══════════════════════════════════════════════════════════════════ */
.sk-layout--grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sk-gap);
}

@media (max-width: 900px) {
  .sk-layout--grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .sk-layout--grid { grid-template-columns: 1fr; }
}

/* ═════════════════════════════════════════════════════════════════
   LIST LAYOUT
═══════════════════════════════════════════════════════════════════ */
.sk-layout--list {
  display: flex;
  flex-direction: column;
  gap: var(--sk-gap);
  max-width: 760px;
  margin-inline: auto;
}

.sk-layout--list .sk-post__media {
  border-radius: var(--sk-radius) var(--sk-radius) 0 0;
}

/* ═════════════════════════════════════════════════════════════════
   CAROUSEL LAYOUT  (Swiper.js wrapper)
═══════════════════════════════════════════════════════════════════ */
.sk-layout--carousel {
  position: relative;
  padding-bottom: 40px;
}

.sk-layout--carousel .sk-post {
  height: auto;
}

.sk-layout--carousel .swiper-pagination {
  bottom: 0;
}

.sk-layout--carousel .swiper-button-prev,
.sk-layout--carousel .swiper-button-next {
  color: var(--sk-primary);
}

/* ═════════════════════════════════════════════════════════════════
   POST CARD
═══════════════════════════════════════════════════════════════════ */
.sk-post {
  background: var(--sk-card-bg);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius);
  box-shadow: var(--sk-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--sk-transition);
}

.sk-post:hover {
  box-shadow: var(--sk-shadow-hover);
  transform: translateY(-2px);
}

/* ── Media ─────────────────────────────────────────────────────── */
.sk-post__media {
  position: relative;
  overflow: hidden;
  background: #f0f2f5;
  aspect-ratio: 16 / 9;
}

.sk-post__media--photo { aspect-ratio: 4 / 3; }

.sk-post__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}

.sk-post:hover .sk-post__image { transform: scale(1.03); }

/* Video thumb / play button */
.sk-post__video-thumb {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

.sk-post__play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.55);
  pointer-events: none;
  transition: var(--sk-transition);
}

.sk-post:hover .sk-post__play-icon { font-size: 4rem; }

.sk-post__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Body ──────────────────────────────────────────────────────── */
.sk-post__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
}

/* ── Message ───────────────────────────────────────────────────── */
.sk-post__message,
.sk-post__story {
  margin: 0;
  font-size: .9375rem;
  color: var(--sk-text);
  white-space: pre-line;
  word-break: break-word;
}

.sk-post__read-more {
  color: var(--sk-primary);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}

.sk-post__read-more:hover { text-decoration: underline; }

/* ── Link preview ──────────────────────────────────────────────── */
.sk-post__link-preview {
  padding: 12px;
  background: #f0f2f5;
  border-radius: 8px;
}

.sk-post__link-title {
  display: block;
  font-weight: 700;
  font-size: .9375rem;
  color: var(--sk-text);
  text-decoration: none;
  margin-bottom: 4px;
}

.sk-post__link-title:hover { color: var(--sk-primary); }

.sk-post__link-description {
  margin: 0;
  font-size: .8125rem;
  color: var(--sk-text-muted);
}

/* ── Footer ────────────────────────────────────────────────────── */
.sk-post__footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--sk-border);
  padding-top: 12px;
}

.sk-post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  font-size: .8125rem;
  color: var(--sk-text-muted);
}

.sk-post__author a {
  color: var(--sk-text);
  text-decoration: none;
  font-weight: 600;
}

.sk-post__author a:hover { color: var(--sk-primary); }

.sk-post__date { font-size: .8125rem; }

/* ── Stats ─────────────────────────────────────────────────────── */
.sk-post__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.sk-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .8125rem;
  color: var(--sk-text-muted);
}

.sk-stat__icon { font-size: .9rem; }

/* ── Actions / FB link ─────────────────────────────────────────── */
.sk-post__actions {
  display: flex;
}

.sk-post__fb-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--sk-primary);
  color: #fff;
  border-radius: 6px;
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: none;
  transition: var(--sk-transition);
}

.sk-post__fb-link:hover {
  background: var(--sk-primary-dark);
  color: #fff;
}

.sk-fb-icon { flex-shrink: 0; }

/* ── Dark mode support ─────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --sk-card-bg:    #242526;
    --sk-border:     #3e4042;
    --sk-text:       #e4e6eb;
    --sk-text-muted: #b0b3b8;
  }

  .sk-post__link-preview { background: #3a3b3c; }
  .sk-post__media { background: #3a3b3c; }

  .sk-gdpr-notice {
    background: #1e2a3a;
    border-color: #3b5998;
    color: #90b8e0;
  }
}

/* ── Responsive tweaks ─────────────────────────────────────────── */
@media (max-width: 480px) {
  .sk-post__body { padding: 12px; }

  .sk-post__fb-link {
    width: 100%;
    justify-content: center;
  }
}