/*
 * Projeto: MSOUZA ADVOCACIA
 * Author: Marcílio Souza
 * Secao: cards dos servicos trabalhistas e dialog de detalhes.
 * Carregado depois dos estilos compartilhados, sem alterar outras secoes.
 */

/* Faixa e apresentacao da secao. */
.labor-services {
  background:#f3f6f4;
  border-bottom:1px solid #dbe4df;
}
.labor-services-heading { margin-bottom:32px; }
.labor-services-heading h2 {
  margin:0 0 14px;
  color:var(--green);
  font-size:36px;
}
.labor-services-heading > p:last-child {
  margin:0;
  color:#54665d;
  font:16px/1.65 Arial,sans-serif;
}

/* Cards: tres colunas e botoes alinhados, sem limitar a altura do texto. */
.labor-services-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
.labor-service-card {
  min-width:0;
  display:flex;
  flex-direction:column;
  padding:28px;
  background:#fff;
  border:1px solid #d2ddd7;
  border-top:3px solid var(--gold);
  border-radius:6px;
  box-shadow:0 6px 18px #173f3608;
}
.labor-service-heading {
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-height:56px;
  margin-bottom:18px;
}
.labor-service-heading > svg {
  flex-shrink:0;
  width:24px;
  height:24px;
  margin-top:2px;
  color:#8b703e;
}
.labor-service-heading h3 {
  margin:0;
  color:var(--green);
  font-size:23px;
  line-height:1.25;
  overflow-wrap:anywhere;
}
.labor-service-card > p {
  margin:0 0 26px;
  color:#4c6056;
  font:15px/1.75 Arial,sans-serif;
  overflow-wrap:anywhere;
}
.labor-service-button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  align-self:flex-end;
  margin-top:auto;
  min-height:44px;
  padding:11px 16px;
  border:1px solid var(--green);
  border-radius:4px;
  background:var(--green);
  color:#fff;
  font:600 14px/1.4 Arial,sans-serif;
  transition:background .2s,color .2s,border-color .2s;
}
.labor-service-button svg { width:17px; height:17px; flex-shrink:0; }
.labor-service-button:hover {
  background:#e1c28a;
  border-color:#b29255;
  color:#183a30;
}
.labor-services-footer { display:flex; justify-content:flex-end; margin-top:28px; }
.labor-services-footer .button { display:flex; align-items:center; gap:12px; }

/* Dialog nativo: foco contido, rolagem interna e fechamento acessivel. */
.service-dialog {
  width:calc(100% - 36px);
  max-width:640px;
  max-height:85vh;
  padding:28px;
  border:1px solid #c8d5cc;
  border-top:3px solid var(--gold);
  border-radius:6px;
  background:#fff;
  color:var(--ink);
  box-shadow:0 20px 60px #102f2940;
  overflow:auto;
  overscroll-behavior:contain;
}
.service-dialog::backdrop { background:#102f29b3; }
.service-dialog-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:24px; }
.service-dialog-heading > div { min-width:0; }
.service-dialog-heading p { margin:0 0 10px; font:600 12px/1.5 Arial,sans-serif; color:#8b703e; text-transform:uppercase; }
.service-dialog-heading h2 { margin:0; color:var(--green); font-size:30px; overflow-wrap:anywhere; }
#service-dialog-close {
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid #c8d5cc;
  border-radius:4px;
  background:#f3f6f4;
  color:var(--green);
}
#service-dialog-close:hover { background:#e1c28a; border-color:var(--gold); }
#service-dialog-close svg { width:20px; height:20px; }
#service-dialog-description { margin:0; color:#4c6056; font:16px/1.8 Arial,sans-serif; overflow-wrap:anywhere; }
.service-dialog-footer { display:flex; justify-content:flex-end; margin-top:26px; }
.service-dialog-footer .button { display:flex; align-items:center; gap:12px; }
body.service-dialog-open { overflow:hidden; }

/* Tablet e celular: texto integral, sem recortes ou rolagem horizontal. */
@media(max-width:1000px) {
  .labor-services-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
  .labor-service-card { padding:24px; }
}
@media(max-width:640px) {
  .labor-services-heading h2 { font-size:30px; }
  .labor-services-grid { grid-template-columns:1fr; }
  .labor-service-heading { min-height:0; }
  .labor-services-footer .button { justify-content:center; width:100%; }
  .service-dialog { padding:22px 18px; }
  .service-dialog-heading h2 { font-size:26px; }
  .service-dialog-footer .button { width:100%; justify-content:center; }
}
@media(prefers-reduced-motion:reduce) {
  .labor-service-button { transition:none; }
}