/* INTA — responsive layer */

/* === GLOBAL (no breakpoint) ======================================= */
html, body { overflow-x: hidden; max-width: 100%; }
/* === BUTTON MICRO-INTERACTIONS =================================== */
.inta-btn {
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* Shimmer sweep on hover */
.inta-btn::after {
  content: '';
  position: absolute;
  top: -50%; left: -75%;
  width: 50%; height: 200%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.18), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  transition: none;
}
.inta-btn:hover::after {
  left: 125%;
  transition: left 0.55s ease;
}

/* Spring press feel */
.inta-btn:active { transform: scale(0.95) !important; transition: transform 0.08s ease !important; }

/* Ripple keyframe */
@keyframes btn-ripple-anim {
  to { transform: scale(1); opacity: 0; }
}

/* ================================================================ */
footer a[aria-label]:hover { background: var(--sage); border-color: var(--sage); }
a.inta-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); }
.inta-video-thumb:hover .inta-video-thumb__shade { background: rgba(46,61,56,0.45); }
.inta-video-thumb:hover .inta-video-thumb__play > div { transform: scale(1.08); }
.inta-card input:focus, .inta-card textarea:focus { border-color: var(--sage); box-shadow: 0 0 0 3px var(--sage-30); outline: none; }

h1, h2, h3, p, span, a { overflow-wrap: break-word; word-break: normal; }

.inta-nav__toggle { display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:40px; height:40px; background:none; border:none; cursor:pointer; padding:0; }
.inta-nav__toggle span { display:block; width:22px; height:2px; border-radius:2px; background:var(--forest); transition:transform 200ms ease, opacity 200ms ease; }


/* === SMALL DESKTOP ≤ 1100px ====================================== */
@media (max-width: 1100px) {
  .inta-w { max-width: 960px; }
  [data-hero] { min-height: 580px !important; }
  [data-hero] .inta-w { padding-top: 80px !important; padding-bottom: 64px !important; }
}


