/* Maltalents universal responsive overrides
   Doel: voorspelbare weergave op verschillende Android/iOS toestellen,
   onafhankelijk van device-pixel-ratio, browserzoom en kleine viewportverschillen.
*/

*,
*::before,
*::after { box-sizing: border-box; }

img {
  max-width: 100%;
}

/* ---------- Header / navigatie ---------- */
@media (max-width: 900px) {
  .site-header .nav {
    min-height: 0 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .site-header .brand {
    flex: 0 0 auto !important;
  }

  .site-header .brand img {
    width: clamp(112px, 26vw, 145px) !important;
    height: auto !important;
  }

  .site-header nav {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 7px 10px !important;
  }

  .site-header nav a {
    display: inline-block !important;
    white-space: nowrap !important;
    font-size: clamp(.70rem, 2.25vw, .82rem) !important;
  }

  .site-header .lang {
    flex: 0 0 auto !important;
    font-size: .74rem !important;
    padding: 6px 9px !important;
  }
}

/* ---------- Paginafotoblokken: kandidaten / werkgevers / over ons / contact ---------- */
/* Desktop blijft zoals ontworpen. Op tablet/telefoon wordt beeldverhouding leidend:
   geen vaste hoogte, geen crop; tekst staat onder de foto. */
@media (max-width: 900px) {
  .page-image-band {
    padding-top: 18px !important;
    padding-bottom: 32px !important;
  }

  .page-image-band > .container {
    width: min(100% - 20px, 1180px) !important;
    max-width: none !important;
  }

  .page-photo-card,
  .contact-photo-card {
    position: relative !important;
    overflow: hidden !important;
    min-height: 0 !important;
    height: auto !important;
    border-radius: 18px !important;
    background: #052550 !important;
  }

  .page-photo-card > img,
  .contact-photo-card > img,
  .page-image-band img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 18px 18px 0 0 !important;
  }

  .page-photo-card .page-photo-overlay,
  .contact-photo-card .page-photo-overlay {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    padding: 18px clamp(18px, 4vw, 28px) 22px !important;
    background: #052550 !important;
    color: #fff !important;
    transform: none !important;
  }

  .page-photo-card .page-photo-overlay .eyebrow,
  .contact-photo-card .page-photo-overlay .eyebrow {
    margin: 0 0 7px !important;
  }

  .page-photo-card .page-photo-overlay h2,
  .contact-photo-card .page-photo-overlay h2 {
    margin: 0 !important;
    font-size: clamp(1.45rem, 5.3vw, 2.15rem) !important;
    line-height: 1.08 !important;
  }

  .page-photo-card .page-photo-copy,
  .contact-photo-card .page-photo-copy {
    margin: 9px 0 0 !important;
    max-width: none !important;
    font-size: clamp(.88rem, 2.7vw, 1rem) !important;
    line-height: 1.45 !important;
  }
}

/* Contact-handgeschreven tekst blijft over de foto, maar schaalt met viewport. */
@media (max-width: 900px) {
  .contact-handwritten {
    position: absolute !important;
    top: 7% !important;
    right: 7% !important;
    left: auto !important;
    max-width: 42% !important;
    font-size: clamp(.82rem, 2.7vw, 1.15rem) !important;
    line-height: 1.12 !important;
    transform: translateX(-38px) rotate(-4deg) !important;
    z-index: 3 !important;
  }
}

/* ---------- Home hero ---------- */
.hero-photo-overlay-wrap {
  position: relative !important;
  overflow: hidden !important;
}
.hero-photo-overlay-wrap .hero-photo {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Staande/smalle telefoon: alle hero-tekst blijft binnen het beeld. */
@media (max-width: 600px) {
  .hero-image-copy {
    position: absolute !important;
    left: 5% !important;
    right: auto !important;
    top: 6% !important;
    width: 78% !important;
    max-width: 290px !important;
    transform: translateY(23px) !important;
    z-index: 3 !important;
  }

  .hero-handwritten {
    display: block !important;
    font-size: clamp(1.65rem, 8.2vw, 2.2rem) !important;
    line-height: 1.04 !important;
  }

  .hero-red-line {
    width: 54px !important;
    height: 4px !important;
    margin: 8px 0 7px !important;
  }

  .hero-image-copy small {
    display: block !important;
    max-width: 235px !important;
    font-size: clamp(.56rem, 2.55vw, .70rem) !important;
    line-height: 1.3 !important;
    letter-spacing: .09em !important;
  }
}

/* Liggende telefoon / kleine tablet: laat hero-tekst proportioneel schalen. */
@media (min-width: 601px) and (max-width: 950px) {
  .hero-image-copy {
    width: min(38%, 260px) !important;
  }

  .hero-handwritten {
    font-size: clamp(1.35rem, 4vw, 2rem) !important;
  }

  .hero-image-copy small {
    font-size: clamp(.50rem, 1.35vw, .68rem) !important;
    letter-spacing: .10em !important;
  }
}

/* ---------- Home: 'Wat we doen' kaarten ---------- */
/* Op telefoons/tablets: foto volledig, tekst in eigen paneel eronder.
   Hierdoor kan tekst nooit meer over elkaar vallen bij rotatie. */
@media (max-width: 950px) {
  .cards-grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .photo-card {
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 0 20px !important;
    border-radius: 18px !important;
    background: #052550 !important;
  }

  .photo-card::after {
    display: none !important;
    content: none !important;
  }

  .photo-card > img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: 0 !important;
  }

  .photo-card h3,
  .photo-card p {
    position: static !important;
    inset: auto !important;
    max-width: none !important;
    color: #fff !important;
    text-shadow: none !important;
    margin-left: 20px !important;
    margin-right: 64px !important;
  }

  .photo-card h3 {
    margin-top: 17px !important;
    margin-bottom: 7px !important;
    font-size: clamp(1.25rem, 4.6vw, 1.5rem) !important;
    line-height: 1.15 !important;
  }

  .photo-card p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-size: clamp(.88rem, 2.7vw, .98rem) !important;
    line-height: 1.42 !important;
  }

  .photo-card > span {
    position: absolute !important;
    left: auto !important;
    right: 18px !important;
    bottom: 18px !important;
    width: 38px !important;
    height: 38px !important;
    display: grid !important;
    place-items: center !important;
    color: #fff !important;
  }
}

/* Zeer smalle schermen: iets meer ruimte voor teksten. */
@media (max-width: 380px) {
  .photo-card h3,
  .photo-card p {
    margin-right: 54px !important;
    margin-left: 16px !important;
  }

  .page-photo-card .page-photo-overlay,
  .contact-photo-card .page-photo-overlay {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}


/* ---------- Compacte header op telefoon in liggende stand ---------- */
@media (orientation: landscape) and (max-width: 950px) and (max-height: 600px) {
  .site-header .nav {
    min-height: 56px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .site-header .brand img {
    width: 105px !important;
    height: auto !important;
  }

  .site-header nav {
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .site-header nav a {
    font-size: .70rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  .site-header .lang {
    padding: 4px 7px !important;
    font-size: .68rem !important;
    line-height: 1.1 !important;
  }
}