/* «Sist på Facebook» · eksempel for frier.no */
.fbf {
  --fbf-green: #01260b;
  --fbf-deep: #003d29;
  --fbf-light: #eff5c8;
  --fbf-accent: #67b354;
  padding: 5.5rem 0 6.5rem;
  overflow: hidden;
}
.fbf__head {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-bottom: 2.25rem;
}
.fbf__kicker {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--fbf-accent);
  margin-bottom: .75rem;
}
.fbf__kicker svg { width: 1.125rem; height: 1.125rem; }
.fbf__title { margin: 0; }
.fbf__lead { margin-top: .75rem; max-width: 34rem; font-size: 1.188rem; font-weight: 500; }
.fbf__tools { display: flex; align-items: center; gap: 1.5rem; }
.fbf__follow {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  padding: .875rem 1.375rem;
  border-radius: 999px;
  background: var(--fbf-green);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .25s, transform .25s;
}
.fbf__follow:hover { background: var(--fbf-deep); transform: translateY(-2px); }
.fbf__follow svg { width: 1.125rem; height: 1.125rem; }
.fbf__arrows { display: none; gap: .5rem; }
@media (min-width: 1024px) { .fbf__arrows { display: flex; } }
.fbf__arrow {
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(1, 38, 11, .18);
  background: #fff;
  color: var(--fbf-green);
  cursor: pointer;
  transition: border-color .25s, background-color .25s, opacity .25s;
}
.fbf__arrow:hover:not(:disabled) { border-color: var(--fbf-accent); background: var(--fbf-light); }
.fbf__arrow:disabled { opacity: .35; cursor: default; }
.fbf__arrow svg { width: 1rem; }
.fbf__arrow--prev svg { transform: scaleX(-1); }

.fbf__rail {
  grid-column: 1 / -1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(82%, 21rem);
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  padding-bottom: 1rem;
  margin-right: -1rem;
  padding-right: 1rem;
  scrollbar-width: none;
  list-style: none;
  margin-top: 0; margin-bottom: 0; padding-left: 0;
}
.fbf__rail::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .fbf__rail { grid-auto-columns: calc((100% - 2.5rem) / 2.4); } }
@media (min-width: 1280px) { .fbf__rail { grid-auto-columns: calc((100% - 3.75rem) / 3.3); } }

.fbf__card {
  scroll-snap-align: start;
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  background: var(--fbf-light);
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
}
.fbf__card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(1,38,11,.45); }
.fbf__card:focus-within { outline: 3px solid var(--fbf-accent); outline-offset: 3px; }
.fbf__media { aspect-ratio: 1 / 1; overflow: hidden; background: var(--fbf-green); }
.fbf__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.fbf__card:hover .fbf__media img { transform: scale(1.04); }
.fbf__body { display: flex; flex-direction: column; flex: 1; padding: 1.375rem 1.5rem 1.5rem; }
.fbf__meta { display: flex; align-items: center; gap: .75rem; margin-bottom: .875rem; }
.fbf__avatar {
  width: 2.5rem; height: 2.5rem; flex: none;
  border-radius: 50%;
  background: var(--fbf-green);
  display: grid; place-items: center;
}
.fbf__avatar { color: var(--fbf-accent); font-weight: 900; font-size: 1.375rem; line-height: 1; padding-bottom: .15rem; }
.fbf__card--text .fbf__avatar { color: var(--fbf-green); }
.fbf__who { line-height: 1.2; }
.fbf__name { font-weight: 700; font-size: .9375rem; }
.fbf__time { font-size: .8125rem; opacity: .65; }
.fbf__fbicon { margin-left: auto; width: 1.25rem; height: 1.25rem; color: var(--fbf-green); opacity: .5; }
.fbf__text {
  white-space: pre-line;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 1.25rem;
  font-weight: 500;
}
.fbf__more {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700;
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid var(--fbf-accent);
  padding-bottom: .25rem;
}
.fbf__more::after { content: ""; position: absolute; inset: 0; }
.fbf__more svg { width: .875rem; color: var(--fbf-accent); transition: transform .3s; }
.fbf__card:hover .fbf__more svg { transform: translateX(.375rem); }

/* Innlegg uten bilde: stort sitatkort i mørk grønn */
.fbf__card--text { background: var(--fbf-green); color: #fff; }
.fbf__card--text .fbf__body { padding: 1.75rem 1.75rem 1.75rem; }
.fbf__card--text .fbf__avatar { background: var(--fbf-accent); }
.fbf__card--text .fbf__fbicon { color: #fff; }
.fbf__card--text .fbf__text {
  font-size: clamp(1.375rem, 1.8vw, 1.485rem);
  font-weight: 500;
  line-height: 1.2;
  -webkit-line-clamp: 9;
  margin-top: auto;
  padding-top: 2rem;
}
.fbf__card--text .fbf__more { margin-top: 0; }

.fbf__note {
  grid-column: 1 / -1;
  margin-top: 1.5rem;
  font-size: .875rem;
  opacity: .6;
}

@media (prefers-reduced-motion: reduce) {
  .fbf__card, .fbf__media img, .fbf__more svg, .fbf__follow { transition: none; }
  .fbf__card:hover { transform: none; }
  .fbf__card:hover .fbf__media img { transform: none; }
}