/* De download blijft verborgen zolang de PDF-CV nog de vorige werkstatus vermeldt. */
.download-button {
  display: none;
}

/* Echte foto van het openbare Instagram-profiel van Thibault. */
.hero-section {
  background-image: url('/images/thibault-hero-original.jpg');
  background-position: center center;
}

.typed-cursor {
  margin-left: 2px;
  color: #149ddd;
}

.typed-cursor--blink {
  animation: caret-blink 0.8s steps(1) infinite;
}

@keyframes caret-blink {
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .typed-cursor--blink { animation: caret-blink 0.8s steps(1) infinite; }
}

/* Typografie uit de originele iPortfolio-hero. */
.hero-content h1 {
  color: #fff;
  font-family: "Raleway", sans-serif;
  font-size: 64px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.hero-content p {
  color: #fff;
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.5;
  margin: 5px 0 0;
  min-height: 39px;
}

@media (max-width: 760px) {
  .hero-content h1 { font-size: 42px; }
  .hero-content p { font-size: 22px; }
}

.nav-icon {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 24px;
}

.nav-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.social-links svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.social-links .brand-icon-filled {
  fill: currentColor;
  stroke: none;
}

.social-links .brand-dot {
  fill: currentColor;
  stroke: none;
}

.project-gallery {
  display: grid;
  gap: 28px;
  margin: 42px 0;
}

.project-gallery figure {
  margin: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dce4eb;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(4, 11, 20, 0.08);
}

.project-gallery img {
  display: block;
  width: 100%;
  height: auto;
}

.project-gallery figcaption {
  display: grid;
  gap: 5px;
  padding: 20px 24px;
}

.project-gallery figcaption strong {
  color: #173b6c;
  font: 700 20px "Raleway", sans-serif;
}

.project-gallery figcaption span {
  color: #6f7180;
}

.portfolio-card img.portfolio-image {
  width: 100%;
  object-fit: cover;
  object-position: left top;
  letter-spacing: normal;
}

.portfolio-card img.website-build-preview {
  width: 100%;
  object-fit: cover;
  object-position: center top;
}

.website-build-card {
  grid-column: 1 / -1;
}

@media (max-width: 760px) {
  .website-build-card { grid-column: auto; }
}

.post-list {
  display: grid;
  gap: 32px;
  padding-top: 10px;
}

.post-card {
  display: grid;
  grid-template-columns: minmax(300px, 46%) 1fr;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dce4eb;
  border-radius: 8px;
  box-shadow: 0 12px 35px rgba(4, 11, 20, 0.08);
  transition: transform .2s ease, box-shadow .2s ease;
}

.post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(4, 11, 20, 0.13);
}

.post-card > img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
  object-position: center top;
}

.post-card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 42px;
}

.post-card-content h2 {
  margin: 8px 0 14px;
  color: #173b6c;
  font-size: 30px;
}

.post-card-content > p:not(.eyebrow) { color: #6f7180; }

.post-card-link {
  margin-top: 14px;
  color: #149ddd;
  font-weight: 700;
}

@media (max-width: 760px) {
  .post-card { grid-template-columns: 1fr; }
  .post-card > img { min-height: 210px; }
  .post-card-content { padding: 26px; }
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 36px;
  padding: 9px 16px 9px 10px;
  border: 1px solid #d5e1ea;
  border-radius: 999px;
  color: #173b6c;
  font-weight: 600;
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
}

.back-link-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: #e9f7fd;
  color: #149ddd;
}

.back-link-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.back-link:hover {
  color: #149ddd;
  border-color: #149ddd;
  transform: translateX(-3px);
}

/* Responsive finishing for phones, tablets and smaller laptops. */
img, svg { max-width: 100%; }
.prose, .detail-summary, .page-intro { overflow-wrap: anywhere; }
html.anchor-navigation { scroll-behavior: auto; }

