/* Responsive fixes — additive only, loaded after Webflow's generated CSS.
   Webflow's own export already handles the 991/767/479 breakpoints for
   most of the site, but a handful of sections were never given a mobile
   treatment and overflow the viewport on narrow phones. Each fix below
   applies the same kind of adjustment Webflow already uses elsewhere on
   this site (stacking an unwrapped flex row to a column, letting a fixed
   width go full-width once stacked) rather than introducing a new look. */

/* Safety net: catches any remaining sub-pixel/decorative bleed (e.g. the
   large background watermark words) without affecting layout, since
   nothing on this site relies on horizontal scrolling. */
html,
body {
  overflow-x: hidden;
}

/* Case-study banner image row (port-header-banner): capped at max-width:
   1520px and centered, so on screens wider than ~1560px it leaves an
   ever-growing empty gap past the last screenshot instead of the gallery
   image reaching the edge. The source images are themselves cropped mid-
   frame, so they're clearly meant to run to the edge of the viewport.
   Dropping the cap lets it fill the section's own padding on every
   screen size, the same way it already does below ~1560px today. */
.port-header-banner {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* The banner's own gallery image (homage.html, locofy-plugin.html) has a
   `sizes` attribute that caps its rendered width at ~940px regardless of
   how wide its grid cell actually is, so widening the banner above still
   left a gap behind the image itself. Let it fill its cell instead. */
.homagestack img,
.stackbg img {
  width: 100%;
}

/* homage.html + locofy-plugin.html: the banner's outer grid (`.portstack`,
   shared by both pages) is a fixed `.75fr 1.75fr` / `1fr 1.75fr` two
   column split set via a Webflow #w-node-... ID rule, with no responsive
   override anywhere. Below tablet width this squeezes the logo tile down
   to a narrow sliver next to a screenshot cell that's still wide enough
   to cram 2-3 phone screens together — stacking reads as two full-width,
   legible tiles instead. #w-node IDs are higher specificity than a class
   selector regardless of source order, hence !important here (same
   reasoning as the .project-grid override further down). */
@media screen and (max-width: 767px) {
  .portstack {
    grid-template-columns: 1fr !important;
  }
}

/* Decorative background watermark words ("design", "contact", "works",
   "about me", "photography", "Stay tuned") — 30% smaller than Webflow's
   own sizing at every tier it already varies by (base/991/767), so the
   scale-down carries through responsively instead of only applying at
   one width. Only font-size changes here; every modifier's own top/left/
   inset positioning (the anchor point) is untouched, so each word stays
   anchored at the same spot relative to its parent, just smaller. */
.absolute-text {
  font-size: 149px;
}

.absolute-text.more {
  font-size: 70px;
}

@media screen and (max-width: 991px) {
  .absolute-text {
    font-size: 120px;
  }
}

@media screen and (max-width: 767px) {
  .absolute-text {
    font-size: 62px;
  }
}

/* About page Instagram grid: a bare `1fr 1fr 1fr` track still gets an
   implicit `auto` (content-based) minimum per column, and since each
   photo is a differently-sized image, that minimum differs per column —
   the columns end up uneven widths instead of a true equal three-up
   grid. min-width: 0 on the grid items removes that implicit minimum so
   the fr tracks actually divide the row evenly, at every column count
   below. */
.ig-lightbox,
.more-ig {
  min-width: 0;
}

/* About page's "view all photos" link: its font size was tuned for a
   card wide enough to fit it on one line, but the narrowest (1-column)
   layout leaves it just a few pixels short, wrapping the icon onto its
   own line. Force one line and size it to actually fit the narrowest
   card instead of only mostly fitting. */
.viewphotos {
  white-space: nowrap;
}

@media screen and (max-width: 479px) {
  .viewphotos {
    font-size: 20px;
  }
}

@media screen and (max-width: 767px) {
  /* About page's decorative background words ("about me", "photography")
     use a percentage-based `top` (from the shared .absolute-text rule,
     e.g. top: -39%) meant for their parent's normal height. Both parents
     stack/grow substantially below this breakpoint — .me-con goes from
     a photo-height row to a photo-plus-full-bio column, .ig-con gains
     rows as the photo grid drops to fewer columns — so that same
     percentage now resolves against a much taller box and flings the
     text hundreds of pixels above it instead of sitting near it. Pin it
     to the parent's own top edge instead, so it stays anchored there
     regardless of how tall the parent ends up. Scoped to just these two
     containers — the same base class elsewhere (e.g. "design", "contact")
     sits on parents whose height doesn't change this way, and already
     reads as an intentional overlap there. */
  .me-con .absolute-text,
  .ig-con .absolute-text {
    top: 0;
  }
}

@media screen and (max-width: 767px) {
  /* About page: photo and bio copy sit side-by-side with no tablet/
     mobile override. The bio column is still technically visible down
     to ~480px, but well before that the fixed-width photo leaves it a
     cramped 150px-or-narrower sliver of wrapped text — so this matches
     the threshold the rest of the site already stacks two-up sections
     at (e.g. the homepage hero), rather than waiting for outright
     overlap. */
  .me-con {
    flex-flow: column;
  }

  .image-6 {
    max-width: 100%;
    width: 100%;
  }

  /* Instagram grid: three columns is too tight for a landscape phone
     (or a photo grid this wide generally) below tablet width — two
     columns keeps each thumbnail a reasonable size down to portrait
     mobile, where the next breakpoint below drops it to one. */
  .grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 479px) {
  /* Instagram grid: portrait phones get a single column so each
     thumbnail stays a reasonable, tappable size. */
  .grid {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 767px) {
  /* Case-study header (all 5 case-study pages): the external link pill
     ("Plugin link" / "Live Website") sits flex:none next to the title
     with no wrap. This was only fixed at ≤479px before, but the title
     text alone is often wide enough to push the pill past the edge well
     above that — e.g. clipped by 123px at 600px on homage.html. Let it
     drop to its own line at the same breakpoint the rest of these
     case-study fixes use. */
  .port-header {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .portlink {
    margin-top: 16px;
  }
}

@media screen and (max-width: 767px) {
  /* Three-column "challenge" layout (homage-enterprise-app, locofy-builder).
     `._3column-layout` has no flex-wrap and `.column-thirds` is a flat
     33.33% each — 3 × 33.33% + 2 × 30px gaps is already more than 100%
     width on its own, so this was overflowing at every width down from
     991px, not just below 479px where it was fixed before. */
  ._3column-layout {
    flex-flow: column;
  }

  .column-thirds {
    width: 100%;
  }

  /* Stat rows (icon + number + label) laid out as an unwrapped flex row.
     Same widening as above — cramped well above 479px, not just below it. */
  .normal-flex.bottom-margin {
    flex-flow: column;
  }

  /* Booking-flow step row (homage-enterprise-app): 4 flex:1 items plus 3
     arrow icons in one row reads fine on desktop but crams the step
     labels on a tablet-width screen. */
  .flow-block {
    flex-flow: column;
  }

  .flow-item {
    width: 100%;
  }

  /* Booking-flow image slider: the fixed 876px desktop height leaves a
     mostly empty box below desktop widths, since the image itself scales
     down with the container well before the box does. */
  .slider-div,
  .bookingflow-slider,
  .bookingflow-slider .w-slider-mask,
  .bookingflow-slider .w-slide {
    height: auto;
  }

  /* Impact stats row (locofy-plugin) */
  .imapct-con {
    flex-flow: column;
  }

  /* "My Role / Focus / Team" row — shared by all 5 case-study pages.
     3 equal flex:1 columns with no wrap ever, and several of the values
     are full phrases ("Product Experience, Visual Design"), so they wrap
     into a narrow column and the row reads as cramped well before it
     technically overflows. Stacking reads as a clean, deliberate list
     instead of three squeezed columns. */
  .role-section {
    flex-flow: column;
    align-items: flex-start;
    gap: 24px;
  }
}

@media screen and (max-width: 767px) {
  /* Shared contact footer (every page): "masterbagatz@gmail.com" is one
     unbroken string with no spaces to wrap at, so it can't wrap to a
     second line if it doesn't fit — it just overflows past its flex row
     and gets clipped by the overflow-x: hidden safety net above.
     Webflow's own 767px breakpoint already takes it down to 21px, which
     technically fits at 375px, but only just (~14px of margin) — tight
     enough to break from font-loading timing or minor rendering
     differences, which is what was actually happening. 18px leaves a
     much safer margin at 375px and comfortably fits every narrower
     phone width too, so it replaces 21px for this whole range rather
     than adding yet another, even-narrower-only tier below it. */
  .email {
    font-size: 18px;
  }

  /* Arrow icon next to it: renders at its intrinsic 22x22 SVG size with
     no width rule of its own, so it needs an explicit size here — 30%
     smaller, matching the email text's own reduction. */
  .email-block img {
    width: 15.4px;
    height: 15.4px;
  }
}

/* ---- homage.html + locofy-plugin.html: 4-up screenshot row ----
   `.sol-image{flex:none;width:28%}` — four of them is 112% width before
   even counting gaps, so the 4th image is actively clipped by the
   container's `overflow:hidden` at every screen size today, desktop
   included (confirmed: clipped by 228px on a 1440px screen). flex:1
   with min-width:0 replaces the fixed percentage with true equal
   distribution that always sums to 100% regardless of gap, fixing the
   clipping everywhere before any responsive behavior is added. */
.sol-image {
  flex: 1;
  width: auto;
  min-width: 0;
}

@media screen and (max-width: 767px) {
  /* Four screenshots is too tight below desktop width even once they're
     no longer overflowing — two-up keeps each one legible. */
  .sol-inner {
    flex-wrap: wrap;
    row-gap: 16px;
  }

  .sol-image {
    flex: 1 1 45%;
  }

  /* locofy-plugin.html's version of this panel caps itself at 580px
     tall for the desktop 1-row layout; wrapping to two rows here would
     otherwise get clipped by that same height limit. */
  .solution-screenshots {
    max-height: none;
  }
}

@media screen and (max-width: 479px) {
  /* One column: at this width even two-up would be under 160px each. */
  .sol-image {
    flex: 1 1 100%;
  }
}

/* ---- homage.html: two 8-image "profile creation flow" / "see a doctor"
   rows ----
   `._4rowimg{width:23.5%}` × 4 + 2% gaps sums to exactly 100%, so this
   never overflows, but it also never reflows — each screenshot renders
   at roughly 85px wide on a 375px phone, illegible as a UI screenshot. */
@media screen and (max-width: 991px) {
  .first-imagerow {
    flex-wrap: wrap;
    row-gap: 16px;
  }

  ._4rowimg {
    width: 48%;
  }
}

@media screen and (max-width: 479px) {
  ._4rowimg {
    width: 100%;
  }
}

/* ---- locofy-website.html + locofy-builder.html ----
   `.blocktitle-div.margin-top{width:50%}` is the base (non-.homage)
   variant of a block that DOES already go full-width responsively on
   homage-enterprise-app.html, via a `.homage` modifier class this
   variant doesn't have. Below tablet width a 50%-wide column squeezes a
   whole heading + paragraph into roughly a third of the phone's screen. */
@media screen and (max-width: 767px) {
  .blocktitle-div.margin-top {
    width: 100%;
  }

  /* locofy-builder.html's "From designs to production" impact block has
     the same gap: `.impact-con.top-margin` without the `.homage`
     modifier never gets a flex-flow: column override anywhere, so the
     description text and the 3 stat numbers stay side by side, each
     squeezed to roughly a third of the phone width, all the way down to
     the narrowest screens. */
  .impact-con.top-margin {
    flex-flow: column;
  }
}

/* ---- locofy-website.html + locofy-builder.html: video/animation
   placeholder blocks ----
   `.locofy-web-vid-placeholder{min-height:500px}` is a fixed height at
   every screen size. These are text-only placeholders (no actual video
   embedded yet), so a full 500px on a narrow phone is a lot of empty
   scroll for no visual content — trimmed down below tablet width, still
   present as a clear placeholder without dominating the page. */
@media screen and (max-width: 767px) {
  .locofy-web-vid-placeholder {
    min-height: 320px;
  }
}

/* ---- locofy-plugin.html: "Project Creation Flow" gallery ----
   `.project-grid{grid-template-columns:1fr 1fr 1fr}` with two cells
   spanning 2 rows via #w-node-... IDs, and no responsive override at
   any width — the only CSS Grid gallery on the site, and the only one
   with zero reflow. At 3 columns on a phone each cell is roughly 100px
   wide after the 36px gaps. */
@media screen and (max-width: 991px) {
  .project-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Each image carries a `sizes` attribute tuned for the old fixed
     3-column layout (e.g. "48vw" at phone widths); without an explicit
     CSS width, the browser uses that as the image's actual rendered
     width regardless of how wide its grid cell now is — the same
     `sizes`-vs-container mismatch fixed elsewhere on the banner images
     earlier in this file. Filling the cell takes priority over that
     hint here. */
  .project-grid img {
    width: 100%;
  }
}

@media screen and (max-width: 479px) {
  .project-grid {
    grid-template-columns: 1fr;
  }

  /* The two row-spanning cells only make sense alongside a second
     column of normal-height cells — in a single column they'd force an
     empty gap the height of the row they're spanning over. Let every
     cell size to its own content instead. */
  .project-grid > * {
    grid-row: auto !important;
    grid-column: auto !important;
  }
}

/* ---- locofy-plugin.html: "Lightning Code Conversion" image rows ----
   `.lightning-row1{flex-flow:row}` (overriding Webflow's own vflex
   utility back to a row) holding 3 images each (25%/25%/44% widths) with
   no flex-wrap and no media query — the only image row on the site with
   zero responsive treatment. Two-up per row, wrapping the 3rd onto its
   own line: each image also carries a `sizes` attribute tuned for its
   old fixed width (e.g. "530px"), which without an explicit CSS width
   would otherwise dictate the image's actual rendered size regardless of
   its new ~50% cell — same fix as the project-grid images above. */
@media screen and (max-width: 767px) {
  .lightning-row1 {
    flex-flow: row wrap;
    row-gap: 24px;
  }

  .lightning-img,
  .lightning-img.half {
    flex: 1 1 calc(50% - 18px);
    width: calc(50% - 18px);
  }
}

/* ---- locofy-plugin.html: "The Impact" stats block ----
   `.normal-blk.impact{flex-flow:row}` sits the title/description next
   to the 3-stat row (`.imapct-con`, already stacked internally at
   ≤479px) with no width split and no wrap — on a phone this squeezes
   both the paragraph and the large stat numbers into roughly half the
   screen each. */
@media screen and (max-width: 767px) {
  .normal-blk.impact {
    flex-flow: column;
  }
}

/* ---- Case-study prev/next nav (all 5 case-study pages) ----
   Same two-items-no-wrap issue as .port-header above: on a phone the
   previous/next titles can be long enough to collide when forced onto
   one line, so let them stack instead. */
@media screen and (max-width: 767px) {
  .case-nav {
    flex-wrap: wrap;
  }

  .case-nav.next-only {
    justify-content: flex-start;
  }

  .case-nav-link.next {
    text-align: left;
  }
}

/* ---- Case-study switcher takeover (all 5 case-study pages) ----
   The 160px top padding is sized to clear the sticky header on desktop;
   the header doesn't get shorter on narrower screens (same logo/nav on
   one row throughout), so this is really just tightening the excess
   breathing room once there's less width to spare. */
@media screen and (max-width: 767px) {
  .case-switcher-inner {
    padding: 130px 20px 80px;
  }
}

/* .port-item's own padding drops to 14px at this breakpoint, so pull
   the close badge in to match instead of it looking stranded. */
@media screen and (max-width: 479px) {
  .case-switcher-close {
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
  }

  .case-switcher-close img {
    width: 16px;
    height: 16px;
  }
}