/* IPNJ — folha de estilo dos componentes.
   Depende de tokens.css: todas as cores, medidas e tipos vêm de variáveis.
   As classes de estilo de texto (.corpo, .titulo-s, .display-l …) são geradas por tokens.css
   e aplicadas pelo bundle; aqui trata-se só de estrutura, cor e estado. */

.ipnj-conteudo { width: 100%; max-width: var(--medida-conteudo); margin-inline: auto; padding-inline: var(--espaco-5); }
.ipnj-seccao { padding-block: var(--espaco-8); background: var(--superficie); color: var(--tinta); }
.ipnj-seccao--afundada { background: var(--superficie-afundada); }
.ipnj-texto { max-width: var(--medida-texto); color: var(--tinta); }
.ipnj-grelha { display: grid; gap: var(--espaco-5); grid-template-columns: repeat(12, 1fr); }

:where(.ipnj-botao, .ipnj-campo__controlo, .ipnj-nav__ligacao, .ipnj-rodape a):focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--foco-contraste), 0 0 0 5px var(--foco);
}

/* ---------------------------------------------------------------- Icone */
/* Os quinze próprios entram como <svg> em linha; os 4135 de Material entram
   num <span> com máscara, porque em linha seriam megabytes de JavaScript.
   A máscara recorta pelo canal alfa, por isso serve tal e qual para um traço
   aberto e para um contorno cheio: os dois tomam a cor do texto à volta. */
.ipnj-icone {
  display: inline-block; flex: none;
  width: 20px; height: 20px;
  vertical-align: -0.125em;
}
.ipnj-icone--mascara {
  background-color: currentColor;
  mask: var(--ipnj-icone-url) no-repeat center / contain;
  -webkit-mask: var(--ipnj-icone-url) no-repeat center / contain;
}

/* ---------------------------------------------------------------- Botao */
.ipnj-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espaco-2);
  padding: var(--espaco-3) var(--espaco-5);
  border: var(--traco-medio) solid transparent; border-radius: var(--raio-sm);
  font-family: var(--font-sans); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.ipnj-botao :is(svg, .ipnj-icone) { flex: none; }
.ipnj-botao--principal { background: var(--superficie-marca); color: var(--tinta-sobre-marca); }
.ipnj-botao--principal:hover { background: var(--azul-500); }
.ipnj-botao--secundario { background: transparent; color: var(--tinta-marca); border-color: var(--contorno-forte); }
.ipnj-botao--secundario:hover { background: var(--superficie-informativa); border-color: var(--tinta-marca); }
.ipnj-botao--acento { background: var(--superficie-acento); color: var(--tinta-sobre-acento); }
.ipnj-botao--acento:hover { background: var(--dourado-500); }
.ipnj-botao--discreto { background: transparent; color: var(--tinta-marca); padding-inline: var(--espaco-2); }
.ipnj-botao--discreto:hover { text-decoration: underline; text-underline-offset: 3px; }
.ipnj-botao--pequeno { padding: var(--espaco-2) var(--espaco-4); }
.ipnj-botao[aria-disabled="true"], .ipnj-botao:disabled { opacity: .55; cursor: not-allowed; }

/* ---------------------------------------------------------------- Etiqueta */
.ipnj-etiqueta {
  display: inline-flex; align-items: center; gap: var(--espaco-1);
  padding: var(--espaco-1) var(--espaco-2);
  border-radius: var(--raio-xs); text-transform: uppercase; white-space: nowrap;
  background: var(--superficie-informativa); color: var(--tinta-marca);
}
.ipnj-etiqueta :is(svg, .ipnj-icone) { width: 14px; height: 14px; }
.ipnj-etiqueta--acento { background: var(--dourado-200); color: var(--tinta-sobre-acento); }
.ipnj-etiqueta--pedra { background: var(--superficie-afundada); color: var(--tinta-suave); }
.ipnj-etiqueta--estado { border-radius: var(--raio-pilula); padding-inline: var(--espaco-3); }
.ipnj-etiqueta--sucesso { background: transparent; color: var(--estado-sucesso); box-shadow: inset 0 0 0 var(--traco-fino) currentColor; }
.ipnj-etiqueta--aviso { background: transparent; color: var(--estado-aviso); box-shadow: inset 0 0 0 var(--traco-fino) currentColor; }

