/* =====================================================================
   Feed page: signed out, signed in (feed + Saved view) and the Topics you follow rail.
   The Manage following modal lives in manage.css.
   ===================================================================== */
.feed{background:var(--surface-background);padding-top:calc(122px + var(--space-64));padding-bottom:var(--space-80)}
.feed__wrap{width:min(1200px,100% - 48px);margin-inline:auto}
/* Page head (Figma Account_Hero): "New for you" eyebrow + "Your feed" (text-5xl) */
.feed__head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-16);padding-bottom:var(--space-40)}
.feed__titles{display:flex;flex-direction:column;gap:var(--space-8)}
.feed__eyebrow{margin:0;font:var(--text-xs);text-transform:uppercase;color:var(--text-secondary)}
.feed__title{font:var(--text-5xl);text-transform:uppercase;color:var(--text-primary);margin:0}
.feed__h2{font:var(--text-2xl);color:var(--text-primary);margin:0}
.feed__sub{font:var(--text-base);color:var(--text-secondary);margin:var(--space-8) 0 0}
[hidden]{display:none!important}

/* ---------- Signed out ---------- */
/* Promo card (Figma Sign_up_promo 1455:40257): white, 1px border, radius 16, padding 32; copy 452 + Featured Story Card 332 that rotates */
.feed-out__promo{box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-32);max-width:1053px;padding:var(--space-32);background:var(--surface-default);border:1px solid var(--border-default);border-radius:var(--radius-lg)}
.feed-out__copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-16);flex:1;min-width:0}
.feed-out__copy .feed-out__title{max-width:452px}
.feed-out__title{font:var(--text-3xl);text-transform:uppercase;color:var(--text-primary);margin:0}
.feed-out__points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-16)}
.feed-out__points li{display:flex;align-items:center;gap:var(--space-12);font:var(--text-base);color:var(--text-primary)}
.feed-out__points li::before{content:"";flex:none;width:8px;height:8px;border-radius:var(--radius-full);background:var(--accent-default)}
.feed-out__cta{display:flex;gap:var(--space-12);flex-wrap:wrap}
.feed-out__rotator{position:relative;flex:none;display:grid;width:332px}
.feed-out__slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s .6s}
.feed-out__slide.is-active{opacity:1;visibility:visible;transition:opacity .6s ease}
.feed-out__slide .story-card{height:100%;max-width:100%}
/* Preview of the feed (Figma Feed_Post ×3 + Gradient 1457:67753): 680 wide, fades into the page background */
.feed-out__peek{position:relative;display:flex;flex-direction:column;gap:var(--space-12);width:680px;max-width:100%;max-height:840px;overflow:hidden;margin-top:var(--space-48);pointer-events:none;user-select:none}
.feed-out__fade{position:absolute;left:0;right:0;bottom:0;height:278px;background:linear-gradient(to top,var(--surface-background),rgba(255,255,255,0))}
@media (prefers-reduced-motion:reduce){.feed-out__slide,.feed-out__slide.is-active{transition:none}}

/* ---------- Signed in: feed ---------- */

.feed-in__more{display:flex;justify-content:center;margin-top:var(--space-40)}
.feed-in__more:empty,.feed-in__more:not(:has(> :not([hidden]))){display:none}  /* no 40 gap when Show more is hidden (Saved view) */

/* Series card */
.feed-series{display:flex;flex-direction:column;background:var(--card-bg-default);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;height:100%}
.feed-series__media{position:relative;display:block;aspect-ratio:16/9;background:var(--neutral-900)}
.feed-series__media>img:first-child{width:100%;height:100%;object-fit:cover}
.feed-series__logo{position:absolute;left:var(--space-16);bottom:var(--space-16);width:55%;max-height:40%;object-fit:contain;object-position:left bottom}
.feed-series__body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-8);padding:var(--space-16) var(--space-16) var(--space-20)}
.feed-series__kicker{font:var(--text-xs);color:var(--text-secondary);text-transform:uppercase;margin:0}
.feed-series__title{font:var(--text-headline-card);margin:0}
.feed-series__title a{color:var(--text-primary);text-decoration:none}
.feed-series__desc{font:var(--text-sm);color:var(--text-secondary);margin:0 0 var(--space-8);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Sidebar */
.feed-side{display:flex;flex-direction:column;gap:var(--space-24);position:sticky;top:120px}
.feed-side__box{background:var(--surface-default);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-20);display:flex;flex-direction:column;gap:var(--space-12);align-items:flex-start}
.feed-side__title{font:var(--text-xl);color:var(--text-primary);margin:0}
.feed-side__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;width:100%}
.feed-up{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-12) 0;border-top:1px solid var(--border-subtle)}
.feed-up:first-child{border-top:0;padding-top:0}
.feed-up__date{font:var(--text-xs);color:var(--text-secondary);text-transform:uppercase}
.feed-up__title{font:var(--text-base);color:var(--text-primary)}
.feed-up__tag{font:var(--text-xs);color:var(--text-secondary)}
.feed-side__empty,.feed-side__sum{font:var(--text-sm);color:var(--text-secondary);margin:0}
.feed-side__link{display:inline-flex;align-items:center;gap:var(--space-8);font:var(--text-sm);color:var(--text-primary);text-decoration:none}
.feed-side__link:hover{text-decoration:underline}
.feed-side__link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}


