/* ============================================================
   PORTAL MUNICIPAL — Layout Cidadão
   ------------------------------------------------------------
   A tese: portal de prefeitura NÃO é portal de notícia.

   Os outros quatro layouts abrem com manchete e empurram serviço
   para baixo da dobra. Mas quem entra no site da prefeitura quer
   RESOLVER algo — 2ª via de IPTU, certidão, e-SIC, telefone de
   uma secretaria. Notícia é o que a administração quer publicar;
   serviço é o que o cidadão foi buscar.

   Daí as três decisões que definem este tema:

   1. A BUSCA É O HERÓI. Não a foto. Campo grande, com pergunta em
      linguagem de gente. É o caminho mais curto para quem já sabe
      o que quer — e o que GOV.UK e gov.br fazem.

   2. SERVIÇO VEM ANTES DE TUDO. As seções são reordenadas por
      `order` no flex, sem tocar no index.php: serviços, avisos,
      notícias, secretarias. O banner deixa de ser capa e vira
      comunicado.

   3. DIDÁTICO = LEGÍVEL. Corpo maior, alvos de toque grandes,
      descrição do serviço SEMPRE visível (nos outros temas ela
      some no celular, deixando só um ícone e uma sigla — que não
      ensina nada a quem não é do ramo).
   ============================================================ */

