/* CRIE.PUBLIC.PRIVATE.MIRROR.01
   Heroes públicos compactos. A superfície pública projeta os mesmos ambientes e objetos do sistema privado. */
.cc-public-hero {
  --ccph-ink:#10233d;
  --ccph-muted:#607487;
  --ccph-line:rgba(49,83,111,.13);
  --ccph-blue:#2563eb;
  position:relative;
  overflow:hidden;
  border:1px solid var(--ccph-line);
  border-radius:26px;
  background:linear-gradient(180deg,#fff,#f8fbfd);
  box-shadow:0 18px 48px rgba(38,74,103,.07);
  font-family:inherit;
}

.cc-public-hero__grid {
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(250px,.65fr);
  gap:clamp(22px,3vw,38px);
  align-items:center;
}

.cc-public-hero__content { min-width:0; }
.cc-public-hero__kicker {
  display:block;
  margin:0 0 8px;
  color:#177b9d;
  font-size:.68rem;
  font-weight:850;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.cc-search-hero.cc-public-hero h1,
.cc-learning-hero.cc-public-hero h1,
.or-hero.cc-public-hero .or-title {
  max-width:820px;
  margin:0;
  color:var(--ccph-ink);
  font-family:inherit;
  font-size:clamp(2.2rem,4.3vw,3.8rem);
  font-weight:800;
  line-height:.98;
  letter-spacing:-.045em;
  text-wrap:balance;
}

.cc-search-hero.cc-public-hero .cc-search-hero__copy>p,
.cc-learning-hero.cc-public-hero .cc-public-hero__content>p,
.or-hero.cc-public-hero .or-sub {
  max-width:720px;
  margin:14px 0 0;
  color:var(--ccph-muted);
  font-size:.98rem;
  line-height:1.62;
}

.cc-search-hero.cc-public-hero,
.cc-learning-hero.cc-public-hero,
.or-hero.cc-public-hero {
  padding:clamp(24px,3.2vw,40px);
  margin-bottom:20px;
}

.cc-search-hero.cc-public-hero .cc-search-form { margin-top:20px; }
.cc-learning-hero.cc-public-hero .cc-learning-hero__actions { margin-top:20px; }

/* Imagem espelha um ambiente já usado no produto privado. Nunca domina a página. */
.cc-public-hero__visual {
  position:relative;
  margin:0;
  overflow:hidden;
  border:1px solid rgba(37,99,235,.09);
  border-radius:20px;
  background:#f2f7fa;
  box-shadow:0 12px 28px rgba(23,67,101,.08);
}
.cc-public-hero__visual--private { aspect-ratio:16 / 10; }
.cc-public-hero__visual--banner { aspect-ratio:3 / 1; }
.cc-public-hero__visual img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.cc-public-hero__visual--private figcaption {
  position:static;
  padding:9px 12px 11px;
  color:#607487;
  font-size:.7rem;
  line-height:1.4;
  background:rgba(255,255,255,.92);
}

.cc-public-mirror-meta {
  display:flex;
  align-items:baseline;
  gap:9px;
  margin-top:16px;
  color:#607487;
  font-size:.78rem;
}
.cc-public-mirror-meta strong {
  color:#10233d;
  font-size:1.25rem;
  line-height:1;
}

/* Na Aprendizagem, o acervo real aparece antes da explicação conceitual. */
.cc-learning-page {
  display:flex;
  flex-direction:column;
}
.cc-learning-page .cc-learning-hero { order:1; }
.cc-learning-page .cc-learning-list { order:2; }
.cc-learning-page .cc-learning-how { order:3; }
.cc-learning-page .cc-learning-principles { order:4; }
.cc-learning-empty__actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}

/* Contexto territorial compartilhado. */
.cc-public-context-panel {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  margin:0 0 20px;
  padding:15px 17px;
  border:1px solid rgba(37,99,235,.10);
  border-radius:18px;
  background:linear-gradient(90deg,rgba(239,248,255,.82),rgba(244,253,249,.82));
}
.cc-public-context-panel > div:first-child { min-width:0; }
.cc-public-context-panel span {
  display:block;
  color:#177b9d;
  font-size:.65rem;
  font-weight:850;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.cc-public-context-panel strong {
  display:block;
  margin-top:3px;
  color:#10233d;
  font-size:1rem;
}
.cc-public-context-panel p {
  max-width:72ch;
  margin:5px 0 0;
  color:#5f7387;
  font-size:.76rem;
  line-height:1.5;
}
.cc-public-context-panel__actions {
  display:flex;
  flex:0 0 auto;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:7px;
}
.cc-public-context-panel__actions a,
.cc-public-context-empty a,
.cc-learning-empty__actions a {
  display:inline-flex;
  align-items:center;
  min-height:35px;
  padding:8px 11px;
  border:1px solid rgba(37,99,235,.13);
  border-radius:999px;
  background:rgba(255,255,255,.88);
  color:#245d95;
  font-size:.72rem;
  font-weight:760;
  text-decoration:none;
}
.cc-public-context-empty {
  padding:20px 22px;
  border:1px dashed rgba(37,99,235,.18);
  border-radius:20px;
  background:rgba(248,252,255,.78);
}
.cc-public-context-empty strong { display:block; color:#10233d; }
.cc-public-context-empty p { margin:7px 0 14px; color:#5f7387; line-height:1.55; }

@media (max-width:900px) {
  .cc-public-hero__grid { grid-template-columns:1fr; }
  .cc-public-hero__visual--private,
  .cc-public-hero__visual--banner { aspect-ratio:16 / 6; }
  .cc-public-context-panel { align-items:flex-start; flex-direction:column; }
  .cc-public-context-panel__actions { justify-content:flex-start; }
}

@media (max-width:620px) {
  .cc-search-hero.cc-public-hero,
  .cc-learning-hero.cc-public-hero,
  .or-hero.cc-public-hero {
    padding:20px 16px;
    border-radius:21px;
  }
  .cc-search-hero.cc-public-hero h1,
  .cc-learning-hero.cc-public-hero h1,
  .or-hero.cc-public-hero .or-title {
    font-size:clamp(2rem,11vw,3rem);
  }
  .cc-public-hero__visual--private,
  .cc-public-hero__visual--banner { aspect-ratio:16 / 8; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-public-hero * { scroll-behavior:auto; }
}

@media (forced-colors:active) {
  .cc-public-hero,
  .cc-public-hero__visual,
  .cc-public-context-panel,
  .cc-public-context-empty {
    border-color:CanvasText;
    background:Canvas;
    box-shadow:none;
  }
}