/* Soltar recolor — implements the handoff color-usage spec.
   Base (styles-recolor.css) is grayscale: all text -> graphite, blue removed.
   This layer defines the spec tokens and re-introduces colour per the rules.

   PENDING (need your direction — not applied yet):
   - Logo colour: logo.svg is an image asset shared with the real homepage;
     recolouring it needs an asset edit or a preview-only copy.
   - Which "links" go accent (view-all, footer links?) vs stay graphite.
   - Focus rings + active search-bar states (bar -> #eceef1, white pill). */

:root {
  /* Surfaces */
  --bg: #ffffff;
  --surface-soft: #fafbfc;     /* header, section bands, footer — one colour */
  --surface: #f5f7fa;          /* mist: form fields, selected row, datepicker track */
  --surface-card: #f6f6f6;
  --surface-card-hover: #f0f0f0;
  /* Text + icons */
  --fg1: #14171c;
  --fg2: rgba(20, 23, 28, .60);
  --fg3: rgba(20, 23, 28, .42);
  /* Borders */
  --border: rgba(20, 23, 28, .11);
  --border-strong: rgba(20, 23, 28, .18);
  --input-border: #d7dbe0;
  /* Accent blue — only logo, search button, links, focus */
  --accent: #155eef;
  --accent-hover: #1150d8;
  --accent-soft: #e6f4fe; /* deprecated — no colored tags (Olya 2026-07-04) */
  /* Primary (graphite) actions */
  --primary-bg: #14171c;
  --primary-fg: #ffffff;
  --primary-hover: #23272e;
  /* Interaction washes */
  --wash-hover: rgba(20, 23, 28, .04);
  --wash-press: rgba(20, 23, 28, .08);
  /* Focus ring */
  --focus-ring: rgba(3, 40, 72, .25);
}

/* Page background: white */
body { background: var(--bg) !important; }

/* Header band: soft surface + hairline bottom (rest state) */
.header { background: var(--surface-soft) !important; border-bottom: 1px solid var(--border) !important; }

/* Force the sticky header onto its own GPU layer. It's position:sticky AND animates its
   height on scroll; in Chrome (esp. DevTools device mode) that combo can drop a repaint
   mid-scroll so the header looks like it vanishes even though it stays locked at top:0
   (verified it never actually moves). translateZ(0) promotes it to a composited layer so
   it always repaints. Harmless: no visible transform, doesn't shift the compact pill
   (its absolute children are positioned within .header__top). */
.header { transform: translateZ(0); -webkit-transform: translateZ(0); will-change: transform; }

/* "List your surf camp or lessons with us" block -> soft surface */
.partner { background: var(--surface-soft) !important; }

/* Footer -> soft surface + hairline top */
.footer { background: var(--surface-soft) !important; border-top: 1px solid var(--border) !important; }

/* Search button = the one accent action (rest -> hover + slight scale) */
.search-bar__btn { background: var(--accent) !important; border-color: var(--accent) !important; }
.search-bar__btn:hover { background: var(--accent-hover) !important; transform: scale(1.06); }
/* Advanced "Filters" button: fully WHITE button with a subtle hairline edge.
   Hover = a little grayish/mist wash, still no colour fill (Olya's request). */
.search-bar-compact__filter-btn,
.search-bar-compact__filter-btn--standalone {
  background: #fff !important;                        /* fully white at rest */
  color: var(--fg1) !important;
  box-shadow: 0 0 0 1px var(--border) !important;     /* subtle hairline edge */
}
.search-bar-compact__filter-btn:hover,
.search-bar-compact__filter-btn--standalone:hover,
.search-bar-compact__filter-btn:focus,
.search-bar-compact__filter-btn--standalone:focus,
.search-bar-compact__filter-btn:active,
.search-bar-compact__filter-btn--standalone:active {
  background: #fff !important;                          /* stays white, no fill */
  box-shadow: inset 0 0 0 1.5px var(--fg1) !important;  /* dark OUTLINE on hover/click */
}

/* Shrunk (compact) search bar: keep the SEARCH button on accent too */
.search-bar-compact__search-icon { background: var(--accent) !important; }
.search-bar-compact__search-icon:hover { background: var(--accent-hover) !important; }

/* Search-page filter chip fix: the compact pill (.search-bar-compact) is
   absolutely centered, so .search-bar-container collapses to its 340px min-width
   and the (wider) pill overflows ON TOP of the standalone Filters chip — hiding
   the chip behind the pill. Make the pill in-flow on the search page so the
   container sizes to the pill and the chip sits cleanly to its right. Scoped to
   .search-cards-v2 so the home's scroll-morph pill (which has no chip) is
   untouched. */
.search-cards-v2 .header--compact .search-bar-compact {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  height: 46px !important;          /* fill the 46px container vertically */
  align-items: center !important;   /* center the inner pill */
}
/* Keep the whole compact row a single 46px height, vertically centered, so the
   pill + Filters chip line up (the relative pill must not change the row height
   or top-align). */
.search-cards-v2 .header--compact .header__search-area { align-items: center !important; }
.search-cards-v2 .header--compact .search-bar-container {
  height: 46px !important;
  align-self: center !important;
}
.search-cards-v2 .header--compact .search-bar-compact__filter-btn--standalone {
  align-self: center !important;
}

/* Selected advanced-filter option = outline only, not a solid charcoal fill
   (Olya: "outline, not fully colored"). Matches the .flex-btn--active pattern. */
.filter-opt--active,
.filter-opt--active:hover {
  background: transparent !important;
  color: var(--fg1) !important;
  border-color: var(--fg1) !important;
  font-weight: 600 !important;
}
.filter-opt--active .filter-opt__icon { filter: none !important; }  /* dark icon, was inverted white */

/* Advanced filters popup: fully WHITE panel. The sticky header + footer each
   get a soft shade so they separate from the scrolling body (Airbnb pattern). */
