/*
 * Projeto: MSOUZA ADVOCACIA
 * Author: Marcílio Souza
 * Secao: faixa de atendimento abaixo dos servicos trabalhistas.
 * Canais nao configurados usam o estado disabled; nao possuem links ficticios.
 */

/* Faixa em verde institucional, com destaque dourado para o convite. */
.contact-channels { background:#17483d; color:#fff; border-bottom:2px solid var(--gold); }
.contact-channels-inner {
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr);
  align-items:center;
  gap:80px;
}
.contact-channels-intro { min-width:0; }
.contact-channels-label { margin:0 0 18px; color:#e1c28a; font:600 12px/1.5 Arial,sans-serif; text-transform:uppercase; }
.contact-channels-intro h2 { margin:0 0 20px; color:#fff; font-size:32px; line-height:1.3; overflow-wrap:anywhere; }
.contact-channels-intro h2 span { color:#e1c28a; }
.contact-channels-intro > p:last-of-type { margin:0 0 26px; color:#e0ece6; font:16px/1.75 Arial,sans-serif; }
.contact-channels-message {
  display:inline-flex;
  align-items:center;
  gap:10px;
  max-width:100%;
  min-height:44px;
  padding:11px 16px;
  border:1px solid #e1c28a;
  border-radius:4px;
  background:#e1c28a;
  color:#173f36;
  font:600 14px/1.5 Arial,sans-serif;
}
.contact-channels-message svg { width:18px; height:18px; flex-shrink:0; }
.contact-channels-message:hover { background:#f0d7aa; border-color:#f0d7aa; }

/* Canais: mesma largura, icones alinhados e area de toque consistente. */
.contact-channels-list { display:grid; gap:10px; min-width:0; }
.contact-channel {
  display:grid;
  grid-template-columns:22px minmax(0,1fr) 62px;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:46px;
  margin:0;
  padding:12px 18px;
  border:1px solid #d6e2dc;
  border-radius:4px;
  background:#f3f6f4;
  color:#173f36;
  font:14px/1.5 Arial,sans-serif;
  text-align:center;
  transition:background .2s,border-color .2s;
}
.contact-channel > svg { width:21px; height:21px; }
.contact-channel > svg:last-child { justify-self:end; width:17px; height:17px; color:#8b703e; }
.contact-channel > span { min-width:0; overflow-wrap:anywhere; }
.contact-channel small { color:#4c6056; font:11px/1.5 Arial,sans-serif; white-space:nowrap; }
.contact-channel:disabled { background:#dbe4df; border-color:#c8d5cc; color:#405b4f; cursor:not-allowed; }
.contact-channel:not(:disabled):hover { background:#e1c28a; border-color:#e1c28a; }
.contact-channels a:focus-visible { outline:3px solid #f0d7aa; outline-offset:4px; }

/* Layout responsivo: os canais ficam abaixo da apresentacao em celulares. */
@media(max-width:1000px) { .contact-channels-inner { gap:36px; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); } }
@media(max-width:760px) {
  .contact-channels-inner { grid-template-columns:1fr; gap:28px; }
  .contact-channels-intro h2 { font-size:28px; }
  .contact-channels-intro > p:last-of-type { font-size:15px; }
}
@media(max-width:360px) { .contact-channel { padding:12px; gap:8px; grid-template-columns:22px minmax(0,1fr) 54px; } }
@media(prefers-reduced-motion:reduce) { .contact-channel { transition:none; } }