/**
 * GME program pages.
 *
 * Taken from the approved mockup, minus the top bar and main nav, which the
 * Civic theme already provides. Everything is scoped under .gme-program so
 * it cannot leak onto the rest of the site.
 */

.gme-program {
  --navy: #003469;
  --navy-dark: #003469;
  --navy-light: #2a5298;
  --accent: #8DC63F;
  --accent-dark: #6B9E2A;
  --bg: #f4f6f9;
  --white: #ffffff;
  --text: #2c3e50;
  --muted: #6c757d;
  --border: #e2e8f0;

  font-family: 'Open Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
}

.gme-program * { box-sizing: border-box; }

/* PAGE HERO */
.gme-program .page-hero { background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 60%, var(--navy-light) 100%); padding: 3.5rem 0 3rem; position: relative; overflow: hidden; }
.gme-program .page-hero::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.gme-program .hero-breadcrumb { font-size: 0.875rem; color: rgba(255,255,255,0.6); margin-bottom: 0.75rem; letter-spacing: 0.03em; position: relative; }
.gme-program .hero-breadcrumb a { color: rgba(255,255,255,0.6); text-decoration: none; }
.gme-program .hero-breadcrumb a:hover { color: #fff; }
.gme-program .hero-breadcrumb span { margin: 0 0.4rem; }
.gme-program .hero-dept-tag { display: inline-flex; align-items: center; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); border-radius: 20px; color: rgba(255,255,255,0.85); font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 12px; margin-bottom: 1rem; position: relative; }
.gme-program .hero-dept-tag i { margin-right: 6px; }
.gme-program .page-hero h1 { font-family: 'Open Sans', sans-serif; font-weight: 800; font-size: 2.6rem; color: #fff; line-height: 1.15; margin-bottom: 0.5rem; letter-spacing: -0.01em; position: relative; }
.gme-program .page-hero h1 span { color: var(--accent); }
.gme-program .page-hero .hero-sub { font-size: 1rem; color: rgba(255,255,255,0.75); font-weight: 400; margin-bottom: 1.75rem; max-width: 560px; }
.gme-program .hero-meta { display: flex; flex-wrap: wrap; gap: 1.5rem; position: relative; margin-top: 1.25rem; }
.gme-program .hero-meta-item { display: flex; align-items: center; color: rgba(255,255,255,0.8); font-size: 0.9rem; }
.gme-program .hero-meta-item i { color: var(--accent); margin-right: 7px; font-size: 0.9rem; }
.gme-program .hero-stats { display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-end; position: relative; }
.gme-program .hero-stat-card { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 10px; padding: 0.85rem 1.25rem; text-align: center; width: 160px; }
.gme-program .hero-stat-card .stat-num { font-size: 1.8rem; font-weight: 800; color: #fff; line-height: 1; }
.gme-program .hero-stat-card .stat-label { font-size: 0.875rem; color: rgba(255,255,255,0.65); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; }

/* SUBNAV */
.gme-program .subnav { background: var(--white); border-bottom: 2px solid var(--border); position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.gme-program .subnav-inner { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.gme-program .subnav-inner::-webkit-scrollbar { display: none; }
.gme-program .subnav-link { display: flex; align-items: center; gap: 6px; padding: 0.9rem 1.1rem; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; transition: color 0.15s, border-color 0.15s; margin-bottom: -2px; }
.gme-program .subnav-link i { font-size: 0.875rem; }
.gme-program .subnav-link:hover, .gme-program .subnav-link.active { color: var(--navy); border-bottom-color: var(--navy); text-decoration: none; }
.gme-program .subnav-mobile { display: none; padding: 0.6rem 1rem; }
.gme-program .subnav-mobile-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; background: #eef2f7; border: 1px solid var(--border); border-radius: 6px; padding: 0.65rem 1rem; font-size: 0.875rem; font-weight: 700; color: var(--navy); cursor: pointer; font-family: 'Open Sans', sans-serif; text-transform: uppercase; letter-spacing: 0.05em; }
.gme-program .subnav-mobile-btn i { font-size: 0.875rem; transition: transform 0.2s; }
.gme-program .subnav-mobile-btn.open i { transform: rotate(180deg); }
.gme-program .subnav-dropdown { display: none; background: var(--white); border: 1px solid var(--border); border-top: none; border-radius: 0 0 6px 6px; overflow: hidden; }
.gme-program .subnav-dropdown.open { display: block; }
.gme-program .subnav-dropdown a { display: flex; align-items: center; gap: 10px; padding: 0.75rem 1rem; font-size: 1rem; font-weight: 600; color: var(--text); text-decoration: none; border-bottom: 1px solid #f0f0f0; transition: background 0.15s; }
.gme-program .subnav-dropdown a:last-child { border-bottom: none; }
.gme-program .subnav-dropdown a:hover { background: #f7f9fc; color: var(--navy); }
.gme-program .subnav-dropdown a i { color: var(--navy); width: 16px; text-align: center; font-size: 0.9rem; }
@media (max-width: 768px) {
  .gme-program .subnav-inner { display: none; }
  .gme-program .subnav-mobile { display: block; }
}

/* SHARED */
.gme-program .section-wrap { padding: 3.5rem 0; border-bottom: 1px solid var(--border); }
.gme-program .section-wrap:last-child { border-bottom: none; }
.gme-program .section-header { border-left: 4px solid var(--navy); padding-left: 1rem; margin-bottom: 2rem; }
.gme-program .section-header h2 { font-family: 'Open Sans', sans-serif; font-weight: 800; color: var(--navy); font-size: 1.5rem; margin-bottom: 0.2rem; }
.gme-program .section-header p { color: var(--muted); font-size: 1rem; margin: 0; }

/* WELCOME */
.gme-program .letter-card { background: var(--white); border-radius: 10px; box-shadow: 0 2px 14px rgba(0,0,0,0.07); padding: 2rem 2.25rem; position: relative; border-top: 4px solid var(--navy); }
.gme-program .letter-heading { font-size: 1.65rem; font-weight: 800; color: var(--navy); font-family: 'Playwrite IE', cursive; margin-bottom: 1.25rem; letter-spacing: -0.01em; }
.gme-program .letter-director { display: flex; align-items: center; gap: 1.25rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid #edf0f5; }
.gme-program .director-photo { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 3px solid #edf0f5; }
.gme-program .director-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.gme-program .director-info h5 { color: var(--navy); font-weight: 700; font-size: 1rem; margin: 0 0 2px; }
.gme-program .director-info p { color: var(--muted); font-size: 0.9rem; margin: 0; }
.gme-program .letter-body p { font-size: 1rem; color: #444; line-height: 1.85; margin-bottom: 1rem; }
.gme-program .letter-body p:last-child { margin-bottom: 0; }
.gme-program .letter-sig { font-weight: 700; color: var(--navy); font-size: 1rem; margin-top: 1.25rem; font-style: italic; }
.gme-program .quote-mark { font-size: 5rem; color: #edf0f5; line-height: 0; position: absolute; top: 2.5rem; right: 2rem; font-family: Georgia, serif; pointer-events: none; }
.gme-program .welcome-panel { display: flex; flex-direction: column; gap: 1.25rem; }
.gme-program .welcome-collage { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gme-program .collage-item { border-radius: 8px; overflow: hidden; }
.gme-program .collage-tint { position: relative; overflow: hidden; height: 100%; }
.gme-program .collage-tint img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 3; }
.gme-program .collage-tint::after { content: ''; position: absolute; inset: 0; background: var(--tint); mix-blend-mode: multiply; opacity: 0.75; }
.gme-program .welcome-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gme-program .welcome-stat { background: var(--navy); border-radius: 8px; padding: 0.85rem 0.5rem; text-align: center; }
.gme-program .welcome-stat-num { font-size: 1.1rem; font-weight: 800; color: #fff; line-height: 1; }
.gme-program .welcome-stat-label { font-size: 0.875rem; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; }
.gme-program .welcome-facts { display: flex; flex-direction: column; gap: 0.5rem; }
.gme-program .welcome-fact { display: flex; align-items: center; gap: 0.65rem; font-size: 0.9rem; color: var(--text); }
.gme-program .welcome-fact i { color: var(--navy); width: 14px; font-size: 0.875rem; flex-shrink: 0; }
.gme-program .section-header h2 i,
.gme-program .didactics-card h5 i,
.gme-program .card-header i,
.gme-program .hero-dept-tag i,
.gme-program .hero-meta-item i,
.gme-program .subnav-link i,
.gme-program .pay-note i { margin-right: 0.5rem; }

/* CURRICULUM */
.gme-program .overview-card { background: var(--navy); border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); padding: 1.5rem 1.75rem; margin-bottom: 2rem; }
.gme-program .overview-card p { font-size: 1rem; color: rgba(255,255,255,0.85); line-height: 1.8; margin: 0; }
.gme-program .pgy-nav { display: flex; gap: 4px; margin-bottom: 0; flex-wrap: wrap; }
.gme-program .pgy-btn { background: #eef2f7; border: 1px solid var(--border); border-bottom: none; border-radius: 6px 6px 0 0; color: var(--muted); font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.65rem 1.4rem; cursor: pointer; transition: background 0.15s, color 0.15s; font-family: 'Open Sans', sans-serif; }
.gme-program .pgy-btn:nth-child(1):hover { background: #d0ddf0; color: #1B3A6B; }
.gme-program .pgy-btn:nth-child(2):hover { background: #c8e8e8; color: #0d6e6e; }
.gme-program .pgy-btn:nth-child(3):hover { background: #c8e5ca; color: #2e7d32; }
.gme-program .pgy-btn:nth-child(1).active { background: #1B3A6B; color: #fff; border-color: #1B3A6B; }
.gme-program .pgy-btn:nth-child(2).active { background: #0d6e6e; color: #fff; border-color: #0d6e6e; }
.gme-program .pgy-btn:nth-child(3).active { background: #2e7d32; color: #fff; border-color: #2e7d32; }
.gme-program .pgy-btn:nth-child(n+4).active { background: var(--navy); color: #fff; border-color: var(--navy); }
.gme-program .tab-wrap { background: var(--white); border: 2px solid #1B3A6B; border-radius: 0 8px 8px 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); padding: 1.5rem; transition: border-color 0.15s; }
.gme-program .tab-wrap.pgy2-active { border-color: #0d6e6e; }
.gme-program .tab-wrap.pgy3-active { border-color: #2e7d32; }
.gme-program .pgy-panel { display: none; }
.gme-program .pgy-panel.active { display: block; }
.gme-program .pgy-intro { font-size: 0.9rem; color: #555; line-height: 1.7; margin-bottom: 1rem; }
.gme-program .pgy-intro p:last-child { margin-bottom: 0; }
.gme-program .rotation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.gme-program .rotation-item { background: #e8f0fb; border: 1px solid #b5caf0; border-radius: 6px; padding: 0.55rem 0.85rem; font-size: 0.9rem; color: #122848; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.gme-program .rotation-item i { color: #1B3A6B; font-size: 0.875rem; flex-shrink: 0; }
.gme-program .rotation-name { flex: 1 1 auto; min-width: 0; }
.gme-program .pgy-panel:nth-child(2) .rotation-item { background: #e0f4f1; border-color: #9fd5cf; color: #084f4f; }
.gme-program .pgy-panel:nth-child(2) .rotation-item i { color: #0d6e6e; }
.gme-program .pgy-panel:nth-child(3) .rotation-item { background: #e6f4ea; border-color: #9fd3a5; color: #1a4d1d; }
.gme-program .pgy-panel:nth-child(3) .rotation-item i { color: #2e7d32; }
.gme-program .rotation-item.elective { background: #f0fbea; border-color: #8DC63F; color: #3a5c10; }
.gme-program .rotation-item.elective i { color: var(--accent-dark); }
.gme-program .elective-badge { display: inline-block; background: var(--accent); color: #fff; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 3px; padding: 2px 6px; flex-shrink: 0; margin-left: auto; }
.gme-program .legend { display: flex; gap: 1.25rem; margin-top: 1rem; flex-wrap: wrap; }
.gme-program .legend-item { display: flex; align-items: center; font-size: 0.9rem; color: var(--muted); }
.gme-program .legend-dot { width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; }
.gme-program .didactics-card { background: var(--navy-dark); border-radius: 8px; padding: 1.25rem 1.5rem; margin-top: 2rem; }
.gme-program .didactics-card h5 { color: #fff; font-size: 1rem; font-weight: 700; margin-bottom: 0.85rem; }
.gme-program .didactics-card h5 i { color: var(--accent); margin-right: 0.5rem; }
.gme-program .didactic-item { display: flex; align-items: flex-start; font-size: 0.9rem; color: rgba(255,255,255,0.75); margin-bottom: 0.5rem; gap: 0.6rem; }
.gme-program .didactic-item i { color: var(--accent); width: 16px; text-align: center; flex-shrink: 0; margin-top: 0.2em; }

/* STAFF */
.gme-program .staff-card { background: var(--white); border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.07); overflow: hidden; transition: transform 0.15s; display: flex; flex-direction: column; height: 100%; }
.gme-program .staff-card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,0.1); }
.gme-program .staff-avatar-wrap { background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy-light) 100%); height: 360px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; flex-shrink: 0; }
.gme-program .staff-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.gme-program .staff-avatar { width: 80px; height: 80px; border-radius: 50%; background: rgba(255,255,255,0.2); border: 3px solid rgba(255,255,255,0.45); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1.4rem; font-weight: 800; flex-shrink: 0; }
.gme-program .staff-body { padding: 1rem 1rem 1.25rem; text-align: center; display: flex; flex-direction: column; align-items: center; flex: 1; }
.gme-program .staff-name { font-weight: 700; color: var(--navy); font-size: 0.9rem; margin-bottom: 3px; }
.gme-program .staff-title { font-size: 0.875rem; color: var(--muted); margin-bottom: 6px; line-height: 1.4; flex: 1; }
.gme-program .staff-specialty { display: inline-block; background: #eef2f7; color: var(--navy); font-size: 0.875rem; font-weight: 600; border-radius: 3px; padding: 2px 8px; margin-top: auto; }

/* RESIDENTS */
.gme-program .pgy-group { margin-bottom: 2.5rem; }
.gme-program .pgy-group:last-child { margin-bottom: 0; }
.gme-program .pgy-group-1 .pgy-label { background: #1B3A6B; }
.gme-program .pgy-group-1 .resident-card { border-top: 3px solid #1B3A6B; }
.gme-program .pgy-group-1 .resident-photo--empty { background: #e8f0fb; }
.gme-program .pgy-group-1 .resident-photo--empty i { color: #1B3A6B; }
.gme-program .pgy-group-2 .pgy-label { background: #0d6e6e; }
.gme-program .pgy-group-2 .resident-card { border-top: 3px solid #0d6e6e; }
.gme-program .pgy-group-2 .resident-photo--empty { background: #e0f4f1; }
.gme-program .pgy-group-2 .resident-photo--empty i { color: #0d6e6e; }
.gme-program .pgy-group-3 .pgy-label { background: #2e7d32; }
.gme-program .pgy-group-3 .resident-card { border-top: 3px solid #2e7d32; }
.gme-program .pgy-group-3 .resident-photo--empty { background: #e6f4ea; }
.gme-program .pgy-group-3 .resident-photo--empty i { color: #2e7d32; }
.gme-program .pgy-label { display: inline-flex; align-items: center; background: var(--navy); color: #fff; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; border-radius: 4px; padding: 6px 14px; margin-bottom: 1rem; }
.gme-program .resident-card { background: var(--white); border-radius: 8px; border: 1px solid #e8eef5; overflow: hidden; text-align: center; transition: box-shadow 0.15s; display: flex; flex-direction: column; height: 100%; }
.gme-program .resident-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.1); }
.gme-program .resident-photo { width: 100%; height: 205px; overflow: hidden; position: relative; flex-shrink: 0; }
.gme-program .resident-photo img { width: 100%; height: 205px; object-fit: cover; object-position: center top; display: block; }
.gme-program .resident-photo--empty { display: flex; align-items: center; justify-content: center; background: #eef2f7; }
.gme-program .resident-photo--empty i { font-size: 3.5rem; color: var(--navy); }
.gme-program .resident-info { padding: 0.65rem 0.5rem 0.85rem; flex: 1; display: flex; flex-direction: column; justify-content: flex-start; }
.gme-program .resident-name { font-weight: 700; color: var(--text); font-size: 0.9rem; margin-bottom: 2px; }
.gme-program .resident-school { font-size: 0.875rem; color: var(--muted); }

/* SALARY */
.gme-program .salary-card { border: none; border-radius: 10px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); overflow: hidden; }
.gme-program .salary-card .card-header { background: var(--navy); color: #fff; font-weight: 700; font-size: 1rem; padding: 0.85rem 1.25rem; }
.gme-program .salary-card .card-header i { margin-right: 0.5rem; opacity: 0.85; }
.gme-program .salary-table { margin: 0; }
.gme-program .salary-table thead th { background: #eef2f7; color: var(--navy); font-weight: 700; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2px solid #d0dae8; }
.gme-program .salary-table tbody tr:last-child td { border-bottom: none; }
.gme-program .salary-table tbody td { font-size: 1rem; vertical-align: middle; padding: 0.65rem 1rem; }
.gme-program .salary-table tbody tr:hover { background: #f0f5ff; }
.gme-program .pgy-badge { display: inline-block; background: var(--navy); color: #fff; border-radius: 4px; font-size: 0.875rem; font-weight: 700; padding: 2px 8px; min-width: 46px; text-align: center; }
.gme-program .salary-amount { font-weight: 700; color: var(--navy); }
.gme-program .pay-note { font-size: 0.875rem; color: var(--muted); padding: 0.65rem 1rem; border-top: 1px solid var(--border); background: #fafbfc; }
.gme-program .pay-note i { color: var(--navy); margin-right: 0.4rem; }
.gme-program .benefits-card { border: none; border-radius: 10px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); overflow: hidden; }
.gme-program .benefits-card .card-header { background: var(--navy); color: #fff; font-weight: 700; font-size: 1rem; padding: 0.85rem 1.25rem; }
.gme-program .benefits-card .card-header i { margin-right: 0.5rem; opacity: 0.85; }
.gme-program .benefit-item { display: flex; align-items: flex-start; padding: 0.65rem 1.25rem; border-bottom: 1px solid #f5f5f5; font-size: 1rem; background: var(--white); }
.gme-program .benefit-item:last-child { border-bottom: none; }
.gme-program .benefit-icon { width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; margin-right: 0.85rem; flex-shrink: 0; font-size: 0.9rem; }
.gme-program .bi-blue { background: #e8f0fb; color: var(--navy); }
.gme-program .bi-teal { background: #e0f4f1; color: #0d6e6e; }
.gme-program .bi-green { background: #e6f4ea; color: #2e7d32; }
.gme-program .bi-orange { background: #fff3e0; color: #e65100; }
.gme-program .bi-pink { background: #fce4ec; color: #c2185b; }
.gme-program .bi-purple { background: #ede7f6; color: #6a1b9a; }
.gme-program .benefit-label { font-weight: 700; color: var(--text); font-size: 0.9rem; }
.gme-program .benefit-detail { color: var(--muted); font-size: 0.875rem; margin-top: 1px; }
.gme-program .docs-section { margin-top: 2rem; background: var(--navy-dark); border-radius: 10px; padding: 1.75rem 2rem; }
.gme-program .docs-section-header { display: flex; align-items: flex-start; gap: 0.85rem; margin-bottom: 1.25rem; }
.gme-program .docs-section-header h5 { color: #fff; font-size: 1rem; font-weight: 700; margin: 0; }
.gme-program .docs-section-header p { color: rgba(255,255,255,0.55); font-size: 0.875rem; margin: 0; }
/* The Bootstrap columns are not flex, so height:100% on the card alone does
   nothing. Making the column a flex parent is what equalises the heights. */
.gme-program .docs-section .row > [class*="col"] { display: flex; }
.gme-program .doc-card { display: flex; align-items: center; gap: 0.85rem; width: 100%; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: 0.9rem 1.1rem; text-decoration: none; transition: background 0.15s, border-color 0.15s; }
.gme-program .doc-card:hover { background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.25); text-decoration: none; }
.gme-program .doc-card-icon { width: 40px; height: 40px; border-radius: 6px; background: rgba(229,115,115,0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gme-program .doc-card-text { flex: 1; }
.gme-program .doc-card-title { color: #fff; font-size: 0.875rem; font-weight: 600; line-height: 1.4; margin-bottom: 2px; }
.gme-program .doc-card-sub { color: rgba(255,255,255,0.45); font-size: 0.875rem; }

/* QUALITY FLOOR */
.gme-program a:focus-visible,
.gme-program button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* RESPONSIVE */
@media (max-width: 768px) {
  .gme-program .page-hero h1 { font-size: 1.8rem; }
  .gme-program .hero-stats { flex-direction: row; align-items: flex-start; }
  .gme-program .hero-stat-card { min-width: 110px; }
  .gme-program .rotation-grid { grid-template-columns: 1fr 1fr; }
  .gme-program .staff-avatar-wrap { height: 240px; }
}
@media (max-width: 480px) {
  .gme-program .rotation-grid { grid-template-columns: 1fr; }
  .gme-program .letter-director { flex-direction: column; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .gme-program * { transition: none !important; animation: none !important; }
}

/* ---------- Font Awesome, JS version ----------
   The site loads Font Awesome's JS build, which replaces every <i> with an
   inline <svg>. Rules that target `i` alone stop matching once that runs, so
   every icon rule below names both elements. Inline SVG uses
   fill="currentColor", so `color` works on it exactly as it did on the font. */

.gme-program i,
.gme-program svg.svg-inline--fa { flex-shrink: 0; }

/* Spacing. Set on the icon rather than the flex parent so it also works in
   the headings, which are not flex containers. */
.gme-program .section-header h2 > i,
.gme-program .section-header h2 > svg,
.gme-program .didactics-card h5 > i,
.gme-program .didactics-card h5 > svg,
.gme-program .card-header > i,
.gme-program .card-header > svg,
.gme-program .hero-dept-tag > i,
.gme-program .hero-dept-tag > svg,
.gme-program .hero-meta-item > i,
.gme-program .hero-meta-item > svg,
.gme-program .subnav-link > i,
.gme-program .subnav-link > svg,
.gme-program .pay-note > i,
.gme-program .pay-note > svg { margin-right: 0.5rem; }

/* Curriculum */
.gme-program .rotation-item > i,
.gme-program .rotation-item > svg { color: #1B3A6B; font-size: 0.875rem; }
.gme-program .pgy-panel:nth-child(2) .rotation-item > i,
.gme-program .pgy-panel:nth-child(2) .rotation-item > svg { color: #0d6e6e; }
.gme-program .pgy-panel:nth-child(3) .rotation-item > i,
.gme-program .pgy-panel:nth-child(3) .rotation-item > svg { color: #2e7d32; }
.gme-program .rotation-item.elective > i,
.gme-program .rotation-item.elective > svg { color: var(--accent-dark); }

.gme-program .didactic-item > i,
.gme-program .didactic-item > svg { color: var(--accent); width: 16px; margin-top: 0.2em; }
.gme-program .didactics-card h5 > i,
.gme-program .didactics-card h5 > svg { color: var(--accent); }

/* Welcome panel */
.gme-program .welcome-fact > i,
.gme-program .welcome-fact > svg { color: var(--navy); width: 14px; font-size: 0.875rem; }

/* Hero */
.gme-program .hero-meta-item > i,
.gme-program .hero-meta-item > svg,
.gme-program .hero-dept-tag > i,
.gme-program .hero-dept-tag > svg { color: var(--accent); font-size: 0.9rem; }

/* Documents, on the dark panel */
.gme-program .docs-section-header > i,
.gme-program .docs-section-header > svg { color: #8DC63F; font-size: 1.4rem; line-height: 1.4; }
.gme-program .doc-card-icon i,
.gme-program .doc-card-icon svg { color: #ff9a9a; font-size: 1.15rem; }

/* Salary and benefits card headers sit on navy */
.gme-program .card-header > i,
.gme-program .card-header > svg { color: #fff; opacity: 0.85; }
.gme-program .pay-note > i,
.gme-program .pay-note > svg { color: var(--navy); }
.gme-program .benefit-icon i,
.gme-program .benefit-icon svg { color: inherit; }

/* Subnav */
.gme-program .subnav-link > i,
.gme-program .subnav-link > svg,
.gme-program .subnav-dropdown a > i,
.gme-program .subnav-dropdown a > svg { color: inherit; font-size: 0.875rem; }
.gme-program .subnav-dropdown a > i,
.gme-program .subnav-dropdown a > svg { color: var(--navy); width: 16px; }
.gme-program .subnav-mobile-btn > i:last-child,
.gme-program .subnav-mobile-btn > svg:last-child { transition: transform 0.2s; }
.gme-program .subnav-mobile-btn.open > i:last-child,
.gme-program .subnav-mobile-btn.open > svg:last-child { transform: rotate(180deg); }

/* Residents placeholder */
.gme-program .resident-photo--empty i,
.gme-program .resident-photo--empty svg { font-size: 3.5rem; }

/* ---------- Long-form curriculum ----------
   Family Medicine's curriculum is a list of block rotations, so its year
   panels are one short paragraph plus chips. Neurosurgery's is several
   hundred words with Academic Skills and Clinical Skills subsections. The
   panel has to read well either way. */
.gme-program .pgy-intro { font-size: 0.95rem; color: #444; line-height: 1.75; }
.gme-program .pgy-intro > *:first-child { margin-top: 0; }
.gme-program .pgy-intro > *:last-child { margin-bottom: 0; }
.gme-program .pgy-intro p { margin: 0 0 1rem; max-width: 78ch; }
.gme-program .pgy-intro h3,
.gme-program .pgy-intro h4,
.gme-program .pgy-intro h5 {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 1.5rem 0 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border);
  max-width: 78ch;
}
.gme-program .pgy-intro ul,
.gme-program .pgy-intro ol { margin: 0 0 1rem; padding-left: 1.25rem; max-width: 78ch; }
.gme-program .pgy-intro li { margin-bottom: 0.35rem; }
.gme-program .pgy-intro strong { color: var(--navy); }

/* When a year has rotation chips as well, keep them clear of the prose. */
.gme-program .pgy-intro + .rotation-grid { margin-top: 1.25rem; }

/* ---------- Prose curriculum years ----------
   Programs whose curriculum is written as prose rather than block rotations
   get a two column treatment. The first paragraph is the rotation summary
   and spans both columns; each subheading starts a new column. Short years
   with rotation chips are untouched. */
.gme-program .pgy-intro.has-sections { columns: 2; column-gap: 2.25rem; }

.gme-program .pgy-intro.has-sections > p:first-child {
  column-span: all;
  background: #e8f0fb;
  border-radius: 8px;
  padding: 0.85rem 1rem;
  margin-bottom: 1.5rem;
  color: #122848;
  font-size: 0.9rem;
  max-width: none;
}

.gme-program .pgy-intro.has-sections h2,
.gme-program .pgy-intro.has-sections h3,
.gme-program .pgy-intro.has-sections h4,
.gme-program .pgy-intro.has-sections h5 { break-before: column; margin-top: 0; }

.gme-program .pgy-intro.has-sections h2:first-of-type,
.gme-program .pgy-intro.has-sections h3:first-of-type,
.gme-program .pgy-intro.has-sections h4:first-of-type,
.gme-program .pgy-intro.has-sections h5:first-of-type { break-before: auto; }

.gme-program .pgy-intro.has-sections p,
.gme-program .pgy-intro.has-sections li { break-inside: avoid; }

@media (max-width: 860px) {
  .gme-program .pgy-intro.has-sections { columns: 1; }
  .gme-program .pgy-intro.has-sections h2,
  .gme-program .pgy-intro.has-sections h3,
  .gme-program .pgy-intro.has-sections h4,
  .gme-program .pgy-intro.has-sections h5 { break-before: auto; margin-top: 1.5rem; }
}

/* Seven tabs need to breathe less than three. */
.gme-program .pgy-nav { row-gap: 4px; }
@media (max-width: 700px) {
  .gme-program .pgy-btn { padding: 0.55rem 0.9rem; font-size: 0.8rem; }
}

/* Didactics list. Columns rather than a Bootstrap row, so a short list runs
   full width instead of leaving an empty column beside it. */
.gme-program .didactics-list.is-split { columns: 2; column-gap: 2rem; }
.gme-program .didactics-list .didactic-item { break-inside: avoid; }
.gme-program .didactic-item > span { flex: 1 1 auto; min-width: 0; }
@media (max-width: 768px) {
  .gme-program .didactics-list.is-split { columns: 1; }
}

/* A bold-only paragraph is how a pasted Word heading arrives. Treat it as a
   section start so the two column curriculum layout still works. */
.gme-program .pgy-intro.has-sections > p:has(> strong:only-child) {
  break-before: column;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border);
}
.gme-program .pgy-intro.has-sections > p:has(> strong:only-child) strong { font-weight: inherit; }
.gme-program .pgy-intro.has-sections > p:first-child:has(> strong:only-child) { break-before: auto; }

/* ---------- Missing portraits ----------
   A silhouette drawn as a background image, so it does not depend on Font
   Awesome and survives a broken file just as well as an empty field. The
   `is-missing` class is set by the template when there is no file, and by
   gme-program.js when an image fails to load. */
.gme-program .director-photo.is-missing,
.gme-program .staff-avatar-wrap.is-missing,
.gme-program .resident-photo.is-missing,
.gme-program .contact-avatar.is-missing {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23ffffff' fill-opacity='0.55'%3E%3Ccircle cx='32' cy='23' r='11'/%3E%3Cpath d='M32 38c-11 0-20 7-20 15.5V60h40v-6.5C52 45 43 38 32 38z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center 58%;
  background-size: 62%;
}

.gme-program .director-photo.is-missing {
  background-color: #dbe4ef;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23003469' fill-opacity='0.5'%3E%3Ccircle cx='32' cy='23' r='11'/%3E%3Cpath d='M32 38c-11 0-20 7-20 15.5V60h40v-6.5C52 45 43 38 32 38z'/%3E%3C/g%3E%3C/svg%3E");
}

.gme-program .resident-photo.is-missing { background-color: #eef2f7; }
.gme-program .pgy-group-1 .resident-photo.is-missing { background-color: #e8f0fb; }
.gme-program .pgy-group-2 .resident-photo.is-missing { background-color: #e0f4f1; }
.gme-program .pgy-group-3 .resident-photo.is-missing { background-color: #e6f4ea; }
.gme-program .resident-photo.is-missing {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23003469' fill-opacity='0.35'%3E%3Ccircle cx='32' cy='23' r='11'/%3E%3Cpath d='M32 38c-11 0-20 7-20 15.5V60h40v-6.5C52 45 43 38 32 38z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 55%;
}

/* Hide the alt text of an image that failed before JS runs. */
.gme-program .is-missing img { display: none; }

/* ---------- Long director letters ----------
   Collapsed only when the letter is genuinely long, measured in JS. Without
   JS the letter renders in full, which is the safe failure. */
.gme-program .letter-body.is-clamped {
  max-height: 460px;
  overflow: hidden;
  position: relative;
}
.gme-program .letter-body.is-clamped::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 110px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--white) 88%);
  pointer-events: none;
}
.gme-program .letter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.85rem;
  padding: 0.5rem 1.1rem;
  background: transparent;
  border: 1px solid var(--navy);
  border-radius: 6px;
  color: var(--navy);
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.gme-program .letter-toggle:hover { background: var(--navy); color: #fff; }
.gme-program .letter-toggle i,
.gme-program .letter-toggle svg { font-size: 0.75rem; transition: transform 0.2s; }
.gme-program .letter-toggle[aria-expanded="true"] i,
.gme-program .letter-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }