/* responsive.css — additive, non-destructive tweaks for mobile responsiveness and a11y */

/* 0) Media defaults */
img, svg, video, canvas { max-width: 100%; height: auto; }
iframe { max-width: 100%; border: 0; }
:where(.wrap){ width: 100%; }
:root{ --safe-top: env(safe-area-inset-top); --safe-bottom: env(safe-area-inset-bottom); }

/* 1) Tap target sizing + focus visibility */
:where(a, button, .btn, .cta, [role="button"]) {
  min-height: 44px;
  min-width: 44px;
}
:where(a, button, .btn, .cta, input, textarea):focus-visible {
  outline: 3px solid rgba(191,161,57,.9);
  outline-offset: 2px;
  box-shadow: none;
}

/* 2) Prevent sticky header overlap for in-page anchors */
html { scroll-padding-top: max(84px, var(--safe-top)); }
#services { scroll-margin-top: 120px; } /* preserve behavior already used */

/* 3) Forms: prevent zoom on iOS */
.form input, .form textarea, input, textarea { font-size: 16px; line-height: 1.4; }

/* 4) Tables & wide blocks: allow horizontal scroll within container only */
:where(.table, table, .code, pre) { max-width: 100%; overflow-x: auto; display: block; }

/* 5) Grids: ensure single-column on narrow screens if not already covered */
@media (max-width: 640px){
  .grid:not(.force-cols) { grid-template-columns: 1fr !important; }
  .portfolio-grid { grid-template-columns: 1fr !important; }
  .top-inner { flex-wrap: wrap; gap: 8px; }
}

/* 6) Safe areas for sticky bars */
.promo { padding-top: max(8px, var(--safe-top)); }
footer { padding-bottom: max(16px, var(--safe-bottom)); }

/* 7) Nav link spacing for easier touch */
.nav a, .top a { padding-block: 8px; }

/* === Added: Content-side padding for readability (excludes header/nav/footer) === */
@media (max-width: 1024px){
  main.wrap { 
    padding-left: clamp(14px, 4vw, 28px);
    padding-right: clamp(14px, 4vw, 28px);
    box-sizing: border-box;
  }
}

/* === Added: Review cards – keep aspect and spacing on small screens === */
@media (max-width: 720px){
  .reviews .rev-viewport{ padding-left: 16px; padding-right: 16px; }
  .reviews .rev-track{ gap: 16px; }
  .reviews .rev{ 
    flex: 0 0 92%;
    max-width: 92%;
  }
  .reviews .rev-ctrl{ 
    top: auto; bottom: 8px; transform: none; 
    width: 40px; height: 40px; font-size: 20px;
  }
}

/* Micro-tweak for ultra-narrow devices */
@media (max-width: 380px){
  .reviews .rev{ flex-basis: 96%; max-width: 96%; }
  main.wrap { padding-left: 12px; padding-right: 12px; }
}