.filter-modal__card { background: #fff !important; }
.filter-modal__head {
  background: #fff !important; position: relative; z-index: 2; padding-bottom: 16px !important;
  box-shadow: 0 1px 0 rgba(20,23,28,.06), 0 8px 14px -12px rgba(20,23,28,.22);
}
.filter-modal__foot {
  background: #fff !important; position: relative; z-index: 2; border-top: none !important;
  box-shadow: 0 -1px 0 rgba(20,23,28,.06), 0 -8px 14px -12px rgba(20,23,28,.22);
}
/* Filter chips: grayish outline by default → black on hover / when selected
   (selected stays outline-only, not filled). */
.filter-opt { border-color: var(--input-border) !important; }
.filter-opt:hover { border-color: var(--fg1) !important; }
.filter-opt--active, .filter-opt--active:hover { border-color: var(--fg1) !important; }

/* "Show Results" — proper dark-button hover (lighten + subtle lift), not the
   old blue flash. */
.filter-modal__apply { transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease !important; }
.filter-modal__apply:hover { background: var(--primary-hover) !important; transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(20,23,28,.40); }
.filter-modal__apply:active { transform: translateY(0); box-shadow: none; }
/* "Clear All" — darken + thicken the underline on hover. */
.filter-modal__clear { text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color 150ms ease, text-decoration-thickness 150ms ease; }
.filter-modal__clear:hover { color: var(--fg1) !important; text-decoration-thickness: 2px; }

/* Header menu selected item -> black (matches the Sort dropdown), not the retired blue (#2454FF). */
.main-menu__item--active,
.user-menu__item--active,
.main-menu__item--active:hover,
.user-menu__item--active:hover {
  background: #14171c !important;   /* black — consistent with the Sort dropdown's selected option */
  color: #fff !important;
}
/* Widen the hover/selected highlight pill: shrink the menu's side padding so
   the pill fills more of the width (less empty space, equal both sides). */
.main-menu, .user-menu { padding-left: 8px !important; padding-right: 8px !important; }

/* Search results pagination: grey round background on hover for the page
   numbers AND the prev/next arrows (the round shape comes from the base
   border-radius:50%). The current page stays the solid dark pill. */
.search__page:not(.search__page--active):hover,
.search__page--arrow:hover {
  background: #eceef1 !important;
  color: #14171c !important;
}

/* ============================================================
   Search results — NEW vertical card design (Airbnb-style).
   Gated by the `search-cards-v2` body class (only /search-recolor),
   so the real /search keeps its old horizontal card. Markup is in
   search-inline.js cardHTML (the .camp-card--v2 branch).
   ============================================================ */
.camp-card--v2 {
  display: flex !important; flex-direction: column !important;
  /* reset the old horizontal card's fixed height + clip */
  height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important;
  background: transparent !important; border: none !important; box-shadow: none !important;
  padding: 0 !important; gap: 0 !important; cursor: pointer; min-width: 0;
}
/* ---- gallery / carousel ---- */
.camp-card--v2 .cc2-gallery { position: relative; aspect-ratio: 20/19; border-radius: 16px; overflow: hidden; background: var(--surface); }
.camp-card--v2 .cc2-track { display: flex; height: 100%; transition: transform 320ms cubic-bezier(0.2,0,0,1); }
.camp-card--v2 .cc2-slide { flex: 0 0 100%; height: 100%; }
.camp-card--v2 .cc2-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.camp-card--v2 .cc2-tags { position: absolute; left: 11px; top: 11px; right: 50px; z-index: 6; display: flex; flex-wrap: wrap; gap: 6px; }
.camp-card--v2 .cc2-tag { display: inline-flex; align-items: center; gap: 5px; background: #fff; color: var(--fg1); font-size: 11.5px; font-weight: 600; letter-spacing: -0.01em; padding: 5px 10px; border-radius: 9999px; box-shadow: 0 6px 20px rgba(0,0,0,.10); white-space: nowrap; }
.camp-card--v2 .cc2-tag svg { width: 12px; height: 12px; }
.camp-card--v2 .cc2-fav { position: absolute; top: 10px; right: 10px; z-index: 7; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 6px 20px rgba(0,0,0,.10); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: transform 120ms cubic-bezier(0.2,0,0,1); }
.camp-card--v2 .cc2-fav:hover { transform: scale(1.07); }
.camp-card--v2 .cc2-fav svg { width: 16px; height: 16px; color: var(--fg1); }
/* saved heart = filled CHARCOAL (per handoff), not blue */
.camp-card--v2 .cc2-fav.camp-card__fav--saved svg { fill: var(--fg1); }
.camp-card--v2 .cc2-arr { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 6px 20px rgba(0,0,0,.10); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 200ms cubic-bezier(0.2,0,0,1); }
.camp-card--v2 .cc2-gallery:hover .cc2-arr { opacity: 1; }
.camp-card--v2 .cc2-arr[disabled] { opacity: 0 !important; pointer-events: none; }
.camp-card--v2 .cc2-arr--prev { left: 9px; } .camp-card--v2 .cc2-arr--next { right: 9px; }
.camp-card--v2 .cc2-arr svg { width: 15px; height: 15px; color: var(--fg1); }
.camp-card--v2 .cc2-dots { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 6; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.camp-card--v2 .cc2-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.6); transition: all 200ms cubic-bezier(0.2,0,0,1); }
.camp-card--v2 .cc2-dot.active { background: #fff; transform: scale(1.25); }
/* ---- body ---- */
.camp-card--v2 .cc2-body { padding: 12px 1px 0; }
.camp-card--v2 .cc2-line1 { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.camp-card--v2 .cc2-name { font-size: 15px; font-weight: 600; letter-spacing: -0.015em; color: var(--fg1); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.camp-card--v2 .cc2-rate { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 600; color: var(--fg1); flex: 0 0 auto; }
.camp-card--v2 .cc2-rate svg { width: 13px; height: 13px; color: var(--fg1); fill: var(--fg1); }
.camp-card--v2 .cc2-rate em { font-style: normal; color: var(--fg3); font-weight: 500; }
.camp-card--v2 .cc2-loc { margin-top: 8px; font-size: 13.5px; color: var(--fg2); display: flex; align-items: center; gap: 5px; min-width: 0; }
.camp-card--v2 .cc2-loc svg { width: 12px; height: 12px; color: var(--fg3); flex: 0 0 auto; }
.camp-card--v2 .cc2-place { flex: 0 0 auto; white-space: nowrap; }
.camp-card--v2 .cc2-dist { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg3); }
.camp-card--v2 .cc2-ament { margin-top: 5px; font-size: 13px; color: var(--fg2); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.camp-card--v2 .cc2-roomswrap { position: relative; margin-top: 9px; }
.camp-card--v2 .cc2-roomswrap::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 44px; pointer-events: none; z-index: 1; background: linear-gradient(90deg, rgba(255,255,255,0), var(--bg)); opacity: 0; transition: opacity 200ms; }
.camp-card--v2 .cc2-roomswrap.more::after { opacity: 1; }
.camp-card--v2 .cc2-rooms { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.camp-card--v2 .cc2-rooms::-webkit-scrollbar { display: none; }
.camp-card--v2 .cc2-roomsmore { display: none; position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 2; align-items: center; justify-content: center; height: 28px; padding: 0 11px; border-radius: 9999px; background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.10); border: none; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--fg1); letter-spacing: -0.01em; }
.camp-card--v2 .cc2-roomswrap.counter.more .cc2-roomsmore { display: inline-flex; }
/* Hairline outline (the site's locked grey-outline-pill standard) so the room
   pill reads on any backdrop. The --surface fill alone is invisible where the
   card sits on a tinted background — on mobile the results list is #f7f7f7 vs
   the pill's #f5f7fa, a 1.0 contrast ratio. */
.camp-card--v2 .cc2-room { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid rgba(20, 23, 28, 0.14); border-radius: 9999px; padding: 5px 11px; font-size: 12px; font-weight: 500; color: var(--fg1); white-space: nowrap; }
.camp-card--v2 .cc2-room .cc2-qty { font-weight: 600; }
.camp-card--v2 .cc2-room svg { width: 12px; height: 12px; color: var(--fg2); }
/* When the mobile search overlay is open, hide the results sheet (the "Found N
   camps" count + grabber + cards) so it can't show behind/through the overlay
   (the 50/50 mess) and so the overlay's own Clear/Show-Results buttons aren't
   obscured. Mirrors the existing rule that hides the bnav while the overlay is
   open. */
body:has(.msearch.msearch--open) .search__left {
  display: none !important;
}
.camp-card--v2 .cc2-pricewrap { position: relative; margin-top: 7px; display: flex; justify-content: flex-start; }
.camp-card--v2 .cc2-price { display: inline-flex; align-items: baseline; gap: 6px; background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; }
.camp-card--v2 .cc2-price b { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg1); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.camp-card--v2 .cc2-price .cc2-from, .camp-card--v2 .cc2-price .cc2-per { font-size: 13.5px; color: var(--fg2); font-weight: 400; }
.camp-card--v2 .cc2-pbreak { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 20; width: 250px; max-width: 100%; background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.12); padding: 16px; text-align: left; }
.camp-card--v2 .cc2-pbreak[hidden] { display: none; }
.camp-card--v2 .cc2-pbreak__hd { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--fg1); margin-bottom: 12px; }
.camp-card--v2 .cc2-pbreak__x { background: none; border: none; cursor: pointer; color: var(--fg2); display: flex; padding: 0; }
.camp-card--v2 .cc2-pbreak__x svg { width: 15px; height: 15px; }
.camp-card--v2 .cc2-pbreak__row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--fg1); }
.camp-card--v2 .cc2-pbreak__row + .cc2-pbreak__row { margin-top: 9px; }
.camp-card--v2 .cc2-pbreak__tot { padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--border); font-weight: 600; }
.camp-card--v2 .cc2-pbreak__note { margin-top: 11px; font-size: 12px; color: var(--fg2); line-height: 1.45; }

