/* Strony /rejsy i /szkolenia wg Figmy (eksport 22.10): strona startowa i lista wyników z filtrami.
   Wymiary z makiet 1440 px (strona startowa rejsów w eksporcie 1307 px, przeliczona ×1,102). */

/* ---------- Wyszukiwarka „Gdzie? / Kiedy? / Z kim?” ---------- */
/* Pola, listy i kalendarz jak w zakładkach Rejs / Szkolenie na stronie głównej (csearch, css/charter-search.css);
   .cfind to tylko biała ramka paska na zdjęciu (strona startowa) i miejsce paska nad wynikami. */
.cfind { display: flex; align-items: center; gap: 0; }
.cfind > .csearch { flex: 1; min-width: 0; }
.cfind__submit { flex: none; padding: 0 28px; }
/* Listy i kalendarz paska na zdjęciu nie są przycinane (dzieci .cl-hero to tło i ramka, nic więcej nie wystaje). */
.cl-hero { overflow: visible; }
/* Telefon: kalendarz „Kiedy?” na cały ekran przykrywa też nagłówek strony (pasek nad wynikami ma własny kontekst warstw). */
@media (max-width: 767px) {
    .drp-open .cl-bar { z-index: 1000; }
}

/* ---------- Strona startowa: nagłówek ze zdjęciem ---------- */
.cl-hero { min-height: 870px; padding: 0 max(var(--gutter), calc((100% - 1160px) / 2)) 25px; justify-content: flex-end; }
.cl-hero__frame { inset: 127px max(var(--gutter), calc((100% - 1280px) / 2)) 113px; }
.cl-hero__inner { gap: 0; }
.cl-hero .cl-hero__title { margin: 0 0 150px; max-width: none; line-height: 1.17; }
/* Niski ekran: nagłówek nie wyższy niż okno, pasek wyszukiwarki widoczny bez przewijania (Wojtek 20.10.2026). */
@media (min-width: 768px) {
    /* Jak strona główna: zdjęcie do dolnej krawędzi okna, pasek 64 px nad nią, ramka schowana dołem pod paskiem (Wojtek 21.10.2026). */
    .cl-hero { min-height: max(560px, calc(100svh - var(--nav-h, 80px))); padding: 0 var(--hb-side) 24px; }
    .cl-hero__frame { inset: 64px calc(var(--hb-side) + 24px) 113px; }
    .cl-hero .cl-hero__title { margin-left: 64px; margin-bottom: max(32px, calc((100svh - 597px) / 2)); }
}
.cl-napis { display: inline-block; line-height: 0; }
.cl-napis img { display: block; max-width: 100%; height: auto; }
.cl-hero__title .cl-napis { margin: -2px 0 -14px -6px; }
.cl-napis--problem { display: block; margin-top: 28px; }
.cfind--hero { width: 100%; min-height: 99px; padding: 10px 22px; border-radius: 50px; background: var(--white); color: var(--navy-600); box-shadow: 0 4px 24px rgba(15, 18, 45, .12); }
.cl-hero__all { align-self: flex-end; display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 4px 0; font-size: var(--fs-body-3); font-weight: 700; color: var(--white); text-decoration: none; }
.cl-hero__all:hover { color: var(--white); text-decoration: underline; }
.cl-hero__all img { width: 16px; height: 16px; }

