/* Feature Card Component
 * Horizontal layout: icon left, text right
 */

.doghouse-feature-card {
  --card-accent: var(--dh-accent, var(--site-color-primary));
  background-color: var(--site-color-bg-surface-card);
  border: 1px solid rgba(74, 68, 85, 0.35);
  border-radius: 0.75rem;
  padding: 2.5rem;
  transition: border-color var(--site-transition-base);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}

.doghouse-feature-card--has-link:hover {
  border-color: var(--card-accent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Accent color variants */
.doghouse-feature-card--teal   { --card-accent: var(--site-color-primary); }
.doghouse-feature-card--coral  { --card-accent: var(--site-color-coral); }
.doghouse-feature-card--pink   { --card-accent: var(--site-color-pink); }
.doghouse-feature-card--amber  { --card-accent: var(--site-color-amber); }
.doghouse-feature-card--purple { --card-accent: var(--site-color-secondary); }

/* Icon box */
.doghouse-feature-card__icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 8px;
  background-color: color-mix(in srgb, var(--card-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-accent) 20%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--card-accent);
  font-size: 1.125rem;
}

.doghouse-feature-card__icon i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
}

.doghouse-feature-card__icon-char {
  font-size: 1.25rem;
  line-height: 1;
}

/* Text content */
.doghouse-feature-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--site-space-sm);
  flex: 1;
}

.doghouse-feature-card__heading {
  font-family: var(--site-font-sans);
  font-size: 0.95rem;
  font-weight: var(--site-fw-bold);
  color: var(--site-color-text-white);
  margin: 0;
}

.doghouse-feature-card__description {
  color: var(--site-color-text-body);
  font-size: var(--site-body-font-size);
  line-height: var(--site-body-line-height);
  margin: 0;
  flex: 1;
}

.doghouse-feature-card__description p { margin: 0; }

/* Make .dh-button--tertiary in the link wrapper use the card accent */
.doghouse-feature-card__link-wrapper .dh-button {
  --dh-btn-accent: var(--card-accent);
}

/* Scope: no default-state underline on the feature-card CTA. */
.doghouse-feature-card__link-wrapper .dh-button--tertiary {
  text-decoration: none;
}

.doghouse-feature-card__link-wrapper .dh-button--tertiary:hover,
.doghouse-feature-card__link-wrapper .dh-button--tertiary:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}

@media (max-width: 576px) {
  .doghouse-feature-card {
    padding: var(--site-space-md);
  }
}