/* =============================================================
   Page override — Обо мне (About)
   Figma file ppMhxLpkjU8DT8grVOigNF, frame 45:162
   Byte-by-byte fixes; overrides styles.css (linked after it).
   Scoped to this page's unique classes (.about-*, .hobbies, .hobby).
   ============================================================= */

/* ---- Hobby photo carousel: real photo + 2 placeholders. Dots below image, arrows on the title row (matches Figma) ---- */
.hobby-car { position: relative; aspect-ratio: 279 / 299; border-radius: 18px; overflow: hidden; background: #e7e9ec; }
.hobby-track { display: flex; width: 100%; height: 100%; transition: transform .4s cubic-bezier(.22,.61,.36,1); }
.hobby-track > * { flex: 0 0 100%; width: 100%; height: 100%; }
.hobby-car img { object-fit: cover; aspect-ratio: auto; border-radius: 0; }
.hobby-ph { display: grid; place-items: center; background: linear-gradient(135deg, #e7e9ec, #d6dade); color: #9aa0a8; font-size: 14px; font-weight: 600; }
/* dot indicator — left-aligned bars between image and title */
.hobby-dots { display: flex; align-items: center; gap: 6px; }
.hd { width: 8px; height: 6px; border-radius: 90px; background: rgba(24,26,31,.22); cursor: pointer; transition: width .25s, background .25s; }
.hd.active { width: 32px; background: #181a1f; }
/* title row — h4 on the left, nav arrows on the right */
.hobby-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hobby-head h4 { margin: 0; }
.hobby-nav { display: flex; gap: 8px; flex: 0 0 auto; }
.hobby-arrow { width: 38px; height: 38px; border-radius: 90px; border: 1px solid #181a1f; background: transparent; display: grid; place-items: center; font-size: 19px; line-height: 1; color: #181a1f; cursor: pointer; transition: background .2s, color .2s, transform .15s; }
.hobby-arrow:hover { background: #181a1f; color: #fff; }
.hobby-arrow:active { transform: scale(.94); }

/* ---- INTRO (node 45:187) ---- */
/* Figma container gap is 16px (was 18px) */
.about-text { gap: 16px; }

/* h1 uses .h2 type — Figma: 44px / letter-spacing -0.66px (was 38px) */
.about-text .h2 { font-size: 44px; letter-spacing: -0.66px; }

/* Body paragraphs — Figma line-height 1.5 (was 1.6) */
.about-text p { line-height: 1.5; }

/* ---- HOBBIES (node 45:193) ---- */
/* Figma: white background (was --surface-2 #fbfbfb) */
.hobbies { background: #ffffff; }

/* Figma: top corners rounded 60px */
.hobbies { border-radius: 60px 60px 0 0; }

/* Figma: section padding-block 80px (was .section 88px) */
.hobbies.section { padding-block: 80px; }

/* Heading — Figma: 32px / line-height 1.1 / letter-spacing -0.32px (was 38px) */
/* (heading margin-top 8px set inline in about.html, matching hh gap 8px) */
.hobbies h2.h2 { font-size: 32px; line-height: 1.1; letter-spacing: -0.32px; }

/* hrow / grid parent gap 28px (was 30px) */
.hobbies-grid { margin-top: 28px; }

/* Each hobby card — Figma inner gap 6px (was 12px) */
.hobby { gap: 6px; }

/* Hobby title — Figma line-height 1.3 */
.hobby h4 { line-height: 1.3; }

/* Hobby description — Figma line-height 1.58 (was 1.55) */
.hobby p { line-height: 1.58; }

/* =============================================================
   Page override — Резюме (Resume)
   Figma file ppMhxLpkjU8DT8grVOigNF, frame "Резюме" (node 54:334),
   card node 54:358. Byte-by-byte fixes; overrides styles.css.
   Scoped to this page's unique classes (.resume-*, .exp, .rs-block).
   ============================================================= */

/* Page title (54:357: 40px / tracking -0.4px / 800) */
.resume-page .page-title { font-size: clamp(30px, 5vw, 40px); letter-spacing: -0.4px; margin-bottom: 30px; }

/* Card (54:358: radius 24 / padding 44 / max-w 1168 / shadow 0 18 25 .22) */
.resume-card { border-radius: 24px; padding: clamp(28px, 4vw, 44px); max-width: 1168px; box-shadow: 0 18px 25px rgba(0, 0, 0, .22); }

/* Card head (54:359) */
.resume-head { border-bottom-color: #ecedef; }
.resume-head h1 { font-size: 26px; letter-spacing: -0.26px; }
.resume-head .role { font-size: 14.5px; margin-top: 3px; }

/* Body grid (body 54:367 gap 48 / sbcol 54:368 width 300) */
.resume-body { grid-template-columns: 300px 1fr; }

/* Sidebar block headers (54:370: 11.5px / tracking 1.035 / 700 / #6e747c) */
.rs-block h4 { font-size: 11.5px; letter-spacing: 1.035px; margin-bottom: 7px; }
/* Sidebar copy (54:371: 13.5px / #181a1f / 500) */
.rs-block p, .rs-block li { font-size: 13.5px; font-weight: 500; }

/* Experience column (exp 54:391 gap 22) */
.resume-main { gap: 22px; }
/* Inline "Опыт" header (54:392: 11.5px / tracking 1.035) */
.resume-main > h4 { font-size: 11.5px; letter-spacing: 1.035px; }

/* Job title (54:394: 18px / 700) */
.exp h3 { font-size: 18px; font-weight: 700; }
/* Company (54:395: 14.5px) */
.exp .company { font-size: 14.5px; }
/* Period (54:396: 12.5px / 500) */
.exp .period { font-size: 12.5px; font-weight: 500; }
/* Summary (54:397: 14px) */
.exp .summary { font-size: 14px; }
/* Sub-section headers (54:398: 12px / tracking 0.48 / 600) */
.exp h5 { font-size: 12px; letter-spacing: 0.48px; font-weight: 600; }

/* Bullet rows (54:402: 13.5px). All body bullets dark for readability. */
.exp ul li { font-size: 13.5px; color: #181a1f; padding-left: 16px; }

/* Bullet marker: Figma uses a 6x12px vertical rounded marker (dw 54:400);
   prod was a 6px round dot. Recreate the vertical bar in accent blue. */
.exp ul li::before { left: 0; top: 5px; width: 6px; height: 12px; border-radius: 3px; }

/* ---- Mobile: our .resume-body override above re-set a 2-col grid with no media query,
   which clobbered styles.css's mobile stack. Reset to one column on tablet/phone. ---- */
@media (max-width: 860px) {
  .resume-body { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .resume-head { gap: 10px; }
  .resume-head h1 { font-size: 23px; }
}