/* ── Bloco único, sem sidebar ── */
.layout-cidadao .layout-wrap { background: #f7f8fa; overflow-x: hidden; }
.layout-cidadao .layout-inner { display: block; padding-top: 0; padding-bottom: 0; }
.layout-cidadao .main-content { width: 100%; max-width: 100%; }
.layout-cidadao .sidebar,
.layout-cidadao .sidebar-backdrop { display: none !important; }
.layout-cidadao .site-footer { margin-top: 0; }

/* ── Cabeçalho: identidade discreta, sem diagonal ── */
.layout-cidadao .site-header::before,
.layout-cidadao .site-header::after { display: none; }
.layout-cidadao .site-header { background: var(--pm-header-bg); }
.layout-cidadao .site-header-inner { flex-wrap: wrap; row-gap: 1rem; padding-block: 1.1rem; }

/* ── A BUSCA COMO HERÓI ──
   Ocupa a linha inteira do cabeçalho, abaixo da identidade. É o
   primeiro elemento acionável da página, de propósito. */
.layout-cidadao .header-busca {
  flex: 0 0 100%;
  order: 3;
  position: relative;
  max-width: 780px;
  margin: 0 auto;
}
.layout-cidadao .header-busca::before {
  content: 'O que você precisa resolver hoje?';
  display: block;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--pm-header-text);
  margin-bottom: .6rem;
}
.layout-cidadao .header-busca input {
  width: 100%;
  height: 60px;                 /* alvo grande: dedo, não mouse */
  background: #fff;
  border: 3px solid rgba(255, 255, 255, .55);
  border-radius: 8px;
  padding: 0 4.2rem 0 1.2rem;
  font-size: 1.05rem;
  color: var(--pm-body-text);
}
.layout-cidadao .header-busca input::placeholder {
  color: color-mix(in srgb, var(--pm-body-text) 50%, #fff);
}
.layout-cidadao .header-busca input:focus {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
.layout-cidadao .header-busca .icon-busca { display: none; }
.layout-cidadao .header-busca .btn-buscar {
  position: absolute;
  top: auto; bottom: 0; right: 0;
  height: 60px; width: 60px;
  /* transform zerado: a regra base centra com translateY(-50%) e aqui
     o botão é ancorado pela base — sem isto ele sobe meia altura. */
  transform: none;
  display: flex; align-items: center; justify-content: center;
  padding: 0; font-size: 1.15rem;
  border: 0; border-radius: 0 5px 5px 0;
  background: var(--pm-secondary);
  color: #fff; cursor: pointer;
}
.layout-cidadao .header-busca .btn-buscar:hover { filter: brightness(1.12); }

/* ── Menu: apoio, não protagonista ── */
.layout-cidadao .toolbar {
  background: color-mix(in srgb, var(--pm-toolbar-bg) 88%, #000) !important;
  border: 0;
}
.layout-cidadao .toolbar .nav-link {
  font-size: var(--pm-tam-menu, .78rem);
  font-weight: var(--pm-peso-menu, 600);
  letter-spacing: .02em;
  padding: .75rem .8rem;
  white-space: nowrap;
}

/* ── A REORDENAÇÃO ──
   Serviço primeiro. Feito por `order`, sem tocar no PHP: o
   index.php continua servindo os quatro layouts sem uma linha de
   condicional a mais. */
.layout-cidadao .main-content { display: flex; flex-direction: column; }
.layout-cidadao .cards-destaque-section { order: 1; }
.layout-cidadao .banner-section         { order: 2; }
.layout-cidadao .noticias-section       { order: 3; }
.layout-cidadao .secretarias-section    { order: 4; }

.layout-cidadao .main-content > section {
  width: 100%; margin: 0;
  padding: 2.6rem 1rem;
}
.layout-cidadao .main-content > section > * {
  max-width: 1180px; margin-inline: auto;
}
.layout-cidadao .cards-destaque-section { background: #fff; padding-top: 2.2rem; }
.layout-cidadao .banner-section  { background: #f7f8fa; padding-block: 1.6rem; }
.layout-cidadao .noticias-section { background: #fff; }
.layout-cidadao .secretarias-section {
  background: color-mix(in srgb, var(--pm-primary) 5%, #fff);
}

/* ── Títulos: à esquerda, com o traço curto ── */
.layout-cidadao .section-label-small { display: none; }
.layout-cidadao .section-heading {
  text-align: left;
  margin-bottom: 1.5rem;
  padding-bottom: .7rem;
  position: relative;
  border-bottom: 1px solid rgba(15, 23, 42, .09);
}
.layout-cidadao .section-label-main {
  display: block;
  font-size: var(--pm-tam-titulo, 1.9rem);
  font-weight: var(--pm-peso-titulo, 700);
  color: var(--pm-primary);
  line-height: 1.2;
}
.layout-cidadao .section-heading::after {
  content: ''; position: absolute; left: 0; bottom: -2px;
  width: 54px; height: 3px; border-radius: 2px;
  background: var(--pm-accent, var(--pm-secondary));
}

/* ── SERVIÇOS: o coração do tema ──
   Cartão claro, ícone em disco colorido, título forte e descrição
   SEMPRE visível. Nos outros temas a descrição é `d-none d-md-block`
   e some no celular — justamente onde mais gente acessa e onde a
   sigla sozinha não explica nada. */
.layout-cidadao .cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.layout-cidadao .card-destaque {
  background: #fff !important;
  --card-fg: var(--pm-body-text);
  border: 1px solid rgba(15, 23, 42, .1);
  border-left: 5px solid var(--pm-primary);
  border-radius: 8px;
  padding: 1.15rem 1.15rem 1.15rem 1rem;
  min-height: 116px;
  display: grid;
  grid-template-columns: 46px 1fr;
  grid-template-rows: auto auto;
  column-gap: .9rem;
  align-content: start;
  text-align: left;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
  transition: border-color var(--pm-transition, .2s), box-shadow var(--pm-transition, .2s), transform var(--pm-transition, .2s);
}
.layout-cidadao .card-destaque:hover {
  border-left-color: var(--pm-secondary);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .12);
  transform: translateY(-2px);
}
.layout-cidadao .card-destaque i {
  grid-row: 1 / span 2;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--pm-primary) 12%, #fff);
  color: var(--pm-primary);
  font-size: 1.15rem;
  margin: 0;
}
.layout-cidadao .card-destaque .cd-titulo {
  font-size: 1rem;
  font-weight: 700;
  color: var(--pm-body-text);
  text-shadow: none;
  line-height: 1.3;
  margin: 0 0 .2rem;
}
/* A descrição volta a aparecer no celular — é ela que ensina */
.layout-cidadao .card-destaque .cd-desc {
  display: block !important;
  font-size: .84rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--pm-body-text) 72%, #fff);
  text-shadow: none;
}

/* ── AVISOS (o antigo banner) ── */
.layout-cidadao .banner-section { --pm-banner-ratio: 21 / 7; }
.layout-cidadao .banner-section .swiper,
.layout-cidadao .banner-section img { border-radius: 8px; }

/* ── NOTÍCIAS: faixa compacta, papel de apoio ── */
.layout-cidadao .noticias-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.2rem;
}
.layout-cidadao .card-noticia {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .1);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: none;
  transition: box-shadow var(--pm-transition, .2s);
}
.layout-cidadao .card-noticia:hover { box-shadow: 0 8px 20px rgba(15, 23, 42, .12); }
.layout-cidadao .card-noticia .cn-img { aspect-ratio: 16 / 9; }
.layout-cidadao .card-noticia .cn-img img { width: 100%; height: 100%; object-fit: cover; }
.layout-cidadao .card-noticia .cn-titulo {
  font-size: .95rem; font-weight: 700; line-height: 1.35;
  color: var(--pm-body-text);
}
.layout-cidadao .card-noticia .cn-badge {
  top: auto; bottom: 0; left: 0; border-radius: 0;
  font-size: .66rem; letter-spacing: .05em; text-transform: uppercase;
  background: rgba(15, 23, 42, .8);
}

/* ── SECRETARIAS: diretório, não vitrine ──
   Lista em blocos largos com sigla E nome por extenso. Sigla sozinha
   é jargão de dentro da prefeitura; o cidadão não sabe o que é SEMOB. */
.layout-cidadao .secretarias-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: .8rem;
}
.layout-cidadao .card-secretaria {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .1);
  border-radius: 8px;
  padding: .85rem 1rem;
  display: flex; align-items: center; gap: .8rem;
  text-align: left;
  min-height: 62px;
  transition: border-color var(--pm-transition, .2s), box-shadow var(--pm-transition, .2s);
}
.layout-cidadao .card-secretaria:hover {
  border-color: var(--pm-primary);
  box-shadow: 0 6px 16px rgba(15, 23, 42, .1);
}
.layout-cidadao .card-secretaria .cs-icon {
  width: 38px; height: 38px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem;
}
.layout-cidadao .card-secretaria .cs-nome {
  font-size: .88rem; font-weight: 600; line-height: 1.3;
  color: var(--pm-body-text);
}

/* ── Acessibilidade ──
   Alvo mínimo de 44px e foco sempre visível. Portal público é
   usado por gente idosa, em celular ruim e com leitor de tela —
   isso aqui não é enfeite, é o requisito. */
.layout-cidadao .toolbar .nav-link,
.layout-cidadao .card-secretaria,
.layout-cidadao .card-destaque { min-height: 44px; }
.layout-cidadao a:focus-visible,
.layout-cidadao button:focus-visible,
.layout-cidadao input:focus-visible {
  outline: 3px solid var(--pm-accent, #2470E0);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .layout-cidadao .card-destaque,
  .layout-cidadao .card-noticia,
  .layout-cidadao .card-secretaria { transition: none; }
  .layout-cidadao .card-destaque:hover { transform: none; }
}

@media (max-width: 767.98px) {
  .layout-cidadao .main-content > section { padding: 1.8rem .9rem; }
  .layout-cidadao .header-busca input { height: 54px; font-size: 1rem; }
  .layout-cidadao .header-busca .btn-buscar { height: 54px; width: 54px; }
  .layout-cidadao .header-busca::before { font-size: .95rem; }
  .layout-cidadao .section-label-main { font-size: 1.45rem; }
}