/* Outer Circle: phone and tablet layouts for the pages that only have a desktop design in Framer.
   Injected by tools/pull_framer.py. The desktop design (1200px and up) is untouched.
   Targets Framer layer names (data-framer-name) where possible, because those survive design edits;
   pull_framer.py warns if any of them disappear.

   1. Phones and short screens (incl. phones turned sideways): bottom bar + scrolling logo
   2. Phones and tablets (under 1200px): About and Work, whose desktop layouts break when narrower
   3. Phones only (under 810px): roster grid, credits panel, sizes and the music button */

/* ---------- 1. Phones and short screens ---------- */
@media (max-width: 809.98px), (max-height: 500px) {
  /* Fade the page colour in behind the bottom bar so scrolling content never sits under it */
  [data-framer-name="Page Closed"] [data-framer-name="Coming Soon Message"],
  [data-framer-name="Closed"] [data-framer-name="Coming Soon Message"] {
    background: linear-gradient(to top, var(--oc-page-bg, #fff) 62%, transparent);
    pointer-events: none;
  }
  [data-framer-name="Coming Soon Message"] [data-framer-name="Hamburger Menu"] { pointer-events: auto; }
  body.oc-dark [data-framer-name="Coming Soon Message"] { --oc-page-bg: #000; }

  /* Meet Us: the logo scrolls away instead of sitting on top of the photos */
  .oc-page-meet-us [data-framer-name^="Lock up"] { position: absolute !important; }
}

/* Phones turned sideways: keep just the menu button so the bar doesn't fill a third of the screen */
@media (max-height: 500px) {
  [data-framer-name="Coming Soon Message"] [data-framer-name="Full website coming soon"] { display: none !important; }
  [data-framer-name="Page Closed"] [data-framer-name="Coming Soon Message"],
  [data-framer-name="Closed"] [data-framer-name="Coming Soon Message"] { background: linear-gradient(to top, var(--oc-page-bg, #fff) 35%, transparent); }
}

/* ---------- 2. Phones and tablets ---------- */
@media (max-width: 1199.98px) {
  /* About: centre the sentence in a readable column (it collapsed to one letter per line) */
  .oc-page-about .framer-liz6v8 {
    left: 24px !important; right: 24px !important; width: auto !important;
    top: 50% !important; transform: translateY(-50%) !important;
  }
  .oc-page-about .framer-liz6v8 p { width: 100% !important; max-width: 664px; height: auto !important; margin: 0 auto !important; text-align: center; }

  /* Work: one column, full-width film, text and stats */
  [data-framer-name="Eat The Wild — Film"] { width: calc(100vw - 48px) !important; height: auto !important; aspect-ratio: 16 / 9; }
  [data-framer-name="Eat The Wild — Film"] video { width: 100% !important; height: 100% !important; }
  [data-framer-name="Project Introduction"] { padding-top: 48px !important; padding-bottom: 24px !important; flex-direction: column !important; align-items: stretch !important; }
  [data-framer-name="Project Title"] { width: 100% !important; }
  [data-framer-name="Project Title"] > div { width: 100% !important; }
  [data-framer-name="Project Overview"] { width: 100% !important; margin-top: 8px; }
  [data-framer-name="Project Overview"] > div { width: 100% !important; justify-content: space-between !important; }
  [data-framer-name="Project Overview"] > div > [data-framer-name] { width: auto !important; flex: 1 1 0 !important; }
  [data-framer-name="Metrics Alignment Spacer"] { display: none !important; }
  [data-framer-name="Project Results"] { width: 100% !important; margin-top: 48px; }
  [data-framer-name="Contact Call to Action"] { padding-top: 64px !important; padding-bottom: 150px !important; height: auto !important; }
  [data-framer-name="→ Get in touch"] a, [data-framer-name="→ Get in touch"] p { display: inline-block; padding: 10px 0; }
  /* Full-screen film player: use the whole width of the screen */
  [aria-label="Fullscreen video"] > div { width: calc(100vw - 24px) !important; max-width: 1200px !important; }
}

/* ---------- 3. Phones only ---------- */
@media (max-width: 809.98px) {
  /* Meet Us: two-column roster that fills the screen */
  div:has(> [data-framer-name="Meet Us Label"]) { padding-top: 200px !important; padding-bottom: 150px !important; }
  [data-framer-name="Meet Us Label"] { width: 100% !important; }
  [data-framer-name="Meet Us Label"] > div { width: 100% !important; }
  [data-framer-name="Team Members"] {
    display: grid !important; grid-template-columns: 1fr 1fr !important; column-gap: 15px !important; row-gap: 36px !important;
    width: 100% !important; margin-top: -24px;
  }
  [data-framer-name="Team Member"] { width: auto !important; min-width: 0 !important; }
  [data-framer-name="Team Member"] [data-framer-name="Portrait"] { width: 100% !important; height: auto !important; aspect-ratio: 198 / 241; }
  [data-framer-name="Team Member"] [data-framer-name="Member Details"] { width: 100% !important; margin-top: 12px; }
  [data-framer-name="Team Member"] [data-framer-name="Name"],
  [data-framer-name="Team Member"] [data-framer-name="Role"] { width: 100% !important; }
  [data-framer-name="Team Member"] [data-framer-name="Name"] p,
  [data-framer-name="Team Member"] [data-framer-name="Role"] p { --framer-font-size: 15px !important; font-size: 15px !important; }
  /* No hover on phones: keep the red "VIEW CREDITS >" bar visible so the photos read as tappable.
     Only on people who have a credits panel: Framer's code marks those portraits with a transparent background. */
  [data-framer-name="Portrait"][style*="transparent"] > div[style*="F21A0F"] { clip-path: inset(0) !important; opacity: 1 !important; transform: none !important; visibility: visible !important; font-size: 11px !important; padding-left: 10px !important; }

  /* Credits panel: stack each credit onto two lines instead of a sideways-scrolling 4-column table */
  [class^="adam-credits-overlay"] [role="region"] { overflow-x: visible !important; }
  [class^="adam-credits-overlay"] [role="region"] > div { min-width: 0 !important; }
  [class^="adam-credits-overlay"] [role="region"] > div > div {
    grid-template-columns: 1fr 1fr !important; row-gap: 3px; padding: 8px 0 !important; font-size: 13px !important;
  }
  [class^="adam-credits-overlay"] [role="region"] > div > div > div:nth-child(n+3) { color: #8a8a8a; }
  [class^="adam-credits-overlay"] [role="region"] > div > div:first-child { background: #fff; position: relative; z-index: 1; }

  /* Work: phone-sized headings */
  [data-framer-name="Project Title"] > div:first-child > p:first-child {
    --framer-font-size: 30px !important; --framer-line-height: 1.35em !important; font-size: 30px !important;
  }
  [data-framer-name="Let’s make something together."] p { --framer-font-size: 30px !important; font-size: 30px !important; --framer-line-height: 1.4em !important; }
  /* Music: phones set volume with their own buttons, so keep just the play/mute button, bottom right */
  [data-framer-name="Music — Sound and Volume"] { width: 48px !important; right: 20px !important; left: auto !important; bottom: 24px !important; top: auto !important; }
  [data-framer-name="Music — Sound and Volume"] > div { width: 48px !important; height: 48px !important; padding: 0 !important; justify-content: center !important; }
  [data-framer-name="Music — Sound and Volume"] input[type="range"],
  [data-framer-name="Music — Sound and Volume"] span { display: none !important; }
  [data-framer-name="Music — Sound and Volume"] button { width: 48px !important; height: 48px !important; }

  /* Contact: room below the last line so the social links clear the bottom bar on short phones (iPhone SE) */
  .oc-page-contact div:has(> a[data-framer-name^="Lock up"]) { padding-top: 180px !important; padding-bottom: 170px !important; }
  .oc-page-contact a[href^="https://www.instagram"],
  .oc-page-contact a[href^="https://www.linkedin"] { display: inline-block; padding: 12px 0; margin: -12px 0; }
}