/* ═══════════════════════════════════════════════════════════════
   BLUFROST LABS — GLOBAL RESPONSIVE STYLESHEET
   Strategy:
     • Structural selectors (h1, section, footer, nav) — most reliable.
     • Attribute selectors include BOTH "prop:val" (source HTML) and
       "prop: val" (React/DOM-rendered) formats.
     • JS in mobile-nav.js patches padding-right:max() at runtime.
   ═══════════════════════════════════════════════════════════════ */

img, video, iframe { max-width: 100%; height: auto; }

/* ── CLASS-BASED FIXES (added to HTML elements for 100% reliability) ─ */
@media (max-width: 768px) {
  /* Index hero */
  .bf-hero-inner { padding-left: 20px !important; padding-right: 20px !important; }
  .bf-hero-lede  { max-width: 100% !important; }
  .bf-hero-cta   { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }
  .bf-hero-cta > a:first-child {
    display: block !important; text-align: center !important;
    width: 100% !important; box-sizing: border-box !important;
  }

  /* Insights careers section */
  .bf-careers-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .bf-careers-deco { display: none !important; }
}

/* ── HAMBURGER + MOBILE OVERLAY (global, hidden until JS inits) ─ */
.bf-hamburger {
  display: none;
  background: none; border: none; cursor: pointer;
  flex-direction: column; align-items: center;
  justify-content: center; gap: 5px;
}
.bf-hamburger span {
  display: block; width: 23px; height: 2px;
  border-radius: 2px; background: currentColor;
  transition: transform .28s ease, opacity .28s ease;
}

.bf-mob-menu {
  position: fixed; inset: 0; z-index: 9996;
  background: #0a1820;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
  overflow-y: auto;
  font-family: 'Space Grotesk', system-ui, sans-serif;
}
.bf-mob-menu.bf-open { transform: translateX(0); }

