/* =====================================================================
   EXHALE — ssslither story card
   Served from https://breatheheavy.com/exhale/ssslither/ssslither-card.css
   Loaded by one <link> line in the Exhale theme Header (see README.md).

   Deliberately kept OUT of custom.css. This is a self-contained experiment
   on a second property; when it is either proven or pulled, one folder and
   two header lines go with it, rather than a diff through a 6000 line file.

   Every value below is taken from the topic-feed-widget card in custom.css
   (Stage AI/AJ) so the two read as one system: 68px round thumbnail, 16px
   column gap, 22px padding, 20px radius, 16px stack gap, the chip shape,
   the pill shape, the hover lift. The ONE thing that differs is the accent.
   Purple is already spoken for by categories and blue by usernames, so
   ssslither orange is unclaimed and needs no legend.
   ===================================================================== */

:root {
  --sss: #fe4b03;
  --sss-text: #ff9d68;
  --sss-chip-bg: rgba(254, 75, 3, .14);
  --sss-chip-line: rgba(254, 75, 3, .42);
}

.sss-card {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  grid-template-areas: "thumb body" ". foot";
  column-gap: 16px;
  row-gap: 0;
  align-items: start;
  padding: 22px;
  margin: 0 0 16px 0;
  background: #100f17;
  border: 1px solid var(--ex-line, rgba(255, 255, 255, .08));
  border-radius: 20px;
  color: inherit;
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

html[data-ips-scheme-active="light"] .sss-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, .08);
}

@media (hover: hover) {
  .sss-card:hover {
    border-color: rgba(254, 75, 3, .6);
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
  }
  html[data-ips-scheme-active="light"] .sss-card:hover {
    box-shadow: 0 12px 30px rgba(120, 50, 20, .14);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sss-card { transition: none; }
  .sss-card:hover { transform: none; }
}

.sss-card:focus-visible {
  outline: 2px solid var(--sss);
  outline-offset: 3px;
}

.sss-card__thumb {
  grid-area: thumb;
  align-self: start;
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
  margin: 0;
  border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(140deg, #7a2a06, var(--sss));
}
.sss-card__thumb--blank { display: block; }

.sss-card__body {
  grid-area: body;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* the tag, matching the category chip's shape exactly */
.sss-card__chip {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  margin: 0 0 9px 0;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--sss-chip-bg);
  border: 1px solid var(--sss-chip-line);
  color: var(--sss-text);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}
html[data-ips-scheme-active="light"] .sss-card__chip {
  background: rgba(254, 75, 3, .10);
  border-color: rgba(254, 75, 3, .30);
  color: #c73a02;
}

/* the outward arrow: the one honest tell that this row leaves the forum */
.sss-card__chip::after {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / 9px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / 9px no-repeat;
}

.sss-card__title {
  font-size: 1.13rem;
  font-weight: 700;
  line-height: 1.32;
  margin-bottom: 11px;
  color: var(--ex-text, #efedf6);
}
html[data-ips-scheme-active="light"] .sss-card__title { color: #191725; }
.sss-card:hover .sss-card__title { color: var(--sss-text); }
html[data-ips-scheme-active="light"] .sss-card:hover .sss-card__title { color: #c73a02; }

/* excerpt sits where the topic card's "started by" meta sits, same size and
   colour, clamped so a long one cannot make this card tower over its
   neighbours */
.sss-card__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: .72rem;
  line-height: 1.3;
  color: var(--ex-muted, #8f8ba8);
}
html[data-ips-scheme-active="light"] .sss-card__excerpt { color: #5b5770; }

.sss-card__foot {
  grid-area: foot;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin: 18px 0 0 0;
  padding: 16px 0 0 0;
  border-top: 1px solid var(--ex-line, rgba(255, 255, 255, .08));
}
html[data-ips-scheme-active="light"] .sss-card__foot { border-top-color: rgba(0, 0, 0, .08); }

.sss-card__pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--sss-chip-bg);
  border: 1px solid var(--sss-chip-line);
  color: var(--sss-text);
}
html[data-ips-scheme-active="light"] .sss-card__pill {
  background: rgba(254, 75, 3, .10);
  border-color: rgba(254, 75, 3, .30);
  color: #c73a02;
}

/* MOBILE: matches the topic card's own 520px step down */
@media (max-width: 520px) {
  .sss-card {
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 14px;
    padding: 18px;
    border-radius: 16px;
  }
  .sss-card__thumb {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
  }
  .sss-card__title { font-size: 1.02rem; }
}