/* css/content.css (CHANGED) */

/* Intro section */
.tools-hero {
  margin-top: 3.2rem;
  text-align: left;
  /* left on desktop */
}

@media (max-width:900px) {
  .tools-hero {
    text-align: center;
  }

  /* centered on mobile */
}

.tools-title {
  font-family: Metropolis-B, var(--font);
  font-weight: 800;
  font-size: clamp(2.1rem, 5.2vw, 3rem);
  /* bigger title */
  letter-spacing: -.01em;
}

.tools-lead {
  color: var(--muted);
  font-family: Metropolis-R, var(--font);
  font-size: clamp(.95rem, 1.4vw, 1.05rem);
  margin: .7rem 0 0 0;
  /* fully left-aligned */
  max-width: 840px;
}

@media (max-width:900px) {
  .tools-lead {
    margin: .7rem auto 0;
  }

  /* center only on mobile */
}

.tools-grid {
  margin-top: 2.4rem;
}

/* more space between subtext and content */

/* Cards grid */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding-bottom: 150px;
  /* a bit wider feel */
}

@media (max-width:900px) {
  .cards {
    grid-template-columns: 1fr
  }
}

/* Card */
.card {
  border: 0;
  /* remove outside border for flatter look */
  border-radius: 18px;
  background: var(--glass);
  padding: 0;
  overflow: hidden;
  /* keep top corners on image */
  display: grid;
  gap: 0;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .06);
  /* subtle separation shadow */
}

/* Light mode: keep element completely white */
[data-theme="light"] .card {
  background: #ffffff;
}

/* Media flush top + sides, rounded via parent */
.media {
  border: 0;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Content spacing inside card */
:root {
  --card-pad: clamp(1rem, 2vw, 1.4rem);
}

.card-title,
.card-text {
  padding-left: var(--card-pad);
  padding-right: var(--card-pad);
}

.card-title {
  font-family: Metropolis-SB, var(--font);
  font-weight: 800;
  font-size: 1.22rem;
  /* bigger caption */
  margin-top: 1.2rem;
  /* more space around caption */
  margin-bottom: .45rem;
}

.card-text {
  color: var(--muted);
  font-size: .98rem;
  margin-bottom: 1rem;
  text-align: left;
  /* ensure left aligned */
}

/* Actions row: button left, optional GitHub icon right */
.card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: var(--card-pad);
  padding-right: var(--card-pad);
  margin-bottom: var(--card-pad);
}

/* Button: left aligned, bigger, blue gradient in all modes */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .68rem 1.1rem;
  /* bigger & more prominent */
  border-radius: 999px;
  /* pill style */
  border: 0;
  font-weight: 800;
  font-size: 1rem;
  color: #fff;
  background: linear-gradient(135deg, #3B82F6 0%, #0EA5E9 100%);
  box-shadow: 0 6px 18px rgba(14, 165, 233, .22);
  transition: transform .15s ease, box-shadow .18s ease, filter .18s ease;
  width: max-content;
  margin: 0;
  /* controlled by .card-actions */
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(14, 165, 233, .28);
  filter: saturate(1.05);
}

.btn .ico {
  width: 16px;
  height: 16px;
  display: block
}

/* Optional GitHub icon link (flat, line style, no background) */
.gh-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--muted);
  text-decoration: none;
  background: none;
  border: 0;
}

.gh-link img,
.gh-link svg {
  width: 22px;
  height: 22px;
  display: block
}

.gh-link:hover {
  color: var(--text);
  opacity: .95
}

/* Theme-aware swap for GitHub icon */
.gh-link .gh-dark {
  display: none;
}

[data-theme="dark"] .gh-link .gh-light {
  display: none;
}

[data-theme="dark"] .gh-link .gh-dark {
  display: block;
}