/* The club's home page and the site footer. Colors come from the tokens in app.css; the few extra
   tints here are defined for dark first, then light, the same way app.css does it. Everything on the
   home page is scoped under .home so the meeting tool and the officer pages are not affected. */

:root {
  --home-glow-a: rgba(34, 211, 238, 0.16);
  --home-glow-b: rgba(163, 230, 53, 0.09);
  --home-grid: rgba(148, 178, 230, 0.07);
  --home-tint: rgba(34, 211, 238, 0.12);
  --home-emblem-glow: rgba(34, 211, 238, 0.2);
}

@media (prefers-color-scheme: light) {
  :root {
    --home-glow-a: rgba(14, 116, 144, 0.11);
    --home-glow-b: rgba(21, 128, 61, 0.08);
    --home-grid: rgba(15, 23, 42, 0.05);
    --home-tint: rgba(14, 116, 144, 0.1);
    --home-emblem-glow: rgba(14, 116, 144, 0.16);
  }
}

/* ---------- shared pieces ---------- */

.home svg.i {
  width: 24px; height: 24px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.home svg.i .f { fill: currentColor; stroke: none; }

.home .icon-badge {
  display: inline-grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--home-tint); color: var(--accent);
}

.home ul, .home ol { list-style: none; margin: 0; padding: 0; }
.home a:focus-visible { outline-offset: 3px; }

.home .home-section { margin-top: 88px; scroll-margin-top: 16px; }
.home .section-head { max-width: 700px; margin-bottom: 26px; }
.home .section-head h2 { font-size: clamp(23px, 3vw, 30px); letter-spacing: -0.025em; margin: 0 0 8px; }
.home .section-lede { color: var(--muted); font-size: 17px; margin: 0; }

.home .do-card,
.home .build-tile,
.home .step,
.home .project-list {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ---------- hero ---------- */

.home .hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: 48px;
  margin-top: 14px; padding: 60px 64px;
  border: 1px solid var(--line); border-radius: 24px;
  background:
    radial-gradient(680px 340px at 90% -12%, var(--home-glow-a), transparent 70%),
    radial-gradient(560px 320px at -4% 118%, var(--home-glow-b), transparent 70%),
    var(--surface);
  box-shadow: var(--shadow);
}
.home .hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--home-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--home-grid) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 70% 100% at 85% 15%, #000 15%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 100% at 85% 15%, #000 15%, transparent 72%);
}
.home .hero-emblem {
  width: 176px; height: 176px; flex: none; border-radius: 50%;
  box-shadow: 0 0 0 8px var(--home-tint), 0 20px 60px var(--home-emblem-glow);
}
.home .hero-text { min-width: 0; }
.home .hero .kicker { margin-bottom: 10px; }
.home .hero h1 { font-size: clamp(38px, 6.2vw, 62px); letter-spacing: -0.035em; margin: 0 0 8px; }
.home .hero .motto { font-size: clamp(22px, 3.2vw, 30px); margin: 0 0 14px; }
.home .hero .lede { font-size: 18px; margin: 0; max-width: 34em; }
.home .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.home .cta .btn { min-height: 48px; padding: 0 22px; font-size: 16px; }

/* ---------- what we do ---------- */

.home .do-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.home .do-card { padding: 24px 22px; }
.home .do-card h3 { font-size: 17px; margin: 18px 0 8px; letter-spacing: -0.01em; }
.home .do-card p { color: var(--muted); margin: 0; }

.home .can-do {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  margin-top: 20px; padding: 18px 20px;
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
}
.home .can-do-label { margin: 0; font-size: 14px; font-weight: 700; color: var(--muted); }
.home .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.home .chips li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 14px; font-weight: 600;
}
.home .chips li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--free); flex: none; }

/* ---------- built by the club ---------- */

.home .build-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.home .build-grid li { display: flex; min-width: 0; }
.home .build-tile {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 8px;
  padding: 22px;
  color: var(--text); text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}
.home a.build-tile:hover { border-color: var(--accent); transform: translateY(-2px); }
/* The icon and tag come last in the markup, so a screen reader says the name first; order puts
   them back on top. */
.home .build-top { order: -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.home .build-tag {
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line-strong);
  color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap;
}
.home .build-name { font-size: 18px; font-weight: 750; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.home .build-body { color: var(--muted); }
.home .build-go {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: auto; padding-top: 12px;
  color: var(--accent); font-size: 14px; font-weight: 700;
}
.home .build-go svg.i { width: 16px; height: 16px; stroke-width: 2.2; transition: transform 0.15s; }
.home a.build-tile:hover .build-go svg.i { transform: translateX(2px); }

/* A card with more than one link: the card stays still and each link reacts on its own. */
.home .build-links { display: flex; flex-wrap: wrap; gap: 0 20px; margin: auto 0 -4px; padding-top: 8px; }
.home .build-links .build-go { margin-top: 0; padding: 4px 0; text-decoration: none; }
.home .build-links .build-go:hover { text-decoration: underline; text-underline-offset: 3px; }
.home .build-links .build-go:hover svg.i { transform: translateX(2px); }

.home .section-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
.home .section-actions svg.i { width: 18px; height: 18px; }

/* ---------- student projects ---------- */

.home .project-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px 16px; padding: 12px 14px; }
.home .project-list li { display: flex; align-items: center; gap: 12px; padding: 12px 8px; font-weight: 600; }
.home .project-list li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--free); flex: none; transform: rotate(45deg); }

