/* =========================================
   BDLP Bluesky Feed — Front-end styles
   Design tokens are injected via PHP:
   --bsky-accent, --bsky-icons, --bsky-btn-bg, --bsky-btn-text, --bsky-link
   --bsky-img-h, --bsky-img-radius, --bsky-card-radius, --bsky-btn-radius, --bsky-avatar-radius
   --bsky-img-h-sm, --bsky-img-h-md, --bsky-img-h-lg
   --bsky-font-family, --bsky-font-header, --bsky-font-body, --bsky-font-button
   --bsky-font-weight, --bsky-text-decor, --bsky-letter-space, --bsky-line-height
   ========================================= */
:root{
  --bsky-surface: #fff;
  --bsky-border:  #eee;
  --bsky-text:    #111;
  --bsky-muted:   #666;
  --bsky-subtext: #777;
}

/* Settings-driven colors */
.bsky-action, .bsky-share { color: var(--bsky-icons, #c4d600); }
.bsky-follow-btn--full    { background: var(--bsky-btn-bg, #c4d600); color: var(--bsky-btn-text, #fff); }
.bsky-text a              { color: var(--bsky-link, #1e73be); }
.bsky-header-handle-title { color: var(--bsky-accent, #c4d600); }

/* =========================
   Container
   ========================= */
.bsky-feed {
  display: grid;
  gap: 1.25rem;
  font-family: var(--bsky-font-family, inherit);
  font-weight: var(--bsky-font-weight, 400);
  letter-spacing: var(--bsky-letter-space, normal);
  line-height: var(--bsky-line-height, 1.5);
}
.bsky-feed h2,
.bsky-feed .bsky-header-handle-title {
  font-size: var(--bsky-font-header, clamp(1.05rem, 1.6vw + 0.6rem, 1.5rem));
  text-decoration: var(--bsky-text-decor, none);
}
.bsky-feed p {
  font-size: var(--bsky-font-body, 1rem);
}
.bsky-follow-btn {
  font-size: var(--bsky-font-button, 1rem);
}

/* Optional inner padding for post body */
.bsky-wrapper { padding: 1.25rem 1rem; }

/* =========================
   Compact Profile Header (top card)
   ========================= */
.bsky-header {
  background: var(--bsky-surface);
  border: 1px solid var(--bsky-border);
  border-radius: var(--bsky-card-radius, 12px);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.bsky-header-top {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
}

/* Avatars honor settings */
.bsky-header-avatar--sm,
.bsky-post-avatar--sm { border-radius: var(--bsky-avatar-radius, 50%); }

.bsky-header-avatar--sm {
  width: 56px;
  height: 56px;
  object-fit: cover;
  flex-shrink: 0;
}

/* Identity */
.bsky-header-identity {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

/* Fluid title size across viewports (color via --bsky-accent above) */
.bsky-header-handle-title {
  font-weight: 700;
  text-decoration: none;
  font-size: clamp(1.05rem, 1.6vw + 0.6rem, 1.5rem);
}
.bsky-header-handle-title:hover { text-decoration: underline; }

.bsky-header-username {
  font-size: .92rem;
  color: var(--bsky-muted);
}

/* Stats row: wraps on narrow screens */
.bsky-header-stats--center {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: .6rem;
  text-align: center;
}
@media (max-width: 480px) {
  .bsky-header-stats--center { gap: .45rem; }
}
.bsky-stat-num { font-weight: 700; }
.bsky-stat-label { font-size: .85rem; color: var(--bsky-muted); }

/* Full-width follow button (radius via settings) */
.bsky-follow-btn--full {
  display: block;
  margin-top: .5rem;
  text-align: center;
  padding: .6rem .9rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--bsky-btn-radius, 9999px);
}
.bsky-follow-btn--full i { margin-right: .4rem; }

/* =========================
   Posts Stream
   ========================= */
.bsky-post {
  padding: 1rem 0 0;
  border-bottom: 1px solid var(--bsky-border);
  background: transparent;
}
.bsky-post:last-child { border-bottom: none; }

/* Post header (avatar left, handle on top, time below) */
.bsky-post-header { margin-bottom: .5rem; }

.bsky-author-row {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: .85rem;
  flex-wrap: wrap;
}

.bsky-post-avatar--sm {
  width: 28px;
  height: 28px;
  object-fit: cover;
  margin-top: .15rem;  /* align with first line */
  flex-shrink: 0;
}

.bsky-author-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.bsky-handle-title {
  font-weight: 700;
  color: var(--bsky-text);
  text-decoration: none;
  font-size: clamp(0.98rem, 1.2vw + 0.55rem, 1.125rem);
}
.bsky-handle-title:hover { text-decoration: underline; }

.bsky-time {
  margin-top: .1rem;
  font-size: .85rem;
  color: var(--bsky-subtext);
}

/* Body */
.bsky-text {
  margin: .5rem 0 1rem;
  white-space: pre-wrap;
  font-size: clamp(0.95rem, 0.5vw + 0.8rem, 1rem);
}

/* Media (height & radius from settings + responsive overrides) */
.bsky-post-image {
  display: block;
  width: 100%;
  height: var(--bsky-img-h, 150px);
  overflow: hidden;
  position: relative;
  border-radius: var(--bsky-img-radius, 8px);
}
.bsky-post-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Responsive image heights driven by settings */
@media (max-width: 480px) {
  .bsky-post-image { height: var(--bsky-img-h-sm, 130px); }
}
@media (min-width: 481px) and (max-width: 768px) {
  .bsky-post-image { height: var(--bsky-img-h-md, 150px); }
}
@media (min-width: 769px) {
  .bsky-post-image { height: var(--bsky-img-h-lg, 180px); }
}

/* Play overlay for video posts */
.bsky-post-image.is-video .bsky-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.bsky-post-image.is-video .bsky-play i {
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: rgba(0,0,0,.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

/* =========================
   Actions Bar
   ========================= */
.bsky-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .75rem;
  flex-wrap: wrap;               /* wrap on small screens */
}

.bsky-actions-left,
.bsky-actions-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.bsky-action,
.bsky-share {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .95rem;
  color: var(--bsky-icons, #c4d600);
  text-decoration: none;
  opacity: .85;
  transition: opacity .2s ease, color .2s ease;
}

.bsky-action:hover,
.bsky-share:hover {
  opacity: 1;
  color: var(--bsky-text);
}

.bsky-count,
.bsky-share-label { font-size: .9rem; }

.bdlp-banner { background-color: #323232!important; height: 100px!important; }