/* =============================================================
   NICHENCY — RESPONSIVE OVERRIDES
   layout/grid.css

   CRITICAL: This file contains ONLY @media breakpoint rules.
   It must be enqueued LAST in functions.php (after all page CSS).

   WHY: CSS @media rules carry no extra specificity. They only beat
   a non-query rule when they appear later in the cascade. The page
   CSS files (home.css, about.css, etc.) declare the same properties
   without a media query and at equal specificity. If grid.css loads
   before those files, the page CSS always wins and every breakpoint
   here is silently ignored. Loading this file last ensures these
   overrides are the final word at every viewport width.
   ============================================================= */


/* ─────────────────────────────────────────────────────────────
   900px  ·  Tablet / large phone
   ───────────────────────────────────────────────────────────── */
@media screen and (max-width: 900px) {

  /* ── Logo ── */
  .custom-logo-link img,
  .custom-logo-link .custom-logo { height: 36px; max-width: 160px; }

  /* ── Header ── */
  .site-header { padding: 16px 24px; }

  /* ── Home hero ── */
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-card  { display: none; }

  /* ── Home stats bar ── */
  .stats-bar   { padding: 40px 0; }
  .stats-inner { grid-template-columns: repeat(2, 1fr); gap: 32px; }

  /* ── Home about ── */
  .about-grid   { grid-template-columns: 1fr; gap: 40px; }
  .about-stats  { justify-content: center; }

  /* ── Home why-me ── */
  .why-grid { grid-template-columns: 1fr 1fr; }

  /* ── Home case studies ── */
  .case-card   { grid-template-columns: 1fr; }
  .case-img    { min-height: 220px; }
  .case-results { grid-template-columns: repeat(3, 1fr); }

  /* ── Home services + governance ── */
  .services-grid   { grid-template-columns: 1fr 1fr; }
  .governance-grid { grid-template-columns: 1fr 1fr; }

  /* ── Home ownership ── */
  .ownership-section { padding: 80px 0; }
  .ownership-top     { margin-bottom: 48px; }
  .ownership-grid    { grid-template-columns: 1fr; }
  .ownership-statement { grid-template-columns: 1fr; gap: 24px; }
  .ownership-statement .o-aside {
    border-left: none;
    border-top: 1px solid rgba(239,251,248,0.2);
    padding-left: 0;
    padding-top: 24px;
  }

  /* ── Home portfolio ── */
  .portfolio-grid { grid-template-columns: 1fr 1fr; }

  /* ── Home clients ── */
  .clients-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .client-logo  { height: 70px; padding: 10px 16px; }

  /* ── Home testimonials ── */
  .testi-grid { grid-template-columns: 1fr; }

  /* ── Home final CTA ── */
  .final-cta { padding: 80px 0; }

  /* ── About hero ── */
  .hero-section { padding: 80px 0 60px; }

  /* ── About sections ── */
  .drift-grid,
  .bio-wrapper,
  .dual-grid  { grid-template-columns: 1fr; gap: 32px; }
  .check-list { grid-template-columns: 1fr; }

  /* ── Services page section paddings ──
     These sections hard-code their own padding (not .section),
     so the generic .section rule does not reach them. */
  .service-page-wrapper .hero { padding: 80px 24px 70px; }
  .problem      { padding: 70px 24px; }
  .most-requested { padding: 70px 24px; }
  .services     { padding: 70px 24px; }
  .who          { padding: 70px 24px; }
  .comparison   { padding: 70px 24px; }
  .process      { padding: 70px 24px; }
  .cta-section  { padding: 80px 24px; }

  /* ── Services inner grids ── */
  .problem .inner,
  .requests-grid,
  .who-grid,
  .process-steps { grid-template-columns: 1fr; }

  /* ── Pricing ── */
  .pricing-grid { grid-template-columns: 1fr 1fr; }

  /* ── Contact ── */
  .qualification-grid { grid-template-columns: repeat(2, 1fr); }
  .authority-grid     { grid-template-columns: repeat(2, 1fr); }
  .contact-details    { grid-template-columns: 1fr; }
  .request-note       { flex-direction: column; align-items: flex-start; }

  /* ── Shared buttons ── */
  .btn-group { flex-direction: column; gap: 12px; align-items: center; }
  .btn       { width: 100%; max-width: 350px; }

  /* ── Shared hero-buttons (pricing + contact hero) ── */
  .hero-buttons {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
  }
  .hero-buttons .btn,
  .hero-buttons a.btn {
    width: 100%;
    max-width: 350px;
    justify-content: center;
    text-align: center;
  }
}


/* ─────────────────────────────────────────────────────────────
   600px  ·  Mobile phone
   ───────────────────────────────────────────────────────────── */
