/* =========================================================
   INTERNSHIPS.CSS — Internships page only. Extends careers.css (same
   master careers template: hero-careers, feature-grid, mini-grid,
   flip-grid, timeline-v, dept-grid, story-carousel, faq-grid, cta-band,
   sticky-apply) with the two components unique to this page: the
   internship program card and the simple eligibility checklist.
   Depends on main.css tokens + careers.css primitives.
   ========================================================= */

/* ---------- Section 2: internship program cards ---------- */
.intern-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; margin-top:44px; }
@media (max-width: 1100px){ .intern-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .intern-grid{ grid-template-columns: 1fr; } }

.intern-card{ position:relative; height:100%; border-radius: var(--radius-lg); padding:1px; transition: transform .4s var(--ease); }
.intern-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(140deg, var(--navy-brand), var(--teal) 70%, var(--teal-soft));
  opacity:0; transition: opacity .5s var(--ease);
}
.intern-card:hover{ transform: translateY(-6px); }
.intern-card:hover::before{ opacity:1; }
.intern-card-inner{
  position:relative; z-index:1; height:100%; display:flex; flex-direction:column;
  background: var(--white); border-radius: calc(var(--radius-lg) - 1px);
  padding: 26px 24px; box-shadow: var(--shadow-card); transition: box-shadow .4s var(--ease);
}
.intern-card:hover .intern-card-inner{ box-shadow: var(--shadow-lift); }

.intern-icon{
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center; margin-bottom:14px;
  background: var(--paper-dim); color: var(--teal-deep); font-size:1.15rem; transition: transform .4s var(--ease), background .3s, color .3s;
}
.intern-card:hover .intern-icon{ transform: scale(1.1) rotate(-6deg); background: var(--teal-deep); color:#fff; }
.intern-card h3{ font-size:1rem; margin:0 0 10px; color: var(--ink); }

.intern-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.intern-meta span{
  font-family: var(--f-mono); font-size:.7rem; padding:5px 12px; border-radius:999px;
  background: rgba(10,154,144,.1); color: var(--teal-deep);
}

.intern-desc{ font-size:.86rem; color: var(--slate-soft); line-height:1.55; margin:0 0 14px; }

.intern-outcomes-label{ font-family: var(--f-mono); font-size:.7rem; letter-spacing:.04em; color: var(--slate-soft); text-transform:uppercase; margin-bottom:8px; }
.intern-skills{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.intern-skill{
  font-family: var(--f-mono); font-size:.7rem; padding:5px 12px; border-radius:999px;
  background: var(--paper-dim); color: var(--ink); border:1px solid var(--rule);
}

.intern-mentor{ display:flex; align-items:center; gap:8px; font-size:.8rem; color: var(--slate-soft); margin-bottom:18px; }
.intern-mentor i{ color: var(--teal-deep); }

.intern-footer{ margin-top:auto; padding-top:16px; border-top:1px solid var(--rule); }
.intern-footer .btn{ width:100%; }

/* ---------- Section 8.5: internship application form panel (reuses
   apply-now.css's .field/.upload-zone/.consent-check primitives and
   contact.css's .form-success panel — both loaded on this page
   specifically for this section; own component is just the shell) ---------- */
.intern-form-panel{
  max-width:760px; margin:44px auto 0; background: var(--white); border:1px solid var(--rule);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); padding:44px;
}
@media (max-width: 640px){ .intern-form-panel{ padding:26px 20px; } }
.intern-form-panel [hidden]{ display:none !important; }

/* ---------- Section 6: eligibility checklist ---------- */
.eligibility-panel{
  max-width:760px; margin:36px auto 0; background: var(--white); border:1px solid var(--rule);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding:32px 34px;
}
.eligibility-list{ display:grid; grid-template-columns: repeat(2,1fr); gap:16px 24px; margin:0; padding:0; list-style:none; }
@media (max-width: 640px){ .eligibility-list{ grid-template-columns: 1fr; } }
.eligibility-list li{ display:flex; align-items:center; gap:12px; font-size:.92rem; color: var(--slate); }
.eligibility-list .check-mark{
  flex-shrink:0; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background: rgba(10,154,144,.12); color: var(--teal-deep); font-size:.75rem;
}