/* ============================================================
   VineForge Technologies — Responsive Styles
   ============================================================ */

/* ── Tablet ── */
@media (max-width: 1024px) {
  :root { --container-pad: 1.25rem; }
  .hero__inner { grid-template-columns: 1fr; gap: var(--space-12); }
  .hero__visual { display: none; }
  .hero__title { font-size: 2.6rem; }
  .portfolio-grid--home { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .contact-layout { grid-template-columns: 1fr; }
  .contact-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .service-detail-layout { grid-template-columns: 1fr; }
  .service-detail-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .about-intro { grid-template-columns: 1fr; }
  .about-intro__visual { order: -1; }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-strip__item:nth-child(2) { border-right: none; }
  .stat-strip__item:nth-child(3),
  .stat-strip__item:nth-child(4) { border-top: 1px solid var(--surface-border); }
  .stat-strip__item:nth-child(4) { border-right: none; }
  /* Jobs layout */
  .jobs-layout { grid-template-columns: 1fr; }
  .job-detail-layout { grid-template-columns: 1fr; }
  .job-detail-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
}

/* ── Small tablet / large mobile ── */
@media (max-width: 768px) {
  :root { --container-pad: 1rem; --navbar-height: 62px; }

  /* ── Navbar ── */
  .navbar__nav  { display: none; }
  .navbar__cta  { display: none; }
  .navbar__hamburger {
    display: flex; flex-direction: column; justify-content: center;
    gap: 5px; background: none; border: none; cursor: pointer;
    padding: 8px; border-radius: var(--radius-md);
    transition: background var(--transition-fast);
    margin-left: auto;
    /* Minimum 44×44px touch target */
    min-width: 44px; min-height: 44px;
    align-items: center;
  }
  .navbar__hamburger:hover { background: var(--surface-2); }
  .navbar__hamburger-line {
    width: 22px; height: 2px; background: var(--silver);
    border-radius: 2px; transition: all var(--transition-base); display: block;
  }
  .navbar__hamburger--open .navbar__hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .navbar__hamburger--open .navbar__hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .navbar__hamburger--open .navbar__hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ── Mobile menu — enable on mobile with smooth slide animation ── */
  .mobile-menu {
    display: block;       /* switch from display:none to block so transitions work */
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transform: translateX(100%);
    transition: transform var(--transition-slow),
                opacity var(--transition-slow),
                visibility 0s linear var(--transition-slow);
  }
  .mobile-menu--open {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transform: translateX(0);
    transition: transform var(--transition-slow),
                opacity var(--transition-slow),
                visibility 0s linear 0s;
  }

  /* ── Sections ── */
  .section { padding: var(--space-12) 0; }
  .section-title    { font-size: var(--text-2xl); }
  .section-subtitle { font-size: var(--text-base); }

  /* ── Hero ── */
  .hero { padding: var(--space-12) 0; min-height: auto; }
  .hero__title    { font-size: 2rem; }
  .hero__subtitle { font-size: var(--text-base); }
  .hero__actions  { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: center; width: 100%; }

  /* ── Grids ── */
  .services-grid            { grid-template-columns: 1fr; }
  .portfolio-grid--home,
  .portfolio-grid           { grid-template-columns: 1fr; }
  .why-grid                 { grid-template-columns: 1fr; }
  .industries-grid          { grid-template-columns: repeat(2, 1fr); }
  .industries-full-grid     { grid-template-columns: 1fr; }
  .pricing-grid             { grid-template-columns: 1fr; }
  .service-full-card__cols  { grid-template-columns: 1fr; }
  .approach-grid            { grid-template-columns: 1fr; }
  .values-grid              { grid-template-columns: 1fr 1fr; }

  /* ── CTA block ── */
  .cta-block { padding: var(--space-10) var(--space-5); }
  .cta-block__actions { flex-direction: column; align-items: center; }
  .cta-block__actions .btn { width: 100%; max-width: 340px; justify-content: center; }

  /* ── Process ── */
  .process-step { gap: var(--space-4); }
  .process-detailed-step { flex-direction: column; gap: var(--space-5); }
  .process-detailed-step__marker { flex-direction: row; align-items: center; gap: var(--space-3); }
  .process-detailed-step__line { display: none; }

  /* ── Footer ── */
  .footer__grid   { grid-template-columns: 1fr; gap: var(--space-8); }
  .footer__bottom { flex-direction: column; text-align: center; gap: var(--space-3); }
  .footer__legal  { justify-content: center; flex-wrap: wrap; }

  /* ── Forms ── */
  .form-row--2col { grid-template-columns: 1fr; }
  .contact-sidebar { grid-template-columns: 1fr; }
  /* Ensure inputs are large enough on mobile */
  .inquiry-form input,
  .inquiry-form select,
  .inquiry-form textarea { font-size: 16px; /* prevents iOS zoom on focus */ }

  /* ── Service detail ── */
  .service-detail-hero    { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .service-detail-sidebar { grid-template-columns: 1fr; }
  .deliverables-grid      { grid-template-columns: 1fr; }

  /* ── Careers / Jobs ── */
  .jobs-layout          { grid-template-columns: 1fr; }
  .job-filters          { flex-direction: column; align-items: stretch; }
  .job-detail-layout    { grid-template-columns: 1fr; }
  .job-detail-sidebar   { grid-template-columns: 1fr; }
  .careers-search       { flex-direction: column; }
  .careers-search__btn  { width: 100%; justify-content: center; }

  /* ── Page hero ── */
  .page-hero         { padding: var(--space-12) 0 var(--space-8); }
  .page-hero__title  { font-size: var(--text-3xl); }

  /* ── Stat strip ── */
  .stat-strip { grid-template-columns: 1fr 1fr; }
  .stat-strip__item:nth-child(odd)  { border-right: 1px solid var(--surface-border); }
  .stat-strip__item:nth-child(even) { border-right: none; }

  /* ── Testimonials ── */
  .testimonials-nav { gap: var(--space-3); }
  .testimonials-nav__btn { min-width: 44px; min-height: 44px; }

  /* ── About intro ── */
  .about-intro { gap: var(--space-8); }

  /* ── Misc ── */
  .whatsapp-btn { bottom: 1.25rem; right: 1rem; width: 52px; height: 52px; }
  .messages-container { left: 1rem; right: 1rem; max-width: none; }
  .success-card { padding: var(--space-8); }
  .success-card__actions { flex-direction: column; }
  .success-card__actions .btn { width: 100%; justify-content: center; }

  /* ── Buttons — full-width where appropriate ── */
  .service-full-card__footer { flex-direction: column; align-items: flex-start; }
  .sidebar-cta-card__btn { width: 100%; }

  /* ── Typography overflow prevention ── */
  h1, h2, h3, h4, h5 { word-break: break-word; overflow-wrap: break-word; }
  p, li, a { overflow-wrap: break-word; }
}

/* ── Mobile ── */
@media (max-width: 480px) {
  :root { --container-pad: 0.875rem; }

  .hero__title        { font-size: 1.75rem; }
  .hero__subtitle     { font-size: var(--text-sm); }
  .hero__trust        { gap: var(--space-3); flex-wrap: wrap; }
  .hero__trust-item   { font-size: var(--text-xs); }
  .hero__eyebrow      { font-size: 0.65rem; padding: var(--space-1) var(--space-3); }

  .page-hero__title   { font-size: var(--text-2xl); }
  .page-hero__subtitle { font-size: var(--text-sm); }

  .section-header     { margin-bottom: var(--space-8); }
  .section-title      { font-size: var(--text-xl); }

  /* Grids — force single column on very small screens */
  .industries-grid    { grid-template-columns: 1fr; }
  .values-grid        { grid-template-columns: 1fr; }
  .contact-sidebar    { grid-template-columns: 1fr; }
  .service-detail-sidebar { grid-template-columns: 1fr; }
  .job-detail-sidebar { grid-template-columns: 1fr; }
  .about-values-grid  { grid-template-columns: 1fr; }

  /* Cards */
  .pricing-card  { padding: var(--space-5); }
  .service-card  { padding: var(--space-5); }
  .why-card      { padding: var(--space-5); }

  /* CTA */
  .cta-block { padding: var(--space-8) var(--space-4); }

  /* Stat strip — full single column */
  .stat-strip { grid-template-columns: 1fr; }
  .stat-strip__item   { border-right: none !important; }
  .stat-strip__item + .stat-strip__item { border-top: 1px solid var(--surface-border); }

  /* Footer */
  .footer__grid { gap: var(--space-6); }
  .footer__bottom { gap: var(--space-2); }

  /* Navbar logo shrink on tiny screens */
  .navbar__logo-img { height: 34px; }

  /* Mobile menu font size */
  .mobile-menu__link { font-size: var(--text-sm); padding: 0.75rem 0; }

  /* Forms */
  .faq-item__question { padding: var(--space-4) var(--space-4); font-size: var(--text-sm); }
  .faq-item__answer   { padding: 0 var(--space-4) var(--space-4); }

  /* Portfolio filter buttons wrap nicely */
  .portfolio-filters { gap: var(--space-2); }
  .portfolio-filter  { font-size: var(--text-xs); padding: 0.4rem 0.75rem; }

  /* Testimonial card padding */
  .tcard { padding: var(--space-5); }
}

/* ── Extra small (old/budget Android phones) ── */
@media (max-width: 360px) {
  :root { --container-pad: 0.75rem; }
  .hero__title { font-size: 1.5rem; }
  .section-title { font-size: var(--text-lg); }
  .btn { font-size: var(--text-sm); padding: 0.6rem 1rem; }
  .navbar__logo-img { height: 30px; }
}

/* ── Print ── */
@media print {
  .navbar, .footer, .whatsapp-btn, .messages-container, .page-loader { display: none !important; }
  .section { padding: 1rem 0; }
  body { background: #fff; color: #000; }
}