/* ──────────────────────────────────────────────────────────────────────────
   LNK Pharmacy Solutions — Mobile Responsive Layer
   Loaded AFTER colors_and_type.css.
   Strategy: target the inline styles used throughout the components by
   matching common attribute patterns + structural selectors. Uses !important
   to override the inline styles set in JSX.

   Breakpoints:
     - tablet:  ≤ 1024px
     - mobile:  ≤ 768px  (primary mobile target)
     - small:   ≤ 480px
   ────────────────────────────────────────────────────────────────────────── */

/* Force all images to be flexible at all sizes */
img {
  max-width: 100%;
  height: auto;
}

/* Prevent any element from forcing horizontal scroll */
html, body {
  overflow-x: hidden;
}

/* ─── Tablet (≤ 1024px) ─── */
@media (max-width: 1024px) {
  /* Tame oversized type one notch before mobile */
  h1 { font-size: 44px !important; }

  /* Inline-styled hero h1's that use exact pixel sizes */
  [style*="font-size: 64px"],
  [style*="fontSize: 64"] { font-size: 44px !important; }

  [style*="font-size: 62px"],
  [style*="fontSize: 62"] { font-size: 42px !important; }

  [style*="font-size: 56px"],
  [style*="fontSize: 56"] { font-size: 40px !important; }

  [style*="font-size: 52px"],
  [style*="fontSize: 52"] { font-size: 38px !important; }

  [style*="font-size: 48px"],
  [style*="fontSize: 48"] { font-size: 36px !important; }

  [style*="font-size: 44px"],
  [style*="fontSize: 44"] { font-size: 32px !important; }
}

