@import url("/css/design_v2/standards.css");
@import url("/css/design_v2/color.css");
@import url("/css/design_v2/font.css");
@import url("/css/design_v2/breakpoints.css");

/* Base card styles */
.card {
  display: flex;
  align-items: flex-start;
  gap: var(--Space-M);
  width: 100%;
  border-radius: var(--Radius-200);
  background: transparent;
}

.card.card--support {
  margin-top: var(--Space-XL);
  padding: var(--Space-L);
  border: var(--Border-Width-1) var(--Border-Style) var(--Color-Primary-Neutral-500);
  box-shadow: none;
}

.card.card--feature {
  border: var(--Border-Width-1) var(--Border-Style) var(--Color-Primary-Red-600);
  background: var(--Color-Primary-Neutral-100);
  padding: var(--Space-XL) var(--Space-M);
  align-items: center;
  justify-content: center;
  gap: var(--Space-L);
}

/* Icon wrapper and sizing */
.card__icon-wrapper {
  flex: 0 0 auto;
  display: block;
}

.card__icon {
  display: block;
  object-fit: contain;
}

/* Icon sizes */
.card__icon--small {
  width: 40px;
  height: 40px;
}

.card__icon--medium {
  width: 92px;
  height: 92px;
  border-radius: var(--Radius-400);
  object-fit: contain;
}

/* Card content */
.card__content {
  display: flex;
  flex-direction: column;
  gap: var(--Space-S);
  flex: 1;
}

.card--support .card__content {
  gap: var(--Space-XS);
}

.card--feature .card__content {
  gap: var(--Space-L);
  max-width: 400px;
}

/* Title styling - typography handled by utility classes in HTML */
.card__title {
  margin: 0;
  margin-bottom: var(--Space-XS);
}

.card--support .card__title {
  margin-bottom: var(--Space-XS);
}

/* Body content */
.card__body {
  margin: 0;
}

.card__body p {
  margin: 0 0 var(--Space-XS);
}

.card__body p:last-child,
.card__body > p:last-child {
  margin-bottom: 0;
}

/* Support card adjustments: enforce sentence case */
.card--support .card__title {
  text-transform: none;
}

/* Responsive adjustments */
@media (min-width: 1240px) {
  .card--support {
    gap: var(--Space-L);
    width: 521px;
    margin-top: var(--Space-XXL);
    margin-bottom: var(--Space-XL);
  }
}

/* Mobile layout for feature cards */
@media (max-width: 599px) {
  .card--feature {
    align-items: flex-start;
    gap: var(--Space-M);
  }
  
  .card--feature .card__icon-wrapper {
    align-self: flex-start;
  }
  
  .card--feature .card__icon--medium {
    width: 72px;
    height: 72px;
  }
  
  .card--feature .card__content {
    max-width: 100%;
    gap: var(--Space-XS);
  }
}