/* =========================================================
   PROJECT ICON LINK + TWINKLE UNTIL USED
   ========================================================= */
.project-icon-link {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  text-decoration: none;

  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.92);

  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
  position: relative;
}

/* The symbols are inline SVG line icons, not Unicode glyphs. Glyphs came
   from whatever font each OS had (so their weight and size never matched,
   and ♠ / ★ could turn into colour emoji on some phones). Every icon is
   drawn on the same 24-unit grid and takes its stroke from here, so the set
   stays consistent: add a new one in the same style, outline only, with
   class="fill" just for small solid details. */
.project-icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.project-icon .fill {
  fill: currentColor;
  stroke: none;
}

.project-icon-link.is-unvisited {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 18px rgba(var(--accent-rgb), 0.28);
}

@media (prefers-reduced-motion: no-preference) {
  .project-icon-link.is-unvisited {
    animation: iconTwinkle 2.8s ease-in-out infinite;
  }
  .project-icon-link.is-unvisited::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 16px;
    background:
      radial-gradient(circle at 30% 30%, rgba(var(--accent-rgb), 0.2), transparent 55%),
      radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.1), transparent 60%);
    opacity: 0;
    animation: sparklePulse 2.8s ease-in-out infinite;
    pointer-events: none;
  }
}

@keyframes iconTwinkle {
  0%,
  70%,
  100% {
    transform: translateY(0) scale(1);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.08),
      0 0 14px rgba(var(--accent-rgb), 0.2);
  }
  78% {
    transform: translateY(-1px) scale(1.02);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.16),
      0 0 24px rgba(var(--accent-rgb), 0.36);
  }
  86% {
    transform: translateY(0) scale(1);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.1),
      0 0 18px rgba(var(--accent-rgb), 0.26);
  }
}

@keyframes sparklePulse {
  0%,
  72%,
  100% {
    opacity: 0;
  }
  78% {
    opacity: 0.55;
  }
  84% {
    opacity: 0.1;
  }
}

.project-icon-link.is-visited {
  animation: none;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 0 12px rgba(var(--accent-rgb), 0.14);
  border-color: rgba(var(--accent-rgb), 0.22);
  color: rgba(255, 255, 255, 0.9);
}

/* Icon micro-lift on mouse hover and when the parent band link is keyboard-focused.
   (The icon itself is a decorative <span> and not focusable, so :focus-visible
   is wired through the parent band link instead.) */
.project-icon-link:hover,
.project-card__media:focus-visible .project-icon-link,
.mini-project-card__media:focus-visible .project-icon-link {
  transform: translateY(-1px);
  color: rgb(var(--accent-rgb));
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 0 22px rgba(var(--accent-rgb), 0.3);
}

/* =========================================================
   ENHANCED PROJECT CARDS
   ========================================================= */
.project-card h3 {
  margin-bottom: 0.25rem;
}

.project-subtitle {
  color: #a0aec0;
  font-size: var(--fs-sm);
  margin-bottom: 0.5rem;
}

.project-tech {
  font-size: var(--fs-sm);
  margin-top: 0.5rem;
}

.project-card--enhanced {
  cursor: pointer;
  padding: 0;
  position: relative;
  overflow: hidden;
  border-radius: 0.95rem;
  background: #121521;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease;
}

.project-card--enhanced:hover,
.project-card--enhanced:focus-within {
  transform: translateY(-6px);
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 26px rgba(var(--accent-rgb), 0.22);
}

/* Visible focus indicator on the band link of each card.
   (The article itself isn't focusable; the band <a> is the single
   focus stop per project and the only AT-exposed link for it.) */
.project-card__media:focus-visible,
.mini-project-card__media:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.95);
  outline-offset: 3px;
}

.project-card__media {
  display: block;
  color: inherit;
  text-decoration: none;
  padding: 1rem 1rem 0.9rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(900px 260px at 12% 18%, rgba(var(--accent-rgb), 0.3), transparent 60%),
    radial-gradient(700px 240px at 88% 70%, rgba(160, 174, 192, 0.18), transparent 60%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02));
}

.project-card__mediaTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.project-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: flex-end;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.55rem;
  font-size: var(--fs-2xs);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #dbe7ff;
}

.project-card__content {
  position: relative;
  padding: 1rem;
}

.project-body {
  transition: opacity 120ms ease;
  opacity: 1;
  visibility: visible;
}

