/* HOME -- "Which tool do I need?" guide (#tool-guide), latest guides from the blog (#latest-guides) and the FAQ (#faq) on index.php.
   Category colours come from tools/includes/tools_list.php (--c). */

/* which tool do I need */
.hgd-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; margin-top:42px; }
.hgd-card { display:flex; flex-direction:column; gap:14px; padding:28px; border:1px solid var(--tn-border); border-top:4px solid var(--c, var(--tn-primary)); border-radius:18px; background:#fff; }
.hgd-card-head { display:flex; align-items:center; gap:14px; }
.hgd-card-icon { flex:0 0 auto; width:46px; height:46px; 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:19px; }
.hgd-card h3 { margin:0; font-size:20px; font-weight:800; letter-spacing:-.3px; }
.hgd-card p { margin:0; color:var(--tn-muted); font-size:15px; line-height:1.75; }
.hgd-links { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:6px; }
.hgd-link { display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border:1px solid var(--tn-border); border-radius:100px; color:var(--tn-text); font-size:13px; font-weight:700; transition:border-color .2s ease, color .2s ease; }
.hgd-link i { color:var(--c, var(--tn-primary)); }
.hgd-link:hover { border-color:var(--c, var(--tn-primary)); color:var(--c, var(--tn-primary)); }

/* latest guides */
.hbl-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; margin-top:42px; }
.hbl-card { display:flex; flex-direction:column; height:100%; overflow:hidden; 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; }
.hbl-card:hover { border-color:var(--tn-primary); transform:translateY(-3px); box-shadow:0 14px 30px rgba(15,23,42,.08); color:var(--tn-text); }
.hbl-card img { width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--tn-background); }
.hbl-body { display:flex; flex-direction:column; gap:8px; flex:1; padding:20px; }
.hbl-date { color:var(--tn-muted); font-size:12px; font-weight:600; }
.hbl-title { margin:0; font-size:17px; font-weight:700; line-height:1.4; }
.hbl-excerpt { flex:1; margin:0; color:var(--tn-muted); font-size:14px; line-height:1.65; }
.hbl-more { color:var(--tn-primary); font-size:13px; font-weight:700; }

/* faq */
.hfq-list { max-width:820px; margin:42px auto 0; }
.hfq-item { margin-bottom:12px; border:1px solid var(--tn-border); border-radius:14px; background:#fff; }
.hfq-item summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; font-size:16px; font-weight:700; cursor:pointer; list-style:none; }
.hfq-item summary::-webkit-details-marker { display:none; }
.hfq-item summary i { flex:0 0 auto; color:var(--tn-muted); font-size:13px; transition:transform .2s ease; }
.hfq-item[open] summary i { transform:rotate(180deg); }
.hfq-item summary:focus-visible { outline:2px solid var(--tn-primary); outline-offset:2px; border-radius:14px; }
.hfq-item p { margin:0; padding:0 22px 20px; color:var(--tn-muted); font-size:15px; line-height:1.75; }

@media (max-width:991px) {
  .hbl-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:767px) {
  .hgd-grid, .hbl-grid { grid-template-columns:1fr; }
  .hgd-card { padding:22px; }
}

@media (prefers-reduced-motion:reduce) {
  .hbl-card, .hgd-link, .hfq-item summary i { transition:none; }
  .hbl-card:hover { transform:none; }
}