/* =====================================================================
   social.css — /social (SNS・所有ドメイン一覧) 固有スタイル
   ===================================================================== */

/* 中見出しはタイポグラフィだけで区切る（枠や罫は敷かない軽量スタイル）。 */
.social-heading {
    margin: 34px 0 6px;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    color: var(--text);
}

.social-sub-lead {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 0.92rem;
}

/* ---------------------------------------------------------------------
   SNS グリッド。カードは自動折り返し (2〜3列)。
   --------------------------------------------------------------------- */
.social-grid {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}

.social-item {
    display: flex;
}

.social-card {
    --brand: var(--muted);
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.social-card:hover,
.social-card:focus-visible {
    outline: none;
    /* hover の光は --brand-glow (未指定なら --brand) を使う。X だけ Twitter blue に切替。 */
    border-color: color-mix(in srgb, var(--brand-glow, var(--brand)) 55%, transparent);
    background: var(--surface-2);
    transform: translateY(var(--lift-sm));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-glow, var(--brand)) 15%, transparent);
}

/* ブランド色の紐付け。全て :root の --brand-* トークンから参照 (V14 で SNS 6 色も昇格済)。
   X は --brand-glow に Twitter blue を追加して、rest 常時 border + halo を青くする (Home hero と sync)。
   アイコン色 (--brand) は白のまま (X monochrome brand)。 */
.social-card.x            { --brand: var(--brand-x); --brand-glow: var(--brand-x-hover); }
.social-card.github       { --brand: var(--brand-github); }
.social-card.yt           { --brand: var(--brand-yt); }
.social-card.discord      { --brand: var(--brand-discord); }
.social-card.keybase      { --brand: var(--brand-keybase); }
.social-card.zenn         { --brand: var(--brand-zenn); }
.social-card.qiita        { --brand: var(--brand-qiita); }
.social-card.stackoverflow{ --brand: var(--brand-stackoverflow); }
.social-card.linkedin     { --brand: var(--brand-linkedin); }
.social-card.bluesky      { --brand: var(--brand-bluesky); }
.social-card.misskey      { --brand: var(--brand-misskey); }

/* Social ページの X card だけ rest 常時光。他 SNS card は hover のみ (page が
   カード列なので全部光ると煩い、X は monochrome ブランドなので識別のため常時光が要る)。 */
.social-card.x {
    border-color: color-mix(in srgb, var(--brand-x-hover) 32%, var(--border));
    box-shadow: 0 0 14px color-mix(in srgb, var(--brand-x-hover) 18%, transparent);
}

.social-card-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--brand);
    font-size: 1.3rem;
}

.social-card-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.35;
}

.social-card-name {
    font-weight: 700;
    color: var(--text);
    font-size: 0.98rem;
}

.social-card-note {
    color: var(--muted);
    font-size: 0.82rem;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 準備中 (url 空) のカード。クリック不可、視覚的にも彩度を落とす。 */
.social-card.is-pending,
.domain-card.is-pending,
.org-card.is-pending {
    cursor: not-allowed;
    opacity: 0.55;
    background: transparent;
}

.social-card.is-pending .social-card-icon,
.social-card.is-pending .social-card-name {
    color: var(--muted);
}

/* 準備中カードは <a> ではなく <div> (クリック不可) だが、hover の
   浮上・発光ルールは要素種別を問わず当たるため、押せそうに見えてしまって
   いた。opacity/cursor と同じ specificity で打ち消す。 */
.social-card.is-pending:hover,
.domain-card.is-pending:hover,
.org-card.is-pending:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--border);
    background: transparent;
}

/* ---------------------------------------------------------------------
   所有ドメインリスト。SNS より少し縦長のカードで、URL とラベル位置を分ける。
   --------------------------------------------------------------------- */
.domain-list,
.org-list {
    /* list reset: style.css :where() で一元管理 */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}

.domain-item,
.org-item { display: flex; }

.domain-card,
.org-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.domain-card:hover,
.domain-card:focus-visible,
.org-card:hover,
.org-card:focus-visible {
    outline: none;
    border-color: rgba(var(--accent-rgb), 0.55);
    background: var(--surface-2);
    transform: translateY(var(--lift-sm));
}

/* 「今ここ」= このサイト自身のドメイン。ホバー移動を殺してリンクは自ページへ */
.domain-card.is-current {
    border-color: rgba(var(--accent-rgb), 0.45);
    cursor: default;
}
.domain-card.is-current:hover { transform: none; }

.domain-name {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-weight: 700;
    color: var(--text);
    font-size: 1.02rem;
    letter-spacing: -0.01em;
}

/* 所属団体名: ドメイン名と違って sans (Inter/Noto) で読ませる */
.org-name {
    font-family: var(--font);
    font-weight: 700;
    color: var(--text);
    font-size: 1.02rem;
    letter-spacing: -0.01em;
}

.domain-here {
    margin-left: 8px;
    font-family: var(--font);
    font-weight: 600;
    color: var(--accent);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

.domain-note,
.org-note {
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.55;
}

/* 480px の 1 カラム強制は削除済み: grid の auto-fill minmax がその幅では
   既に 1 カラムに畳んでおり効果ゼロの死メディアクエリだった (BP 規約 380/600/768/860 外)。 */