/* Homepage redesign — Fall 2026 (Research -> Curriculum -> Collaborative IC Design Lab)
   Scoped entirely under .pl-home so it never touches the shared nav/footer/Bootstrap styles. */

.pl-home {
  --pl-bg: #ffffff;
  --pl-bg-panel: #f4f2ec;
  --pl-line: rgba(20,21,26,0.10);
  --pl-line-strong: rgba(20,21,26,0.20);
  --pl-fg: #16171b;
  --pl-fg-dim: #5c5a52;
  --pl-fg-dimmer: #8f8c81;
  --pl-accent: #bd5b12;
  --pl-accent-dim: #954a0f;
  --pl-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --pl-sans: "Space Grotesk", -apple-system, "Segoe UI", sans-serif;

  background: var(--pl-bg);
  background-image:
    repeating-linear-gradient(0deg, rgba(20,21,26,0.035) 0px, rgba(20,21,26,0.035) 1px, transparent 1px, transparent 96px),
    repeating-linear-gradient(90deg, rgba(20,21,26,0.035) 0px, rgba(20,21,26,0.035) 1px, transparent 1px, transparent 96px);
  color: var(--pl-fg);
  font-family: var(--pl-sans);
  -webkit-font-smoothing: antialiased;
}
.pl-home * { box-sizing: border-box; }
.pl-home a { color: var(--pl-accent); text-decoration: none; }
.pl-home a:hover { color: var(--pl-accent-dim); }
.pl-home h1, .pl-home h2, .pl-home h3 {
  font-family: var(--pl-sans); font-weight: 700; margin: 0; letter-spacing: -0.01em;
}
.pl-home p { margin: 0; }

.pl-container { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

.pl-eyebrow {
  font-family: var(--pl-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--pl-accent); display: flex; align-items: center; gap: 10px;
}
.pl-eyebrow::before { content: ""; width: 7px; height: 7px; background: var(--pl-accent); display: inline-block; }

.pl-btn {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--pl-sans); font-weight: 600;
  font-size: 15px; padding: 13px 22px; border: 1px solid transparent; cursor: pointer; white-space: nowrap;
}
/* .pl-home a {color: var(--pl-accent)} outranks a single .pl-btn-* class
   (both are 2-class-equivalent... no: .pl-home a is class+element = (0,1,1),
   .pl-btn-primary alone is (0,1,0) — the element beats it on specificity),
   which was rendering every button's text in its own background color.
   Doubling up the class here (0,2,0) beats that cleanly. */
.pl-home .pl-btn-primary { background: var(--pl-accent); color: #fff; }
.pl-home .pl-btn-primary:hover { background: var(--pl-accent-dim); color: #fff; }
.pl-home .pl-btn-ghost { background: transparent; color: var(--pl-fg); border-color: var(--pl-line-strong); }
.pl-home .pl-btn-ghost:hover { color: var(--pl-accent); border-color: var(--pl-accent); }

.pl-section { padding: 100px 0; border-bottom: 1px solid var(--pl-line); }
.pl-section-head { max-width: 640px; display: flex; flex-direction: column; gap: 18px; margin-bottom: 56px; }
.pl-section-head h2 { font-size: 36px; }
.pl-section-head p { color: var(--pl-fg-dim); font-size: 17px; line-height: 1.6; }

.pl-grid { display: grid; gap: 1px; background: var(--pl-line); border: 1px solid var(--pl-line); }
.pl-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pl-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pl-cell { background: var(--pl-bg-panel); padding: 32px; display: flex; flex-direction: column; gap: 14px; }

.pl-tag {
  font-family: var(--pl-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--pl-fg-dimmer);
}
.pl-chip {
  font-family: var(--pl-mono); font-size: 12px; padding: 7px 14px; border: 1px solid var(--pl-line-strong);
  color: var(--pl-fg-dim); background: var(--pl-bg-panel); display: inline-block;
}
.pl-chip-row { display: flex; flex-wrap: wrap; gap: 10px; }

.pl-panel { border: 1px solid var(--pl-line-strong); background: var(--pl-bg-panel); padding: 28px; }

/* The shared nav template floats transparent with white text at the top of
   the page (desktop only) and only switches to a solid white bg + dark text
   after scrolling — built for a dark/photo hero. This page's hero is light,
   so that left "Home / Courses / Community" white-on-white until you
   scrolled. Keep the nav in its scrolled (solid, dark-text) look at all
   times, homepage-only — other pages' photo heroes still get the template
   default. */
@media (min-width: 992px) {
  .navbar-custom {
    background-color: #fff;
    box-shadow: 0 0.0625rem 0.375rem 0 rgba(0, 0, 0, 0.1);
  }
  .navbar-custom .nav-item .nav-link {
    color: #393939;
    opacity: 1;
  }
  .navbar-custom .nav-item .nav-link:hover,
  .navbar-custom .nav-item .nav-link.active {
    color: #00bfd8;
  }
}

@media (max-width: 760px) {
  .pl-grid-2, .pl-grid-3 { grid-template-columns: 1fr; }
  .pl-hero-grid, .pl-platform-grid, .pl-model-grid { grid-template-columns: 1fr !important; }
  .pl-nav-links { display: none !important; }
  .pl-section { padding: 64px 0; }
  .pl-section-head h2 { font-size: 28px; }
  .pl-h1 { font-size: 34px !important; }
}