/* Search results page background -> white (the header + footer keep their
   soft home surface; only the content area goes white). */
.search-cards-v2 .search { background: #fff !important; }

/* Results title + Sort button — match the handoff (lighter 22px title;
   compact pill sort with a chevron). */
.search-cards-v2 .search__count { font-size: 22px !important; font-weight: 500 !important; letter-spacing: -0.02em !important; }
.search-cards-v2 .search__count span { font-size: inherit !important; font-weight: inherit !important; }
.search-cards-v2 .search__sort {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  height: auto !important; min-height: 0 !important; width: auto !important;
  padding: 9px 14px !important; font-size: 13.5px !important; font-weight: 400 !important;
  line-height: 1.2 !important;
  border: 1px solid var(--border) !important; border-radius: 9999px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
}
.search-cards-v2 .search__sort:hover { border-color: var(--border-strong) !important; }
.search-cards-v2 .search__sort-icon { width: 16px !important; height: 16px !important; }
.search-cards-v2 .search__sort strong { font-weight: 600 !important; }
.search-cards-v2 .search__sort::after {
  content: ""; flex: none; width: 7px; height: 7px; margin-left: 2px;
  border-right: 1.6px solid var(--fg2); border-bottom: 1.6px solid var(--fg2);
  transform: translateY(-2px) rotate(45deg);
}

/* Listing cards are vertical, INSIDE the existing left column; the map stays
   on the right (desktop split, from 950 up — matches Airbnb's breakpoint).
   - 950–1279: the left column is too narrow for two good cards, so it's a
     SINGLE column (Airbnb does exactly this just above 950).
   - >=1280: two cards per row.
   Below 950 the list is the map-view sheet, styled in styles-recolor.css. */
@media (min-width: 950px) and (max-width: 1279px) {
  .search-cards-v2 .search__list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;   /* one column in the split */
    gap: 48px 0;   /* row gap — measured Airbnb's stacked-card gap at ~48px (was 36) */
    align-content: start;
  }
  /* Wide single-column card → landscape image instead of the near-square 20:19
     the grid/2-col uses. Re-measured off Airbnb's 1024 card (≈514×366 ≈ 7:5,
     more landscape than 4:3); keeps the photo from towering in the wide column. */
  .search-cards-v2 .camp-card--v2 .cc2-gallery { aspect-ratio: 7 / 5; }
}

/* Mobile (<=743): the card list is a single full-width column inside the bottom
   sheet, so the photo should be landscape (7:5) like the wide single-column
   split — NOT the near-square 20:19 the 2-col grid/tablet uses. Ours was
   towering (~1.05); Airbnb's mobile card measures ~1.41. The pin-card gallery
   keeps its own fixed height (rule below, !important) so this doesn't touch it. */
@media (max-width: 743px) {
  .search-cards-v2 .camp-card--v2 .cc2-gallery { aspect-ratio: 7 / 5; }
}

/* Compact the search TOP-CHROME to Airbnb's vertical rhythm at the desktop
   split (>=950). We KEEP the breadcrumb (SEO) but make it light, and trim the
   oversized toolbar min-height + page/breadcrumb spacing. Mobile sheet (<=949)
   is left as-is. Net: ~152px of chrome above the first card -> ~112px. */
/* Tablet + desktop (>=744): tighten the chrome. Was >=950 only, which left tablet
   with the oversized toolbar min-height (64) + breadcrumb margin (16) → a too-big
   breadcrumb→title gap vs desktop. Mobile (<=743, sheet) keeps its own spacing. */
@media (min-width: 744px) {
  .search-cards-v2 .search { padding-top: 20px !important; }              /* was 32 */
  .search-cards-v2 .search__breadcrumb { margin-bottom: 8px !important; } /* was 16 */
  .search-cards-v2 .search__toolbar { min-height: 44px !important; height: auto !important; } /* was 64 */
}
@media (min-width: 1280px) {
  .search-cards-v2 .search__list {
    display: grid !important;
    /* minmax(0,1fr) — NOT 1fr — so the two tracks split the column evenly
       instead of blowing out to the cards' min-content width (the nowrap
       room chips / title), which overflowed the left column. */
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 52px 16px;   /* more breathing room between rows (Airbnb-style) */
    align-content: start;
  }
}

/* Search page: remove the 80px white gap above the footer (it read as a weird
   white stripe). Matches the destination-page footer treatment. */
.search-page .footer { margin-top: 0 !important; }

/* Hairline outline on the search bar */
.search-bar { border-color: var(--border) !important; }

/* When-dropdown flexibility tabs (Exact / +-1 / +-3):
   selected = outline only (like the hover state), not a filled/coloured chip.
   Bold label keeps it readable as the chosen option. */
.flex-btn--active,
.flex-btn--active:hover {
  background: transparent !important;
  color: var(--fg1) !important;
  border-color: var(--fg1) !important;
  font-weight: 600 !important;
}

/* ============================================================
   Search bar — Airbnb interaction pattern, in our grey tones.
   Rest = white bar. Active segment = whole bar turns grey so the
   existing white slider reads as a raised white pill (Airbnb move).
   ============================================================ */

/* A segment is active -> bar track turns grey (white slider lifts off it) */
.search-bar-container:has(.search-bar--has-active) .search-bar-pill-bg {
  background: #eceef1 !important;
}

/* Segment hover on a WHITE (rest) bar -> light grey pill */
.search-bar:not(.search-bar--has-active) .search-bar__field:hover {
  background: #eceef1 !important;
  border-radius: 42px;
}

/* Segment hover on a GREY (active) bar, non-active segment -> darker grey */
.search-bar--has-active .search-bar__field:hover:not(.search-bar__field--active) {
  background: #e2e4e8 !important;
  border-radius: 42px;
}

/* Dropdown panels: hairline + one clean shadow (spec elevation) */
.dropdown {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10) !important;
  border: 1px solid var(--border) !important;
}

/* Dropdown rows: neutral wash hover (was lavender #EEEEF2); selected = mist */
.dropdown__item:hover,
.skill__item:hover { background: var(--wash-hover) !important; }
.dropdown__item--selected { background: var(--surface) !important; }

/* Active tab underline: graphite, not the off-palette orange */
.dropdown__tab--active::after,
.calendar__mode-tab--active::after { background: var(--fg1) !important; }

/* ===== Search bar refinements (Airbnb pass 2) ===== */

/* Slightly shorter bar */
@media (min-width: 744px) { .search-bar-container { height: 60px !important; } } /* desktop/tablet search bar only — must NOT touch the ≤743 mobile header */

/* Placeholder text readable on white AND on the grey active bar
   (was a very light #C6C6C6) */
.search-bar__placeholder { color: var(--fg2) !important; }

/* Who dropdown: align its right edge with the bar (sits under Who) */
.dropdown--guests { right: 0 !important; }

/* Guest steppers: white circles with a hairline + graphite glyph (Airbnb) */
.guests__btn {
  width: 32px !important;
  height: 32px !important;
  background: #fff !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 50% !important;
}
.guests__btn:hover { border-color: var(--fg1) !important; }
.guests__btn svg line { stroke: var(--fg1) !important; }
.guests__btn--disabled,
.guests__btn--disabled:hover {
  background: #fff !important;
  border-color: var(--border) !important;
}
.guests__btn--disabled svg line { stroke: var(--fg3) !important; }

/* Calendar in-range band: neutral grey (was a light blue rgba(191,215,255,.24)).
   Check-in/out endpoints stay graphite; this is only the connecting band. */
