/* ==========================================================================
   Card - Base
   Base card structure shared by all card types (thing, message, functional)
   ========================================================================== */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: var(--size-card-width);
  height: var(--size-card-height);
  gap: var(--space-2);
  padding: var(--space-4);
  border: var(--border-width) solid var(--np-color-outline-strong);
  border-width: var(--border-width-raised);
  background-color: var(--np-color-surface);
}

/* Thing card variant - adds pointer cursor for clickable cards */
.card--thing {
  cursor: pointer;
}

/* Top section - grows to fill available space */
.card__top {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-3);
  min-height: 0;
}

/* Type holder - horizontal lines with centered type label */
.card__type {
  padding: var(--space-1);
  border-block: var(--border-normal) var(--np-color-inverse-surface);
}

/* Thing Info - name and supplemental */
.card__info {
  padding: 0;
}

/* ==========================================================================
   Thing Header Component
   ========================================================================== */

.thing-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.thing-header__title {
  font-family: var(--font-primary);
  font-size: var(--text-card-name-size);
  font-weight: var(--text-card-name-weight);
  line-height: var(--text-card-name-line-height);
  letter-spacing: var(--text-card-name-letter-spacing);
  color: var(--np-color-on-surface);
}

.thing-header__secondary {
  font-family: var(--font-primary);
  font-size: var(--text-normal-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--text-normal-line-height);
  color: var(--np-color-on-surface-variant);
}

/* ==========================================================================
   Card - Inner Container Layout
   ========================================================================== */

/* Inner - wraps header and body area */
.card__inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  border: var(--border-width) solid var(--np-color-inverse-surface);
  min-height: 0;
}

/* Header - dark top area */
.card__header {
  display: flex;
  flex-direction: column;
  height: 200px;
  padding: var(--space-4);
  background-color: var(--np-color-inverse-surface);
  box-sizing: border-box;
}

.card__title {
  flex: 1;
  font-family: var(--font-primary);
  font-size: var(--text-card-name-size);
  font-weight: var(--text-card-name-weight);
  line-height: var(--text-card-name-line-height);
  letter-spacing: var(--text-card-name-letter-spacing);
  color: var(--np-color-inverse-on-surface);
  /* Multi-line truncation */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card__subtitle {
  flex-shrink: 0;
  margin-block-start: auto;
  font-family: var(--font-primary);
  font-size: var(--text-normal-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--text-normal-line-height);
  color: var(--np-color-inverse-on-surface-variant);
}

/* ==========================================================================
   Bottom Section - Action Bar
   ========================================================================== */

.card__bottom {
  display: flex;
  flex-direction: column;
}

/* Action row - "Add to" + button */
.card__action {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.card__action-label {
  font-size: var(--text-card-action-size);
  font-weight: var(--text-card-action-weight);
  letter-spacing: var(--text-card-action-letter-spacing);
  color: var(--np-color-on-surface);
}

.card__action-text {
  flex: 1;
  padding: var(--space-2);
  font-size: var(--text-card-action-size);
  font-weight: var(--text-card-action-weight);
  letter-spacing: var(--text-card-action-letter-spacing);
  color: var(--np-color-inverse-on-surface);
}

.card__action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size-touch);
  align-self: stretch;
  border-inline-start: var(--border-normal) var(--np-color-inverse-on-surface);
}

.card__action-icon svg {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  fill: var(--np-color-inverse-on-surface);
}

/* ==========================================================================
   Loading State
   ========================================================================== */

/* Loading bar - positioned at very bottom of card */
.card > .loading-bar {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
}

/* ==========================================================================
   Content Card - Body & Form
   Styles for .card--message and .card--functional variants
   ========================================================================== */

/* Body area - below header in content cards */
.card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
}

.card__body-text {
  font-family: var(--font-primary);
  font-size: var(--text-normal-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--text-normal-line-height);
  color: var(--np-color-on-surface);
  margin: 0 0 var(--space-2) 0;
}

.card__body-text:last-child {
  margin-bottom: 0;
}

/* Form layout */
.card__form {
  display: flex;
  flex-direction: column;
}

.card__form .styled-input {
  margin-bottom: var(--space-4);
}

/* Error message */
.card__error {
  display: none;
  padding: var(--space-2);
  margin-bottom: var(--space-4);
  background-color: var(--np-color-error-container);
  color: var(--np-color-on-error-container);
  font-size: var(--text-normal-size);
}

.card__error.show {
  display: block;
}

/* Submit bar */
.card__submit-bar {
  display: flex;
  height: var(--size-touch);
}

/* ==========================================================================
   Mobile Responsive
   ========================================================================== */

@media (max-width: 480px) {
  .card {
    /* 100vw - body margins (16px) - body borders (2px) - .main border (1px) - grid-cards padding (48px) */
    width: calc(100vw - 8px * 2 - var(--border-width) * 3 - var(--space-6) * 2);
    height: 100%;
    flex-shrink: 0;
    scroll-snap-align: center;
  }
}