/* ═══════════════════════════════════════════════════════
   about.css — Portfolio stylesheet
   Sections:
   01. CSS Variables
   02. Base Reset
   03. Navigation
   04. Language Switcher
   05. Hero
   06. Hero Content
   07. Buttons
   08. Profile Card
   09. Animations
   10. Layout Utilities
   11. Section Labels
   12. About Section
   13. Info Cards
   14. Skills Section
   15. Projects Section
   16. Sport Section
   17. Accordion
   18. Timeline
   19. Links Section
   20. Divider
   21. Gallery / Carousel
   22. Carousel Controls
   23. Footer
   24. Responsive
═══════════════════════════════════════════════════════ */


/* ── 01. CSS VARIABLES ── */
:root {
  /* Backgrounds */
  --bg:      #0a0d14;   /* page background — near-black navy */
  --surface: #111827;   /* slightly lighter surface (available for use) */
  --card:    #161d2e;   /* card / panel background */

  /* Text */
  --text:  #e8ecf4;     /* primary readable text — off-white */
  --muted: #8b95a7;     /* secondary / helper text — grey-blue */

  /* Accent colours */
  --accent:  #4f8ef7;   /* blue  — primary interactive colour (labels, buttons, dots) */
  --accent2: #7ee8c4;   /* teal  — secondary highlights (brand, eyebrows, skill tags) */
  --accent3: #f4a842;   /* amber — tertiary highlights (sport / tooling tags) */

  /* Borders */
  --border: rgba(255,255,255,0.07); /* subtle white border on dark backgrounds */

  /* Fonts */
  --mono: 'Space Mono', monospace;      /* monospace — labels, code-like text */
  --sans: 'Space Grotesk', sans-serif;  /* sans-serif — body text */
}


/* ── 02. BASE RESET ── */
*, *::before, *::after {
  box-sizing: border-box; /* padding/border included in element width */
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; } /* animated anchor scrolling */

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;    /* comfortable reading line height */
  min-height: 100vh;
  overflow-x: hidden;   /* prevent horizontal scroll from overflowing elements */
}


/* ── 03. NAVIGATION ── */
nav {
  position: fixed;      /* stays visible while scrolling */
  top: 0; left: 0; right: 0;
  z-index: 100;         /* sits above all page content */
  padding: 18px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(10, 13, 20, 0.88); /* semi-transparent so page scrolls behind it */
  backdrop-filter: blur(14px);         /* frosted-glass blur */
  border-bottom: 1px solid var(--border);
}

.nav-brand {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .1em;  /* spaced-out caps feel */
  color: var(--accent2);
  text-transform: uppercase;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 32px; /* space between nav links and language switcher */
}

.nav-links {
  display: flex;
  gap: 26px;
  list-style: none;
}

.nav-links a {
  font-size: 13px;
  color: var(--muted);      /* dimmed by default */
  text-decoration: none;
  letter-spacing: .04em;
  transition: color .2s;
}
.nav-links a:hover { color: var(--text); } /* brighten on hover */


/* ── 04. LANGUAGE SWITCHER ── */
.lang-switch {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden; /* clip buttons to rounded corners */
}

.lang-btn {
  padding: 5px 13px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.lang-btn.active {
  background: var(--accent); /* filled blue = currently selected language */
  color: #fff;
}
.lang-btn:not(.active):hover {
  background: rgba(255,255,255,.06);
  color: var(--text);
}

/* Hide ALL language-specific elements by default */
[data-lang]                    { display: none; }
body.lang-en [data-lang="en"] { display: revert; }
body.lang-fr [data-lang="fr"] { display: revert; }

/* Inline bilingual spans (e.g. inside headings) */
.t               { display: none; }
body.lang-en .t-en { display: inline; }
body.lang-fr .t-fr { display: inline; }

/* Block-level bilingual elements (e.g. paragraphs) */
.tb              { display: none; }
body.lang-en .tb-en { display: block; }
body.lang-fr .tb-fr { display: block; }


/* ── 05. HERO ── */
.hero {
  min-height: 100vh;    /* fills the entire first screen */
  display: flex;
  align-items: center;
  padding: 120px 40px 80px; /* top clears the fixed nav */
  position: relative;
  overflow: hidden;     /* clips the decorative glow blobs */
}

/* Decorative glow blob — top-right (blue) */
.hero::before {
  content: '';
  position: absolute;
  top: -20%; right: -10%;
  width: 680px; height: 680px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79,142,247,.12) 0%, transparent 70%);
  pointer-events: none; /* never intercepts clicks */
}

