/**
 * components.css — reusable widgets
 * ---------------------------------------------------------------------------
 * Cards, star ratings, the gallery carousel, the testimonial spotlight
 * carousel, the reviews list/filter, and form controls. Anything used on
 * more than one page (or likely to be) belongs here.
 */

/* ── Feature / approach cards ──────────────────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-4);
}

.feature-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out);
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.feature-card__icon {
  font-size: 2.6rem;
  line-height: 1;
  margin-bottom: var(--space-3);
  display: inline-block;
}

.feature-card h3 {
  font-size: var(--text-lg);
}

/* ── Star rating ───────────────────────────────────────────────────────── */
.stars {
  color: var(--clr-accent);
  font-size: 1.05rem;
  letter-spacing: 0.15em;
  white-space: nowrap;
}

/* ── Gallery carousel (Meet Sue) ───────────────────────────────────────── */
.carousel {
  position: relative;
  max-width: 46rem;
  margin-inline: auto;
}

.carousel__viewport {
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  background: var(--clr-primary-dark);
}

.carousel__track {
  display: flex;
  transition: transform var(--dur-slow) var(--ease-out);
}

.carousel__slide {
  flex: 0 0 100%;
}

.carousel__slide img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top;
}

.carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  border: none;
  background: var(--clr-surface);
  color: var(--clr-primary-dark);
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  display: grid;
  place-items: center;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast);
  z-index: 2;
}

.carousel__btn:hover {
  background: var(--clr-accent);
  transform: translateY(-50%) scale(1.08);
}

.carousel__btn--prev { left: -1.4rem; }
.carousel__btn--next { right: -1.4rem; }

@media (max-width: 47.9rem) {
  .carousel__btn--prev { left: 0.5rem; }
  .carousel__btn--next { right: 0.5rem; }
}

.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: var(--space-3);
}

.carousel__dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  border: none;
  background: var(--clr-line);
  cursor: pointer;
  padding: 0;
  transition: background-color var(--dur-fast), transform var(--dur-fast);
}

.carousel__dot:hover {
  transform: scale(1.3);
}

.carousel__dot[aria-current='true'] {
  background: var(--clr-accent);
  transform: scale(1.25);
}

/* ── Testimonial spotlight (featured reviews carousel) ─────────────────── */
.spotlight {
  position: relative;
  max-width: 52rem;
  margin-inline: auto;
}

.spotlight__stage {
  position: relative;
  min-height: 21rem;
}

.spotlight__card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  background: var(--clr-surface);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
  text-align: center;
  opacity: 0;
  transform: translateX(2rem) scale(0.98);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  visibility: hidden;
}

.spotlight__card.is-active {
  opacity: 1;
  transform: none;
  visibility: visible;
}

.spotlight__quote {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--clr-ink);
  max-height: 12.5rem;
  overflow-y: auto;
}

.spotlight__quote::before { content: '\201C'; }
.spotlight__quote::after { content: '\201D'; }

.spotlight__who {
  font-weight: 800;
  color: var(--clr-primary-dark);
}

.spotlight__who small {
  display: block;
  font-weight: 600;
  color: var(--clr-ink-soft);
}

@media (max-width: 47.9rem) {
  .spotlight__stage { min-height: 26rem; }
  .spotlight__card { padding: var(--space-4); }
}

/* ── Review cards (full list) ──────────────────────────────────────────── */
.review-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.review-filters button {
  font: inherit;
  font-weight: 700;
  font-size: var(--text-sm);
  padding: 0.5em 1.2em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--clr-line);
  background: var(--clr-surface);
  color: var(--clr-ink-soft);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}

.review-filters button:hover {
  border-color: var(--clr-primary);
  color: var(--clr-primary-dark);
}

.review-filters button[aria-pressed='true'] {
  background: var(--clr-primary);
  border-color: var(--clr-primary);
  color: #fff;
}

.reviews-grid {
  columns: 2 22rem; /* masonry-style columns keep varied lengths tidy */
  column-gap: var(--space-4);
}

.review-card {
  break-inside: avoid;
  margin-bottom: var(--space-4);
  background: var(--clr-surface);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out),
    opacity var(--dur-med) var(--ease-out);
}

.review-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.review-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.review-card__name {
  font-size: var(--text-md);
  font-family: var(--font-body);
  font-weight: 800;
  color: var(--clr-primary-dark);
}

.review-card__role {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--clr-accent-dark);
}

.review-card blockquote {
  font-size: var(--text-sm);
  color: var(--clr-ink-soft);
}

.review-card blockquote::before { content: '\201C'; }
.review-card blockquote::after { content: '\201D'; }

/* ── Forms ─────────────────────────────────────────────────────────────── */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.form-field {
  display: grid;
  gap: var(--space-1);
}

.form-field--full {
  grid-column: 1 / -1;
}

.form-field label {
  font-weight: 700;
  font-size: var(--text-sm);
}

.form-field input,
.form-field select,
.form-field textarea {
  font: inherit;
  color: inherit;
  padding: 0.7em 0.9em;
  border: 1px solid var(--clr-line);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px var(--clr-primary-soft);
}

.form-status {
  margin-top: var(--space-3);
  font-weight: 700;
  color: var(--clr-primary);
}

@media (max-width: 47.9rem) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* ── CTA panel ─────────────────────────────────────────────────────────── */
.cta-panel {
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(232, 163, 61, 0.18), transparent 55%),
    var(--clr-primary);
  color: #eef5f1;
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  box-shadow: var(--shadow-lg);
}

.cta-panel h2 {
  color: #fff;
  font-size: var(--text-xl);
  margin-bottom: var(--space-3);
}

.cta-panel p {
  max-width: 40rem;
  margin: 0 auto var(--space-4);
}