/* ---------- Strona startowa: sekcje ---------- */
.cruises-landing .area-grid { grid-auto-rows: 210px; }
.cruises-landing .section[aria-labelledby="akweny"] { padding: 135px 0 88px; }
.cruises-landing .help-line a { color: var(--navy-600); text-decoration: none; }
.cruises-landing .help-line a[href*="kontakt"] { color: var(--primary-500); }
.cruises-landing .help-line a:hover { text-decoration: underline; }
.cruises-landing .included { gap: 12px; }
.cruises-landing .cl-courses { padding: 135px 0 0; }
.cl-courses__head { max-width: 760px; gap: 20px; margin-bottom: 100px; }
.cl-courses__head p { font-size: 18px; line-height: 1.5; }
.cl-courses__grid { grid-template-columns: repeat(auto-fit, minmax(0, 296px)); justify-content: center; }
.cl-courses__head .btn { margin-top: 4px; }
.cl-courses__image { background: #dcdcdc; }
.cl-courses .offer-card__title { font-size: 22px; font-weight: 500; }
.cl-courses .offer-card .link-more { color: var(--primary-500); }
.cl-courses .offer-card:hover { background: #6dcbeb; border-color: #6dcbeb; box-shadow: none; }
.cl-courses .offer-card:hover .offer-card__title, .cl-courses .offer-card:hover .offer-card__text, .cl-courses .offer-card:hover .link-more { color: var(--white); }
.cl-todo { font-style: italic; }
.cl-help { padding-top: 60px; }
.cruises-landing .section[aria-labelledby="grupa"], .cruises-landing .section[aria-labelledby="bez-patentu"] { padding-top: 20px; }
.cl-help .help-line { margin: 0 0 var(--space-8); }
.cl-narrow { width: 100%; max-width: calc(1200px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

.cl-featured { padding: 30px 0 var(--space-6); }
.cl-featured__title { margin: 0 0 var(--space-6); font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.01em; line-height: 1.1; color: var(--navy-600); }
.cl-featured .results { gap: var(--space-4); }
.cl-featured__more { margin: var(--space-7) 0 0; text-align: center; }
.cl-featured__more a { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-body-3); font-weight: 700; color: var(--navy-600); text-decoration: none; }
.cl-featured__more a:hover { text-decoration: underline; }

.cl-captains { padding: 190px 0 140px; }
.cl-captains__grid { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 76px; align-items: start; }
.cl-captains__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.cl-captains__intro .pill { margin-bottom: 20px; }
.cl-captains__title { margin: 0 0 32px; font-size: var(--fs-h1); font-weight: 500; line-height: 1; }
.cl-captains__intro p { margin: 0 0 28px; font-size: var(--fs-body-1); line-height: 1.4; }
.cl-captains__people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px 48px; margin: 0; padding: 0; list-style: none; }
.cl-captain[hidden] { display: none; }
.cl-captain__photo { display: block; width: 80px; height: 80px; margin-bottom: 24px; border-radius: var(--radius-full); object-fit: cover; background: var(--gray-50); }
.cl-captain__photo--initial { display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 600; color: var(--primary-700); background: var(--primary-100); }
.cl-captain__name { margin: 0 0 18px; font-size: var(--fs-h5); font-weight: 700; line-height: 1.2; }
.cl-captain__bio { margin: 0; font-size: var(--fs-body-2); line-height: 1.4; color: var(--gray-500); }
.cl-arrows { display: flex; gap: 16px; margin-top: 64px; }
.cl-arrow { display: inline-flex; align-items: center; justify-content: center; width: 66px; height: 40px; padding: 0; border: 1px solid var(--primary-500); border-radius: var(--radius-full); background: var(--primary-100); cursor: pointer; }
.cl-arrow img { transform: rotate(180deg); }
.cl-arrow--next img { transform: none; }
.cl-arrow:disabled { opacity: .45; cursor: default; }
.cl-arrow:not(:disabled):hover { background: var(--white); }

/* ---------- Lista wyników ---------- */
.cl-page { padding-bottom: var(--space-9); background: var(--bg-page); }
.cl-bar { position: relative; z-index: 2; background: var(--white); border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: 0 4px 24px rgba(31, 41, 103, .06); }
.cl-bar__inner { max-width: 1440px; margin: 0 auto; padding: 22px 56px 26px; }
.cl-bar__title { margin: 0 0 22px; font-size: var(--fs-h4); font-weight: 500; line-height: 1.3; }
.js .cfind__submit--nojs { display: none; }

.cl-wide { max-width: 1440px; margin: 0 auto; padding: 0 56px 0 40px; }
.cl-grid { display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: 56px; align-items: start; }
.cl-results .cl-grid { padding-top: 28px; }

.cl-filters { display: flex; flex-direction: column; gap: 16px; }
.cl-filters__box { display: flex; flex-direction: column; }
.cl-filters__toggle { display: none; }
.cl-filters__clear { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 14px; border-bottom: 2px solid var(--gray-50); font-size: var(--fs-body-3); font-weight: 700; color: var(--gray-500); text-decoration: none; }
.cl-filters__clear:hover { color: var(--navy-600); }
.cl-filters__clear img { width: 18px; height: 18px; }
.cl-filter { margin: 0; padding: 14px 0 16px; border: 0; border-bottom: 2px solid var(--gray-50); min-width: 0; }
.cl-filter:last-child { border-bottom: 0; padding-bottom: 0; }
.cl-filter__label { display: block; float: left; width: 100%; margin: 0 0 14px; padding: 0; font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--navy-600); }
.cl-filter__label + * { clear: both; }
.cl-range { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); align-items: end; }
.cl-range__field { display: flex; flex-direction: column; gap: 8px; }
.cl-range__cap { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--navy-600); }
.cl-range__dash { align-self: end; width: 8px; height: 1px; margin: 0 auto 15px; background: var(--gray-150); }
.cl-unit { display: flex; align-items: center; height: 30px; padding: 0 8px; border: 1px solid var(--gray-150); border-radius: var(--radius-full); background: var(--white); }
.cl-unit:focus-within { border-color: var(--primary-500); }
.cl-unit__input { flex: 1; min-width: 0; width: 100%; padding: 0; border: 0; background: transparent; font: inherit; font-size: var(--fs-body-3); color: var(--navy-600); -moz-appearance: textfield; }
.cl-unit__input:focus { outline: 0; }
.cl-unit__input::placeholder, .cl-seats__num::placeholder { color: var(--gray-500); opacity: 1; }
.cl-unit__suffix { font-size: var(--fs-body-3); color: var(--gray-500); }
.cl-unit__input::-webkit-inner-spin-button, .cl-seats__num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cl-seats { display: grid; grid-template-columns: 60px minmax(0, 1fr) 60px; align-items: center; gap: 8px; }
.cl-seats__num { width: 100%; height: 30px; padding: 0 4px; border: 1px solid var(--gray-150); border-radius: var(--radius-full); background: var(--white); font: inherit; font-size: var(--fs-body-3); text-align: center; color: var(--navy-600); -moz-appearance: textfield; }
.cl-seats__num:focus { outline: 0; border-color: var(--primary-500); }
.cl-slider { position: relative; height: 18px; }
.cl-slider__track { position: absolute; left: 0; right: 0; top: 7px; height: 4px; border-radius: 2px; background: var(--gray-50); }
.cl-slider__fill { position: absolute; top: 0; bottom: 0; left: var(--from, 0%); right: calc(100% - var(--to, 100%)); border-radius: 2px; background: var(--primary-500); }
.cl-slider input { position: absolute; inset: 0; width: 100%; height: 18px; margin: 0; background: none; appearance: none; -webkit-appearance: none; pointer-events: none; }
.cl-slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border: 2px solid var(--primary-500); border-radius: 50%; background: var(--white); pointer-events: auto; cursor: pointer; }
.cl-slider input::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid var(--primary-500); border-radius: 50%; background: var(--white); pointer-events: auto; cursor: pointer; }
.cl-slider input::-moz-range-track { background: none; }
.cl-slider { visibility: hidden; }
.js .cl-slider { visibility: visible; }
.cl-select.select { min-height: 40px; padding: 8px 40px 8px 12px; border-radius: var(--radius-full); font-size: var(--fs-body-2); color: var(--gray-500); }

