/* =============================================================
   Maxxi Saúde — Site styles
   Sits on top of colors_and_type.css.
   ============================================================= */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }

/* CSS knob driven by the Tweaks panel — picks which brand color is the
   "protagonist". Defaults to the natural pairing: green primary + blue support. */
:root {
  --site-accent-50:  var(--ms-green-50);
  --site-accent-100: var(--ms-green-100);
  --site-accent-200: var(--ms-green-200);
  --site-accent-300: var(--ms-green-300);
  --site-accent-400: var(--ms-green-400);
  --site-accent-500: var(--ms-green-500);
  --site-accent-600: var(--ms-green-600);
  --site-accent-700: var(--ms-green-700);
  --site-accent-800: var(--ms-green-800);
  --site-accent-glow: var(--sh-accent-glow);
}
[data-accent="blue"] {
  --site-accent-50:  var(--ms-blue-50);
  --site-accent-100: var(--ms-blue-100);
  --site-accent-200: var(--ms-blue-200);
  --site-accent-300: var(--ms-blue-300);
  --site-accent-400: var(--ms-blue-400);
  --site-accent-500: var(--ms-blue-500);
  --site-accent-600: var(--ms-blue-600);
  --site-accent-700: var(--ms-blue-700);
  --site-accent-800: var(--ms-blue-800);
  --site-accent-glow: var(--sh-brand-glow);
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--site-accent-400);
  outline-offset: 2px;
  border-radius: 6px;
}

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 32px;
}
.container-wide { max-width: 1280px; margin: 0 auto; padding: 0 32px; }

main { display: block; }
section { position: relative; }

/* Reduce default link decoration when used inline in cards */
.no-link, .no-link:hover { color: inherit; text-decoration: none; }

/* Generic hover lift used by cards */
.lift {
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
}

/* Scroll-in reveal */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* "Compact" vs "Comfortable" specialty grid density */
.specialty-grid {
  display: grid;
  gap: var(--grid-gap, 20px);
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-min, 280px), 1fr));
}

/* Page-section spacing */
.section-pad { padding: 96px 0; }
.section-pad-sm { padding: 64px 0; }

/* Soft dotted background for hero on tech page */
.bg-grid {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(41,101,134,0.10) 1px, transparent 0);
  background-size: 22px 22px;
}

/* Subtle wash backgrounds for alternating sections */
.bg-wash-blue { background: linear-gradient(180deg, var(--ms-blue-50) 0%, transparent 100%); }
.bg-wash-green { background: linear-gradient(180deg, var(--ms-green-50) 0%, transparent 100%); }

/* Truncation utility */
.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tweaks panel z-index above everything */
.tweaks-z { z-index: 80; }

/* Mobile tweaks */
@media (max-width: 860px) {
  .container, .container-wide { padding: 0 20px; }
  .section-pad { padding: 64px 0; }
  .section-pad-sm { padding: 48px 0; }
  h1, .t-display { font-size: 40px !important; line-height: 1.05 !important; }
  h2, .t-h2 { font-size: 28px !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}