/* ─── Mobile (≤ 768px) ─── */
@media (max-width: 768px) {

  /* GLOBAL OVERFLOW PREVENTION — make everything box-sizing aware
     and forcibly constrain widths so nothing pushes past the viewport. */
  *, *::before, *::after {
    box-sizing: border-box !important;
  }

  /* Force every section, div with explicit padding/width, and card
     to respect the viewport width. */
  body, body * {
    max-width: 100vw;
  }

  /* Allow words/em-dashes to break inside tight flex/grid columns —
     prevents long titles like "Priority Care — remote chronic care
     management" from running off the right edge. */
  h1, h2, h3, h4, h5, h6, p, blockquote, li, span, div {
    overflow-wrap: break-word !important;
    word-break: break-word;
    min-width: 0;
  }

  /* Flex/grid children must allow shrinking below their content size
     so long inline content (em-dashes, long words) wraps properly. */
  [style*="display: flex"] > *,
  [style*="display:flex"] > *,
  [style*="display: grid"] > *,
  [style*="display:grid"] > * {
    min-width: 0 !important;
  }

  /* Cards / panels — anything with rounded corners + padding. Box-sizing
     ensures padding stays within the box, max-width prevents overflow. */
  [style*="border-radius"],
  [style*="borderRadius"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ─── Containers and section padding ─── */
  /* Compress big section padding everywhere — covers 96–128px */
  [style*="padding: 96px"],
  [style*="padding: 104px"],
  [style*="padding: 112px"],
  [style*="padding: 120px"],
  [style*="padding: 128px"],
  [style*="padding: 136px"]   { padding: 56px 20px !important; }

  /* Sections with px values for vertical/horizontal e.g. "120px 24px" */
  [style*="96px 24px"],
  [style*="104px 24px"],
  [style*="112px 24px"],
  [style*="120px 24px"],
  [style*="128px 24px"],
  [style*="136px 24px"]       { padding: 56px 20px !important; }

  /* Three-value padding like "112px 24px 120px" */
  [style*="96px 24px 96px"],
  [style*="96px 24px 112px"],
  [style*="104px 24px 112px"],
  [style*="112px 24px 120px"],
  [style*="120px 24px 128px"],
  [style*="120px 24px 136px"],
  [style*="128px 24px 136px"]  { padding: 56px 20px 64px !important; }

  /* ─── Typography scale-down ─── */
  /* Hero headlines */
  [style*="font-size: 64px"],
  [style*="fontSize: 64"] { font-size: 34px !important; line-height: 1.1 !important; }

  [style*="font-size: 62px"],
  [style*="fontSize: 62"] { font-size: 33px !important; line-height: 1.1 !important; }

  [style*="font-size: 56px"],
  [style*="fontSize: 56"] { font-size: 32px !important; line-height: 1.1 !important; }

  [style*="font-size: 52px"],
  [style*="fontSize: 52"] { font-size: 30px !important; line-height: 1.1 !important; }

  [style*="font-size: 48px"],
  [style*="fontSize: 48"] { font-size: 28px !important; line-height: 1.15 !important; }

  [style*="font-size: 44px"],
  [style*="fontSize: 44"] { font-size: 26px !important; line-height: 1.15 !important; }

  [style*="font-size: 40px"],
  [style*="fontSize: 40"] { font-size: 24px !important; line-height: 1.2 !important; }

  [style*="font-size: 36px"],
  [style*="fontSize: 36"] { font-size: 22px !important; line-height: 1.2 !important; }

  [style*="font-size: 32px"],
  [style*="fontSize: 32"] { font-size: 22px !important; line-height: 1.25 !important; }

  [style*="font-size: 28px"],
  [style*="fontSize: 28"] { font-size: 20px !important; line-height: 1.3 !important; }

  /* Body text */
  [style*="font-size: 22px"],
  [style*="fontSize: 22"] { font-size: 18px !important; }

  [style*="font-size: 20px"],
  [style*="fontSize: 20"] { font-size: 17px !important; }

  [style*="font-size: 19px"],
  [style*="fontSize: 19"] { font-size: 16px !important; }

  [style*="font-size: 18px"],
  [style*="fontSize: 18"] { font-size: 16px !important; }

  /* h1, h2 base */
  h1 { font-size: 32px !important; line-height: 1.1 !important; }
  h2 { font-size: 26px !important; line-height: 1.15 !important; }
  h3 { font-size: 20px !important; }

  /* ─── Grids: stack everything ─── */
  [style*="repeat(2, 1fr)"],
  [style*="repeat(3, 1fr)"],
  [style*="repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Asymmetric multi-fr grids — all the patterns used across components */
  [style*="1.3fr 1fr 1fr"],
  [style*="1.3fr 1fr 1fr 1fr"],
  [style*="1fr 1.3fr"],
  [style*="2fr 1fr"],
  [style*="1fr 2fr"],
  [style*="1fr 1fr"],
  [style*="1fr 1.4fr"],
  [style*="1.4fr 1fr"],
  [style*="1.2fr 1fr"],
  [style*="1fr 1.2fr"],
  [style*="1.5fr 1fr"],
  [style*="1fr 1.5fr"],
  [style*="1fr 1.15fr"],
  [style*="1.15fr 1fr"],
  [style*="0.85fr 1.15fr"],
  [style*="1.15fr 0.85fr"],
  [style*="1fr 1.1fr"],
  [style*="1.1fr 1fr"],
  [style*="1.25fr 1fr"],
  [style*="1fr 1.25fr"],
  [style*="1.35fr 1fr"],
  [style*="1fr 1.35fr"],
  [style*="1.6fr 1fr"],
  [style*="1fr 1.6fr"],
  [style*="1.7fr 1fr"],
  [style*="1fr 1.7fr"],
  [style*="38% 62%"],
  [style*="180px 1fr"],
  [style*="110px 1fr"],
  [style*="1fr 320px"],
  [style*="320px 1fr"],
  [style*="1fr 280px"],
  [style*="280px 1fr"],
  [style*="1fr 360px"],
  [style*="360px 1fr"],
  [style*="60px 1fr"],
  [style*="1fr 24px"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Sticky aside in editorial layouts (PatientStory) — kill stickiness on mobile */
  aside[style*="position: sticky"],
  aside[style*="position:sticky"] {
    position: static !important;
    top: auto !important;
  }

  /* Footer's 4-col grid */
  [style*="1.3fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }

  /* Two-col 1fr auto rows (testimonial, contact form footer) — stack */
  [style*="1fr auto"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  [style*="auto 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    text-align: center;
  }

  /* ─── Generic max-width containers shouldn't overflow ─── */
  [style*="max-width: 1200"],
  [style*="maxWidth: 1200"],
  [style*="max-width: 1100"],
  [style*="maxWidth: 1100"],
  [style*="max-width: 1000"],
  [style*="maxWidth: 1000"],
  [style*="max-width: 900"],
  [style*="maxWidth: 900"],
  [style*="max-width: 880"],
  [style*="maxWidth: 880"],
  [style*="max-width: 820"],
  [style*="maxWidth: 820"],
  [style*="max-width: 760"],
  [style*="maxWidth: 760"] {
    max-width: 100% !important;
  }

  /* ─── Buttons: full-width, taller hit targets ─── */
  /* Button rows (flex with gap) — wrap and let buttons breathe */
  section [style*="display: flex"][style*="gap: 12"],
  section [style*="display: flex"][style*="gap: 16"] {
    flex-wrap: wrap !important;
    width: 100% !important;
  }

  button, a[role="button"] {
    min-height: 48px;
    font-size: 15px !important;
  }

  /* ─── Header — hamburger handled in component, just ensure logo doesn't overflow ─── */
  header img { height: 48px !important; }

  /* ─── Footer — single column ─── */
  footer [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  footer [style*="justify-content: space-between"] {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }

  /* Footer logo smaller */
  footer img { height: 56px !important; }

  /* ─── Forms ─── */
  input, textarea, select {
    font-size: 16px !important; /* prevents iOS zoom on focus */
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Form rows that lay out side-by-side fields */
  form [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* ─── Cards / panels with big internal padding ─── */
  [style*="padding: 48px"] { padding: 24px !important; }
  [style*="padding: 56px"] { padding: 28px !important; }
  [style*="padding: 64px"] { padding: 32px !important; }
  [style*="padding: 40px"] { padding: 24px !important; }

  /* ─── Big margins between sections compress ─── */
  [style*="margin-top: 80"],
  [style*="marginTop: 80"]  { margin-top: 32px !important; }

  [style*="margin-top: 64"],
  [style*="marginTop: 64"]  { margin-top: 28px !important; }

  [style*="margin-top: 56"],
  [style*="marginTop: 56"]  { margin-top: 28px !important; }

  [style*="margin-bottom: 56"],
  [style*="marginBottom: 56"]  { margin-bottom: 24px !important; }

  /* ─── Stat row numbers ─── */
  [style*="font-size: 80px"],
  [style*="fontSize: 80"]   { font-size: 44px !important; line-height: 1 !important; }
  [style*="font-size: 72px"],
  [style*="fontSize: 72"]   { font-size: 42px !important; line-height: 1 !important; }
  [style*="font-size: 96px"],
  [style*="fontSize: 96"]   { font-size: 48px !important; line-height: 1 !important; }

  /* Generic mobile-only override class for things that need
     conditional behavior the component can opt into */
  .mobile-stack {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .mobile-hide { display: none !important; }
  .mobile-show { display: block !important; }

  /* By default mobile-show class is hidden on desktop */
}

/* On desktop, hide elements meant only for mobile */
@media (min-width: 769px) {
  .mobile-show { display: none !important; }
  .mobile-only { display: none !important; }
}

/* ─── Small phones (≤ 480px) — extra polish ─── */
@media (max-width: 480px) {
  [style*="font-size: 64px"],
  [style*="fontSize: 64"] { font-size: 30px !important; }

  [style*="font-size: 56px"],
  [style*="fontSize: 56"] { font-size: 28px !important; }

  [style*="padding: 56px 20px"] { padding: 44px 16px !important; }
  [style*="padding: 56px 20px 64px"] { padding: 44px 16px 52px !important; }

  /* Container side padding shrinks */
  body { font-size: 15px; }
}