/* Content-only mobile overrides. Header/menu/logo rules are centralized in mobile-menu-unify.css */
@media (max-width: 767px) {
  html,
  body {
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100%;
  }

  body {
    position: relative;
  }

  .main-content,
  .about-main,
  .projects-main,
  .other-main {
    overflow-x: hidden !important;
  }

  .container {
    padding: 0 14px !important;
  }

  .intro-screen {
    padding: 16px 12px !important;
  }

  .intro-subtitle {
    font-size: clamp(1rem, 4.3vw, 1.22rem) !important;
    margin-bottom: 14px !important;
  }

  .loading-bar {
    width: min(280px, 80vw) !important;
  }
}

@media (max-width: 767px) {
  .about-hero,
  .projects-hero,
  .other-hero {
    padding: 34px 0 !important;
  }

  .about-hero h1,
  .projects-hero h1,
  .other-hero h1 {
    margin: 0 !important;
    font-size: clamp(1.8rem, 9vw, 2.25rem) !important;
  }

  .about-intro p,
  .pillar p,
  .tl-content p,
  .career-info p,
  .process-list li,
  .form-top p {
    overflow-wrap: anywhere !important;
  }
}

@media (max-width: 767px) {
  .projects-highlights {
    padding: 16px 0 8px !important;
  }

  .highlights-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .highlight-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 4px !important;
    min-height: 80px !important;
    padding: 12px 14px !important;
    border: 1px solid #e9e2d6 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.07) !important;
  }

  .gallery {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .project-card,
  .project-media {
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  .project-media {
    aspect-ratio: 4 / 3 !important;
  }

  .project-media img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .project-overlay {
    opacity: 1 !important;
    padding: 12px !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.04) 72%) !important;
  }
}

@media (max-width: 767px) {
  .project-lightbox {
    inset: 0 !important;
    z-index: 5000 !important;
  }

  .project-lightbox .lightbox-dialog {
    position: fixed !important;
    inset: 10px !important;
    margin: 0 !important;
    max-width: none !important;
    max-height: calc(100dvh - 20px) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    background: #0f1526 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  .lightbox-backdrop {
    backdrop-filter: blur(8px) !important;
  }

  .lightbox-media-panel {
    background: #111a30 !important;
    padding: 10px !important;
  }

  .lightbox-main-image {
    width: 100% !important;
    max-height: 42vh !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    border-radius: 12px !important;
  }

  .lightbox-side-panel {
    background: #0f1526 !important;
    color: #f2f4fa !important;
    padding: 14px !important;
    overflow-y: auto !important;
  }

  .lightbox-kicker,
  .lightbox-note h3 {
    color: #f3c98b !important;
  }

  #lightboxTitle {
    color: #ffffff !important;
    margin: 0 !important;
    overflow-wrap: anywhere !important;
  }

  .lightbox-subtitle,
  .lightbox-note p,
  .lightbox-meta li {
    color: #dfe6f7 !important;
    overflow-wrap: anywhere !important;
  }

  .lightbox-meta li {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
  }

  .lightbox-close {
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    background: rgba(10, 14, 24, 0.76) !important;
    color: #ffffff !important;
    z-index: 8 !important;
  }
}

@media (max-width: 767px) {
  .career-section {
    padding: 38px 0 46px !important;
  }

  .career-shell {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .career-info,
  .career-form-wrap,
  .career-form,
  .form-top {
    border-radius: 14px !important;
  }

  .career-info,
  .career-form {
    padding: 16px !important;
  }

  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .type-switch {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    border-radius: 12px !important;
  }

  .type-option {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .form-actions {
    gap: 10px !important;
  }

  .form-actions small,
  .form-actions .btn {
    width: 100% !important;
  }

  .form-actions .btn {
    text-align: center !important;
  }
}