/* ==========================================================================
   Card - Thing
   Base card structure for displaying a "thing" (movie, book, etc.)
   ========================================================================== */

.card-thing {
  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);
  cursor: pointer;
}

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

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

.card-thing__type-labels {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
}

.card-thing__type-label {
  font-family: var(--font-primary);
  font-size: var(--text-thing-card-type-size);
  font-weight: var(--text-thing-card-type-weight);
  line-height: 21px;
  letter-spacing: var(--text-thing-card-type-letter-spacing);
  text-transform: uppercase;
  color: var(--pure-black);
}

/* Thing Info - name and supplemental */
.card-thing__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 Thing v2 - Info Container Layout
   ========================================================================== */

/* Info Container - wraps thing-info header and reason area */
.card-thing__info-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  border: var(--border-width) solid var(--np-color-inverse-surface);
  min-height: 0;
}

/* Thing Info - dark header area */
.card-thing__thing-info {
  display: flex;
  flex-direction: column;
  height: 200px;
  padding: var(--space-4);
  background-color: var(--np-color-inverse-surface);
  box-sizing: border-box;
}

.card-thing__thing-info-name {
  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-thing__thing-info-supplemental {
  height: 24px;
  flex-shrink: 0;
  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);
}

/* ==========================================================================
   Thing Details (Legacy)
   ========================================================================== */

/* Thing details - name and supplemental info */
.card-thing__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.card-thing__name {
  font-size: var(--text-thing-card-name-size);
  font-weight: var(--text-thing-card-name-weight);
  line-height: var(--text-thing-card-name-line-height);
  text-transform: uppercase;
  color: var(--pure-black);
}

.card-thing__supplemental {
  font-size: var(--text-thing-card-supplemental-size);
  font-weight: var(--text-thing-card-supplemental-weight);
  color: var(--pure-black);
}

/* Stats box - bordered container with reason/opinions */
.card-thing__stats {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  padding: var(--space-6);
  border: var(--border-width) solid var(--np-color-inverse-surface);
  border-width: var(--border-width-raised);
  min-height: 0;
}

/* Opinions container */
.card-thing__opinions {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
  width: 100%;
}

/* Main reason text - "X loved it." */
.card-thing__reason-main {
  font-size: var(--text-thing-card-reason-main-size);
  font-weight: var(--text-thing-card-reason-main-weight);
  line-height: var(--text-thing-card-reason-main-line-height);
  letter-spacing: var(--text-thing-card-reason-main-letter-spacing);
  text-align: center;
  color: var(--pure-black);
}

/* Additional stats - "+1 Liked it", etc. */
.card-thing__additional {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-items: center;
  width: 100%;
  color: var(--np-color-on-surface-variant);
}

.card-thing__additional-line {
  font-size: var(--text-thing-card-reason-additional-size);
  font-weight: var(--text-thing-card-reason-additional-weight);
  line-height: var(--text-thing-card-reason-additional-line-height);
  text-align: center;
}

.card-thing__additional-stats {
  font-size: var(--text-thing-card-reason-stats-size);
  font-weight: var(--text-thing-card-reason-stats-weight);
  text-align: center;
}

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

.card-thing__bottom {
  display: flex;
  flex-direction: column;
}

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

.card-thing__action-label {
  font-size: var(--text-thing-card-action-size);
  font-weight: var(--text-thing-card-action-weight);
  letter-spacing: var(--text-thing-card-action-letter-spacing);
  color: var(--pure-black);
}

/* Action button - dark background with text and icon */
.card-thing__action-button {
  display: flex;
  flex: 1;
  align-items: center;
  background-color: var(--np-color-inverse-surface);
}

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

.card-thing__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-thing__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-thing > .loading-bar {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
}

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

@media (max-width: 480px) {
  .card-thing {
    /* 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;
  }
}