/* Mobile homepage hero — desktop layout unchanged (min-width: 768px) */

@media (max-width: 991px) and (orientation: portrait) {
  /* Safety net: nothing on the page should be able to force horizontal
     scroll/zoom-out on mobile, no matter which section causes it.
     Using `clip` instead of `hidden` on purpose — overflow values other than
     `visible`/`clip` on html/body establish a scroll container, which is a
     well-known way to silently break `position: sticky` for every
     descendant on the page (e.g. the case-study cards' sticky-stack scroll
     effect). `clip` prevents the horizontal bleed without that side effect. */
  html, body {
    overflow-x: clip !important;
    max-width: 100vw !important;
  }

  .section.hero.home-hero {
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  .section.hero.home-hero .n-container.hero.home {
    min-height: auto !important;
    height: auto !important;
    padding-bottom: 2rem !important;
  }

  .section.hero.home-hero .side-by-side.ddddd {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1.5rem !important;
  }

  .section.hero.home-hero .content-wrapper-home.home-hero {
    position: relative !important;
    width: 100% !important;
    min-height: 500px !important;
    order: 1;
    padding-bottom: 1.5rem !important;
  }

  /* macOS windows: float on the right, overlap toast, sized larger */
  #macos-container {
    position: absolute !important;
    top: 5rem !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: 145vw !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: 520px !important;
    margin: 0 !important;
    pointer-events: none !important;
    z-index: 5 !important;
  }

  .mac-window {
    width: 44vw !important;
    min-width: 150px !important;
  }

  /* Vertical scroll strip: one vertical track on the right, behind macos tabs */
  .section.hero.home-hero ._1em-gap-verticle {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    width: 35vw !important;
    height: 100% !important;
    max-height: none !important;
    overflow: hidden !important;
    z-index: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    opacity: 0.55 !important;
    gap: 1em !important;
  }

  .section.hero.home-hero .verticle-scroll {
    display: flex !important;
    flex-direction: column !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    gap: 1em !important;
    animation: verticle-mobile 30s linear infinite !important;
  }

  @keyframes verticle-mobile {
    from { transform: translateY(0); }
    to { transform: translateY(calc(-100% - 1em)); }
  }

  /* Crossword Layout below Text: stacks crossword rows but keeps letters in horizontal lines */
  .side-by-side.mirrored {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }
  
  .selected-text-outer-wrap.no-t-padding-copy {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
    justify-content: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }

  .selected-text-wrap {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 0.25rem !important;
  }

  /* Chef turned ad film maker text size reduction */
  .section.hero.home-hero .left-aligned.black.all-caps._16em-width {
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
  }

  /* Butter toast: 45% width (smaller) and moved to the left by 1/6th, pulled higher */
  .section.hero.home-hero img.contained-image.butter-toast {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    transform: none !important;
    margin: 1.5rem 0 0 0 !important;
    display: block !important;
  }

  .nekeg.imp {
    max-height: none !important;
  }

  /* The Knife Kit: single-column stack, silver plates 30% bigger */
  .knife-frame {
    padding: 1.25rem !important;
  }

  .knife-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    padding: 2rem 1.25rem !important;
  }

  .knife-column {
    gap: 1rem !important;
  }

  .knife-plate-wrap {
    width: 100% !important;
    max-width: 260px !important;
    aspect-ratio: 981 / 736 !important;
    margin: 1.5rem auto !important; /* extra vertical spacing for scale */
    position: relative !important;
  }

  .knife-plate-img {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transform: scale(1.3) !important; /* Silver plates 30% bigger! */
  }

  .knife-card {
    height: auto !important;
    min-height: 80px !important;
    padding: 0.6rem 0.5rem !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scaleX(1.3) !important;
    z-index: 10 !important;
  }

  .knife-card-title {
    font-size: 1.15rem !important;
  }

  .knife-subtitle-box {
    width: 100% !important;
    margin-left: 0 !important;
    font-size: 0.9rem !important;
    padding: 0.5rem !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Case studies horizontal text padding on mobile */
  .spaced-out {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 991px) and (orientation: landscape) {
  html, body {
    overflow-x: clip !important;
    max-width: 100vw !important;
  }
  .section.hero.home-hero {
    min-height: 100vh !important;
    height: auto !important;
    padding-top: 0 !important;
  }
  .side-by-side.ddddd {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 1.5rem !important;
    margin-top: 4.5rem !important;
  }
  .content-wrapper-home.home-hero {
    width: 45% !important;
    flex-shrink: 0 !important;
    display: block !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
  #macos-container {
    /* position:absolute (not fixed) against .section.hero.home-hero, which
       is position:relative and starts at the very top of the page — so
       top:4.5rem lands right under the navbar reliably, same as the fixed
       version did, but this way the windows scroll away with the hero
       section like normal page content instead of staying pinned to the
       viewport for the rest of the page (which was the actual bug: once
       fixed, they never left the screen no matter how far you scrolled). */
    position: absolute !important;
    top: 4.5rem !important;
    /* Span the gap between the text/plate column (45% wide, on the left)
       and the vertical scroll strip (14vw, on the right) instead of a
       narrow 35vw slice pinned to the right edge — that was squeezing every
       window on top of the scroll strip instead of spreading across the
       middle of the screen near the butter plate. */
    left: 42% !important;
    right: 15vw !important;
    width: auto !important;
    height: calc(100vh - 5.5rem) !important;
    min-width: 250px !important;
    max-height: none !important;
    margin: 0 !important;
    z-index: 5 !important;
    pointer-events: auto !important;
  }
  .section.hero.home-hero ._1em-gap-verticle {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    width: 14vw !important;
    height: 80vh !important;
    overflow: hidden !important;
    opacity: 0.55 !important;
    margin: 0 !important;
    z-index: 1 !important;
  }
  .section.hero.home-hero .verticle-scroll {
    display: flex !important;
    flex-direction: column !important;
    gap: 1em !important;
    animation: verticle 40s linear infinite !important;
  }
  /* Set text sizes and margins to fit nicely on short landscape screens - match top nav bar size */
  .section.hero.home-hero .left-aligned.black.all-caps._16em-width,
  .main-text,
  .body-text,
  .testimonial-text {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
  }
  /* The bio paragraph ("I'm Mahita...") is also class="main-text" but the
     site-wide clamp(1.28rem, 2.5vw, 1.45rem) rule on that class has higher
     specificity than a bare .main-text selector, so it was winning over the
     0.8rem set above. Match it here at equal size to the hero heading. */
  .grid-left .main-text-wrap .main-text {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
  }
  .selected-text {
    font-size: 1.15rem !important;
    line-height: 1.1 !important;
  }
  .selected-text-outer-wrap.no-t-padding-copy {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    gap: 0.25rem !important;
  }
  .section.hero.home-hero img.contained-image.butter-toast {
    width: 105% !important;
    max-width: 105% !important;
    height: auto !important;
    margin: 1rem 0 !important;
    transform: translateX(-15%) !important;
  }
  /* Case studies horizontal height enlargement */
  .cs-wrap {
    height: 60vh !important;
    min-height: 240px !important;
  }
  /* Knife Kit horizontal scrolling strip */
  .knife-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 1.25rem !important;
    padding: 0.5rem 1rem !important;
    box-sizing: border-box !important;
    align-items: center !important;
  }
  .knife-grid.knife-marquee-active {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    overflow: visible !important;
    /* No CSS animation here — a fixed "-50%" keyframe doesn't line up with
       the actual pixel width of one set once gap/padding rounding is
       accounted for, which is what caused a visible jump at the loop point.
       JS drives the loop instead, measuring the real clone offset. See
       initKnifeKitMarquee() in index.html. */
  }
  .knife-column {
    /* Base desktop rule sets gap:7rem, sized for a tall single-column grid
       layout — far too much space once this becomes a tight horizontal
       marquee card. */
    gap: 0.5rem !important;
    flex: 0 0 220px !important;
    width: 220px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .knife-plate-wrap {
    position: relative !important;
    width: 220px !important;
    height: 165px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .knife-plate-img {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 220px !important;
    height: 165px !important;
    max-width: none !important;
    z-index: 1 !important;
    object-fit: contain !important;
  }
  .knife-card {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 140px !important;
    height: 75px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
    padding: 0.5rem !important;
    box-sizing: border-box !important;
  }
  /* .knife-frame's direct wrapper is a flex column with align-items:center,
     which sizes it to fit-content instead of stretching — so the marquee's
     max-content width was inflating this wrapper (and everything below it)
     to content size instead of the viewport, and .knife-frame's
     overflow:hidden had nothing constrained to actually clip against. An
     explicit width forces it back down to the available layout width. */
  .n-container.lines ._1-98em-gap {
    width: 100% !important;
    min-width: 0 !important;
  }
  .n-container.lines .knife-frame {
    min-width: 0 !important;
  }
  .knife-frame {
    /* No auto-centering margin of its own — width:100% so its left edge
       lines up exactly with the heading above it and with the container's
       own (reduced) padding, which is the only side inset left. */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    padding: 0 !important;
  }
  .n-container.lines {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    box-sizing: border-box !important;
  }
  /* Align the heading flush with the knife-frame's left border below it,
     instead of the extra 3vw indent it had (which only the heading text
     had, so it didn't line up with the frame's own edge). */
  .n-container.lines h2.main-text.caps,
  .main-text.caps.left-aligned {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  .knife-card-title {
    font-size: 1.25rem !important;
    text-align: center !important;
    line-height: 1.15 !important;
    font-family: 'Playfair Display', 'Instrument Serif', serif !important;
  }
  .knife-subtitle-box {
    width: 160px !important;
    /* Desktop's -25% margin-left trick (a manual centering hack for a
       different layout) was still resolving here against the 220px column
       width, shifting the box 55px left of the plate/card it sits under. */
    margin-left: 0 !important;
    font-size: 0.8rem !important;
    text-align: center !important;
    margin-top: 0.25rem !important;
    white-space: normal !important;
  }
  .cs-preview-grid.home {
    display: grid !important;
    grid-template-columns: 1.1fr 1fr !important;
    grid-template-rows: auto !important;
    gap: 2rem !important;
    align-items: center !important;
  }
  .cs-preview-grid.home a.cs-wrap {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
    width: 100% !important;
    height: 50vh !important;
  }
  .cs-preview-grid.home .spaced-out {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
    width: 100% !important;
  }
}