/**
 * Review Component Styles
 * Lives in base theme — applies to all sites using the review content type.
 *
 * Subtheme override tokens (set in :root):
 *   --review-card-bg            Card background (default rgba white at 96%)
 *   --review-card-border        Card border color
 *   --review-card-radius        Corner radius (default 6px)
 *   --review-card-shadow        Box shadow
 *   --review-card-padding       Inner padding
 *   --review-source-color       Source icon + accent color
 *   --review-star-color         Filled star color
 *   --review-star-empty-color   Empty star color
 *   --review-author-color       Author name color
 *   --review-meta-color         Date + source label color
 *   --review-link-color         "Read full review" link color
 *   --review-avatar-text-color  Initials text color (default white)
 *   --review-avatar-size        Avatar diameter (default 2.5rem)
 *
 * Avatar palette is set with hardcoded hex values — these are tasteful
 * neutrals that work on most brand systems. Override per-site if needed.
 */

.review-card {
  /* Slight transparency so background imagery shows through subtly. 
     0.96 reads as solid white from a couple feet away, but lets a 
     hint of background photo come through up close. */
  background: var(--review-card-bg, rgba(255, 255, 255, 0.96));
  border: 1px solid var(--review-card-border, rgba(0, 0, 0, 0.08));
  border-radius: var(--review-card-radius, 6px);
  box-shadow: var(--review-card-shadow, 0 2px 8px rgba(0, 0, 0, 0.06));
  padding: var(--review-card-padding, 1.5rem 1.75rem);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 280px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* -------- Header: source icon + star rating -------- */

.review-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.review-card__source {
  color: var(--review-source-color, #8a8d88);
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.review-card__source--top {
  font-size: 1.5rem;
}

.review-source-icon {
  display: inline-block;
  vertical-align: middle;
}

/* -------- Stars -------- */

.review-card__rating {
  color: var(--review-star-color, #d4a241);
  font-size: 1rem;
  letter-spacing: 1px;
  line-height: 1;
  white-space: nowrap;
}

.review-card__star--empty {
  color: var(--review-star-empty-color, #d8d8d8);
}

.review-card__star--half {
  display: inline-block;
  position: relative;
  color: var(--review-star-empty-color, #d8d8d8);
}

.review-card__star--half::before {
  content: '★';
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  overflow: hidden;
  color: var(--review-star-color, #d4a241);
}

/* -------- Body -------- */

.review-card__body {
  flex: 1;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text, #2d2d2d);
  margin-bottom: 1rem;
}

.review-card__body p {
  margin: 0;
}

.review-card__body p + p {
  margin-top: 0.5rem;
}

/* -------- "Read full review" link -------- */

.review-card__link {
  margin-bottom: 1rem;
  font-size: 0.85rem;
}

.review-card__link a {
  color: var(--review-link-color, var(--color-link, #c17d3c));
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.review-card__link a::after {
  content: '›';
  font-size: 1.1em;
  line-height: 1;
  transition: transform 0.2s;
}

.review-card__link a:hover {
  text-decoration: underline;
}

.review-card__link a:hover::after {
  transform: translateX(3px);
}

/* -------- Footer with avatar + author + date -------- */

.review-card__footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-top: 1px solid var(--review-card-border, rgba(0, 0, 0, 0.08));
  padding-top: 0.85rem;
  margin-top: auto;
}

.review-card__avatar {
  flex-shrink: 0;
  width: var(--review-avatar-size, 2.5rem);
  height: var(--review-avatar-size, 2.5rem);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--review-avatar-text-color, #ffffff);
  text-transform: uppercase;
  user-select: none;
  overflow: hidden;
}

/* Photo avatar — same circular shape, image fills the disc. */
.review-card__avatar--photo {
  object-fit: cover;
  object-position: center;
  background: transparent;
  /* Override flex display for img elements. */
  display: block;
}

/* Avatar palette — tasteful neutrals that work on most brand designs.
   Picked deterministically per-author by Twig logic in the teaser template. */
.review-card__avatar--avatar-1 { background: #5a7a6e; } /* sage */
.review-card__avatar--avatar-2 { background: #8B5E3C; } /* bison */
.review-card__avatar--avatar-3 { background: #6b7a99; } /* slate */
.review-card__avatar--avatar-4 { background: #a07b5a; } /* clay */
.review-card__avatar--avatar-5 { background: #5a6b4c; } /* moss */
.review-card__avatar--avatar-6 { background: #8a6c8a; } /* heather */

.review-card__meta {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}

.review-card__author {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--review-author-color, var(--color-text, #2d2d2d));
}

.review-card__author .field,
.review-card__author .field__item {
  display: inline;
}

.review-card__date {
  font-size: 0.78rem;
  color: var(--review-meta-color, #8a8d88);
  margin-top: 0.15rem;
}

/* -------- Carousel context: ensure cards stretch to full height -------- */

.swiper-slide .review-card {
  height: 100%;
}