/* Social components: carousel, rating input, comments, follow/save buttons. */

/* ---------- Carousel ---------- */
.carousel { position: relative; }
.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(250px, calc((100% - 3 * var(--space-5)) / 4));
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: var(--space-2) var(--space-1) var(--space-4);
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__item { scroll-snap-align: start; display: flex; }
.carousel__item .recipe-card { width: 100%; }
.carousel__arrow {
  position: absolute; top: 38%; z-index: 2;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--white); color: var(--rust); font-size: 1.8rem; line-height: 1;
  box-shadow: var(--shadow-md); cursor: pointer; transition: transform 0.15s var(--ease);
}
.carousel__arrow:hover { transform: scale(1.08); }
.carousel__arrow--prev { left: -18px; }
.carousel__arrow--next { right: -18px; }
@media (max-width: 1100px) { .carousel__track { grid-auto-columns: minmax(240px, calc((100% - 2 * var(--space-5)) / 3)); } }
@media (max-width: 720px) {
  .carousel__track { grid-auto-columns: 78%; }
  .carousel__arrow { display: none; }
}

/* ---------- Follow / save buttons ---------- */
.btn.is-active { --btn-bg: var(--white); --btn-fg: var(--rust); border-color: var(--rust); box-shadow: none; }
.btn.is-active:hover { background: var(--cream); }

/* ---------- Rating input ---------- */
.rate { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.rate__label { font-size: var(--text-sm); font-weight: 600; }
.rate__stars { display: inline-flex; }
.rate__star {
  border: 0; background: none; padding: 0 1px; cursor: pointer;
  font-size: 1.7rem; line-height: 1; color: rgba(255, 255, 255, 0.75);
  transition: transform 0.1s, color 0.1s;
}
.rate__star.is-on { color: var(--rust); }
.rate__star:hover { transform: scale(1.15); }
.rate__star:focus-visible { outline: 2px solid var(--rust); border-radius: 4px; }
.rate__clear { border: 0; background: none; color: var(--brown-soft); font-size: var(--text-xs); text-decoration: underline; cursor: pointer; }
.rating-summary { display: inline-flex; align-items: center; gap: var(--space-2); }
.rating-summary .stars { font-size: 1.4rem; }

/* ---------- Comments ---------- */
.comments { display: grid; gap: var(--space-4); }
.comment-form { display: grid; gap: var(--space-2); }
.comment-form textarea.input { min-height: 84px; }
.comment-form__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.comment-form__count { font-size: var(--text-xs); color: var(--muted); }
.comment-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.comment {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items: start;
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--cream);
  animation: rise 0.25s var(--ease);
}
.comment__head { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; }
.comment__name { font-weight: 600; color: var(--brown); }
.comment__time { font-size: var(--text-xs); color: var(--muted); }
.comment__body { margin: 2px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.login-prompt { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--info-soft); font-size: var(--text-sm); }

/* ---------- Recommendation reason on cards ---------- */
.recipe-card__reason {
  margin: 0;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--amber-soft);
  color: var(--rust-strong);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* ---------- Profile stats ---------- */
.stats { display: flex; gap: var(--space-5); margin: var(--space-3) 0; }
.stats div { display: grid; }
.stats strong { font-size: var(--text-lg); font-family: var(--font-display); }
.stats span { font-size: var(--text-xs); color: var(--brown-soft); text-transform: uppercase; letter-spacing: 0.05em; }
@media (max-width: 720px) { .stats { justify-content: center; } }