/* ===========================================
   DTI RESPONSIVE CSS — DroneTech Inspecties
   =========================================== */

/* -------------------------------------------
   TABLET (< 992px) — navigatie
   ------------------------------------------- */
@media (max-width: 991.98px) {
  /* Logo + hamburger boven de overlay houden (zichtbaar/klikbaar) */
  .dti-nav .navbar-brand,
  .dti-nav .navbar-toggler {
    position: relative;
    z-index: 1030;
  }

  /* Volledig-scherm overlay-menu */
  .dti-nav .navbar-collapse {
    position: fixed;
    inset: 0;
    z-index: 1020;
    background-color: var(--dti-navy);
    padding: 100px 24px 48px;
    overflow-y: auto;
  }

  .dti-nav .navbar-collapse.show,
  .dti-nav .navbar-collapse.collapsing {
    display: flex;
  }

  .dti-nav .navbar-collapse.collapsing {
    height: auto !important;
    transition: none;
  }

  .dti-nav .navbar-nav {
    margin: auto;
    width: 100%;
    align-items: center;
    text-align: center;
    gap: 4px;
  }

  .dti-nav .nav-link {
    font-size: 22px;
    padding: 14px 0;
  }

  .dti-nav .ms-lg-3 {
    margin-top: 24px;
    margin-left: 0 !important;
  }

  .dti-nav .btn-dti-primary {
    padding: 14px 40px;
    font-size: 17px;
    justify-content: center;
  }

  /* Sectoren-submenu binnen de overlay: lichtgrijs kaartje, onderscheidend */
  .dti-dropdown {
    background-color: var(--dti-lightgrey);
    border: none;
    border-radius: 8px;
    margin: 10px auto 6px;
    padding: 8px;
    min-width: auto;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  }

  .dti-dropdown .dropdown-item {
    color: var(--dti-navy);
    font-size: 16px;
    padding: 10px 20px;
    border-radius: 4px;
    text-align: center;
  }

  .dti-dropdown .dropdown-item:hover,
  .dti-dropdown .dropdown-item:focus {
    background-color: rgba(11, 31, 51, 0.06);
    color: var(--dti-navy);
  }
}

/* -------------------------------------------
   TABLET STAAND / GROOT MOBIEL (< 768px)
   ------------------------------------------- */
@media (max-width: 767.98px) {
  .dti-section {
    padding: 48px 0;
  }

  .dti-section-sm {
    padding: 32px 0;
  }

  .dti-hero-video {
    height: auto;
    min-height: 85svh;
  }

  /* Hero-inhoud op mobiel bovenaan uitlijnen i.p.v. centreren (voorkomt afgekapte kop) */
  .dti-hero {
    align-items: flex-start;
  }

  .dti-hero-content {
    padding-top: 32px;
  }

  /* Homepage-hero: knoppen onderaan, net boven de scroll-pijl */
  .dti-hero-video .dti-hero-content {
    display: flex;
    flex-direction: column;
    min-height: 78svh;
  }

  .dti-hero-video .dti-hero-cta {
    margin-top: auto;
  }

  .dti-hero-content {
    padding: 40px 0;
  }

  .dti-hero-cta {
    flex-direction: column;
    gap: 12px;
  }

  .dti-hero-cta .btn-dti-primary,
  .dti-hero-cta .btn-dti-secondary {
    width: 100%;
    justify-content: center;
  }

  .dti-hero-form {
    margin-top: 32px;
  }

  /* Blok 4: beeld boven, tekst onder */
  .dti-row-flip .dti-col-tekst {
    order: 2;
  }

  .dti-row-flip .dti-col-beeld {
    order: 1;
  }

  .dti-case-cijfer {
    font-size: 44px;
  }

  .dti-case-tekst {
    font-size: 16px;
  }

  .dti-cta-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .dti-cta-buttons .btn-dti-cta-primary,
  .dti-cta-buttons .btn-dti-cta-secondary {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    justify-content: center;
  }

  .dti-footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .dti-footer-legal {
    justify-content: center;
    gap: 14px;
  }

  /* Footer-kolommen op mobiel centreren, in lijn met het logo */
  .dti-footer-top {
    text-align: center;
  }
}

/* -------------------------------------------
   KLEIN MOBIEL (< 576px)
   ------------------------------------------- */
@media (max-width: 575.98px) {
  .dti-topbar-tekst {
    display: none;
  }

  .dti-topbar-inner {
    gap: 20px;
    justify-content: center;
  }

  .dti-topbar-item svg {
    width: 16px;
    height: 16px;
  }

  .dti-case-cijfer {
    font-size: 40px;
  }

  .dti-footer-legal {
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }
}