/* SobiPro Article Listings - optional neutral "soft cards" presentation. */
.spce-block.spce-style-soft {
  --spce-accent: var(--link-color, var(--cassiopeia-color-primary, #245f67));
  --spce-accent-text: #fff;
  --spce-text: var(--body-color, #24292f);
  --spce-muted: #65717a;
  --spce-border: rgba(31, 45, 55, .11);
  --spce-soft: #f5f7f8;
  --spce-surface: #fff;
  margin: 1.75rem 0;
  color: var(--spce-text);
}

.spce-style-soft .spce-heading {
  margin: 0 0 .9rem;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.25;
  font-weight: 700;
}

.spce-style-soft .spce-items {
  display: grid;
  gap: .9rem;
}

.spce-style-soft .spce-entry {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 1rem;
  background: var(--spce-surface);
  border: 1px solid var(--spce-border);
  border-radius: 14px;
  box-shadow: 0 5px 18px rgba(27, 39, 47, .07), 0 1px 2px rgba(27, 39, 47, .04);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.spce-style-soft .spce-entry:hover {
  border-color: rgba(31, 45, 55, .18);
  box-shadow: 0 8px 24px rgba(27, 39, 47, .09), 0 2px 4px rgba(27, 39, 47, .05);
  transform: translateY(-1px);
}

.spce-style-soft .spce-media {
  width: 78px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid var(--spce-border);
  border-radius: 11px;
  background: #fff;
  text-decoration: none;
}

.spce-style-soft .spce-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 7px;
}

.spce-style-soft .spce-media-placeholder {
  background: var(--spce-soft);
}

.spce-style-soft .spce-media-placeholder span {
  color: var(--spce-accent);
  font-size: 1.35rem;
  font-weight: 750;
}

.spce-style-soft .spce-body {
  min-width: 0;
}

.spce-style-soft .spce-title {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 750;
  line-height: 1.3;
}

.spce-style-soft .spce-title a {
  color: inherit;
  text-decoration: none;
}

.spce-style-soft .spce-title a:hover,
.spce-style-soft .spce-title a:focus-visible {
  color: var(--spce-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.spce-style-soft .spce-town {
  margin-top: .2rem;
  color: var(--spce-muted);
  font-size: .86rem;
}

.spce-style-soft .spce-description {
  margin: .48rem 0 0;
  color: var(--spce-muted);
  font-size: .94rem;
  line-height: 1.52;
}

.spce-style-soft .spce-actions {
  margin-top: .72rem;
}

.spce-style-soft .spce-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  min-height: 36px;
  padding: .48rem .78rem;
  border: 1px solid var(--spce-accent);
  border-radius: 8px;
  background: var(--spce-accent);
  color: var(--spce-accent-text);
  font-size: .86rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 2px 5px rgba(27, 39, 47, .1);
  transition: filter .16s ease, transform .16s ease, box-shadow .16s ease;
}

.spce-style-soft .spce-cta:hover,
.spce-style-soft .spce-cta:focus-visible {
  color: var(--spce-accent-text);
  text-decoration: none;
  filter: brightness(.94);
  box-shadow: 0 4px 10px rgba(27, 39, 47, .14);
  transform: translateY(-1px);
}

.spce-style-soft .spce-cta-arrow {
  font-size: 1rem;
  line-height: .8;
}

.spce-style-soft.spce-layout-toplist .spce-entry {
  grid-template-columns: 38px auto minmax(0, 1fr);
}

.spce-style-soft .spce-rank {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--spce-border);
  border-radius: 50%;
  background: var(--spce-soft);
  color: #4f5c64;
  font-size: .84rem;
  font-weight: 750;
}

.spce-style-soft.spce-layout-compact .spce-entry {
  padding: .72rem .82rem;
  border-radius: 11px;
  box-shadow: 0 3px 12px rgba(27, 39, 47, .055);
}

.spce-style-soft.spce-layout-compact .spce-media {
  width: 56px;
  height: 56px;
}

.spce-style-soft.spce-layout-compact .spce-description {
  display: none;
}

.spce-style-soft.spce-layout-grid .spce-items {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.spce-style-soft.spce-layout-grid .spce-entry {
  grid-template-columns: 1fr;
  align-content: start;
  align-items: start;
}

.spce-style-soft.spce-layout-grid .spce-media {
  width: 100%;
  height: 132px;
}

.spce-style-soft.spce-layout-grid .spce-media img {
  max-width: 190px;
}

.spce-style-soft.spce-layout-card .spce-entry {
  padding: 1.05rem;
}

@media (max-width: 560px) {
  .spce-style-soft .spce-entry,
  .spce-style-soft.spce-layout-card .spce-entry {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: .75rem;
    padding: .82rem;
  }

  .spce-style-soft .spce-media,
  .spce-style-soft.spce-layout-card .spce-media {
    width: 62px;
    height: 62px;
  }

  .spce-style-soft.spce-layout-toplist .spce-entry {
    grid-template-columns: 30px 54px minmax(0, 1fr);
    gap: .6rem;
  }

  .spce-style-soft.spce-layout-toplist .spce-media {
    width: 54px;
    height: 54px;
  }

  .spce-style-soft .spce-rank {
    width: 28px;
    height: 28px;
  }

  .spce-style-soft .spce-description {
    font-size: .9rem;
  }
}

/* Optional stronger elevated treatment. It deliberately builds on Soft cards. */
.spce-block.spce-style-raised {
  --spce-border: rgba(31, 45, 55, .09);
}

.spce-style-raised .spce-entry {
  border-color: rgba(31, 45, 55, .08);
  box-shadow: 0 12px 30px rgba(27, 39, 47, .11), 0 2px 7px rgba(27, 39, 47, .055);
}

.spce-style-raised .spce-entry:hover {
  box-shadow: 0 16px 38px rgba(27, 39, 47, .14), 0 4px 10px rgba(27, 39, 47, .065);
}

.spce-style-raised .spce-media {
  box-shadow: 0 3px 10px rgba(27, 39, 47, .07);
}

/* Fixed grid column choices. Auto remains the default fluid behaviour. */
.spce-style-soft.spce-layout-grid.spce-grid-cols-2 .spce-items {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.spce-style-soft.spce-layout-grid.spce-grid-cols-3 .spce-items {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.spce-style-soft.spce-layout-grid.spce-grid-cols-4 .spce-items {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Subtle featured treatment; native mode still exposes the class without CSS. */
.spce-style-soft .spce-entry.spce-entry-featured {
  border-color: color-mix(in srgb, var(--spce-accent) 26%, var(--spce-border));
  background: var(--spce-surface);
  background: linear-gradient(135deg, color-mix(in srgb, var(--spce-accent) 5%, var(--spce-surface)), var(--spce-surface) 62%);
  box-shadow: 0 7px 22px rgba(27, 39, 47, .085), 0 1px 2px rgba(27, 39, 47, .04);
}

.spce-style-soft .spce-featured-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0 0 .42rem;
  padding: .22rem .48rem;
  border: 1px solid color-mix(in srgb, var(--spce-accent) 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--spce-accent) 8%, #fff);
  color: var(--spce-accent);
  font-size: .68rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.spce-style-raised .spce-entry.spce-entry-featured {
  box-shadow: 0 14px 34px rgba(27, 39, 47, .135), 0 3px 8px rgba(27, 39, 47, .06);
}

@media (max-width: 900px) {
  .spce-style-soft.spce-layout-grid.spce-grid-cols-4 .spce-items,
  .spce-style-soft.spce-layout-grid.spce-grid-cols-3 .spce-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .spce-style-soft.spce-layout-grid.spce-grid-cols-2 .spce-items,
  .spce-style-soft.spce-layout-grid.spce-grid-cols-3 .spce-items,
  .spce-style-soft.spce-layout-grid.spce-grid-cols-4 .spce-items {
    grid-template-columns: 1fr;
  }
}