/* ---------------------------------------------------------------- Campo */
.ipnj-campo { display: flex; flex-direction: column; gap: var(--espaco-2); max-width: 420px; }
.ipnj-campo__etiqueta { color: var(--tinta); font-family: var(--font-sans); font-weight: 600; }
.ipnj-campo__obrigatorio { color: var(--estado-erro); margin-inline-start: 2px; }
.ipnj-campo__controlo {
  font: inherit; font-family: var(--font-sans); font-size: 16px; line-height: 26px;
  padding: var(--espaco-3) var(--espaco-4);
  background: var(--superficie-elevada); color: var(--tinta);
  border: var(--traco-medio) solid var(--contorno-forte); border-radius: var(--raio-sm);
}
.ipnj-campo__controlo::placeholder { color: var(--tinta-suave); }
.ipnj-campo__controlo:hover { border-color: var(--tinta-marca); }
textarea.ipnj-campo__controlo { min-height: 120px; resize: vertical; }
.ipnj-campo__apoio { color: var(--tinta-suave); }
.ipnj-campo__erro { display: flex; align-items: center; gap: var(--espaco-1); color: var(--estado-erro); font-weight: 600; }
.ipnj-campo--erro .ipnj-campo__controlo { border-color: var(--estado-erro); }

/* ---------------------------------------------------------------- Cartao */
.ipnj-cartao {
  display: flex; flex-direction: column; gap: var(--espaco-3);
  padding: var(--espaco-5);
  background: var(--superficie-elevada); color: var(--tinta);
  border: var(--traco-fino) solid var(--contorno); border-radius: var(--raio-md);
  box-shadow: var(--sombra-suave);
}
.ipnj-cartao--filete { border-top: var(--traco-forte) solid var(--contorno-marca); border-top-left-radius: var(--raio-0); border-top-right-radius: var(--raio-0); }
.ipnj-cartao--filete-acento { border-top-color: var(--superficie-acento); }
.ipnj-cartao__sobretitulo { color: var(--tinta-acento); text-transform: uppercase; }
.ipnj-cartao__titulo { color: var(--tinta); margin: 0; }
.ipnj-cartao__texto { color: var(--tinta-suave); margin: 0; }
.ipnj-cartao__accoes { display: flex; flex-wrap: wrap; gap: var(--espaco-3); margin-top: var(--espaco-1); }
.ipnj-cartao__media { margin: calc(var(--espaco-5) * -1) calc(var(--espaco-5) * -1) 0; aspect-ratio: 3 / 2; background: var(--superficie-afundada) center / cover no-repeat; border-radius: var(--raio-md) var(--raio-md) 0 0; }

/* ---------------------------------------------------------------- TituloSeccao */
.ipnj-titulo-seccao { display: flex; flex-direction: column; gap: var(--espaco-3); max-width: var(--medida-texto); }
.ipnj-titulo-seccao--centrado { margin-inline: auto; text-align: center; align-items: center; }
.ipnj-titulo-seccao__sobretitulo { color: var(--tinta-acento); text-transform: uppercase; }
.ipnj-titulo-seccao__titulo { color: var(--tinta); margin: 0; font-family: var(--font-display); }
.ipnj-titulo-seccao__texto { color: var(--tinta-suave); margin: 0; }
.ipnj-titulo-seccao__filete { width: 72px; height: var(--traco-forte); background: var(--contorno-marca); }

/* ---------------------------------------------------------------- Hero */
.ipnj-hero { position: relative; background: var(--superficie-marca); color: var(--tinta-sobre-marca); overflow: hidden; }
.ipnj-hero__padrao { position: absolute; inset: auto 0 0 0; height: 104px; opacity: .35; pointer-events: none; }
.ipnj-hero__interior { position: relative; display: flex; flex-direction: column; gap: var(--espaco-4); align-items: flex-start; padding-block: var(--espaco-9) calc(var(--espaco-9) + 40px); }
.ipnj-hero--centrado .ipnj-hero__interior { align-items: center; text-align: center; }
.ipnj-hero__sobretitulo { color: var(--dourado-300); text-transform: uppercase; }
.ipnj-hero__titulo { margin: 0; font-family: var(--font-display); color: var(--tinta-sobre-marca); }
.ipnj-hero__texto { margin: 0; max-width: var(--medida-texto); color: var(--azul-200); }
.ipnj-hero__accoes { display: flex; flex-wrap: wrap; gap: var(--espaco-4); margin-top: var(--espaco-2); }
.ipnj-hero .ipnj-botao--secundario { color: var(--tinta-sobre-marca); border-color: var(--azul-300); }
.ipnj-hero .ipnj-botao--secundario:hover { background: var(--azul-700); border-color: var(--tinta-sobre-marca); }

