/* ============================================================
   ICDS · Páginas internas — componentes compartilhados
   Depende de styles.css (variáveis --ic-*, .container, .reveal,
   header, footer, .cta-strip, .ic-btn, .ic-badge, .ic-iconbox).
   ============================================================ */

/* ---- Eyebrow (rótulo acima do título) ---- */
.ic-eyebrow{display:inline-block;font-family:var(--ic-font-display);font-weight:700;font-size:.8125rem;letter-spacing:1px;text-transform:uppercase;color:var(--ic-primary);margin-bottom:14px}
.ic-eyebrow.on-dark{color:var(--ic-primary-light)}

/* ---- Hero de página interna (fundo escuro) ---- */
.page-hero{background:var(--ic-navy-900);color:#fff;padding:0}
.page-hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.05) 2px,transparent 2px);background-size:24px 24px;pointer-events:none}
.page-hero .grid{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;padding:clamp(56px,8vw,100px) 0}
.page-hero.solo .grid{grid-template-columns:1fr;max-width:860px}
.page-hero .crumb{font-size:.8rem;color:#8FB0D6;margin-bottom:16px}
.page-hero .crumb a:hover{color:#fff}
.page-hero h1{color:#fff;font-size:var(--ic-fs-hero);font-weight:800;line-height:1.14;margin:0 0 20px}
.page-hero p.lead{color:#D4DEF0;font-size:1.05rem;max-width:540px;margin-bottom:32px}
.page-hero .cta-row{display:flex;gap:16px;flex-wrap:wrap}
.page-hero .media{position:relative;border-radius:var(--ic-radius-card);overflow:hidden;min-height:400px;box-shadow:var(--ic-shadow-hover)}
.page-hero .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.page-hero .grid{grid-template-columns:1fr;gap:36px}.page-hero .media{min-height:260px}}

/* ---- Split genérico texto + mídia ---- */
.ic-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.ic-split.wide-text{grid-template-columns:1.1fr .9fr}
.ic-split h2{font-size:var(--ic-fs-h2);margin:0 0 18px}
.ic-split p{margin-bottom:16px}
.ic-split .ic-btn{margin-top:8px}
@media(max-width:900px){.ic-split{grid-template-columns:1fr;gap:36px}.ic-split .media-order{order:-1}}

/* ---- Mídia emoldurada (decorações discretas) ---- */
.media-frame{position:relative}
.media-frame>img{width:100%;border-radius:var(--ic-radius-card);box-shadow:var(--ic-shadow-card);display:block;object-fit:cover}
.media-frame .dots{position:absolute;bottom:-16px;right:-16px;width:120px;height:100px;background-image:radial-gradient(var(--ic-gray-200) 2.2px,transparent 2.2px);background-size:16px 16px;z-index:-1}
.media-frame .arc{position:absolute;top:-18px;left:-18px;width:138px;height:138px;border:none;border-radius:0;background:none;transform:none;overflow:hidden;z-index:-1;will-change:transform}
.media-frame .arc::before,.media-frame .arc::after{content:'';position:absolute;width:300%;height:22px;transform:rotate(-45deg);transform-origin:left top}
.media-frame .arc::before{background:var(--ic-primary);top:46px;left:-16px}
.media-frame .arc::after{background:var(--ic-primary-light);top:84px;left:-16px;opacity:.9}

/* ---- Identidade (Propósito / Missão / Visão) ---- */
.identity{position:relative;display:grid;grid-template-columns:repeat(3,1fr);background:var(--ic-navy-900);border-radius:var(--ic-radius-card);overflow:hidden;color:#fff}
.identity::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.05) 2px,transparent 2px);background-size:22px 22px;pointer-events:none}
.identity .col{position:relative;padding:44px 36px;border-left:1px solid rgba(255,255,255,.12)}
.identity .col:first-child{border-left:none}
.identity .col::before{content:'';display:block;width:34px;height:3px;border-radius:3px;background:var(--ic-primary-light);margin-bottom:18px}
.identity h3{color:#fff;font-size:var(--ic-fs-h3);margin-bottom:10px}
.identity p{color:var(--ic-gray-400)}
@media(max-width:820px){.identity{grid-template-columns:1fr}.identity .col{border-left:none;border-top:1px solid rgba(255,255,255,.12)}.identity .col:first-child{border-top:none}}

/* ---- Grade de valores ---- */
.value-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:20px}
.value-card{background:#fff;border:1px solid var(--ic-gray-200);border-top:3px solid var(--ic-primary);border-radius:var(--ic-radius-card);padding:28px 26px;transition:transform var(--ic-t-med) var(--ic-ease),box-shadow var(--ic-t-med) var(--ic-ease)}
.value-card:hover{transform:translateY(-6px);box-shadow:var(--ic-shadow-hover)}
.value-card h3{font-size:1.1rem;margin-bottom:8px}
.value-card p{font-size:var(--ic-fs-small)}

/* ---- Pilares (governança / integridade / transparência) ---- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pillar{background:#fff;border:1px solid var(--ic-gray-200);border-radius:var(--ic-radius-card);padding:34px 30px;position:relative;overflow:hidden}
.pillar::before{content:'';position:absolute;top:0;left:0;width:100%;height:4px;background:var(--ic-primary)}
.pillar h3{font-size:var(--ic-fs-h3);margin:6px 0 12px}
.pillar p{font-size:var(--ic-fs-small)}
@media(max-width:820px){.pillars{grid-template-columns:1fr}}

/* ---- Presidente / liderança ---- */
.leader{display:grid;grid-template-columns:.82fr 1.18fr;gap:56px;align-items:center}
.leader .portrait{position:relative;justify-self:center}
.leader .portrait>img{width:min(320px,82vw);aspect-ratio:1/1;object-fit:cover;object-position:top center;border-radius:var(--ic-radius-card);box-shadow:var(--ic-shadow-hover);position:relative;z-index:1}
.leader .portrait .ring{position:absolute;left:-26px;bottom:-26px;width:170px;height:170px;border-radius:50%;border:42px solid var(--ic-primary-soft);z-index:0}
.leader h2{font-size:var(--ic-fs-h2);margin:0 0 6px}
.leader .role{color:var(--ic-primary);font-weight:600;font-family:var(--ic-font-display);margin-bottom:20px}
.leader p{margin-bottom:14px;font-size:.95rem}
@media(max-width:900px){.leader{grid-template-columns:1fr;gap:44px}}

/* ---- Cartões de documento / download ---- */
.doc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:20px}
.doc-card{display:flex;flex-direction:column;align-items:flex-start;gap:14px;background:#fff;border:1px solid var(--ic-gray-200);border-radius:var(--ic-radius-card);padding:30px 28px;box-shadow:var(--ic-shadow-card);transition:transform var(--ic-t-med) var(--ic-ease),box-shadow var(--ic-t-med) var(--ic-ease)}
.doc-card:hover{transform:translateY(-6px);box-shadow:var(--ic-shadow-hover)}
.doc-card .ic-iconbox{width:48px;height:48px;border-radius:10px;font-size:1.15rem}
.doc-card h3{font-size:1.1rem}
.doc-card p{font-size:var(--ic-fs-small);flex:1;margin-bottom:4px}

/* ---- Painel do mapa estratégico (placeholder da imagem oficial) ---- */
.mapa-panel{position:relative;overflow:hidden;border-radius:var(--ic-radius-card);min-height:320px;background:linear-gradient(135deg,var(--ic-navy-900),var(--ic-primary-hover));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;color:#fff;padding:40px}
.mapa-panel::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.09) 2px,transparent 2px);background-size:20px 20px}
.mapa-panel .k{position:relative;font-family:var(--ic-font-display);font-weight:800;font-size:1.4rem}
.mapa-panel .s{position:relative;color:#D4DEF0;font-size:.9rem;max-width:340px}

/* ---- Serviços (nossas soluções) ---- */
.value-card .svc-n{display:block;font-family:var(--ic-font-display);font-weight:800;font-size:.9rem;letter-spacing:1px;color:var(--ic-primary);margin-bottom:10px}

/* ---- Cartão de unidade/hospital (reusa .ic-post) ---- */
.stats-inline{display:flex;flex-wrap:wrap;gap:18px 26px;margin:4px 0 18px}
.stats-inline .s b{display:block;font-family:var(--ic-font-display);font-weight:800;font-size:1.35rem;color:var(--ic-navy-900);line-height:1.1}
.stats-inline .s span{font-size:.78rem;color:var(--ic-gray-500)}
.ic-post .body .loc{display:inline-flex;align-items:center;gap:6px;color:var(--ic-primary);font-weight:600;font-size:.8rem;margin-bottom:8px}

/* ---- Marca acima do título ---- */
.brand-mark{height:52px;width:auto;display:block;margin-bottom:18px}
.brand-mark.sm{height:40px}

/* ---- Faixa de certificados ---- */
.cert-band{background:#fff;border:1px solid var(--ic-gray-200);border-radius:var(--ic-radius-card);padding:36px;display:flex;align-items:center;justify-content:center;box-shadow:var(--ic-shadow-card)}
.cert-band img{max-width:100%;height:auto}

/* ---- Bloco de marca com fundo escuro (unihealth no hub) ---- */
.brand-block.on-dark{background:var(--ic-navy-900);color:#fff;border-radius:var(--ic-radius-card);padding:clamp(32px,5vw,56px);position:relative;overflow:hidden}
.brand-block.on-dark::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.05) 2px,transparent 2px);background-size:22px 22px;pointer-events:none}
.brand-block.on-dark>*{position:relative}
.brand-block.on-dark h2{color:#fff}
.brand-block.on-dark .lead{color:var(--ic-gray-400);max-width:640px;margin-top:10px}


/* ---- Barras diagonais (motivo do logo) — decoração com parallax ---- */
/* Substitui os antigos meio-círculos/arcos. JS aplica parallax via [data-parallax] / .media-frame .arc */
.ic-bars{position:absolute;width:138px;height:138px;overflow:hidden;pointer-events:none;z-index:-1;will-change:transform}
.ic-bars::before,.ic-bars::after{content:'';position:absolute;width:300%;height:22px;transform:rotate(-45deg);transform-origin:left top}
.ic-bars::before{background:var(--ic-primary);top:46px;left:-16px}
.ic-bars::after{background:var(--ic-primary-light);top:84px;left:-16px;opacity:.9}
.ic-bars.lg{width:196px;height:196px}
.ic-bars.lg::before,.ic-bars.lg::after{height:30px}
@media(prefers-reduced-motion:reduce){.ic-bars,.media-frame .arc{transform:none!important}}

/* ---- Mapa do site / colunas de links ---- */
.link-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:34px 32px}
.link-cols .col h3{font-size:1.05rem;margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--ic-primary-soft)}
.link-cols .col ul{list-style:none;display:grid;gap:9px}
.link-cols .col a{font-size:.92rem;color:var(--ic-gray-500);transition:color var(--ic-t-fast)}
.link-cols .col a:hover{color:var(--ic-primary);padding-left:3px}

/* ---- Grid de Relatórios Institucionais (cartão clicável: imagem + título + texto) ---- */
.report-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
a.ic-post{display:block;color:inherit}
a.ic-post .cta{display:inline-flex;align-items:center;gap:7px;font-family:var(--ic-font-display);font-weight:700;font-size:.85rem;color:var(--ic-primary);margin-top:4px}
a.ic-post .cta .arr{transition:transform var(--ic-t-fast) var(--ic-ease);display:inline-block}
a.ic-post:hover .cta .arr{transform:translateX(4px)}
