/* Resume components, adapted from design/components/bundle.css.
   Fonts and tokens come from tokens.css; layout primitives from Bootstrap. */

.hr-page { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-serif); font-size: 18px; line-height: 30px; }
.hr-page *, .hr-page *::before, .hr-page *::after { box-sizing: border-box; }
.hr-wrap { max-width: 760px; margin: 0 auto; padding: var(--space-5) var(--space-4); }
.hr-eyebrow { font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--secondary-strong); margin: 0 0 var(--space-2); }
/* The favicon image beside the name, one em tall and sitting on the text's em box. */
.hr-h1-icon { display: inline-block; height: 1em; width: auto; vertical-align: -0.2em; margin-inline-end: .3em; }
.hr-h1 { font-size: 36px; line-height: 44px; font-weight: 700; margin: 0; color: var(--primary-strong); }
.hr-h2 { font-size: 28px; line-height: 36px; font-weight: 700; margin: 0; color: var(--primary-strong); }
.hr-h3 { font-size: 22px; line-height: 30px; font-weight: 700; margin: 0; color: var(--ink); }
.hr-meta { font-size: 14px; line-height: 22px; font-style: italic; color: var(--ink-muted); margin: 0; }
.hr-text { font-size: 16px; line-height: 26px; margin: var(--space-2) 0 0; }
a.hr-link, .hr-link, .hr-list a, .hr-text a, .hr-meta a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.hr-link:hover, .hr-list a:hover, .hr-text a:hover, .hr-meta a:hover { color: var(--primary-strong); }
.hr-page :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Header */
.hr-header { padding-bottom: var(--space-4); border-bottom: 1px solid var(--hairline); }
/* Two columns: contact details | citizenship & languages. Inline (not nested flex)
   rows inside each column: WeasyPrint stacks nested flex rows vertically. */
.hr-facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1) var(--space-6); margin: var(--space-3) 0 0; font-size: 16px; line-height: 26px; }
.hr-fact { margin-block-end: var(--space-1); }
.hr-fact-label { font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); margin-inline-end: var(--space-2); }
.hr-fact-icon { display: inline-block; width: 15px; height: 15px; margin-inline-end: var(--space-1); vertical-align: -2px; color: var(--ink-muted); }
.hr-fact .hr-tags { display: inline; margin: 0; }
.hr-fact .hr-tag { display: inline-block; margin-inline-end: var(--space-1); }

/* Sections */
.hr-section { margin-block-start: var(--space-7); }
.hr-section > .hr-h2 { margin-block-end: var(--space-2); }

/* Entries */
.hr-entry { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-4); padding: var(--space-5) 0; border-bottom: 1px solid var(--hairline); }
.hr-entry:last-child { border-bottom: 0; }
.hr-entry--plain { grid-template-columns: 1fr; padding: var(--space-3) 0; }
.hr-mark { width: 56px; height: 56px; align-self: start; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 22px; background: var(--primary-tint); color: var(--primary-strong); border: 1px solid var(--hairline); }
.hr-entry--volunteer .hr-mark { background: var(--secondary-tint); color: var(--secondary-strong); }
.hr-mark--logo, .hr-entry--volunteer .hr-mark--logo { background: #fff; padding: 4px; overflow: hidden; }
.hr-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hr-role { font-size: 16px; line-height: 26px; font-weight: 700; margin: 0; }
.hr-list { margin: var(--space-3) 0 0; padding-inline-start: var(--space-5); font-size: 16px; line-height: 26px; }
.hr-list li + li { margin-top: var(--space-1); }
.hr-list li::marker { color: var(--secondary); }
.hr-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.hr-tag { font-size: 14px; line-height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--primary-tint); color: var(--ink); }
.hr-tag--cause { background: var(--secondary-tint); color: var(--secondary-strong); }
.hr-tag code { font-family: var(--font-mono); font-size: 13px; color: inherit; background: none; padding: 0; }

/* Talk cards (YouTube thumbnail on screen only; no embed) */
.hr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-5); margin-top: var(--space-3); }
.hr-talk { background: var(--surface-raised); border: 1px solid var(--hairline); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; }
.hr-talk-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--hairline); background: var(--surface-sunken); }
.hr-talk-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hr-talk-body { padding: var(--space-4); }
.hr-talk-title { color: inherit; text-decoration: none; }
.hr-talk-title:hover { color: var(--primary-strong); text-decoration: underline; text-underline-offset: 3px; }
.hr-talk:has(.hr-talk-thumb:hover) .hr-talk-title { color: var(--primary-strong); }
.hr-badge { display: inline-block; font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .06em; padding: 0 var(--space-2); border-radius: var(--radius-sm); border: 1px solid var(--secondary); color: var(--secondary-strong); margin-inline-end: var(--space-2); }

/* Entry-type badges in the "current" section, in the entry's top-right corner. */
.hr-entry-head { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); align-items: start; }
.hr-entry-head .hr-badge { margin: var(--space-1) 0 0; text-transform: lowercase; }
.hr-badge--experience { background: var(--primary-tint); border-color: var(--primary); color: var(--primary-strong); }
.hr-badge--volunteer { background: var(--secondary-tint); border-color: var(--secondary); color: var(--secondary-strong); }
.hr-badge--projects { background: var(--surface-sunken); border-color: var(--border); color: var(--ink-muted); }

code { font-family: var(--font-mono); font-size: .9em; color: var(--ink); background: var(--surface-sunken); padding: 0 var(--space-1); border-radius: var(--radius-sm); }

.hr-emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-style: normal; font-weight: 400; font-size: 1.1em; line-height: 1; vertical-align: -0.1em; }

@media (max-width: 520px) {
  .hr-facts { grid-template-columns: 1fr; }
  .hr-entry { grid-template-columns: 1fr; }
}