/* =============================================================================
   sbc-industry-directory.css

   What this file does:
   Styles the industry directory: a heading, an optional lead line, and the grid of links to the
   twenty industry chatbot pages, each with its line icon. Tokens are set on the section itself, so
   it looks the same on pages whose :root variables are named differently.

   Context of where it's used in the repo:
   Rendered by render_industry_directory in templates/includes/industry_links_macros.html on the
   homepage, the AI receptionist page and the website chat page (Oct 24, 2026). It used to live in
   the homepage's inline styles.

   What it calls:
   Nothing. Fonts come from the page.

   What calls it:
   A <link rel="stylesheet"> on each page that renders the directory.
   ============================================================================= */

.industry-directory-section{
  --id-ink:#222222; --id-body:#4A463E; --id-forest:#1F3D33; --id-shell:#FBF9F5; --id-line:rgba(31,61,51,.14);
  --id-shadow:0 2px 8px rgba(34,34,34,.08);
  --id-serif:"Newsreader",Georgia,"Times New Roman",serif;
  --id-sans:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding:5rem 0;background:#FFFFFF;color:var(--id-ink);font-family:var(--id-sans)
}
.industry-directory-section.is-ivory{background:#F7F4EE}
.industry-directory-section .container{max-width:1200px;margin:0 auto;padding:0 20px}
.industry-directory-shell{border:1px solid var(--id-line);border-radius:8px;padding:2rem 1.25rem;background:var(--id-shell);box-shadow:var(--id-shadow)}
.industry-directory-head{text-align:center;max-width:46rem;margin:0 auto}
.industry-directory-head h2{margin:0;font:500 clamp(1.85rem,2.2vw + 1rem,2.5rem)/1.1 var(--id-serif);letter-spacing:-.01em;color:var(--id-ink);text-wrap:balance}
.industry-directory-head p{margin:.85rem 0 0;font-size:1.05rem;line-height:1.6;color:var(--id-body)}
.industry-directory-grid{display:grid;grid-template-columns:1fr;gap:.85rem;margin-top:2rem}
.industry-directory-link{display:flex;align-items:center;gap:.8rem;padding:1rem 1.05rem;border-radius:8px;border:1px solid rgba(34,34,34,.08);background:#FFFFFF;color:var(--id-ink);font-weight:600;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,color .18s ease}
.industry-directory-link:hover{transform:translateY(-1px);box-shadow:var(--id-shadow);border-color:rgba(31,61,51,.3);color:var(--id-forest);text-decoration:none}
.industry-directory-icon{width:28px;height:28px;flex:0 0 28px;display:inline-flex;align-items:center;justify-content:center;color:var(--id-forest)}
.industry-directory-icon svg{display:block;width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.industry-directory-all{display:flex;justify-content:center;margin-top:1.5rem}
.industry-directory-all a{color:var(--id-forest);font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
@media (min-width:768px){
  .industry-directory-shell{padding:2.25rem 2rem}
  .industry-directory-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .industry-directory-link{min-height:60px}
}
@media (max-width:768px){.industry-directory-section{padding:3.5rem 0}}
@media (prefers-reduced-motion:reduce){.industry-directory-link{transition:none}}