/* =============================================================================
   RESPONSIVE — All Breakpoints
   Loaded globally. Overrides are scoped per section for maintainability.

   IMPORTANT — LOAD ORDER NOTE:
   Page-specific sheets (page-home.css, page-about.css, etc.) are enqueued
   AFTER this file (they depend on aster-responsive). This means their rules
   win the cascade over ours unless we use !important on layout-critical
   properties. !important is used intentionally and narrowly here — only on
   grid-template-columns, display, width, padding, gap, and flex properties
   that would otherwise be overridden by a later-loading page sheet.
   ============================================================================= */

/* =============================================================================
   Global — Prevent horizontal scroll on all viewports
   ============================================================================= */
html, body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

img, video, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

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

  :root { --header-height: 60px; }

  /* --- Header & Nav -------------------------------------------------------- */
  .aster-nav-inner            { padding: 0 32px; }
  .aster-nav-inner .nav-links { gap: 24px; }
  .nav-toggle                 { display: flex; }

  .aster-nav-inner .nav-links {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 100%;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    gap: 0;
    padding: 8px 0 16px;
    z-index: 99998;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }
  .aster-nav-inner .nav-links.is-open                                       { display: flex; }
  .aster-nav-inner .nav-links > li > a                                       { display: block; padding: 12px 32px; font-size: 15px; }
  .aster-nav-inner .nav-links .sub-menu {
    position: static;
    transform: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    background: var(--off-white);
    padding: 4px 0;
    min-width: unset;
    width: 100%;
  }
  .aster-nav-inner .nav-links li.menu-item-has-children:hover > .sub-menu   { display: none; }
  .aster-nav-inner .nav-links li.menu-item-has-children.is-open > .sub-menu { display: block; }
  .aster-nav-inner .nav-links .sub-menu a                                    { padding: 10px 48px; font-size: 14px; }
  .aster-nav-inner .nav-links li.menu-item-has-children > a                 { justify-content: space-between; padding-right: 32px; }

  /* --- Home --------------------------------------------------------------- */
  .hero,
  .why         { gap: 48px; padding-left: 40px; padding-right: 40px; }
  .services,
  .process,
  .work,
  .cta-section { padding-left: 40px; padding-right: 40px; }
  .clients-bar { padding-left: 40px; padding-right: 40px; }

  .process-grid               { grid-template-columns: 1fr 1fr; }
  .proc-step:nth-child(2)     { border-right: none; }
  .proc-step:nth-child(3)     { border-top: 1px solid #242424; }

  /* --- About -------------------------------------------------------------- */
  .about-hero       { padding: 72px 40px; }
  .about-hero-inner { gap: 48px; }
  .about-story      { padding: 72px 40px; gap: 48px; }
  .about-values     { padding: 72px 40px; }
  .about-team       { padding: 72px 40px; }
  .team-grid        { grid-template-columns: repeat(2, 1fr); }

  /* --- Services ----------------------------------------------------------- */
  .svc-page-hero       { padding: 72px 40px; }
  .svc-page-hero-inner { gap: 48px; }
  .svc-promise-strip   { padding: 0 40px; }
  .svc-promise-sep     { margin: 0 20px; }
  .svc-grid-section    { padding: 72px 40px; }
  .svc-included        { padding: 72px 40px; }
  .svc-included-grid   { grid-template-columns: 1fr 1fr; }
  .svc-audience        { padding: 72px 40px; }
  .svc-faq             { padding: 72px 40px; }

  /* --- Our Work ----------------------------------------------------------- */
  .work-page-hero         { padding: 72px 40px 56px; }
  .work-filters           { padding: 0 40px; }
  .work-page-grid-section { padding: 56px 40px 72px; }
  .work-page-grid         { grid-template-columns: 1fr 1fr; }
}

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

  /* --- Header & Nav -------------------------------------------------------- */
  .aster-nav-inner            { padding: 0 20px; height: 60px; }
  .logo                       { font-size: 15px; }
  .aster-nav-inner .nav-links { display: none; }
  .nav-tel                    { display: none; }
  .nav-right                  { gap: 10px; }
  .btn-nav                    { padding: 8px 14px; font-size: 12px; }

  /* --- Footer ------------------------------------------------------------- */
  .site-footer   { padding: 40px 20px 24px !important; }
  .footer-top    { grid-template-columns: 1fr !important; gap: 28px !important; }
  .footer-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; padding-top: 20px !important; }
  .footer-copy   { font-size: 12px; word-break: break-word; }
  .footer-badges { flex-wrap: wrap !important; gap: 8px !important; }
  .badge         { font-size: 10px; padding: 4px 8px; }
  .footer-col ul { display: flex !important; flex-direction: column !important; gap: 8px !important; }
  .footer-col a  { margin-bottom: 0 !important; }

  /* --- Shared ------------------------------------------------------------- */
  .section-head { grid-template-columns: 1fr !important; gap: 24px !important; margin-bottom: 36px !important; }
  .cta-section  { grid-template-columns: 1fr !important; padding: 60px 20px !important; gap: 36px !important; }
  .cta-right    { min-width: unset !important; }
  .btn-lg       { width: 100% !important; }

  .btn-primary,
  .btn-outline  { width: 100% !important; text-align: center !important; justify-content: center !important; box-sizing: border-box !important; }

  /* --- Home — Hero --------------------------------------------------------
   * grid-template-columns needs !important because page-home.css (which sets
   * it to 1fr 1fr) loads after this file and wins without it.
   * ----------------------------------------------------------------------- */
  .hero                      { grid-template-columns: 1fr !important; padding: 48px 20px 60px !important; gap: 40px !important; }
  .hero h1                   { font-size: clamp(30px, 8vw, 44px) !important; }
  .hero-sub                  { font-size: 15px !important; max-width: 100% !important; }
  .hero-actions              { flex-direction: column !important; align-items: stretch !important; }
  .hero-actions .btn-primary,
  .hero-actions .btn-outline { text-align: center !important; width: 100% !important; }
  .hero-cards-row            { grid-template-columns: 1fr 1fr !important; }
  .hero-card-main            { padding: 24px !important; }
  .hcard-metric              { font-size: 40px !important; }
  .hero-card-sm              { padding: 18px !important; }
  .hcsm-num                  { font-size: 22px !important; }

  /* --- Home — Clients ----------------------------------------------------- */
  .clients-bar   { padding: 20px !important; gap: 20px !important; }
  .clients-logos { gap: 24px !important; }

  /* --- Home — Services ---------------------------------------------------- */
  .services             { padding: 60px 20px !important; }
  .services-grid        { grid-template-columns: 1fr !important; }
  .svc-card             { border-right: none !important; border-top: 1px solid var(--border) !important; }
  .svc-card:first-child { border-top: none !important; }

  /* --- Home — Process ----------------------------------------------------- */
  .process      { padding: 60px 20px !important; }
  .process-grid { grid-template-columns: 1fr !important; border: none !important; gap: 1px !important; background: #242424 !important; border-radius: 10px !important; overflow: hidden !important; }
  .proc-step    { border-right: none !important; border-top: none !important; }

  /* --- Home — Work Preview ------------------------------------------------ */
  .work      { padding: 60px 20px !important; }
  .work-head { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  .work-grid { grid-template-columns: 1fr !important; }

  /* --- Home — Why Choose Us ----------------------------------------------- */
  .why              { grid-template-columns: 1fr !important; padding: 60px 20px !important; gap: 40px !important; }
  .why > div        { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; }
  .why-testimonial  { width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; }
  .testimonial-text { font-size: 14px !important; }
  .why-stats-row    { grid-template-columns: 1fr 1fr !important; gap: 12px !important; width: 100% !important; box-sizing: border-box !important; }
  .why-stat         { padding: 18px 16px !important; box-sizing: border-box !important; }
  .why-stat-num     { font-size: 26px !important; letter-spacing: -0.5px !important; }

  /* --- About -------------------------------------------------------------- */
  .about-hero           { padding: 48px 20px !important; }
  .about-hero-inner     { grid-template-columns: 1fr !important; gap: 40px !important; }
  .about-hero-statement { font-size: 16px !important; }
  .about-story          { grid-template-columns: 1fr !important; padding: 60px 20px !important; gap: 40px !important; }
  .about-story-stats    { grid-template-columns: 1fr 1fr !important; }
  .about-values         { padding: 60px 20px !important; }
  .values-grid          { grid-template-columns: 1fr !important; }
  .about-team           { padding: 60px 20px !important; }
  .team-grid            { grid-template-columns: 1fr 1fr !important; }

  /* --- Services Page ------------------------------------------------------ */
  .svc-page-hero                      { padding: 48px 20px !important; }
  .svc-page-hero-inner                { grid-template-columns: 1fr !important; gap: 36px !important; }
  .svc-page-hero-actions              { flex-direction: column !important; align-items: stretch !important; }
  .svc-page-hero-actions .btn-primary,
  .svc-page-hero-actions .btn-outline { text-align: center !important; }
  .svc-promise-strip                  { flex-direction: column !important; padding: 0 20px !important; align-items: stretch !important; }
  .svc-promise-item                   { padding: 20px 0 !important; }
  .svc-promise-sep                    { width: 100% !important; height: 1px !important; margin: 0 !important; }
  .svc-grid-section                   { padding: 60px 20px !important; }
  .svc-cards-grid                     { grid-template-columns: 1fr !important; }
  .svc-card-v2                        { padding: 24px !important; }
  .svc-tag-pill                       { font-size: 10px !important; padding: 3px 8px !important; }
  .svc-included                       { padding: 60px 20px !important; }
  .svc-included-grid                  { grid-template-columns: 1fr !important; }
  .svc-audience                       { padding: 60px 20px !important; }
  .svc-audience-inner                 { grid-template-columns: 1fr !important; gap: 40px !important; }
  .svc-faq                            { padding: 60px 20px !important; }
  .svc-faq-inner                      { grid-template-columns: 1fr !important; gap: 40px !important; }
  .svc-trust-row                      { flex-wrap: wrap !important; gap: 16px !important; justify-content: center !important; }
  .svc-trust-divider                  { display: none !important; }

  /* --- Our Work Page ------------------------------------------------------ */
  .work-page-hero         { padding: 48px 20px 44px !important; }
  .work-hero-stats        { display: flex !important; flex-wrap: wrap !important; gap: 20px 32px !important; align-items: flex-start !important; }
  .work-hero-stat         { flex: 0 0 auto !important; }
  .work-hero-divider      { display: none !important; }
  .work-filters           { padding: 0 20px !important; gap: 0 !important; overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; }
  .work-filter-btn        { padding: 16px 14px 14px !important; font-size: 12px !important; white-space: nowrap !important; flex-shrink: 0 !important; }
  .work-page-grid-section { padding: 48px 20px 60px !important; }
  .work-page-grid         { grid-template-columns: 1fr !important; }

  /* --- Contact Page ------------------------------------------------------- */
  .contact-hero           { padding: 48px 20px !important; grid-template-columns: 1fr !important; gap: 36px !important; }
  .contact-form-section   { padding: 48px 20px 60px !important; grid-template-columns: 1fr !important; gap: 40px !important; }
  .contact-form-left      { position: static !important; }
  .contact-hero-info-row  { flex-wrap: nowrap !important; gap: 12px !important; }
  .contact-hero-info-icon { flex-shrink: 0 !important; }

  /* --- Blog Page ---------------------------------------------------------- */
  .blog-hero         { padding: 48px 20px !important; grid-template-columns: 1fr !important; gap: 32px !important; }
  .blog-hero-right   { flex-wrap: wrap !important; }
  .blog-hero-stat    { flex: 1 1 120px !important; }
  .blog-grid-section { padding: 36px 20px 56px !important; }
  .blog-grid         { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* --- Single Post -------------------------------------------------------- */
  .single-post-hero     { padding: 40px 20px 32px !important; }
  .single-post-featured { padding: 0 20px !important; margin-top: 28px !important; }
  .single-post-content  { padding: 32px 20px 48px !important; }
  .single-post-footer   { padding: 20px 20px 40px !important; flex-wrap: wrap !important; gap: 10px !important; }
  .related-posts        { padding: 40px 20px 56px !important; }
  .related-posts-grid   { grid-template-columns: 1fr !important; }
  .single-post-content pre  { overflow-x: auto !important; white-space: pre !important; }
  .single-post-content code { word-break: break-word !important; }
  .single-post-content ul,
  .single-post-content ol   { padding-left: 18px !important; }
  .single-post-excerpt      { font-size: 15px !important; padding-left: 14px !important; }

  /* --- Pagination --------------------------------------------------------- */
  .blog-pagination a.page-numbers,
  .blog-pagination span.page-numbers { min-width: 36px !important; height: 36px !important; font-size: 12px !important; }
}

/* =============================================================================
   Small Mobile — max-width: 480px
   ============================================================================= */
@media (max-width: 480px) {

  .footer-bottom   { align-items: center !important; text-align: center !important; }
  .footer-badges   { justify-content: center !important; }
  .hero-cards-row  { grid-template-columns: 1fr !important; }
  .why-stats-row   { grid-template-columns: 1fr !important; }
  .clients-label,
  .clients-divider { display: none !important; }
  .section-title   { letter-spacing: -0.8px !important; }
  .hcard-metric    { font-size: 34px !important; letter-spacing: -1px !important; }

  .about-story-stats { grid-template-columns: 1fr !important; }
  .team-grid         { grid-template-columns: 1fr !important; }
  .about-hero-tags   { gap: 6px !important; }

  .svc-trust-num     { font-size: 24px !important; }
  .svc-cards-grid    { grid-template-columns: 1fr !important; }
  .svc-included-grid { grid-template-columns: 1fr !important; }
  .svc-promise-item  { gap: 10px !important; }
  .svc-promise-icon  { width: 30px !important; height: 30px !important; flex-shrink: 0 !important; }

  .work-hero-stat-num { font-size: 26px !important; }

  .contact-hero-title { font-size: clamp(28px, 9vw, 38px) !important; }

  .blog-hero-stat { min-width: 0 !important; flex: 1 1 100% !important; }
  .blog-card-body { padding: 16px 16px 18px !important; }

  .single-post-title      { letter-spacing: -1px !important; }
  .single-post-content p  { font-size: 15px !important; }
  .single-post-content h2 { letter-spacing: -0.4px !important; }
  .single-post-footer     { gap: 8px !important; }
  .single-post-tag        { font-size: 11px !important; padding: 4px 10px !important; }

  .cta-section { padding: 48px 20px !important; }
}

/* =============================================================================
   Touch devices — disable hover transforms that get stuck on iOS tap
   ============================================================================= */
@media (hover: none) {
  .svc-card-v2:hover,
  .value-card:hover,
  .team-card:hover,
  .blog-card:hover,
  .work-card:hover         { transform: none !important; box-shadow: none !important; }
  .svc-included-item:hover { transform: none !important; box-shadow: none !important; }
  .contact-hero-info-row:hover { transform: none !important; box-shadow: none !important; }
  .section-link:hover      { gap: 8px !important; }
}