/* ============================================================
   CYMOTHOE · directories.css
   Page-specific rules only — shared design system lives in common.css
   ============================================================ */

/* ---- directory sections (collapsible headers: .cat-toggle in common.css) ---- */
.directory-list{display:flex;flex-direction:column;gap:1px;background:var(--bp-line-strong);border:1px solid var(--bp-line-strong);border-radius:var(--r);overflow:hidden;margin-top:1rem}

/* ---- directory columns ----
   Column count varies per category (see CAT_COLUMNS in directory.js);
   --cols is set inline on .directory-list and inherited by its children. */
.directory-list{--cols:4}
.directory-list__header,.directory-row{display:grid;grid-template-columns:1.8fr repeat(calc(var(--cols) - 1), 1fr);gap:1rem;align-items:start}
.directory-list__header{background:var(--bp-paper,#F4F1EA);padding:.55rem 1.2rem;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim)}
.directory-row{background:#FFFFFF;padding:.85rem 1.2rem}
.directory-row__cell{font-size:.88rem;color:var(--ink-dim);line-height:1.4}
.directory-row__cell--name{font-family:var(--font-display);letter-spacing:.02em;font-size:1rem;color:var(--ink)}
.directory-row__cell--name a{color:var(--cyan-text);text-decoration:underline}
.directory-row__cell--name a:hover{color:var(--brass)}
.directory-row__local{display:block;font-family:var(--font-body);font-size:.78rem;letter-spacing:0;color:var(--ink-faint);margin-top:.15rem}
.directory-row__desc{font-family:var(--font-body);letter-spacing:0;font-size:.82rem;line-height:1.5;color:var(--ink-dim);margin:.35rem 0 0}

/* ---- social media icon buttons (see SOCIAL_PLATFORMS in directory.js) ---- */
.social-links{display:inline-flex;flex-wrap:wrap;gap:.4rem;vertical-align:middle}
.social-link{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--bp-line-strong);border-radius:var(--r);color:var(--navy);background:#FFFFFF;transition:.15s}
.social-link svg{width:1.05rem;height:1.05rem}
.social-link:hover,.social-link:focus-visible{color:#FFFFFF;background:var(--cyan-text);border-color:var(--cyan-text)}
.social-link--youtube:hover path,.social-link--youtube:focus-visible path{fill:var(--cyan-text)}

@media(max-width:600px){
  .directory-list__header{display:none}
  .directory-row{grid-template-columns:1fr;gap:.3rem}
  .directory-row__cell:not(.directory-row__cell--name)::before{content:attr(data-label) ": ";font-family:var(--font-mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan-text)}
}

/* ---- group headings above the sections (see CAT_GROUPS in directory.js) ---- */
.cat-group{margin-top:3.2rem}
.cat-group:first-child{margin-top:2rem}
.cat-group__title{margin:0;padding:.7rem 0 0;border-top:3px solid var(--ink);font-family:var(--font-mono);font-size:.78rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--cyan-text)}