/* Mobile fixes ConsultingAR - loaded AFTER nocturne styles.css */
/* Target: mobile <= 768px, small mobile <= 480px */

/* ==================== <= 768px ==================== */
@media (max-width: 768px) {

  /* NAV: hide standard links, show burger */
  .nav {
    padding-inline: 16px !important;
    gap: 12px !important;
    justify-content: space-between !important;
  }
  .nav > a:not(.btn):not(.nav-brand),
  .nav > .seg {
    display: none !important;
  }
  .nav-brand {
    font-size: 15px !important;
  }
  .nav .btn {
    padding: 8px 14px !important;
    font-size: 13px !important;
  }
  .nav-burger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    color: var(--color-text);
    cursor: pointer;
    padding: 0;
    font-size: 20px;
    line-height: 1;
  }
  .nav-burger:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  /* Burger open drawer */
  .nav-drawer {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    background: rgba(11, 15, 20, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 24px;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: none;
    flex-direction: column;
    gap: 18px;
    z-index: 999;
    transform: translateY(-8px);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .nav-drawer.open {
    display: flex;
    opacity: 1;
    transform: translateY(0);
  }
  .nav-drawer a {
    font-size: 17px !important;
    color: var(--color-text) !important;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .nav-drawer a:last-child {
    border-bottom: none;
  }
  .nav-drawer .seg {
    display: inline-flex !important;
    gap: 8px;
    margin-top: 8px;
  }

  /* HERO section paddings */
  section[style*="padding"] {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  h1 {
    font-size: clamp(32px, 8vw, 40px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
  }
  h2 {
    font-size: clamp(24px, 6vw, 32px) !important;
    line-height: 1.2 !important;
    max-width: 100% !important;
  }
  h3 {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }
  p {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  /* GRIDS: force 1 column below 768 for the problematic patterns */
  /* Services grid (72px + 340px + 1fr) */
  div[style*="grid-template-columns"][style*="72px"],
  div[style*="grid-template-columns"][style*="340px"] {
    display: block !important;
    grid-template-columns: unset !important;
  }
  div[style*="grid-template-columns"][style*="72px"] > *,
  div[style*="grid-template-columns"][style*="340px"] > * {
    margin-bottom: 12px !important;
  }

  /* Any 2-column split (image + text) - catches all common patterns */
  section[style*="grid-template-columns"],
  div[style*="grid-template-columns"] {
    display: block !important;
    grid-template-columns: unset !important;
  }
  section[style*="grid-template-columns"] > *,
  div[style*="grid-template-columns"] > * {
    margin-bottom: 24px !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  section[style*="grid-template-columns"] > *:last-child,
  div[style*="grid-template-columns"] > *:last-child {
    margin-bottom: 0 !important;
  }

  /* Force photo (figure) to appear BELOW text in about section */
  section[style*="grid-template-columns"] figure {
    order: 2 !important;
  }
  section[style*="grid-template-columns"] > div:not(figure) {
    order: 1 !important;
  }
  /* When display is block, order doesn't work - use flex instead for sections with figures */
  section:has(> figure) {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }
  section:has(> figure) > figure {
    order: 2 !important;
  }
  section:has(> figure) > div:not(figure) {
    order: 1 !important;
  }

  /* Images: reasonable aspect ratio on mobile, not too tall */
  figure picture image-slot,
  figure picture img {
    aspect-ratio: 16 / 10 !important;
    max-height: 300px !important;
    object-fit: cover !important;
  }

  /* Contain any element with max-width that could overflow */
  * {
    max-width: 100% !important;
  }
  img, video, picture, iframe {
    height: auto !important;
  }

  /* Cards / boxes: reasonable padding */
  section > div[style*="border-radius"],
  section > div[style*="background"] {
    padding: 20px !important;
    border-radius: 12px !important;
  }

  /* Footer flex */
  footer, footer > div {
    flex-direction: column !important;
    gap: 16px !important;
    text-align: left !important;
    align-items: flex-start !important;
  }

  /* Prevent horizontal scroll caused by overflowing children */
  html, body {
    overflow-x: hidden !important;
  }
}

/* ==================== <= 480px (very small) ==================== */
@media (max-width: 480px) {
  .nav {
    padding-inline: 12px !important;
  }
  .nav-brand {
    font-size: 14px !important;
  }
  h1 {
    font-size: clamp(28px, 8vw, 34px) !important;
  }
  h2 {
    font-size: clamp(22px, 6vw, 28px) !important;
  }
  section[style*="padding"] {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* Hide burger on desktop */
@media (min-width: 769px) {
  .nav-burger,
  .nav-drawer {
    display: none !important;
  }
}