.cl-promo { padding: 24px; }
.cl-promo .promo__title { font-size: var(--fs-body-2); line-height: 1.4; }
.cl-promo .small { line-height: 1.45; }
.cl-promo.promo--dark { gap: 12px; }
.cl-promo.promo--dark .btn { margin-top: 0; }
.cl-promo--light { background: linear-gradient(160deg, #e1f7fb, var(--primary-100) 70%); }
.cl-promo--light a:not(.promo__contact) { color: var(--primary-500); text-decoration: none; }
.cl-promo .promo__contact { font-size: var(--fs-body-2); }

.cl-list .results__head { margin-bottom: 16px; }
.cl-list .results__count { font-size: 28px; font-weight: 500; }
.cl-list .results__sort { width: 300px; font-size: var(--fs-body-3); }
.cl-list .results__sort .select { min-height: 48px; border-radius: var(--radius-full); color: var(--gray-500); }
.cl-list.results { gap: 24px; }

/* Karta terminu wg Figmy (lista i polecane): tytuł 24 px, nazwa jachtu pod tytułem, kolumna z ceną 260 px */
.cl-list .event-card, .cl-featured .event-card { min-height: 231px; border-color: var(--gray-50); }
.cl-list .event-card__title, .cl-featured .event-card__title { font-weight: 500; }
.cl-list .event-card__main, .cl-featured .event-card__main { gap: 20px; padding: 24px 12px 24px 32px; }
.cl-list .event-card__badge, .cl-featured .event-card__badge { left: 16px; bottom: 16px; padding: 3px 12px; background: rgba(255, 255, 255, .92); color: var(--gray-500); }
.cl-list .event-card__side, .cl-featured .event-card__side { padding: 24px; gap: 8px; }

.cl-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 24px 40px; border: 1px solid var(--gray-50); border-radius: var(--radius-lg); background: var(--white); text-align: center; }
.cl-empty__title { margin: 0; font-size: var(--fs-h5); font-weight: 700; }
.cl-empty p { margin: 0; font-size: var(--fs-body-3); line-height: 1.45; color: var(--gray-500); }
.cl-empty a { font-weight: 700; color: var(--gray-500); text-decoration: none; }

.cl-help-box { display: flex; flex-direction: column; gap: 24px; margin-top: 8px; padding: 32px 40px; border-radius: var(--radius-lg); background: linear-gradient(100deg, #e7f8fb 0, var(--primary-100) 60%, #f3fbfd 100%); }
.cl-help-box__top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 40px; }
.cl-help-box__lead { flex: 1 1 420px; max-width: 560px; margin: 0; font-size: var(--fs-body-2); line-height: 1.4; }
.cl-help-box__contact { display: flex; flex-wrap: wrap; gap: 16px 40px; margin: 0; }
.cl-help-box__contact a { display: inline-flex; align-items: center; gap: 16px; font-size: var(--fs-body-2); font-weight: 700; color: var(--navy-600); text-decoration: none; }
.cl-help-box__contact a:hover { text-decoration: underline; }
.cl-help-box__icon { display: inline-flex; padding: 5px; border-radius: var(--radius-full); background: var(--white); }
.cl-help-box__form { display: flex; flex-direction: column; gap: 12px; }
.cl-help-box__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 8px; }
.cl-help-box__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cl-help-box__field label { font-size: var(--fs-body-3); font-weight: 700; }
.cl-help-box__field label span { font-weight: 400; color: var(--gray-500); }
.cl-help-box__field .input { height: 48px; border-radius: var(--radius-full); }
.cl-help-box__submit { min-width: 140px; }
.cl-help-box__consent { font-size: var(--fs-small); }
.cl-help-box .alert { margin: 0; padding: 12px 16px; border-radius: var(--radius-md); font-size: var(--fs-body-3); font-weight: 700; }
.cl-help-box .alert--ok { background: var(--success-100); color: #04704f; }
.cl-help-box .alert--error { background: #fdecec; color: var(--danger); }

/* ---------- Węższe ekrany ---------- */
@media (max-width: 1199px) {
    .cl-wide { padding: 0 var(--gutter); }
    .cl-bar__inner { padding: 22px var(--gutter) 24px; }
    .cl-grid { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; }
    .cl-captains__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    .cl-courses__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cruises-landing .cl-courses { padding-top: var(--space-9); }
    .cl-help-box__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cl-list .event-card__main, .cl-featured .event-card__main { padding: 24px; }
}

@media (max-width: 899px) {
    .cl-hero .cl-hero__title { margin-bottom: max(32px, calc((100svh - 640px) / 2)); }
    .cfind--hero, .cfind--bar { flex-direction: column; align-items: stretch; }
    .cfind--hero { padding: 8px 20px 12px; border-radius: var(--radius-lg); }
    .cfind--hero .cfind__submit { width: 100%; }
    .cl-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .cl-filters__toggle { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 var(--space-4); border-radius: var(--radius-full); background: var(--white); border: 1px solid var(--gray-150); font-weight: 700; cursor: pointer; list-style: none; }
    .cl-filters__toggle::-webkit-details-marker { display: none; }
    .cl-filters__toggle::after { content: ""; width: 20px; height: 20px; background: url("../img/ikona-rozwin.svg") center / 20px no-repeat; }
    .cl-filters__box[open] .cl-filters__toggle { margin-bottom: 16px; }
    .cl-filters .cl-promo { display: none; }
}

@media (max-width: 767px) {
    .cl-hero { min-height: 600px; padding-top: 64px; padding-bottom: 32px; }
    .cl-hero__frame { inset: 40px var(--gutter) 150px; border-radius: 28px; }
    .cl-hero .cl-hero__title { margin: 0 0 48px 20px; font-size: 44px; }
    .cl-hero__title .cl-napis { max-width: 100%; margin: 2px 0 -6px -4px; }
    .cl-hero__title .cl-napis img { width: 280px; }
    .cl-napis--problem img { width: 260px; }
    .cl-hero__all { align-self: center; }
    .cruises-landing .area-grid { grid-auto-rows: 176px; }
    .cl-featured { padding: var(--space-7) 0 var(--space-5); }
    .cl-featured__title { font-size: var(--fs-h3); margin-bottom: var(--space-4); }
    .cl-captains { padding: var(--space-7) 0 var(--space-8); }
    .cl-captains__title { font-size: 40px; }
    .cl-captains__intro p { font-size: var(--fs-body-2); }
    .cl-captains__people { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .cl-courses__grid { grid-template-columns: minmax(0, 1fr); }
    .cl-courses__head { margin-bottom: var(--space-6); }
    .cl-courses__head p { font-size: var(--fs-body-2); }
    .cruises-landing .section[aria-labelledby="akweny"] { padding: var(--space-8) 0 var(--space-7); }
    .cl-captain__photo { margin-bottom: 16px; }
    .cl-captain__name { margin-bottom: 8px; }
    .cl-arrows { margin-top: 40px; }
    .cl-bar__title { font-size: var(--fs-h5); margin-bottom: 16px; }
    .cl-list .results__count { font-size: var(--fs-h5); }
    .cl-list .results__sort { width: 100%; }
    .cl-help-box { padding: 24px 20px; }
    .cl-help-box__fields { grid-template-columns: minmax(0, 1fr); }
    .cl-help-box__submit { width: 100%; }
}

.cl-help-box .hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }