/* =======================================================================
   TrainingAndPlacements — pages.css
   Shared components for the individual subpages (About, Trainings,
   Placements, Career Support, Contact). Builds on the tokens and base
   components already defined in main.css.
   ======================================================================= */

/* ---------- breadcrumb + subpage hero ---------- */
.breadcrumb{ display:flex; gap:8px; align-items:center; font-size:.82rem; color: var(--ink-soft); margin-bottom: 22px; }
.breadcrumb a{ color: var(--ink-soft); }
.breadcrumb a:hover{ color: var(--blueprint); }
.breadcrumb span[aria-hidden]{ opacity:.5; }
.breadcrumb strong{ color: var(--ink); font-weight: 600; }

.subpage-hero{ position: relative; padding: 56px 0 64px; border-bottom: 1px solid var(--line); overflow:hidden; }
.subpage-hero__corner{ position:absolute; top:22px; right:28px; width:64px; height:64px; border-top:1.5px solid var(--blueprint); border-right:1.5px solid var(--blueprint); opacity:.35; }
.subpage-hero h1{ font-size: clamp(2.2rem, 4.4vw, 3.6rem); max-width: 16ch; }
.subpage-hero__lede{ font-size: 1.08rem; color: var(--ink-soft); max-width: 56ch; margin-top: 16px; }
.subpage-hero__actions{ display:flex; gap:14px; margin-top: 26px; flex-wrap: wrap; }