/* Saved chip (Figma 1481:44136): divider, bookmark 16px + "Saved N"; same size and states as the type chips */

/* Saved view (Figma 1480:43961): single column, post header "Saved · Topic · 2d ago" */
.feed-saved{display:flex;flex-direction:column;gap:var(--space-24)}
/* Saved empty states (Figma Empty State 1480:44829 / 2265:122287 / phone 2237:115542): full column width, gap 12, no padding,
   24 under the chips, Large (48) button */
.feed-saved__empty .empty-state,[data-saved-type-empty] .empty-state{max-width:none;gap:var(--space-12);padding:0}
.feed-saved__empty .empty-state .btn,[data-saved-type-empty] .empty-state .btn{height:48px}
.feed-saved__empty a.btn{text-decoration:none}
/* Suggested for you (Prompt 31 Part 7, no Figma frame yet): under the empty-state line, 40 below it on desktop / tablet, 32 on phones;
   section title as the rail titles (text-xl, uppercase), 20 to the posts; the posts are the Feed's (Feed Post + shared cards) */
.feed-suggest{display:flex;flex-direction:column;gap:var(--space-20);margin-top:var(--space-40);text-align:left}
.feed-suggest__title{margin:0;font:var(--text-xl);text-transform:uppercase;color:var(--text-primary)}
@media (max-width:599px){.feed-suggest{margin-top:var(--space-32);gap:var(--space-16)}}

/* Rail: Topics you follow (Figma 1453:52804): Follow Items Compact Following, gap 16; Manage (Secondary Small, fills) + See all topics (Ghost Small) */
.feed-follows{gap:var(--space-16)}
.feed-follows__list{display:flex;flex-wrap:wrap;gap:var(--space-16);width:100%}
.feed-follows__list .follow-item--compact{background:var(--surface-elevated);border:1px solid var(--neutral-200)}
.feed-follows__more{align-self:center;padding:var(--space-4) var(--space-8);border:0;border-radius:var(--radius-sm);background:none;font:var(--text-xs);color:var(--text-secondary);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.feed-follows__more:hover{color:var(--text-primary)}
.feed-follows__more:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}
.feed-follows__empty{margin:0;font:var(--text-sm);color:var(--text-secondary)}
.feed-follows__actions{display:flex;align-items:center;gap:var(--space-12);width:100%}
.feed-follows__manage{flex:1}
.feed-follows__actions a.btn{text-decoration:none}
@media (max-width:360px){.feed-follows__actions{flex-wrap:wrap}.feed-follows__manage{flex:1 0 100%}}

/* Mobile: the chip row scrolls sideways (no wrap, no scrollbar) */
@media (max-width:640px){
}

/* Prototype switch */
.feed-demo{display:flex;align-items:center;justify-content:center;gap:var(--space-8);margin-top:var(--space-64);font:var(--text-xs);color:var(--text-secondary)}
.feed-demo button{appearance:none;font:var(--text-xs);background:transparent;border:1px dashed var(--border-default);border-radius:var(--radius-full);padding:var(--space-8) var(--space-12);color:var(--text-secondary);cursor:pointer}
.feed-demo button.is-active{border-style:solid;color:var(--text-primary);border-color:var(--border-strong)}

@media (max-width:1100px){
  .feed-out__promo{flex-direction:column;align-items:stretch}
  .feed-out__copy{width:auto}
  .feed-out__rotator{width:100%;max-width:420px}

}

