/**
 * Snoutscoop case study grid cards.
 */

#shortcode-plugin_list {
  background-color: var(--blue-note-dark);
}

.snoutscoop-case-list {
  width: min(100%, var(--content-wide, 94rem));
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 3rem) var(--page-gutter, clamp(1rem, 4vw, 3rem));
  color: var(--paper-light, #fff9d8);
}

.snoutscoop-case-list__header {
  display: grid;
  width: min(100%, 76rem);
  gap: .75rem;
  margin: 0 auto clamp(1.35rem, 3vw, 2rem);
}

.snoutscoop-case-card__type,
.snoutscoop-case-card__number,
.snoutscoop-case-card__stack li,
.snoutscoop-case-card__cta {
  font-family: var(--font-mono, Consolas, monospace);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.snoutscoop-case-list__title {
  width: fit-content;
  margin: 0;
  padding: .45rem .75rem;
  border: 2px solid var(--ink, #130f2f);
  background: var(--signal, #ff2f7d);
  color: var(--white, #fff);
  box-shadow: .2rem .2rem 0 var(--ink, #130f2f);
  font-family: var(--font-mono, Consolas, monospace);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

.snoutscoop-case-list__subtitle {
  max-width: 58rem;
  margin: .35rem 0 0;
  color: rgb(255 249 216 / 78%);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.6;
}

.snoutscoop-case-grid {
  display: grid;
  width: min(100%, 76rem);
  margin-inline: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.85rem, 1.6vw, 1.15rem);
}

.snoutscoop-case-grid__item,
.snoutscoop-case-card {
  min-width: 0;
}

.snoutscoop-case-card {
  height: 100%;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: .55rem;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 4%), transparent 42%),
    var(--ink, #130f2f);
  box-shadow: 0 .8rem 1.8rem rgb(0 0 0 / 15%);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.snoutscoop-case-card:hover {
  transform: translateY(-.18rem);
  border-color: var(--orange, #ff6b00);
  box-shadow: .22rem .22rem 0 var(--orange, #ff6b00), 0 .9rem 1.8rem rgb(0 0 0 / 20%);
}

.snoutscoop-case-card__link {
  position: relative;
  display: flex;
  min-height: 12.8rem;
  height: 100%;
  flex-direction: column;
  gap: .68rem;
  padding: clamp(1rem, 1.65vw, 1.35rem);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
}

.snoutscoop-case-card__link::after {
  display: none;
}

.snoutscoop-case-card__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.snoutscoop-case-card__number {
  color: var(--cyan, #12f0ff);
  font-size: .68rem;
  font-weight: 900;
}

.snoutscoop-case-card__type {
  max-width: 70%;
  padding: .28rem .56rem;
  border-radius: 999rem;
  background: rgb(255 255 255 / 10%);
  color: var(--paper-light, #fff9d8);
  font-size: .62rem;
  font-weight: 900;
}

.snoutscoop-case-card__title {
  max-width: 17ch;
  margin: .18rem 0 0;
  color: var(--white, #fff);
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1.05;
}

.snoutscoop-case-card__summary {
  margin: 0;
  color: rgb(255 249 216 / 82%);
  font-size: clamp(.86rem, 1vw, .95rem);
  line-height: 1.55;
}

.snoutscoop-case-card__stack {
  display: flex;
  flex-wrap: wrap;
  gap: .38rem;
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}

.snoutscoop-case-card__stack li {
  padding: .27rem .48rem;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 999rem;
  color: rgb(255 249 216 / 74%);
  font-size: .58rem;
  font-weight: 800;
}

.snoutscoop-case-card__cta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  width: fit-content;
  margin-top: .12rem;
  color: var(--green, #42d957);
  font-size: .64rem;
  font-weight: 900;
}

.snoutscoop-case-card--addon .snoutscoop-case-card__link::after,
.snoutscoop-case-card--site-addon .snoutscoop-case-card__link::after {
  background: var(--orange, #ff6b00);
}

.snoutscoop-case-card--child-theme .snoutscoop-case-card__link::after {
  background: var(--green, #42d957);
}

.snoutscoop-case-card--utility-plugin .snoutscoop-case-card__link::after {
  background: var(--cyan, #12f0ff);
}

.snoutscoop-case-list__empty {
  color: var(--ink, #130f2f);
  font-weight: 700;
}

.lubinik-list-archive-link {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.25rem, 3vw, 2.25rem);
}

.lubinik-list-archive-link__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.8rem;
  padding: .75rem 1.1rem;
  border: 2px solid var(--ink, #130f2f);
  border-radius: var(--radius-sm, .4rem);
  background: var(--signal, #ff2f7d);
  color: var(--white, #fff);
  box-shadow: .22rem .22rem 0 var(--ink, #130f2f);
  font-family: var(--font-mono, Consolas, monospace);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.lubinik-list-archive-link__button::after {
  content: "->";
  margin-left: .55rem;
}

.lubinik-list-archive-link__button:hover {
  transform: translate(-.08rem, -.08rem);
  background: var(--orange, #ff6b00);
  color: var(--white, #fff);
  box-shadow: .34rem .34rem 0 var(--ink, #130f2f);
}

@media (max-width: 980px) {
  .snoutscoop-case-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .snoutscoop-case-grid {
    grid-template-columns: 1fr;
  }

  .snoutscoop-case-card__link {
    min-height: 0;
  }
}