.cal-selected,
.cal-selected:hover { background: rgba(20, 23, 28, 0.06) !important; }
.cal-range-start,
.cal-range-start:hover { background: linear-gradient(to right, transparent 50%, rgba(20, 23, 28, 0.06) 50%) !important; }
.cal-range-finish,
.cal-range-finish:hover { background: linear-gradient(to left, transparent 50%, rgba(20, 23, 28, 0.06) 50%) !important; }

/* Unite the search button with the active Who pill (Who is the last segment).
   Stretch the real white slider (the active-segment pill) to span under the
   full search button, so the button sits ON the white Who pill as one shape.
   The slider's left/width are set inline by JS; override width:auto + right:12px
   so it reaches just inside the bar's right edge. Fires only when Who is active. */
.search-bar:has(.search-bar__field--guests.search-bar__field--active) .search-bar__slider {
  width: auto !important;
  right: 0 !important;            /* flush to bar edge — matches Where's flush left (gap 0) */
}
.search-bar__field--guests.search-bar__field--active ~ .search-bar__btn {
  position: relative;
  z-index: 2;
}

/* HOVER on Who: the SAME grey segment-hover as Where/When, just extended so it
   also covers the search button (the only difference from the other segments).
   The grey pill is the ::after (z-index:-1, behind text); the button sits on top. */
.search-bar:not(.search-bar--has-active) .search-bar__field--guests:hover {
  position: relative;
  z-index: 1;
  overflow: visible !important;   /* field clips by default (overflow:hidden); allow the grey ::after to reach the button */
}
.search-bar:not(.search-bar--has-active) .search-bar__field--guests:hover::after {
  content: "";
  position: absolute;
  left: 0;
  right: -64px;                   /* button width 48 + margin 16 -> reaches bar edge */
  top: 50%;
  transform: translateY(-50%);
  height: 60px;
  background: #eceef1;            /* identical grey to the other segment hovers */
  border-radius: 999px;
  z-index: -1;
  pointer-events: none;
}
.search-bar:not(.search-bar--has-active) .search-bar__field--guests:hover ~ .search-bar__btn {
  position: relative;
  z-index: 2;
}

/* HOVER on Who while ANOTHER segment's dropdown is open (bar active): same
   extension, in the darker active-bar hover grey (#e2e4e8), covering the button. */
.search-bar--has-active .search-bar__field--guests:hover:not(.search-bar__field--active) {
  position: relative;
  z-index: 1;
  overflow: visible !important;
}
.search-bar--has-active .search-bar__field--guests:hover:not(.search-bar__field--active)::after {
  content: "";
  position: absolute;
  left: 0;
  right: -64px;
  top: 50%;
  transform: translateY(-50%);
  height: 60px;
  background: #e2e4e8;
  border-radius: 999px;
  z-index: -1;
  pointer-events: none;
}
.search-bar--has-active .search-bar__field--guests:hover:not(.search-bar__field--active) ~ .search-bar__btn {
  position: relative;
  z-index: 2;
}

/* "All directions" link (bottom of the Where dropdown): graphite, not orange */
.dropdown__item--all { color: var(--fg1) !important; }

/* Header tabs (Camps/Lessons/Spots): darken the INACTIVE tabs for contrast
   (was a very light #C6C6C6). Active tab keeps full-strength ink + underline. */
.tab-btn:not(.tab-btn--active) { color: var(--fg2) !important; }

/* Header icon buttons (menu + user): grey hover/active instead of blue/black,
   the SAME grey for both states; dark icon so it stays visible on the grey.
   (Fixes the #2823FF active-state blue that the base recolor missed.) */
.icon-btn:hover,
.icon-btn--active {
  background: #e2e4e8 !important;
}
.icon-btn:hover svg line, .icon-btn:hover svg circle, .icon-btn:hover svg path, .icon-btn:hover svg rect,
.icon-btn--active svg line, .icon-btn--active svg circle, .icon-btn--active svg path, .icon-btn--active svg rect {
  stroke: var(--fg1) !important;
}

/* "List with us" button: grey hover/active to match the icon buttons
   (was charcoal #14171c on hover, missed-blue #2823FF on active). Charcoal text. */
.btn-outline-pill:hover,
.btn-outline-pill--active,
.btn-outline-pill--active:hover {
  background: #e2e4e8 !important;
  border-color: #e2e4e8 !important;
  color: var(--fg1) !important;
}

/* Card tags restored (Olya wants them back): frosted-white pill + charcoal text,
   top-left, readable on any photo (base had white text on a 10%-white bg). */
.home-card__label {
  background: rgba(255, 255, 255, 0.85) !important;
  color: var(--fg1) !important;
  backdrop-filter: blur(6px);
  font-weight: 500;
}

/* Brighten the card photos: replace the flat 12% black wash with a bottom-only
   gradient scrim, so the top/middle of the photo stays bright and only the
   title area is darkened enough to keep the white text readable. */
.home-card::before {
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.50) 0%,
    rgba(0, 0, 0, 0.16) 38%,
    rgba(0, 0, 0, 0) 64%) !important;
}

/* Carousel scroll arrows: white circle + soft shadow + dark chevron (were a
   translucent blue), and straddling the card edge (half on / half off) both sides. */
