/* AssafShami.com responsive hardening — 2026-10-15
   Loaded AFTER all legacy/page styles to prevent older responsive rules from winning. */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: clip; }
*, *::before, *::after { box-sizing: border-box; }
img, video, iframe, svg { max-width: 100%; height: auto; }

/* Any major grid/flex child must be allowed to shrink instead of squeezing neighbors. */
.section-head > *,
.compact-head > *,
.hero-grid > *,
.problem-grid > *,
.testimonial-feature > *,
.testimonial-story > *,
.about17-role-grid > *,
.about17-bridge > *,
.bridge-enhanced > *,
.contact > *,
.contact21-form-grid > * { min-width: 0; }

@media (max-width: 980px) {
  /* Editorial section headers should read vertically on phones and tablets. */
  .section-head,
  .compact-head,
  #testimonials .section-head {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
    align-items: start !important;
  }
  .section-head > div,
  .compact-head > div,
  #testimonials .section-head > div {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-top: 0 !important;
  }

  /* The owner/business bridges must stack, never squeeze three columns. */
  .about17-bridge,
  .bridge-enhanced {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }
  .about17-bridge-arrow,
  .bridge-enhanced .bridge-center {
    width: 100% !important;
    min-height: 58px !important;
    height: auto !important;
  }
  .about17-bridge-arrow {
    flex-direction: row !important;
  }
  .about17-bridge-arrow > span {
    transform: rotate(90deg) !important;
  }
  .bridge-enhanced .bridge-connector {
    width: 150px !important;
    margin: 0 auto !important;
    transform: rotate(90deg) !important;
  }
  .bridge-enhanced .bridge-connector small { display: none !important; }

  /* Featured/video testimonial stories stack cleanly. */
  .homepage-featured-testimonial,
  .testimonial-feature,
  .testimonial-story,
  .testimonial-story-alt {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .home42-written-testimonial { grid-column: auto !important; }

  /* Tablet-safe roles. */
  .about17-role-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .about17-role-grid article { min-height: 0 !important; }
}

@media (max-width: 900px) {
  /* Timeline switches to a left rail before tablet widths get cramped. */
  .about17-timeline::before {
    left: 18px !important;
    top: 38px !important;
    bottom: 38px !important;
  }
  .about17-timeline-item {
    grid-template-columns: 36px minmax(0, 1fr) !important;
    gap: 18px !important;
    padding: 24px 0 !important;
  }
  .about17-timeline-item .year {
    grid-column: 2 !important;
    grid-row: 1 !important;
    text-align: left !important;
    padding-top: 0 !important;
  }
  .about17-timeline-dot {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    margin: 4px auto 0 !important;
  }
  .about17-timeline-item > div:last-child {
    grid-column: 2 !important;
    min-width: 0 !important;
  }
}

@media (max-width: 760px) {
  .wrap { width: min(var(--max), calc(100% - 28px)) !important; }
  .section { padding: 64px 0 !important; }
  .section h2,
  .page-hero h1 { font-size: clamp(38px, 11vw, 56px) !important; }
  .section h3 { font-size: clamp(26px, 8vw, 32px) !important; }
  .section p { font-size: 16px !important; line-height: 1.62 !important; }

  /* Roles should be one card per row on phones. */
  .about17-role-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }
  .about17-role-grid article {
    padding: 24px 20px !important;
    min-height: 0 !important;
  }

  .about17-bridge-card,
  .bridge-card { padding: 24px 20px !important; }
  .about17-brand-path,
  .bridge-path,
  .relationship-path { gap: 6px !important; }

  /* Prevent long copy in all editorial headers from becoming narrow columns. */
  .section-head p,
  .compact-head p { max-width: none !important; }

  /* Forms remain easy to use and avoid iOS auto-zoom. */
  input, textarea, select, button { font-size: 16px; }
  .btn, button { min-height: 44px; }

  /* Any decorative orbit must never create document width. */
  .cta-premium,
  .cta-orbit { overflow: hidden !important; overflow: clip !important; }
}

@media (max-width: 640px) {
  .about17-role-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .about17-brand-path span,
  .bridge-path span,
  .relationship-path span { white-space: normal !important; }

  /* Browse/topic cards are more readable as one column on small phones. */
  .insights-topic-grid,
  .beliefs23-principle-rail {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Small-screen CTA actions stack instead of competing for width. */
  .actions { flex-wrap: wrap !important; }
  .hero .actions .btn,
  .testimonial-actions .btn { width: 100% !important; justify-content: center !important; }
}

@media (max-width: 380px) {
  .wrap { width: min(var(--max), calc(100% - 22px)) !important; }
  .section { padding: 56px 0 !important; }
  .section h2,
  .page-hero h1 { font-size: clamp(34px, 11.5vw, 48px) !important; }

  /* Keep numbered belief rows readable at 320–360px. */
  .belief-interactive {
    grid-template-columns: 44px minmax(0, 1fr) 30px !important;
    gap: 10px !important;
  }
  .belief-interactive h3,
  .belief-interactive p { overflow-wrap: anywhere; }
}


/* ==========================================================
   STICKY MOBILE NAV — ROBUST CURRENT-SCROLL FIX
   ========================================================== */

@media (max-width:1180px){
  .site-header{
    z-index:2000 !important;
  }

  .site-header .links{
    position:fixed !important;
    left:16px !important;
    right:16px !important;
    width:auto !important;
    top:var(--mobile-menu-top, 80px) !important;
    max-height:calc(100dvh - var(--mobile-menu-top, 80px) - 16px) !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    z-index:2001 !important;
    border-radius:18px !important;
    box-shadow:0 20px 50px rgba(15,29,43,.24) !important;
  }

  .site-header .links:not(.open){
    display:none !important;
  }

  .site-header .links.open{
    display:flex !important;
    flex-direction:column !important;
  }

  body.nav-open{
    overflow:hidden !important;
    touch-action:none;
  }
}

@media (max-width:520px){
  .site-header .links{
    left:10px !important;
    right:10px !important;
  }
}


/* ==========================================================
   v51 MOBILE NAV PORTAL — viewport-level menu panel
   ========================================================== */
@media (max-width:1180px){
  body > #site-navigation.mobile-nav-portal{
    display:none !important;
    position:fixed !important;
    top:var(--mobile-menu-top, 86px) !important;
    left:16px !important;
    right:16px !important;
    bottom:auto !important;
    width:auto !important;
    max-width:none !important;
    max-height:calc(100dvh - var(--mobile-menu-top, 86px) - 16px) !important;
    margin:0 !important;
    padding:12px !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:5px !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    background:rgba(255,253,249,.99) !important;
    border:1px solid #d9e3ee !important;
    border-radius:18px !important;
    box-shadow:0 22px 54px rgba(22,40,59,.22) !important;
    backdrop-filter:blur(14px) !important;
    z-index:2147483000 !important;
  }

  body > #site-navigation.mobile-nav-portal.open{
    display:flex !important;
  }

  body > #site-navigation.mobile-nav-portal > a:not(.nav-cta){
    width:100% !important;
    min-height:46px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    padding:0 14px !important;
    border-radius:12px !important;
    font-size:14px !important;
  }

  body > #site-navigation.mobile-nav-portal > .nav-cta{
    width:100% !important;
    min-height:48px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:7px 0 0 !important;
    border-radius:12px !important;
    font-size:14px !important;
  }

  body.nav-open{overflow:hidden !important;}
}

@media (max-width:520px){
  body > #site-navigation.mobile-nav-portal{
    left:10px !important;
    right:10px !important;
  }
}