/* Tablet / narrow laptop: keep the desktop hero but make both words fit beside the photo */
@media (min-width: 761px) and (max-width: 1180px) {
  #jp-herotext h1 { font-size: 6.2vw !important; }
  #jp-herotext > div:nth-child(1) { padding-right: 14px !important; }
  #jp-herotext > div:nth-child(3) { padding-left: 14px !important; }
}

/* Mobile layout for every page of the portfolio (≤760px). Inline styles are
   overridden with !important because the desktop layout is authored inline. */
@media (max-width: 760px) {
  html, body { overflow-x: clip; }

  /* ---------- Floating nav ---------- */
  nav { gap: 4px !important; padding: 6px !important; max-width: calc(100vw - 20px); }
  nav > div { gap: 0 !important; padding: 0 2px !important; overflow-x: auto; scrollbar-width: none; }
  nav > div::-webkit-scrollbar { display: none; }
  nav > div > a { padding: 7px 8px !important; font-size: 12.5px !important; white-space: nowrap; }
  nav > div > a:first-child { display: none !important; }
  nav > a:last-child { padding: 9px 14px !important; font-size: 13px !important; white-space: nowrap; }
  nav image-slot, nav img { width: 30px !important; height: 30px !important; }

  /* Back buttons are desktop-only: on phones the nav (logo = home, Projects) already covers it */
  [data-m="back"] { display: none !important; }

  /* "Available for work" pill moves to the bottom so it never collides with the nav */
  #jp-pill { top: auto !important; bottom: 16px !important; }

  /* ---------- Generic: every multi-column grid becomes one column ---------- */
  [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="repeat(4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="grid-column"] { grid-column: auto !important; }
  [style*="flex:0 1 300px"], [style*="flex: 0 1 300px"], [style*="flex:0 1 320px"], [style*="flex: 0 1 320px"],
  [style*="flex:1 1 460px"], [style*="flex: 1 1 460px"] { flex: 1 1 100% !important; }

  h1, h2, h3, p { overflow-wrap: anywhere; }

  /* ---------- Home: hero + about stacked, no pinned animation ---------- */
  #top { height: auto !important; }
  #jp-pin { position: relative !important; height: auto !important; overflow: visible !important; display: flex !important; flex-direction: column; align-items: center; padding: 108px 0 0; }
  #jp-herotext { display: contents !important; }
  #jp-herotext > div:nth-child(1) { order: 1; text-align: center !important; padding: 0 20px !important; }
  #jp-herotext > div:nth-child(1) > div { text-align: center !important; }
  #jp-herotext > div:nth-child(1) > div > div { text-align: center !important; }
  #jp-herotext > div:nth-child(2) { display: none !important; }
  #jp-herotext > div:nth-child(3) { order: 3; text-align: center !important; padding: 0 20px !important; display: flex; flex-direction: column; align-items: center; }
  #jp-herotext > div:nth-child(3) p { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
  #jp-herotext h1 { font-size: clamp(56px, 18vw, 84px) !important; }
  #jp-photo { order: 2; position: relative !important; left: auto !important; top: auto !important; transform: none !important; margin: 24px 0 30px; }
  #hero-portrait { width: min(270px, 70vw) !important; height: min(350px, 92vw) !important; }
  #jp-photo > div { width: 78px !important; height: 78px !important; left: -16px !important; bottom: -18px !important; }
  #jp-about { order: 4; position: relative !important; inset: auto !important; opacity: 1 !important; transform: none !important; width: 100%; padding: 56px 20px 24px !important; display: block !important; }
  #jp-about [style*="gap:56px"], #jp-about [style*="gap: 56px"] { gap: 32px !important; }
  #jp-cue { display: none !important; }

  /* ---------- Home: project card stack ---------- */
  #jp-stackpin > div { padding: 84px 14px 24px !important; }
  #jp-cards { height: min(calc((100vw - 28px) * 0.85), calc(100vh - 200px)) !important; }
  [data-card] p { display: none !important; }
  [data-card] > div:last-child { padding: 18px 20px !important; }
  [data-card] h3 { font-size: 28px !important; margin-bottom: 4px !important; }
  [data-card] span[data-accent="bg"] { margin-bottom: 10px !important; font-size: 10.5px !important; padding: 5px 12px !important; }
  [data-card] > div:last-child > span:last-child { margin-top: 10px !important; font-size: 12px !important; }
  [data-m="browse"] { margin-top: calc(-100vh + 84px + min(calc((100vw - 28px) * 0.85), calc(100vh - 200px)) - 30px) !important; padding: 0 12px 80px !important; }
  [data-m="browse"] a { gap: 14px !important; padding: 14px 14px 14px 24px !important; }
  [data-m="browse"] a > span:first-child { font-size: 19px !important; }
  [data-m="browse"] a > span:last-child { width: 44px !important; height: 44px !important; }

  /* ---------- Home: contact ---------- */
  #contact-photo { width: min(300px, 78vw) !important; max-width: none !important; height: min(380px, 100vw) !important; }
  #contact [style*="padding:96px 32px"], #contact [style*="padding: 96px 32px"] { padding: 64px 20px !important; gap: 48px !important; }

  /* ---------- Project pages ---------- */
  header[style*="grid-template-columns"] { padding: 40px 20px 40px !important; gap: 24px !important; }
  section[style*="max-width:1180px"], section[style*="max-width: 1180px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="padding:40px 32px 64px"], [style*="padding: 40px 32px 64px"] { padding: 32px 20px 44px !important; }

  /* Project header image: taller than the raw ratio so it reads on a phone */
  header + div > image-slot { height: 62vw !important; min-height: 0 !important; }
  /* SubeTuCoche header has a tagline baked into the image: show it whole */
  header + div > image-slot#stc-cover { height: calc(100vw * 4743 / 11269) !important; }

  /* Logo boxes: let the image define the height instead of a fixed desktop minimum */
  [style*="min-height:300px"], [style*="min-height: 300px"], [style*="min-height:280px"], [style*="min-height: 280px"] { min-height: 0 !important; }

  /* Apex wordmark: show it whole on its own periwinkle */
  img[src*="apex-logo-wordmark"] { height: auto !important; object-fit: contain !important; background: #889cfd; padding: 28px 18px; }
  img[src*="apex-logo-icon"] { height: auto !important; }

  /* Apex stories: taller so each story reads bigger */
  img[data-m="stories"] { height: 62vw !important; object-fit: cover !important; }
  /* Apex post carousel controls: below the images, on the same grey */
  [data-m="apex-ctrl"] { position: static !important; padding: 14px 0 16px; background: #5f5e66; }

  /* SubeTuCoche carousel arrows: below the images instead of over them */
  div:has(> [data-m="stc-prev"]) { padding-bottom: 64px !important; }
  [data-m="stc-prev"], [data-m="stc-next"] { top: auto !important; bottom: 0 !important; transform: none !important; width: 46px !important; height: 46px !important; }
  [data-m="stc-prev"] { left: calc(50% - 56px) !important; }
  [data-m="stc-next"] { right: calc(50% - 56px) !important; }

  /* Sant Pere look & feel video: keep it horizontal */
  video[src*="tfp-instagram-posts"] { height: auto !important; aspect-ratio: 16 / 9; object-fit: cover; }
}