/* =====================================================
   Barbhara — Estilos de página
   Complementa main.css. Estilos específicos de páginas
   internas devem ser adicionados aqui.
   ===================================================== */

/* ── RETRATO NO HERO ────────────────────────────────
   O rosto fica na parte alta do arquivo: ancoramos o corte
   perto do topo para a cabeça não ser cortada quando o
   container fica mais alto que a proporção da foto.
   ──────────────────────────────────────────────────── */
.hero-media--portrait { min-height: 340px; }
.hero-media--portrait img { object-position: 50% 12%; }
.hero-media--portrait::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(58, 72, 29, .55));
  pointer-events: none;
}

@media (min-width: 860px) {
  .hero-media--portrait { min-height: 460px; }
}

/* ── RETRATO DE CORPO INTEIRO (página A Médica) ─────
   Mantém a proporção original do arquivo: o corte fixo
   de 3/4 de .split-photo cortaria a cabeça ou os pés.
   ──────────────────────────────────────────────────── */
.split-photo--natural img {
  aspect-ratio: auto;
  max-width: 380px;
  margin-inline: auto;
  background: var(--brand-soft);
}

/* ── LISTAS EXPANSÍVEIS (details/summary) ───────────
   Sem JavaScript: funcionam com o navegador e o conteúdo
   fechado continua presente no HTML para os buscadores.
   ──────────────────────────────────────────────────── */
.accordion-wrap { max-width: 820px; margin-inline: auto; }
.accordion { display: grid; gap: .75rem; }

.accordion-item {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s, box-shadow .2s;
}
.accordion-item[open] { border-color: var(--accent); box-shadow: var(--shadow-md); }

.accordion-q {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 1.2rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  color: var(--brand-strong); cursor: pointer;
  list-style: none; /* Firefox usa list-style para o triângulo padrão. */
}
.accordion-q::-webkit-details-marker { display: none; }
.accordion-q::after {
  content: '+'; flex-shrink: 0;
  font-size: 1.45rem; line-height: 1; color: var(--accent);
  transition: transform .2s;
}
.accordion-item[open] .accordion-q::after { transform: rotate(45deg); }
.accordion-q:hover { color: var(--brand); }
.accordion-q:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }

.accordion-a { padding: 0 1.2rem 1.2rem; color: var(--ink-soft); }
.accordion-a > * + * { margin-top: .9rem; }
.accordion-a strong { color: var(--ink); }
.accordion-a .check-list { margin-top: .9rem; }

/* Páginas legais: blocos mais altos e tipografia de leitura. */
.accordion-wrap--legal .accordion-q { font-size: 1.05rem; padding-block: 1.15rem; }
.accordion-wrap--legal .accordion-a { font-size: 1rem; line-height: 1.7; }

@media (min-width: 620px) {
  .accordion-q { font-size: 1.05rem; padding: 1.15rem 1.4rem; }
  .accordion-a { padding: 0 1.4rem 1.4rem; }
}

/* ── VARIANTES DE LISTA E CALLOUT ───────────────────── */
.check-list--warn li::before {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--accent);
}
.callout--alert { border-left-color: #b3261e; background: #fdf2f0; }
.callout--alert strong { color: #b3261e; }

/* ── TABELA DE HORÁRIOS ─────────────────────────────── */
.hours-wrap { max-width: 560px; margin-inline: auto; overflow-x: auto; }
.hours {
  width: 100%; border-collapse: collapse;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.hours th, .hours td { padding: .8rem 1rem; text-align: left; font-size: .95rem; }
.hours thead th {
  background: var(--brand); color: #fff;
  font-family: var(--font-display); font-weight: 700;
  font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
}
.hours tbody tr + tr { border-top: 1px solid var(--line); }
.hours tbody th { font-weight: 600; color: var(--ink); }
.hours tbody td { color: var(--ink-soft); white-space: nowrap; }
.hours .is-closed { background: var(--surface); }
.hours .is-closed td { color: var(--ink-soft); font-style: italic; }

/* ── LOGO TEXTUAL DO HEADER ─────────────────────────── */
.nav-logo-text { display: flex; flex-direction: column; line-height: 1.15; }

/* ── CARDS DO GUIA DE CONTEÚDOS ─────────────────────── */
.content-card-more {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .9rem;
  font-family: var(--font-display); font-weight: 600; font-size: .9rem;
  color: var(--accent-strong);
}
a.content-card:hover .content-card-more span { transform: translateX(3px); }
.content-card-more span { transition: transform .2s; }
.content-card--soon { opacity: .85; }
.content-card-tag {
  display: inline-block; margin-top: .9rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-strong);
  background: rgba(201, 154, 58, .12);
  border: 1px solid rgba(201, 154, 58, .3);
  border-radius: 999px; padding: .2rem .6rem;
}

/* ── LISTAGEM DE POSTS (index / arquivo / busca) ────── */
.card-thumb { display: block; margin: -1.5rem -1.5rem 1.25rem; }
.card-thumb img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.card h3 a { color: inherit; transition: color .2s; }
.card h3 a:hover { color: var(--brand); }
.card-meta {
  margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .4rem;
  font-size: .85rem; color: var(--ink-soft);
}

/* ── PAGINAÇÃO ──────────────────────────────────────── */
.pagination { margin-top: 2.5rem; }
.pagination .nav-links {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
}
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding-inline: .75rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; color: var(--ink);
  font-family: var(--font-display); font-weight: 600; font-size: .9rem;
  transition: background .2s, color .2s, border-color .2s;
}
.pagination .page-numbers:hover { border-color: var(--brand); color: var(--brand-strong); }
.pagination .page-numbers.current {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.pagination .page-numbers.dots { border-color: transparent; background: transparent; }

/* ── BUSCA ──────────────────────────────────────────── */
.search-form { display: flex; flex-wrap: wrap; gap: .6rem; }
.search-field {
  flex: 1 1 12rem; min-height: 48px; padding: .65rem .9rem;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: #fff; color: var(--ink); font: inherit;
}
.search-field:focus { outline: 3px solid var(--brand); outline-offset: 1px; }