/* Layout C — escolha na barra das opções (botão Layout: A → B → C), igual nas três propostas.
   Ideia: zine de cultura, cartaz de festa. Títulos de seção em etiquetas vermelhas meio tortas, como adesivos;
   cartões e caixas com contorno grosso e sombra dura deslocada; nome de cada caso com marca-texto rosa por baixo.
   As cores de fundo das seções não mudam (a página continua de uma cor só, com as faixas escuras).
   Tudo aqui só vale com <html data-layout="c">. */

:root[data-layout="c"] {
  --c-traco: 3px solid var(--cor-texto-forte);
  --c-sombra: 6px 6px 0 var(--cor-texto-forte);
  --c-sombra-maior: 10px 10px 0 var(--cor-texto-forte);
  --t-corpo: 1.0625rem;
}

/* ---------- títulos de seção: etiqueta adesiva ---------- */
[data-layout="c"] .sec__fantasma {
  display: none;
}

[data-layout="c"] .sec__cabeca {
  margin-bottom: var(--e8);
}

[data-layout="c"] .sec__cabeca .sec__rotulo {
  position: static;
  display: inline-block;
  padding: 0.12em 0.4em 0.18em;
  background: var(--cor-apoio-2);
  color: var(--cor-fundo);
  font-family: var(--fonte-titulo);
  font-size: clamp(2rem, 5vw, 4.25rem);   /* um pouco menor (pedido da Julia, 27/10) */
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  rotate: -2deg;
  box-shadow: var(--c-sombra);
}

[data-layout="c"] .sec__cabeca .sec__rotulo::after {
  display: none;
}

/* rótulos pequenos (Propósito, Formação, Reconhecimentos…) viram etiquetas pequenas */
[data-layout="c"] .proposito__rotulo,
[data-layout="c"] .colunas .sec__rotulo,
[data-layout="c"] .areas__titulo,
[data-layout="c"] .caso__lado h3,
[data-layout="c"] .marcas__titulo {
  justify-self: start;
  align-self: start;
  width: fit-content;
  padding: var(--e1) var(--e3);
  background: var(--cor-texto-forte);
  color: var(--cor-fundo);
  rotate: -1.5deg;
}

[data-layout="c"] .proposito__rotulo {
  background: var(--cor-destaque);
  color: var(--cor-texto-forte);
}

[data-layout="c"] .colunas .sec__rotulo::after {
  display: none;
}

/* ---------- Quem sou ---------- */
[data-layout="c"] .numeros__foto {
  outline: 0;
  border: 6px solid var(--cor-texto-forte);
  box-shadow: var(--c-sombra);
  rotate: 4deg;
}

[data-layout="c"] .numeros__item dd {
  color: var(--cor-apoio-2);
}

/* ---------- Experiência: caixas com contorno e sombra dura ---------- */
[data-layout="c"] .sanfona {
  gap: var(--e4);
}

[data-layout="c"] .sanfona__item {
  border: var(--c-traco);
  border-radius: var(--raio);
  box-shadow: var(--c-sombra);
}

[data-layout="c"] .sanfona__item[open] {
  background: var(--p-forma);
}

/* áreas de atuação: adesivos de três cores */
[data-layout="c"] .areas li {
  border: 2px solid var(--cor-texto-forte);
  background: var(--cor-fundo);
  color: var(--cor-texto-forte);
  box-shadow: 3px 3px 0 var(--cor-texto-forte);
}

[data-layout="c"] .areas li:nth-child(3n + 2) { background: var(--cor-apoio-1); rotate: 1deg; }
[data-layout="c"] .areas li:nth-child(3n) { background: var(--cor-destaque); rotate: -1deg; }

/* ---------- Projetos: cartazes com contorno, sombra dura e número ---------- */
[data-layout="c"] .grade {
  gap: var(--e6) var(--e5);
}

[data-layout="c"] .cartao a {
  padding-right: 88px;   /* espaço da etiqueta Nº no canto: o nome não passa por baixo dela */
  border: var(--c-traco);
  border-radius: var(--raio);
  box-shadow: var(--c-sombra-maior);
  transition: translate 0.2s var(--curva), box-shadow 0.2s var(--curva);
}

