/* ==================================================================
   JUSTPIXEL SOFTWARE LIBRARY
   TEXT COUNTER
   ================================================================== */

.jp-text-counter {
  display: grid;

  gap: var(--jp-space-6);
}

/* ==================================================================
   EDITOR
   ================================================================== */

.jp-text-counter-editor {
  padding: var(--jp-space-6);

  border: 1px solid var(--jp-border);
  border-radius: var(--jp-radius-md);

  background: var(--jp-surface);

  box-shadow: var(--jp-shadow-sm);
}

/* ==================================================================
   TEXT AREA
   ================================================================== */

.jp-text-counter-input {
  min-height: 220px;

  height: clamp(220px, 30vh, 300px);

  resize: vertical;

  line-height: var(--jp-leading-relaxed);
}

/* ==================================================================
   RESULTS
   ================================================================== */

.jp-text-counter-results {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: var(--jp-space-4);
}

.jp-stat-card {
  display: flex;
  flex-direction: column;

  gap: var(--jp-space-2);
}

.jp-stat-value {
  font-size: 1.75rem;

  line-height: 1;
}

.jp-stat-label {
  font-size: var(--jp-text-sm);
}

/* ==================================================================
   TABLET
   ================================================================== */

@media (max-width: 900px) {
  .jp-text-counter-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==================================================================
   MOBILE
   ================================================================== */

@media (max-width: 600px) {
  .jp-text-counter-input {
    min-height: 220px;

    height: clamp(220px, 30vh, 300px);

    resize: vertical;

    line-height: var(--jp-leading-relaxed);
  }

  .jp-text-counter-results {
    grid-template-columns: 1fr;
  }

  .jp-stat-card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    gap: var(--jp-space-4);
  }

  .jp-stat-value {
    font-size: 1.4rem;
  }
}