/* This sheet affects Feed presentation and optional Like or Pass media only. */
.feed-page [role="tabpanel"][hidden] { display: none; }
.feed-reference-title { display: none; }
.likepass-reference-image:not([hidden]) {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  pointer-events: none;
}
.likepass-card.has-reference-image .likepass-card-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 28%, rgba(0, 0, 0, .88));
  pointer-events: none;
}
.likepass-card.has-reference-image :is(.likepass-card-head, .likepass-card-copy) { position: relative; z-index: 1; }
.likepass-card.has-reference-image .likepass-vote-badge { z-index: 2; }
.likepass-card.has-reference-image :is(.likepass-card-copy h2, .card-description) { color: #fff; }
.likepass-card.has-reference-image :is(.tag, .trend-score) { background: rgba(15, 17, 21, .7); color: #fff; }

@media (max-width: 768px) {
  .feed-page .feed-mobile-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    top: calc(84px + env(safe-area-inset-top, 0px));
    padding: 8px max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px));
    background: #fff;
  }
  .feed-mobile-tabs button {
    flex: 0 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: 10px 18px;
    border: var(--mobile-border);
    border-radius: var(--mobile-pill-radius);
    background: #fff;
    color: var(--text);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
  }
  .feed-mobile-tabs button.is-active { background: var(--brand-gradient); color: #fff; border-color: transparent; }
  .feed-page :is([role="tab"], .feed-profile-follow, .feed-profile-identity, .feed-trend-title):focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
  .feed-page .feed-card-top { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 12px; align-items: center; }
  .feed-page .feed-status-badges { grid-column: 1; grid-row: 1; max-width: none; justify-self: start; }
  .feed-page .feed-card-top .tag { white-space: normal; overflow-wrap: anywhere; font-size: 12px; line-height: 1.3; }
  .feed-page .feed-user { grid-column: 2; grid-row: 1; justify-content: flex-start; flex-direction: row-reverse; text-align: right; width: 100%; gap: 8px; }
  .feed-page .feed-avatar { flex: 0 0 44px; width: 44px; height: 44px; }
  .feed-page .feed-user-copy { min-width: 0; }
  .feed-page .feed-meta-line strong { font-size: 14px; }
  .feed-page .feed-user .meta { font-size: 11px; overflow-wrap: anywhere; }
  .feed-page .feed-post-text { display: none; }
  .feed-page .feed-reference-title { display: block; margin: 2px 0 0; font-size: 20px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
  .feed-page .feed-reference-title .feed-title-link { color: var(--text); }
  .feed-page .feed-ref-block { aspect-ratio: 1; width: 100%; min-height: 0; padding: 20px; border-radius: var(--mobile-card-radius); align-content: end; }
  .feed-page .feed-ref-copy > :is(h3, .meta) { display: none; }
  .feed-page .feed-ref-copy .feed-reference-context { font-size: 17px; line-height: 1.4; color: #fff; -webkit-line-clamp: 6; }
  .feed-page .has-reference-image::after { background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, .85) 100%); }
  .feed-page .has-reference-image .feed-reference-context { -webkit-line-clamp: 4; font-size: 15px; }
  .feed-page .feed-ref-copy { min-width: 0; overflow-wrap: anywhere; }
  .feed-page .feed-discovery-panel { padding: 16px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px)); background: #fff; min-width: 0; }
  .feed-profile-search { display: block; }
  .feed-profile-search > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .feed-profile-search input { width: 100%; min-width: 0; min-height: var(--mobile-control-height); border: var(--mobile-border); background: var(--mobile-surface); border-radius: var(--mobile-input-radius); padding: 14px 20px; font: inherit; font-size: 16px; }
  .feed-discovery-panel [role="status"] { margin: 12px 0; color: var(--text-soft); font-size: 14px; }
  .feed-discovery-panel [role="status"]:empty { display: none; }
  .feed-profile-grid, .feed-trending-list { display: grid; gap: 16px; margin-top: 20px; }
  .feed-profile-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 16px; border: var(--mobile-border); border-radius: var(--mobile-card-radius); background: var(--mobile-surface); }
  .feed-profile-identity { display: flex; grid-column: 1 / -1; gap: 12px; align-items: center; min-width: 0; color: var(--text); text-decoration: none; }
  .feed-profile-copy { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
  .feed-profile-copy strong { font-size: 18px; line-height: 1.2; }
  .feed-profile-bio { grid-column: 1 / -1; margin: 0; font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
  .feed-profile-bio:empty { display: none; }
  .feed-profile-follow { grid-column: 2; min-height: 44px; padding: 10px 20px; border-radius: var(--mobile-pill-radius); background: var(--brand-gradient); color: #fff; }
  .feed-profile-follow[aria-pressed="true"] { background: #fff; color: var(--text); border: var(--mobile-border); }
  .feed-trend-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 16px; border: var(--mobile-border); border-radius: var(--mobile-card-radius); background: var(--mobile-surface); }
  .feed-trend-card .feed-reference-image { grid-column: 1 / -1; height: auto; aspect-ratio: 1.5; }
  .feed-trend-title { color: var(--text); text-decoration: none; }
  .feed-trend-title h2 { margin: 0; font-size: 20px; line-height: 1.2; }
  .feed-trend-card .meta { grid-column: 2; margin: 0; }
}