/* =============================================================
   Clinica Maki Yamaguchi, Ortopedia e Psicologia
   Componentes exclusivos das paginas internas.
   Depende de: tokens.css, styles.css (carregar sempre depois).
   A home nao usa nada daqui.
   ============================================================= */

/* ---------------------------------------------------------------
   1. Hero das paginas internas
   Versao curta e sem cardume do hero da home: fundo de tinta, titulo,
   linha de apoio e uma carpa discreta no canto.
   --------------------------------------------------------------- */
.page-hero {
  position: relative;
  background: var(--sumi);
  color: var(--fg-on-dark);
  padding-block: clamp(148px, 17vw, 220px) clamp(64px, 8vw, 108px);
  overflow: hidden;
  isolation: isolate;
}

.page-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 62ch;
}

.page-hero .kicker { color: var(--jade-pale); }

.page-hero__title {
  font-size: var(--t-h1);
  line-height: var(--lh-display);
  color: var(--fg-on-dark);
}
.page-hero__title em {
  color: var(--jade-pale);
  font-weight: var(--display-emph-weight);
  font-style: normal;
}

.page-hero__lead {
  margin-top: var(--sp-3xl);
  font-size: var(--t-lead);
  line-height: var(--lh-loose);
  color: var(--fg-on-dark-mu);
  max-width: 56ch;
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-lg);
  margin-top: clamp(28px, 3.5vw, 40px);
}

/* A carpa do canto. Decorativa, sempre com aria-hidden no HTML. */
.page-hero__koi {
  position: absolute;
  right: -30px;
  bottom: -40px;
  z-index: 1;
  width: clamp(200px, 30vw, 420px);
  opacity: 0.13;
  pointer-events: none;
}

/* Trilha de navegacao */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-md);
  margin-bottom: var(--sp-2xl);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--fg-on-dark-mu);
}
.crumbs a:hover { color: var(--fg-on-dark); text-decoration: underline; text-underline-offset: 4px; }
.crumbs span[aria-hidden] { opacity: 0.5; }

/* Faixa de dados logo abaixo do hero interno */
.page-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3xl);
  padding-block: clamp(28px, 3.4vw, 44px);
  border-bottom: 1px solid var(--border);
}
.page-fact__label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--frente-ink);
}
.page-fact__value {
  margin-top: var(--sp-sm);
  font-size: var(--t-sm);
  line-height: var(--lh-loose);
  color: var(--fg);
}

/* ---------------------------------------------------------------
   2. Blocos de especialidade
   Texto de um lado, foto do outro. Alternam o lado a cada bloco, e
   cada um roda dentro do escopo da sua frente (.frente--orto ou
   .frente--psico), entao a cor acompanha sem duplicar componente.
   --------------------------------------------------------------- */
.condition {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  padding-block: clamp(40px, 5vw, 72px);
  border-top: 1px solid var(--border);
}
.condition:first-of-type { border-top: 0; padding-top: 0; }

/* Bloco invertido: a foto vai para a esquerda. `order` e nao troca de
   colunas, para a ordem de leitura no HTML continuar sendo texto e depois
   imagem, que e a ordem correta para leitor de tela. */
.condition--flip .condition__media { order: -1; }

/* Bloco sem foto. Existem tres fotos de cena para nove assuntos, e repetir a
   mesma imagem em blocos seguidos empobreceria a pagina. Aqui o assunto vive
   so de texto, com a lista em duas colunas para ocupar a largura inteira. */
.condition--text { grid-template-columns: minmax(0, 1fr); }
.condition--text .condition__lead { max-width: 72ch; }
.condition--text .condition__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Numero do assunto. Fica acima do titulo, na cor da frente. */
.condition__num {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  color: var(--frente-ink);
}

.condition__media {
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--washi-fundo);
  box-shadow: var(--inset-hairline);
}
.condition__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.condition__title {
  margin-top: var(--sp-xl);
  font-size: var(--t-h3);
  line-height: var(--lh-tight);
}
.condition__lead {
  margin-top: var(--sp-2xl);
  font-size: var(--t-body);
  line-height: var(--lh-prose);
  color: var(--fg-muted);
  max-width: 54ch;
}

/* Lista de queixas e de temas. Marcador proprio na cor da frente: nenhum
   bullet padrao do navegador entra aqui. */
.condition__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-lg) var(--sp-3xl);
  margin-top: clamp(20px, 2.4vw, 28px);
}
.condition__list li {
  position: relative;
  padding-left: 20px;
  font-size: var(--t-sm);
  line-height: var(--lh-loose);
  color: var(--fg);
}
.condition__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--frente);
}

.condition__note {
  margin-top: clamp(20px, 2.4vw, 28px);
  padding: var(--sp-2xl);
  border-radius: var(--r-lg);
  background: var(--frente-wash);
  font-size: var(--t-sm);
  line-height: var(--lh-prose);
  color: var(--fg);
}

.condition__cta { margin-top: clamp(24px, 3vw, 32px); }