.bf-mob-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(191, 224, 234, .1);
  flex-shrink: 0;
}
.bf-mob-wordmark {
  font-family: 'Instrument Serif', serif;
  font-size: 22px; letter-spacing: -.01em;
  color: #eef6f8; text-decoration: none;
}
.bf-mob-close {
  background: none; border: none; cursor: pointer;
  color: #7fd4c0; padding: 6px; line-height: 1;
}
.bf-mob-links {
  display: flex; flex-direction: column;
  padding: 4px 0 24px; flex: 1;
}
.bf-mob-link {
  display: flex; align-items: center;
  font-family: 'Instrument Serif', serif;
  font-size: 34px; letter-spacing: -.01em;
  color: #eef6f8; text-decoration: none;
  padding: 14px 28px;
  border-bottom: 1px solid rgba(191, 224, 234, .07);
  line-height: 1.1; transition: color .2s;
}
.bf-mob-link:hover { color: #7fd4c0; }
.bf-mob-footer {
  padding: 24px 28px 44px;
  border-top: 1px solid rgba(191, 224, 234, .1);
  display: flex; flex-direction: column; gap: 14px;
}
.bf-mob-cta {
  display: flex; align-items: center; justify-content: center;
  padding: 16px; border-radius: 12px;
  background: #7fd4c0; color: #0c1a20;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 16px; font-weight: 600; text-decoration: none;
}
.bf-mob-tel {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px; letter-spacing: .06em; color: #6f95a3;
  text-decoration: none; text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   TABLET  (≤ 1024px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE  (≤ 768px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── NAV ─────────────────────────────────────────────────────── */
  nav { padding: 16px 20px !important; flex-wrap: nowrap !important; }
  nav > div { display: none !important; }

  /* ── HEADINGS ────────────────────────────────────────────────── */
  h1 { font-size: clamp(30px, 8.5vw, 52px) !important; line-height: 1.08 !important; }
  h1[style*="max-width"] { max-width: 100% !important; }
  h2 { font-size: clamp(22px, 6.5vw, 36px) !important; line-height: 1.15 !important; }

  /* ── GLOBAL SIDE PADDING — structural ───────────────────────── */
  /* Every block-level container gets 20px sides on mobile.        */
  /* "section > *" covers direct children; footer handles itself.  */
  section  { padding-left: 20px !important; padding-right: 20px !important; }
  footer   { padding-left: 20px !important; padding-right: 20px !important; }
  article  { padding-left: 20px !important; padding-right: 20px !important; }

  /* Inner wrappers that carry their own 56px side padding         */
  /* (both source-HTML and React-normalised formats)               */
  [style*="padding:130px 56px"],     [style*="padding: 130px 56px"]     {
    padding-top: 56px !important; padding-bottom: 56px !important;
    padding-left: 20px !important; padding-right: 20px !important; }

  [style*="padding:110px 56px"],     [style*="padding: 110px 56px"]     {
    padding-top: 56px !important; padding-bottom: 56px !important;
    padding-left: 20px !important; padding-right: 20px !important; }

  [style*="padding:100px 56px"],     [style*="padding: 100px 56px"]     {
    padding-top: 52px !important; padding-bottom: 52px !important;
    padding-left: 20px !important; padding-right: 20px !important; }

  [style*="padding:80px 56px 48px"], [style*="padding: 80px 56px 48px"] {
    padding-top: 44px !important; padding-bottom: 28px !important;
    padding-left: 20px !important; padding-right: 20px !important; }

  [style*="padding:80px 56px"],      [style*="padding: 80px 56px"]      {
    padding-top: 44px !important; padding-bottom: 44px !important;
    padding-left: 20px !important; padding-right: 20px !important; }

  [style*="padding:64px 56px 120px"],[style*="padding: 64px 56px 120px"] {
    padding-top: 40px !important; padding-bottom: 56px !important;
    padding-left: 20px !important; padding-right: 20px !important; }

  [style*="padding:64px 56px"],      [style*="padding: 64px 56px"]      {
    padding-top: 40px !important; padding-bottom: 40px !important;
    padding-left: 20px !important; padding-right: 20px !important; }

  [style*="padding:60px 56px 140px"],[style*="padding: 60px 56px 140px"] {
    padding-top: 36px !important; padding-bottom: 64px !important;
    padding-left: 20px !important; padding-right: 20px !important; }

  [style*="padding:60px 56px"],      [style*="padding: 60px 56px"]      {
    padding-top: 36px !important; padding-bottom: 36px !important;
    padding-left: 20px !important; padding-right: 20px !important; }

  [style*="padding:48px 56px"],      [style*="padding: 48px 56px"]      {
    padding-top: 28px !important; padding-bottom: 28px !important;
    padding-left: 20px !important; padding-right: 20px !important; }

  [style*="padding:40px 56px"],      [style*="padding: 40px 56px"]      {
    padding-top: 24px !important; padding-bottom: 24px !important;
    padding-left: 20px !important; padding-right: 20px !important; }

  [style*="padding:30px 56px"],      [style*="padding: 30px 56px"]      {
    padding-top: 16px !important; padding-bottom: 16px !important;
    padding-left: 20px !important; padding-right: 20px !important; }

  [style*="padding:26px 56px"],      [style*="padding: 26px 56px"]      {
    padding-top: 16px !important; padding-bottom: 16px !important;
    padding-left: 20px !important; padding-right: 20px !important; }

  [style*="padding:0 56px"],         [style*="padding: 0px 56px"],
  [style*="padding: 0 56px"]         { padding-left: 20px !important; padding-right: 20px !important; }

  [style*="padding:8px 56px"],       [style*="padding: 8px 56px"]       {
    padding-left: 20px !important; padding-right: 20px !important; }

  [style*="padding:18px 56px"],      [style*="padding: 18px 56px"]      {
    padding: 14px 20px !important;
    flex-direction: column !important;
    gap: 8px !important; align-items: flex-start !important; }

  /* Standalone padding-left / padding-right with 56px */
  [style*="padding-left:56px"],      [style*="padding-left: 56px"]      { padding-left: 20px !important; }
  [style*="padding-right:56px"],     [style*="padding-right: 56px"]     { padding-right: 20px !important; }

  /* Scroll-rail left padding (work carousel) */
  [style*="padding:8px 56px 32px"],  [style*="padding: 8px 56px 32px"]  {
    padding-left: 20px !important; padding-right: 20px !important; }

  /* ── INDEX HERO: terminal spacer + CSS max() padding ─────────── */
  /* JS in mobile-nav.js ALSO patches max() at runtime (belt+braces) */
  [style*="padding-right:max("],     [style*="padding-right: max("]     { padding-right: 20px !important; }
  /* Hide the terminal widget */
  [style*="position:absolute;right:56px"],
  [style*="position: absolute; right: 56px"] { display: none !important; }

  /* ── INDEX HERO CTA ROW ────────────────────────────────────────── */
  /* "Start a project" + "Blufrost AI" link */
  [style*="gap:24px;align-items:center"],
  [style*="gap: 24px; align-items: center"],
  [style*="gap:32px;align-items:center"],
  [style*="gap: 32px; align-items: center"] {
    flex-wrap: wrap !important;
    gap: 16px !important;
  }
  /* CTA pill — full width on mobile */
  a[style*="border-radius:999px"][style*="padding:18px"],
  a[style*="border-radius: 999px"][style*="padding: 18px"] {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── CONTACT TAB BUTTONS (72px headings only) ───────────────── */
  /* Deliberately scoped to the giant 72px tab buttons on contact.html.
     Do NOT use button[style*="font-size"] — it catches Subscribe,
     AI Summarize, and icon buttons and makes them huge. */
  button[style*="font-size:72px"],
  button[style*="font-size: 72px"] {
    font-size: clamp(22px, 6.5vw, 36px) !important;
    white-space: normal !important;
    line-height: 1.22 !important;
    text-align: left !important;
  }
  /* Tab row → stack vertically */
  [style*="gap:40px;margin-top:26px"],
  [style*="gap: 40px;margin-top: 26px"],
  [style*="gap: 40px; margin-top: 26px"] {
    flex-direction: column !important;
    gap: 4px !important; margin-top: 14px !important;
    align-items: flex-start !important;
  }
  /* Active rail indicator — hide when stacked */
  [style*="position:absolute;top:0;left:0;height:2px"],
  [style*="position: absolute; top: 0; left: 0; height: 2px"] { display: none !important; }

  /* ── GRIDS → SINGLE COLUMN ───────────────────────────────────── */
  [style*="grid-template-columns:1fr 1fr"],       [style*="grid-template-columns: 1fr 1fr"]       { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 1fr 1fr"],   [style*="grid-template-columns: 1fr 1fr 1fr"]   { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1.35fr 1fr"],    [style*="grid-template-columns: 1.35fr 1fr"]    { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(4,1fr)"], [style*="grid-template-columns: repeat(4, 1fr)"]{ grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns:1fr 2fr 1fr"],   [style*="grid-template-columns: 1fr 2fr 1fr"]   { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:2fr 1fr 1fr"],   [style*="grid-template-columns: 2fr 1fr 1fr"]   { grid-template-columns: 1fr !important; }

  /* ── BLOG ARTICLE: content + sticky sidebar ──────────────────── */
  [style*="gap:64px;margin-top:44px"],
  [style*="gap: 64px; margin-top: 44px"] {
    flex-direction: column !important; gap: 32px !important;
  }
  aside[style*="width:320px"], aside[style*="width: 320px"] {
    width: 100% !important; position: static !important;
  }
  /* Blog nav padding */
  [style*="padding:0 56px"], [style*="padding: 0px 56px"] {
    padding-left: 20px !important; padding-right: 20px !important;
  }

  /* Drop cap */
  [style*="float:left"][style*="font-size:82px"],
  [style*="float: left"][style*="font-size: 82px"] {
    float: none !important; font-size: 52px !important;
    line-height: 1 !important; padding: 0 8px 4px 0 !important;
  }
  /* Blockquote */
  blockquote[style*="font-size:27px"], blockquote[style*="font-size: 27px"] { font-size: 20px !important; }
  /* Article body text */
  article [style*="font-size:18.5px"], article [style*="font-size: 18.5px"] { font-size: 16px !important; }

  /* ── WORK CAROUSEL ───────────────────────────────────────────── */
  [style*="min-width:420px"], [style*="min-width: 420px"] { min-width: 280px !important; }
  /* Allow horizontal scroll to escape the section's overflow:hidden */
  #work { overflow: visible !important; }
  /* Shrink each card so it fits the viewport with a peek of the next */
  .bf-work-card { width: calc(85vw) !important; max-width: 420px; }

  /* ── FOOTER ──────────────────────────────────────────────────── */
  [style*="gap:56px;justify-content:space-between"],
  [style*="gap: 56px; justify-content: space-between"] { flex-direction: column !important; gap: 32px !important; }
  [style*="gap:28px;align-items:center;justify-content:space-between"],
  [style*="gap: 28px; align-items: center; justify-content: space-between"] {
    flex-direction: column !important; align-items: flex-start !important; gap: 20px !important;
  }
  footer nav { flex-direction: column !important; gap: 28px !important; }
  /* Footer wordmark */
  footer a[style*="font-size:40px"], footer a[style*="font-size: 40px"] { font-size: 28px !important; }

  /* ── FORMS ───────────────────────────────────────────────────── */
  input, select, textarea { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
  /* Subscribe form (footer + blog): stack vertically, button full-width */
  form[style*="gap:10px"],
  form[style*="gap: 10px"] {
    flex-direction: column !important;
    gap: 10px !important;
  }
  form[style*="gap:10px"] > button,
  form[style*="gap: 10px"] > button {
    width: 100% !important;
    padding: 13px 22px !important;
    box-sizing: border-box !important;
  }
  /* AI Summarize button — keep compact, don't stretch full-width */
  button[style*="border-radius:999px"][style*="font-size:15px"],
  button[style*="border-radius: 999px"][style*="font-size: 15px"] {
    align-self: flex-start !important;
    font-size: 14px !important;
    padding: 10px 18px !important;
  }
  /* Checkbox / radio label rows → full-width single column */
  .bfc-check { flex-basis: 100% !important; width: 100% !important; }
  /* Tech skills 4-col grid → 2 cols on mobile */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2,1fr) !important; }

  /* ── COOKIE BANNER ───────────────────────────────────────────── */
  #bf-cb {
    flex-direction: column !important;
    padding: 18px 20px !important;
    gap: 12px !important; align-items: stretch !important;
  }

  /* ── GAP REDUCTIONS ──────────────────────────────────────────── */
  [style*="gap:88px"], [style*="gap: 88px"] { gap: 32px !important; }
  [style*="gap:72px"], [style*="gap: 72px"] { gap: 24px !important; }
  [style*="gap:64px"], [style*="gap: 64px"] { gap: 28px !important; }
  [style*="gap:48px 72px"], [style*="gap: 48px 72px"] { gap: 24px 20px !important; }
  [style*="gap:56px;flex-wrap:wrap;justify-content:center"],
  [style*="gap: 56px; flex-wrap: wrap; justify-content: center"] { gap: 28px !important; }

  /* Support / custom CSS classes */
  .pg  { padding-left: 20px !important; padding-right: 20px !important; }
  .sec { padding-top: 52px !important; padding-bottom: 52px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   SMALL MOBILE  (≤ 420px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 420px) {
  h1 { font-size: clamp(26px, 8vw, 40px) !important; }
  button[style*="font-size:72px"],
  button[style*="font-size: 72px"] { font-size: clamp(19px, 6vw, 28px) !important; }
  .bf-mob-link { font-size: 28px !important; padding: 12px 20px !important; }
}