/* Feature card — Figma: Tasarım sistemi › Feature card (249:6644)
   Mobile: text only, tag above the title (Figma mobile 114:887).
   ≥ 1024: themes light (canvas) · blue (brand) · photo (screenshot top, white text panel). */

.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--space-24) var(--space-20);
  border: 1px solid var(--color-border-divider);
  border-radius: var(--radius-lg);
  background: var(--color-surface-page);
}

.feature-card__body,
.feature-card__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.feature-card__head {
  display: flex;
  flex-direction: column-reverse; /* mobile: tag above the title */
  align-items: flex-start;
  gap: var(--space-12);
}
.feature-card__title {
  font-size: 18px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}
.feature-card__text {
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* Mobile: the blue card is a plain white card, so its dark tag switches to the brand tag */
.feature-card--blue .tag--inverse {
  background: var(--color-brand-tint);
  color: var(--color-text-link);
}

/* Mobile: no screenshots, no extras (Figma mobile cards are text only) */
.feature-card__media,
.feature-card__extra { display: none; }

/* ---------- Automation rule ---------- */
.automation-rule {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-14) var(--space-16);
  border-radius: 14px;
  background: var(--color-surface-page);
  font-size: 13px;
}
.automation-rule__when { font-weight: 600; line-height: 1.3; color: var(--color-text-link); }
.automation-rule__then { line-height: 1.5; color: var(--color-text-primary); }

/* =========================================================
   ≥ 1024
   ========================================================= */
@media (min-width: 1024px) {
  .feature-card {
    padding: var(--space-32);
    border: 0;
    border-radius: var(--radius-xl);
    background: var(--color-surface-canvas);
  }

  .feature-card__head {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  .feature-card__title {
    font-size: 22px;
    letter-spacing: -0.01em;
  }
  .feature-card__tag { flex-shrink: 0; border-radius: var(--radius-sm); }
  .feature-card__text { line-height: 1.55; letter-spacing: -0.002em; }

  .feature-card__media { display: block; margin-top: var(--space-12); }
  .feature-card__media .screenshot { --screenshot-radius: 12px; }
  .feature-card__extra { display: flex; }

  /* Blue */
  .feature-card--blue { background: var(--color-brand-primary); }
  .feature-card--blue .tag--inverse {
    background: var(--color-surface-inverse);
    color: var(--color-text-inverse);
  }
  .feature-card--blue .feature-card__title { color: var(--color-text-inverse); }
  .feature-card--blue .feature-card__text { color: var(--color-text-inverse-secondary); }

  /* Photo: screenshot band on a blue-grey field, white text panel at the bottom */
  .feature-card--photo {
    justify-content: space-between;
    padding: 0;
    background: #c7d4e5;
  }
  .feature-card--photo .feature-card__media { margin: 60px 0 0; }
  .feature-card--photo .feature-card__media .screenshot { --screenshot-radius: 0; }
  .feature-card--photo .feature-card__panel {
    gap: var(--space-6);
    padding: var(--space-20) var(--space-24) var(--space-24);
    background: var(--color-surface-page);
  }

  /* Hover: the card lifts and its screenshot slides up a touch */
  .feature-card__media .screenshot {
    transition: transform 500ms var(--ease-out-soft);
  }
  @media (hover: hover) {
    .feature-card:hover .feature-card__media .screenshot { transform: translate3d(0, -8px, 0); }
  }
}