/* a-propos.css
   ─────────────────────────────────────────────── */

/* ── HERO override ── */
.page-hero {
  position: relative;
  overflow: hidden;
}

/* ── BIO — photo + texte ── */
.about-grid {
  display: grid;
  grid-template-columns: 460px 1fr;
  min-height: 660px;
}
.about-photo-col {
  position: relative; overflow: hidden;
  border-right: 1px solid var(--border);
}
.about-photo {
  width: 100%; height: 100%; min-height: 660px;
  object-fit: cover; object-position: center top; display: block;
  filter: grayscale(15%) brightness(.88);
  transition: filter 1s cubic-bezier(.16,1,.3,1);
}
.about-photo:hover { filter: grayscale(0%) brightness(.97); }

/* floating badge on the photo */
.about-photo-badge {
  position: absolute; bottom: 1.5rem; left: 1.5rem;
  display: inline-flex; align-items: center; gap: .65rem;
  background: var(--bg);
  border: 1px solid var(--border-2);
  padding: .55rem 1rem;
  font-size: .65rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.about-avail {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e; flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(34,197,94,.18);
  animation: pulse-avail 2.4s ease-in-out infinite;
}
@keyframes pulse-avail {
  0%,100% { box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
  50%      { box-shadow: 0 0 0 6px rgba(34,197,94,.06); }
}

.about-text-col {
  padding: 5rem clamp(2rem,5vw,5.5rem);
  display: flex; flex-direction: column; justify-content: center;
  gap: 1.6rem;
}
.about-text-col p {
  color: var(--muted); line-height: 1.9;
  font-size: .97rem; margin: 0;
}
.about-text-col p:first-of-type {
  font-size: 1.1rem; line-height: 1.76;
  color: var(--text); font-weight: 350;
  padding-left: 1.2rem;
  border-left: 2px solid var(--accent);
}
.about-text-col strong { color: var(--text); font-weight: 600; }

/* ── STATS ── */
.about-stats {
  display: grid; grid-template-columns: repeat(4,1fr);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.a-stat {
  padding: 3.5rem clamp(1.5rem,3vw,3.5rem);
  display: flex; flex-direction: column; gap: .5rem;
  border-right: 1px solid var(--border);
  position: relative; overflow: hidden;
  transition: background .28s;
}
.a-stat:last-child { border-right: none; }
.a-stat:hover { background: var(--surface); }
.a-stat::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.a-stat:hover::after { transform: scaleX(1); }
.a-stat .stat-num {
  font-family: 'PPTelegraf',sans-serif; font-weight: 900;
  font-size: clamp(3rem,5.5vw,5rem);
  letter-spacing: -.05em; line-height: 1; color: var(--text);
}
.a-stat .stat-unit {
  font-family: 'PPTelegraf',sans-serif; font-weight: 900;
  font-size: 1.15rem; color: var(--accent); display: inline;
}
.a-stat p {
  font-size: .74rem; color: var(--muted);
  line-height: 1.5; margin-top: .3rem;
}

/* ── SKILLS ── */
.skills-section {
  padding: 8rem clamp(1.5rem,4vw,4rem);
  border-bottom: 1px solid var(--border);
}
.skills-section > h2 {
  font-family: 'PPTelegraf',sans-serif; font-weight: 900;
  font-size: clamp(1.6rem,3vw,2.6rem); letter-spacing: -.028em;
  margin-bottom: 4rem; color: var(--text);
  display: flex; align-items: center; gap: 1.2rem;
}
.skills-section > h2::after {
  content: ''; flex: 1; height: 1px;
  background: var(--border); display: block;
}
.skills-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 0;
  border: 1px solid var(--border);
}
.skill-item {
  padding: 2.8rem;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
  transition: background .2s;
}
.skill-item:nth-child(3n)    { border-right: none; }
.skill-item:nth-last-child(-n+3):nth-child(3n+1),
.skill-item:nth-last-child(-n+3):nth-child(3n+2),
.skill-item:nth-last-child(-n+3):nth-child(3n+3),
.skill-item:last-child       { border-bottom: none; }

.skill-cat {
  font-size: .58rem; letter-spacing: .2em; color: var(--accent);
  margin-bottom: 1.2rem; display: block; text-transform: uppercase;
  font-weight: 600;
}
.skill-item h3 {
  font-family: 'PPTelegraf',sans-serif; font-weight: 900;
  font-size: 1.1rem; letter-spacing: -.018em;
  margin-bottom: .75rem; color: var(--text);
}
.skill-item p { font-size: .87rem; color: var(--muted); line-height: 1.72; }

/* ── TOOLS ── */
.tools-section {
  padding: 4rem clamp(1.5rem,4vw,3.5rem) 4.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.tools-header { margin-bottom: 2.5rem; }
.tools-section h2 {
  font-family: 'PPTelegraf',sans-serif; font-weight: 900;
  font-size: 1.2rem; letter-spacing: -.02em;
  margin-bottom: .5rem; color: var(--text);
}
.tools-sub {
  font-size: .88rem; color: var(--muted);
  line-height: 1.65; max-width: 52ch; margin: 0;
}
.tools-cats { display: flex; flex-direction: column; gap: 0; margin: 0; }
.tool-cat-row {
  display: grid; grid-template-columns: 160px 1fr;
  gap: 1.5rem; align-items: flex-start;
  padding: 1.1rem 0; border-top: 1px solid var(--border);
}
.tool-cat-row:last-child { border-bottom: 1px solid var(--border); }
.tool-cat-row dt {
  font-size: .62rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted);
  padding-top: .45rem; font-weight: 500;
}
.tool-cat-row dd { margin: 0; }
.tools-list { display: flex; gap: .4rem; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.tool {
  font-size: .72rem; letter-spacing: .05em;
  border: 1px solid var(--border); padding: .38rem .85rem;
  color: var(--text); cursor: default;
  transition: border-color .2s, color .2s, background .2s;
}
.tool:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }

/* ── ENGAGEMENT ── */
.engagement-section {
  padding: 8rem clamp(1.5rem,4vw,4rem);
  border-bottom: 1px solid var(--border);
}
.engagement-section h2 {
  font-family: 'PPTelegraf',sans-serif; font-weight: 900;
  font-size: clamp(1.6rem,3vw,2.6rem); letter-spacing: -.028em;
  margin-bottom: 4rem; color: var(--text);
  display: flex; align-items: center; gap: 1.2rem;
}
.engagement-section h2::after {
  content: ''; flex: 1; height: 1px;
  background: var(--border); display: block;
}
.engagement-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 2rem;
}
.eng-item {
  padding: 2.8rem;
  border: 1px solid var(--border);
  border-left: 2px solid transparent;
  transition: border-color .3s, border-left-color .3s,
              background .3s, transform .38s cubic-bezier(.16,1,.3,1);
}
.eng-item:hover {
  border-color: var(--border-2);
  border-left-color: var(--accent);
  background: var(--surface);
  transform: translateY(-4px);
}
.eng-tag {
  font-size: .58rem; letter-spacing: .2em; color: var(--accent);
  display: block; margin-bottom: 1.4rem; text-transform: uppercase;
  font-weight: 600;
}
.eng-item h3 {
  font-family: 'PPTelegraf',sans-serif; font-weight: 900;
  font-size: 1.08rem; letter-spacing: -.015em;
  margin-bottom: .8rem; color: var(--text);
}
.eng-item p { font-size: .87rem; color: var(--muted); line-height: 1.72; }

/* ── CTA ── */
.about-cta {
  padding: 8rem clamp(1.5rem,4vw,3.5rem);
  display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 2rem;
}
.about-cta h2 {
  font-family: 'PPTelegraf',sans-serif; font-weight: 900;
  font-size: clamp(2.4rem,5.5vw,5rem); letter-spacing: -.04em;
  color: var(--text); max-width: 660px; line-height: .9;
}

/* ── MOBILE ── */
@media (max-width: 1100px) {
  .about-grid { grid-template-columns: 360px 1fr; }
}
@media (max-width: 1024px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-photo { min-height: 460px; aspect-ratio: 4/3; height: auto; }
  .about-photo-col { border-right: none; border-bottom: 1px solid var(--border); }
  .about-text-col { padding: 3.5rem 2rem; }
  .about-stats { grid-template-columns: repeat(2,1fr); }
  .a-stat:nth-child(2) { border-right: none; }
  .a-stat:nth-child(n+3) { border-top: 1px solid var(--border); }
}
@media (max-width: 768px) {
  .skills-section, .tools-section { padding: 4rem 1.5rem; }
  .skills-grid { grid-template-columns: 1fr; }
  .skill-item {
    border-right: none; padding: 2rem 0 !important;
    border-bottom: 1px solid var(--border);
  }
  .skill-item:last-child { border-bottom: none; }
  .skill-item:nth-child(n+4) { border-top: none; }
  .a-stat { padding: 2rem 1.5rem; }
  .about-cta { padding: 4.5rem 1.5rem; flex-direction: column; align-items: flex-start; }
  .engagement-section { padding: 4rem 1.5rem; }
  .engagement-grid { grid-template-columns: 1fr; gap: 1rem; }
  .eng-item:hover { transform: none; }
  .tool-cat-row { grid-template-columns: 1fr; gap: .6rem; }
  .tool-cat-row dt { padding-top: 0; }
  .about-text-col p:first-of-type { border-left: none; padding-left: 0; }
}