/* =============================================================
   BC HOME SERVICE — v5 fixes (read-more styles + mobile perf)
   Loaded on every page AFTER main.css / modern.css.
   1) Read-more clamp buttons (used by js/read-more.js)
   2) Mobile performance: decorative animations disabled <= 768px
      (design, layout and hero slider stay intact — they are cheap
      CSS transitions; only continuous repaint loops are killed)
   ============================================================= */

/* ===================== 1) READ-MORE ===================== */
p.rm-clamped,
.lead.rm-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.rm-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  margin-bottom: 6px;
  padding: 5px 14px 5px 12px;
  border: 1px solid rgba(46, 134, 222, 0.35);
  border-radius: 999px;
  background: rgba(46, 134, 222, 0.07);
  color: #2E86DE;
  font: 700 0.8rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.rm-btn:hover { background: rgba(46, 134, 222, 0.14); border-color: rgba(46, 134, 222, 0.6); }
.rm-btn:focus-visible { outline: 2px solid #2E86DE; outline-offset: 2px; }
/* dark sections (footer/hero-adjacent dark cards) */
.rm-dark .rm-btn, section[class*="dark"] .rm-btn, .m-dark .rm-btn {
  border-color: rgba(72, 202, 228, 0.4);
  background: rgba(72, 202, 228, 0.1);
  color: #48CAE4;
}
@media print { .rm-btn { display: none !important; } p.rm-clamped { -webkit-line-clamp: unset !important; overflow: visible !important; display: block !important; } }

/* ===================== 2) MOBILE PERFORMANCE (<= 768px) ===================== */
@media (max-width: 768px) {
  /* continuous-loop animations: OFF (they force endless repaints and drain battery) */
  .hero-particles, .hero-particles span { display: none !important; animation: none !important; }
  .page-hero-orbit, .hero-orbit, .glow-orb, .beam-card::after,
  .m-orbit, .m-chip, .fx-reveal, [data-animate], .m-reveal, .m-stagger > * {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    will-change: auto !important;
  }
  /* counters & reveals: show final state instantly (JS may still animate — cheap) */
  .m-counter, .m-counter-card, .count-up { transition: none !important; }
  /* 3D/tilt/magnetic effects are pointer-based — irrelevant on touch, make sure no residue */
  .m-tilt, .m-magnetic, .m-lift { transform: none !important; transition: none !important; }
  /* confetti never on mobile */
  .confetti-piece { display: none !important; }
  /* expensive blurs: reduce or remove (the overlays are already ~98% opaque) */
  .mobile-nav { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .mobile-nav-backdrop { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  /* image hover zooms: skip on touch (no hover anyway) */
  .svc-img-wrap img, .m-card img, .ba-comparison img { transition: none !important; }
  /* text shimmer / gradients loops: OFF */
  .text-shimmer, .shimmer, .grad-3d { animation: none !important; }
}

/* ===================== 3) RESPONSIVE REFINEMENTS (all breakpoints) ===================== */
/* horizontal-overflow guards — nothing may cause sideways scroll */
html, body { overflow-x: clip; }
img, video, svg { max-width: 100%; height: auto; }
pre, table { max-width: 100%; overflow-x: auto; }

/* sticky CTA must respect the iPhone home-indicator safe area */
.m-sticky-cta { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); }
.ai-chat-float { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
.whatsapp-float { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }

/* tiny phones: tighten type scale so nothing wraps ugly */
@media (max-width: 380px) {
  h1 { font-size: clamp(1.6rem, 7vw, 2.1rem) !important; }
  h2 { font-size: clamp(1.35rem, 6vw, 1.8rem) !important; }
  .container { padding-left: 16px; padding-right: 16px; }
}

/* respect users who ask for reduced motion everywhere */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}