/* ITPD — O Instituto section styles (hub + Quem Somos, Missão/Visão/Valores,
   Coordenação e Corpo Docente, Cooperação Internacional).
   Shared across all pages in this section — enqueued together via functions.php.
   Tokens/buttons/section shells/tiles/cards/values/CTA/breadcrumb/subhero/subnav/article
   all live in itpd-base.css — this file only has rules unique to O Instituto pages. */

/* ---- Section heading accent line — same short accent-colored underline used on
   Cursos and the individual course pages, applied here for consistency. Scoped to
   .itpd-instituto so it doesn't affect the shared h2 styling used elsewhere
   (blog posts also use .itpd-article__body h2 via base.css). ---- */
.itpd-instituto h2{ position:relative; padding-bottom:14px; }
.itpd-instituto h2::after{ content:''; position:absolute; left:0; bottom:0; width:40px; height:3px; border-radius:2px; background:var(--accent); }
/* Valores heading suppresses this — the per-item vertical accent ticks below
   it already do the same visual job, making the underline redundant here. */
.itpd-instituto h2.itpd-h2--no-accent::after{ content:none; }

/* ---- Team rows — used for Diretor Presidente, Coordenação, and Comitê
   Científico alike. Full-width flowing rows (photo left, text filling the
   REST of the width) instead of a cramped multi-column card grid — bios read
   far better with the whole line width available than squeezed into a half-
   width square, and it scales cleanly whether someone has a one-line name or
   a full paragraph bio. ---- */
.itpd-team-list{ display:flex; flex-direction:column; margin-top:8px; }
.itpd-team-row{ display:flex; align-items:flex-start; gap:24px; padding:28px 0; border-bottom:1px solid var(--line); }
.itpd-team-row__photo{ flex:0 0 88px; width:88px; height:88px; border-radius:50%; overflow:hidden; background:linear-gradient(135deg,var(--pale),#A9C8ED); }
.itpd-team-row__photo img{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important; display:block; margin:0 !important; max-width:none !important; }
.itpd-team-row__body{ flex:1; min-width:0; padding-top:6px; }
.itpd-team-row__name{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:17px; color:var(--ink); margin:0; }
.itpd-team-row__bio{ font-size:14px; color:var(--slate); line-height:1.7; margin:8px 0 0; }
@media (max-width:600px){
  .itpd-team-row{ flex-direction:column; gap:14px; }
  .itpd-team-row__photo{ width:76px; height:76px; }
}

/* ---- Featured leader row (Diretor Presidente) — same photo+text pattern as
   the team rows below, but larger and with an accent border, since a singular
   leadership role still deserves more visual weight than a regular row ---- */
.itpd-leader{ display:flex; align-items:center; gap:24px; border:1px solid var(--line); border-left:3px solid var(--primary); padding:24px 28px; margin:8px 0 0; }
.itpd-leader__photo{ flex:0 0 96px; width:96px; height:96px; border-radius:50%; overflow:hidden; background:linear-gradient(135deg,var(--pale),#A9C8ED); }
.itpd-leader__photo img{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important; display:block; margin:0 !important; max-width:none !important; }
.itpd-leader__body{ min-width:0; }
.itpd-leader__role{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--primary); margin-bottom:6px; }
.itpd-leader__name{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:22px; color:var(--ink); margin:0; }
@media (max-width:600px){
  .itpd-leader{ flex-direction:column; align-items:flex-start; gap:16px; }
}

/* ---- Featured partner card (Cooperação page) — same visual weight treatment
   as .itpd-leader, since a confirmed institutional partnership deserves more
   than a plain logo badge ---- */
.itpd-partner-card{ border:1px solid var(--line); border-left:3px solid var(--primary); padding:24px 28px; margin:24px 0; }
.itpd-partner-card__label{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--primary); margin-bottom:8px; }
.itpd-partner-card__name{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:20px; color:var(--ink); margin:0 0 10px; }
.itpd-partner-card__text{ font-size:15px; color:var(--slate); line-height:1.7; margin:0; }

/* ---- Valores grid (MVV page) — a light, airy 2-column grid instead of a
   dense stacked list, marked with a small accent tick per item (same bar-motif
   language as pull-quotes/course-meta) rather than full borders or boxes, so
   it reads as modern/breathing rather than boxed-in. Collapses to 1 column
   on mobile. ---- */
.itpd-values-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:36px 32px; margin-top:8px; }
.itpd-value-card{ padding-left:18px; border-left:3px solid var(--accent); }
.itpd-value-card__title{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:16px; color:var(--ink); margin:0 0 8px; }
.itpd-value-card__text{ font-size:14px; color:var(--slate); line-height:1.6; margin:0; }
@media (max-width:600px){
  .itpd-values-grid{ grid-template-columns:1fr; gap:26px; }
}

/* ---- Facts on Cooperação — connected network nodes instead of the bento
   cells (which stay exclusive to Quem Somos). Requires the modifier class
   itpd-facts--network on the facts div in the page markup. Three open
   columns joined by a gradient connector line with numbered node circles —
   a network/connection visual matching this page's actual subject. Collapses
   to a vertical timeline on mobile. ---- */
.itpd-facts--network{ grid-template-columns:repeat(3,1fr); gap:28px; margin-top:44px; }
.itpd-facts--network .itpd-fact,
.itpd-facts--network .itpd-fact:first-child{ grid-column:auto; background:transparent; border:none; border-radius:0; box-shadow:none; overflow:visible; padding:52px 8px 0 0; }
.itpd-facts--network .itpd-fact:hover{ transform:none; box-shadow:none; }
.itpd-facts--network .itpd-fact::before,
.itpd-facts--network .itpd-fact:first-child::before{ content:''; position:absolute; top:16px; left:0; right:-28px; width:auto; height:2px; background:linear-gradient(90deg, var(--primary), var(--pale)); border-radius:0; }
.itpd-facts--network .itpd-fact:last-child::before{ right:0; }
.itpd-facts--network .itpd-fact::after,
.itpd-facts--network .itpd-fact:first-child::after{ content:''; position:absolute; top:10px; left:0; right:auto; width:14px; height:14px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px var(--pale); font-size:0; }
.itpd-facts--network .itpd-fact:first-child .itpd-fact__label{ color:var(--primary); }
.itpd-facts--network .itpd-fact:first-child .itpd-fact__text{ color:var(--slate); max-width:none; }
@media (max-width:700px){
  .itpd-facts--network{ grid-template-columns:1fr; gap:0; }
  .itpd-facts--network .itpd-fact,
  .itpd-facts--network .itpd-fact:first-child{ padding:0 0 32px 54px; }
  .itpd-facts--network .itpd-fact::before,
  .itpd-facts--network .itpd-fact:first-child::before{ top:0; bottom:0; left:16px; right:auto; width:2px; height:auto; background:linear-gradient(180deg, var(--primary), var(--pale)); }
  .itpd-facts--network .itpd-fact:last-child::before{ display:none; }
  .itpd-facts--network .itpd-fact::after,
  .itpd-facts--network .itpd-fact:first-child::after{ left:10px; top:4px; }
}