/* ============================================================================
   Bloomdesk — responsive layer
   ----------------------------------------------------------------------------
   The section templates use inline styles for pixel-perfect desktop fidelity,
   and inline styles cannot carry media queries. This file adapts the layout for
   tablet and phone by overriding those inline declarations with !important
   inside media queries (external !important beats inline non-important).

   Anything wider than 1024px is left completely untouched, so the desktop
   design is unchanged. Selectors match the literal inline-style text the
   templates emit (compact `prop:value`, no spaces).
   ========================================================================== */

/* Never allow sideways scrolling from an oversized inline width. */
html, body { max-width: 100%; overflow-x: hidden; }

/* Fluid media. No !important on purpose: decorative cropped mockups that set an
   inline `max-width:none` keep their value and stay correctly clipped. */
img, svg, video { max-width: 100%; }
img { height: auto; }

/* ===== Tablet : ≤1024px ================================================== */
@media (max-width: 1024px) {
  /* Dense icon / card / stat grids (3–6 columns) drop to two columns.
     repeat(7) is deliberately excluded — that's the calendar mockup. */
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns:repeat(6"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Trim the wide 40px gutters. */
  section[style], footer[style] { padding-left: 30px !important; padding-right: 30px !important; }
  nav > div[style]              { padding-left: 30px !important; padding-right: 30px !important; }
}

/* ===== Phone : ≤768px =================================================== */
@media (max-width: 768px) {
  /* Text-card grids and every custom fraction/auto layout collapse to one
     column. (repeat(4–6) stay two-up from the rule above; repeat(7) — the
     calendar — is never targeted, so it keeps its shape.) */
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:1"],
  [style*="grid-template-columns:0"],
  [style*="grid-template-columns:."],
  [style*="grid-template-columns:auto"] {
    grid-template-columns: 1fr !important;
  }
  /* Footer's link columns read better two-up than as one long list. */
  [style*="grid-template-columns:1.5fr 1fr 1fr 1fr 1fr 1.2fr"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Flex rows may wrap instead of overflowing the viewport. */
  [style*="display:flex"] { flex-wrap: wrap !important; }

  /* Tighter gutters on the full-width wrappers. */
  section[style], footer[style] { padding-left: 18px !important; padding-right: 18px !important; }
  nav > div[style]              { padding-left: 18px !important; padding-right: 18px !important; }

  /* Shrink the largest inner card / banner paddings so content isn't cramped. */
  [style*="padding:44px 50px"] { padding: 28px 22px !important; }
  [style*="padding:34px 40px"] { padding: 24px 20px !important; }
  [style*="padding:28px 36px"] { padding: 22px 18px !important; }
  [style*="padding:24px 34px"] { padding: 20px 18px !important; }
  [style*="padding:24px 30px"] { padding: 20px 18px !important; }
  [style*="padding:20px 28px"] { padding: 18px 16px !important; }

  /* The desktop nav links have no mobile menu on this static page — hide them
     and keep the logo + action buttons. */
  nav [style*="gap:34px"] { display: none !important; }

  /* Decorative vertical divider rules become stray lines once stacked. */
  [style*="width:1px;height:60px"] { display: none !important; }

  /* Collapse the tall phone-mockup canvas so there's no empty gap. */
  [style*="min-height:560px"] { min-height: 0 !important; }

  /* Scale down oversized display type. */
  [style*="font-size:64px"], [style*="font-size:62px"] { font-size: 34px !important; }
  [style*="font-size:52px"], [style*="font-size:50px"] { font-size: 31px !important; }
  [style*="font-size:48px"], [style*="font-size:46px"] { font-size: 29px !important; }
  [style*="font-size:42px"], [style*="font-size:40px"] { font-size: 27px !important; }
  [style*="font-size:34px"]                            { font-size: 25px !important; }
  [style*="font-size:32px"], [style*="font-size:30px"] { font-size: 23px !important; }
}