/* =========================================================
   BODY.CSS 
========================================================= */

/* ---------- SCROLLBAR ---------- */

::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#080e13}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(52,211,153,.35),rgba(139,92,246,.35));
  border-radius:999px;
  border:2px solid #080e13;
}

/* ---------- CARD SIZE VARIABLES (desktop default) ---------- */

:root{
  --tc-gap:14px;
  --tc-pad:22px 20px 20px;
  --tc-emoji:2.1rem;
  --tc-emoji-gap:16px;
  --tc-title:1.04rem;
  --tc-tag:.66rem;
  --tc-desc:.87rem;
  --tc-arrow:.78rem;
  --tc-arrow-pad:9px 34px 9px 18px;
  --tc-arrow-cut:22px;
}

/* ---------- FINAL LINE ---------- */

.final{
  width:100%;
  font-size:1.5rem;
  text-align:center;
  margin:18px 0 5px;
  font-weight:700;
  line-height:1.35;
  overflow-wrap:anywhere;
}

.bold-green{
  color:var(--green-1);
  font-size:inherit;
  font-weight:700;
}

/* ---------- TOOLS GRID: 3 PER ROW, 2 ON SMALL SCREENS ---------- */

.tools{width:100%;padding:7px 0;min-width:0}

body .tools-grid,
body .tool-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--tc-gap);
  align-items:stretch;
}

/* ---------- TOOL CARD ---------- */

.tool-card{
  width:100%;
  min-height:260px;
  align-items:flex-start;
  padding:var(--tc-pad);
  background:rgba(7,13,18,.72);
  cursor:pointer;
  user-select:none;
  text-align:left;
  outline:none;
  overflow:hidden;
}

.tool-card.active{background:rgba(52,211,153,.05)}

.tool-card:focus-visible{
  border-color:var(--green-1);
  box-shadow:0 0 0 3px rgba(52,211,153,.28),0 14px 30px rgba(52,211,153,.16);
}

.tool-emoji{
  font-size:var(--tc-emoji);
  line-height:1;
  margin:0 auto var(--tc-emoji-gap);
  filter:drop-shadow(0 4px 12px rgba(52,211,153,.22));
}

.tool-title{
  width:100%;
  min-width:0;
  font-size:var(--tc-title);
  font-weight:700;
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--text);
  margin-bottom:7px;
  overflow-wrap:anywhere;
  word-break:normal;
}

.tool-tag{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  min-width:0;
  padding:3px 10px;
  border-radius:999px;
  font-size:var(--tc-tag);
  font-weight:300;
  line-height:1.3;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--green-1);
  background:rgba(52,211,153,.08);
  border:1px solid rgba(52,211,153,.25);
  margin-bottom:12px;
  overflow-wrap:anywhere;
}

.tool-desc{
  width:100%;
  min-width:0;
  flex:1;
  color:#b9cfc9;
  font-size:var(--tc-desc);
  font-weight:300;
  line-height:1.55;
  margin-bottom:16px;
  overflow-wrap:anywhere;
  word-break:normal;
}


.tool-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin-top: auto;
  flex-shrink: 0;

  min-width: 140px;
  max-width: 100%;
  padding: 9px 26px;

  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.025em;
  text-align: center;
  text-decoration: none;

  color: #f5fff9;

  background: linear-gradient(
    110deg,
    #30203f 0%,
    #263849 30%,
    #176052 63%,
    #20875b 100%
  );

  border: 1px solid rgba(133, 205, 164, 0.30);
  border-radius: 999px;

  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.24),
    0 2px 8px rgba(24, 105, 72, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease;
}

.tool-card:hover .tool-arrow,
.tool-card.active .tool-arrow {
  background: linear-gradient(
    110deg,
    #3b2850 0%,
    #2b4655 30%,
    #1d705c 63%,
    #2b9969 100%
  );

  transform: translateX(3px);

  border-color: rgba(156, 222, 182, 0.42);

  box-shadow:
    0 5px 16px rgba(0, 0, 0, 0.22),
    0 4px 12px rgba(25, 120, 79, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.tool-card:active .tool-arrow {
  transform: translateX(3px) scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
  .tool-arrow {
    transition: none;
  }
}

/* =========================================================
   RESPONSIVE
   Columns: 3 above 600px, 2 below. Never 1.
   Card contents shrink in steps so cards stay compact.
========================================================= */

@media(max-width:900px){
  .final{font-size:1.3rem;margin-top:12px;margin-bottom:5px}
}

/* ---------- 600px – 759px: still 3 columns, slimmer cards ---------- */

@media(max-width:759px){
  :root{
    --tc-gap:12px;
    --tc-pad:16px 14px 14px;
    --tc-emoji:1.9rem;
    --tc-emoji-gap:10px;
    --tc-title:1rem;
    --tc-tag:.6rem;
    --tc-desc:.82rem;
    --tc-arrow:.74rem;
    --tc-arrow-pad:8px 28px 8px 14px;
    --tc-arrow-cut:18px;
  }

  .final{font-size:1.15rem;margin-top:10px;margin-bottom:5px}

  .tool-card{min-height:0}
  .tool-tag{margin-bottom:9px;letter-spacing:.06em}

  .tool-desc{
    line-height:1.4;
    margin-bottom:12px;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:4;
    line-clamp:4;
    overflow:hidden;
  }
}

/* ---------- UNDER 600px: 2 columns ---------- */

@media(max-width:599px){
  :root{
    --tc-gap:10px;
    --tc-pad:14px 12px 12px;
    --tc-emoji:1.7rem;
    --tc-emoji-gap:8px;
    --tc-title:.95rem;
    --tc-tag:.56rem;
    --tc-desc:.78rem;
    --tc-arrow:.72rem;
    --tc-arrow-pad:7px 24px 7px 12px;
    --tc-arrow-cut:16px;
  }

  body .tools-grid,
  body .tool-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  /* odd card at the end: centered, same width as the others */
  body .tools-grid .tool-card:last-child:nth-child(odd),
  body .tool-grid .tool-card:last-child:nth-child(odd){
    grid-column:1 / -1;
    justify-self:center;
    width:calc((100% - var(--tc-gap)) / 2);
  }

  .final{font-size:1.1rem;line-height:1.3;margin-top:15px;margin-bottom:5px}
  .tools{padding:0}

  .tool-tag{
    letter-spacing:.04em;
    padding:3px 8px;
    border-radius:10px;
    margin-bottom:8px;
  }

  .tool-desc{
    margin-bottom:10px;
    -webkit-line-clamp:3;
    line-clamp:3;
  }
}

/* ---------- 380px AND BELOW: smallest phones, still 2 columns ---------- */

@media(max-width:380px){
  :root{
    --tc-gap:8px;
    --tc-pad:12px 10px 10px;
    --tc-emoji:1.55rem;
    --tc-title:.9rem;
    --tc-tag:.52rem;
    --tc-desc:.74rem;
    --tc-arrow:.68rem;
    --tc-arrow-pad:6px 22px 6px 10px;
    --tc-arrow-cut:14px;
  }

  .final{font-size:1rem;line-height:1.3;margin-top:17px;margin-bottom:3px}
}

/* ---------- TOUCH DEVICES: no sticky hover lift ---------- */

@media(hover:none){
  .tool-card:hover{transform:none}
}