/* Saved › Highlights (Figma Saved / Highlight Card 1685:78867) */
.feed-hl{display:flex;flex-direction:column;gap:var(--space-24)}
.feed-hl[hidden]{display:none}
.hl-card{box-sizing:border-box;display:flex;flex-direction:column;gap:var(--space-16);padding:var(--space-24);border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--card-bg-default);box-shadow:0 2px 4px rgba(0,0,0,.03);transition:background-color .2s,border-color .2s}
.hl-card:hover,.hl-card.is-hover{background:var(--card-bg-hover);border-color:var(--border-subtle)}
.hl-card__text{margin:0;padding:var(--space-8) var(--space-12);border-radius:4px;background:var(--surface-selected);font:400 22px/32px var(--font-body);color:var(--text-primary)}
.hl-card__meta{display:flex;flex-direction:column;gap:var(--space-2)}
.hl-card__title{margin:0;font:var(--text-sm);color:var(--text-primary)}
.hl-card__by{margin:0;font:var(--text-xs);color:var(--card-text-secondary)}
.hl-card__actions{display:flex;align-items:center;gap:var(--space-8)}
.hl-card__sp{flex:1}
.hl-card__icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:var(--space-8);box-sizing:border-box;border:0;border-radius:var(--radius-md);background:none;color:var(--text-primary);cursor:pointer}
.hl-card__icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hl-card__icon:hover{background:var(--button-nav-secondary-bg-hover)}
.hl-card__icon:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring-accent)}
@media (max-width:767px){.hl-card{padding:var(--space-16)}.hl-card__text{font:400 16px/26px var(--font-body)}.hl-card__title{font-size:13px;line-height:18px}}


/* ===== Signed in (Prompt 20; Figma 1453:52543): 680 column + 472 rail 48 apart; Tab bar 54, 24, chips, 24, Feed posts 24 apart ===== */
.feed-in__layout{display:grid;grid-template-columns:minmax(0,680px) minmax(0,472px);gap:var(--space-48);align-items:start;justify-content:start}
.feed-in__main{display:flex;flex-direction:column;min-width:0}
.feed-in__main>[data-feed-tabs]{margin-bottom:var(--space-24)}
.feed-chips{display:flex;gap:var(--space-8);flex-wrap:nowrap;margin-bottom:var(--space-24)}
.filter-chip__count{font:var(--text-xs);color:inherit;opacity:.8}
.feed-savedbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);margin:calc(-1 * var(--space-8)) 0 var(--space-16);font:var(--text-sm);color:var(--text-secondary)}
.feed-list,.feed-saved{display:flex;flex-direction:column;gap:var(--space-24)}
.feed-list .story-card,.feed-saved .story-card{max-width:none;width:100%}
.feed-list .video-card,.feed-saved .video-card{height:auto}
.feed-list .video-card__thumb,.feed-saved .video-card__thumb{aspect-ratio:16/9}
/* Saved keeps the orientation/aspect from the card that was bookmarked (Watch Guide portrait vs landscape). */
.feed-saved .video-card--vertical{width:min(100%,280px)}
.feed-saved .video-card--vertical .video-card__thumb{aspect-ratio:278/494;flex:none;min-height:0}
.feed-saved .video-card--horizontal .video-card__thumb{aspect-ratio:16/9;flex:none;min-height:0}
.feed-saved:not([hidden])~.feed-hl:not([hidden]){margin-top:var(--space-24)}
.feed-side__box .feed-side__title{font:var(--text-xl);text-transform:uppercase}
.feed-side__all{width:100%}
.feed-up{gap:var(--space-2);padding:var(--space-8) 0;border-top:0}
.feed-up__date{text-transform:none}
.feed-shortcuts{display:none;gap:var(--space-8)}
.feed-sc__sub{margin:var(--space-4) 0 0;font:var(--text-sm);color:var(--text-secondary)}
.feed-sc__body{display:flex;flex-direction:column;gap:var(--space-16)}
.feed-sc__body[hidden]{display:none}
.feed-sc__all{width:100%}
.feed-sc .feed-follows__list .follow-item--compact{background:var(--surface-elevated);border:1px solid var(--neutral-200)}

/* Tablet + phone: one column, the rail opens from the Following / Coming up buttons in the hero */
@media (max-width:1023px){
  .feed-in__layout{grid-template-columns:minmax(0,1fr)}
  .feed-side{display:none}
  [data-auth="in"] .feed-shortcuts:not([hidden]){display:flex}
  .feed-chips{overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--feed-pad,var(--space-32)));padding:var(--space-2) var(--feed-pad,var(--space-32))}
  .feed-chips::-webkit-scrollbar{display:none}
  /* Following / Coming up = centered 480 modal over a scrim (tablet; srp-sheet is a bottom sheet only below 600) */
  .feed-sc{display:block;position:fixed;inset:0;z-index:95}
  .feed-sc[hidden]{display:none}
  .feed-sc .srp-sheet__scrim{position:absolute;inset:0;background:rgba(20,18,15,.5);opacity:0;transition:opacity .25s}
  .feed-sc.is-open .srp-sheet__scrim{opacity:1}
}
@media (min-width:600px) and (max-width:1023px){
  .feed{padding-top:calc(var(--nav-h,120px) + var(--space-40))}
  .feed__wrap{width:calc(100% - 2 * var(--space-32))}
  .feed__head{padding-bottom:var(--space-24)}
  .feed__title{font:var(--text-5xl)}
  .feed-sc__panel{position:absolute;left:50%;top:50%;bottom:auto;right:auto;width:min(480px,calc(100% - 64px));max-height:calc(100dvh - 64px);transform:translate(-50%,-48%);opacity:0;
    padding:var(--space-28);border-radius:var(--radius-xl);gap:var(--space-16);transition:transform .25s var(--ease-out),opacity .2s}
  .feed-sc.is-open .feed-sc__panel{transform:translate(-50%,-50%);opacity:1}
  .feed-sc .srp-sheet__grabber{display:none}
  .feed-sc .srp-sheet__title{font:var(--text-3xl)}
}
/* Phone (2237:115337, Account_Hero 2374:136488): App chrome; title left, Following + Coming up as icon-only 40 buttons
   (24 icon) bottom-right on the title row; Tab bar 358; chips scroll; mobile cards */
