/* ============================================================
   COMPONENTS
   Reusable UI components shared across all pages.
   Each component is self-contained and follows BEM naming.
   ============================================================ */

/* --------------------------------------------------------
   BUTTONS
   -------------------------------------------------------- */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-full);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-white);
  transform: translateY(-2px);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background-color: transparent;
  color: var(--color-primary);
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-full);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.btn-ghost:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-white);
  transform: translateY(-2px);
}

/* Ghost button — light variant for use on dark backgrounds */
.btn-ghost--light {
  border-color: var(--color-white);
  color: var(--color-white);
}

.btn-ghost--light:hover {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-dark);
}


/* --------------------------------------------------------
   CARDS
   -------------------------------------------------------- */

/* .card */
/* .card__image */
/* .card__body */
/* .card__title */
/* .card__text */
/* .card__footer */


/* --------------------------------------------------------
   FORMS
   -------------------------------------------------------- */

/* .form */
/* .form__group */
/* .form__label */
/* .form__input */
/* .form__textarea */
/* .form__select */
/* .form__error */


/* --------------------------------------------------------
   NAVIGATION
   -------------------------------------------------------- */

/* .nav */
/* .nav__list */
/* .nav__item */
/* .nav__link */
/* .nav__link--active */


/* --------------------------------------------------------
   HERO
   -------------------------------------------------------- */

/* .hero */
/* .hero__content */
/* .hero__title */
/* .hero__subtitle */
/* .hero__actions */
/* .hero__image */


/* --------------------------------------------------------
   SECTION KICKER
   Reusable eyebrow label used above section headings.
   Red, uppercase, small — identical visual to hero__kicker
   but without the hero entry animation.
   -------------------------------------------------------- */

.section-kicker {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-2);
}


/* --------------------------------------------------------
   CTA
   -------------------------------------------------------- */

/* .cta */
/* .cta__title */
/* .cta__text */
/* .cta__actions */


/* --------------------------------------------------------
   TESTIMONIALS
   -------------------------------------------------------- */

/* .testimonial */
/* .testimonial__quote */
/* .testimonial__author */
/* .testimonial__avatar */
/* .testimonial__name */
/* .testimonial__role */


/* --------------------------------------------------------
   STATISTICS
   -------------------------------------------------------- */

/* .stat */
/* .stat__value */
/* .stat__label */


/* --------------------------------------------------------
   FAQ
   -------------------------------------------------------- */

/* .faq */
/* .faq__item */
/* .faq__question */
/* .faq__answer */


/* --------------------------------------------------------
   BLOG CARD
   -------------------------------------------------------- */

/* .blog-card */
/* .blog-card__image */
/* .blog-card__body */
/* .blog-card__category */
/* .blog-card__title */
/* .blog-card__excerpt */
/* .blog-card__meta */


/* --------------------------------------------------------
   SECTION HEADER
   -------------------------------------------------------- */

/* .section-header */
/* .section-header__label */
/* .section-header__title */
/* .section-header__subtitle */



/* --------------------------------------------------------
   BADGES / LABELS
   -------------------------------------------------------- */

/* .badge */
/* .badge--primary */
/* .badge--secondary */


/* --------------------------------------------------------
   ICON LIST
   Reusable icon + text checklist.
   Layout only — font-size and color inherit from context.
   -------------------------------------------------------- */

.icon-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.icon-list__item {
  display: flex;
  gap: var(--space-3);
  line-height: var(--line-height-loose);
}

.icon-list__icon {
  flex-shrink: 0;
  margin-top: 3px;
  display: flex;
}

.icon-list__text {
  display: flex;
  align-items: center;
}


/* --------------------------------------------------------
   CONTENT CARD
   Horizontal-header card variant (title left / icon right).
   Used on service sub-pages. Designed for ACF reuse.
   -------------------------------------------------------- */

.content-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  will-change: transform;
  backface-visibility: hidden;
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
}

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

.content-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.content-card__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
  line-height: var(--line-height-tight);
}

.content-card__icon {
  flex-shrink: 0;
}

.content-card__icon img {
  display: block;
  width: 64px;
  height: 64px;
}

.content-card__text {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  line-height: var(--line-height-loose);
}


/* --------------------------------------------------------
   WORK CARD
   Client work showcase card — 3-per-row grid variant.
   Separate class from .why-feature for ACF repeater use.
   -------------------------------------------------------- */

.work-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--color-white);
  /* inset shadow acts as border — never clipped by parent overflow:hidden */
  box-shadow: inset 0 0 0 1px var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  will-change: transform;
  backface-visibility: hidden;
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
}

.work-card:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px var(--color-border), var(--shadow-lg);
}

.work-card__category {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
}

.work-card__client {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--space-3);
}

.work-card__subtitle {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-heading);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--space-3);
}

.work-card__text {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  line-height: var(--line-height-loose);
  margin: 0;
}