.mobile-toggle {
  padding: 0;
  place-items: center;
  width: 46px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 10px;
  background: rgba(4, 11, 20, .72);
  box-shadow: 0 8px 24px rgba(4, 11, 20, .24);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.mobile-toggle svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.menu-line {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .22s ease, opacity .18s ease;
}

.mobile-toggle[aria-expanded="true"] .menu-line-top { transform: translateY(5px) rotate(45deg); }
.mobile-toggle[aria-expanded="true"] .menu-line-middle { opacity: 0; }
.mobile-toggle[aria-expanded="true"] .menu-line-bottom { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 1200px) {
  .section { padding-inline: 34px; }
  .detail-page, .page-hero, .home-intro, .contact-page,
  .card-list, .post-list, .about-grid, .timeline-section, .cta-band {
    padding-inline: 34px;
  }
}

@media (max-width: 1024px) {
  .mobile-toggle { display: grid; }
  body.menu-open { overflow: hidden; }
  .sidebar { box-shadow: 12px 0 30px rgba(4, 11, 20, .22); }
  .hero-content { margin-left: 7%; margin-right: 7%; }
  .project-gallery { margin-block: 30px; }
}

@media (max-width: 760px) {
  .hero-section {
    min-height: 100svh;
    height: 100svh;
    background-position: 100% center;
  }

  .hero-overlay {
    background: linear-gradient(90deg, rgba(1,8,16,.74) 0%, rgba(1,8,16,.36) 62%, rgba(1,8,16,.12) 100%);
  }

  .hero-content {
    align-self: flex-end;
    margin: 0 20px max(88px, 12svh);
    width: calc(100% - 40px);
  }

  .hero-content h1 {
    max-width: 100%;
    font-size: clamp(32px, 8.6vw, 40px);
    line-height: 1.08;
  }

  .hero-content h1 span { display: block; }

  .hero-content p {
    font-size: clamp(18px, 5.2vw, 23px);
    line-height: 1.35;
    min-height: 62px;
  }

  .typed { padding-bottom: 3px; }
  .section { padding: 52px 20px; }
  .section-title { margin-bottom: 30px; }
  .section-title h2 { font-size: 29px; }

  .about-layout > img {
    width: 210px;
    height: 250px;
    aspect-ratio: auto;
    margin: 0 auto 4px;
    border-radius: 12px;
    object-fit: cover;
    object-position: center 22%;
    box-shadow: 0 10px 28px rgba(4, 11, 20, .12);
  }

  .detail-page, .page-hero, .home-intro, .contact-page,
  .card-list, .post-list, .about-grid, .timeline-section, .cta-band {
    padding: 48px 20px;
  }

  .detail-page h1, .page-hero h1 {
    font-size: clamp(32px, 9vw, 44px);
    line-height: 1.15;
  }

  .portfolio-image { height: 210px; }
  .portfolio-card img.portfolio-image { height: 210px; }
  .portfolio-card > div:last-child { padding: 17px; }
  .services-grid { gap: 28px; }
  .services-grid article { gap: 15px; }
  .contact-card { gap: 24px; }
  .project-visual { margin-block: 28px; padding: 24px 18px; }
  .project-gallery figcaption { padding: 17px 18px; }
  .back-link { margin-top: 28px; }
}

@media (max-width: 420px) {
  .mobile-toggle { right: 14px; top: 14px; width: 44px; height: 40px; }
  .sidebar { width: min(300px, 88vw); padding: 22px 18px; }
  .sidebar-profile img { width: 104px; height: 104px; }
  .sidebar-name { font-size: 21px; }
  .side-nav { margin-top: 24px; gap: 2px; }
  .side-nav a { padding-block: 10px; }
  .hero-content h1 { font-size: clamp(30px, 8.5vw, 36px); }
  .hero-content p { font-size: 19px; }
  .about-layout > img { width: 180px; height: 215px; }
  .contact-cta { padding: 24px 20px; }
  .contact-cta h3 { font-size: 25px; }
  .post-card-content { padding: 22px; }
  .post-card-content h2 { font-size: 25px; }
}