@import "./common.css";

:root {
  --min-font-size: 12px;
}

@page {
  margin: 1em;
}

html {
  max-width: 210mm;
  container: root / inline-size;
}

@container root (width > 0) {
  body {
    --vw-relative-font-size: 0.83cqw;
  }
}

a {
  text-decoration: none;
  color: currentcolor;
}

h2 {
  font-size: 1.25em;
}

p {
  line-height: 1;
}

main,
footer {
  font-size: 10px;
}

footer {
  & h3 {
    & > svg {
      display: none;
    }

    & > .technology {
      margin-left: auto;
      align-self: center;
      text-transform: capitalize;
    }
  }
}

.translation,
:is(.design-assist, .ui-ux):nth-child(1n) {
  display: none;
}

header {
  position: relative;
  column-gap: 5em;
  margin-bottom: 3.75em;
}

:where(
    .demos,
    .skills-preview,
    .expertise,
    .typical-apps,
    .trainning,
    .positions-wrapper,
    footer
  )
  > h2 {
  line-height: 1.25;
  border-bottom: 0.125em solid black;
  box-sizing: border-box;
}

.business-card {
  justify-content: space-between;
}

.avatar.screen {
  display: none;
}

.fullname {
  margin-bottom: 0.5em;
}

.short-introduction {
  min-width: 27.594cqw;
}

.short-introduction h1 {
  display: flex;
  flex-direction: column;
  row-gap: 0.1em;

  & :where(.web, .contact) {
    position: relative;
    top: 2.75em;
  }
}

.short-introduction h2 {
  position: relative;
  bottom: 2.25em;
}

.technologies {
  --icon-size: 2.375em;
}

.contact,
.web {
  display: block;
  font-size: 0.375em;
}

.download {
  display: none;
}

.long-introduction h2 {
  opacity: 60%;
  margin-bottom: 0.6em;
}

.long-introduction p {
  line-height: 1.475;
}

main {
  display: flex;
  flex-direction: column;
}

main > * {
  margin-bottom: 2.5em;
}

.demos {
  display: flex;
  flex-direction: column;
  order: 1;
}

.demos-inner-wrapper {
  row-gap: 1em;
}

.demos-inner-wrapper {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--columns-gap);
  box-sizing: border-box;
}

.demos-inner-wrapper > .half-split {
  display: contents;
}

.demo {
  display: flex;
  flex-direction: column;
  flex: 1 1 max(40%, 21.075em);
}

.demo a {
  font-size: 0.9em;
}

.demo a,
.link::before {
  line-height: 1.25;
}

.demo > :not(.demo-title) {
  order: 1;
}

.demo-title {
  display: flex;
  column-gap: 0.5em;
  text-transform: capitalize;
  line-height: 1.5;

  & > *:first-child {
    font-weight: bold;
  }

  & > *:nth-child(2) {
    font-weight: normal;
    font-size: 0.85em;
  }
}

.link {
  display: flex;
  align-items: flex-end;
  line-height: 1;
  column-gap: 1em;
}

.link::before {
  display: block;
  font-weight: bold;
  color: rgb(115, 115, 115);
}

.video::before {
  content: "video:";
}

.application::before {
  content: "demo:";
}

.github::before {
  content: "github:";
}

.skills-preview > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  font-weight: bold;
  text-transform: capitalize;

  & li {
    border: solid 1px;
    padding-inline: 0.375em;
    padding-block: 0.125em;
    border-radius: 0.125em;
  }
}

.expertise,
.typical-apps,
.trainning {
  row-gap: 0.5em;
}

:where(.skills-preview, .expertise, .typical-apps, .trainning, .demos) > h2 {
  margin-bottom: 0.75em;
}

:where(.expertise, .typical-apps) > p::before {
  content: "•";
  display: inline-block;
  margin-right: 0.5em;
}

.expertise > p {
  display: flex;
}

:where(.expertise, .typical-apps) > p :not(strong) {
  display: none;
}

:where(.expertise, .typical-apps) strong {
  font-weight: normal;
}

.typical-apps {
  display: none;
}

.typical-apps strong {
  display: inline-block;
}

.typical-apps strong::first-letter {
  text-transform: uppercase;
}

.typical-apps > p:has(.topic) {
  margin: 0.5em 0;
}

.typical-apps .topic {
  line-height: 1;
}

.typical-apps .topic::before {
  content: "○";
}

.typical-apps .topic:first-of-type:not(:first-child) {
  margin-top: 0.5em;
}

.typical-apps .topic:not(:first-of-type) {
  margin-top: 0.25em;
}

.trainning {
  order: 1;
  margin-inline: 0;
}

.positions-wrapper {
  order: 1;
}

footer {
  margin-top: 0.5em;
}

.positions {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 35px;
}

.positions > li {
  --position-padding: 0.625em;

  width: 100%;
  box-sizing: border-box;
  padding: var(--position-padding);
  padding-bottom: 0.5em;
  display: inline-flex;
  flex-direction: column;
  vertical-align: middle;
  border: 1px solid #000;
  border-radius: 0.25em;

  /* squirel */
  &:nth-child(1) {
    grid-row-end: span 3;
  }

  /* hyperlex collapsed */
  &:nth-child(2) {
    grid-column-end: span 2;
  }

  /* bforcure */
  &:nth-child(3) {
    grid-row-end: span 8;
    grid-column-end: span 2;
  }

  /* hyperlex expanded */
  &:nth-child(4) {
    grid-row-end: span 8;
  }

  /* bhv.fr */
  &:nth-child(5) {
    grid-row-end: span 2;
    grid-column-end: span 2;
  }

  /* leboncoin */
  &:nth-child(6) {
    grid-row-end: span 10;
    grid-column-end: span 3;
  }

  /* idtgv */
  &:nth-child(7) {
    grid-row-end: span 17;
  }

  /* yellow lab */
  &:nth-child(8) {
    grid-row-end: span 18;
  }

  /* FDJ */
  &:nth-child(9) {
    grid-row-end: span 15;
  }

  & > section {
    margin-top: 1.5em;
    display: flex;
    flex-direction: column;
    row-gap: 1em;

    & > .technology {
      align-self: end;

      & + svg {
        display: none;
      }
    }
  }
}

.column {
  position: relative;
}

.group,
.timelapse {
  color: rgb(115, 115, 115);
}

.timelapse {
  font-size: 0.7em;
}

.time:first-child:not(:only-child) {
  margin-right: auto;
}

.month {
  font-weight: normal;
}

footer > :where(:not(last-child)) {
  margin-bottom: 3.5em;
}