/* ---------------------------------------------------------------- FaixaAzulejo */
.ipnj-faixa { width: 100%; background-repeat: repeat; border-radius: var(--raio-0); }
.ipnj-faixa--cercadura { background-size: 96px 48px; }
.ipnj-faixa--azulejo { background-size: var(--medida-azulejo) var(--medida-azulejo); }
.ipnj-faixa--calcada { background-size: var(--medida-calcada) 104px; }
.ipnj-faixa--separador { background-size: 240px 24px; background-repeat: repeat-x; height: 24px; }

/* ---------------------------------------------------------------- Versiculo */
.ipnj-versiculo { display: flex; flex-direction: column; gap: var(--espaco-3); max-width: var(--medida-texto); margin: 0; padding: var(--espaco-5) 0 var(--espaco-5) var(--espaco-5); border-left: var(--traco-forte) solid var(--superficie-acento); color: var(--tinta); }
.ipnj-versiculo__texto { margin: 0; font-family: var(--font-serif); }
.ipnj-versiculo__referencia { color: var(--tinta-suave); text-transform: uppercase; font-style: normal; }
.ipnj-versiculo--destaque { border-left: none; padding: var(--espaco-7) var(--espaco-5); text-align: center; align-items: center; max-width: none; background: var(--superficie-destaque); border-radius: var(--raio-md); }
.ipnj-versiculo--destaque .ipnj-versiculo__texto { color: var(--tinta-sobre-destaque); }
.ipnj-versiculo--destaque .ipnj-versiculo__referencia { color: var(--tinta-acento); }

/* ---------------------------------------------------------------- CartaoEvento */
.ipnj-evento { display: grid; grid-template-columns: 76px 1fr; gap: var(--espaco-5); align-items: start; padding: var(--espaco-5); background: var(--superficie-elevada); border: var(--traco-fino) solid var(--contorno); border-radius: var(--raio-md); box-shadow: var(--sombra-suave); }
.ipnj-evento__data { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: var(--espaco-3) 0; background: var(--superficie-marca); color: var(--tinta-sobre-marca); border-radius: var(--raio-sm); }
.ipnj-evento__dia { font-family: var(--font-display); font-size: 30px; line-height: 32px; }
.ipnj-evento__mes { text-transform: uppercase; }
.ipnj-evento__corpo { display: flex; flex-direction: column; gap: var(--espaco-2); }
.ipnj-evento__titulo { margin: 0; color: var(--tinta); }
.ipnj-evento__meta { display: flex; flex-wrap: wrap; gap: var(--espaco-4); color: var(--tinta-suave); }
.ipnj-evento__meta span { display: inline-flex; align-items: center; gap: var(--espaco-1); }
.ipnj-evento__meta :is(svg, .ipnj-icone) { width: 16px; height: 16px; }
.ipnj-evento__texto { margin: 0; color: var(--tinta-suave); }
.ipnj-evento__rodape { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-3); margin-top: var(--espaco-1); }

/* ---------------------------------------------------------------- Horarios */
.ipnj-horarios { width: 100%; border-collapse: collapse; color: var(--tinta); background: var(--superficie-elevada); border: var(--traco-fino) solid var(--contorno); border-radius: var(--raio-md); overflow: hidden; }
.ipnj-horarios caption { text-align: left; padding: var(--espaco-4) var(--espaco-5); color: var(--tinta); font-family: var(--font-sans); font-weight: 600; background: var(--superficie-informativa); border-bottom: var(--traco-forte) solid var(--contorno-marca); }
.ipnj-horarios th, .ipnj-horarios td { text-align: left; padding: var(--espaco-3) var(--espaco-5); border-top: var(--traco-fino) solid var(--contorno); vertical-align: baseline; }
.ipnj-horarios th { color: var(--tinta); font-weight: 600; white-space: nowrap; }
.ipnj-horarios td { color: var(--tinta-suave); }
.ipnj-horarios__hora { display: inline-flex; align-items: center; gap: var(--espaco-1); color: var(--tinta); white-space: nowrap; }
.ipnj-horarios__hora :is(svg, .ipnj-icone) { width: 16px; height: 16px; }
.ipnj-horarios tr[data-destaque="sim"] th, .ipnj-horarios tr[data-destaque="sim"] td { background: var(--superficie-destaque); color: var(--tinta-sobre-destaque); }

