/* ================================================================
   QIRO — responsive.css
   Clean single-file responsive layer. Import AFTER style.css.
   Breakpoints: 1280 | 1100 | 900 | 768 | 640 | 480 | 360
   ================================================================ */

/* ── Global box fix ── */
*, *::before, *::after { box-sizing: border-box }
body { overflow-x: hidden }

/* ── Burger always hidden (removed from HTML) ── */
.burger { display: none !important }

/* ================================================================
   1280px — Large laptops
   ================================================================ */
@media (max-width: 1280px) {
  .header-wrap          { padding: 0 28px }
  .hero-content         { padding: 170px 28px 90px }
  .cards-grid           { padding: 0 28px; gap: 20px }
  .about-inner          { padding: 0 28px; gap: 50px }
  .sol-header           { padding: 0 28px 36px }
  .sol-grid             { padding: 0 28px }
  .blog-inner           { padding: 0 28px }
  .ft-top               { padding: 60px 28px 50px }
  .ft-mid               { padding: 26px 28px }
  .ft-bottom            { padding: 16px 28px }
  .breadcrumb-inner     { padding: 0 28px }
}

/* ================================================================
   1100px — Tablet landscape / small laptop
   ================================================================ */
@media (max-width: 1100px) {
  /* Nav: reduce padding */
  .nav-link             { padding: 0 10px; font-size: 13px }

  /* Cards: 2 columns */
  .cards-grid           { grid-template-columns: repeat(2, 1fr) }
  .card                 { height: auto; min-height: 360px }
  .card-body            { height: auto }
  /* Always show description (no reliable hover on tablet) */
  .card-desc            { max-height: 200px !important; opacity: 1 !important }

  /* Solutions: 2 col */
  .sol-grid             { grid-template-columns: repeat(2, 1fr) }

  /* Blog: 2 col */
  .blog-grid            { grid-template-columns: repeat(2, 1fr) }

  /* Footer: 3 col */
  .ft-top               { grid-template-columns: 1.2fr 1fr 1fr; gap: 28px }
}

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

  /* ── Header ── */
  .site-nav             { display: none }        /* desktop nav hidden */
  .header-wrap          { padding: 0 16px; height: 70px }
  .nav-link             { height: 70px }
  .logo-text            { font-size: 24px }
  .logo-icon            { width: 38px; height: 38px }
  /* Keep Contact button visible on tablet */
  .btn-contact          { padding: 11px 20px; font-size: 12px }

  /* ── Hero ── */
  .hero                 { min-height: 500px }
  .hero-content         { padding: 130px 16px 70px }
  .hero-title           { font-size: clamp(26px, 5.5vw, 44px) }
  .hero-eyebrow         { font-size: 11px }

  /* ── Cards ── */
  .cards-section        { padding: 40px 0 16px }
  .cards-grid           { grid-template-columns: repeat(2, 1fr); padding: 0 16px; gap: 16px }
  .card-img-wrap        { height: 200px }
  .card-desc            { max-height: 200px !important; opacity: 1 !important }

  /* ── About ── */
  .about-section        { padding: 50px 0 60px }
  .about-inner          { grid-template-columns: 1fr; gap: 28px; padding: 0 16px }

  /* ── Tab nav: scrollable ── */
  .tab-nav              { overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap }
  .tab-btn              { flex-shrink: 0 }

  /* ── Solutions ── */
  .sol-section          { padding: 50px 0 28px }
  .sol-header           { padding: 0 16px 24px }
  .sol-grid             { grid-template-columns: repeat(2, 1fr); padding: 0 16px; gap: 16px }
  .sol-card             { height: 230px }
  /* Always show text on touch */
  .sol-label            { transform: translateY(-26px) !important }
  .sol-desc-line        { opacity: 1 !important; transform: translateY(-24px) !important }

  /* ── Blog ── */
  .blog-section         { padding: 28px 0 60px }
  .blog-inner           { padding: 0 16px }
  .blog-grid            { grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 28px }

  /* ── Footer ── */
  .ft-top               { grid-template-columns: repeat(2, 1fr); padding: 44px 16px 36px; gap: 24px }
  .ft-mid               { flex-direction: column; text-align: center; padding: 24px 16px; gap: 16px }
  .ft-mid-tagline       { font-size: 14px }
  .ft-call-btn          { padding: 12px 28px }
  .ft-bottom            { flex-direction: column; padding: 14px 16px; text-align: center; gap: 12px }

  /* ── Contact overlay ── */
  .co-inner             { grid-template-columns: 1fr; padding: 70px 16px 40px }
  .co-nav               { padding-right: 0; padding-bottom: 24px }
  .co-divider           { width: 100%; height: 1px; background: rgba(255,255,255,.12) }
  .co-contact           { padding-left: 0 }
  .co-contact-body      { grid-template-columns: 1fr }
  .co-img-wrap          { grid-column: 1; grid-row: auto }
  .co-img               { height: 200px }
  .co-nav a             { font-size: clamp(22px, 4vw, 32px) }

  /* ── About page: intro section ── */
  .intro-section        { padding: 50px 0 }
  .intro-inner          { grid-template-columns: 1fr; gap: 30px; padding: 0 16px }
  .intro-badge          { width: 100px; height: 100px; bottom: -16px; right: -8px }
  .intro-badge strong   { font-size: 28px }

  /* ── About page: stats ── */
  .stats-inner          { grid-template-columns: repeat(2, 1fr) }
  .stat-item            { border-right: none; border-bottom: 1px solid rgba(0,0,0,.08); padding: 18px 16px }
  .stat-item:last-child { border-bottom: none }
  .stats-bar--dark .stat-item { border-bottom-color: rgba(255,255,255,.08) }

  /* ── About page: certificates ── */
  .certs-section        { padding: 50px 0 60px }
  .certs-inner          { padding: 0 16px }
  .certs-grid           { grid-template-columns: repeat(2, 1fr) }

  /* ── About page: export map ── */
  .export-section       { padding: 50px 0 }
  .export-inner         { padding: 0 16px }

  /* ── About page: page hero ── */
  .page-hero            { height: 280px }
  .breadcrumb-inner     { padding: 0 16px }

  /* ── Contact page ── */
  .contact-split        { grid-template-columns: 1fr }
  .cs-info              { padding: 50px 24px }
  .cs-form              { padding: 50px 24px }
}

