/* site/css/tools.css — Free Tools section.
   Reuses the design tokens defined in styles.css (:root) so this section
   looks native to the rest of the site rather than a bolt-on. */

.tools-hero{ padding-top:var(--space-6); }

.tool-grid{ display:grid; gap:20px; grid-template-columns:1fr; margin-top:var(--space-4); }
@media(min-width:640px){ .tool-grid{ grid-template-columns:1fr 1fr; } }
@media(min-width:960px){ .tool-grid{ grid-template-columns:repeat(3,1fr); } }

.tool-card{
  display:block; border:1px solid var(--line); border-radius:var(--radius); padding:26px;
  background:#fff; transition:box-shadow .2s ease, transform .15s ease; text-decoration:none; color:inherit;
}
.tool-card:hover{ box-shadow:0 8px 24px rgba(11,31,58,.06); transform:translateY(-2px); }
.tool-card .icon{
  width:42px; height:42px; border-radius:10px; background:rgba(176,141,87,.12);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
  font-family:var(--font-mono); font-size:11px; color:var(--gold-text); font-weight:700;
}
.tool-card h3{ font-size:16px; }
.tool-card p{ font-size:13px; color:var(--slate); margin-top:6px; }

/* Upload dropzone */
.tool-dropzone{
  border:2px dashed var(--line); border-radius:var(--radius); padding:clamp(28px,6vw,48px) 20px;
  text-align:center; background:var(--paper-alt); transition:border-color .15s ease, background .15s ease;
  cursor:pointer; margin-top:var(--space-3);
}
.tool-dropzone:hover, .tool-dropzone.drag-over{ border-color:var(--gold); background:#fff; }
.tool-dropzone input[type="file"]{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;
}
.tool-dropzone .dz-icon{ font-size:28px; margin-bottom:10px; }
.tool-dropzone .dz-main{ font-size:15px; font-weight:600; color:var(--ink); }
.tool-dropzone .dz-sub{ font-size:12.5px; color:var(--slate); margin-top:6px; }

.tool-file-chip{
  display:none; align-items:center; gap:10px; margin-top:16px; padding:10px 14px;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff; font-size:13px;
}
.tool-file-chip.show{ display:flex; }
.tool-file-chip .name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tool-file-chip button{
  border:none; background:none; color:var(--slate); cursor:pointer; font-size:16px; line-height:1; padding:2px 4px;
}

.tool-options{ display:none; gap:14px; margin-top:16px; flex-wrap:wrap; }
.tool-options.show{ display:flex; }
.tool-options .field{ display:flex; flex-direction:column; gap:4px; }
.tool-options label{ font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--slate); }
.tool-options input{
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:9px 12px; font-size:14px; width:120px;
  font-family:var(--font-body); background:#fff; color:var(--ink);
}

.tool-convert-btn{ margin-top:20px; width:100%; justify-content:center; }
.tool-convert-btn[disabled]{ opacity:.5; cursor:not-allowed; }

.tool-status{
  margin-top:16px; padding:12px 14px; border-radius:var(--radius-sm); font-size:13.5px; display:none;
}
.tool-status.show{ display:block; }
.tool-status.info{ background:var(--paper-alt); color:var(--ink); border:1px solid var(--line); }
.tool-status.error{ background:#F5E9E9; color:#7A2E2E; border:1px solid #E3C9C9; }
.tool-status.success{ background:#EEF1EC; color:#3E5236; border:1px solid #D3DECB; }

.tool-progress{ width:100%; height:6px; border-radius:4px; background:var(--line); overflow:hidden; margin-top:10px; display:none; }
.tool-progress.show{ display:block; }
.tool-progress .bar{ height:100%; width:30%; background:var(--gold); animation:tool-progress-indeterminate 1.1s ease-in-out infinite; }
@keyframes tool-progress-indeterminate{
  0%{ margin-left:-30%; } 100%{ margin-left:100%; }
}

.tool-download-btn{ margin-top:14px; display:none; }
.tool-download-btn.show{ display:inline-flex; }

/* Steps / how it works */
.tool-steps{ display:grid; gap:18px; grid-template-columns:1fr; margin-top:var(--space-3); }
@media(min-width:760px){ .tool-steps{ grid-template-columns:repeat(3,1fr); } }
.tool-step{ border:1px solid var(--line); border-radius:var(--radius); padding:22px; background:#fff; }
.tool-step .num{ font-family:var(--font-display); font-style:italic; font-size:22px; color:var(--gold-soft); }
.tool-step h3{ font-size:14.5px; margin-top:8px; }
.tool-step p{ font-size:12.5px; color:var(--slate); margin-top:6px; }

/* Related tools */
.related-tools{ display:flex; flex-wrap:wrap; gap:10px; margin-top:var(--space-3); }
.related-tools a{
  border:1px solid var(--line); border-radius:999px; padding:8px 16px; font-size:13px;
  text-decoration:none; color:var(--ink); background:#fff; transition:border-color .15s ease;
}
.related-tools a:hover{ border-color:var(--gold); }

/* AdSense-ready slots — no ad code or network calls, just reserved,
   clearly-labelled space so a real ad unit can be dropped in later without
   a layout shift. Hidden by default via [hidden] until ads are actually
   enabled; shown here only for layout review. */
.ad-slot{
  border:1px dashed var(--line); border-radius:var(--radius-sm); background:var(--paper-alt);
  display:flex; align-items:center; justify-content:center; color:var(--slate);
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  margin:var(--space-4) 0; min-height:90px;
}
.ad-slot[hidden]{ display:none; }

[dir="rtl"] .tool-card .icon{ margin-left:0; }
[dir="rtl"] .tool-file-chip .name{ text-align:right; }