/**
 * StoryConfessions Pro — Component Rescue
 *
 * Fallback presentation for repeated card-like collections whose own plugin
 * stylesheet is missing or failed to enqueue. Nothing is selected by brittle
 * plugin class names: JavaScript adds the sc-rescue-* classes only after it
 * verifies that a repeated component is effectively unstyled.
 */

#primary .sc-rescue-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)) !important;
  gap: clamp(1rem, 2vw, 1.4rem) !important;
  align-items: stretch !important;
  width: 100% !important;
  margin-block: clamp(1rem, 2vw, 1.75rem) !important;
}

#primary .sc-rescue-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: .65rem !important;
  min-width: 0 !important;
  min-height: 150px !important;
  padding: clamp(1rem, 2vw, 1.35rem) !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--sc-border, rgba(127,127,127,.22)) !important;
  border-radius: 18px !important;
  background: var(--sc-surface, #fff) !important;
  color: var(--sc-ink, #172033) !important;
  box-shadow: 0 10px 32px rgba(15, 23, 42, .07) !important;
  text-decoration: none !important;
  -webkit-text-fill-color: currentColor;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

html[data-theme="dark"] #primary .sc-rescue-card {
  background: var(--sc-surface, #181a21) !important;
  color: var(--sc-ink, #f4f7ff) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.24) !important;
}

#primary .sc-rescue-card:hover {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--sc-brand, #6d28d9) 42%, var(--sc-border, #d9dee8)) !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .11) !important;
}

#primary .sc-rescue-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--sc-brand, #6d28d9) 55%, transparent) !important;
  outline-offset: 3px !important;
}

#primary .sc-rescue-card :where(h1,h2,h3,h4,h5,h6,p) {
  max-width: none !important;
}

#primary .sc-rescue-card :where(h1,h2,h3,h4,h5,h6) {
  margin: 0 !important;
  color: var(--sc-ink, #172033) !important;
  -webkit-text-fill-color: currentColor !important;
  line-height: 1.18 !important;
  text-decoration: none !important;
}

html[data-theme="dark"] #primary .sc-rescue-card :where(h1,h2,h3,h4,h5,h6) {
  color: var(--sc-ink, #f4f7ff) !important;
}

#primary .sc-rescue-card p {
  margin: 0 !important;
  color: var(--sc-muted, #667085) !important;
  -webkit-text-fill-color: currentColor !important;
  line-height: 1.55 !important;
}

#primary .sc-rescue-card a {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  text-decoration: none !important;
}

#primary .sc-rescue-icon {
  order: -10 !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 2.75rem !important;
  height: 2.75rem !important;
  margin: 0 0 .2rem !important;
  font-size: 1.8rem !important;
  line-height: 1 !important;
}

#primary .sc-rescue-card > :where(img,figure,picture) {
  max-width: 100% !important;
}

#primary .sc-rescue-card img {
  height: auto !important;
}

/* Nested buttons/favourite controls should stay compact instead of becoming cards. */
#primary .sc-rescue-card :where(button,[role="button"]) {
  max-width: 100%;
}

/* Opt-out for intentionally editorial/plain-link collections. */
#primary [data-sc-layout-lock],
#primary .sc-layout-lock {
  /* marker only */
}

@media (max-width: 680px) {
  #primary .sc-rescue-grid {
    grid-template-columns: 1fr !important;
  }
  #primary .sc-rescue-card {
    min-height: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #primary .sc-rescue-card {
    transition: none !important;
  }
  #primary .sc-rescue-card:hover {
    transform: none !important;
  }
}