/* HOME -- "Our free tools" section (index.php #free-tools) : search box, category filter and a card per tool.
   Colours come from each category in tools/includes/tools_list.php (--c). Filtering : assets/js/components/home_tools.js */

.htl-section { background:var(--tn-surface); }
.htl-section .tn-section-copy { max-width:920px; } /* wider than the site default (650px) : this intro is two long paragraphs */

.htl-controls { display:flex; flex-direction:column; align-items:center; gap:18px; margin:34px auto 30px; }

.htl-search { position:relative; width:100%; max-width:560px; }
.htl-search i { position:absolute; left:18px; top:50%; transform:translateY(-50%); color:var(--tn-muted); font-size:15px; pointer-events:none; }
.htl-search input { width:100%; min-height:54px; padding:12px 18px 12px 46px; border:1px solid var(--tn-border); border-radius:14px; background:#fff; color:var(--tn-text); font-size:15px; font-weight:500; box-shadow:0 8px 24px rgba(15,23,42,.05); transition:border-color .2s ease, box-shadow .2s ease; }
.htl-search input:focus { outline:none; border-color:var(--tn-primary); box-shadow:0 0 0 4px rgba(37,99,235,.12); }

.htl-filters { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.htl-filter { display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:8px 14px; border:1px solid var(--tn-border); border-radius:100px; background:#fff; color:#475569; font-size:13px; font-weight:700; cursor:pointer; transition:border-color .2s ease, background .2s ease, color .2s ease; }
.htl-filter i { color:var(--c, var(--tn-primary)); }
.htl-filter small { padding:2px 7px; border-radius:100px; background:var(--tn-background); color:var(--tn-muted); font-size:11px; font-weight:700; }
.htl-filter:hover { border-color:var(--c, var(--tn-primary)); color:var(--c, var(--tn-primary)); }
.htl-filter:focus-visible { outline:2px solid var(--tn-primary); outline-offset:2px; }
.htl-filter.is-active { border-color:var(--c, var(--tn-primary)); background:var(--c, var(--tn-primary)); color:#fff; }
.htl-filter.is-active i { color:#fff; }
.htl-filter.is-active small { background:rgba(255,255,255,.22); color:#fff; }

.htl-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; margin:0; padding:0; list-style:none; }
.htl-item[hidden] { display:none; }

.htl-card { display:flex; flex-direction:column; gap:14px; height:100%; padding:22px; border:1px solid var(--tn-border); border-radius:18px; background:#fff; color:var(--tn-text); transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.htl-card:hover { border-color:var(--c, var(--tn-primary)); transform:translateY(-3px); box-shadow:0 14px 30px rgba(15,23,42,.08); color:var(--tn-text); }
.htl-card:focus-visible { outline:2px solid var(--c, var(--tn-primary)); outline-offset:2px; }
.htl-card-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:color-mix(in srgb, var(--c, var(--tn-primary)) 12%, #fff); color:var(--c, var(--tn-primary)); font-size:18px; }
.htl-card-body { display:flex; flex-direction:column; gap:7px; flex:1; }
.htl-card-name { font-size:16px; font-weight:700; line-height:1.35; }
.htl-card-copy { flex:1; color:var(--tn-muted); font-size:14px; line-height:1.6; }
.htl-card-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:6px; }
.htl-card-cat { color:var(--c, var(--tn-primary)); font-size:12px; font-weight:700; }
.htl-tag { display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:100px; background:var(--tn-red-soft); color:var(--tn-red); font-size:11px; font-weight:700; }

.htl-empty { margin:10px 0 0; padding:22px; border:1px dashed var(--tn-border); border-radius:14px; color:var(--tn-muted); font-size:15px; text-align:center; }

@media (max-width:1199px) {
  .htl-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width:991px) {
  .htl-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:575px) {
  .htl-grid { grid-template-columns:1fr; gap:12px; }
  .htl-card { padding:18px; }
  .htl-filters { justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; width:100%; padding-bottom:4px; scrollbar-width:none; }
  .htl-filters::-webkit-scrollbar { display:none; }
  .htl-filter { flex:0 0 auto; }
}

@media (prefers-reduced-motion:reduce) {
  .htl-card, .htl-filter, .htl-search input { transition:none; }
  .htl-card:hover { transform:none; }
}