/* Decorative glow blob — bottom-left (teal) */
.hero::after {
  content: '';
  position: absolute;
  bottom: -10%; left: -5%;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(126,232,196,.07) 0%, transparent 70%);
  pointer-events: none;
}

.hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 340px; /* text left, profile photo right */
  gap: 60px;
  align-items: center;
}


/* ── 06. HERO CONTENT ── */
.hero-eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .25em;
  color: var(--accent2);
  text-transform: uppercase;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Short decorative line before the eyebrow text */
.hero-eyebrow::before {
  content: '';
  display: block;
  width: 28px; height: 1px;
  background: var(--accent2);
}

.hero-name {
  font-size: clamp(2.4rem, 5vw, 4rem); /* fluid: grows with viewport, capped at 4rem */
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em; /* tight tracking looks better at large sizes */
  margin-bottom: 16px;
}

/* "IVAN JORDAN" — gradient text (blue → teal) */
.hero-name span {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-tagline {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 36px;
  max-width: 560px; /* keeps lines readable — not full container width */
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap; /* buttons wrap on narrow screens */
}

/* Extra top spacing when .hero-actions appears inside the About text block */
.about-text .hero-actions {
  margin-top: 28px;
}


/* ── 07. BUTTONS ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 10px;
  background: var(--accent); /* solid blue fill */
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
  border: none;
  cursor: pointer;
}
.btn-primary:hover {
  transform: translateY(-2px);                 /* subtle lift */
  box-shadow: 0 8px 24px rgba(79,142,247,.35); /* blue glow */
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 10px;
  border: 1px solid var(--border); /* outline only — no fill */
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color .15s, border-color .15s, transform .15s;
}
.btn-ghost:hover {
  color: var(--text);
  border-color: rgba(255,255,255,.2); /* border brightens on hover */
  transform: translateY(-1px);
}


/* ── 08. PROFILE CARD ── */
.profile-card { position: relative; } /* anchor for the absolutely-positioned status badge */

.profile-frame {
  width: 280px; height: 280px;
  border-radius: 28px;
  overflow: hidden;
  border: 2px solid var(--border);
  position: relative;
  box-shadow: 0 24px 64px rgba(0,0,0,.5);
}
/* Blue tint overlay on the photo */
.profile-frame::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(79,142,247,.15), transparent 60%);
  z-index: 1;           /* sits above the <img> */
  pointer-events: none;
}

.profile-frame img {
  width: 100%; height: 100%;
  object-fit: cover;    /* fills the frame without distortion */
  display: block;
}

/* "Open to opportunities" pill — pinned to bottom-centre of the photo */
.status-badge {
  position: absolute;
  bottom: 14px; left: 50%;
  transform: translateX(-50%); /* horizontally centred */
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(10,13,20,.85);
  border: 1px solid var(--border);
  border-radius: 999px; /* fully rounded pill shape */
  padding: 6px 14px;
  font-family: var(--mono);
  font-size: 11px;
  white-space: nowrap;  /* never wraps to two lines */
  backdrop-filter: blur(8px);
}

.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent2);                  /* teal dot */
  box-shadow: 0 0 0 3px rgba(126,232,196,.2);  /* teal halo ring */
  animation: pulse 2s infinite;
}


