@font-face {
    font-family: "AkzidenzExtended";
    src: url("AkzidenzGrotesk-Extended.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

/* Reset alles */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: #FDFBFB;
    height: 100vh;
}

.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(24, 1fr);
    gap: 20px;
    padding: 20px;
    height: 100vh;
}

.bar-target {
    grid-column: 1 / -1;
    grid-row: 12 / span 2;
}


.bar {
    position: absolute;
    inset: 0;
    background-color: #161616;

    display: flex;
    gap: 20px; /* ✅ zoals grid gap */

    padding: 0;
    border-radius: 0;
    z-index: 10;
    align-items: center;
}



.bar-inner {
    flex: 1; /* ✅ elk blok even groot */
    height: 50px; /* ✅ start klein */

    background-color: #161616;
    border-radius: 30px;

    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;


    font-family: "AkzidenzExtended", sans-serif;
    text-transform: uppercase;
    font-size: 20px;
    color: white;
    text-decoration: none;

    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.bar-inner.open {
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px;
}

.line {
    width: 100%;
    height: 70px;

    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;
    position: relative;
}


.bar-inner.open .line {
  display: none; /* ✅ pill verdwijnt volledig */
}

.pill-title {
  position: absolute;
  font-size: 20px;
  line-height: 1;
}


    
    
.social-link {
    font-family: "AkzidenzExtended", sans-serif;
    text-transform: uppercase;
    font-size: 14px;

    color: #161616;
    text-decoration: none;
    opacity: 0.6;

    align-self: end;      /* ✅ onderaan */
    justify-self: end;    /* ✅ rechts in de column */
}

.social-link:hover {
    opacity: 1;
}

.mail {
    grid-column: 10;
    grid-row: 24;
}

.linkedin {
    grid-column: 11;
    grid-row: 24;
}

.github {
    grid-column: 12;
    grid-row: 24;
}

.title {
    grid-column: 1 / -1; /* hele breedte */
    grid-row: 5;

    justify-self: center; /* ✅ horizontaal */
    align-self: center;   /* ✅ verticaal in row */

    font-family: "AkzidenzExtended", sans-serif;
    font-size: 48px;
    color: #161616;
}

.subtitle {
    grid-column: 1 / -1;
    grid-row: 6;

    justify-self: center;
    align-self: center;

    font-family: "AkzidenzExtended", sans-serif;
    font-size: 24px;
    color: #7F7F7F;
}

.plus-button {
    grid-column: 12;      /* onder laatste button */
    grid-row: 14;         /* 2 rows lager */

    width: 40px;
    height: 40px;

    background: #161616;
    color: white;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: "AkzidenzExtended", sans-serif;
    font-size: 28px;

    justify-self: center;
    align-self: center;
}

.plus-icon {
    width: 20px;
    height: 20px;
    position: relative;
}

.plus-icon::before,
.plus-icon::after {
    content: "";
    position: absolute;
    background: white;
    border-radius: 2px;
}

/* horizontale lijn */
.plus-icon::before {
    width: 100%;
    height: 3px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

/* verticale lijn */
.plus-icon::after {
    height: 100%;
    width: 3px;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

.info {
  opacity: 0;
  transform: translateY(20px);
  font-size: 14px;
  text-transform: none;
font-family: "AkzidenzExtended", sans-serif;
  color: white;
  position: absolute;
  bottom: 20px;
  text-align: center;
  width: 100%;
}

.info {
  opacity: 0;
  transform: translateY(30px);

  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  padding: 40px;
  gap: 25px;

  text-align: left;
}

/* Grote title */
.project-title {
  font-size: 58px;
  font-weight: bold;
  text-transform: uppercase;
  color: white;
  line-height: 1;
}

/* Tags */
.code-lang {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.code-lang span {
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.75);
  color: black;
  font-weight: 500;
}

/* Context section */
.context h3 {
  font-size: 28px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.context p {
  max-width: 520px;
  font-size: 18px;
  line-height: 1.5;
  opacity: 0.9;
}

/* Button */
.context button {
  margin-top: 25px;
  padding: 12px 22px;
  border-radius: 999px;
  border: none;
  font-weight: bold;
  cursor: pointer;
}

.code-lang {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.code-lang span {
  padding: 7px 14px;
  border-radius: 999px;
  background: #B6B6B6;

  font-size: 14px;
  font-weight: 500;
  color: black;
}

.project-title {
  font-size: 52px;
  font-weight: 900;
  text-transform: uppercase;
  color: white;
  line-height: 1;
}

.context h3 {
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
}

.context p {
  max-width: 820px;
  font-size: 16px;
  line-height: 1.5;
  opacity: 0.9;
}

.context button {
  margin-top: 25px;
  padding: 8px 20px;
  border-radius: 999px;
  border: none;
  font-weight: 700;
  cursor: pointer;
  background-color: aqua;
  text-transform: uppercase;
  font-size: 16px;
}

.details {
  opacity: 0;
  display: none;
  flex-direction: column;
  gap: 20px;
  margin-top: 40px;
}

.bar-inner.detail-open .details {
  display: flex;
    opacity: 1;
}



.bar-inner.hidden {
  opacity: 0;
  pointer-events: none;
  flex: 0;
  width: 0;
  margin: 0;
}

.bar-inner.detail-open {
  position: fixed;
  inset: 40px;
  z-index: 999;
  border-radius: 30px;
  overflow-y: auto;
}

.title,
.subtitle,
.social-link {
  opacity: 0;
  transform: translateY(20px);
}