/* ============================================================
   fixes.css  — loaded LAST, overrides styles.css/positioning.css
   Owner: worker-positioning2
   Scope: (A) desktop card sizing, (B) About profile-card text clipping.
   Rules: additive overrides only, mobile-safe (no overflow @390px),
          theme-safe (use CSS vars, never hardcode theme colors).
   ============================================================ */

/* ===========================================================
   JOB 2B — ABOUT PROFILE CARD: stop button/label text clipping
   The shine ::before relies on overflow:hidden; flex children
   lacked min-width:0 and couldn't wrap, so text got clipped.
   These rules let text wrap instead, at ALL widths.
   =========================================================== */

.profile-actions {
  flex-wrap: wrap;          /* buttons drop to next line instead of squeezing */
}

.profile-actions .btn {
  min-width: 0;             /* allow flex item to shrink below content size */
  /* give each a comfortable min size so they wrap to new rows instead of
     cramming 3 across a narrow 360px profile column */
  flex: 1 1 8.5rem;
  text-align: center;
  white-space: normal;      /* let the button itself wrap */
  height: auto;             /* grow vertically when label wraps */
}

.profile-actions .btn span {
  min-width: 0;
  white-space: normal;      /* label wraps at spaces instead of being clipped */
  overflow-wrap: break-word;
  line-height: 1.25;
}

/* Stat items: let the content/label show fully, keep shine ::before.
   The about profile card can be a narrow ~360px column, so tighten the
   internal spacing/icon to give the label room and avoid mid-word breaks. */
.profile-stats .stat-item {
  padding: 0.95rem;         /* was 1.25rem — reclaim horizontal room */
  gap: 0.7rem;              /* was 1rem */
}

.profile-stats .stat-icon {
  width: 34px;              /* was 40px */
  height: 34px;
  font-size: 1rem;
}

.stat-content {
  min-width: 0;             /* critical: flex child can shrink, no clipping */
}

.stat-label {
  white-space: normal;      /* "Global Rank" etc. wrap at spaces, never clip */
  overflow-wrap: break-word;/* break a long single word only if it can't fit */
  word-break: normal;       /* prefer breaking at spaces first */
  hyphens: none;
  line-height: 1.25;
}

/* About profile card: the column is narrow, and the base .stat-label is
   UPPERCASE with 0.05em tracking which makes "GLOBAL" overflow. Tighten
   tracking + size so each label sits on one line (breaks at the space). */
.profile-stats .stat-label {
  font-size: 0.78rem;
  letter-spacing: 0.01em;
}

.profile-stats .stat-number {
  font-size: 1.3rem;        /* slightly smaller so long numbers don't crowd */
}

.stat-number {
  overflow-wrap: normal;
}

/* ===========================================================
   JOB 2A — DESKTOP CARD SIZING
   Constrain only on larger screens; mobile stays fluid.
   =========================================================== */

@media (min-width: 1024px) {

  /* ---- Publications: compact, readable cards ---- */
  .publications-timeline {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
  }

  .publication-item {
    margin-bottom: 1.5rem;   /* was 2rem */
  }

  .publication-header {
    padding: 1.15rem 1.6rem; /* was 1.5rem 2rem */
  }

  .publication-content {
    padding: 1.5rem 1.6rem;  /* was 2rem */
  }

  /* ---- Experience / research cards: tighten padding (were 2rem) ----
     (.project-content is already a tight 1.5rem, left as-is.) */
  .experience-card {
    padding: 1.6rem;
  }

  .research-area-card {
    padding: 1.6rem;
  }
}

/* On very wide screens, hold readable widths and balance whitespace. */
@media (min-width: 1400px) {

  .publications-timeline {
    max-width: 980px;
  }
}

/* =========================================================================
   POST-INTEGRATION FIXES (orchestrator) — typewriter caret, academic
   profiles + live Scholar citations, upcoming-publication styling.
   Uses theme CSS variables so it works in light/dark and all accents.
   ========================================================================= */

/* Typewriter caret on the hero subtitle so mid-typing text reads as
   intentional animation rather than a truncated/broken line. */
.hero-subtitle {
  position: relative;
}
.hero-subtitle::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  vertical-align: -0.12em;
  background: var(--primary-color);
  animation: heroCaretBlink 1s steps(1) infinite;
  border-radius: 1px;
}
@keyframes heroCaretBlink { 0%,49%{opacity:1;} 50%,100%{opacity:0;} }
@media (prefers-reduced-motion: reduce) {
  .hero-subtitle::after { animation: none; opacity: 0.85; }
}