/* ── 09. ANIMATIONS ── */
/* Pulsing halo on the status dot — halo grows then fades */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(126,232,196,.2); }
  50%       { box-shadow: 0 0 0 6px rgba(126,232,196,.05); }
}


/* ── 10. LAYOUT UTILITIES ── */
/* Centres content and constrains width across all sections */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Extra top padding used on the divider wrapper element */
.container--divider {
  padding-top: 40px;
}


/* ── 11. SECTION LABELS ── */
/* Small monospace tag above each section title, e.g. "001 — About me" */
.section-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .3em; /* wide spacing gives a technical/label feel */
  color: var(--accent);  /* blue — same colour as interactive elements */
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* Centred variant — used in the Gallery header */
.section-label--center {
  text-align: center;
  justify-content: center;
  display: flex;
}

.section-title {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: 16px;
}

/* Centred variant — used in the Gallery header */
.section-title--center {
  text-align: center;
}


/* ── 12. ABOUT SECTION ── */
#about {
  padding: 100px 0;
  border-top: 1px solid var(--border);
}

/* Two-column layout: bio text left, info cards right */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  margin-top: 48px;
}

.about-text p {
  color: white;
  line-height: 1.9; /* extra leading for comfortable long-form reading */
  margin-bottom: 18px;
  font-size: 15px;
}


/* ── 13. INFO CARDS ── */
/* 2×2 grid: Education / Languages / Interests / Focus */
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.info-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  transition: border-color .2s, transform .2s;
}
.info-card:hover {
  border-color: rgba(79,142,247,.25); /* blue border glow on hover */
  transform: translateY(-2px);
}

.info-card h3 {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
}

.info-card ul { list-style: none; }

.info-card li {
  font-size: 13px;
  color: var(--muted);
  padding: 4px 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
/* Blue arrow bullet — replaces the default list marker */
.info-card li::before {
  content: '▸';
  color: var(--accent);
  font-size: 10px;
  flex-shrink: 0;   /* bullet never squashes */
  margin-top: 4px;  /* aligns with text cap height */
}


/* ── 14. SKILLS SECTION ── */
#skills {
  padding: 80px 0;
  border-top: 1px solid var(--border);
}

/* Three columns: Mobile / Web & Backend / Design & Tooling */
.skills-wrapper {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.skill-group {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 30px;
  padding: 28px;
}

.skill-group h3 {
  font-size: 20px;
  font-family: 'Arial Black', Gadget, sans-serif;
  letter-spacing: .15em;
  color: white; /* teal headings inside skill groups */
  text-transform: uppercase;
  margin-bottom: 20px;
}

/* Pill-shaped tag for each individual skill */
.skill-tag {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 6px;
  background: rgba(79,142,247,.1);    /* blue tint — mobile skills (default) */
  border: 1px solid rgba(79,142,247,.2);
  color: var(--accent);
  font-size: 12px;
  font-family: var(--mono);
  margin: 4px 4px 4px 0;
  transition: background .2s;
}
.skill-tag.green {
  background: rgba(126,232,196,.1);   /* teal tint — web / backend skills */
  border-color: rgba(126,232,196,.2);
  color: var(--accent2);
}
.skill-tag.amber {
  background: rgba(244,168,66,.1);    /* amber tint — design / tooling skills */
  border-color: rgba(244,168,66,.2);
  color: var(--accent3);
}


/* ── 15. PROJECTS SECTION ── */
#projects {
  padding: 80px 0;
  border-top: 1px solid var(--border);
}

.project-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px;
  margin-top: 32px;
  transition: border-color .2s;
}
.project-card:hover { border-color: rgba(79,142,247,.25); }

.project-card h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}
.project-card p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
}


/* ── 16. SPORT SECTION ── */
#sport {
  padding: 80px 0;
  border-top: 1px solid var(--border);
}

