/* Tools directory — still cards, image swap, no hover motion */

.tool-card,
.tool-card:hover {
  padding: 0;
  transform: none;
}

.tool-card::after {
  content: none;
  display: none;
}

.tool-card__media {
  position: relative;
  width: 100%;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0b1220;
  border-bottom: 1px solid var(--border);
}

.tool-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center center;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  transform: none;
}

.tool-card:hover .tool-card__media img,
.tool-card:hover .tool-shot--live {
  transform: none;
}

.tool-shot--live {
  opacity: 0;
  animation: tool-swap 4s linear infinite;
}

@keyframes tool-swap {
  0%, 45% { opacity: 0; }
  55%, 95% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tool-shot--live { animation: none; opacity: 1; }
}

.tool-card__body {
  padding: 14px 16px 2px;
}

.tool-card__body h2 {
  padding-right: 0;
  margin-bottom: 8px;
}

.tool-card__body p {
  margin-bottom: 0;
}

.tool-card__tag {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-light);
  padding: 4px 10px;
  border-radius: 6px;
}

.tool-card__arrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 16px 12px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}

.tool-card__arrow-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}

.breadcrumb {
  margin: 0 0 7px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  display: block;
}

.blog-hero {
  margin: 2px 0 14px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  text-align: center;
  overflow: visible;
}

.blog-hero::before {
  content: none;
}

.blog-hero__badge {
  display: block;
  margin: 0 0 2px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--accent);
}

.blog-hero h1 {
  margin: 0;
  font-size: 1.85rem;
  line-height: 1.1;
}

.blog-hero h1::after {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  margin: 8px auto 0;
  border-radius: 99px;
  background: #2563eb;
}

.blog-hero__meta {
  margin: 8px auto 0;
  max-width: 36rem;
  font-size: 14px;
  line-height: 1.45;
}

.tool-page__shot {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid #94a3b8;
  box-shadow: 0 0 0 6px #f1f5f9, 0 10px 28px rgba(15, 23, 42, 0.12);
  margin: 10px 0 8px;
  background: #fff;
}

.tool-page__caption {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  margin: 0 0 22px;
}

.tool-page .cta-btn {
  display: inline-flex;
  margin-top: 8px;
}

.tool-page ul {
  margin: 0 0 22px 1.1rem;
}

.tool-page li {
  margin-bottom: 8px;
}

.tool-table-wrap {
  overflow-x: auto;
  margin: 8px 0 24px;
  -webkit-overflow-scrolling: touch;
}

.tool-page table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 14px;
}

.tool-page th,
.tool-page td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.tool-page th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.tool-page td.num,
.tool-page th.num {
  text-align: right;
  white-space: nowrap;
  width: 6.5rem;
}

@media (max-width: 640px) {
  .nav-hide-sm { display: none; }

  .blog-header__nav {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .blog-header__nav::-webkit-scrollbar { display: none; }

  .blog-header__nav a { flex-shrink: 0; }

  .tool-card__body { padding: 16px 16px 2px; }

  .tool-card__arrow { padding: 12px 16px 14px; }

  .tool-card h2 { padding-right: 0; }
}

/* Equal card height: body grows, arrow bar sticks to the bottom */
.tool-card{display:flex;flex-direction:column;height:100%}
.tool-card__body{flex:1 1 auto}
.tool-card__arrow{margin-top:auto}
.blog-card-grid{align-items:stretch}
@media (min-width: 980px){.blog-card-grid{grid-template-columns:repeat(3,1fr)}}

/* Photo pairs for the Shadow Box card: two real lamp photos that crossfade, same rhythm as the screenshots */
.tool-card__media .tool-pair{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;padding:10px;background:linear-gradient(135deg,#0b1220,#1e293b)}
.tool-card__media .tool-pair img{position:static;inset:auto;width:auto;height:100%;aspect-ratio:480/611;object-fit:cover;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.45)}
.tool-card__body{padding-bottom:14px}