/* Jakub Březík — resume site, 2026. Thin layer on top of Bootstrap 5.3. */

/* language switching: content for the other language is removed from layout */
html[data-lang="en"] [lang="cs"],
html[data-lang="cs"] [lang="en"] { display: none !important; }

.container-narrow {
  max-width: 46rem;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.controls { backdrop-filter: blur(8px); }

/* ---------- screen layout: one column, photo beside the name ---------- */

.layout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1.5rem;
  grid-template-areas:
    "photo head"
    "toc toc"
    "summary summary"
    "experience experience"
    "projects projects"
    "skills skills"
    "certifications certifications"
    "education education"
    "homelab homelab"
    "languages languages"
    "foot foot";
}
.col-main, .col-side { display: contents; }
.masthead { grid-area: head; align-self: center; }
.photo-wrap { grid-area: photo; align-self: center; }
.toc { grid-area: toc; }
#summary { grid-area: summary; }
#experience { grid-area: experience; }
#projects { grid-area: projects; }
#skills { grid-area: skills; }
#certifications { grid-area: certifications; }
#education { grid-area: education; }
#homelab { grid-area: homelab; }
#languages { grid-area: languages; }
.foot { grid-area: foot; }

.masthead { margin-bottom: 1.5rem; }
.mast-brand { display: flex; align-items: flex-start; gap: 1rem; }
.mast-logo { display: block; flex: none; height: 4.5rem; width: auto; }
/* on screen the black mark is toned down to #464646 (invert 27.45% of black), in both themes; paper keeps it black */
@media screen { .mast-logo { filter: invert(.2745); } }
.photo-wrap { margin: 0 0 1.5rem; }

@media (max-width: 575.98px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "photo" "head" "toc" "summary" "experience" "projects" "skills" "certifications" "education" "homelab" "languages" "foot";
  }
  .photo-wrap { margin-bottom: 1rem; }
}

.photo {
  width: 128px;
  height: 128px;
  object-fit: cover;
  border-radius: var(--bs-border-radius-xl);
  display: block;
}

.section-h {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--bs-secondary-color);
  border-bottom: 1px solid var(--bs-border-color);
  padding-bottom: .35rem;
  margin-bottom: 1rem;
}

.job ul { padding-left: 1.2rem; margin-bottom: .5rem; }
.job li { margin-bottom: .35rem; }
.job li::marker { color: var(--bs-secondary-color); }

/* tags: small outlined buttons, not interactive */
.tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.job .tags { margin-top: .75rem; padding-top: .75rem; border-top: 1px dashed var(--bs-border-color); }
.tag {
  display: inline-block;
  font-size: .78rem;
  line-height: 1.2;
  padding: .25rem .55rem;
  border: 1px solid var(--bs-secondary-color);
  border-radius: var(--bs-border-radius-sm);
  color: var(--bs-secondary-color);
  background: transparent;
  white-space: nowrap;
}

.skills dt { font-weight: 600; }
.skills dd { margin-bottom: 0; }

.plain li {
  display: flex; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid var(--bs-border-color);
  padding: .4rem 0;
}
.plain li > :last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 575.98px) {
  .plain li { flex-direction: column; gap: 0; }
}

/* ---------- print: two-column A4 resume ---------- */