[data-layout="c"] .cartao:nth-child(odd) a { rotate: -1deg; }
[data-layout="c"] .cartao:nth-child(even) a { rotate: 1deg; }

[data-layout="c"] .cartao a:hover,
[data-layout="c"] .cartao a:focus-visible {
  translate: -3px -3px;
  box-shadow: 13px 13px 0 var(--cor-texto-forte);
}

/* número do caso no canto, como etiqueta de cartaz (na ordem dos casos de baixo) */
[data-layout="c"] .cartao a::after {
  position: absolute;
  top: var(--e5);
  right: var(--e5);
  padding: var(--e1) var(--e2);
  border: 2px solid currentColor;
  border-radius: 999px;
  font-size: var(--t-meta);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

[data-layout="c"] .cartao--a a::after { content: "Nº 01"; }
[data-layout="c"] .cartao--b a::after { content: "Nº 02"; }
[data-layout="c"] .cartao--c a::after { content: "Nº 03"; }
[data-layout="c"] .cartao--foto a::after { content: "Nº 04"; background: var(--cor-fundo); color: var(--cor-texto-forte); }
[data-layout="c"] .cartao--d a::after { content: "Nº 05"; }
[data-layout="c"] .cartao--e a::after { content: "Nº 06"; }

[data-layout="c"] .cartao__pilula,
[data-layout="c"] .cartao__seta {
  border: 2px solid var(--cor-texto-forte);
}

/* ---------- Casos ---------- */
[data-layout="c"] .caso__cabeca {
  align-items: center;
}

/* número num selo redondo */
[data-layout="c"] .caso__num {
  display: grid;
  place-items: center;
  width: 3em;
  height: 3em;
  padding: 0;
  border-radius: 50%;
  background: var(--cor-apoio-2);
  color: var(--cor-fundo);
  font-size: var(--t-lead);
  rotate: -10deg;
}

/* nome com marca-texto */
/* nome com marca-texto: a faixa fica na parte de baixo das letras e passa um pouco delas, para não parecer riscado */
/* a faixa vai no <span> de dentro (inline), para cada linha ganhar a sua quando o nome quebra */
[data-layout="c"] .caso__nome {
  --c-marca: var(--p-forma);
}

[data-layout="c"] .caso__nome > span {
  padding: 0 0.08em 0.1em;
  background: linear-gradient(transparent 55%, var(--c-marca) 55%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

[data-layout="c"] .caso--rosa .caso__nome {
  --c-marca: var(--cor-fundo);
}

[data-layout="c"] .caso--escuro .caso__nome {
  --c-marca: var(--cor-apoio-2);
}

/* por cima da faixa do marca-texto do nome, que desce um pouco além da linha */
[data-layout="c"] .caso__papel {
  position: relative;
  z-index: 1;
  border-color: var(--cor-texto-forte);
  background: var(--cor-texto-forte);
  color: var(--cor-fundo);
}

[data-layout="c"] .caso--escuro .caso__papel {
  border-color: var(--cor-fundo);
  background: var(--cor-fundo);
  color: var(--cor-texto-forte);
}

/* marcadores das listas viram losangos */
[data-layout="c"] .lista-marcada li::before {
  border-radius: 0;
  rotate: 45deg;
}

/* fotos do bambula.lab: contorno e sombra, cada uma num ângulo */
[data-layout="c"] .galeria img,
[data-layout="c"] .caso__foto {
  border: var(--c-traco);
  border-radius: var(--raio);
  box-shadow: var(--c-sombra);
}

[data-layout="c"] .galeria__a { rotate: -1deg; }
[data-layout="c"] .galeria__b { rotate: 1.5deg; }
[data-layout="c"] .galeria__c { rotate: -2deg; }
[data-layout="c"] .galeria__d { rotate: 1deg; }
[data-layout="c"] .caso__foto { rotate: -1.5deg; }

/* a frase do bambula.lab vira um cartaz */
[data-layout="c"] .caso__citacao {
  width: fit-content;
  max-width: 22ch;
  padding: var(--e5) var(--e6);
  background: var(--cor-apoio-2);
  color: var(--cor-fundo);
  border: var(--c-traco);
  box-shadow: var(--c-sombra-maior);
  rotate: -1.5deg;
}

[data-layout="c"] .dupla,
[data-layout="c"] .dupla .caso + .caso,
[data-layout="c"] .sec--formacao {
  border-width: 3px;
  border-color: var(--cor-texto-forte);
}

/* ---------- Marcas: param de correr (pedido da Julia, 27/10). Dois jeitos para comparar:
   adesivos (o padrão do C): cada marca numa etiqueta torta, como colagem;
   cartaz (?marcas=cartaz): os nomes grandes quebrando em linhas, todos à vista. ---------- */
[data-layout="c"] .marcas {
  overflow: visible;
}

[data-layout="c"] .marcas__trilho {
  width: auto;
  flex-wrap: wrap;
  gap: var(--e4) var(--e3);
  white-space: normal;
  animation: none;
}

/* a lista vem repetida para o letreiro emendar; parada, basta uma vez */
[data-layout="c"] .marcas__trilho span:nth-child(n + 12) {
  display: none;
}

[data-layout="c"]:not([data-marcas="cartaz"]) .marcas__trilho {
  font-size: clamp(var(--t-h3), 3vw, 2.5rem);
}

[data-layout="c"]:not([data-marcas="cartaz"]) .marcas__trilho span {
  padding: var(--e2) var(--e4);
  border: var(--c-traco);
  background: var(--cor-fundo);
  color: var(--cor-texto-forte);
  box-shadow: 4px 4px 0 var(--cor-texto-forte);
  rotate: -2deg;
}

[data-layout="c"]:not([data-marcas="cartaz"]) .marcas__trilho span::after {
  display: none;
}

[data-layout="c"]:not([data-marcas="cartaz"]) .marcas__trilho span:nth-child(3n + 2) { background: var(--cor-destaque); rotate: 1.5deg; }
[data-layout="c"]:not([data-marcas="cartaz"]) .marcas__trilho span:nth-child(3n) { background: var(--cor-apoio-1); rotate: -0.5deg; }
[data-layout="c"]:not([data-marcas="cartaz"]) .marcas__trilho span:nth-child(4n) { rotate: 3deg; }

/* cartaz: só os nomes, grandes, separados pelas bolinhas; a última não leva bolinha */
[data-layout="c"][data-marcas="cartaz"] .marcas__trilho {
  gap: 0 var(--e5);
  font-size: clamp(var(--t-h2), 6vw, 5.5rem);
  line-height: 1;
}

[data-layout="c"][data-marcas="cartaz"] .marcas__trilho span {
  gap: var(--e5);
  padding-right: 0;
}

[data-layout="c"][data-marcas="cartaz"] .marcas__trilho span:nth-child(11)::after {
  display: none;
}

[data-layout="c"][data-marcas="cartaz"] .marcas__trilho span:nth-child(odd) {
  color: var(--cor-apoio-2);
}

/* ---------- Contato ---------- */
[data-layout="c"] .contato__titulo {
  rotate: -1.5deg;
}

/* ---------- celular: menos inclinação e sombra menor ---------- */
@media (max-width: 640px) {
  :root[data-layout="c"] {
    --c-sombra: 4px 4px 0 var(--cor-texto-forte);
    --c-sombra-maior: 6px 6px 0 var(--cor-texto-forte);
  }

  [data-layout="c"] .cartao:nth-child(odd) a,
  [data-layout="c"] .cartao:nth-child(even) a {
    rotate: 0deg;
  }

  [data-layout="c"] .galeria img {
    rotate: 0deg;
  }

  /* "NegritudeNjoada" não cabe ao lado da etiqueta Nº no tamanho dos outros nomes */
  [data-layout="c"] .cartao--a .cartao__tipo {
    font-size: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-layout="c"] .cartao a {
    transition: none;
  }
}