/* ============================================================
   JobMaxxer — mobile adaptation
   ------------------------------------------------------------
   The desktop layout lives entirely in the inline styles of
   index.html and is intentionally left untouched. Every rule
   in this file is scoped to a mobile breakpoint, so on desktop
   nothing here applies and the page renders exactly as before.

   Design grammar follows the Cluely-style analysis (centred
   serif H1, compact blue CTA, stacked silver cards, dark
   product mockups, quiet footer) and Emil Kowalski's
   interaction principles (instant tap feedback, hover gated to
   real pointers, restrained motion). Inline styles win on
   specificity, so structural overrides use !important by design.
   ============================================================ */

/* ---------- Phones & small tablets ---------- */
@media (max-width: 760px) {

  /* --- Nav: logo + single CTA. The four section links live in
         the footer anyway, so drop them rather than cram them. --- */
  .jm-nav        { height: 56px !important; }
  .jm-nav-links  { display: none !important; }

  /* --- Cinematic backdrop: the hero stacks taller on mobile, so
         shorten the fixed gradient slightly so it still resolves to
         white *before* the transparent "How it works" band (which
         would otherwise sit on the dark gradient). --- */
  .jm-cosmic { height: 1150px !important; }

  section[data-screen-label="Hero"] { min-height: 0 !important; }

  /* Hero mockup overlaps the next section less aggressively */
  #product { margin: 30px auto -48px !important; }

  /* --- Hero product mockup body: tighten the desktop padding --- */
  .jm-hero-body { padding: 20px 16px 24px !important; min-height: 0 !important; }

  /* The "drafting" popover stops floating (it's 392px wide — wider
     than the phone) and instead stacks neatly under the answer
     field, where it reads as the natural next step. */
  .jm-hero-pop {
    position: static !important;
    width: auto !important;
    right: auto !important;
    top: auto !important;
    margin-top: 14px !important;
  }

  /* --- Workflow: shed the big desktop top padding (it existed only
         to clear the overlapping hero mockup). --- */
  .jm-how { padding: 132px 0 72px !important; }

  /* --- Two-column feature/proof grids collapse to a single column.
         Targeted by their exact desktop gaps so the small 2x2 portal
         chip grid (gap:8px) is left intact. --- */
  [style*="grid-template-columns:1fr 1fr;gap:28px"],
  [style*="grid-template-columns:1fr 1fr;gap:64px"] {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  /* A collapsed `1fr` grid item keeps min-width:auto, so it refuses to
     shrink below its content's intrinsic width and overflows the
     viewport (e.g. the proof panel). min-width:0 lets it shrink and
     lets the inner text wrap instead. */
  [style*="grid-template-columns:1fr 1fr;gap:28px"] > *,
  [style*="grid-template-columns:1fr 1fr;gap:64px"] > * {
    min-width: 0 !important;
  }

  /* --- Trim the generous desktop section rhythm to a mobile cadence
         (Cluely brief: ~72–100px on mobile). --- */
  [style*="padding:130px 0"],
  [style*="padding:120px 0"] {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }

  /* --- Proof stats: stack the big number over its caption instead
         of a cramped 180px column beside wrapping text. --- */
  [style*="display:flex;gap:20px;align-items:baseline"] {
    flex-direction: column !important;
    gap: 4px !important;
  }
  [style*="width:180px;flex-shrink:0"] { width: auto !important; }

  /* --- Footer --- */
  /* the headline carries a hard-coded desktop width/height */
  .jm-footer-h2 {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
  }
  /* floating decorative product chips would collide with the copy */
  [style*="floatY"] { display: none !important; }
  /* close up the wide desktop gap between link columns */
  [style*="display:flex;gap:64px;flex-wrap:wrap"] { gap: 32px !important; }

  /* --- Emil: pressable controls answer the touch instantly --- */
  a[style*="border-radius:999px"]:active,
  button:active { transform: scale(0.97); }
}

/* ---------- Smallest phones ---------- */
@media (max-width: 400px) {
  /* keep the serif headline confident but not overflowing */
  section[data-screen-label="Hero"] h1 { font-size: 34px !important; }
}

/* ---------- Touch devices ---------- */
/* Emil: hover affordances belong to real pointers. On touch the
   CTA's hover lift fires on tap and feels wrong — suppress it. */
@media (hover: none) {
  a[style*="#80B5FF 0%,#3388FF 97%"]:hover { transform: none; }
}