/* Shared contact cards and homepage contact chooser. */
.channel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 28px;
}
.channel-card {
  --channel: #5865f2;
  --tint: #eef0ff;
  display: grid;
  grid-template-columns: minmax(112px, .8fr) minmax(0, 1.2fr);
  overflow: hidden;
  border: 1px solid #dbe3ef;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 36px #061a440a;
}
.channel-card--telegram { --channel: #137fae; --tint: #eaf7ff; }
.channel-art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 220px;
  overflow: hidden;
  background: radial-gradient(circle at center, #fff 0, var(--tint) 70%);
}
.channel-orbit, .channel-orbit::before {
  position: absolute;
  width: 154px;
  height: 154px;
  border: 1px solid var(--channel);
  border-radius: 50%;
  opacity: .14;
}
.channel-orbit::before { content: ''; inset: -25px; width: 202px; height: 202px; opacity: 1; }
.channel-art img { position: relative; width: 72px; height: 72px; filter: drop-shadow(0 10px 18px #061a4415); }
.channel-content { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 28px 24px; }
.channel-content h3 { margin: 0 !important; color: #061a44; font-size: 25px; line-height: 1.2; }
.channel-content p { margin: 10px 0 22px; color: #617086; font-size: 14px; line-height: 1.6; }
.channel-action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  min-height: 44px;
  color: var(--channel);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1px solid var(--channel);
}
.channel-action:hover { color: #061a44; }
.channel-action:focus-visible, .contact-widget a:focus-visible, .contact-widget button:focus-visible {
  outline: 3px solid #1678d2;
  outline-offset: 5px;
}
.contact-widget .floating-contact {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  background: #1267b5;
  color: #fff;
}
.contact-widget .floating-contact:hover,
.contact-widget .floating-contact[aria-expanded="true"] { background: #084c8b; }
.contact-chooser {
  position: fixed;
  right: 28px;
  bottom: 98px;
  z-index: 100;
  width: min(340px, calc(100vw - 32px));
  max-height: calc(100dvh - 130px);
  overflow-y: auto;
  padding: 18px;
  border: 1px solid #dbe3ef;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 16px 60px #061a4433;
  color: #10213f;
}
.contact-chooser[hidden] { display: none; }
.contact-chooser-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.contact-chooser h2 { margin: 0; font-size: 16px; line-height: 1.4; }
.contact-close { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; border: 0; background: none; color: #617086; font-size: 12px; cursor: pointer; }
.contact-close > span:last-child { font-size: 23px; }
.contact-option { display: flex; align-items: center; gap: 13px; padding: 14px 12px; border-radius: 12px; text-decoration: none; color: #10213f; }
.contact-option:hover { background: #f0f5fc; }
.contact-option + .contact-option { margin-top: 4px; }
.contact-option > span:nth-child(2) { flex: 1; }
.contact-option strong, .contact-option small { display: block; }
.contact-option strong { font-size: 15px; }
.contact-option small { margin-top: 3px; color: #617086; font-size: 12px; }
.contact-option img { flex-shrink: 0; }
@media (max-width: 980px) {
  .channel-card { grid-template-columns: 1fr; }
  .channel-art { min-height: 160px; }
  .channel-content { min-height: 192px; }
}
@media (max-width: 600px) {
  .channel-grid { grid-template-columns: 1fr; gap: 16px; }
  .channel-card { grid-template-columns: 112px minmax(0, 1fr); }
  .channel-art { min-height: 188px; }
  .channel-art img { width: 56px; height: 56px; }
  .channel-content { padding: 24px 18px; min-height: 0; }
  .channel-content h3 { font-size: 22px; }
  .channel-content p { font-size: 13px; margin-bottom: 14px; }
  .channel-action { font-size: 13px; gap: 8px; }
  body[data-page="contact"] .channel-card { grid-template-columns: 1fr; }
  body[data-page="contact"] .channel-art { min-height: 144px; }
}
@media (max-width: 760px) {
  .contact-widget .floating-contact { right: 16px; bottom: calc(68px + env(safe-area-inset-bottom)); min-height: 48px; padding: 12px 18px; font-size: 14px; }
  .contact-chooser { right: 16px; bottom: calc(130px + env(safe-area-inset-bottom)); max-height: calc(100dvh - 155px - env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .contact-widget *, .channel-card * { scroll-behavior: auto; transition: none; }
}