/* ================================================================
   768px — Standard tablets / large phones landscape
   ================================================================ */
@media (max-width: 768px) {
  .hero-title           { font-size: clamp(24px, 6vw, 38px) }

  /* Cards hover effects: lock to visible on touch */
  .card:hover           { transform: none }
  .card-desc            { max-height: 200px !important; opacity: 1 !important }

  /* Blog card: reposition date badge */
  .blog-card:hover .date-badge { top: 14px; bottom: auto }
}

/* ================================================================
   640px — Large phones (iPhone Plus / Samsung)
   ================================================================ */
@media (max-width: 640px) {

  /* ── Header ── */
  .btn-contact          { padding: 10px 16px; font-size: 11px; letter-spacing: .04em }
  .btn-contact svg      { width: 11px; height: 11px }

  /* ── Hero ── */
  .hero                 { min-height: 440px }
  .hero-content         { padding: 110px 14px 60px }
  .hero-title           { font-size: clamp(22px, 7vw, 34px) }
  .hero-btns            { flex-direction: column; align-items: flex-start; gap: 12px }
  .btn-red              { width: 100%; max-width: 280px; justify-content: center }

  /* ── Cards: single column ── */
  .cards-grid           { grid-template-columns: 1fr; padding: 0 14px }
  .card-img-wrap        { height: 220px }

  /* ── About ── */
  .about-inner          { padding: 0 14px }

  /* ── Solutions: single column ── */
  .sol-grid             { grid-template-columns: 1fr; padding: 0 14px }
  .sol-card             { height: 210px }
  .sol-header           { padding: 0 14px 20px }

  /* ── Blog: single column ── */
  .blog-inner           { padding: 0 14px }
  .blog-grid            { grid-template-columns: 1fr }
  .blog-card            { padding-top: 210px }
  .blog-img-wrap        { height: 210px }
  .blog-img-wrap img    { aspect-ratio: 16/9 }

  /* ── Footer: single column ── */
  .ft-top               { grid-template-columns: 1fr; padding: 36px 14px 28px; gap: 20px }

  /* ── About page ── */
  .page-hero            { height: 230px }
  .certs-grid           { grid-template-columns: 1fr }
  .stats-inner          { grid-template-columns: 1fr }
  .stat-item            { padding: 16px 14px }
  .intro-inner          { padding: 0 14px }
  .export-inner         { padding: 0 14px }
  .export-map-badge     { min-width: 90px; padding: 7px 12px 7px 10px }
  .export-map-badge svg { width: 24px; height: 24px }
  .export-map-badge-text{ font-size: 17px }

  /* ── Contact page ── */
  .cs-info              { padding: 40px 14px }
  .cs-form              { padding: 40px 14px }
  .cf                   { grid-template-columns: 1fr }
  .cf-full              { grid-column: 1 }
  .map-section iframe   { height: 300px }

  /* ── Tabs ── */
  .tab-btn              { font-size: 10px; padding: 9px 12px }
}

