/* Přehled a referenční stránky navazují na společný panel Elektroniky. */
.connector-page, .connector-directory { padding: var(--layout-gap); min-width: 0; }
.connector-intro { margin: 0 0 var(--layout-gap); color: var(--text-secondary); }
.connector-index-list { display: grid; gap: var(--layout-gap); margin: 0; padding: 0; list-style: none; }
.connector-index-link { display: grid; grid-template-columns: 80px minmax(0, 1fr) 18px; align-items: center; gap: var(--layout-gap); padding: 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); }
.connector-index-link:hover { border-color: var(--primary); background: var(--surface-hover); }
.connector-index-text { min-width: 0; }
.connector-index-text strong { display: block; margin-bottom: 4px; font-size: var(--font-size-base); color: var(--heading); }
.connector-index-text > span { color: var(--muted); }
.connector-index-arrow { color: var(--primary); font-size: 28px; }
.connector-section + .connector-section { margin-top: var(--layout-gap); }
.connector-section h3 { margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.connector-section > p { margin: 0 0 var(--layout-gap); color: var(--text-secondary); }
.connector-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: var(--layout-gap); }
.connector-card { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); }
.connector-card h4 { margin: 12px 0 8px; }
/* Všechny nadpisy sekcí a konektorů mají velikost běžného textu, zůstávají tučné a zelené. */
.connector-section h3, .connector-card h4 { font-size: var(--font-size-base); font-weight: 700; color: var(--heading); }
.connector-card p { margin: 0; color: var(--text-secondary); }
/* Rozměr a bílé pozadí odpovídají předloze; samotné konektory mají přirozené proporce. */
.connector-drawing { display: block; width: 80px; height: 56px; flex-shrink: 0; margin: 0; border-radius: 3px; background: #fff; }
/* Větší technické číslování je oddělené od malé rozpoznávací ikony. */
.connector-pinout { margin-top: var(--layout-gap); border-top: 1px solid var(--line); padding-top: 10px; }
.connector-pinout summary { color: var(--link); cursor: pointer; font-size: 13px; }
.connector-pinout-drawing { display: block; width: 100%; max-width: 260px; height: auto; margin: 12px auto 0; }
.connector-shell { fill: #152438; stroke: #a7b5c8; stroke-width: 3; stroke-linejoin: round; }
.connector-contact { fill: #d8b66b; stroke: #f1d798; stroke-width: 1; }
.connector-socket { fill: #09111c; stroke: #d8b66b; stroke-width: 1.5; }
.connector-screw { fill: #09111c; stroke: #a7b5c8; stroke-width: 2; }
.connector-pin-number { fill: #09111c; font: 700 10px Arial, sans-serif; }
.connector-pin-number--socket, .connector-figure-label { fill: #e3edf8; }
.connector-figure-label { font: 12px Arial, sans-serif; }
.connector-table-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 4px; scrollbar-color: var(--field-border) var(--bg); }
.connector-table-scroll + .connector-table-scroll { margin-top: 1.25rem; }
/* Pevný layout drží zarovnání tabulek; pinové tabulky mají šířky určené přes colgroup. */
.connector-table { width: 100%; min-width: max(540px, calc(var(--connector-columns, 3) * 140px)); table-layout: fixed; border-collapse: collapse; font-size: 14px; overflow-wrap: anywhere; }
/* K prostoru na znaky přičítáme odsazení buňky 8 px na každé straně. */
.connector-col--pin, .connector-col--auxiliary { width: calc(6ch + 16px); }
.connector-col--signal { width: calc(14ch + 16px); }
.connector-table caption { padding: 10px 12px; text-align: left; color: var(--muted); background: var(--bg); }
.connector-table th, .connector-table td { border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.connector-table thead th { color: var(--heading); background: var(--bg); }
.connector-table tbody th { font-weight: 600; color: var(--text); }
.connector-table tbody tr:nth-child(even) { background: var(--bg); }
.connector-table tbody tr:last-child > * { border-bottom: 0; }
/* Dvousloupcová specifikace se zalamuje i na telefonu; pinové tabulky lze posouvat. */
.connector-table--compact { min-width: 0; overflow-wrap: anywhere; }
/* Barvy portů doplňuje text a kontrastní okraj, takže nezávisí jen na vnímání barvy. */
.connector-color-label { display: flex; align-items: center; gap: 9px; }
.connector-color-samples { display: flex; gap: 3px; flex-shrink: 0; }
.connector-color-swatch { display: block; width: 18px; height: 18px; border: 1px solid #a7b5c8; border-radius: 3px; }
.connector-section .connector-note { margin: var(--layout-gap) 0 0; padding: 12px; border-left: 3px solid var(--primary); background: var(--accent-bg); }
.connector-related, .connector-variants { margin: var(--layout-gap) 0 0; }
.connector-related a, .connector-detail-link { color: var(--link); text-decoration: underline; }
.connector-detail-link { display: inline-block; margin-top: var(--layout-gap); }
/* Detail používá stejný panel i kresbu jako přehled, s návratem do své kategorie. */
.connector-all-link { display: inline-block; margin: 0 0 var(--layout-gap) 20px; color: var(--link); text-decoration: underline; }
.connector-detail-figure { display: flex; align-items: center; gap: var(--layout-gap); margin-bottom: var(--layout-gap); color: var(--heading); }
.connector-detail-figure .connector-drawing { width: 120px; height: 84px; }
.connector-detail-figure strong { overflow-wrap: anywhere; }
.connector-card h4 a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.connector-detail-pinouts { display: flex; flex-wrap: wrap; gap: var(--layout-gap); margin-bottom: var(--layout-gap); }
.connector-detail-pinouts figure { flex: 0 1 260px; margin: 0; min-width: 0; }
.connector-detail-pinouts figcaption { margin-top: 8px; color: var(--muted); font-size: 13px; }
.connector-card h4 a:focus-visible, .connector-all-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.connector-variants { color: var(--muted); font-size: 13px; }
.connector-index-link:focus-visible, .connector-detail-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
@media (max-width: 480px) {
    .connector-index-link { grid-template-columns: 80px minmax(0, 1fr) 12px; }
}