/* The overlay swap is keyed to the media band link, NOT to :focus-within on
   the card. The overlay is opaque and covers .project-card__content, so a
   card-wide :focus-within would drop it on top of the Kaggle / Writeup chips
   at the exact moment a keyboard user tabs to one — the focused link would
   sit behind it (WCAG 2.4.11, Focus Not Obscured). The band link is a
   previous sibling of .project-card__content, so ~ reaches the overlay while
   leaving the chips' own focus alone. */
.project-card--enhanced:hover .project-body,
.project-card__media:focus-visible ~ .project-card__content .project-body {
  opacity: 0;
  visibility: hidden;
}

.project-card__overlay {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 1rem;
  background: #0b0c10;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity 170ms ease,
    transform 170ms ease;
}

.project-card--enhanced:hover .project-card__overlay,
.project-card__media:focus-visible ~ .project-card__content .project-card__overlay {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.overlay-box {
  width: 100%;
}

.overlay-label {
  font-size: var(--fs-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.74);
  margin-bottom: 0.35rem;
}

.overlay-text {
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--fs-sm);
  line-height: 1.35;
  margin-bottom: 0.8rem;
}

.overlay-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.btn.btn-sm {
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  font-size: var(--fs-sm);
}

.btn.btn-ghost {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.btn.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.16);
}

/* =========================================================
   HOMEPAGE EXPANSIONS (Coursework, mini-projects, contact cards)
   ========================================================= */

.section-intro {
  color: #cbd5e0;
  font-size: var(--fs-md);
  line-height: 1.55;
  margin: -0.15rem 0 0.9rem;
  max-width: 70ch;
}

.subsection-title {
  margin-top: 1.25rem;
  font-size: var(--fs-lg);
}

.subsection-intro {
  color: #a0aec0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  margin: 0.35rem 0 0.85rem;
  max-width: 70ch;
}

/* Selected Coursework */
.coursework-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.9rem;
  margin-top: 0.5rem;
  list-style: none;
}

.course-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 0.9rem 0.95rem;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
}

.course-card h3 {
  font-size: var(--fs-md);
  margin-bottom: 0.35rem;
}

.course-card p {
  color: #cbd5e0;
  font-size: var(--fs-sm);
  line-height: 1.55;
}

/* Mini projects */
.mini-projects-grid {
  display: grid;
  /* Three per row at full width, so six minis make two even rows; two per
     row below 720px and one below 480px, where a third of the width is
     too narrow for a card title and its tags. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  margin-top: 0.5rem;
  list-style: none;
}

@media (max-width: 720px) {
  .mini-projects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .mini-projects-grid {
    grid-template-columns: 1fr;
  }
}

.mini-project-card {
  background: #121521;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
}

.mini-project-card__media {
  display: block;
  color: inherit;
  text-decoration: none;
  padding: 0.85rem 0.9rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(
      600px 180px at 12% 18%,
      rgba(var(--accent-rgb, 160, 174, 192), 0.22),
      transparent 60%
    ),
    radial-gradient(500px 160px at 88% 70%, rgba(160, 174, 192, 0.14), transparent 60%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015));
}

.mini-project-card__mediaTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.55rem;
}

.mini-project-card__content {
  padding: 0.8rem 0.9rem 0.85rem;
}

.mini-project-card h4 {
  font-size: var(--fs-md);
  margin: 0;
}

.mini-project-card p {
  color: #cbd5e0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  margin: 0;
}

.mini-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.65rem;
}

/* When tags sit in the mediaTop row alongside the icon, align right and drop top margin */
.mini-project-card__mediaTop .mini-tags {
  margin-top: 0;
  justify-content: flex-end;
}

/* .tag--mini is only ever used combined with .tag, so inherit
   font-size/padding from the base and only tweak opacity here. */
.tag--mini {
  opacity: 0.92;
}

/* Project actions (touch-friendly quick links) */
.project-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.65rem;
}

.link-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: var(--fs-sm);
  text-decoration: none;
  background: rgba(49, 130, 206, 0.18);
  border: 1px solid rgba(49, 130, 206, 0.35);
  color: #e2e8f0;
  transition:
    transform 140ms ease,
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.link-chip:hover {
  background: rgba(49, 130, 206, 0.26);
}

