/* Same catalogue, manually curated scenes. Existing BFAI brand tokens apply. */
[data-catalog-featured].featured-scenes {
  --featured-gap: 24px;
  display: block;
  min-width: 0;
  color: var(--ink, #212521);
}
.featured-scenes__track {
  display: flex;
  gap: var(--featured-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--green, #253f35) transparent;
  padding: 4px 4px 16px;
  margin: -4px;
  touch-action: pan-x pan-y;
}
.featured-scenes__card {
  flex: 0 0 calc((100% - 2 * var(--featured-gap)) / 3);
  min-width: 0;
  scroll-snap-align: start;
}
.featured-scenes__link {
  display: block;
  border-radius: 4px;
  color: inherit;
  text-decoration: none;
}
.featured-scenes__image {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  height: auto;
  object-fit: contain;
  background: var(--paper, #f7f7f2);
  border: 1px solid var(--line, #dfe2d9);
  border-radius: 4px;
}
.featured-scenes__caption { padding-top: 16px; }
.featured-scenes__title {
  display: block;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.featured-scenes__meta {
  display: block;
  margin-top: 4px;
  color: var(--muted, #626962);
  font-size: 14px;
  line-height: 1.6;
}
.featured-scenes__kind { display: block; margin-top: 4px; color: var(--muted, #626962); font-size: 12px; line-height: 1.6; }
.featured-scenes__link:hover .featured-scenes__title { color: var(--green, #253f35); text-decoration: underline; text-underline-offset: 4px; }
.featured-scenes__toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
.featured-scenes__controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.featured-scenes__button {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--green, #253f35);
  border-radius: 4px;
  background: transparent;
  color: var(--green, #253f35);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 200ms, color 200ms;
}
.featured-scenes__button:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--green, #253f35); color: var(--white, #fff); }
.featured-scenes__button:disabled, .featured-scenes__button[aria-disabled="true"] { opacity: .45; cursor: default; }
.featured-scenes__rotation { background: var(--gold, #d8c5a0); border-color: var(--gold, #d8c5a0); color: var(--dark, #151b19); }
.featured-scenes__count { color: var(--muted, #626962); font-size: 14px; font-variant-numeric: tabular-nums; }
.featured-scenes__status { min-height: 24px; margin-top: 16px; font-size: 14px; line-height: 1.7; color: var(--muted, #626962); }
.featured-scenes__retry { margin-top: 12px; }
.featured-scenes__browse { display: inline-block; margin-top: 16px; padding: 8px 0; color: var(--green, #253f35); border-bottom: 1px solid currentColor; font-size: 14px; }
.featured-scenes[data-featured-count="1"] .featured-scenes__track { justify-content: center; }
.featured-scenes[data-featured-count="1"] .featured-scenes__card { flex-basis: min(100%, 360px); }
.featured-scenes__track:focus-visible, .featured-scenes__link:focus-visible, .featured-scenes__button:focus-visible { outline: 3px solid var(--green, #253f35); outline-offset: 3px; }
.featured-scenes [hidden] { display: none !important; }
.featured-scenes[data-featured-state="loading"] .featured-scenes__status,
.featured-scenes[data-featured-state="empty"] .featured-scenes__status,
.featured-scenes[data-featured-state="error"] .featured-scenes__status { padding: 24px; border: 1px solid var(--line, #dfe2d9); background: var(--paper, #f7f7f2); border-radius: 4px; }
@media (max-width: 900px) {
  .featured-scenes__card { flex-basis: calc((100% - var(--featured-gap)) / 2); }
}
@media (max-width: 600px) {
  [data-catalog-featured].featured-scenes { --featured-gap: 16px; }
  .featured-scenes__card { flex-basis: calc(100% - 36px); }
  .featured-scenes__toolbar { gap: 12px; margin-top: 16px; }
  .featured-scenes__title { font-size: 16px; }
  .featured-scenes__caption { padding-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .featured-scenes__track { scroll-behavior: auto; }
  .featured-scenes__button { transition: none; }
}