/* ---------- how to join ---------- */

.home .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.home .step { display: flex; flex-direction: column; align-items: flex-start; padding: 24px 22px; }
.home .step-num {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 16px;
}
.home .step h3 { font-size: 17px; margin: 18px 0 8px; letter-spacing: -0.01em; }
.home .step p { color: var(--muted); margin: 0 0 20px; }
.home .step p:last-child { margin-bottom: 0; }
.home .step .btn { margin-top: auto; }

/* ---------- find us ---------- */

.home .social-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.home .social-grid li { display: flex; min-width: 0; }
.home .social {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
  color: var(--text); text-decoration: none;
  transition: border-color 0.15s;
}
.home .social:hover { border-color: var(--accent); }
.home .social-icon {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--surface-2); color: var(--text);
  transition: color 0.15s;
}
.home .social:hover .social-icon { color: var(--accent); }
.home .social-text { display: grid; min-width: 0; }
.home .social-name { font-weight: 700; }
.home .social-handle { color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }

.home .mail-line { display: flex; align-items: center; gap: 10px; margin: 22px 0 0; color: var(--muted); }
.home .mail-line svg.i { width: 20px; height: 20px; }

/* ---------- site footer (every page) ---------- */

.site-footer {
  margin-top: 88px; padding: 36px 0 48px;
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: 14px; text-align: center;
}
.site-footer p { margin: 0; }
.site-footer .footer-brand { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 18px; }
.footer-brand img { border-radius: 50%; }
.footer-name { color: var(--text); font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
.footer-motto { color: var(--free); font-weight: 800; }
.site-footer .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; margin: 0 0 10px; }
.site-footer .footer-links a { padding: 6px 8px; border-radius: 8px; color: var(--text); font-weight: 600; text-decoration: none; }
.site-footer .footer-links a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.site-footer .footer-mail { margin-bottom: 14px; }
.footer-mail a { display: inline-block; padding: 4px 2px; color: var(--accent); font-weight: 600; }
.footer-note { font-size: 13px; }

/* ---------- smaller screens ---------- */

@media (max-width: 1040px) {
  .home .do-grid, .home .build-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home .project-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home .hero { padding: 48px 44px; gap: 36px; }
  .home .hero-emblem { width: 140px; height: 140px; }
}

@media (max-width: 759px) {
  .home .hero {
    flex-direction: column; align-items: flex-start; gap: 22px;
    margin-top: 6px; padding: 28px 20px 24px; border-radius: 20px;
  }
  .home .hero-emblem { width: 100px; height: 100px; box-shadow: 0 0 0 6px var(--home-tint), 0 12px 36px var(--home-emblem-glow); }
  .home .hero .lede { font-size: 17px; }
  .home .cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
  .home .cta .btn { padding: 0 8px; font-size: 15px; }
  .home .cta .btn.primary { grid-column: 1 / -1; }
  .home .home-section { margin-top: 60px; }
  .home .section-head { margin-bottom: 18px; }
  .home .section-lede { font-size: 16px; }
  .home .steps { grid-template-columns: 1fr; gap: 12px; }
  .home .social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home .can-do { padding: 16px; }
  .site-footer { margin-top: 64px; }
  /* Touch targets: every footer link at least 44px tall, rows touching instead of gapped. */
  .site-footer .footer-links { gap: 0 4px; }
  .site-footer .footer-links a, .footer-mail a { display: inline-flex; align-items: center; min-height: 44px; }
  .site-footer .footer-mail { margin-bottom: 10px; }
}

@media (max-width: 560px) {
  .home .do-grid, .home .build-grid { grid-template-columns: 1fr; gap: 12px; }
  .home .do-card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; padding: 18px; }
  .home .do-card .icon-badge { grid-row: span 2; }
  .home .do-card h3 { margin: 2px 0 4px; }
  .home .build-tile { padding: 18px; }
  .home .project-list { padding: 8px 10px; column-gap: 10px; }
  .home .project-list li { padding: 10px 4px; gap: 10px; font-size: 14px; }
  .home .build-top { margin-bottom: 2px; }
  .home .section-actions { display: grid; }
  .home .step { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; padding: 18px; }
  .home .step-num { grid-row: span 3; }
  .home .step h3 { margin: 6px 0 6px; }
  .home .step p { margin-bottom: 14px; }
  .home .step .btn { justify-self: start; }
  .home .social-grid { grid-template-columns: 1fr; gap: 10px; }
  .home .social { padding: 12px 14px; }
  .home .social-icon { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .home a.build-tile:hover, .home a.build-tile:hover .build-go svg.i,
  .home .build-links .build-go:hover svg.i { transform: none; }
}