/* ===== Selective (scoped; won't touch other pages) ===== */
.sb-wrap{
  max-width: 925px;
  margin: 22px auto 28px;
  padding: 0 16px;
}
.sb-intro{
  text-align: center;
  max-width: 62ch;
  margin: 0 auto 18px;
}
.sb-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  justify-items: center;  /* centers cards in their tracks */
}

/* whole-tile is clickable, but ONLY the title gets the dotted hover */
.sb-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: inherit;  /* keep your site colors */
}

/* 220×220 frame; image centered; never stretched */
.sb-card{
  width: 220px; height: 220px;
  background: #fcfcfb;
  border-radius: 14px;
  border: 1px solid rgba(167,124,207,.18);
  outline: 1px solid rgba(0,0,0,.04);
  box-shadow: 0 4px 12px rgba(70,56,104,.10);
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease, box-shadow .18s ease;
}
.sb-item:hover .sb-card{
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(70,56,104,.16),
              0 0 0 3px rgba(90,201,180,.10) inset;
}
.sb-card img{
  max-width: 200px; max-height: 200px;
  width: auto; height: auto;
  object-fit: contain; display: block;
}

/* title under the frame, with your dotted hover accent */
.sb-title{
  margin: 0;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: .95rem;
  color: var(--title);
  text-align: center;
  text-decoration: none;
  border-bottom: 1px dotted transparent;
}
.sb-item:hover .sb-title{
  color: var(--link-hover);
  border-bottom-color: rgba(90,201,180,.75);
  text-underline-offset: 6px;  /* (optional) same vibe as elsewhere */
}


/* ===== Selective Breeding Project (detail) — scoped ===== */
.sbp-wrap{
  max-width: 925px;
  margin: 22px auto 28px;
  padding: 0 16px;
}

/* title + intro + hero image */
.sbp-hero{ text-align:center; margin-bottom: 14px; }
.sbp-intro{
  max-width: 62ch; margin: 6px auto 12px;
}
.sbp-figure{
  margin: 0 auto;
  max-width: 560px;
}
.sbp-figure img {
  display: block;
  margin: 0 auto;
  width: auto;       /* keep natural width */
  height: auto;      /* keep natural height */
  max-width: 100%;   /* still shrink gracefully if it’s huge */
  object-fit: none;  /* no resizing/stretching */
}

/* two-column layout with stacked left, tall right */
.sbp-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "origin standard"
    "notes  standard";
  gap: 18px;
  margin-top: 16px;
}
.sbp-origin  { grid-area: origin; }
.sbp-notes   { grid-area: notes; }
.sbp-standard{ grid-area: standard; }

@media (max-width: 860px){
  .sbp-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "origin"
      "notes"
      "standard";
  }
}

/* cards */
.sbp-block{
  background:#fcfcfb;
  border-radius:14px;
  padding:14px;
  outline:1px solid rgba(0,0,0,.04);
  border:1px solid rgba(167,124,207,.18);
  box-shadow:0 4px 12px rgba(70,56,104,.10);
}

.sbp-block h3{
  margin: 4px 0 10px;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  color: var(--title);
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--squiggle-teal);
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

.sbp-list{ margin: 0; padding-left: 18px; }
.sbp-list li{ margin: 6px 0; }

/* table styling */
.sbp-standard table{
  width:100%;
  border-collapse: collapse;
  background:#fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(167,124,207,.18) inset;
}
.sbp-standard td{
  padding:8px 10px;
  border-bottom:1px solid rgba(0,0,0,.06);
  vertical-align: top;
}
.sbp-standard tr:last-child td{ border-bottom:0; }
.sbp-standard td:first-child{ width: 160px; white-space: nowrap; }

/* download button */
.sbp-btn{
  display:inline-flex;
  align-items:center; gap:8px;
  padding:6px 10px;
  font-family:'Raleway',sans-serif; font-weight:700;
  text-decoration:none;
  color:#333;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.08);
  border-radius:999px;
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
}
.sbp-btn:hover{
  transform:translateY(-1px);
  background:#9de5d4;
  color:#0e3b35;
  border-color:transparent;
  box-shadow:0 10px 22px rgba(70,56,104,.12), 0 0 0 3px rgba(90,201,180,.10) inset;
}