/* ============================================================================
 * Octopus Force — responsive layer (mobile-first overrides)
 * ----------------------------------------------------------------------------
 * The design files use inline styles with no class hooks, so this stylesheet
 * targets the exact inline grid/size patterns with attribute selectors and
 * `!important` (an author !important rule beats a non-important inline style).
 * This keeps the templates untouched while making everything reflow on phones
 * and tablets.
 * ========================================================================== */

/* never let a stray fixed element cause horizontal scroll on phones */
@media (max-width: 860px) {
  img { max-width: 100%; height: auto; }
}

/* ===== Tablet and below (<= 860px): collapse the big multi-column layouts == */
@media (max-width: 860px) {
  [style*="grid-template-columns:1.05fr .95fr"],   /* home hero */
  [style*="grid-template-columns:1.2fr .8fr"],     /* empresas teaser */
  [style*="grid-template-columns:1.5fr 1fr"],      /* quote form/summary, admin lists */
  [style*="grid-template-columns:1fr 1fr"],        /* empresas how, modal grids, etc. */
  [style*="grid-template-columns:.95fr 1.45fr"],   /* orders list/detail */
  [style*="grid-template-columns:340px 1fr"],      /* social studio */
  [style*="grid-template-columns:1.3fr 1fr"],      /* precios history/notes */
  [style*="grid-template-columns:repeat(3,1fr)"],  /* capabilities, portfolio, benefits */
  [style*="grid-template-columns:1.55fr 1fr"] {    /* cotizador main grid */
    grid-template-columns: 1fr !important;
  }

  [style*="grid-template-columns:repeat(4,1fr)"],         /* stats, KPIs, indicators, steps */
  [style*="grid-template-columns:repeat(6,1fr)"],         /* margin status chips */
  [style*="grid-template-columns:1.4fr 1fr 1fr 1fr"] {    /* footer */
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* keep the process-tile pickers as a compact 2-up grid (not full-width) */
  [style*="grid-template-columns:repeat(3,1fr);gap:10px"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* keep the hero photo mosaic as 2x2 */
  [style*="1fr 1fr;gap:2px"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* sticky summary panels become inline on small screens */
  [style*="position:sticky;top:130px"],
  [style*="position:sticky;top:24px"] {
    position: static !important;
  }

  /* the projects table stays tabular but scrolls horizontally */
  [style*="grid-template-columns:2.4fr 1fr 1fr 1.4fr 1fr"] {
    min-width: 620px;
  }
  [style*="border-radius:14px;overflow:hidden"]:has([style*="2.4fr 1fr 1fr 1.4fr 1fr"]) {
    overflow-x: auto !important;
  }
}

/* ===== Top bar: let it wrap instead of overflowing ======================== */
@media (max-width: 760px) {
  [style*="height:78px"] {
    height: auto !important;
    flex-wrap: wrap !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    row-gap: 10px !important;
  }
  /* the centered public/admin toggle drops to its own full-width row */
  [style*="flex:1;display:flex;justify-content:center"] {
    flex-basis: 100% !important;
    order: 3 !important;
  }
  /* shrink the lockup a touch */
  [style*="height:52px"] { height: 42px !important; }
}

/* ===== Phone (<= 560px): single column + smaller type/padding ============= */
@media (max-width: 560px) {
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(6,1fr)"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns:1fr 1.4fr"],   /* laser specs */
  [style*="grid-template-columns:1fr 1.2fr"],   /* bend / weld specs */
  [style*="grid-template-columns:1fr 1.1fr"],   /* qty / finish */
  [style*="grid-template-columns:1.4fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* spec/material field pairs collapse */
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* ...but keep the hero mosaic and process pickers as 2-up */
  [style*="1fr 1fr;gap:2px"],
  [style*="grid-template-columns:repeat(3,1fr);gap:10px"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* display headings */
  [style*="font-size:54px"] { font-size: 30px !important; }
  [style*="font-size:48px"] { font-size: 28px !important; }
  [style*="font-size:42px"] { font-size: 26px !important; }
  [style*="font-size:40px"] { font-size: 30px !important; }
  [style*="font-size:38px"] { font-size: 25px !important; }
  [style*="font-size:34px"] { font-size: 24px !important; }
  [style*="font-size:30px"] { font-size: 22px !important; }

  /* generous desktop padding -> compact */
  [style*="padding:72px 28px 80px"] { padding: 36px 16px 44px !important; }
  [style*="padding:64px 28px"]      { padding: 36px 16px !important; }
  [style*="padding:84px 28px"]      { padding: 44px 16px !important; }
  [style*="padding:56px 28px 90px"] { padding: 32px 16px 56px !important; }
  [style*="padding:54px"]           { padding: 26px 20px !important; }
  [style*="padding:40px"]           { padding: 22px !important; }
  [style*="padding:30px"]           { padding: 20px !important; }
  [style*="padding:34px 28px 70px"] { padding: 24px 16px 56px !important; }

  /* horizontal page gutters */
  [style*="padding:0 28px"] { padding-left: 16px !important; padding-right: 16px !important; }
}