/* ================================================================
   480px — Standard phones (iPhone 14, Pixel)
   ================================================================ */
@media (max-width: 480px) {

  /* ── Header ── */
  .header-wrap          { padding: 0 12px; height: 64px }
  .logo-text            { font-size: 22px }
  .logo-icon            { width: 34px; height: 34px }
  .btn-contact          { padding: 9px 14px; font-size: 11px }

  /* ── Hero ── */
  .hero                 { min-height: 420px }
  .hero-content         { padding: 100px 12px 56px }
  .hero-eyebrow         { font-size: 10px; letter-spacing: .12em }
  .hero-title           { font-size: clamp(20px, 8vw, 30px); margin-bottom: 28px }

  /* ── Cards ── */
  .cards-section        { padding: 28px 0 10px }
  .cards-grid           { padding: 0 12px; gap: 14px }
  .card-img-wrap        { height: 200px }
  .card-title-row h3    { font-size: 15px }

  /* ── Section titles ── */
  .sec-title            { font-size: clamp(18px, 6vw, 26px) }
  .eyebrow              { font-size: 10px }

  /* ── About ── */
  .about-section        { padding: 40px 0 50px }
  .about-inner          { padding: 0 12px }

  /* ── Solutions ── */
  .sol-section          { padding: 36px 0 20px }
  .sol-header           { padding: 0 12px 18px }
  .sol-grid             { padding: 0 12px; gap: 12px }
  .sol-card             { height: 190px }
  .sol-label            { font-size: 18px }

  /* ── Blog ── */
  .blog-section         { padding: 20px 0 50px }
  .blog-inner           { padding: 0 12px }
  .blog-grid            { gap: 14px; margin-top: 20px }
  .blog-card            { padding-top: 190px }
  .blog-img-wrap        { height: 190px }
  .blog-body h3         { font-size: 14px }

  /* ── Footer ── */
  .ft-top               { padding: 28px 12px 22px; gap: 18px }
  .ft-mid               { padding: 18px 12px }
  .ft-mid-logo-text     { font-size: 24px }
  .ft-mid-tagline       { font-size: 13px }
  .ft-call-btn          { padding: 11px 22px; font-size: 12px }
  .ft-bottom            { padding: 12px 12px }
  .ft-copy              { font-size: 11px }

  /* ── About page ── */
  .page-hero            { height: 200px; border-radius: 10px }
  .page-hero-title      { font-size: clamp(24px, 7vw, 36px) }
  .intro-section        { padding: 36px 0 }
  .intro-inner          { padding: 0 12px }
  .intro-badge          { width: 84px; height: 84px; bottom: -12px; right: -6px }
  .intro-badge strong   { font-size: 24px }
  .intro-badge span     { font-size: 10px }
  .stats-bar            { padding: 36px 0 }
  .stat-num             { font-size: clamp(28px, 9vw, 42px) }
  .stat-label           { font-size: 12px }
  .certs-section        { padding: 40px 0 50px }
  .certs-inner          { padding: 0 12px }
  .cert-card            { padding: 22px 18px }
  .export-section       { padding: 40px 0 }
  .export-inner         { padding: 0 12px }
  .export-map-badge     { min-width: 80px; padding: 6px 10px }
  .export-map-badge-text{ font-size: 15px }
  .export-map-badge svg { width: 20px; height: 20px }

  /* ── Contact page ── */
  .cs-info              { padding: 32px 12px }
  .cs-form              { padding: 32px 12px }
  .cs-company           { font-size: clamp(18px, 5vw, 24px); margin-bottom: 24px }
  .cs-form-title        { font-size: clamp(18px, 5vw, 24px) }
  .cf-group input,
  .cf-group textarea    { padding: 15px 16px; font-size: 14px }
  .btn-submit           { padding: 18px 0; font-size: 12px }
  .map-section iframe   { height: 250px }

  /* ── Contact overlay ── */
  .co-inner             { padding: 64px 12px 36px }
  .co-close             { right: 14px; top: 18px; font-size: 24px }
  .co-nav a             { font-size: 22px; padding: 9px 0 }

  /* ── Breadcrumb ── */
  .breadcrumb-inner     { padding: 0 12px; font-size: 12px }
}

