/* Full-width wrapper */
.scr-wrap{width:100%;max-width:100%;padding:0;margin:0}

/* Grid list */
.scr-grid{display:grid;gap:18px}

/* Card */
.scr-card{
  display:grid;
  grid-template-columns:140px 1fr;
  grid-template-areas:
    "logo title"
    "logo blurb"
    "logo cta";
  gap:16px;
  padding:18px 20px;
  border-radius:14px;
  border:1px solid rgba(0,255,247,.25);
  background:#0b1418;
  transition:border-color .15s ease, background .2s ease, box-shadow .2s ease;
}
.scr-card:hover{
  border-color:#00E676;
  background:linear-gradient(to bottom right,#000411,#112319);
  box-shadow:0 0 0 2px rgba(0,230,118,.08) inset;
}

/* Flatten inner wrappers so children sit on grid areas */
.scr-row{display:contents}
.scr-right{display:contents}

/* Logo */
.scr-left{grid-area:logo;align-self:center;padding:5px}
.scr-logo{display:block;max-width:100%;max-height:120px;object-fit:contain;border-radius:5px}

/* Title + score stacked */
.scr-head{grid-area:title;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.scr-name{margin:0;font-size:1.1rem;line-height:1.15;font-weight:700}
.scr-name, .scr-name a{color:#00fff7;text-decoration:none}
.scr-name a:hover{color:#00e676}
.scr-domain{display:none}
.scr-score{display:block;font-weight:700;opacity:.9}
.scr-score::after{content:"/100"}

/* Blurb spans full content column */
.scr-desc{grid-area:blurb;margin:2px 0 12px;color:#ffffff;max-width:none;width:100%}

/* CTAs */
.scr-cta{grid-area:cta;display:flex;gap:12px;flex-wrap:wrap}
.scr-btn{
  height:42px;line-height:42px;padding:0 16px;border-radius:12px;
  border:1px solid #00FFF7;background:transparent;color:#00FFF7;
  text-decoration:none;transition:background-color .15s,border-color .15s,color .15s;
}
.scr-btn:hover{background:#00E676;border-color:#00E676;color:#000411}

/* ≤980px */
@media (max-width:980px){
  .scr-card{
    grid-template-columns:96px 1fr;
    grid-template-areas:
      "logo title"
      "blurb blurb"
      "cta   cta";
    gap:14px;
  }
  .scr-logo{max-height:96px}
}

/* ≤640px */
@media (max-width:640px){
  .scr-card{grid-template-columns:72px 1fr;gap:12px}
  .scr-logo{max-height:64px}
}

/* Pagination */
.scr-pagination{display:flex;gap:8px;justify-content:center;margin-top:16px}
.scr-pagination a,.scr-pagination span{
  padding:6px 10px;border:1px solid #e0e4ea;border-radius:8px;text-decoration:none
}

/* force title color and stacking */
.tw-theme .scr-card .scr-name,
.tw-theme .scr-card .scr-name a{color:#00fff7 !important;text-decoration:none}
.tw-theme .scr-card .scr-name a:hover{color:#00e676 !important}

/* make blurb span full column */
.tw-theme .scr-card .scr-desc{max-width:none;width:100%}

/* logo radius + padding */
.tw-theme .scr-card .scr-left{padding:5px}
.tw-theme .scr-card .scr-left img.scr-logo{border-radius:5px !important}

/* Smaller title + tight spacing + white score */
.scr-head{gap:2px}
.scr-name{font-size:1rem; line-height:1.1; margin:0}
.scr-name,.scr-name a{color:#00fff7 !important; text-decoration:none}
.scr-score{display:block; color:#fff; margin-top:2px; font-weight:700; opacity:1}
.scr-score::after{content:"/100"}

/* Desktop: move CTAs into a right column so they “fit” naturally */
@media (min-width:980px){
  .scr-card{
    grid-template-columns:140px 1fr auto;
    grid-template-areas:
      "logo title cta"
      "logo blurb cta";
    align-items:center;
  }
  .scr-cta{
    grid-area:cta;
    display:flex;
    flex-direction:column;
    gap:8px;
    align-items:flex-end;
  }
  .scr-btn{height:36px; line-height:36px; padding:0 12px; border-radius:10px}
}

/* title + spacing overrides (beat Elementor) */
.tw-theme .scr-card h2.scr-name,
.tw-theme .scr-card h2.scr-name a{
  color:#00fff7 !important;
  font-size:2rem !important;
  line-height:1.1 !important;
  margin:0 0 2px !important;
  text-decoration:none !important;
  font-weight:700 !important;
}
.tw-theme .scr-card .scr-head{gap:2px !important}
.tw-theme .scr-card .scr-score{color:#fff !important; margin:0 !important}
.tw-theme .scr-card .scr-score::after{content:"/100"}

/* desktop layout: CTAs below blurb, aligned left */
@media (min-width:980px){
  .scr-card{
    grid-template-columns:140px 1fr;
    grid-template-areas:
      "logo title"
      "logo blurb"
      "logo cta";
  }
  .scr-cta{
    grid-area:cta;
    display:flex; flex-direction:row; gap:10px;
    justify-content:flex-start; align-items:center;
  }
  .scr-desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

}

/* slightly tighter overall */
.scr-card{padding:14px 16px}
.scr-desc{margin:6px 0 10px}