.scroll-btn {
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22) !important;
}
.scroll-btn:hover {
  background: #ffffff !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.30) !important;
}
.scroll-btn:active { background: #f0f0f0 !important; }
.scroll-btn svg path { stroke: var(--fg1) !important; }
/* Carousel arrows — always STRADDLE 50/50 (48px button, ±24 centers it on an edge).
   • 835–1519 — page fills the viewport: straddle the CONTENT edges (heading line on the
     left, "view all" line on the right, both 40px in). The right arrow hangs 24px out over
     the bleeding card but still ends 16px shy of the screen edge → never clips.
     left:-24 centers on the 40px-left content edge; right:16 centers on the right one.
   • ≥1520 — page centered with ≥40px side margins (e.g. a 1710 Mac): straddle the CARD
     (bleed) edges — there's room outside, so the arrow can hang into the centering margin.
   (744–834 keeps the native inset; ≤743 hides the arrows.) */
@media (min-width: 835px) and (max-width: 1519px) {
  .scroll-btn--left { left: -24px !important; right: auto !important; }
  .scroll-btn--right { right: 16px !important; }
}
@media (min-width: 1520px) {
  .scroll-btn--left { left: -24px !important; right: auto !important; }
  .scroll-btn--right { right: -24px !important; }
}

/* Header right cluster: align to the content's (cards') right edge — remove the
   ~40px gap so the menus sit at the same edge as the card carousel. */
@media (min-width: 1128px) { .header__actions { margin-right: -40px !important; } } /* aligns w/ the cards' bleed edge — only on the wide desktop layout, not mobile/tablet */
/* ...but the search results page has no card bleed, so the negative margin just
   pulls the account icon flush to the edge. Keep the symmetric 40px right gap there. */
.search-cards-v2 .header__actions { margin-right: 0 !important; }

/* Search map: soften the bright Mapbox tiles toward a muted/pastel tone
   (desaturate + a touch lighter). Applied to the canvas only, so the price
   pins, controls, and attribution stay crisp. Tune the values to taste. */
.search-cards-v2 .mapboxgl-canvas { filter: saturate(0.58) brightness(1.05); }

/* Hover: fade the divider(s) adjacent to the hovered segment (Airbnb behaviour).
   Hover When (middle) -> both dividers fade; hover Where/Who (ends) -> only the
   inner one fades. (When a dropdown is open, all dividers are already hidden.) */
.search-bar:not(.search-bar--has-active) .search-bar__field:hover + .search-bar__divider,
.search-bar:not(.search-bar--has-active) .search-bar__divider:has(+ .search-bar__field:hover) {
  opacity: 0;
}

/* Lessons "When" in One Date mode: show only "Select date" — hide the leftover
   "– To" (the shared JS returns early in single mode, leaving range remnants).
   Scoped to lessons + the active "One Date" calendar tab, CSS-only. */
.search-bar--tab-lessons:has(.dropdown__tab--active[data-cal-tab="onedate"]) .search-bar__dates-dash,
.search-bar--tab-lessons:has(.dropdown__tab--active[data-cal-tab="onedate"]) .search-bar__dates .search-bar__value-row:has(#checkoutValue) {
  display: none !important;
}

/* Section + card + partner titles: weight 700 -> 600 (lighter). */
.section__heading,
.home-card__title,
.partner__heading {
  font-weight: 600 !important;
}

/* "view all": underline + arrow ALWAYS visible; hover thickens the underline;
   aligned to the cards' right (bleed) edge. Arrow is a separate span so the
   underline sits under the text only. */
.link-blue {
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* "view all" mirrors the right arrow so they stay in line: 40px gutter while the page
   fills the viewport (≤1519), then on the card's right bleed edge once the page is centered
   with ≥40px side margins (≥1520, e.g. a 1710 Mac). */
@media (min-width: 1128px) and (max-width: 1519px) { .link-blue { margin-right: 0; } }
@media (min-width: 1520px) { .link-blue { margin-right: -40px; } }
.link-blue .va-text {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.link-blue:hover .va-text { text-decoration-thickness: 2px; }
.link-blue .va-arrow { transition: transform 0.15s ease; }
.link-blue:hover .va-arrow { transform: translateX(3px); }

/* Card titles back to the bottom (removing the tag left them at the top of the
   flex column). */
.home-card__title { margin-top: auto !important; }

/* Logo recolour (preview only): swap to an accent-coloured copy of logo.svg.
   The real logo.svg is untouched; this only affects /home-recolor. */
/* Recolour the logo responsively: hide the real img but KEEP its (responsive) box
   so the recoloured logo, drawn as a contained bg, scales with it at every width.
   (Fixed 148x34 was forcing the desktop size onto the mobile header.) */
.header__logo img { visibility: hidden; }
.header__logo {
  background-image: url("/assets/images/logo-recolor.svg");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}
/* Tablet (744–1127): swap the full wordmark for the PIN logomark. The search page needs
   an advanced-filters icon in the header here, and the wordmark crowds it — collapsing to
   the pin (Airbnb-style) frees the space. Pin SVG aspect is 390:512, so 26×34 keeps it
   crisp; bg-size:contain fits it in the box. Desktop (≥1128) keeps the full wordmark. */
@media (min-width: 744px) and (max-width: 1127px) {
  .header__logo { background-image: url("/assets/images/logo-pin-recolor.svg"); }
  .header__logo, .header__logo img { width: 26px; height: 34px; }
}
/* Desktop (>=950): plenty of room, so show the FULL wordmark instead of the pin
   — on the HOME and the search page alike (Airbnb keeps the wordmark at desktop,
   collapses to the pin only at tablet/mobile ≤949). Previously this was scoped to
   .search-cards-v2, which left the home stuck on the pin at 950–1127. */
@media (min-width: 950px) {
  .header__logo { background-image: url("/assets/images/logo-recolor.svg") !important; }
  .header__logo,
  .header__logo img { width: 95px !important; height: 34px !important; }
}
/* Tablet (744–949): Airbnb-style LIST-first toggle.
   - List mode (default, no map-view): full-width list, MAP HIDDEN.
   - Map mode (via the "Show map" pill = .search-page--map-view): full-screen map
     + tap-a-pin card popup, with the list/sheet hidden (no sheet of all cards,
     like Airbnb's tablet). Mobile (<=743) keeps the auto map + draggable sheet. */
@media (min-width: 744px) and (max-width: 949px) {
  .search-cards-v2:not(.search-page--map-view) .search__map { display: none !important; }
  .search-cards-v2.search-page--map-view .search__left { display: none !important; }
  .search-cards-v2 .search__map-toggle {
    top: auto !important;
    bottom: calc(20px + env(safe-area-inset-bottom)) !important;
  }
  /* Keep the pill visible in map-view too (the base hides it because map-view
     normally uses the sheet grabber — but our tablet has no sheet, so the pill
     IS the way back to the list). */
  body.search-cards-v2.search-page--map-view .search__map-toggle { display: inline-flex !important; }
  /* The tablet pin-card is anchored to its pin by JS (see the ≥744 block below) —
     NOT a bottom-center popup, so it's never half-hidden and tracks the pin the
     user tapped. Increase the row gap between list cards so tablet rows breathe. */
  .search-cards-v2 .search__list { row-gap: 36px !important; }
}
/* Pin-card popup: pad the text block so it isn't flush to the card edges (the
   image stays full-bleed). Matches Airbnb's popup. Applies in every pin-card
   context (tablet, mobile, and the desktop map below). */
.search-cards-v2 .map-pin-card .cc2-body { padding: 12px 16px 16px !important; }
/* ✕ close: white circle (like the heart) INSIDE the card's top-right, to the
   RIGHT of the heart (heart shifts left). Airbnb-style. Applies at all widths. */
.search-cards-v2 .map-pin-card__close {
  position: absolute !important;
  top: 10px !important; right: 10px !important; bottom: auto !important; left: auto !important;
  width: 32px !important; height: 32px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10) !important;
  border: none; cursor: pointer; padding: 0;
  display: flex !important; align-items: center; justify-content: center;
  color: var(--fg1); z-index: 8;
  pointer-events: auto !important;   /* .map-pin-card is pointer-events:none — the ✕ MUST opt back in or clicks pass through (this was the close-not-working bug) */
}
.search-cards-v2 .map-pin-card__close svg { width: 11px !important; height: 11px !important; }   /* lighter glyph (was 14) */
.search-cards-v2 .map-pin-card__close svg path { stroke-width: 1.5 !important; }                  /* thinner ✕ (was 2) */
.search-cards-v2 .map-pin-card .cc2-fav { right: 48px !important; }   /* heart shifts left of the ✕ */
/* When a pin-card is open, keep ALL price pins compact (no expanded hover label)
   so the open card isn't duplicated by a hovered pin's label. */
body.pin-card-open .map-price-pill:hover,
body.pin-card-open .map-price-pill--hover {
  min-width: 60px !important; height: 36px !important; padding: 0 14px !important; border-radius: 999px !important;
}
body.pin-card-open .map-price-pill:hover .map-price-pill__compact,
body.pin-card-open .map-price-pill--hover .map-price-pill__compact { display: inline !important; }
body.pin-card-open .map-price-pill:hover .map-price-pill__expanded,
body.pin-card-open .map-price-pill--hover .map-price-pill__expanded { display: none !important; }
/* Tablet + desktop (>=744): clicking a pin shows a compact 340px card anchored
   to the pin by JS (reposition() in SearchMap). The fixed right:24/bottom:24 here
   is only the pre-JS resting spot; JS sets left/top immediately so the card sits
   above the tapped pin and stays fully on-screen. Mobile (<=743) keeps the
   full-width bottom sheet from styles-recolor. */
@media (min-width: 744px) {
  .search-cards-v2 .map-pin-card:not([hidden]) {
    display: block;
    position: fixed;
    left: auto; right: 24px; top: auto; bottom: 24px;
    width: 340px; max-width: 360px;
    z-index: 2200;
    background: transparent;
    pointer-events: none;
    transform: translateY(24px);
    opacity: 0;
    transition: opacity 200ms ease-out, transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .search-cards-v2 .map-pin-card.map-pin-card--shown { transform: translateY(0); opacity: 1; }
  .search-cards-v2 .map-pin-card .map-pin-card__slot {
    background: #fff; border-radius: 16px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    overflow: hidden; pointer-events: auto;
  }
  .search-cards-v2 .map-pin-card .cc2-gallery { aspect-ratio: auto !important; height: 168px !important; }
}

/* Mobile (<=743): hide the Mapbox +/- zoom buttons — pinch-to-zoom is the natural
   gesture on touch, so the on-screen controls are redundant clutter (Olya's call). */
@media (max-width: 743px) {
  .search-cards-v2 .search__map .mapboxgl-ctrl-top-right { display: none !important; }
}

/* The "Show map" map-toggle pill lives at the body root (outside the header's
   capped stacking context), so it paints OVER the open mobile search overlay +
   its "Show Results" button. Hide it whenever the overlay is open. Specificity is
   raised (.search-page--map-view) to beat the sheet--full !important rule that
   surfaces the pill (styles-recolor.css:4628). */
body.search-page--map-view:has(.msearch.msearch--open) .search__map-toggle { display: none !important; }

/* Mobile search: the bottom nav stays visible by default (it's the app's primary
   nav) — hide it ONLY when the map is full (sheet collapsed to a peek) or a
   pin-card is open, so it doesn't bury the immersive map. In the half/full list
   states (and everywhere off the map) the bnav shows. (Olya 2026-06-18: bnav
   visible always on mobile except full map.) Reserve --bnav-h only where hidden. */
@media (max-width: 743px) {
  body.search-page--map-view:not(.sheet--half):not(.sheet--full) .bnav,
  body.search-page--map-view.pin-card-open .bnav { display: none !important; }
  body.search-page--map-view:not(.sheet--half):not(.sheet--full),
  body.search-page--map-view.pin-card-open { --bnav-h: 0px; }
}

/* Mobile When calendar = a vertical SCROLL of months (Airbnb-style). CalendarDropdown
   renders 12 stacked months in the overlay; un-hide every month (a global
   @media(max-width:480) rule hides .calendar__month:last-child for the desktop 2-up
   grid) and center each one. The .calendar__grid-section flex-column already scrolls. */
@media (max-width: 743px) {
  .msearch__card-body .calendar__month {
    display: block !important;
    width: 100% !important;
    max-width: 360px;
    margin: 0 auto 24px !important;
  }
  .msearch__card-body .calendar__month-header { justify-content: center; text-align: center; }
}

/* Lesson card (cc2 scaffold, same look as camps) — the provider-type subtitle
   line under the name ("Surf school" / "Private instructor"), and the static
   "from €X person" price (not a popup button like camps). */
.search-cards-v2 .lesson-card--v2 .cc2-sub { margin-top: 2px; font-size: 13px; line-height: 1.3; color: #6B7280; }
.search-cards-v2 .cc2-price--static { cursor: default; background: none; border: none; padding: 0; text-align: left; }

/* ===== Partner block — Claude-design collage (preview only) =====
   Replaces the old floating-photo grid + the two text tags. Markup is injected
   in home-recolor/page.tsx (PARTNER_COLLAGE). All tokens are scoped to
   .pc-collage so nothing leaks to the rest of the page. The whole collage is
   drawn at its native 660x600 and `zoom`-fitted into the ~544px right column. */
.partner .pc-collage {
  --fg1: #14171c; --fg2: rgba(20,23,28,0.60); --fg3: rgba(20,23,28,0.42);
  --border: rgba(20,23,28,0.11); --border-strong: rgba(20,23,28,0.18);
  --surface-soft: #fafbfc; --accent: #155eef; --accent-soft: #e6f4fe; /* deprecated — no colored tags (Olya 2026-07-04) */
  --primary-bg: #14171c;
  --green-bg: #dbeec0; /* deprecated — no colored tags (Olya 2026-07-04) */
  --green-fg: #3f5018; /* deprecated — no colored tags (Olya 2026-07-04) */
  --mint-bg: #c4ece1; --blue-bg: #cfe6fb; /* used only by the decorative IG avatar gradient (avatar exception) */
  --elev-float: 0 6px 20px rgba(0,0,0,0.10);
  position: relative;
  width: 660px;
  height: 530px; /* tight vertical bound so the artwork centers in the block (was 600 — empty space pooled at the bottom). Cards only bob UP, so no clipping. */
  flex: 0 0 auto;
  /* The artwork doesn't reach the edges of its 660x600 canvas (~50px empty on the
     left, ~85px on the right). Pull that dead canvas out with negative margins so
     the artwork hugs the block's right edge (kills the "gap on the right") and
     hands the freed width back to the text column (heading fits 2 lines, not 3). */
  margin-left: -50px;
  margin-right: -85px;
  color: var(--fg1);
  font-family: var(--font-inter), -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  zoom: 1.1; /* fills the wider right column now that the block spans full content width */
}
.partner .pc-collage svg { display: block; }
.partner .pc-node { position: absolute; box-shadow: var(--elev-float); }
.partner .pc-f  { animation: pc-bob 6.5s ease-in-out infinite; }
.partner .pc-f2 { animation: pc-bob 7.5s ease-in-out .8s infinite; }
.partner .pc-f3 { animation: pc-bob 8s   ease-in-out 1.4s infinite; }
@keyframes pc-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) {
  .partner .pc-f, .partner .pc-f2, .partner .pc-f3 { animation: none; }
}
.partner .pc-tile { border-radius: 16px; overflow: hidden; background: #dfe4ea; object-fit: cover; }

/* listing card */
.partner .pc-listing { width: 252px; background: #fff; border-radius: 18px; overflow: hidden; z-index: 6; }
.partner .pc-listing__img { position: relative; height: 158px; }
.partner .pc-listing__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.partner .pc-listing__tag { position: absolute; top: 10px; left: 10px; background: #fff; font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 9999px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.partner .pc-listing__body { padding: 12px 14px 15px; }
.partner .pc-listing__row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.partner .pc-listing__title { font-size: 15px; font-weight: 600; white-space: nowrap; }
.partner .pc-listing__rate { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; flex: 0 0 auto; }
.partner .pc-listing__rate svg { width: 13px; height: 13px; }
.partner .pc-listing__sub { font-size: 13px; color: var(--fg2); margin-top: 2px; }
.partner .pc-listing__price { margin-top: 8px; font-size: 13px; color: var(--fg2); }
.partner .pc-listing__price b { font-size: 16px; font-weight: 600; color: var(--fg1); }

/* instagram */
.partner .pc-ig { width: 196px; background: #fff; border-radius: 18px; overflow: hidden; z-index: 6; }
.partner .pc-ig__head { display: flex; align-items: center; gap: 9px; padding: 9px 10px; }
.partner .pc-ig__av { width: 28px; height: 28px; border-radius: 9999px; background: linear-gradient(135deg, var(--mint-bg), var(--blue-bg)); box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px var(--border); }
.partner .pc-ig__who { display: flex; flex-direction: column; line-height: 1.2; }
.partner .pc-ig__who b { font-size: 12.5px; font-weight: 600; }
.partner .pc-ig__who span { font-size: 11px; color: var(--fg2); }
.partner .pc-ig__img { height: 150px; }
.partner .pc-ig__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.partner .pc-ig__acts { display: flex; align-items: center; gap: 14px; padding: 8px 11px 5px; }
.partner .pc-ig__acts svg { width: 18px; height: 18px; }
.partner .pc-ig__acts .pc-sp { margin-left: auto; }
.partner .pc-ig__likes { padding: 0 11px 11px; font-size: 12px; font-weight: 500; }

/* earnings */
.partner .pc-earn { width: 226px; padding: 16px 18px; background: #fff; border-radius: 16px; box-shadow: var(--elev-float); z-index: 8; }
.partner .pc-earn__lab { font-size: 12.5px; color: var(--fg2); font-weight: 500; }
.partner .pc-earn__row { display: flex; align-items: baseline; gap: 8px; margin-top: 5px; }
.partner .pc-earn__amt { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.partner .pc-earn__delta { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 600; color: #14171c; }
.partner .pc-earn__delta svg { width: 13px; height: 13px; }
.partner .pc-earn__spark { margin-top: 12px; display: flex; align-items: flex-end; gap: 4px; height: 34px; }
.partner .pc-earn__spark span { flex: 1; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 3px 3px 1px 1px; }
.partner .pc-earn__spark span.on { background: var(--primary-bg); border-color: var(--primary-bg); }

/* badges */
.partner .pc-badge { display: inline-flex; align-items: center; gap: 8px; border-radius: 9999px; font-size: 14px; font-weight: 600; white-space: nowrap; background: #fff; color: var(--fg1); padding: 11px 17px; box-shadow: var(--elev-float); z-index: 9; }
.partner .pc-badge svg { width: 16px; height: 16px; }
.partner .pc-badge--rating svg { width: 15px; height: 15px; }
.partner .pc-badge--rating span { color: var(--fg2); font-weight: 500; }

/* keep the floating shadows from being clipped by the block's rounded corners */
.partner { overflow: visible; max-width: 1440px; }

/* Contained grayish CARD (was a full-bleed band whose 24px corners hid at the page
   edges, so it didn't read as a panel). Inset 40px on BOTH sides so its left edge lines
   up with the cards' 40px gutter (max-width 1360 = the 1440 section − 2×40), then a 64px
   inner padding between the content/collage and the card border. */
@media (min-width: 1024px) {
  .partner {
    max-width: 1360px;
    margin-left: auto;   /* center at >1440 (was pinned 40px → left-hugged on wide desktop) */
    margin-right: auto;
    padding-left: 64px;
    padding-right: 64px;
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

/* The page content caps at 1440 (sections) / 1360 (partner) but had margin:0, so it
   LEFT-HUGGED on viewports wider than 1440 (empty space on the right — the grayish partner
   card looked off-center). Center the capped containers so the page sits centered on wide
   desktop. (≤1440 these compute to margin 0, so nothing changes there.) The header content
   already self-centers via the header's flex; only the footer content needs centering — its
   .footer band stays full-width. */
.section { margin-left: auto; margin-right: auto; }
.footer__inner { margin-left: auto; margin-right: auto; }

/* scale down so the collage never crowds the text column on narrower screens */
@media (max-width: 1464px) { .partner .pc-collage { zoom: 0.66; } }
@media (max-width: 900px)  { .partner .pc-collage { zoom: 0.56; } }
@media (max-width: 760px)  { .partner .pc-collage { zoom: 0.5; } }

/* ===== Spot cards (Where & when to surf) — new Claude-design backgrounds =====
   Art is swapped in page.tsx; here the title is shown as real charcoal text,
   top-left (the art keeps that corner calm). Soft white glow keeps it legible on
   the two photo-based cards (Europe, Summer). */
.spot-card { position: relative; }
.spot-card__title {
  display: block;
  position: absolute;
  top: 32px;
  left: 32px;
  right: 32px;
  z-index: 2;
  margin: 0;
  color: var(--fg1);
  font-weight: 600;          /* match the camp/lesson card titles */
  font-size: 32px;           /* same size as the other cards */
  line-height: 1.17;
  text-wrap: balance;        /* even out the two lines to ~equal width */
  text-shadow: 0 1px 12px rgba(255, 255, 255, 0.5);
}
/* Match the lessons/camps cards' hover lift exactly. Forced from this
   (cache-busted) file in case the never-bumped styles-recolor.css?v=1 is stale. */
@media (hover: hover) {
  .spot-card:hover {
    box-shadow: -4px -4px 12px rgba(0, 0, 0, 0.2), 4px 4px 12px rgba(0, 0, 0, 0.32) !important;
  }
}

/* Spot title scales down on smaller screens (it was a flat 32px that didn't shrink,
   so "Where and when to surf" cards looked broken on mobile). Insets shrink too. */
@media (max-width: 1024px) { .spot-card__title { font-size: 28px; top: 28px; left: 28px; right: 28px; } }
@media (max-width: 834px)  { .spot-card__title { font-size: 24px; top: 24px; left: 24px; right: 24px; } }
@media (max-width: 480px)  { .spot-card__title { font-size: 20px; top: 20px; left: 20px; right: 20px; } }

/* Keep "view all" from being pushed off the right edge on narrow widths — force the
   heading column to shrink/wrap so the link always fits. */
.section__titles { min-width: 0; flex-shrink: 1; }

/* Mobile: hide the carousel scroll arrows — touch users swipe, and the arrows
   overlap content / are awkward to tap. */
@media (max-width: 743px) { .scroll-btn { display: none !important; } }

/* Level (skill) dropdown: align it EXACTLY like the Who/Guests dropdown (Olya: "align
   Level the same way as Guests — strictly to the right side"). They share the same
   trigger field. Guests' geometry is responsive AND differs in the compact (scrolled)
   bar, so a preview-only script in page.tsx mirrors Guests' live computed left/right/
   width onto Skill on open. This rule is just the static fallback = Guests' base values
   (right edge anchored to the calendar's right edge). Tablet/desktop only; ≤743 already
   matches Guests via the shared full-width mobile rules. */
@media (min-width: 744px) { .dropdown--skill { right: 101px; width: 398px; } }

/* Calendar dropdown: drop the old locked 540 min-height (which left a big gap), but
   reserve a FULL 6 calendar rows so the container doesn't resize when a month has 5
   vs 6 weeks (cells are 48px ≥835, 40px below). Standard calendar behaviour. */
@media (min-width: 744px) { .dropdown--calendar { min-height: auto !important; } }
@media (min-width: 835px) { .dropdown--calendar .calendar__days { min-height: 288px; } }
@media (min-width: 744px) and (max-width: 834px) { .dropdown--calendar .calendar__days { min-height: 240px; } }
@media (min-width: 744px) {
  /* One Date: keep ~24px ABOVE the buttons (grid's 8px bottom + this 16px), and a 32px
     gap BELOW them so the bottom padding matches the ~32px above the One Date/Period
     tabs (was 40 → the bottom read as a touch heavier than the top). */
  .calendar__flex-section { padding-top: 16px !important; padding-bottom: 32px !important; }
  /* Period mode: no buttons row, so the grid sat cramped ~8px from the dropdown's
     bottom edge while the top had ~32px. Give the grid the same ~32px in Period so the
     dropdown is padded symmetrically top↔bottom in both modes. */
  .dropdown--calendar.calendar--show-tabs:has(.calendar__tabs .dropdown__tab--active[data-cal-tab="period"]) .calendar__grid-section {
    padding-bottom: 32px;
  }
}

/* Remove the section eyebrows ("surf camps" / "surf lessons" / "surf spots")
   above the headings — viewing the sections without them. Reversible. */
.section__subheading { display: none !important; }

/* "Become a partner" button: base is charcoal, but the hover was turning it blue
   (styles-recolor's #1a44e0). Hover = subtle dark grey + a soft lift/shadow. */
.btn-blue { transition: background 0.2s, box-shadow 0.2s, transform 0.2s !important; }
.btn-blue:hover {
  background: #23272E !important;
  box-shadow: 0 6px 18px rgba(20, 23, 28, 0.30) !important;
  transform: translateY(-1px);
}

/* First section: ~40px below the header was too tight; 120 (= inter-section gap)
   was a touch much under the tall sticky header, so 100 — comfortable middle. */
/* First-section gap: 100px on desktop/tablet (comfortable under the tall header),
   but small on mobile (the 100px read as a huge empty gap there). */
@media (min-width: 744px) { #camps { margin-top: 100px !important; } }
@media (max-width: 743px) { #camps { margin-top: 24px !important; } }

/* "view all" link — heavier text + a bolder arrow (Olya's pick: same → glyph). */
.link-blue .va-text { font-weight: 500; }
.link-blue .va-arrow { font-weight: 600; }

/* Footer link hover — underline on BOTH columns (Connect + Useful links), and for
   the external "Connect" links keep the arrow charcoal (was flipping to blue) and
   nudge it up-right. Underline-on-hover is the accessible, on-system choice. */
.footer__links a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.footer__links--arrows a::after { transition: transform 0.2s ease; }
.footer__links--arrows a:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.66667 9C1.46667 9 1.33333 8.93333 1.2 8.8C0.933333 8.53333 0.933333 8.13333 1.2 7.86667L7.86667 1.2C8.13333 0.933333 8.53333 0.933333 8.8 1.2C9.06667 1.46667 9.06667 1.86667 8.8 2.13333L2.13333 8.8C2 8.93333 1.86667 9 1.66667 9Z' fill='%2314171C'/%3E%3Cpath d='M8.35518 8.11073C7.96731 8.11073 7.70873 7.85215 7.70873 7.4643V2.29286H2.53708C2.14921 2.29286 1.89062 2.03429 1.89062 1.64643C1.89062 1.25857 2.14921 1 2.53708 1H8.35518C8.74306 1 9.00164 1.25857 9.00164 1.64643V7.4643C9.00164 7.85215 8.74306 8.11073 8.35518 8.11073Z' fill='%2314171C'/%3E%3C/svg%3E");
  transform: translate(3px, -3px);
}

/* Connect links: arrow hugs its word (flex-start) instead of being pushed to the
   column's right edge — keeps the ↗ attached to each link, no big gap after short
   words like "TikTok". Flip back to space-between for the aligned-column look. */
.footer__links--arrows a { justify-content: flex-start !important; gap: 6px !important; }

/* Mobile footer: move the logo from the top to BELOW the link columns + Subscribe,
   center it, and shrink it (Olya's request). `.footer__logo` + `.footer__columns` are
   the two flex children of the column-direction `.footer__content`; order:2 drops the
   logo below the columns block (whose last item is the full-width Subscribe). */
@media (max-width: 743px) {
  /* align-self:center centers the (shrink-wrapped) logo box in the column —
     text-align alone didn't, because .footer__content doesn't stretch its children. */
  .footer__logo { order: 2; align-self: center; text-align: center; margin-top: 4px; }
  .footer__logo img { width: 116px; height: auto; }
  /* Tighten the logo→copyright gap (the copyright's 75px top-padding was sized for
     when Subscribe sat last; now the logo sits there, so 75px read as too big). */
  .footer__copyright { padding-top: 24px !important; }
}

/* Tablet (768): the top-left footer logo was too big — shrink it ~20% (148→118). */
@media (min-width: 744px) and (max-width: 1127px) {
  .footer__logo img { width: 118px; height: auto; }
}

/* Tablet footer → 3-column "flexible" layout (Olya's design): col 1 = logo + the
   newsletter (title + form) stacked on the LEFT, col 2 = Connect, col 3 = Useful links
   on the RIGHT. Replaces the row-of-links + full-width-centered-newsletter. The two link
   columns are `auto` (size to content) so the long "Privacy & Cookie Policy" never wraps;
   col 1 takes the slack (1fr) so the brand+form sit left and the links group to the right. */
@media (min-width: 744px) and (max-width: 834px) {
  .footer__content {
    /* col1 = brand + newsletter, 246px so the title wraps to two balanced lines
       ("Subscribe to our newsletter &" / "get the best deals in your inbox").
       space-between gives EQUAL gaps between the 3 columns; Useful stays on the right. */
    grid-template-columns: 246px auto auto;
    grid-template-rows: auto auto;
    justify-content: space-between;
    column-gap: 0;
    row-gap: 28px;
    align-items: start;
  }
  .footer__logo { grid-column: 1; grid-row: 1; align-self: start; }
  .footer__col--newsletter {
    grid-column: 1; grid-row: 2;
    align-items: flex-start; text-align: left;
    margin-top: 8px; width: auto;
  }
  .footer__columns .footer__col:nth-child(1) { grid-column: 2; grid-row: 1 / span 2; } /* Connect */
  .footer__columns .footer__col:nth-child(2) { grid-column: 3; grid-row: 1 / span 2; } /* Useful links */
  .footer__form { align-items: stretch; width: 100%; max-width: 246px; }
  .footer__input, .footer__subscribe { width: 100%; }
}

/* Wide tablet (835–1127): too wide for the stacked 3-col, but the desktop newsletter-width
   rule (≥1128) doesn't apply yet — so the footer fell back to a cramped 4-across with a
   1-line title (logo touching Connect). Make it a clean, evenly-spaced 4-column row
   (logo | Connect | Useful | Subscribe), and cap the newsletter so the title wraps to 2
   lines. display:contents flattens .footer__columns so its 3 cols join the logo as the
   4 flex items of .footer__content. */
@media (min-width: 835px) and (max-width: 1127px) {
  .footer__content {
    display: flex; flex-direction: row;
    justify-content: space-between; align-items: flex-start;
    column-gap: 24px; row-gap: 0;
  }
  .footer__columns { display: contents; }
  .footer__logo { align-self: flex-start; }
  .footer__col--newsletter { width: auto; max-width: 300px; align-items: flex-start; text-align: left; margin-top: 0; }
  .footer__form { align-items: stretch; width: 100%; max-width: 300px; }
  .footer__input, .footer__subscribe { width: 100%; }
}

/* ============================================================================
   FOOTER — redesigned 2026-06-18 from Olya's Claude-Designer mock. One grid +
   one gap (= even columns); grid-template-areas reflow the four zones per
   breakpoint. Replaces the old hand-tuned per-breakpoint footer — those rules
   target .footer__content / .footer__columns / .footer__logo / .footer__col--*,
   none of which the new markup has, so they're inert.
   Zones: brand (logo+tagline+socials) · explore · company · news.
   ============================================================================ */
.footer__top {
  display: grid;
  grid-template-columns: 1.5fr auto auto 1.3fr;
  grid-template-areas: "brand explore company news";
  gap: 48px;
  align-items: start;
}
.footer__brand        { grid-area: brand; }
.footer__col--explore { grid-area: explore; }
.footer__col--company { grid-area: company; }
.footer__news         { grid-area: news; display: flex; flex-direction: column; gap: 14px; }

.footer__brand-logo { display: inline-block; }
.footer__brand-logo img { width: 95px; height: auto; display: block; }
.footer__tagline {
  margin: 16px 0 20px;
  font-size: 14px;
  color: #5f636b;
  line-height: 1.5;
  max-width: 260px;
}
.footer__socials { display: flex; gap: 10px; }
.footer__social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid rgba(20, 23, 28, 0.12); color: #14171c;
  transition: background .15s, border-color .15s;
}
.footer__social:hover { background: rgba(20, 23, 28, 0.05); border-color: rgba(20, 23, 28, 0.22); }
.footer__social svg { width: 18px; height: 18px; display: block; }

/* Every footer link stays on ONE line (Olya: no two-line "Become a Partner"). */
.footer__links a, .footer__legal a { white-space: nowrap; }

/* Newsletter fills its column (override the base fixed 320px width). */
.footer__news .footer__form,
.footer__news .footer__input,
.footer__news .footer__subscribe { width: 100%; }

.footer__divider { height: 1px; background: rgba(20, 23, 28, 0.10); margin-top: 40px; }

.footer__bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; padding: 20px 0 24px;
}
.footer__bottom .footer__copyright { text-align: left; padding: 0; margin: 0; }
.footer__legal { display: flex; gap: 32px; }
.footer__legal a { font-size: 13px; color: #5f636b; transition: color .15s; }
.footer__legal a:hover { color: #14171c; }

/* Tablet: Explore | Company on top, brand | newsletter below. */
@media (max-width: 949px) {
  .footer__top {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "explore company"
      "brand   news";
    gap: 40px 48px;
  }
}

/* Mobile: stack — Explore, Company, newsletter, brand. */
@media (max-width: 743px) {
  .footer__top {
    grid-template-columns: 1fr;
    grid-template-areas:
      "explore"
      "company"
      "news"
      "brand";
    gap: 32px;
  }
  .footer__bottom { padding: 16px 0 20px; }
}