.sport-intro {
  max-width: 680px;     /* narrower than full width for comfortable reading */
  color: var(--muted);
  font-size: 15px;
  line-height: 1.85;
  margin-top: 16px;
  margin-bottom: 48px;
}

/* Three trait cards: Pressure / Adaptation / Team */
.sport-traits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 48px;
}

.trait-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 22px;
  transition: border-color .2s, transform .2s;
  position: relative;
  overflow: hidden; /* clips the bottom accent line */
}
/* Gradient accent line that appears at the bottom on hover */
.trait-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  opacity: 0;
  transition: opacity .25s;
}
.trait-card:hover              { border-color: rgba(79,142,247,.3); transform: translateY(-3px); }
.trait-card:hover::after       { opacity: 1; } /* reveal bottom line on hover */

.trait-icon { font-size: 26px; margin-bottom: 12px; }
.trait-card h4 { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.trait-card p  { font-size: 13px; color: var(--muted); line-height: 1.6; }


/* ── 17. ACCORDION ── */
/* Contains the Career Timeline and toggles it open / closed */
.accordion {
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--card);
}

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 26px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  gap: 12px;
  transition: background .2s;
}
.accordion-trigger:hover { background: rgba(255,255,255,.03); }

.accordion-trigger-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Amber "LBC" badge inside the trigger button */
.accordion-trigger .sport-badge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(244,168,66,.12);
  border: 1px solid rgba(244,168,66,.25);
  color: var(--accent3);
}

/* Circular chevron button */
.acc-arrow {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s;
}
.acc-arrow svg { transition: transform .35s; }

/* When open: blue tint on arrow circle */
.accordion.open .acc-arrow {
  background: rgba(79,142,247,.12);
  border-color: rgba(79,142,247,.35);
}
/* When open: chevron rotates to point upward */
.accordion.open .acc-arrow svg { transform: rotate(180deg); }

/* Collapsible panel — max-height animates from 0 to open */
.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s cubic-bezier(0.4,0,0.2,1);
}
.accordion-panel-inner {
  padding: 0 26px 28px;
  border-top: 1px solid var(--border);
}
.accordion.open .accordion-panel { max-height: 1200px; } /* large enough for all timeline items */


/* ── 18. TIMELINE ── */
.timeline {
  position: relative;
  padding-left: 32px; /* space for the vertical line and dot markers */
  margin-top: 24px;
}
/* Vertical connecting line */
.timeline::before {
  content: '';
  position: absolute;
  left: 10px; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent), var(--accent2), transparent);
  border-radius: 2px;
}

.timeline-item {
  position: relative;
  margin-bottom: 24px;
}
.timeline-item:last-child { margin-bottom: 0; }

/* Circle marker on the vertical line */
.timeline-dot {
  position: absolute;
  left: -26px; top: 5px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--bg);       /* hollow centre matches page background */
  border: 2px solid var(--accent);
}
/* Gold dot = championship win */
.timeline-item.champion .timeline-dot {
  background: var(--accent3);
  border-color: var(--accent3);
  box-shadow: 0 0 0 4px rgba(244,168,66,.15);
}
/* Teal dot = elite level entry */
.timeline-item.elite .timeline-dot {
  background: var(--accent2);
  border-color: var(--accent2);
  box-shadow: 0 0 0 4px rgba(126,232,196,.15);
}

/* Year label above each timeline event */
.timeline-year {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* Card containing the event title and subtitle */
.timeline-content {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  transition: border-color .2s;
}
/* Border colour changes per entry type on hover */
.timeline-item:hover .timeline-content          { border-color: rgba(79,142,247,.2); }
.timeline-item.champion:hover .timeline-content { border-color: rgba(244,168,66,.25); }
.timeline-item.elite:hover .timeline-content    { border-color: rgba(126,232,196,.25); }

.timeline-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Small coloured pill badge inside the event title */
.tl-badge {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
}
.tl-badge.gold {
  background: rgba(244,168,66,.15);
  border: 1px solid rgba(244,168,66,.3);
  color: var(--accent3);
}
.tl-badge.teal {
  background: rgba(126,232,196,.12);
  border: 1px solid rgba(126,232,196,.25);
  color: var(--accent2);
}

.timeline-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}