@media (max-width:599px){
  .feed{padding-top:var(--space-24);padding-bottom:var(--space-32)}
  .feed__wrap{width:100%;padding:0 var(--space-16);box-sizing:border-box;--feed-pad:var(--space-16)}
  .feed__head{flex-direction:row;align-items:flex-end;justify-content:space-between;padding-bottom:var(--space-16);gap:var(--space-16)}
  .feed__title{font:var(--text-mobile-5xl)}
  .feed-shortcuts .btn{width:40px;padding:var(--space-8)}
  .feed-shortcuts .btn__icon{width:24px;height:24px}
  .feed-shortcuts .btn__label{display:none}
  .feed-in__main>[data-feed-tabs]{margin-bottom:var(--space-16)}
  .feed-chips{margin-bottom:var(--space-16)}
  .feed-list,.feed-saved{gap:var(--space-20)}
  .feed-list .story-card__title,.feed-saved .story-card__title{font:var(--text-card-title-sm)}
  .feed-post__head{font:var(--text-mobile-sm)}
  .feed-savedbar{font:var(--text-mobile-xs)}
  .feed-sc .srp-sheet__title{font:var(--text-mobile-5xl)}
}

/* Feed story card = Figma Feed_Post › Story Card (desktop 1453:52643, tablet 2237:49807): image 16:9 from the shared card rule (680 × 383; Prompt 33), content min 140 / padding 8·16 / gap 8,
   Small badge, title card-title 16/20 (3 lines max), 28px avatar, author + read time 12/16. 2026-10-27 (Isabel: cards didn't preview like Figma). */
.feed-list .story-card__content,.feed-saved .story-card__content{min-height:140px}
.feed-list .story-card__title,.feed-saved .story-card__title{font:var(--text-card-title);-webkit-line-clamp:3}
.feed-list .story-card :is(.author__name,.story-card__meta),.feed-saved .story-card :is(.author__name,.story-card__meta){font:var(--text-xs)}
/* Phone = Story Card/Compact (Figma 2237:115360): image 16:9 (shared rule), content 10 / 12 / 12 padding, gap 6, Small badge + ⋮, title 14/18, 20px avatar + name 12/16, no read time */
@media (max-width:599px){
  .feed-list .story-card__content,.feed-saved .story-card__content{min-height:0;padding:10px var(--space-12) var(--space-12);gap:var(--space-6)}
  .feed-list .story-card__title,.feed-saved .story-card__title{font:var(--text-card-title-sm);-webkit-line-clamp:2}
  .feed-list .story-card .author__avatar,.feed-saved .story-card .author__avatar{width:20px;height:20px}
  .feed-list .story-card .author__name,.feed-saved .story-card .author__name{font:var(--text-mobile-xs)}
  .feed-list .story-card .story-card__meta,.feed-saved .story-card .story-card__meta{display:none}
}
/* Feed cards show at once (no scroll fade-in): a post entering at the bottom of the screen looked like an empty preview. 2026-10-27 */
.js .feed :is(.feed-list,.feed-saved,.feed-hl) .reveal{opacity:1;transform:none;transition:none}
/* Feed event card = Figma Feed_Post › Event Card (1453:52673 / phone 2237:115367): no image, 8 between rows, Compact action strip (42 high, 32 buttons) */
main.feed .feed-post .event-card__content{gap:var(--space-8)}
@media (max-width:599px){   /* phone feed event card (2237:115367): 4 between badges, title, "City • Time" and the strip; 152 high */
  main.feed .feed-post .event-card{gap:var(--space-4)}
  main.feed .feed-post .event-card__title{margin-top:0}
  main.feed .feed-post .event-card__actions{padding-top:0}
}
/* Feed video card = Figma Feed_Post › Video Card (1453:52716 / phone 2237:115374): title 14/18, meta 12/16, meta row holds the ⋮ (32) */
main.feed .feed-post .video-card__title{font:var(--text-card-title-sm)}
main.feed .feed-post .video-card__meta{font:var(--text-xs)}
main.feed .feed-post .video-card__meta-row{min-height:32px}