/* ==========================================================================
   Feed page — the human-readable companion to /feed/.
   Uses the shared design tokens declared in main.css (:root --bc-*).
   ========================================================================== */
.bc-feed {padding:var(--bc-section-y) 0; background:#fff;}

/* Subscribe panel ---------------------------------------------------------- */
.bc-feed__subscribe {display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:clamp(24px, 4vw, 56px); align-items:center; padding:clamp(24px, 3.5vw, 40px); margin-bottom:clamp(32px, 4vw, 56px); background:var(--bc-bg-soft); border:1px solid var(--bc-line); border-radius:var(--bc-radius-lg); box-shadow:0 6px 16px rgba(23, 62, 119, 0.04);}
.bc-feed__subscribe-eyebrow {display:inline-flex; align-items:center; gap:8px; margin-bottom:12px; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:3px; color:var(--bc-secondary);}
.bc-feed__subscribe-eyebrow .bc-icon {font-size:18px;}
.bc-feed__subscribe-title {font-size:clamp(22px, 2.6vw, 32px); font-weight:800; letter-spacing:-0.025em; line-height:1.2;}
.bc-feed__subscribe-text {margin-top:12px; max-width:56ch; color:var(--bc-muted); font-size:15.5px;}
.bc-feed__subscribe-action {display:flex; flex-direction:column; gap:12px; align-items:stretch; min-width:280px;}
.bc-feed__url {display:block; padding:12px 16px; background:#fff; border:1px solid var(--bc-line); border-radius:var(--bc-radius-sm); font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:13px; color:var(--bc-muted); overflow-wrap:anywhere; user-select:all;}

/* Topic filters ------------------------------------------------------------ */
.bc-feed__filters {display:flex; flex-wrap:wrap; gap:6px; margin-bottom:clamp(28px, 3.5vw, 44px);}
.bc-feed__filter {padding:9px 18px; border-radius:var(--bc-radius-pill); font-size:13.5px; font-weight:600; color:var(--bc-text); background:var(--bc-bg-soft); border:1px solid transparent; transition:background .2s var(--bc-ease), color .2s var(--bc-ease), border-color .2s var(--bc-ease);}
.bc-feed__filter:hover {border-color:var(--bc-line); background:#fff;}
.bc-feed__filter.is-active {background:var(--bc-primary); color:#fff; border-color:var(--bc-primary);}

/* Section head ------------------------------------------------------------- */
.bc-feed__head {display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:clamp(20px, 2.4vw, 28px);}
.bc-feed__head-title {font-size:clamp(20px, 2.2vw, 26px); font-weight:700; letter-spacing:-0.02em;}
.bc-feed__head-count {font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:2px; color:var(--bc-muted);}

/* Grid --------------------------------------------------------------------- */
.bc-feed__grid {display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(20px, 2.4vw, 30px);}

/* Card --------------------------------------------------------------------- */
.bc-feed-card {position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--bc-line); border-radius:var(--bc-radius-md); overflow:hidden; transition:transform .35s var(--bc-ease), box-shadow .35s var(--bc-ease), border-color .35s var(--bc-ease);}
.bc-feed-card:hover {transform:translateY(-4px); box-shadow:var(--bc-shadow-md); border-color:rgba(var(--bc-secondary-rgb), 0.35);}
.bc-feed-card:focus-within {box-shadow:0 0 0 3px rgba(var(--bc-secondary-rgb), 0.35); border-color:var(--bc-secondary);}

.bc-feed-card__media {position:relative; aspect-ratio:16 / 10; background:var(--bc-bg-soft); overflow:hidden;}
.bc-feed-card__img {width:100%; height:100%; object-fit:cover; transition:transform .6s var(--bc-ease);}
.bc-feed-card:hover .bc-feed-card__img {transform:scale(1.04);}
.bc-feed-card__placeholder {display:flex; align-items:center; justify-content:center; width:100%; height:100%; background:linear-gradient(135deg, var(--bc-primary), var(--bc-secondary));}
.bc-feed-card__placeholder .bc-icon {font-size:40px; color:rgba(255, 255, 255, 0.5);}
.bc-feed-card__chip {position:absolute; top:14px; left:14px; padding:6px 13px; border-radius:var(--bc-radius-pill); background:rgba(255, 255, 255, 0.94); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); font-size:11.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--bc-primary);}

.bc-feed-card__body {display:flex; flex-direction:column; flex:1; padding:clamp(18px, 2vw, 24px);}
.bc-feed-card__meta {display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:10px; font-size:13px; color:var(--bc-muted);}
.bc-feed-card__dot {opacity:.45;}
.bc-feed-card__title {margin-bottom:10px; font-size:19px; font-weight:700; letter-spacing:-0.02em; line-height:1.3;}
.bc-feed-card__link {transition:color .2s var(--bc-ease);}
/* Stretches the title link across the card so the whole surface is clickable
   without adding a second, duplicate link for assistive tech to announce. */
.bc-feed-card__link::after {content:""; position:absolute; inset:0; z-index:1;}
.bc-feed-card:hover .bc-feed-card__link {color:var(--bc-primary);}
.bc-feed-card__excerpt {margin-bottom:18px; color:var(--bc-muted); font-size:14.5px; line-height:1.65;}

.bc-feed-card__foot {display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:16px; border-top:1px solid var(--bc-line-soft);}
.bc-feed-card__author {display:inline-flex; align-items:center; gap:8px; min-width:0; font-size:13px; font-weight:500; color:var(--bc-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.bc-feed-card__avatar {display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; flex-shrink:0; border-radius:50%; background:var(--bc-primary); color:#fff; font-size:12px; font-weight:700; text-transform:uppercase;}
.bc-feed-card__cta {display:inline-flex; align-items:center; gap:5px; flex-shrink:0; font-size:13.5px; font-weight:600; color:var(--bc-primary);}
.bc-feed-card__cta .bc-icon {font-size:16px; transition:transform .25s var(--bc-ease);}
.bc-feed-card:hover .bc-feed-card__cta .bc-icon {transform:translate(3px, -3px);}

/* Empty state -------------------------------------------------------------- */
.bc-feed__empty {text-align:center; padding:clamp(48px, 8vw, 96px) 20px; color:var(--bc-muted);}
.bc-feed__empty .bc-icon {font-size:56px; color:var(--bc-line); margin:0 auto 16px;}
.bc-feed__empty-title {margin-bottom:8px; font-size:clamp(20px, 2.4vw, 26px); color:var(--bc-text);}
.bc-feed__empty-text {max-width:46ch; margin:0 auto 24px;}

/* Responsive --------------------------------------------------------------- */
@media (max-width: 1024px) {
.bc-feed__grid {grid-template-columns:repeat(2, minmax(0, 1fr));}
.bc-feed__subscribe {grid-template-columns:1fr;}
.bc-feed__subscribe-action {min-width:0;}
}

@media (max-width: 720px) {
.bc-feed__filters {flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch;}
.bc-feed__filter {white-space:nowrap;}
}

@media (max-width: 600px) {
.bc-feed__grid {grid-template-columns:1fr;}
}

@media (prefers-reduced-motion: reduce) {
.bc-feed-card, .bc-feed-card__img, .bc-feed-card__cta .bc-icon {transition:none;}
.bc-feed-card:hover {transform:none;}
.bc-feed-card:hover .bc-feed-card__img {transform:none;}
}