/* ── 19. LINKS SECTION ── */
#links {
  padding: 60px 0;
  border-top: 1px solid var(--border);
}

.links-row {
  display: flex;
  gap: 16px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.link-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: border-color .2s, transform .15s;
}
.link-card:hover {
  border-color: rgba(79,142,247,.4);
  transform: translateY(-2px);
}


/* ── 20. DIVIDER ── */
/* Short gradient line between the Links and Gallery sections */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent2), transparent);
  margin: 0 auto;
  max-width: 400px; /* short centred line — not full container width */
  opacity: .4;
}


/* ── 21. GALLERY / CAROUSEL ── */
#gallery { padding: 80px 0 60px; }

.gallery-header { text-align: center; margin-bottom: 10px; }

/* The 3D stage that holds and clips the sliding cards */
.carousel-stage-wrap {
  position: relative;
  width: 100%; height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;      /* clips cards that slide out of view */
  perspective: 1200px;   /* enables 3D depth for child transforms */
}

.carousel-3d {
  position: relative;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Each individual slide card — JS sets transform/opacity/z-index */
.slide-3d {
  position: absolute; /* all cards stacked; JS moves them */
  width: 260px; height: 380px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition: all .55s cubic-bezier(.25,.46,.45,.94); /* smooth easing */
  will-change: transform, filter, opacity;             /* GPU compositing hint */
}

.slide-3d img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none; /* clicks pass through to the slide div */
}

/* Caption overlay — fades in only on the active (centre) card */
.slide-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 28px 14px 10px;
  background: linear-gradient(to top, rgba(0,0,0,.9), transparent); /* dark scrim */
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;            /* hidden by default */
  transition: opacity .3s;
}
.slide-3d.active .slide-label { opacity: 1; } /* visible only on centre card */


/* ── 22. CAROUSEL CONTROLS ── */
.carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 32px;
}

/* ← → arrow buttons */
.carousel-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s, background .2s;
}
.carousel-btn:hover {
  border-color: var(--accent);
  background: rgba(79,142,247,.1); /* blue tint on hover */
}

.carousel-dots { display: flex; gap: 7px; }

/* Small dot — one per slide */
.carousel-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.2); /* dim when not active */
  cursor: pointer;
  transition: background .25s, transform .25s;
}
.carousel-dot.active {
  background: var(--accent);  /* blue on the current slide */
  transform: scale(1.35);     /* slightly larger to draw the eye */
}

/* Text label beneath the dots — shows the current slide name */
.current-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--muted);
  text-align: center;
  margin-top: 14px;
  min-height: 18px;      /* prevents layout shift when text changes */
  text-transform: uppercase;
}


/* ── 23. FOOTER ── */
footer {
  border-top: 1px solid var(--border);
  padding: 32px 40px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  font-family: var(--mono);
}


/* ── 24. RESPONSIVE ── */
@media (max-width: 900px) {
  .hero-inner     { grid-template-columns: 1fr; }  /* stack hero text above photo */
  .profile-card   { display: none; }               /* hide photo on small screens */
  .about-grid     { grid-template-columns: 1fr; gap: 40px; }
  .skills-wrapper { grid-template-columns: 1fr; }  /* one skill group per row */
  .info-grid      { grid-template-columns: 1fr; }  /* one info card per row */
  .sport-traits   { grid-template-columns: 1fr; }  /* one trait card per row */
  nav             { padding: 14px 20px; }
  .nav-links      { display: none; }               /* hide links; only lang switcher shows */
  .hero           { padding: 100px 20px 60px; }
  .container      { padding: 0 20px; }
  footer          { padding: 24px 20px; }
}