/* ---------------------------------------------------------------
   3. Texto longo
   --------------------------------------------------------------- */
.prose {
  max-width: 68ch;
  font-size: var(--t-body);
  line-height: var(--lh-prose);
  color: var(--fg-muted);
}
.prose > * + * { margin-top: var(--sp-3xl); }

.prose h2 {
  margin-top: clamp(40px, 5vw, 64px);
  font-size: var(--t-h3);
  color: var(--fg);
}
.prose h3 {
  margin-top: clamp(28px, 3.4vw, 40px);
  font-family: var(--font-body);
  font-size: var(--t-lead);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  color: var(--fg);
}
.prose strong { font-weight: 600; color: var(--fg); }
.prose a {
  color: var(--indigo-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose a:hover { color: var(--indigo-900); }

.prose ul { display: flex; flex-direction: column; gap: var(--sp-lg); }
.prose ul li {
  position: relative;
  padding-left: 20px;
}
.prose ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--frente);
}

/* Historia da clinica: texto e foto lado a lado, foto colada ao rolar */
.longform {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(36px, 5vw, 88px);
  align-items: start;
}
.longform__media {
  position: sticky;
  top: 116px;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--washi-fundo);
  box-shadow: var(--inset-hairline);
}
.longform__media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 40%;
}
.longform__caption {
  padding: var(--sp-2xl);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
  background: var(--washi-claro);
}

/* Linha do tempo da clinica. Sem promessa, so o que aconteceu. */
.timeline { display: flex; flex-direction: column; }
.timeline__item {
  display: grid;
  grid-template-columns: 7.5ch minmax(0, 1fr);
  gap: var(--sp-3xl);
  padding-block: var(--sp-3xl);
  border-top: 1px solid var(--border);
}
.timeline__item:first-child { border-top: 0; padding-top: 0; }
.timeline__year {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--frente-ink);
  padding-top: 2px;
}
.timeline__text {
  font-size: var(--t-sm);
  line-height: var(--lh-prose);
  color: var(--fg);
}

/* ---------------------------------------------------------------
   4. Canais de contato
   --------------------------------------------------------------- */
.channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-xl);
}

.channel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
  padding: clamp(22px, 2.6vw, 30px);
  background: var(--washi-claro);
  border-radius: var(--r-xl);
  box-shadow: var(--inset-hairline);
  transition: transform var(--dur-base) var(--ease-brand);
}
a.channel:hover { transform: translateY(-3px); }

.channel__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--frente-wash);
  color: var(--frente-ink);
}
.channel__icon svg { width: 22px; height: 22px; }

.channel__label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.channel__value {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg);
  overflow-wrap: anywhere;
}
.channel__note {
  font-size: var(--t-sm);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
}

/* O canal principal. O WhatsApp e a porta que funciona, entao ele nao
   parece um irmao dos outros: ele e o cartao cheio. */
.channel--main {
  background: var(--indigo);
  color: var(--fg-on-dark);
  box-shadow: none;
}
.channel--main .channel__icon { background: rgba(246, 241, 230, 0.16); color: var(--fg-on-dark); }
.channel--main .channel__label { color: rgba(246, 241, 230, 0.8); }
.channel--main .channel__value { color: var(--fg-on-dark); }
.channel--main .channel__note { color: rgba(246, 241, 230, 0.86); }
a.channel--main:hover { background: var(--indigo-900); }

/* ---------------------------------------------------------------
   5. Endereco e horarios
   --------------------------------------------------------------- */
.office {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.office__media {
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--washi-fundo);
  box-shadow: var(--inset-hairline);
}
.office__media img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}

.office__address {
  font-size: var(--t-lead);
  line-height: var(--lh-loose);
  color: var(--fg);
  margin-top: var(--sp-xl);
}
.office__address strong { font-weight: 600; }

/* Tabela de horarios. Grade de duas colunas, nao `<table>`: sao pares de
   dia e faixa, nao dados cruzados. */
.hours {
  margin-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--border);
}
.hours__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2xl);
  padding-block: var(--sp-lg);
  border-bottom: 1px solid var(--border);
}
.hours__day {
  font-size: var(--t-sm);
  color: var(--fg);
}
.hours__time {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  letter-spacing: 0.02em;
  color: var(--frente-ink);
  white-space: nowrap;
}
.hours__row--off .hours__time { color: var(--fg-muted); }

.hours__note {
  margin-top: var(--sp-xl);
  font-size: var(--t-xs);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
}

/* ---------------------------------------------------------------
   6. Como chegar
   O predio comercial confunde quem chega: a clinica fica no quinto
   andar, sala 55. Este bloco existe so para isso.
   --------------------------------------------------------------- */
.howto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--sp-xl);
  counter-reset: passo;
}