/* ---------- vertical timeline (About: milestones) ---------- */
.timeline-vertical{ position: relative; padding-left: 34px; border-left: 1px dashed var(--line); }
.timeline-vertical__item{ position: relative; padding-bottom: 40px; opacity:0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.timeline-vertical__item.in-view{ opacity:1; transform:none; }
.timeline-vertical__item:last-child{ padding-bottom: 0; }
.timeline-vertical__dot{
  position:absolute; left:-40px; top:2px; width:14px; height:14px; border-radius:50%;
  background: var(--paper-raised); border: 2.5px solid var(--blueprint);
}
.timeline-vertical__year{ font-family: var(--font-display); font-size: 1.1rem; color: var(--blueprint); display:block; margin-bottom:6px; }
.timeline-vertical__item h3{ font-size: 1.2rem; margin-bottom: 6px; }
.timeline-vertical__item p{ color: var(--ink-soft); font-size: .95rem; }

/* ---------- values list (About) ---------- */
.values-list{ display:grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.value-item{ background: var(--paper-raised); padding: 30px; display:flex; gap:18px; opacity:0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.value-item.in-view{ opacity:1; transform:none; }
.value-item__icon{ flex: 0 0 auto; width:36px; height:36px; color: var(--blueprint); }
.value-item__icon svg{ width:100%; height:100%; }
.value-item h3{ font-size: 1.1rem; margin-bottom: 6px; }
.value-item p{ font-size: .92rem; color: var(--ink-soft); margin:0; }

/* ---------- team grid (About) ---------- */
.team-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.team-card{ text-align:center; opacity:0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.team-card.in-view{ opacity:1; transform:none; }
.team-card__avatar{
  width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 16px;
  display:flex; align-items:center; justify-content:center;
  background: var(--ink); color: var(--paper); font-family: var(--font-display); font-size: 1.5rem;
  border: 2px solid var(--amber);
}
.team-card h3{ font-size: 1.05rem; margin-bottom: 2px; }
.team-card p{ font-size: .85rem; color: var(--ink-soft); margin: 0; }

/* ---------- trainings filter tabs ---------- */
.trainings-filter{ display:flex; gap: 10px; flex-wrap: wrap; margin-bottom: 34px; }
.trainings-filter button{
  padding: 9px 18px; border: 1px solid var(--line); background: var(--paper-raised);
  font-size: .85rem; font-weight: 600; color: var(--ink-soft);
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.trainings-filter button:hover{ border-color: var(--blueprint); color: var(--ink); }
.trainings-filter button.is-active{ background: var(--ink); border-color: var(--ink); color: var(--paper); }
.catalog-card[hidden]{ display:none; }

/* ---------- "what's included" checklist ---------- */
.checklist{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px 34px; }
.checklist li{ display:flex; gap: 12px; align-items: flex-start; font-size: .96rem; }
.checklist__icon{ flex:0 0 auto; width:22px; height:22px; color: var(--blueprint); margin-top:2px; }
.checklist__icon svg{ width:100%; height:100%; }

/* ---------- placements: direct-employer split ---------- */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:center; }
.split--reverse{ direction: rtl; }
.split--reverse > *{ direction: ltr; }
.split__figure{
  background: var(--paper-raised); border: 1.5px solid var(--ink); padding: 30px;
  box-shadow: 7px 7px 0 rgba(31,78,140,.14);
}
.split__figure .title-block__row{ font-size: .9rem; }

/* ---------- verified-placement proof cards ---------- */
.proof-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.proof-card{
  background: var(--paper-raised); border: 1px solid var(--line); padding: 24px;
  opacity:0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.proof-card.in-view{ opacity:1; transform:none; }
.proof-card__top{ display:flex; align-items:center; gap: 12px; margin-bottom: 16px; }
.proof-card__avatar{
  width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: var(--paper);
  display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-size: 1rem; flex: 0 0 auto;
}
.proof-card__top strong{ display:block; font-size: .95rem; }
.proof-card__top span{ display:block; font-size: .8rem; color: var(--ink-soft); }
.proof-card__tag{
  display:inline-block; font-size: .74rem; font-weight: 700; color: #1b6b4a;
  background: rgba(27,107,74,.09); border: 1px solid rgba(27,107,74,.25);
  padding: 3px 10px; border-radius: var(--radius);
}

/* ---------- support grid (Career Support) ---------- */
.support-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.support-card{
  background: var(--paper-raised); border: 1px solid var(--line); padding: 28px;
  opacity:0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.support-card.in-view{ opacity:1; transform:none; }
.support-card__icon{ width:38px; height:38px; color: var(--blueprint); margin-bottom: 16px; }
.support-card__icon svg{ width:100%; height:100%; }
.support-card h3{ font-size: 1.1rem; margin-bottom: 8px; }
.support-card p{ font-size: .92rem; color: var(--ink-soft); margin:0; }

/* ---------- FAQ accordion ---------- */
.faq{ max-width: 760px; }
.faq details{ border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary{
  cursor: pointer; list-style: none; display:flex; justify-content: space-between; align-items:center;
  gap: 20px; font-family: var(--font-display); font-size: 1.15rem; color: var(--ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; font-size: 1.6rem; color: var(--blueprint); line-height: 1; flex: 0 0 auto;
  transition: transform .25s var(--ease);
}
.faq details[open] summary::after{ content:"\2212"; }
.faq p{ margin: 14px 0 0; color: var(--ink-soft); max-width: 68ch; }

/* ---------- contact page ---------- */
.contact-grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 50px; align-items: start; }
.contact-form{ display:grid; gap: 18px; }
.contact-form .form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field{ display:flex; flex-direction: column; gap: 6px; }
.form-field label{ font-size: .84rem; font-weight: 600; color: var(--ink-soft); }
.form-field input,
.form-field select,
.form-field textarea{
  border: 1px solid var(--line); background: var(--paper-raised); padding: 12px 14px;
  font-family: inherit; font-size: .96rem; color: var(--ink); border-radius: var(--radius);
  transition: border-color .2s var(--ease);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{ outline:none; border-color: var(--blueprint); }
.form-field textarea{ resize: vertical; min-height: 120px; }
.form-honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-status{ padding: 14px 16px; border-radius: var(--radius); font-size: .92rem; margin-bottom: 6px; }
.form-status--sent{ background: rgba(27,107,74,.09); border: 1px solid rgba(27,107,74,.3); color: #1b6b4a; }
.form-status--error{ background: rgba(198,64,54,.08); border: 1px solid rgba(198,64,54,.3); color: #a83b30; }

.contact-info{ background: var(--ink); color: var(--paper); padding: 30px; }
.contact-info h3{ color: var(--paper); font-size: 1.2rem; margin-bottom: 18px; }
.contact-info__row{ padding: 14px 0; border-top: 1px solid var(--line-on-ink); }
.contact-info__row:first-of-type{ border-top: 0; }
.contact-info__row span{ display:block; font-size: .78rem; color: rgba(238,241,239,.55); margin-bottom: 4px; }
.contact-info__row strong{ font-weight: 600; font-size: .98rem; }
.contact-info__row a{ color: var(--paper); }
.contact-info__row a:hover{ color: var(--amber); }

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .values-list, .proof-grid, .support-grid, .checklist{ grid-template-columns: 1fr 1fr; }
  .team-grid{ grid-template-columns: repeat(2, 1fr); }
  .split, .contact-grid{ grid-template-columns: 1fr; }
  .split--reverse{ direction: ltr; }
  .split--reverse .split__figure{ order: -1; }
}
@media (max-width: 760px){
  .values-list, .proof-grid, .support-grid, .checklist, .team-grid{ grid-template-columns: 1fr; }
  .contact-form .form-row{ grid-template-columns: 1fr; }
}