/* ============================================================
   css/main.css
   MASTER STYLESHEET — IMPORT ORDER
   ─────────────────────────────────────────────────────────────
   This is the only stylesheet linked in index.html.
   Import order matters: variables → reset → base → components → sections.
   ============================================================ */

/* ── 1. Design tokens ── */
@import 'global/variables.css';

/* ── 2. Reset ── */
@import 'global/reset.css';

/* ── 3. Typography & base text styles ── */
@import 'global/typography.css';

/* ── 4. Layout utilities ── */
@import 'global/utilities.css';

/* ── 5. Reusable components ── */
@import 'components/buttons.css';
@import 'components/cards.css';
@import 'components/navbar.css';
@import 'components/footer.css';
@import 'components/forms.css';

/* ── 6. Section-specific styles ── */
@import 'sections/hero.css';
@import 'sections/academics.css';
@import 'sections/people.css';
@import 'sections/disclosures.css';

/* ═══════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS — GLOBAL OVERRIDES
   Place section-specific breakpoints in their own files.
═══════════════════════════════════════════════ */
.popup-overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.8);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:99999;
}

.popup-box{
    position:relative;
    max-width:850px;
    width:90%;
    animation:popup 0.4s ease;
}

.popup-box img{
    width:100%;
    border-radius:15px;
    display:block;
    box-shadow:0 10px 40px rgba(0,0,0,0.4);
}

.close-btn{
    position:absolute;
    top:-15px;
    right:-15px;
    width:40px;
    height:40px;
    background:#e30613;
    color:#fff;
    border-radius:50%;
    text-align:center;
    line-height:40px;
    font-size:24px;
    cursor:pointer;
    font-weight:bold;
}

@keyframes popup{
    from{
        opacity:0;
        transform:scale(0.8);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

@media(max-width:768px){
    .popup-box{
        width:95%;
    }
}

/* Tablet landscape ≤1024px */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet portrait ≤768px */
@media (max-width: 768px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .testi-card { min-width: 100%; }
}

/* Mobile ≤600px */
@media (max-width: 600px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
}

/* Small mobile ≤380px */
@media (max-width: 380px) {
  .btn-group { flex-direction: column; }
  .btn-group a, .btn-group button { width: 100%; justify-content: center; text-align: center; }
  .adm-cta .btn-group { align-items: center; }
}

/* Touch-friendly targets */
@media (pointer: coarse) {
  .act-pill { padding: 12px 20px; }
}