@import url('tokens/colors.css');
@import url('tokens/typography.css');
@import url('tokens/spacing.css');
@import url('tokens/effects.css');
@import url('components.css');

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  background: var(--surface-page);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 32px; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.eyebrow-base { font-size: var(--text-base); }
.eyebrow-inverse { color: var(--ink-300); }

.h2-display {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
  margin: 12px 0 20px;
}
.h2-mono {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: var(--tracking-normal);
  text-transform: uppercase;
  margin: 12px 0 20px;
}
.body-text {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--text-primary);
  line-height: var(--leading-relaxed);
}

.photo-placeholder {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: center;
  padding: 16px;
}
.photo-16-9 { aspect-ratio: 16/9; }
.photo-1-1 { aspect-ratio: 1/1; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.inquiry-panel { display: flex; gap: 28px; align-items: flex-start; }
.inquiry-panel .inquiry-icon { flex-shrink: 0; width: 96px; height: 96px; object-fit: contain; }
.inquiry-panel .inquiry-body { flex: 1; min-width: 0; }
@media (max-width: 640px) {
  .inquiry-panel { flex-direction: column; align-items: center; text-align: center; }
  .inquiry-panel .inquiry-icon { width: 72px; height: 72px; object-fit: contain; }
  .inquiry-panel .inquiry-body { width: 100%; }
  /* Inquiry 04's header row (number + "Program Capstone" badge) uses
     justify-content:space-between for its desktop side-by-side look —
     on the centered mobile column that pins the "04" to the left edge
     instead of centering it like every other panel's number. */
  .inquiry-header-row { flex-direction: column; justify-content: center !important; gap: 8px; }
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
  flex-shrink: 0;
}

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 860px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .wrap { padding: 0 20px; }
  h1 { font-size: var(--text-3xl) !important; }
}
@media (max-width: 700px) {
  .inquiry-layout { flex-direction: column; }
  .inquiry-tabs-col { width: 100% !important; flex-direction: row !important; flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .hero { padding: 56px 20px 48px !important; }
  h1 { font-size: var(--text-2xl) !important; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; justify-content: center; }

  .nav-bar { position: relative; }
  .nav-bar img { height: 56px !important; width: auto !important; }
  .nav-toggle { display: flex; }
  .nav-links {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch !important;
    gap: 4px !important;
    background: var(--surface-card);
    border-top: 1px solid var(--border-default);
    box-shadow: var(--shadow-md);
    padding: 12px 20px 20px;
    z-index: 20;
  }
  .nav-links.nav-open { display: flex !important; }
  .nav-links a.nav-link, .nav-links span.nav-link {
    width: 100%;
    padding: 10px 0;
    font-size: var(--text-md) !important;
  }
  /* The hover-underline device is sized at 100% of its parent .nav-link —
     once the link is stretched to a full-width mobile row, that underline
     stretches with it into a line spanning the whole screen. It's a
     hover affordance that doesn't mean much on touch anyway, so just
     drop it here rather than restructuring the markup to isolate it. */
  .nav-links .nav-mark { display: none !important; }
  .nav-links .btn { width: 100%; justify-content: center; margin-top: 8px; }

  .section-nav {
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .section-nav::-webkit-scrollbar { display: none; }
  .section-nav > * { flex-shrink: 0; }
  .section-nav > span { margin: 0 12px !important; }

  .site-footer {
    flex-direction: column;
    align-items: center !important;
    text-align: center;
    gap: 24px !important;
  }
  .site-footer > div { align-items: center !important; }
  .site-footer .footer-social-row { justify-content: center; flex-wrap: wrap; }

  .closing-grid {
    grid-template-columns: 1fr !important;
    row-gap: 36px !important;
  }
  .closing-grid > div:first-child {
    padding-bottom: 32px;
    border-bottom: 1px solid var(--ink-700);
  }
}