.howto__step {
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--washi-claro);
  border-radius: var(--r-xl);
  box-shadow: var(--inset-hairline);
}
.howto__step::before {
  counter-increment: passo;
  content: counter(passo, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  color: var(--frente-ink);
}
.howto__title {
  font-family: var(--font-body);
  font-size: var(--t-lead);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
}
.howto__text {
  font-size: var(--t-sm);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
}

/* ---------------------------------------------------------------
   7. FAQ por categoria
   --------------------------------------------------------------- */
.faq-cat { padding-block: clamp(36px, 4.5vw, 64px); }
.faq-cat + .faq-cat { border-top: 1px solid var(--border); }

.faq-cat__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-xl);
  margin-bottom: var(--sp-3xl);
}
.faq-cat__title {
  font-size: var(--t-h3);
  line-height: var(--lh-tight);
}
.faq-cat__count {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--frente-ink);
}

/* Lista de perguntas com uma foto de apoio ao lado */
.faq-aside {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.faq-aside__media {
  position: sticky;
  top: 116px;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--washi-fundo);
  box-shadow: var(--inset-hairline);
}
.faq-aside__media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.faq-aside__caption {
  padding: var(--sp-2xl);
  background: var(--washi-claro);
  font-size: var(--t-sm);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
}
.faq-aside__caption strong {
  display: block;
  margin-bottom: var(--sp-sm);
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--fg);
}

/* ---------------------------------------------------------------
   8. Paginas legais
   --------------------------------------------------------------- */
.legal {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.legal__nav {
  position: sticky;
  top: 116px;
  padding: var(--sp-3xl);
  background: var(--washi-claro);
  border-radius: var(--r-xl);
  box-shadow: var(--inset-hairline);
}
.legal__nav h2 {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: var(--sp-xl);
}
.legal__nav ul { display: flex; flex-direction: column; gap: var(--sp-lg); }
.legal__nav a {
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
  color: var(--fg-muted);
  transition: color var(--dur-fast) var(--ease-snap);
}
.legal__nav a:hover { color: var(--indigo-ink); }

.legal__updated {
  margin-bottom: clamp(28px, 3.4vw, 40px);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.03em;
  color: var(--fg-muted);
}

.legal__body h2 {
  scroll-margin-top: 116px;
}

/* Bloco de contato ao pe da pagina legal */
.legal__contact {
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(24px, 3vw, 36px);
  background: var(--indigo-wash);
  border-radius: var(--r-xl);
  font-size: var(--t-sm);
  line-height: var(--lh-prose);
  color: var(--fg);
}
.legal__contact h3 {
  font-family: var(--font-body);
  font-size: var(--t-lead);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--sp-lg);
}
.legal__contact a {
  color: var(--indigo-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Faixa de foto discreta antes do footer, so nas paginas legais.
   Altura curta de proposito: e respiro, nao cena. */
.photo-band {
  position: relative;
  overflow: hidden;
  background: var(--washi-fundo);
}
.photo-band img {
  width: 100%;
  height: clamp(180px, 26vw, 300px);
  object-fit: cover;
  object-position: 50% 42%;
}
.photo-band__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--sp-4xl) var(--gutter) var(--sp-3xl);
  /* A foto tem trechos claros de vidro e parede, entao o veu precisa fechar
     forte na linha do texto: com 0.88 o mono creme fica acima de 10:1. */
  background: linear-gradient(
    180deg,
    rgba(29, 42, 51, 0) 0%,
    rgba(29, 42, 51, 0.42) 34%,
    rgba(29, 42, 51, 0.82) 66%,
    rgba(29, 42, 51, 0.9) 100%
  );
  color: var(--fg-on-dark);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  line-height: var(--lh-loose);
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------
   9. Responsivo
   --------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .legal { grid-template-columns: 1fr; }
  .legal__nav { position: static; }
  .legal__nav ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sp-lg) var(--sp-3xl);
  }

  .longform { grid-template-columns: 1fr; }
  .longform__media { position: static; max-width: 520px; }
  .longform__media img { aspect-ratio: 4 / 3; }

  .faq-aside { grid-template-columns: 1fr; }
  .faq-aside__media { position: static; max-width: 480px; }
  .faq-aside__media img { aspect-ratio: 4 / 3; }

  .office { grid-template-columns: 1fr; gap: var(--sp-4xl); }
  .office__media { max-width: 560px; }

  /* Tres colunas de lista ficam estreitas demais no tablet */
  .condition--text .condition__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 699.98px) {
  .page-hero { padding-block: 128px var(--sp-6xl); }
  .page-hero__actions { flex-direction: column; align-items: stretch; }
  .page-hero__actions .btn { justify-content: center; }

  .page-facts { grid-template-columns: 1fr; gap: var(--sp-2xl); }

  .condition { grid-template-columns: 1fr; gap: var(--sp-4xl); }
  /* Empilhado, a foto volta para depois do texto em todos os blocos: a
     alternancia de lado so faz sentido quando existem dois lados. */
  .condition--flip .condition__media { order: 0; }
  .condition__list,
  .condition--text .condition__list { grid-template-columns: 1fr; }

  .timeline__item { grid-template-columns: 1fr; gap: var(--sp-sm); }

  .legal__contact,
  .condition__note { border-radius: var(--r-lg); }
}