/* ============================================================
   NIBRA Solutions — mobile.css v1.0
   Complete mobile responsive CSS
   Breakpoints: 1024px, 900px, 768px, 560px, 400px
   ============================================================ */

/* ============================================================
   1024px — LARGE TABLET / SMALL LAPTOP
   ============================================================ */
@media (max-width: 1024px) {

  .dp-container { padding: 0 1.5rem; }

  /* Hero */
  .dp-slide-inner {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .dp-slide-title { font-size: clamp(1.9rem, 4vw, 2.8rem); }

  /* Cards */
  .dp-cards-grid { grid-template-columns: repeat(2, 1fr); }

  /* Service rows */
  .dp-service-row { gap: 3rem; }

  /* Footer */
  .dp-footer-top { grid-template-columns: 1fr 1fr; gap: 2.5rem; }

  /* Process */
  .dp-process-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   900px — TABLET
   ============================================================ */
@media (max-width: 900px) {

  /* ── BASE ── */
  body { padding-top: 66px; }
  .dp-container { padding: 0 1.25rem; }
  .dp-section   { padding: 3.5rem 0; }

  /* ── TITLES ── */
  .dp-title { font-size: clamp(1.7rem, 5vw, 2.4rem); letter-spacing: -.02em; }
  .dp-sub   { font-size: .9rem; max-width: 100%; }

  /* ── BUTTONS ── */
  .dp-btn { padding: .72rem 1.5rem; font-size: .84rem; }

  /* ── HERO SLIDER ── */
  .dp-slide-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2rem;
    padding: 2rem 1.25rem;
  }
  .dp-slide-content { order: 2; }
  .dp-slide-visual  { order: 1; }
  .dp-slide-actions { justify-content: center; flex-wrap: wrap; }
  .dp-slide-stats   { justify-content: center; gap: 1.5rem; }
  .dp-hero-badge    { margin: 0 auto 1.2rem; }
  .dp-slide-eyebrow { justify-content: center; }
  .dp-slide-desc    { max-width: 100%; margin: 0 auto 1.5rem; }

  /* Device visual */
  .dp-slide-visual  { min-height: 260px; }
  .dp-device-scene  { width: 300px; height: 260px; margin: 0 auto; }
  .dp-float-card-2, .dp-float-card-3 { display: none; }
  .dp-float-card-1  { top: -10px; right: -10px; transform: scale(.85); }

  /* Slider controls */
  .dp-slider-controls { padding: 1rem 1.25rem 1.5rem; flex-direction: row; align-items: center; justify-content: center; gap: 1.5rem; }
  .dp-scroll-hint { display: none; }

  /* ── PAGE HERO ── */
  .dp-page-hero { padding: 5rem 0 3rem; }
  .dp-page-hero .dp-title { font-size: clamp(1.8rem, 5vw, 2.6rem); }

  /* ── NAV (handled in header.css, but reinforce) ── */
  .dp-header-inner { padding: 0 1.25rem; }
  .dp-logo-sub { display: none; } /* hide subtitle on mobile */

  /* ── SERVICES SECTION ── */
  .dp-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }

  /* ── SERVICE ROWS ── */
  .dp-service-row         { grid-template-columns: 1fr; gap: 2rem; padding: 2rem 0; }
  .dp-service-row-reverse { direction: ltr; }
  .dp-service-placeholder { height: 220px; }
  .dp-service-img         { height: 220px; }

  /* ── TECH MARQUEE ── */
  .dp-tech-pill { font-size: .78rem; padding: .6rem 1rem; }

  /* ── PROCESS ── */
  .dp-process-grid        { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .dp-process-grid::before { display: none; }
  .dp-step-circle         { width: 64px; height: 64px; }
  .dp-step-num            { font-size: .95rem; }

  /* ── INDUSTRIES ── */
  .dp-industry-grid { grid-template-columns: repeat(3, 1fr); gap: .75rem; }
  .dp-industry-item { padding: 1rem .75rem; }

  /* ── ABOUT ── */
  .dp-about-grid  { grid-template-columns: 1fr; gap: 2rem; }
  .nibra-logo-block { height: 220px; }
  .nibra-logo-block img { max-width: 130px; }

  /* ── VALUE GRID ── */
  .nibra-value-grid { grid-template-columns: 1fr 1fr; }

  /* ── SKILLS ── */
  .nibra-skills { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .nibra-skill  { font-size: .78rem; padding: .75rem .9rem; }

  /* ── CONTACT ── */
  .dp-contact-grid  { grid-template-columns: 1fr; gap: 2rem; }
  .dp-form-row      { grid-template-columns: 1fr; }
  .dp-contact-info  { order: -1; }

  /* ── CTA ── */
  .dp-cta-title { font-size: clamp(1.6rem, 4vw, 2.2rem); }
  .dp-cta-btns  { flex-direction: column; align-items: center; }
  .dp-cta-btns .dp-btn { width: 100%; max-width: 280px; justify-content: center; }

  /* ── BLOG ── */
  .dp-blog-layout { grid-template-columns: 1fr; gap: 2rem; }
  .dp-sidebar     { position: static; }

  /* ── FOOTER ── */
  .dp-footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; padding: 3rem 0 2rem; }

  /* ── PROJECTS ── */
  .nibra-projects-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .nibra-filters       { gap: .4rem; }
  .nibra-filter        { font-size: .74rem; padding: .32rem .85rem; }
}

/* ============================================================
   768px — LARGE PHONE / SMALL TABLET
   ============================================================ */
@media (max-width: 768px) {

  /* ── HERO ── */
  .dp-slide-title { font-size: clamp(1.65rem, 6vw, 2.2rem); }
  .dp-slide-stats { gap: 1.2rem; }
  .dp-stat-num    { font-size: 1.5rem; }
  .dp-stat-label  { font-size: .65rem; }

  /* ── CARDS ── */
  .dp-cards-grid { grid-template-columns: 1fr; }
  .dp-card       { padding: 1.5rem; }
  .dp-card-icon  { width: 44px; height: 44px; font-size: 1.25rem; }

  /* ── FOOTER ── */
  .dp-footer-top { grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem 0 1.5rem; }
  .dp-footer-logo .dp-logo-sub { display: none; }

  /* ── PROJECTS ── */
  .nibra-projects-grid { grid-template-columns: 1fr; }

  /* ── INDUSTRY ── */
  .dp-industry-grid { grid-template-columns: repeat(4, 1fr); gap: .6rem; }
  .dp-industry-emoji { font-size: 1.3rem; }
  .dp-industry-label { font-size: .68rem; }

  /* ── PROCESS ── */
  .dp-process-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── SECTION SPACING ── */
  .dp-section { padding: 3rem 0; }
  .dp-section-head { margin-bottom: 2.5rem; }

  /* ── PAGE HERO ── */
  .dp-page-hero { padding: 4.5rem 0 2.5rem; }

  /* ── LOGO ── */
  .dp-logo-solutions { display: none; }
  .dp-logo-name { font-size: .95rem; }

}

/* ============================================================
   560px — MOBILE
   ============================================================ */
@media (max-width: 560px) {

  /* ── BASE ── */
  body { padding-top: 62px; }
  .dp-container { padding: 0 1rem; }
  .dp-section   { padding: 2.5rem 0; }

  /* ── TYPOGRAPHY ── */
  .dp-title { font-size: clamp(1.55rem, 7vw, 2rem); }
  .dp-sub   { font-size: .87rem; }
  .dp-tag   { font-size: .62rem; }

  /* ── HERO ── */
  .dp-hero-badge { font-size: .72rem; padding: .4rem .9rem; }
  .dp-badge-dot  { display: none; }
  .dp-slide-title { font-size: clamp(1.5rem, 7vw, 1.9rem); }
  .dp-slide-desc  { font-size: .85rem; }
  .dp-slide-actions { flex-direction: column; align-items: center; }
  .dp-slide-actions .dp-btn { width: 100%; max-width: 260px; justify-content: center; }
  .dp-slide-visual  { display: none; } /* hide device on very small screens */
  .dp-slide-stats   { gap: 1rem; flex-wrap: wrap; justify-content: center; }
  .dp-stat { min-width: 80px; text-align: center; }

  /* ── PAGE HERO ── */
  .dp-page-hero { padding: 4rem 0 2rem; }
  .dp-page-hero .dp-title { font-size: clamp(1.6rem, 7vw, 2rem); }

  /* ── HEADER ── */
  .dp-header { height: 62px; }
  .dp-header-inner { padding: 0 1rem; }
  .dp-logo-img     { width: 26px; height: 26px; }
  .dp-logo-icon-wrap { width: 34px; height: 34px; border-radius: 8px; }
  .dp-logo-name    { font-size: .88rem; }
  .dp-logo-solutions { display: none; }
  .dp-logo-sub       { display: none; }

  /* ── CARDS ── */
  .dp-cards-grid { grid-template-columns: 1fr; gap: .85rem; }
  .dp-card { padding: 1.35rem; border-radius: 14px; }
  .dp-tag-pill { font-size: .6rem; padding: .18rem .55rem; }

  /* ── SERVICE ROWS ── */
  .dp-service-row-title { font-size: 1.3rem; }
  .dp-service-placeholder { height: 180px; font-size: 3.5rem; }

  /* ── TECH MARQUEE ── */
  .dp-tech-pill { font-size: .74rem; padding: .55rem .9rem; }

  /* ── PROCESS ── */
  .dp-process-grid  { grid-template-columns: repeat(2, 1fr); }
  .dp-step-circle   { width: 56px; height: 56px; }
  .dp-step-num      { font-size: .85rem; }
  .dp-step-name     { font-size: .74rem; }
  .dp-step-desc     { font-size: .72rem; }

  /* ── INDUSTRIES ── */
  .dp-industry-grid  { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .dp-industry-item  { padding: .85rem .5rem; border-radius: 10px; }
  .dp-industry-emoji { font-size: 1.2rem; }
  .dp-industry-label { font-size: .65rem; }

  /* ── ABOUT ── */
  .dp-about-grid     { gap: 1.5rem; }
  .nibra-logo-block  { height: 180px; }
  .nibra-logo-block img { max-width: 110px; }
  .nibra-value-grid  { grid-template-columns: 1fr; gap: .75rem; }
  .nibra-value-card  { padding: 1rem; }
  .nibra-skills      { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .nibra-skill       { font-size: .76rem; padding: .65rem .8rem; }

  /* ── CONTACT ── */
  .dp-form-input,
  .dp-form-textarea,
  .dp-form-select    { padding: .75rem .9rem; font-size: .86rem; }
  .dp-form-label     { font-size: .68rem; }
  .dp-info-card      { padding: 1rem; }
  .dp-info-title     { font-size: .68rem; }
  .dp-info-text,
  .dp-info-link      { font-size: .8rem; }

  /* ── PROJECTS ── */
  .nibra-projects-grid { grid-template-columns: 1fr; gap: .85rem; }
  .nibra-filters       { gap: .35rem; }
  .nibra-filter        { font-size: .72rem; padding: .3rem .75rem; }
  .nibra-metric        { font-size: .65rem; }

  /* ── CTA ── */
  .dp-cta-title  { font-size: clamp(1.4rem, 6vw, 1.8rem); }
  .dp-cta-btns .dp-btn { font-size: .84rem; padding: .75rem 1.3rem; }
  .dp-section.dp-cta-section { padding: 3.5rem 0; }

  /* ── FOOTER ── */
  .dp-footer-top          { grid-template-columns: 1fr; padding: 2rem 0 1.5rem; gap: 1.5rem; }
  .dp-footer-bottom-inner { flex-direction: column; text-align: center; gap: .5rem; }
  .dp-footer-copy,
  .dp-footer-tagline      { font-size: .65rem; }
  .dp-footer-socials      { gap: .4rem; }
  .dp-footer-desc         { font-size: .8rem; }
  .dp-footer-links a      { font-size: .8rem; }
  .dp-footer-contact-list span,
  .dp-footer-contact-list a { font-size: .78rem; }

  /* ── BLOG ── */
  .dp-blog-body    { padding: 1.25rem; }
  .dp-blog-title   { font-size: 1rem; }
  .dp-blog-excerpt { font-size: .84rem; }

  /* ── CHATBOT ── */
  .nb-chat-window { width: calc(100vw - 24px) !important; right: -8px !important; max-height: 480px; }
  .nb-chat-wrap   { bottom: 16px !important; right: 16px !important; }
  .nb-chat-toggle { width: 52px; height: 52px; }
  .nb-msg-bubble  { font-size: .8rem; max-width: 220px; }
  .nb-chat-input  { font-size: .82rem; }
}

/* ============================================================
   400px — SMALL PHONES
   ============================================================ */
@media (max-width: 400px) {

  .dp-container { padding: 0 .85rem; }

  /* Hero */
  .dp-slide-title { font-size: 1.45rem; }
  .dp-slide-actions .dp-btn { max-width: 100%; }

  /* Cards */
  .dp-card { padding: 1.2rem; }

  /* Industries */
  .dp-industry-grid { grid-template-columns: repeat(2, 1fr); }

  /* Process */
  .dp-process-grid { grid-template-columns: 1fr 1fr; }

  /* Skills */
  .nibra-skills { grid-template-columns: 1fr; }

  /* Footer */
  .dp-footer-col-title { font-size: .65rem; }

  /* Header */
  .dp-logo-nibra { font-size: .85rem; }

  /* Nav */
  .dp-nav { width: 100vw !important; right: -100vw !important; }
  .dp-nav.dp-nav-open { right: 0 !important; }

  /* Chatbot */
  .nb-chat-window { width: calc(100vw - 16px) !important; right: -8px !important; }
  .nb-chat-toggle { width: 48px; height: 48px; }
  .nb-chat-toggle svg { width: 22px; height: 22px; }
}

/* ============================================================
   MOBILE NAV OPEN — DISABLE BODY SCROLL
   ============================================================ */
body.dp-nav-is-open {
  overflow: hidden;
}

/* ============================================================
   TOUCH IMPROVEMENTS
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  /* Remove hover effects on touch — don't get stuck */
  .dp-card:hover          { transform: none; }
  .dp-btn-primary:hover   { transform: none; }
  .dp-industry-item:hover { transform: none; }
  .dp-info-card:hover     { transform: none; }

  /* Bigger tap targets */
  .dp-nav-link     { padding: .85rem 1rem; min-height: 44px; }
  .dp-btn          { min-height: 44px; }
  .nibra-filter    { min-height: 40px; }
  .dp-chat-toggle  { min-width: 56px; min-height: 56px; }
  .nb-chat-qbtn    { min-height: 36px; padding: .4rem .9rem; }
}

/* ============================================================
   SAFE AREA INSETS (iPhone notch / home bar support)
   ============================================================ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .nb-chat-wrap {
    bottom: calc(16px + env(safe-area-inset-bottom));
  }
  .dp-footer-bottom {
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
  }
}
@supports (padding-left: env(safe-area-inset-left)) {
  .dp-container {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
}

/* ============================================================
   PRINT — hide decorative elements
   ============================================================ */
@media print {
  .dp-header, .nb-chat-wrap, .nb-network-sitewide,
  .dp-blob-wrap, .dp-blob-sm, .dp-grid-bg,
  .dp-footer-socials, .dp-slider-controls { display: none !important; }
  body { background: #fff; color: #000; padding-top: 0; }
  .dp-card { border: 1px solid #ccc; box-shadow: none; }
}

/* ============================================================
   OVERFLOW GUARD — prevent any element causing horizontal scroll
   ============================================================ */
html, body {
  max-width: 100%;
}
.dp-hero,
.dp-section,
.dp-page-hero,
.dp-footer,
.dp-cta-section {
  overflow-x: hidden;
}

/* ============================================================
   FORM ZOOM PREVENTION (iOS auto-zooms inputs < 16px font)
   ============================================================ */
@media (max-width: 900px) {
  .dp-form-input,
  .dp-form-textarea,
  .dp-form-select,
  .nb-chat-input {
    font-size: 16px !important; /* prevents iOS zoom on focus */
  }
}

/* ============================================================
   HERO HEIGHT — RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .dp-hero {
    height: auto;
    min-height: calc(100svh - 66px);
  }
  .dp-slider-stage {
    min-height: calc(100svh - 140px);
    position: relative;
    height: auto;
  }
  .dp-slider-controls {
    position: relative;
    bottom: auto;
    padding: 1rem 1.25rem 1.5rem;
  }
}
@media (max-width: 560px) {
  .dp-hero {
    min-height: calc(100svh - 62px);
    max-height: none;
  }
  .dp-slider-stage {
    min-height: 380px;
  }
}