/* ================================================================
   360px — Small phones (older Android, SE)
   ================================================================ */
@media (max-width: 360px) {
  .header-wrap          { padding: 0 10px }
  .logo-text            { font-size: 20px }
  .logo-icon            { width: 30px; height: 30px }
  .btn-contact          { padding: 8px 12px; font-size: 10px }

  .hero-content         { padding: 90px 10px 48px }
  .hero-title           { font-size: 20px }

  .cards-grid           { padding: 0 10px }
  .about-inner          { padding: 0 10px }
  .sol-grid             { padding: 0 10px }
  .blog-inner           { padding: 0 10px }
  .sol-card             { height: 170px }
  .sol-label            { font-size: 16px }

  .ft-top               { padding: 22px 10px 18px }
  .ft-mid               { padding: 16px 10px }
  .ft-bottom            { padding: 10px 10px }

  .intro-inner          { padding: 0 10px }
  .certs-inner          { padding: 0 10px }
  .export-inner         { padding: 0 10px }
  .cs-info              { padding: 24px 10px }
  .cs-form              { padding: 24px 10px }
  .breadcrumb-inner     { padding: 0 10px }
}

/* ================================================================
   Touch / hover:none — Force show content without hover
   ================================================================ */
@media (hover: none) {
  .card-desc            { max-height: 200px !important; opacity: 1 !important }
  .sol-label            { transform: translateY(-26px) !important }
  .sol-desc-line        { opacity: 1 !important; transform: translateY(-24px) !important }
  .blog-card:hover .date-badge { top: 14px; bottom: auto }
  .dropdown-content     { display: none }  /* no touch dropdowns */
}

/* ================================================================
   Safe area — iPhone notch / Dynamic Island / home bar
   ================================================================ */
@supports (padding: max(0px)) {
  .header-wrap {
    padding-left:  max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  #btt, #whatsapp-btn {
    bottom: max(26px, env(safe-area-inset-bottom));
  }
}

/* ================================================================
   Print — basic cleanup
   ================================================================ */
@media print {
  #site-header, #btt, #whatsapp-btn, .contact-overlay, .burger-overlay { display: none }
  .hero { min-height: auto }
}