/* ---------------------------------------------------------------- Testemunho */
.ipnj-testemunho { display: flex; flex-direction: column; gap: var(--espaco-4); padding: var(--espaco-5); background: var(--superficie-afundada); border-radius: var(--raio-md); color: var(--tinta); }
.ipnj-testemunho__texto { margin: 0; font-family: var(--font-serif); color: var(--tinta); }
.ipnj-testemunho__autor { display: flex; align-items: center; gap: var(--espaco-3); }
.ipnj-testemunho__retrato { width: 56px; height: 56px; border-radius: var(--raio-pilula); background: var(--superficie-marca) center / cover no-repeat; color: var(--tinta-sobre-marca); flex: none; display: grid; place-items: center; }
.ipnj-testemunho__retrato :is(svg, .ipnj-icone) { width: 28px; height: 28px; }
.ipnj-testemunho__nome { color: var(--tinta); font-weight: 600; }
.ipnj-testemunho__papel { color: var(--tinta-suave); }

/* ---------------------------------------------------------------- Localizacao */
.ipnj-local { display: flex; flex-direction: column; gap: var(--espaco-3); padding: var(--espaco-5); background: var(--superficie-elevada); border: var(--traco-fino) solid var(--contorno); border-top: var(--traco-forte) solid var(--contorno-marca); border-radius: var(--raio-0) var(--raio-0) var(--raio-md) var(--raio-md); }
.ipnj-local__nome { margin: 0; color: var(--tinta); }
.ipnj-local__linha { display: flex; align-items: flex-start; gap: var(--espaco-2); color: var(--tinta-suave); }
.ipnj-local__linha :is(svg, .ipnj-icone) { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.ipnj-local__linha a { color: var(--tinta-marca); }
.ipnj-local__accoes { margin-top: var(--espaco-1); }

/* ---------------------------------------------------------------- Navegacao */
.ipnj-nav { background: var(--superficie-marca); color: var(--tinta-sobre-marca); }
.ipnj-nav__interior { display: flex; align-items: center; gap: var(--espaco-5); min-height: 72px; }
.ipnj-nav__marca { display: flex; align-items: center; gap: var(--espaco-3); color: var(--tinta-sobre-marca); text-decoration: none; margin-inline-end: auto; }
.ipnj-nav__marca img { display: block; height: 44px; width: auto; }
.ipnj-nav__nome { font-family: var(--font-display); font-size: 17px; line-height: 20px; letter-spacing: .01em; max-width: 190px; }
.ipnj-nav__ligacoes { display: flex; align-items: center; gap: var(--espaco-2); list-style: none; margin: 0; padding: 0; }
.ipnj-nav__ligacao { display: inline-block; white-space: nowrap; padding: var(--espaco-2) var(--espaco-3); color: var(--tinta-sobre-marca); text-decoration: none; border-radius: var(--raio-sm); border-bottom: var(--traco-medio) solid transparent; }
.ipnj-nav__ligacao:hover { background: var(--azul-700); }
.ipnj-nav__ligacao[aria-current="page"] { border-bottom-color: var(--superficie-acento); }

/* ---------------------------------------------------------------- Rodape */
.ipnj-rodape { background: var(--superficie-marca-forte); color: var(--tinta-sobre-marca); }
.ipnj-rodape__cercadura { height: var(--traco-cercadura); background: var(--superficie-acento); }
.ipnj-rodape__interior { display: grid; gap: var(--espaco-6); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); padding-block: var(--espaco-7); }
.ipnj-rodape__lema { font-family: var(--font-serif); font-style: italic; color: var(--dourado-300); margin: 0; }
.ipnj-rodape__titulo { text-transform: uppercase; color: var(--azul-200); margin: 0 0 var(--espaco-3); }
.ipnj-rodape ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espaco-2); }
.ipnj-rodape a { color: var(--tinta-sobre-marca); text-decoration: none; }
.ipnj-rodape a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ipnj-rodape__linha { display: flex; align-items: flex-start; gap: var(--espaco-2); color: var(--azul-200); }
.ipnj-rodape__linha :is(svg, .ipnj-icone) { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.ipnj-rodape__base { border-top: var(--traco-fino) solid var(--azul-800); padding-block: var(--espaco-4); color: var(--azul-200); }

@media (max-width: 860px) {
  .ipnj-grelha > * { grid-column: 1 / -1; }
  .ipnj-nav__interior { flex-wrap: wrap; padding-block: var(--espaco-3); }
  .ipnj-evento { grid-template-columns: 64px 1fr; gap: var(--espaco-4); }
}
@media (prefers-reduced-motion: reduce) {
  .ipnj-botao, .ipnj-cartao, .ipnj-nav__ligacao { transition: none; }
}