/*
 * Serenity — responsive overrides.
 * The pages are authored with inline styles (design-canvas artboards). The
 * runtime re-renders them with NORMALIZED inline style text (spaces after
 * colons/semicolons, e.g. "grid-template-columns: 1.1fr 1fr"), so every
 * [style*=...] selector below targets that normalized form and wins with
 * !important. If an inline layout value changes in the HTML, update the
 * matching selector here.
 */

img { max-width: 100%; }

/* ============ tablet and below ============ */
@media (max-width: 1080px) {
  /* 4-up card/step grids become 2-up */
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============ mobile / small tablet ============ */
@media (max-width: 900px) {
  /* --- two-column content sections stack --- */
  [style*="grid-template-columns: 1.1fr 1fr"],
  [style*="grid-template-columns: 1fr 1.4fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr; gap: 72px"],
  [style*="grid-template-columns: 1fr 1fr; gap: 64px"],
  [style*="grid-template-columns: 1fr 1fr; gap: 24px"] {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  [style*="grid-template-columns: 1.4fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  /* --- section padding: 48px gutters -> 24px, giant tops trimmed --- */
  div[style*="max-width: 1200px"],
  div[style*="max-width: 900px"] {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  [style*="padding: 88px 48px"],
  [style*="padding: 96px 48px"],
  [style*="padding: 104px 48px"],
  [style*="padding: 80px 48px"],
  [style*="padding: 72px 48px"],
  [style*="padding: 56px 48px"] {
    padding-top: 52px !important;
    padding-bottom: 56px !important;
  }
  [style*="padding: 0px 48px"] {
    padding-top: 0 !important;
    padding-bottom: 56px !important;
  }
  [style*="48px 0px"] {
    padding-bottom: 0 !important;
  }

  /* --- typography --- */
  h1 { font-size: 37px !important; line-height: 1.16 !important; }
  h2 { font-size: 28px !important; }
  div[style*="font-size: 40px"],
  div[style*="font-size: 38px"],
  div[style*="font-size: 34px"] { font-size: 26px !important; }
  div[style*="font-size: 30px"] { font-size: 24px !important; }

  /* --- fixed-height photo frames --- */
  [style*="height: 520px"],
  [style*="height: 460px"],
  [style*="height: 420px"],
  [style*="height: 400px"],
  [style*="height: 380px"] { height: 300px !important; }

  /* --- dark/cream CTA banners: row -> column --- */
  div[style*="border-radius: 22px"] {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 26px !important;
    padding: 40px 28px !important;
  }

  /* hero button row wraps instead of overflowing */
  [style*="gap: 16px; margin-top: 8px"] { flex-wrap: wrap; }

  /* --- header: drop sticky (it grows tall once stacked) --- */
  [style*="position: sticky"] { position: static !important; }
  /* top info bar: keep phone, hide hours + address */
  [style*="padding: 7px 48px"] {
    padding: 7px 16px !important;
    justify-content: center !important;
  }
  [style*="padding: 7px 48px"] a,
  [style*="padding: 7px 48px"] span + span { display: none !important; }
  /* main bar: logo above centered wrapped links */
  [style*="padding: 16px 40px"] {
    padding: 14px 16px !important;
    flex-direction: column;
    gap: 14px !important;
  }
  [style*="padding: 16px 40px"] > div {
    justify-content: center !important;
    gap: 12px 18px !important;
  }

  /* footer bottom bar stacks */
  [style*="padding: 20px 48px"] {
    padding: 18px 24px !important;
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }
}

/* ============ narrow layouts ============ */
@media (max-width: 700px) {
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* ============ phones ============ */
@media (max-width: 600px) {
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* specialist portraits read better two-up even on phones */
  #especialistas [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* contact form: name/phone fields stack */
  [style*="grid-template-columns: 1fr 1fr; gap: 22px"] {
    grid-template-columns: 1fr !important;
  }
  /* "durante tu infusión" checklist to one column */
  [style*="gap: 14px 28px"] { grid-template-columns: 1fr !important; }
  /* contact form card breathing room */
  [style*="padding: 44px"] { padding: 26px 20px !important; }
}