/* ITPD — Individual course page template.
   Applies to ANY page nested under Presencial / In Company / Online (matched by
   parent page in functions.php, not by slug — scales automatically as courses are added).
   Tokens/buttons/section shells/cards/people/breadcrumb/subhero/full-width-fix all
   live in itpd-base.css now (promoted there since single.php needed the same fix). */

/* ---- Quick-facts strip (the "Card do curso" summary at a glance) ----
   Frosted-glass panel instead of a flat bordered box — reads well over both the
   photo hero (with its scrim) and the flat navy gradient. Each label gets a small
   accent-bar tick, echoing the same bar motif used in the logo and the Valores
   ledger elsewhere on the site, instead of being a plain uppercase label alone. */
.itpd-course-meta{ display:flex; flex-wrap:wrap; gap:0; margin-top:32px; background:rgba(1,9,45,.4); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.18); border-radius:2px; }
.itpd-course-meta__item{ flex:1 1 160px; padding:20px 24px; position:relative; }
.itpd-course-meta__item + .itpd-course-meta__item::before{ content:''; position:absolute; left:0; top:20px; bottom:20px; width:1px; background:rgba(255,255,255,.18); }
.itpd-course-meta__label{ display:flex; align-items:center; gap:8px; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.itpd-course-meta__label::before{ content:''; display:inline-block; flex-shrink:0; width:3px; height:12px; border-radius:1px; background:var(--accent); }
.itpd-course-meta__item--local .itpd-course-meta__label::before{ content:none; }
.itpd-course-meta__item--local{ flex:1 1 100%; }
.itpd-course-meta__item--local .itpd-course-meta__value{ font-size:12px; }
.itpd-pin-icon{ flex-shrink:0; width:14px; height:14px; color:var(--accent); }
.itpd-course-meta__value{ display:block; font-family:'Space Grotesk',sans-serif; font-size:18px; color:#fff; font-weight:600; }

/* ---- Two-column layout: long-form content + sticky enrollment card ---- */
.itpd-course-layout{ display:grid; grid-template-columns:1.5fr .9fr; gap:56px; align-items:start; padding-top:64px; padding-bottom:96px; }
@media (max-width:900px){ .itpd-course-layout{ grid-template-columns:1fr; } }
.itpd-course-layout h2{ font-size:22px; margin-top:64px !important; margin-bottom:20px !important; position:relative; padding-bottom:14px; }
.itpd-course-layout h2:first-child{ margin-top:0 !important; }
.itpd-course-layout h2::after{ content:''; position:absolute; left:0; bottom:0; width:40px; height:3px; border-radius:2px; background:var(--accent); }
.itpd-course-layout > div:first-child p{ color:var(--slate); font-size:16px; line-height:1.75; }
.itpd-course-layout ul.itpd-plain-list{ list-style:disc; padding-left:20px; color:var(--slate); font-size:16px; line-height:1.8; }

/* ---- Accordion (native <details>/<summary> — no JS required) ---- */
.itpd-accordion{ border-top:1px solid var(--line); margin-top:8px; }
.itpd-accordion details{ border-bottom:1px solid var(--line); padding:18px 0; }
.itpd-accordion summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px; color:var(--ink); }
.itpd-accordion summary::-webkit-details-marker{ display:none; }
.itpd-accordion summary::after{ content:'+'; flex-shrink:0; font-size:20px; color:var(--primary); font-weight:400; }
.itpd-accordion details[open] summary::after{ content:'–'; }
.itpd-accordion__body{ padding-top:12px; color:var(--slate); font-size:14px; line-height:1.7; max-width:640px; }

/* ---- Sticky enrollment card (hardened with !important — Astra has a history on this
   project of stripping border/background/padding from generic containers) ---- */
.itpd-enroll{ position:sticky !important; top:24px; border:1px solid var(--line) !important; border-radius:2px !important; padding:28px !important; background:#fff !important; display:block !important; }
.itpd-enroll__price-label{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--slate); margin-bottom:6px !important; }
.itpd-enroll__price{ font-family:'Space Grotesk',sans-serif; font-weight:700 !important; font-size:28px !important; color:var(--ink); margin-bottom:18px !important; }

/* ---- Investimento with multiple tiers ("1º lote: R$ 450,00 | 2º lote: ...")
   — stacked labeled rows instead of one crammed inline string. Single-price
   courses are unaffected; this only renders when the field contains "|". ---- */
.itpd-enroll__price-tiers{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.itpd-enroll__price-tier{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-bottom:8px; border-bottom:1px solid var(--line); }
.itpd-enroll__price-tier-label{ font-size:13px; color:var(--slate); }
.itpd-enroll__price-tier-value{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:17px; color:var(--ink); white-space:nowrap; }
.itpd-enroll__price-terms{ font-size:13px; font-weight:400; color:var(--slate); margin-bottom:18px !important; }
.itpd-enroll__cta{ display:block !important; text-align:center; width:100%; margin-bottom:14px !important; }
.itpd-enroll__note{ font-size:12px; color:var(--slate); line-height:1.6; }
.itpd-enroll__note a{ color:var(--secondary); border-bottom:1px solid currentColor; }
.itpd-enroll__cancel{ margin-top:20px !important; padding-top:20px !important; border-top:1px solid var(--line) !important; font-size:13px; color:var(--slate); line-height:1.6; }

/* ---- Docentes team grid — a separate repeatable Image field paired with the
   Docentes text field by row position (this Pods install has no repeatable
   "Group" field type, so name+photo can't be one combined unit per row).
   Portrait photo cards, side by side on desktop; on mobile it becomes a
   horizontal scroll-snap slider (CSS-only, no JS) instead of stacking, so
   browsing several docentes doesn't mean a long vertical scroll. ---- */
.itpd-team-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:20px; margin-top:8px; }
.itpd-team-card__photo{ aspect-ratio:3/4; border-radius:8px; overflow:hidden; background:linear-gradient(135deg,var(--pale),#A9C8ED); margin-bottom:10px; }
.itpd-team-card__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-card__name{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14px; color:var(--ink); margin:0; text-align:center; }
.itpd-team-card__info{ font-size:12px; color:var(--slate); line-height:1.5; margin:4px 0 0; text-align:center; }

/* ---- Docentes without a photo — plain name (+ optional role/bio) rows,
   same component used on Coordenação (instituto.css), duplicated here since
   curso pages don't load that stylesheet. ---- */
.itpd-people{ display:grid; gap:0; margin-top:8px; }
.itpd-person{ padding:16px 0; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:6px; }
.itpd-person__name{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px; color:var(--ink); }
.itpd-person__role{ font-size:13px; color:var(--slate); }

@media (max-width:640px){
  .itpd-team-grid{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:16px; padding-bottom:10px; -webkit-overflow-scrolling:touch; }
  .itpd-team-card{ flex:0 0 130px; scroll-snap-align:start; }
}

/* ---- Conteúdo programático — numbered theme cards mirroring the ITPD
   In Company one-pager's actual design language: dark navy (ink) header bar
   with the number in a bright blue square flush against the bar's left edge
   and the title in white beside it, over a soft light-blue rounded body.
   align-items:start stops grid rows stretching cards taller than their
   content (the dead white space in v1). ---- */
.itpd-theme-grid{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:8px; }
.itpd-theme-card{ border-radius:8px; overflow:hidden; box-shadow:0 2px 12px rgba(1,9,45,.06); }
.itpd-theme-card__head{ display:flex; align-items:stretch; background:var(--ink); min-height:58px; }
.itpd-theme-card__num{ display:flex; align-items:center; justify-content:center; flex-shrink:0; min-width:40px; padding:12px 0; background:var(--primary); font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:13px; color:#fff; }
.itpd-page .itpd-theme-card p.itpd-theme-card__title{ display:flex; align-items:center; padding:10px 14px; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:12px; line-height:1.4; letter-spacing:.01em; text-transform:uppercase; color:#fff !important; margin:0 !important; text-wrap:balance; }
.itpd-theme-card__body{ padding:18px 20px 20px; background:#EFF4FB; }
.itpd-theme-card__body ul{ list-style:disc; padding-left:18px; margin:0; }
.itpd-theme-card__body li{ font-size:14px; color:var(--ink); line-height:1.7; margin-bottom:6px; }
.itpd-theme-card__body li::marker{ color:var(--primary); }
.itpd-theme-card__body li:last-child{ margin-bottom:0; }
.itpd-page .itpd-theme-card .itpd-theme-card__body p{ font-size:14px !important; color:var(--ink) !important; line-height:1.7 !important; margin:0 0 .6em !important; }
.itpd-page .itpd-theme-card .itpd-theme-card__body p:last-child{ margin-bottom:0 !important; }

/* ---- Note panel — light-blue rounded callout for short informational fields
   (Objetivos, Certificação), lifted directly from the PDF's own
   "RECOMENDA-SE DUAS TURMAS" highlight box. Specificity (.itpd-page + class
   + element = 0-2-1) deliberately beats the general course-layout prose rule
   (0-1-2) so panel text keeps its own color. ---- */
.itpd-note-panel{ background:#EFF4FB; border-left:3px solid var(--primary); border-radius:8px; padding:18px 22px; }
.itpd-page .itpd-note-panel p{ color:var(--ink); font-size:15px; line-height:1.7; margin:0 0 .6em; }
.itpd-page .itpd-note-panel p:last-child{ margin-bottom:0; }

/* ---- Anexos — a small grid of attachment cards. Images get a real thumbnail
   preview; anything else (PDFs, docs) gets a generic file icon. Both open in
   a new tab. Matches the surface-card language used elsewhere on this page
   (rounded, soft shadow, hover lift). ---- */
.itpd-anexos-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:16px; margin-top:8px; }
.itpd-anexo-card{ display:block; background:#fff; border:1px solid var(--line); border-radius:8px; overflow:hidden; text-decoration:none; box-shadow:0 2px 10px rgba(1,9,45,.05); transition:transform .2s ease, box-shadow .2s ease; }
.itpd-anexo-card:hover{ transform:translateY(-3px); box-shadow:0 8px 20px rgba(1,9,45,.10); }
.itpd-anexo-card__thumb{ aspect-ratio:4/3; background:var(--pale); }
.itpd-anexo-card__thumb 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-anexo-card__icon{ aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; background:var(--pale); color:var(--primary); }
.itpd-anexo-card__icon svg{ width:34px; height:34px; }
.itpd-anexo-card__name{ display:block; padding:10px 12px; font-size:12px; color:var(--ink); line-height:1.4; word-break:break-word; }