/* ---- Academic Profiles (Scholar / ResearchGate / ORCID) ---- */
.academic-profiles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.25rem;
  position: relative;
  z-index: 2;
}
.academic-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
              border-color var(--transition-fast), background var(--transition-fast);
}
.academic-btn i { font-size: 1rem; color: var(--primary-color); }
.academic-btn.scholar i  { color: var(--primary-color); }
.academic-btn.researchgate i { color: #00ccbb; }
.academic-btn.orcid i { color: #a6ce39; }
.academic-btn:hover {
  transform: translateY(-2px);
  border-color: var(--primary-color);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.academic-btn:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.academic-btn-label { white-space: nowrap; }

/* Live Scholar citation badge — hidden until a real count is available */
.scholar-citations {
  display: none;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.4;
}
.scholar-citations.has-count { display: inline-flex; }
.scholar-cite-label { opacity: 0.9; font-weight: 600; }
.scholar-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74,222,128,0.7);
  animation: scholarLivePulse 1.8s infinite;
}
@keyframes scholarLivePulse {
  0%   { box-shadow: 0 0 0 0 rgba(74,222,128,0.6); }
  70%  { box-shadow: 0 0 0 6px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}
@media (prefers-reduced-motion: reduce) { .scholar-live-dot { animation: none; } }

/* ---- Upcoming / "to be presented" publication ---- */
.publication-item.upcoming { border-left: 3px solid var(--accent-color); }
.pub-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  margin-right: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  vertical-align: middle;
}
.action-btn.upcoming-btn {
  opacity: 0.85;
  cursor: default;
}
.action-btn.upcoming-btn:hover { transform: none; }

/* =========================================================================
   v3 — live citation hero stat + modernized custom cursor
   ========================================================================= */

/* Hero "Citations" stat is now a link to Scholar with a live pulse dot */
.hero-stats .stat-link { text-decoration: none; cursor: pointer; transition: transform var(--transition-fast); }
.hero-stats .stat-link:hover { transform: translateY(-3px); }
.hero-stats .stat-link:hover .stat-number { filter: drop-shadow(0 0 10px var(--primary-color)); }
.stat-live-dot {
  display: inline-block;
  width: 7px; height: 7px; margin-left: 4px;
  border-radius: 50%;
  background: #4ade80;
  vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(74,222,128,0.7);
  animation: statLivePulse 1.8s infinite;
}
@keyframes statLivePulse {
  0% { box-shadow: 0 0 0 0 rgba(74,222,128,0.6); }
  70% { box-shadow: 0 0 0 7px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}
@media (prefers-reduced-motion: reduce) { .stat-live-dot { animation: none; } }

/* ---- Modern, unique custom cursor ----
   A gradient ring that slowly rotates with a soft accent glow; on interactive
   hover it expands into an "invert lens" that flips the colors underneath —
   a premium Awwwards-style touch. The precise dot leads the motion. */
.custom-cursor {
  width: 34px; height: 34px;
  border: none !important;
  border-radius: 50%;
  /* conic gradient ring via mask */
  background: conic-gradient(from 0deg, var(--primary-color), var(--secondary-color), var(--accent-color), var(--primary-color));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--primary-color) 55%, transparent));
  animation: cursorSpin 4s linear infinite;
  transition: width 0.25s cubic-bezier(.2,.8,.2,1), height 0.25s cubic-bezier(.2,.8,.2,1),
              background 0.3s ease, opacity 0.25s ease, backdrop-filter 0.25s ease;
  mix-blend-mode: normal;
}
@keyframes cursorSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.cursor-dot {
  width: 7px; height: 7px;
  background: var(--primary-color);
  box-shadow: 0 0 8px var(--primary-color);
  transition: width 0.2s ease, height 0.2s ease, opacity 0.2s ease;
}

/* Hover over interactive elements → full invert-lens disc (mask removed so the
   whole circle inverts what's underneath, with a thin accent ring on top). */
.custom-cursor.cursor-hover {
  width: 60px; height: 60px;
  background: transparent;
  -webkit-mask: none; mask: none;
  border: 2px solid var(--primary-color) !important;
  backdrop-filter: invert(1) hue-rotate(25deg);
  -webkit-backdrop-filter: invert(1) hue-rotate(25deg);
  animation: none;
  transform: translate(-50%, -50%);
}
.cursor-dot.cursor-hover { width: 0; height: 0; opacity: 0; }

.custom-cursor.cursor-click { transform: translate(-50%, -50%) scale(0.8); }

@media (prefers-reduced-motion: reduce) {
  .custom-cursor { animation: none; }
/* ===========================================================
   AWARDS SECTION (new) — Honor & Awards
   Theme-aware (uses CSS vars), works in light/dark + all accents.
   Mobile-safe: auto-fit grid, no fixed widths, no overflow @390px.
   =========================================================== */

.awards {
  padding: clamp(3rem, 8vw, 6rem) 0;
  background:
    linear-gradient(135deg, var(--bg-secondary) 0%, rgba(var(--accent-primary-rgb), 0.03) 100%),
    radial-gradient(circle at 70% 30%, rgba(var(--accent-tertiary-rgb), 0.05) 0%, transparent 55%);
  position: relative;
}

.awards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

.award-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  min-width: 0;                       /* prevent grid blowout / overflow */
  padding: clamp(1.1rem, 3vw, 1.6rem);
  border-radius: 18px;
  border: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--bg-primary) 78%, transparent);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow: var(--shadow-light);
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s ease,
              border-color 0.35s ease;
}

/* accent gradient edge */
.award-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--primary-color), var(--accent-color));
  opacity: 0.9;
}

.award-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-large);
  border-color: var(--primary-color);
}

.award-icon {
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 14px;
  font-size: 1.35rem;
  color: #fff;
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  box-shadow: 0 6px 16px -6px var(--primary-color);
}

.award-body {
  min-width: 0;                       /* allow long org text to wrap, no overflow */
  flex: 1 1 auto;
}

.award-title {
  margin: 0 0 0.3rem;
  font-size: clamp(1rem, 2.4vw, 1.15rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.award-org {
  margin: 0 0 0.55rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.award-date {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary-color) 30%, transparent);
}

@media (max-width: 480px) {
  .award-card {
    gap: 0.85rem;
    padding: 1.1rem;
  }
  .award-icon {
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1.15rem;
  }
}

/* ===========================================================
   NEW EXPERIENCE CARD — Undergraduate Research Assistant (DRISTEE)
   This card has a single, longer highlight paragraph. Ensure it
   reads comfortably and never clips; inherits .experience-card base.
   =========================================================== */

#experience .experience-card .highlight-content p {
  overflow-wrap: anywhere;          /* long descriptive text wraps cleanly */
}