/*
 * 同名選手・同名監督（same name）
 *  - 一覧カードの「同名カード 他N枚」バッジと、その場に開く展開パネル
 *  - 詳細ページ下部の「同名の選手」/「同名の監督」セクション
 *
 * 列数は必ずコンテナ幅（auto-fill + min(100%, XXrem)）で決めること。
 * SWELL のサイドバー有無で本文幅が変わってもビューポート幅のメディアクエリでは検知できないため、
 * このプラグインでは一貫してビューポート幅の MQ を使わない方針。
 */

/* ---- 一覧カードのバッジ ---- */

.efpd-same-name__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    width: 100%;
    margin-top: 0.3rem;
    padding: 0.24rem 0.4rem;
    border: 1px solid var(--efpd-border);
    border-radius: 0.4rem;
    background: var(--efpd-surface-muted);
    color: var(--efpd-muted);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.efpd-same-name__badge-caret {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 0.26rem solid transparent;
    border-right: 0.26rem solid transparent;
    border-top: 0.3rem solid currentColor;
    transition: transform 0.15s ease;
}

.efpd-same-name__badge[aria-expanded="true"] {
    border-color: #31364b;
    background: #31364b;
    color: #fff;
}

.efpd-same-name__badge[aria-expanded="true"] .efpd-same-name__badge-caret {
    transform: rotate(180deg);
}

.efpd-same-name__badge.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    .efpd-same-name__badge:hover {
        border-color: #31364b;
        color: #31364b;
    }

    .efpd-same-name__badge[aria-expanded="true"]:hover {
        color: #fff;
    }
}

/* ---- 一覧内の展開パネル ---- */
/* 親グリッドの全幅を占める行になるため、代表カードの行の直下に帯として開く */

.efpd-same-name__panel {
    grid-column: 1 / -1;
    margin: 0.2rem 0 0.6rem;
    padding: 0.9rem 0.85rem;
    border: 1px solid var(--efpd-border);
    border-radius: 0.75rem;
    background: var(--efpd-surface-muted);
}

.efpd-same-name__panel-title {
    margin: 0 0 0.7rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--efpd-muted);
}

.efpd-same-name__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 6.4rem), 1fr));
    gap: 1.4rem 0.85rem;
}

.efpd-same-name__panel--coach .efpd-same-name__grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
    gap: 1.1rem 0.85rem;
}

/* ---- 詳細ページの同名セクション ---- */

.efpd-same-name-section {
    margin-top: 1.6rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--efpd-border);
}

/*
 * 見出しは SWELL の h2 デザインをそのまま使う。
 * ルート AGENTS.md の方針どおり、font-size / margin / 装飾疑似要素をプラグイン側で上書きしない。
 * 件数だけはテーマの文字色を継承させて、背景色が変わってもコントラストが崩れないようにする。
 */
.efpd-same-name-section__count {
    margin-left: 0.5em;
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: inherit;
    opacity: 0.75;
}

.efpd-same-name-section__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 6.4rem), 1fr));
    gap: 1.4rem 0.85rem;
}

.efpd-same-name-section--coach .efpd-same-name-section__grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
    gap: 1.1rem 0.85rem;
}

/*
 * content-visibility: auto はあえて使わない。
 * この値は「画面外なら描画をスキップする」以外に、常時 contain: paint も暗黙で付与する。
 * contain: paint は要素の padding box を描画のクリップ境界にするため、内側の
 * .efpd-player-card がホバーで transform: scale() / translateY() すると、はみ出した分
 * （角の丸み・box-shadow の光彩）が直角に切り落とされて見える（2026-08 に本番で発覚）。
 * 46枚程度の単純なカードDOMを content-visibility なしで描画するコストは無視できる規模なので、
 * ホバー演出が壊れない方を優先してここでは付けない。
 */

/*
 * ルートは <article>（1対1比較リンクの <a> をカード全体のアンカー内に置けないため）。
 * レイアウト系はここに残し、リンク系（text-decoration / color / focus / hover）は
 * 内側の .efpd-same-name__item-link へ移してある。監督一覧の
 * .efpd-coach-list__item / __detail-link と同じ構成。
 */
.efpd-same-name__item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.efpd-same-name__item-link {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    text-decoration: none;
    color: inherit;
}

.efpd-same-name__item-name {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--efpd-text);
}

.efpd-same-name__item-meta {
    margin: 0;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--efpd-muted);
}

.efpd-same-name__item-link:focus-visible,
.efpd-same-name__item-compare:focus-visible {
    outline: 2px solid #31364b;
    outline-offset: 2px;
    border-radius: 0.4rem;
}

/* いま見ているカードとの1対1比較（/compare/?ef_compare=現在ID,このID）へのリンク */
.efpd-same-name__item-compare {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    margin-top: auto;
    padding: 0.2rem 0.3rem;
    border: 1px solid var(--efpd-border);
    border-radius: 0.35rem;
    background: var(--efpd-surface-muted);
    color: var(--efpd-muted);
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
    .efpd-same-name__item-link:hover .efpd-same-name__item-name {
        text-decoration: underline;
    }

    .efpd-same-name__item-compare:hover {
        border-color: #31364b;
        background: #31364b;
        color: #fff;
    }
}