﻿/* ── Free Tools Marquee ── */
.dariba-tools-marquee {
  background: #fff;
  padding: var(--section-pad);
  border-top: 0.5px solid #F0F0EC;
}

.tools-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 40px;
  padding: 0 4px;
}
.tools-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-accent);
  margin-bottom: 10px;
}
.tools-title {
  font-family: var(--font-display);
  font-size: var(--size-section);
  color: var(--clr-primary);
  line-height: 1.2;
}
.tools-browse-link {
  font-size: 13px;
  color: var(--clr-accent);
  border-bottom: 0.5px solid var(--clr-accent-border);
  padding-bottom: 2px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.2s;
}
.tools-browse-link:hover { opacity: 0.75; }

.tools-marquee-wrap {
  overflow: hidden;
  position: relative;
  margin: 0 -40px;
}
.tools-marquee-wrap::before,
.tools-marquee-wrap::after {
  content:'';
  position:absolute;
  top:0;bottom:0;
  width:60px;
  z-index:2;
  pointer-events:none;
}
.tools-marquee-wrap::before{ left:0; background:linear-gradient(to right,#fff,transparent); }
.tools-marquee-wrap::after{ right:0; background:linear-gradient(to left,#fff,transparent); }

.tools-marquee-track {
  display: flex;
  gap: 12px;
  padding: 4px 40px;
  width: max-content;
  animation: tools-marquee var(--marquee-duration, 40s) linear infinite;
}
.tools-marquee-track:hover { animation-play-state: paused; }
@keyframes tools-marquee {
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

.tool-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: #F8F8F5;
  border: 0.5px solid #E8E8E4;
  border-radius: 8px;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  flex-shrink: 0;
  text-decoration: none;
}
.tool-chip:hover {
  background: var(--clr-accent-light);
  border-color: var(--clr-accent-border);
}
.chip-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--clr-accent);
  flex-shrink: 0;
}
.chip-name { font-size: 13px; font-weight: 500; color: var(--clr-primary); }
.chip-tag  { font-size: 11px; color: #aaa; }

.tools-count-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  padding: 0 4px;
}
.tools-count-num {
  font-family: var(--font-display);
  font-size: 36px;
  color: var(--clr-primary);
}
.tools-count-label {
  font-size: 13px;
  color: var(--clr-muted);
  line-height: 1.5;
  border-left: 0.5px solid #E0E0DC;
  padding-left: 16px;
}

@media(max-width:768px){
  .tools-header{ flex-direction:column; align-items:flex-start; gap:16px; }
  .tools-marquee-wrap{ margin:0 -20px; }
}