.link-chip--ghost {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.link-chip--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Resume buttons */
/* Resume and CV sit side by side once there is room for two button rows,
   and stack on narrow screens. 700px is where the pair of buttons in each
   column would otherwise start wrapping. */
.doc-set {
  display: grid;
  gap: 1.4rem;
  margin-top: 0.9rem;
}

@media (min-width: 700px) {
  .doc-set {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}

.doc__title {
  font-size: var(--fs-md);
  font-weight: 600;
  color: #e2e8f0;
}

.resume-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

/* "Updated <month>" stamp directly below the Resume action buttons. */
.resume-updated {
  margin: 0.75rem 0 0;
  font-size: var(--fs-xs);
  color: rgba(160, 174, 192, 0.85);
  font-style: italic;
}

/* Footer nav */
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
}

.footer-nav a {
  color: #cbd5e0;
  text-decoration: none;
  font-size: var(--fs-sm);
}

.footer-nav a:hover {
  text-decoration: underline;
}

.footer-copy {
  color: #a0aec0;
  font-size: var(--fs-xs);
}

/* Touch devices: don't rely on hover-only overlays */
@media (hover: none) {
  .project-card__overlay {
    display: none;
  }
}

/* =========================================================
   CARD MICRO-INTERACTIONS
   ========================================================= */

.project-card,
.course-card,
.mini-project-card {
  transition:
    transform 180ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease;
}

.project-card:hover,
.course-card:hover,
.mini-project-card:hover {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .link-chip,
  .project-card,
  .course-card,
  .mini-project-card {
    transition: none !important;
  }
  .btn:active,
  .project-card:hover,
  .course-card:hover,
  .mini-project-card:hover {
    transform: none !important;
  }
}

/* =========================================================
   KAGGLE STATS + CONTACT FORM + BAND INTERACTIONS
   ========================================================= */

/* Kaggle stats text next to Kaggle chip */
.kaggle-stats {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 10px;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.78);
  user-select: none;
}

/* Contact form card */
.contact-formCard {
  margin-top: 16px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
}

.contact-formTitle {
  margin: 0 0 6px 0;
  font-size: var(--fs-lg);
}

.contact-formHint {
  margin: 0 0 14px 0;
  color: rgba(255, 255, 255, 0.7);
}

.contact-formGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.contact-field {
  display: grid;
  gap: 6px;
}

.contact-field--full {
  grid-column: 1 / -1;
}

.contact-fieldLabel {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.75);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.92);
  padding: 10px 12px;
  outline: none;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
}

.contact-formActions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.form-status {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--fs-sm);
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
}

.footer-social .contact-pill {
  --brand: 255, 255, 255;
  font-size: var(--fs-xs);
  padding: 6px 12px;
  border-color: rgba(var(--brand), 0.3);
  background: rgba(var(--brand), 0.08);
}

.footer-social .contact-pill__icon {
  color: rgb(var(--brand));
}

.footer-social .contact-pill:hover,
.footer-social .contact-pill:focus-visible {
  border-color: rgba(var(--brand), 0.7);
  background: rgba(var(--brand), 0.16);
  box-shadow:
    0 0 0 1px rgba(var(--brand), 0.25),
    0 4px 18px rgba(var(--brand), 0.3);
}

.contact-pill__icon {
  flex-shrink: 0;
}

/* Per-brand accent colors — icon tint + hover glow.
   Scoped under .footer-social so they match the specificity of the
   .footer-social .contact-pill fallback above and win on source order. */
.footer-social .contact-pill--linkedin {
  --brand: 10, 102, 194;
}
.footer-social .contact-pill--sistershope {
  --brand: 209, 66, 161;
}
.footer-social .contact-pill--aspirecures {
  --brand: 30, 158, 150;
}
.footer-social .contact-pill--github {
  --brand: 235, 240, 246;
}
.footer-social .contact-pill--kaggle {
  --brand: 32, 190, 255;
}

.contact-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.contact-pill:hover,
.contact-pill:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 0 18px rgba(var(--accent-rgb), 0.22);
  outline: none;
}

/* Make the top media band feel clickable (it IS an <a>) */
.project-card__media,
.mini-project-card__media {
  cursor: pointer;
}

.project-card--enhanced:hover .project-card__media,
.project-card--enhanced:focus-within .project-card__media,
.mini-project-card:hover .mini-project-card__media,
.mini-project-card:focus-within .mini-project-card__media {
  filter: brightness(1.03);
}

/* Mobile: avoid crowding */
@media (max-width: 520px) {
  .contact-formGrid {
    grid-template-columns: 1fr;
  }
}