/* The Feed and Paper Trail. Both open with a divider heading; the Feed lays
   snippet cards on the page background, Paper Trail uses the white sheet. */

/* Divider heading: the title sits on the 1px gradient rule, centred */
.feed-heading { margin-bottom: 33px; }

.feed-heading__title {
  position: relative;
  margin: 0;
  font-size: 44px;
  line-height: 44px;
  font-weight: 700;
  text-align: center;
}

.feed-heading__title::before { content: ""; position: absolute; inset: 22px 0 auto; height: 1px; background: var(--color-rule); }
.feed-heading__title span { position: relative; padding: 0 11px; background: var(--color-sheet); }

.feed-heading__description { margin: 6.19px 0 0; font-size: 19.8px; line-height: 27.72px; text-align: center; }

/* The Feed */

.feed {
  width: min(1078px, 100%);
  margin: 0 auto;
  padding: 0 0 66px; /* HEY's Feed heading sits at the top of the page */
  font-size: 19.8px;
  line-height: 27.72px;
}

.feed__items { display: flex; flex-direction: column; gap: 33px; }

.feed-item {
  position: relative;
  padding: 22px 55px 0;
  border: 1px solid transparent;
  border-radius: 29.7px;
  background: var(--color-sheet);
  box-shadow: rgb(var(--warm-rgb) / 0.5) 0 0 33px 0;
  /* Collapsing scrolls back to the card; keep it clear of the fixed header */
  scroll-margin-top: calc(var(--header-height) + 22px);
}

.feed-item--unseen { border-color: rgb(248 121 23); }

.feed-item__header { padding-top: 2.75px; }

.feed-item__subject { margin: 0; font-size: 22px; line-height: 30.8px; font-weight: 700; overflow-wrap: anywhere; }
.feed-item__subject a { text-decoration: none; }
.feed-item__subject a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.feed-item__byline { display: flex; flex-wrap: wrap; gap: 0 11px; margin: 2.2px 0 0; color: var(--color-muted); font-size: 15.4px; line-height: 21.56px; }
.feed-item__sender { font-weight: 500; color: var(--color-ink); }

/* The body, clipped to 55vh until expanded */
.feed-item__clip { position: relative; max-height: 55vh; overflow: hidden; padding-bottom: 22px; }
.feed-item--clipped .feed-item__clip { padding-bottom: 55px; }

.feed-item--clipped .feed-item__clip::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 110px;
  background: linear-gradient(rgb(var(--sheet-rgb) / 0), var(--color-sheet));
  pointer-events: none;
}

.feed-item--expanded .feed-item__clip { max-height: none; }
.feed-item--expanded .feed-item__clip::after { content: none; }

.feed-item__toggle {
  display: block;
  width: calc(100% + 110px);
  height: 49.5px;
  margin: 0 -55px;
  border: none;
  border-top: 1px solid rgb(var(--ink-rgb) / 0.15);
  border-radius: 0 0 29.7px 29.7px;
  background: var(--color-sheet);
  color: var(--color-accent);
  font: 500 17.6px/24.64px var(--font);
  cursor: pointer;
}

.feed-item__toggle[hidden] { display: none; }
.feed-item__toggle:hover { background: rgb(48 114 221 / 0.04); }
.feed-item__toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px #a4d2ff; }

/* Expanded, the button follows you down so you can fold the card from anywhere */
.feed-item--expanded .feed-item__toggle {
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: rgb(var(--sheet-rgb) / 0.96);
}

/* Paper Trail: standard rows straight under the heading */
.postings--paper-trail { margin: 0 -55px; }
.postings--paper-trail .posting { padding: 0 55px; }

/* Blank slates: Postboxey's own soft colour blobs behind a centred white card */
.feed-blank {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 715px;
  padding: 33px 16px;
  border-radius: 29.7px;
  background:
    radial-gradient(closest-side, rgb(214 211 209 / 0.7), transparent) 8% 18% / 380px 300px no-repeat,
    radial-gradient(closest-side, rgb(48 114 221 / 0.22), transparent) 88% 12% / 420px 340px no-repeat,
    radial-gradient(closest-side, rgb(48 114 221 / 0.18), transparent) 82% 88% / 460px 360px no-repeat,
    radial-gradient(closest-side, rgb(248 121 23 / 0.16), transparent) 14% 90% / 360px 280px no-repeat,
    var(--color-paper);
}

.feed-blank--paper-trail {
  margin: 0 -55px;
  border-radius: 0;
  background-position: 88% 16%, 10% 14%, 16% 86%, 86% 92%, 0 0;
}

/* As HEY's on most pages: a white field with the card high and left-aligned */
.feed-blank--top { align-items: flex-start; padding: 124px 16px 33px; background-color: var(--color-sheet); }
.feed-blank--top .feed-blank__card { text-align: left; }

.feed-blank__card {
  width: min(534px, 100%);
  margin: 0;
  padding: 61.6px;
  border-radius: 46.2px;
  background: var(--color-sheet);
  box-shadow: rgb(var(--warm-rgb) / 0.3) 0 0 33px 0;
  font-size: 30.8px;
  line-height: 43.12px;
  text-align: center;
}

@media (max-width: 640px) {
  .feed-heading__title { font-size: 34px; line-height: 34px; }
  .feed-heading__title::before { top: 17px; }
  .feed-heading__description { font-size: 17px; line-height: 24px; }

  .feed { padding: 33px 16px 44px; font-size: 17px; }
  .feed-item { padding: 16px 16px 0; border-radius: 20px; }
  .feed-item__toggle { width: calc(100% + 32px); margin: 0 -16px; border-radius: 0 0 20px 20px; }

  .postings--paper-trail, .feed-blank--paper-trail { margin-inline: -16px; }
  .postings--paper-trail .posting { padding-inline: 0; }

  .feed-blank { min-height: 480px; }
  .feed-blank__card { padding: 33px 24px; border-radius: 30px; font-size: 22px; line-height: 31px; }
}