/* Floi custom overrides — loaded after webflow CSS */

/* "Keep scrolling" — fixed-size text that doesn't reflow under the title */
.scroll-note_text {
  top: auto;
  bottom: 6vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  white-space: nowrap;
}

@media screen and (max-width: 991px) {
  .scroll-note_text { display: none; }
}

/* Bisu — interview quote paragraph: remove the 40px right padding that offsets it */
#w-node-_2ad96702-ae35-abc6-1929-0307fdb92f47-157dd0f5 .text-size-regular-2 {
  padding-right: 0;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Home page navbar — Webflow marks the logo link w--current on the home page,
   which triggers a min-width:1280px rule that gives it flex:1, causing the logo
   to grow and steal space from the three nav-link groups. Pin it to natural width. */
@media (min-width: 1280px) {
  .navbar_logo-wrap.w--current {
    flex: none;
  }
}

/* Home — works gallery: the inner grid wrapper has max-width but no auto margins,
   so it left-aligns inside the centered container. Fix: centre it. */
.waves-master-gallery-1 {
  margin-left: auto;
  margin-right: auto;
}

/* Bisu detail page background */
.frame-590.background-bisu {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Bisu card on home page — single photo, not tiled */
.container-19 {
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
}

/* Works page — equal horizontal padding so cards don't hit the edge */
.body-2 .form-block-2,
.body-2 .filter_content {
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: 100%;
}

/* Webflow's default adds margin-left/right: 2rem only on the grid, not on the
   filter row — that creates an asymmetric look. Zero it out so our 4rem padding
   on the parent is the only horizontal spacing. */
.body-2 .cms_list.helper {
  margin-left: 0px;
  margin-right: 0px;
}

/* Works grid: 4 cols ≥2600px, 3 cols 1920–2599, 2 cols <1920px, 1 col mobile */
.cms_list.helper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  width: 100%;
}
@media (min-width: 1920px) {
  .cms_list.helper { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 2600px) {
  .cms_list.helper { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 560px) {
  .cms_list.helper { grid-template-columns: 1fr; }
}

.works-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: transform .25s ease;
}
.works-card:hover { transform: translateY(-4px); }
.works-card_image-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 1rem;
  background: #f2f1ed;
}
.works-card_image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.works-card_subtitle {
  margin-top: .75rem;
  color: #6d6d6d;
  font-size: .95rem;
  letter-spacing: .01em;
  text-align: center;
}

/* Bikefinder page (body-4 has dark green bg) — make navbar text white */
.body-4 .navbar_link-text,
.body-4 .waves---nav-link,
.body-4 .navbar_link {
  color: #fff;
}
.body-4 .navbar_logo { filter: brightness(0) invert(1); }

/* Bikefinder navbar: fixed at top, slides up while scrolling, back in at end */
.body-4 .navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  transition: transform .35s ease;
}
.body-4.nav-hidden .navbar {
  transform: translateY(-110%);
}

/* Cookie consent banner */
#consent-banner {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 99999;
  width: min(640px, calc(100% - 2rem));
  background: #1a1a1a;
  color: #fff;
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
  display: flex;
  flex-direction: column;
  gap: .75rem;
  font-family: var(--_typography---font-family--detail, sans-serif);
  font-size: .9rem;
  line-height: 1.45;
}
#consent-banner .consent-text { color: #f3f3f3; }
#consent-banner .consent-text a { color: #fff; text-decoration: underline; }
#consent-banner .consent-buttons {
  display: flex;
  gap: .6rem;
  justify-content: flex-end;
}
.consent-btn {
  border: none;
  border-radius: 999px;
  padding: .55rem 1.25rem;
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.consent-btn-primary { background: #fff; color: #111; }
.consent-btn-primary:hover { background: #ececec; }
.consent-btn-secondary { background: transparent; color: #f3f3f3; border: 1px solid #555; }
.consent-btn-secondary:hover { border-color: #999; }
@media (min-width: 640px) {
  #consent-banner { flex-direction: row; align-items: center; justify-content: space-between; }
  #consent-banner .consent-text { flex: 1; }
}

/* Privacy page layout */
.privacy-page {
  max-width: 720px;
  margin: 6rem auto 4rem;
  padding: 0 1.5rem;
  font-family: var(--_typography---font-family--detail, sans-serif);
  color: #1a1a1a;
  line-height: 1.55;
}
.privacy-page h1 { font-size: 2.25rem; margin: 0 0 .25rem; }
.privacy-page h2 { font-size: 1.15rem; margin: 2rem 0 .5rem; }
.privacy-page p, .privacy-page ul { margin: 0 0 1rem; font-size: .95rem; }
.privacy-page ul { padding-left: 1.25rem; }
.privacy-page a { color: #1a1a1a; text-decoration: underline; }
.privacy-meta { color: #6d6d6d; font-size: .85rem; }
.privacy-back { margin-top: 3rem; }
.privacy-page .consent-btn { margin-top: .25rem; background: #1a1a1a; color: #fff; }
.privacy-page .consent-btn:hover { background: #333; }

/* Prevent chip labels from wrapping at narrow viewports */
.work-tabs-link .w-form-label {
  white-space: nowrap;
}

/* Filter buttons: keep the pink (bubblegum) highlight on the selected one */
.work-tabs-link:has(input[type="radio"]:checked) {
  border-color: var(--bubblegum);
  color: var(--bubblegum);
}
.work-tabs-link:has(input[type="radio"]:checked) .w-form-label {
  color: var(--bubblegum);
}

/* Mobile nav menu — white background */
.waves---nav-menu {
  background-color: #fff;
}

/* Bisu detail — responsive fixes */
@media (max-width: 767px) {
  .bas-wrapper {
    height: 380px;
  }
  .section-36 {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .section-37 {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  /* Interview tabs: at 480–767px the items are inline-block and overflow;
     switch to flex so the three pills share the row equally. */
  .tabs-menu-2 {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    width: 100%;
  }
  .tabs-menu-2 .work-tabs-link {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    margin-left: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 479px) {
  /* Webflow collapses section_home-header to height:1% at this breakpoint — restore it */
  .section_home-header {
    height: auto !important;
    min-height: auto !important;
  }

  /* Slider height */
  .bas-wrapper {
    height: 260px;
  }

  /* Map sections */
  .section-36 {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .section-37 {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  /* Tighten the large text/intro blocks — base keeps 60px which is too much */
  .frame-590 {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  /* Webflow's .categories rule adds margin-top: 60px at 479px;
     .categories.due doesn't reset it, so a 60px gap appears before the
     interview section. Remove it. */
  .categories.due {
    margin-top: 0;
  }

  /* Tighten the before/after slider wrapper */
  .frame-592-4 {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  /* Reduce container-17 (social impact card) padding so text isn't cramped
     on a narrow screen and the card doesn't overflow */
  .container-17 {
    padding: 24px 16px;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Ensure the body-text paragraph fills the column instead of staying 50% wide */
  .observational-research-i-visited-secondhand-shops-and-donation-centers-to-see-which-objects-were-lef-2 {
    width: 100%;
    display: block;
  }

  /* At ≤479px Webflow also forces flex: none; min-width: 40% on the tabs —
     re-assert the flex layout so our 767px rules aren't undone. */
  .tabs-menu-2 {
    gap: 4px;
  }
  .tabs-menu-2 .work-tabs-link {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 8px 6px;
    font-size: 14px;
    margin-left: 0 !important;
  }
}