/* ──────────────────────────────────────────────────────────────
   Responsive layer for the Blackstone site.
   Additive only — desktop is unchanged. The page is rendered by React,
   which serializes inline styles as "prop: value" (space after colon), so
   selectors match on values/keywords that are format-independent.
   ────────────────────────────────────────────────────────────── */

img {
  max-width: 100%;
}

/* Caret hint on the Services nav item (has a hover dropdown) */
[data-navlink="services"]::after { content: " \25BE"; font-size: 0.72em; opacity: 0.65; margin-left: 1px; }

/* Article body rendered from the CMS (blog post detail) */
[data-postbody] > *:first-child { margin-top: 0; }
[data-postbody] p { margin: 0 0 26px; }
[data-postbody] h1, [data-postbody] h2, [data-postbody] h3 { font-family: 'Cinzel', serif; font-weight: 500; color: #f5f3ef; line-height: 1.15; margin: 42px 0 18px; }
[data-postbody] h1 { font-size: 34px; }
[data-postbody] h2 { font-size: 30px; }
[data-postbody] h3 { font-size: 24px; }
[data-postbody] a { color: #C8A24A; }
[data-postbody] strong { color: #f5f3ef; }
[data-postbody] ul, [data-postbody] ol { margin: 0 0 26px; padding-left: 22px; }
[data-postbody] li { margin-bottom: 10px; }
[data-postbody] blockquote { margin: 44px 0; padding: 24px 34px; border-left: 2px solid #C8A24A; background: #0c0c0e; border-radius: 0 16px 16px 0; }
[data-postbody] blockquote p { margin: 0; font-family: 'Cinzel', serif; font-style: italic; color: #f5f3ef; font-size: clamp(20px, 2.6vw, 30px); line-height: 1.4; }
[data-postbody] img { width: 100%; height: auto; border-radius: 12px; margin: 18px 0; }
[data-postbody] code { background: #0c0c0e; border: 1px solid rgba(245,243,239,0.1); padding: 2px 7px; border-radius: 6px; font-size: 0.9em; }

/* Legal / policy articles (Privacy, Terms, Security) */
[data-legal] h2 { font-family: 'Cinzel', serif; font-weight: 500; font-size: clamp(22px, 2.6vw, 28px); color: #f5f3ef; margin: 44px 0 16px; }
[data-legal] p { font-size: 16px; line-height: 1.8; color: rgba(245,243,239,0.62); margin: 0 0 16px; }
[data-legal] ul { margin: 0 0 18px; padding-left: 22px; }
[data-legal] li { font-size: 16px; line-height: 1.8; color: rgba(245,243,239,0.62); margin-bottom: 8px; }

/* Injected mobile burger (responsive.js) — hidden on desktop only */
@media (min-width: 881px) {
  #bs-burger {
    display: none !important;
  }
}

/* ===== Tablet & below ===== */
@media (max-width: 880px) {

  /* Collapse every multi-column grid to one column */
  [style*="display:grid"],
  [style*="display: grid"] {
    grid-template-columns: 1fr !important;
  }

  /* Wide horizontal flex rows wrap instead of overflowing */
  [style*="gap:clamp(28px"],
  [style*="gap: clamp(28px"] {
    flex-wrap: wrap !important;
  }

  /* Tighten the fixed-height flip service cards so they're less sparse stacked */
  [style*="height:360px"],
  [style*="height: 360px"] {
    height: 300px !important;
  }

  /* Nav: hide the desktop pill + "Start a project" button (burger shown by JS) */
  [data-nav-wrap] {
    display: none !important;
  }

  [data-nav] button:not([data-navlink]) {
    display: none !important;
  }
}

/* ===== Phones ===== */
@media (max-width: 560px) {

  /* Decorative floating shapes add clutter / overflow risk on small screens */
  [data-shape] {
    display: none !important;
  }

  /* Trim oversized section padding */
  section {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}
/* testimonial quote scroll (long reviews) */
[data-tq]::-webkit-scrollbar { width: 4px; }
[data-tq]::-webkit-scrollbar-thumb { background: rgba(200,162,74,0.35); border-radius: 4px; }
[data-tq]::-webkit-scrollbar-track { background: transparent; }
/* team slider row — scrollbar hidden, arrows drive it */
[data-teamrow]::-webkit-scrollbar { display: none; }

/* ===== Portfolio gallery — simple uniform grid, 3 per row ===== */
/* Grid lives in the stylesheet (not an inline style) so the global mobile
   "collapse every inline grid to 1fr" rule above doesn't hijack it — the
   breakpoints below own the column count. */
.bs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 880px) { .bs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bs-grid { grid-template-columns: 1fr; } }