/* === TABLET ≤ 860px ============================================== */
@media (max-width: 860px) {

  /* Nav — hamburger */
  .inta-nav { flex-wrap: wrap; }
  .inta-nav__toggle { display: flex; }
  .inta-nav__links { display:none; width:100%; flex-direction:column; align-items:flex-start; gap:16px; padding:18px 0 12px; }
  .inta-nav.is-open .inta-nav__links { display: flex; }
  .inta-nav__links .inta-btn { align-self: flex-start; }

  /* Headings never nowrap-overflow */
  h1, h2, h3 { white-space: normal !important; }

  /* 3-col grids → 2-col at tablet */
  [style*="repeat(3,1fr)"],
  [style*="repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  /* 4-col footer grid → 2-col */
  [style*="1.5fr 1fr 1fr 1.3fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px 40px !important;
  }

  /* .inta-w itself used as grid (money module image+text layout) → stack */
  .inta-w[style*="display:grid"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* Cap the image in stacked money-module layout */
  .inta-w[style*="display:grid"] > [style*="aspect-ratio:4/3"] {
    max-width: 600px !important;
  }

  /* Bootcamp 2-col card → single column */
  .responsive-2col { display: block !important; }
  .responsive-2col > * { width: 100% !important; }

  /* Form inner 2-col (name + email side by side) */
  form [style*="display:grid"] { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* Wrapper side padding */
  .inta-w { padding-left: 24px !important; padding-right: 24px !important; }

  /* Section vertical padding */
  .inta-sec { padding-top: 52px !important; padding-bottom: 52px !important; }
  .inta-sec--tight { padding-top: 36px !important; padding-bottom: 36px !important; }

  section[style*="padding:64px 0;"] { padding-top: 52px !important; padding-bottom: 52px !important; }
  section[style*="padding:64px 0 28px"] { padding-top: 48px !important; }
  section[style*="padding:28px 0 64px"] { padding-bottom: 48px !important; }
  section[style*="padding:64px 0 48px"] { padding-top: 52px !important; padding-bottom: 36px !important; }
  section[style*="padding:72px 0 56px"] { padding-top: 52px !important; padding-bottom: 36px !important; }
  section[style*="padding:52px 0 4px"] { padding-top: 36px !important; }
  section[style*="padding-bottom:96px"] { padding-bottom: 64px !important; }

  /* Hero */
  [data-hero] { min-height: 460px !important; }
  [data-hero] .inta-w { padding-top: 64px !important; padding-bottom: 52px !important; }

  /* Products: ZAD note cards — cap width */
  [style*="aspect-ratio:2.15"] { max-width: 100% !important; width: 100% !important; }

  /* Difference section: let button wrap below heading naturally */
  [style*="justify-content:space-between"][style*="flex-wrap:wrap"] { gap: 20px !important; }
}


/* === MOBILE ≤ 560px ============================================== */
@media (max-width: 560px) {

  /* Wrapper — tighter side padding */
  .inta-w { padding-left: 18px !important; padding-right: 18px !important; }

  /* Section padding */
  .inta-sec { padding-top: 40px !important; padding-bottom: 40px !important; }
  .inta-sec--tight { padding-top: 28px !important; padding-bottom: 28px !important; }
  section[style*="padding:64px 0;"] { padding-top: 40px !important; padding-bottom: 40px !important; }
  section[style*="padding:64px 0 28px"] { padding-top: 36px !important; }
  section[style*="padding:28px 0 64px"] { padding-bottom: 36px !important; }
  section[style*="padding:64px 0 48px"] { padding-top: 40px !important; padding-bottom: 28px !important; }
  section[style*="padding:72px 0 56px"] { padding-top: 40px !important; padding-bottom: 28px !important; }
  section[style*="padding-bottom:96px"] { padding-bottom: 48px !important; }

  /* Hero — compact */
  [data-hero] { min-height: 340px !important; }
  [data-hero] .inta-w { padding-top: 48px !important; padding-bottom: 36px !important; }

  /* 2-col grids at depth ≤2 from .inta-w → 1-col
     (Depth 3+ inner component grids like ledger rows are untouched) */
  .inta-w > [style*="display:grid"],
  .inta-w > * > [style*="display:grid"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* 3-col grids → 1-col on small screens (override the 2-col from ≤860px) */
  [style*="repeat(3,1fr)"],
  [style*="repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Footer → fully stacked */
  [style*="1.5fr 1fr 1fr 1.3fr"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* CTA button groups — full-width stack */
  [style*="display:flex"][style*="gap:14px"] { flex-direction: column !important; }
  [style*="display:flex"][style*="gap:14px"] .inta-btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Community CTA (centered flex) — stack */
  [style*="justify-content:center"][style*="gap:14px"] { flex-direction: column !important; align-items: stretch !important; }
  [style*="justify-content:center"][style*="gap:14px"] .inta-btn { width: 100% !important; text-align: center !important; justify-content: center !important; }

  /* Card inner padding — tighter */
  .inta-card { padding: 20px !important; }

  /* Footer bottom bar — stack */
  [style*="justify-content:space-between"][style*="flex-wrap:wrap"] { flex-direction: column !important; gap: 8px !important; }

  /* Products savings book scrollable on tiny screens */
  [style*="display:flex"][style*="gap:24px"][style*="align-items:stretch"] { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Bootcamp stage grid (2-col inside responsive-2col) — keep 2-col, it has max-width:320px */
  [style*="max-width:320px"] { max-width: 100% !important; }
}


/* === SMALL PHONE ≤ 400px ========================================= */
@media (max-width: 400px) {
  .inta-w { padding-left: 14px !important; padding-right: 14px !important; }
  .inta-sec { padding-top: 32px !important; padding-bottom: 32px !important; }
  section[style*="padding:64px 0;"] { padding-top: 32px !important; padding-bottom: 32px !important; }
  [data-hero] { min-height: 300px !important; }
  [data-hero] .inta-w { padding-top: 40px !important; padding-bottom: 28px !important; }
  .inta-card { padding: 16px !important; }
}