@media screen and (max-width: 600px) {

  /* ── Base containers ── */
  .container    { padding: 0 20px; }
  .section      { padding: 60px 0; }
  .section-inner { padding: 0 20px; }

  /* ── Logo + header ── */
  .site-header { padding: 14px 20px; }
  .custom-logo-link img,
  .custom-logo-link .custom-logo { height: 32px; max-width: 140px; }

  /* ── Home hero ── */
  .hero { padding: 60px 0; }

  /* ── Home stats bar ── */
  .stats-bar   { padding: 36px 0; }
  .stats-inner { grid-template-columns: 1fr 1fr; }

  /* ── Home why-me ── */
  .why-grid { grid-template-columns: 1fr; }

  /* ── Home case studies ── */
  .case-results { grid-template-columns: 1fr 1fr; gap: 10px; }
  .case-body    { padding: 28px 20px; }

  /* ── Home services + governance ── */
  .services-grid   { grid-template-columns: 1fr; }
  .governance-grid { grid-template-columns: 1fr; }

  /* ── Home ownership ── */
  .ownership-section { padding: 60px 0; }
  .ownership-top     { margin-bottom: 36px; }
  .ownership-inner   { padding: 0 20px; }
  .ownership-statement { padding: 28px 24px; }

  /* ── Home portfolio + clients ── */
  .portfolio-grid { grid-template-columns: 1fr; }
  .clients-grid   { grid-template-columns: 1fr 1fr; gap: 12px; }
  .client-logo    { height: 64px; padding: 10px 14px; }

  /* ── Home final CTA ── */
  .final-cta { padding: 60px 24px; } /* 24px horizontal keeps text off screen edges */

  /* ── About hero ── */
  .hero-section { padding: 60px 0; }

  /* ── About sections ── */
  .bio-wrapper { gap: 24px; }
  .bio-img     { max-width: 160px; margin: 0 auto; }
  .stats-grid  { grid-template-columns: 1fr 1fr; }
  .card        { padding: 28px 24px; }
  .table-container table { min-width: 560px; }

  /* ── Services page sections ── */
  .service-page-wrapper .hero { padding: 60px 20px; }
  .problem        { padding: 60px 20px; }
  .most-requested { padding: 60px 20px; }
  .services       { padding: 60px 20px; }
  .who            { padding: 60px 20px; }
  .comparison     { padding: 60px 20px; }
  .process        { padding: 60px 20px; }
  .cta-section    { padding: 60px 20px; }

  /* ── Pricing ── */
  .pricing-grid     { grid-template-columns: 1fr; }
  .cost-frame       { padding: 28px 20px; }
  .not-included-box { padding: 28px 20px; }
  .faq-item         { padding: 20px 22px; }

  /* ── Contact ── */
  .qualification-grid  { grid-template-columns: 1fr; }
  .form-container      { padding: 40px 24px; }
  .authority-section   { padding: 40px 24px; }
  .not-for-box         { padding: 28px 20px; }
  .response-box        { padding: 28px 20px; }
  .contact-details-home { flex-direction: column; align-items: center; gap: 16px; }
  .request-note        { padding: 20px; gap: 14px; }

  /* ── Shared buttons ── */
  .btn, .btn-ghost {
    width: 100%;
    max-width: 300px;
    justify-content: center;
    margin-left: 0;
  }
  .hero-buttons .btn,
  .hero-buttons a.btn { max-width: 300px; }
}


/* ─────────────────────────────────────────────────────────────
   380px  ·  Small phone (iPhone SE, Galaxy A-series, etc.)
   ───────────────────────────────────────────────────────────── */
@media screen and (max-width: 380px) {

  /* ── Base containers ── */
  .container { padding: 0 16px; }

  /* ── Logo ── */
  .custom-logo-link img,
  .custom-logo-link .custom-logo { height: 28px; max-width: 120px; }

  /* ── Home stats bar ── */
  .stats-inner { grid-template-columns: 1fr; }

  /* ── Home about ── */
  .about-stats   { gap: 8px; }

  /* ── Home case studies ── */
  .case-results { grid-template-columns: 1fr; }

  /* ── Home clients ── */
  .clients-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .client-logo  { height: 60px; padding: 8px 12px; }

  /* ── About stats ── */
  .stats-grid { grid-template-columns: 1fr; }

  /* ── Services step cards ── */
  .step { padding: 28px 20px; }

  /* ── Pricing ── */
  .pricing-grid { grid-template-columns: 1fr; }
  .cost-frame   { padding: 24px 16px; }

  /* ── Contact: authority grid 5 items → 1 col ── */
  .authority-grid { grid-template-columns: 1fr; }
  .governance-grid { grid-template-columns: 1fr; }
}