/* kontakt.css — Kontakt z redakcją (F13). Port subset z handoff/kontakt-styles.css.
   Buduje na home.css + calc-styles (.calc-detail-h). Formularz = Gravity Forms (forms-gf.css).
   Tu: układ (kont-wrap grid), kontekstowe noty theme-side (.kf-note), prawy rail. Pominięty
   prototypowy formularz (.kont-form/.subj-*/.kf-field/.kf-submit/.kont-ok). */

.kont-wrap { max-width: 1100px; margin: 0 auto; width: 100%; padding: 8px 36px 96px;
	display: grid; grid-template-columns: minmax(0,1fr) 312px; gap: 40px; align-items: start; }
.kont-main { min-width: 0; }

/* Kontekstowe noty (theme-side; JS pokazuje pasującą do radia GF) */
.of-kontakt-noty { margin: 18px 0 22px; display: flex; flex-direction: column; gap: 10px; }
/* guard [hidden] — display:flex nadpisuje atrybut hidden (reguła projektu) */
.of-kontakt-noty[hidden], .kf-note[hidden] { display: none; }
.kf-note { display: flex; gap: 13px; padding: 15px 17px; border-radius: var(--rad-md);
	background: rgba(29,115,139,0.06); border: 1px solid rgba(29,115,139,0.18); animation: kfFade 0.18s ease; }
.kf-note.act { background: rgba(20,160,133,0.07); border-color: rgba(20,160,133,0.24); }
@keyframes kfFade { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.kf-note .ic { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center;
	background: rgba(29,115,139,0.12); color: var(--primary-2); margin-top: 1px; }
.kf-note.act .ic { background: rgba(20,160,133,0.14); color: var(--accent-2); }
.kf-note .ic svg { width: 17px; height: 17px; }
.kf-note .body { font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.kf-note .body b { color: var(--ink); font-weight: 600; }
.kf-note .body p { margin: 0 0 7px; }
.kf-note .body p:last-child { margin-bottom: 0; }
.kf-note .body ol { margin: 6px 0 7px; padding-left: 20px; }
.kf-note .body ol li { margin-bottom: 3px; }
.kf-note .body a { color: var(--primary-2); font-weight: 600; }
.kf-note .body a:hover { text-decoration: underline; }
.kf-note .note-cta { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 8px 14px; border-radius: 9px;
	background: var(--accent-2); color: #fff; font-size: 12.5px; font-weight: 600; }
.kf-note .note-cta:hover { filter: brightness(0.94); text-decoration: none; }
.kf-note .note-cta svg { width: 15px; height: 15px; }

/* Prawy rail */
.kont-rail { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 16px; }
.kont-rail .rail-card { background: transparent; border: 0; border-radius: 0; padding: 0; }
.kont-rail .rail-card + .rail-card { border-top: 1px solid var(--line); padding-top: 16px; }
.rail-card .lab { font-family: 'Source Sans 3', sans-serif; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin-bottom: 11px; }
.rail-card .resp { display: flex; align-items: center; gap: 12px; }
.rail-card .resp .big { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); line-height: 1; }
.rail-card .resp .small { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.rail-card p { font-size: 12.8px; color: var(--ink-2); line-height: 1.6; margin: 0 0 9px; }
.rail-card p:last-child { margin-bottom: 0; }
.rail-card b { color: var(--ink); font-weight: 600; }
.rail-links { display: flex; flex-direction: column; gap: 3px; }
.rail-links a { display: flex; align-items: center; gap: 11px; padding: 10px; border-radius: 10px; transition: background 0.12s; }
.rail-links a:hover { background: var(--bg); }
.rail-links a .ic { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center; background: rgba(13,75,92,0.07); color: var(--primary); }
.rail-links a .ic svg { width: 16px; height: 16px; }
.rail-links a .tt { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
.rail-links a .mm { display: block; font-size: 11px; color: var(--ink-3); margin-top: 1px; }
.rail-links a .chev { margin-left: auto; color: var(--ink-4); }
.rail-links a .chev svg { width: 16px; height: 16px; }

@media (max-width: 1000px) {
	.kont-wrap { grid-template-columns: minmax(0,1fr); gap: 24px; }
	.kont-rail { position: static; flex-direction: row; flex-wrap: wrap; }
	.kont-rail > * { flex: 1; min-width: 240px; }
}
@media (max-width: 640px) {
	.kont-wrap { padding: 8px 16px 100px; }
	.kont-rail { flex-direction: column; }
}