@media print {
  @page { size: A4; margin: 10mm 0 10mm 0; }
  @page :first { margin-top: 0; }

  :root, html[data-bs-theme="dark"] {
    color-scheme: light;
    --bs-body-bg: #fff;
    --bs-body-color: #222;
    --bs-secondary-color: #555;
    --bs-border-color: #cfcfcf;
    --accent: #f2c12e;
    --ink: #1f1f1f;
    /* no tinted side column on paper: a printed CV should not spend toner on backgrounds */
    --side-bg: transparent;
  }

  html { font-size: 9.4pt; }
  body { background: #fff !important; color: var(--bs-body-color) !important; }
  .controls, .toc, .foot, .d-print-none { display: none !important; }

  .container-narrow { max-width: none; padding: 0 !important; }

  .layout {
    display: grid;
    grid-template-columns: 68mm 1fr;
    column-gap: 0;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "head head"
      "photo summary"
      "side mainc";
  }
  .col-side, .col-main, .masthead, .photo-wrap, #summary { align-self: stretch; }
  .photo-wrap { grid-area: photo; }
  #summary { grid-area: summary; }
  .masthead { grid-area: head; }
  .col-side { display: block; grid-area: side; }
  .col-main { display: block; grid-area: mainc; }

  /* header band */
  .masthead {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 10mm 8mm 6mm 10mm;
    margin: 0;
    background: #fff;
  }
  .mast-brand { gap: 8mm; }
  .mast-logo { height: 27.5mm; }
  .mast-name h1 { font-size: 28pt; font-weight: 300 !important; line-height: 1.05; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); margin-bottom: 2mm; }
  .mast-name h1 .last { display: block; font-weight: 600; }
  .mast-name .headline { font-size: 8pt; letter-spacing: .12em; text-transform: uppercase; color: #444; margin: 0; white-space: nowrap; }
  .mast-contact { font-size: 8pt; --strip-up: 10mm; --line: #555; }

  /* side column */
  .photo-wrap { background: var(--side-bg); margin: 0; padding: 8mm 6mm 4mm 8mm; display: flex; align-items: center; justify-content: center; position: relative; }
  .photo { position: relative; }
  #summary { padding: 8mm 8mm 2mm 7mm; margin: 0 !important; }
  .photo { width: 40mm; height: 40mm; border-radius: 1.6mm; margin: 0 auto; }
  .col-side { background: var(--side-bg); padding: 4mm 6mm 0 8mm; }
  .photo-wrap, .col-side { border-right: 1px solid #ddd; }
  .col-side section { margin-bottom: 7mm !important; }

  /* main column */
  .col-main { padding: 4mm 8mm 0 7mm; }
  .col-main section { margin-bottom: 6mm !important; }

  .section-h { font-size: 10pt; letter-spacing: .2em; color: var(--ink); border-bottom: 1px solid #333; padding-bottom: 1.2mm; margin-bottom: 3.5mm; }

  /* about me with quotation mark */
  #summary p { position: relative; padding-left: 7mm; color: #444; margin: 0; }
  #summary p::before { content: "\201C"; position: absolute; left: 0; top: -2mm; font-size: 26pt; font-weight: 800; color: #999; line-height: 1; }

  /* experience as a timeline */
  .card { border: 0 !important; background: transparent !important; }
  .card-body { padding: 0 !important; }
  .job { position: relative; margin: 0 !important; padding: 0 0 4.5mm 6mm; border-left: 1px solid #bbb !important; border-radius: 0 !important; }
  .job:last-child { padding-bottom: 0; }
  .job::before { content: ""; position: absolute; left: -1.1mm; top: 1.3mm; width: 2.2mm; height: 2.2mm; border-radius: 50%; background: #222; }
  .job h3 { font-size: 9.5pt; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 1mm; }
  .job header { margin-bottom: 2.6mm !important; }
  .job-meta { justify-content: flex-start !important; gap: 0 !important; font-size: 8.5pt; margin-bottom: 0 !important; }
  .job-meta > span + span::before { content: "|"; padding: 0 1.6mm; color: #999; }
  .job h4 { margin-top: 2.4mm !important; margin-bottom: .6mm; font-size: 9pt; }
  .job p { margin-bottom: 1mm; }
  .job ul { margin-bottom: .8mm; padding-left: 4mm; }
  .job li { margin-bottom: .3mm; }
  .job .tags { margin-top: 1.6mm; padding-top: 0; border-top: 0; }
  .tag { padding: .5mm 1.6mm; font-size: 7.2pt; color: #444; border-color: #999; white-space: normal; }
  .contact-img { filter: none !important; }

  /* side lists */
  .skills { display: block; margin: 0 !important; --bs-gutter-x: 0; --bs-gutter-y: 0; }
  .skills dt, .skills dd { width: 100%; flex: 0 0 100%; padding: 0; }
  .skills dt { margin-top: 3.2mm; margin-bottom: 1.2mm; font-size: 8.8pt; }
  .skills dt:first-child { margin-top: 0; }
  .skills dd { margin-bottom: 1mm; }
  /* side lists: title, then the date on its own muted line, thin separators */
  .plain li { flex-direction: column; gap: 0; border-bottom: 1px dashed #c8c8c8; padding: 1.4mm 0; font-size: 8.8pt; line-height: 1.3; }
  .plain li:first-child { padding-top: 0; }
  .plain li:last-child { border-bottom: 0; }
  .plain li > :first-child { font-weight: 600; }
  .plain li > :last-child { font-size: 8pt; margin-top: .4mm; }
  #languages p, #homelab p { font-size: 8.8pt; }

  .section-h, .job header, h3, h4 { break-after: avoid; }
  li, .tags, .skills dd, .plain li { break-inside: avoid; }
  a { color: inherit !important; text-decoration: none !important; }
}

/* ---------- dark mode: Stack Overflow (Stacks) dark palette ---------- */

html[data-bs-theme="dark"] {
  --so-bg: #2d2d2d;
  --so-bg-raised: #393939;
  --so-bg-sunken: #232629;
  --so-text: #e7e9eb;
  --so-text-strong: #f2f2f3;
  --so-text-muted: #acb2b8;
  --so-border: #4a4e51;
  --so-link: #6cbbf7;
  --so-link-hover: #9cc3db;
  --so-blue: #0a95ff;
  --so-blue-hover: #0074cc;
  --so-orange: #f48225;
  --so-tag-text: #9cc3db;
  --so-tag-border: #4d6b80;

  --bs-body-bg: var(--so-bg);
  --bs-body-color: var(--so-text);
  --bs-emphasis-color: var(--so-text-strong);
  --bs-secondary-color: var(--so-text-muted);
  --bs-secondary-bg: var(--so-bg-raised);
  --bs-tertiary-bg: var(--so-bg-raised);
  --bs-border-color: var(--so-border);
  --bs-link-color: var(--so-link);
  --bs-link-color-rgb: 108, 187, 247;
  --bs-link-hover-color: var(--so-link-hover);
  --bs-link-hover-color-rgb: 156, 195, 219;
}
html[data-bs-theme="dark"] .card { --bs-card-bg: var(--so-bg); --bs-card-border-color: var(--so-border); }
html[data-bs-theme="dark"] .controls { background: var(--so-bg-raised) !important; border-bottom-color: var(--so-orange) !important; border-bottom-width: 3px !important; }
html[data-bs-theme="dark"] .btn-primary {
  --bs-btn-bg: var(--so-blue); --bs-btn-border-color: var(--so-blue); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--so-blue-hover); --bs-btn-hover-border-color: var(--so-blue-hover);
  --bs-btn-active-bg: var(--so-blue-hover); --bs-btn-active-border-color: var(--so-blue-hover);
}
html[data-bs-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: var(--so-text-muted); --bs-btn-border-color: var(--so-border);
  --bs-btn-hover-bg: var(--so-bg-raised); --bs-btn-hover-color: var(--so-text); --bs-btn-hover-border-color: var(--so-text-muted);
}
html[data-bs-theme="dark"] .toc .btn-light {
  --bs-btn-bg: var(--so-bg-raised); --bs-btn-color: var(--so-text); --bs-btn-border-color: var(--so-bg-raised);
  --bs-btn-hover-bg: var(--so-border); --bs-btn-hover-color: var(--so-text-strong); --bs-btn-hover-border-color: var(--so-border);
}
html[data-bs-theme="dark"] .tag { color: var(--so-tag-text); border-color: var(--so-tag-border); }
html[data-bs-theme="dark"] .job h4 { color: var(--so-text-strong); }

/* surname: one step smaller than the first name (template page and PDF only) */
@media print { .mast-name h1 .last { font-size: 1.15em; } }
html.tpl .mast-name h1 .last { font-size: 1.15em; }

/* contact block (template header and PDF): right-aligned text on ruled lines,
   icons inside an accent strip that runs up through the top bar */
.mast-contact {
  --strip: 2.5em;
  position: relative;
  margin: 0;
  padding: 0 0 .9em;
  text-align: right;
}
.mast-contact::after {
  content: "";
  position: absolute; right: 0; bottom: 0;
  width: var(--strip); height: .9em;
  background: var(--accent, #f2c12e);
}
.mast-contact::before {
  content: "";
  position: absolute; right: 0; bottom: 100%;
  width: var(--strip); height: var(--strip-up, 0);
  background: var(--accent, #f2c12e);
}
.mast-contact li { display: grid; grid-template-columns: minmax(0, 1fr) var(--strip); align-items: stretch; }
.mast-contact .c-text {
  display: flex; align-items: center; justify-content: flex-end;
  padding: .5em 1em .5em 3em;
  border-bottom: 1px solid var(--line, #555);
  white-space: nowrap;
}
.mast-contact li:last-child .c-text { border-bottom: 0; }
.mast-contact .bi { display: flex; align-items: center; justify-content: center; color: #222; background: var(--accent, #f2c12e); }
.contact-img { height: 1.15em; width: auto; }
html[data-bs-theme="dark"] .contact-img { filter: invert(1) brightness(.92); }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.mast-contact a, .mast-contact .link-btn { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.mast-contact a:hover, .mast-contact .link-btn:hover { border-bottom-color: currentColor; }

/* print-only rows: hidden on screen; Bootstrap's d-print-block would force display:block on the grid rows */
.print-only { display: none !important; }
@media print {
  ul.print-only { display: block !important; }
  li.print-only { display: grid !important; }
}

/* languages: name and level on one line */
.plain li.inline { flex-direction: row !important; justify-content: flex-start !important; gap: .35em !important; align-items: baseline; }
.plain li.inline > :last-child { font-size: inherit !important; margin-top: 0 !important; font-weight: 400; }
.plain li > :only-child { font-size: inherit !important; margin-top: 0 !important; }

/* lists that hold both language versions: first/last-row rules must follow the visible rows,
   otherwise the Czech rows sit lower (hidden English row takes :first-child) */
html[data-lang="cs"] .plain li[lang="en"]:first-child + li[lang="cs"] { padding-top: 0 !important; }
html[data-lang="en"] .plain li[lang="en"]:nth-last-child(2) { border-bottom: 0 !important; }

/* phone link on screen: the number image is scaled to match the text in the other rows */
.mast-contact .js-tel .contact-img { height: 1.4em; margin: -.15em 0; }

/* project screenshots: one large thumbnail and four small ones; the full image opens in a dialog */
.shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; align-items: start; margin: 1rem 0 .9rem; }
.shots figure:first-child { grid-column: span 2; grid-row: span 2; }
.shots figure { margin: 0; }
.shots img { display: block; width: 100%; height: auto; border-radius: var(--bs-border-radius); border: 1px solid var(--bs-border-color); }
.shots a:hover img, .shots a:focus-visible img { border-color: var(--bs-primary); }
.shots figcaption { font-size: .75rem; color: var(--bs-secondary-color); margin-top: .25rem; line-height: 1.2; }
@media (max-width: 575.98px) { .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shots figure:first-child { grid-row: auto; } }
.shot-dialog { padding: .6rem; border: 0; border-radius: var(--bs-border-radius-lg); background: var(--bs-body-bg); max-width: min(96vw, 1600px); cursor: zoom-out; }
.shot-dialog::backdrop { background: rgba(0, 0, 0, .75); }
.shot-dialog img { display: block; max-width: 100%; max-height: 85vh; height: auto; margin: 0 auto .4rem; }