/* Page look on screen (index.html): the PDF's design shown as a sheet.
   Print output comes from style.css, so everything here is screen-only.
   Shared pieces (contact strip, surname size, dark palette variables) live in style.css. */

@media screen {
  html.tpl body { background: #d9d9d9; }

  html.tpl .toc, html.tpl .foot { display: none !important; }

  /* the sheet */
  html.tpl .layout {
    --bs-body-bg: #fff;
    --bs-body-color: #222;
    --bs-emphasis-color: #111;
    --bs-secondary-color: #555;
    --bs-border-color: #cfcfcf;
    --bs-card-bg: transparent;
    --accent: #f2c12e;
    --side-bg: #f1f1f1;
    --ink: #1f1f1f;
    --rule: #333;
    --line: #555;
    --dot: #222;
    --timeline: #bbb;
    --list-rule: #e3e3e3;
    --photo-tone: #dedede;
    color: #222;
    background: #fff;
    max-width: 250mm;
    margin: 2rem auto;
    padding: 0 !important;
    box-shadow: 0 6px 30px rgba(0,0,0,.18);
    font-size: 15px;
    display: grid;
    grid-template-columns: 34% minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 0;
    grid-template-areas:
      "head head"
      "photo summary"
      "side mainc";
  }
  html.tpl .masthead { grid-area: head; }
  html.tpl .col-side { display: block; grid-area: side; }
  html.tpl .col-main { display: block; grid-area: mainc; }
  html.tpl .col-side, html.tpl .col-main, html.tpl .masthead, html.tpl .photo-wrap, html.tpl #summary { align-self: stretch; }
  html.tpl .photo-wrap { grid-area: photo; }
  html.tpl #summary { grid-area: summary; }

  /* header band */
  html.tpl .masthead {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem;
    border-top: 22px solid #3a3a3a;
    padding: 2.4rem 1.8rem 1.15rem 2.4rem;
    margin: 0;
  }
  /* the logo sits in the band's corner: as far from the top and the left edge as from the name,
     and as tall as the name block */
  html.tpl .mast-brand { gap: 2.2rem; }
  /* page controls (language, theme) live in the dark top band, left of the accent strip,
     so the contact block holds only contacts and the header stays as tall as the name */
  html.tpl .masthead { position: relative; }
  html.tpl .mast-tools {
    position: absolute; top: -22px; right: calc(1.8rem + 2.5 * .85rem + .9rem);
    display: flex; gap: 1.1rem; height: 22px; align-items: center;
    font-size: .75rem; color: #e6e6e6;
  }
  html.tpl .mast-tools .link-btn { line-height: 1; opacity: .85; }
  html.tpl .mast-tools .link-btn:hover, html.tpl .mast-tools .link-btn:focus-visible { opacity: 1; text-decoration: underline; }
  html.tpl .mast-tools .bi { margin-right: .25rem; }
  html.tpl .mast-logo { height: 8.45rem; }
  html.tpl .mast-name h1 { font-size: 3.1rem; font-weight: 300; line-height: 1.05; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); margin-bottom: .5rem; }
  html.tpl .mast-name h1 .last { display: block; font-weight: 600; }
  html.tpl .mast-name .headline { font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: #444; }
  html.tpl .mast-contact { font-size: .85rem; --strip-up: calc(22px + 2.4rem); }

  /* side column: photo and skills */
  html.tpl .photo-wrap { background: var(--side-bg); margin: 0; padding: 2rem 1.4rem 1rem 1.8rem; display: flex; align-items: center; justify-content: center; position: relative; }
  html.tpl .photo { position: relative; }
  html.tpl #summary { padding: 2rem 1.8rem .5rem 1.6rem; margin: 0 !important; }
  html.tpl .photo { width: 150px; height: 150px; border-radius: 6px; margin: 0 auto; }
  html.tpl .col-side { background: var(--side-bg); padding: 1.2rem 1.4rem 2.5rem 1.8rem; }
  html.tpl .col-side section + section { margin-top: 1.8rem; }
  html.tpl .col-side section { margin-bottom: 0 !important; }

  /* main column */
  html.tpl .col-main { padding: 1.2rem 1.8rem 2rem 1.6rem; }
  html.tpl .col-main section { margin-bottom: 1.6rem !important; }

  html.tpl .section-h { font-size: .95rem; letter-spacing: .22em; color: var(--ink); border-bottom: 1px solid var(--rule); padding-bottom: .3rem; margin-bottom: .9rem; }

  html.tpl #summary p { position: relative; padding-left: 1.8rem; color: var(--bs-secondary-color); margin: 0; }
  html.tpl #summary p::before { content: "\201C"; position: absolute; left: 0; top: -.5rem; font-size: 2.4rem; font-weight: 800; color: #999; line-height: 1; }

  /* experience timeline */
  html.tpl .card { border: 0 !important; background: transparent !important; }
  html.tpl .card-body { padding: 0 !important; }
  html.tpl .job { position: relative; margin: 0 !important; padding: 0 0 2rem 1.5rem; border-left: 1px solid var(--timeline) !important; border-radius: 0 !important; }
  html.tpl .job:last-child { padding-bottom: 0; }
  html.tpl .job::before { content: ""; position: absolute; left: -4px; top: .4rem; width: 7px; height: 7px; border-radius: 50%; background: var(--dot); }
  html.tpl .job h3 { font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .3rem; }
  html.tpl .job header { margin-bottom: .9rem !important; }
  html.tpl .job-meta { justify-content: flex-start !important; gap: 0 !important; margin-bottom: 0 !important; }
  html.tpl .job-meta > span + span::before { content: "|"; padding: 0 .45rem; color: #999; }
  html.tpl .job h4 { margin-top: 1rem !important; font-size: .9rem; }
  html.tpl .job .tags { margin-top: .4rem; padding-top: 0; border-top: 0; }

  /* skills in the side column */
  html.tpl .skills { display: block; margin: 0 !important; --bs-gutter-x: 0; --bs-gutter-y: 0; }
  html.tpl .skills dt, html.tpl .skills dd { width: 100%; padding: 0; }
  html.tpl .skills dt { margin-top: 1rem; margin-bottom: .45rem; font-size: .9rem; }
  html.tpl .skills dt:first-child { margin-top: 0; }
  html.tpl .tag { color: #444; border-color: #999; white-space: normal; }

  /* side lists: title, then the date on its own muted line, thin separators */
  html.tpl .plain li { flex-direction: column; gap: 0; border-bottom: 1px dashed var(--list-rule); padding: .45rem 0; font-size: .9rem; line-height: 1.35; }
  html.tpl .plain li:first-child { padding-top: 0; }
  html.tpl .plain li:last-child { border-bottom: 0; }
  html.tpl .plain li > :first-child { font-weight: 600; }
  html.tpl .plain li > :last-child { font-size: .82rem; margin-top: .1rem; }
  html.tpl #languages p, html.tpl #homelab p { font-size: .9rem; }
}

/* narrow screens: stack everything, keep the look */
@media screen and (max-width: 767.98px) {
  html.tpl .layout {
    margin: 0; box-shadow: none;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "head" "photo" "summary" "mainc" "skills" "languages" "certifications" "education" "homelab";
  }
  html.tpl .col-side { display: contents; }
  html.tpl .photo-wrap { grid-area: photo; background: var(--side-bg); margin: 0; padding: 1.4rem 1rem; }
  html.tpl #summary { padding: 1.4rem 1rem 0; }
  html.tpl #skills, html.tpl #languages, html.tpl #certifications, html.tpl #education, html.tpl #homelab { background: var(--side-bg); padding: 1.4rem 1rem; margin: 0 !important; }
  html.tpl .col-side section + section { margin-top: 0; }
  html.tpl .masthead { flex-direction: column; padding: 1.6rem 1rem 1rem; }
  html.tpl .mast-name h1 { font-size: 2.3rem; }
  html.tpl .mast-brand { gap: 1.2rem; }
  html.tpl .mast-logo { height: 6.3rem; }
  html.tpl .mast-contact { align-self: stretch; --strip-up: 0; }
  html.tpl .mast-tools { right: 1rem; }
  html.tpl .col-main { padding: 1.4rem 1rem; }
}

/* dark mode: Stack Overflow palette (variables defined in style.css) */
@media screen {
  html.tpl[data-bs-theme="dark"] body { background: var(--so-bg-sunken); }
  html.tpl[data-bs-theme="dark"] .layout {
    --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-border-color: var(--so-border);
    --accent: var(--so-orange);
    --side-bg: var(--so-bg-raised);
    --ink: var(--so-text-strong);
    --rule: var(--so-text-muted);
    --line: var(--so-border);
    --dot: var(--so-orange);
    --timeline: var(--so-border);
    --list-rule: var(--so-border);
    --photo-tone: #454545;
    color: var(--so-text);
    background: var(--so-bg);
    box-shadow: 0 6px 30px rgba(0,0,0,.5);
  }
  html.tpl[data-bs-theme="dark"] .masthead { border-top-color: var(--so-bg-raised); }
  html.tpl[data-bs-theme="dark"] .mast-name .headline { color: var(--so-text-muted); }
  html.tpl[data-bs-theme="dark"] #summary p::before { color: var(--so-orange); }
  html.tpl[data-bs-theme="dark"] .job-meta > span + span::before { color: var(--so-border); }
  html.tpl[data-bs-theme="dark"] .tag { color: var(--so-tag-text); border-color: var(--so-tag-border); }
  html.tpl[data-bs-theme="dark"] .mast-contact a { color: var(--so-link); }
}