/* ==========================================================================
   GŁODNI KULTURY – styl główny
   Kolory: orange #F27B35 | cyan #00E8FC | cyan-light #66F1FD | grey #F8F8F8
   Czcionki: Sora (800/700/600/400/300) | Montserrat (700/600/500/400/300)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ZMIENNE
   -------------------------------------------------------------------------- */
:root {
    --orange:        #F27B35;
    --orange-light:  #F5955D;  /* hover orange, wg Figma Component 110 */
    --orange-dark:   #c2622a;
    --cyan:          #00E8FC;
    --cyan-light:    #66F1FD;
    --black:         #000000;
    --grey-text:     #848484;
    --grey-bg:       #F8F8F8;
    --white:         #FFFFFF;

    --font-sora:        'Sora', sans-serif;
    --font-montserrat:  'Montserrat', sans-serif;

    --header-h:     80px;
    --content-w:    1284px;
    --page-pad:     78px;

    --radius-pill:  100px;
    --radius-card:  24px;
    --shadow-card:  0px 4px 50px 0px rgba(0, 0, 0, 0.07);
    --shadow-header: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-montserrat);
    font-size: 16px;
    color: var(--black);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    color: inherit;
}

ul, ol {
    list-style: none;
}

button {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

/* --------------------------------------------------------------------------
   3. KONTENER
   -------------------------------------------------------------------------- */
.container-gk {
    width: 100%;
    max-width: calc(var(--content-w) + var(--page-pad) * 2);
    padding-left: var(--page-pad);
    padding-right: var(--page-pad);
    margin-left: auto;
    margin-right: auto;
}

/* --------------------------------------------------------------------------
   4. HEADER
   -------------------------------------------------------------------------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--white);
    box-shadow: var(--shadow-header);
    height: var(--header-h);
}

.header-inner {
    max-width: calc(var(--content-w) + var(--page-pad) * 2);
    margin: 0 auto;
    padding: 0 var(--page-pad);
    height: var(--header-h);
    display: flex;
    align-items: center;
    gap: 0;
}

.site-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.site-logo img {
    height: 47px;
    width: auto;
}

.main-nav {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 36px;
}

.nav-list {
    display: flex;
    align-items: center;
    /* Gap 0 — każdy .nav-link ma własny padding 20px po bokach (rezerwuje
       miejsce dla aktywnego pilla), więc spacing wynika z padding sąsiednich linków. */
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Każda pozycja menu ma STAŁE miejsce — padding (jak active) + ::after z bolded
   placeholderem rezerwuje szerokość font-weight 700. Kliknięcie aktywnej pozycji
   nie zmienia jej rozmiaru → sąsiedzi nie skaczą. */
.nav-link {
    font-family: var(--font-sora);
    font-weight: 300;
    font-size: 14px;
    color: var(--black);
    white-space: nowrap;
    transition: color 0.2s;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
}

.nav-link:hover {
    color: var(--orange);
}

/* Bolded placeholder — height: 0 (out of visual flow w column flex),
   ale intrinsic width = max(active text width). Content per pozycja przez nth-child
   (bez modyfikacji HTML — żadnych data-attrs). */
.nav-list .nav-link::after {
    font-weight: 700;
    height: 0;
    visibility: hidden;
    overflow: hidden;
}
.nav-list li:nth-child(1) .nav-link::after {
    content: 'Mecenasi kultury';
}
.nav-list li:nth-child(2) .nav-link::after {
    content: 'Wydarzenia';
}
.nav-list li:nth-child(3) .nav-link::after {
    content: 'Miejsca kultury';
}
.nav-list li:nth-child(4) .nav-link::after {
    content: 'Miejsca smaku';
}

/* Aktywna strona — cyan pill (padding + display dziedziczone z .nav-link) */
.nav-link--active,
.nav-link--active:hover {
    background: var(--cyan);
    border-radius: var(--radius-pill);
    font-weight: 700;
    color: var(--white);
}

.header-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: 16px;
}

.header-avatar {
    display: flex;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    margin-left: auto;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--orange);
    border-radius: 2px;
    transition: all 0.3s;
}

.nav-toggle.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-toggle.is-open span:nth-child(2) {
    opacity: 0;
}
.nav-toggle.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav – rozwinięte menu (wg Figma: header_home, 375×402) */
.mobile-nav {
    position: relative;
    background: var(--white);
    padding: 28px 24px 40px;
    /* Shadow skierowany tylko w DÓŁ — negative spread anuluje rozlewanie w górę,
       żeby cień nie wchodził w obszar .site-header (powodował szary nalot wokół logo + X). */
    box-shadow: 0px 30px 50px -20px rgba(0, 0, 0, 0.07);
}

/* Gdy menu otwarte: ukryj cień headera (menu ma własny) */
.site-header.menu-open {
    box-shadow: none;
}

/* Koszyk + avatar — prawy górny róg mobilnego menu */
.mobile-nav-actions {
    position: absolute;
    top: 12px;
    right: 25px;
    display: flex;
    gap: 16px;
    align-items: center;
}

.mobile-nav-actions .header-avatar {
    display: block;
}

.mobile-nav-list {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.mobile-nav-list a {
    font-family: var(--font-sora);
    font-size: 14px;
    font-weight: 300;
    color: var(--black);
    text-decoration: none;
}

/* Aktywna strona w mobile-nav — cyan pill, mniejszy niż desktop.
   margin-left: -14px kompensuje padding-left, dzięki czemu tekst aktywnej
   pozycji wyrównuje się z tekstem nieaktywnych linków (nie skacze w prawo). */
.mobile-nav-list a.nav-link--active {
    display: inline-flex;
    align-self: flex-start;
    padding: 6px 14px;
    margin-left: -14px;
    background: var(--cyan);
    border-radius: var(--radius-pill);
    font-weight: 700;
    color: var(--white);
}

/* --------------------------------------------------------------------------
   5. HERO
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    height: 780px; /* 80px header + 700px hero */
    padding-top: var(--header-h);
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

/* Bg-img clipping: zamiast overflow:hidden na hero (które obcinałoby dropdowny wystające poza hero),
   ograniczamy clipping tylko do tła. Dropdowny mogą rozlewać się poniżej hero. */
.hero-bg {
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-bg-img,
.hero-bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.25) 0%,
        rgba(0, 0, 0, 0.45) 60%,
        rgba(0, 0, 0, 0.55) 100%
        );
}

/* Pozycja contentu w hero wg Figma d-01-home (Frame 12183 / Group 468):
   KRAKÓW top y=230 od początku hero (po headerze 80px) → padding-top 230 + flex-start na .hero.
   Spacing: KRAKÓW→subtitle 30, subtitle→search 32 (margins na subtitle/search). */
.hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: calc(var(--content-w) + var(--page-pad) * 2);
    padding: 0 var(--page-pad);
    padding-top: 230px;
}

/* Hero KRAKÓW + chevron — flex z gap 36px wg Figma Group 457.
   Chevron jako siostra flex (nie absolute) — naturalne wyrównanie pionowe przez align-items: center. */
.hero-city {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 36px;
}

.hero-city-name {
    font-family: var(--font-sora);
    font-weight: 800;
    font-size: 64px;
    /* line-height: normal (≈1.2 dla Sora) wg Figma `leading-[normal]`.
       Z line-height:1 line-box równa fontowi → litery offsetowane w dół, flex źle centruje chevron.
       Z normal line-box ~77px → litery centrują się symetrycznie → flex chevron = wizualny środek. */
    line-height: normal;
    color: var(--white);
    letter-spacing: 0;
}

/* Chevron 34×34 — z Figmy ikona to chevron-right, obracamy 90° w dół.
   translateY(-4px) — drobna korekta optyczna (Sora ExtraBold ma asymetryczny offset metryczny). */
.btn-city-change {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    transform: translateY(-4px) rotate(90deg);
    transition: transform 0.3s;
}

.btn-city-change:hover {
    transform: translateY(-4px) rotate(270deg);
}

.hero-subtitle {
    font-family: var(--font-sora);
    font-weight: 600;
    font-size: 30px;
    color: var(--white);
    text-align: center;
    line-height: normal; /* Figma 2335:12192 — text height 38 = font 30 × 1.27 (Sora normal) */
    margin-top: 22px; /* +8px margin-bottom heroCityName = 30px wizualny gap KRAKÓW→subtitle (Figma) */
    margin-bottom: 0;
}

/* Pasek wyszukiwania */
.hero-search {
    position: relative;
    margin-top: 32px; /* gap subtitle→search wg Figma */
    width: 100%;
    display: flex;
    justify-content: center;
}

.search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.search-pill {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 64px;
    padding: 15px 30px;
    background: var(--white);
    border-radius: var(--radius-pill);
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 16px;
    color: var(--black);
    white-space: nowrap;
    transition: box-shadow 0.2s;
    cursor: pointer;
    border: none;
}

/* Stałe szerokości pillów (nie zmieniają się od zawartości) — Figma Frame 12193. */
.search-pill[data-dropdown="miasto"]  {
    width: 180px;
}
.search-pill[data-dropdown="typ"]     {
    width: 200px;
}
.search-pill[data-dropdown="data"]    {
    width: 140px;
}
.search-pill[data-dropdown="godzina"] {
    width: 140px;
}
.search-pill[data-dropdown="osoby"]   {
    width: 160px;
}

.search-pill:hover {
    box-shadow: 0 2px 16px rgba(0,0,0,0.12);
}

.search-pill img {
    flex-shrink: 0;
}

.search-pill--input {
    cursor: default;
    padding: 15px 30px;
    width: 188px;
}

.search-pill--input input {
    border: none;
    outline: none;
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 16px;
    color: var(--grey-text);
    width: 128px;
    background: transparent;
}

.search-pill--input input::placeholder {
    color: var(--grey-text);
}

/* Component 113 z Figmy. Hover = Component 110: bg na orange-light + gap 24→28px. */
.btn-search {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    height: 64px;
    padding: 15px 20px;
    background: var(--orange);
    border-radius: var(--radius-pill);
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 16px;
    color: var(--white);
    white-space: nowrap;
    transition: background 0.2s ease, gap 0.2s ease;
}

.btn-search:hover {
    background: var(--orange-light);
    gap: 28px;
}

.btn-search img {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}

/* Dropdown wyszukiwarki */
.search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--white);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 8px 0;
    min-width: 188px;
    z-index: 100;
}

.dropdown-option {
    display: block;
    width: calc(100% - 16px);
    margin: 0 8px;
    padding: 14px 22px;
    text-align: left;
    border-radius: var(--radius-pill);
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 16px;
    color: var(--black);
    transition: background 0.15s;
}

.dropdown-option:hover {
    background: var(--grey-bg);
}

/* ----------- Dropdown wariant: kalendarz (Frame 699 — 327×325) ------------ */
.search-dropdown--calendar {
    padding: 30px;
    width: 327px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Header kalendarza: < Miesiąc Rok > — pojedynczy stepper, prev/next zmienia miesiąc
   (auto-rollover roku przy granicy gru/sty). */
.cal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.cal-pick-label {
    flex: 1;
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 16px;
    color: var(--black);
    text-align: center;
    white-space: nowrap;
}

.cal-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s;
}

.cal-arrow:hover {
    background: var(--grey-bg);
}
.cal-arrow img {
    width: 20px;
    height: 20px;
}

/* arrow-left.svg / arrow-right.svg mają identyczne path (oba pointing right!).
   Prev buttons obracamy 180° żeby chevron pokazywał się w lewo. */
.cal-arrow[data-cal-action="prev-month"] img,
.cal-arrow[data-cal-action="prev-year"] img {
    transform: rotate(180deg);
}

/* Wszystkie reguły kalendarza w dropdownie wyszukiwarki — scoped pod .search-dropdown--calendar
   żeby nie konfliktowały z events-calendar (sekcja 7b WYDARZENIA), gdzie .cal-day to FLEX COLUMN
   karta dnia z wieloma eventami (zupełnie inne layout/styl niż okrągły button dnia w datepicker'ze). */
.search-dropdown--calendar .cal-day-headers,
.search-dropdown--calendar .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    text-align: center;
}

.search-dropdown--calendar .cal-day-headers {
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 14px;
    color: var(--grey-text);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--grey-bg);
}

.search-dropdown--calendar .cal-day {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 50%;
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 14px;
    color: var(--black);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.search-dropdown--calendar .cal-day:hover:not(:disabled) {
    background: var(--grey-bg);
}

.search-dropdown--calendar .cal-day--other {
    opacity: 0.4;
    pointer-events: none;
}

.search-dropdown--calendar .cal-day--selected {
    background: var(--orange);
    color: var(--white);
}

.search-dropdown--calendar .cal-day--selected:hover {
    background: var(--orange);
}

/* ----------- Dropdown wariant: stepper godziny / liczby osób (− N +) ------
   Grid 32px 1fr 32px — buttony zawsze na kolumnach 1/3 niezależnie od długości tekstu wartości
   (flex layout dawał dryft ±4px przy zmianie "9 osób" → "10 osób"). */
.search-dropdown--stepper {
    display: grid;
    grid-template-columns: 32px 1fr 32px;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    width: 220px;
    height: 64px;
}

.step-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background: var(--grey-bg);
    border: none;
    border-radius: 50%;
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 18px;
    color: var(--black);
    cursor: pointer;
    transition: background 0.15s;
}

.step-btn:hover:not(:disabled) {
    background: var(--orange);
    color: var(--white);
}
.step-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.step-value {
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 16px;
    color: var(--black);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
}

/* --------------------------------------------------------------------------
   6. SEKCJE – WSPÓLNE
   -------------------------------------------------------------------------- */
.section {
    padding: 80px 0;
}

.section-header {
    margin-bottom: 40px;
}

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    font-family: var(--font-montserrat);
    font-weight: 400;
    font-size: 16px;
    color: var(--black);
    text-transform: uppercase;
    letter-spacing: 2.4px;
}

.section-label img {
    flex-shrink: 0;
    display: block;
}

.section-title {
    font-family: var(--font-sora);
    font-weight: 600;
    font-size: 40px;
    line-height: 1.1;
    color: var(--black);
}

.section-btn-wrap {
    display: flex;
    justify-content: center;
    margin-top: 48px;
}

/* Przycisk pomarańczowy (globalny). Animacja hover wg Figma Component 109→110:
   bg orange→orange-light + gap 24→28px (ikona przesuwa się 4px w prawo). */
.btn-orange {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    padding: 15px 20px;
    background: var(--orange);
    border-radius: var(--radius-pill);
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 16px;
    color: var(--white);
    transition: background 0.2s ease, gap 0.2s ease;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.btn-orange:hover {
    background: var(--orange-light);
    color: var(--white);
    gap: 28px;
}

.btn-orange img {
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   7. SEKCJA: WYDARZENIA — split na 4 podsekcje:
      7a. controls (filtry + month picker + view-toggle + divider)
      7b. widok kalendarz (Frame 912)
      7c. widok grid / kafle (Frame 679)
      7d. widok list / poziome (Component 114)
   -------------------------------------------------------------------------- */

/* === 7a. CONTROLS / FILTRY / VIEW-TOGGLE === */
.events-section {
    padding-top: 80px;
}

/* events-controls jest kontenerem dla filtrów + month picker + view-toggle.
   Flex z auto-marginesami na month-picker → siedzi dokładnie w środku
   pomiędzy prawą krawędzią filtrów a lewą krawędzią view-toggle
   (NIE w geometrycznym środku wiersza — to są dwie różne pozycje gdy filtry
   i view-toggle mają różne szerokości). Border-bottom = wspólna pozioma linia. */
.events-controls {
    display: flex;
    align-items: flex-end; /* dół wyrównany żeby underline był spójny */
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 24px;
    margin-bottom: 0;
    border-bottom: 1px solid #e0e0e0;
}

.events-controls > .month-picker {
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 8px;
}

.events-filters {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

/* Filter tabs wg Figma node 2335:13550 — Montserrat Regular 16, tracking 2.4px,
   uppercase. Active ma border-bottom orange NA POZIOMIE wspólnej linii events-controls. */
.filter-tab {
    font-family: var(--font-montserrat);
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--black);
    padding: 0 0 8px;
    margin-bottom: -1px; /* nakłada się z border-bottom events-controls */
    border-bottom: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.filter-tab:hover {
    color: var(--orange);
}

.filter-tab--active {
    color: var(--orange);
    border-bottom-color: var(--orange);
}

.events-controls-right {
    display: flex;
    align-items: center;
    gap: 40px;
    padding-bottom: 8px; /* dopasuj do filter-tab padding-bottom żeby było równo */
}

.month-picker {
    display: flex;
    align-items: center;
    gap: 24px;
}

.month-label {
    /* Wg Figma node 2335:13559 — Montserrat Medium 16, uppercase.
       Fixed width 180px = mieści najdłuższy "PAŹDZIERNIK 2026" (16 znaków uppercase ~170px).
       Strzałki ‹ › zostają w stałych pozycjach niezależnie od zmiany miesiąca (Maj → Październik). */
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 16px;
    text-transform: uppercase;
    color: var(--black);
    width: 180px;
    text-align: center;
    white-space: nowrap;
}

.month-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    flex-shrink: 0;
    transition: opacity 0.2s;
}

.month-btn:hover {
    opacity: 0.6;
}

.month-btn--prev img {
    transform: rotate(180deg);
}

.view-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.view-toggle-label {
    /* Wg Figma node 2335:13564 — Montserrat Medium 16, color #848484 */
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 16px;
    color: #848484;
    white-space: nowrap;
}

.view-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* View-toggle ikony – inline SVG z fill="currentColor".
   Nieaktywne: jasnopomarańczowy #FACAAE. Aktywne: ciemny pomarańczowy #F27B35.
   Wg Figma 2335:13571 (light) vs 2335:13566 (dark). */
.view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #FACAAE; /* nieaktywny domyślnie */
    cursor: pointer;
    transition: color 0.2s;
}
.view-btn svg {
    width: 100%;
    height: 100%;
    display: block;
}
.view-btn--active {
    color: #F27B35;
} /* aktywny ciemny */
.view-btn:hover {
    color: #F27B35;
}

/* Ikony view-toggle jako pliki SVG -- 2 wersje per ikona (default peach + active orange).
   Background-image swap między stanami (działa wszędzie, w przeciwieństwie do mask-image
   który nie zawsze renderuje w niektórych przeglądarkach). */
.view-btn__icon {
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.view-btn__icon--grid {
    background-image: url('../img/icons/view-toggle-grid.svg');
}
.view-btn--active .view-btn__icon--grid,
.view-btn:hover .view-btn__icon--grid {
    background-image: url('../img/icons/view-toggle-grid-active.svg');
}
.view-btn__icon--list {
    background-image: url('../img/icons/view-toggle-list.svg');
}
.view-btn--active .view-btn__icon--list,
.view-btn:hover .view-btn__icon--list {
    background-image: url('../img/icons/view-toggle-list-active.svg');
}
.view-btn__icon--calendar {
    background-image: url('../img/icons/view-toggle-calendar.svg');
}
.view-btn--active .view-btn__icon--calendar,
.view-btn:hover .view-btn__icon--calendar {
    background-image: url('../img/icons/view-toggle-calendar-active.svg');
}

/* events-divider — border już na .events-controls. Zero height żeby list view
   przylegał do underline. Grid view dostaje margin-top: 24px osobno (jeśli potrzebny). */
.events-divider {
    border: 0;
    margin: 0;
    height: 0;
}

/* === 7b. WIDOK KALENDARZ TYGODNIOWY (Frame 912 wg Figma d-01-Home - kalendarz wydarzenia) ===
   7 kolumn dni × N tygodni. Każdy dzień: header "PON. 1 STY" + karta 176×254
   z 2 eventami (16:00 + 19:00) + link "Pokaż więcej". Weekend = orange border. */
/* Kalendarz wydarzeń wg Figma 2335:12652 (desktop) / 2335:18013 (mobile).
   Wspólne tokeny: card bg #F8F8F8 rounded 24, padding 17px 16px, gap eventów 16px.
   Fonty: Sora 12px (ExtraBold time / Regular title / Light venue / ExtraLight more).
   Day header: Montserrat 14px tracking 2.1, weekday Bold + "1 STY" Regular.
   Weekend (sob/niedz): orange border, grey bg ZACHOWANY (NIE transparent).
   Other-month days (np. 1 LUT w styczniowym widoku): opacity 0.4 — wygaszone. */
.events-calendar {
    margin: 32px 0 0;
    padding: 0;
}
.cal-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-bottom: 24px;
}
.cal-day {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}
.cal-day__header {
    margin: 0;
    padding-left: 16px; /* wg Figma mobile 2335:18042 / desktop 2335:12652 — inset 16px
                           żeby "PON." zaczynał się równo z content karty (nie krawędzią) */
    font-family: var(--font-montserrat);
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    text-transform: uppercase;
    letter-spacing: 2.1px;
    color: var(--black);
}
.cal-day__header strong {
    font-weight: 700;
    margin-right: 8px;
}
.cal-day__card {
    background: var(--grey-bg);
    border: 1px solid transparent; /* żeby weekend mógł nadpisać bez jumpu wysokości */
    border-radius: 24px;
    padding: 17px 16px;
    height: 254px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: border-color 0.2s ease;
}
/* Weekend (sob/niedz) – orange border, grey bg ZACHOWANY wg Figma 2335:18163. */
.cal-day--weekend .cal-day__card {
    border-color: var(--orange);
}
/* Other-month: dni z kolejnego miesiąca w widoku poprzedniego — wygaszone */
.cal-day--other-month {
    opacity: 0.4;
}
.cal-event {
    display: flex;
    flex-direction: column;
}
.cal-event__time {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sora);
    font-weight: 800;
    font-size: 12px;
    line-height: normal;
    color: var(--black);
}
.cal-bullet {
    width: 9px;
    height: 9px;
    background: var(--orange);
    border-radius: 50%;
    flex-shrink: 0;
}
.cal-event__title {
    font-family: var(--font-sora);
    font-weight: 400;
    font-size: 12px;
    line-height: normal;
    color: var(--black);
    margin: 8px 0 0;
}
.cal-event__venue {
    font-family: var(--font-sora);
    font-weight: 300;
    font-size: 12px;
    line-height: normal;
    color: var(--black);
    margin: 4px 0 0;
}
.cal-day__more {
    margin-top: auto;
    font-family: var(--font-sora);
    font-weight: 200;
    font-size: 12px;
    color: var(--black);
    text-decoration: underline;
}
.cal-day__more:hover {
    color: var(--orange);
}

/* === Wspólny toggle dla 3 widoków (kalendarz / grid / list) === */
.events-view {
    display: none;
}
.events-view.is-active {
    display: grid;
}
.events-view.events-list.is-active {
    display: block;
}
.events-view.events-calendar.is-active {
    display: block;
}

/* === 7c. WIDOK GRID / KAFLE (Frame 679, 4 kolumny × N rzędów, 320px width per card) === */
.events-grid {
    margin: 0;
    padding: 0;
    list-style: none;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    /* Vector 66/67 separators – pionowe linie pomiędzy kafelkami + poziome między rzędami */
}
/* Event card kafel (Frame 679) – wg Figma BEZ pionowych linii.
   Tylko prosta border-bottom między rzędami (Vector 66/67).
   Border-radius tylko na hover (image jako tło) – w default linia jest płaska na całą szerokość. */
.event-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background-color: transparent;
    transition: border-radius 0.6s ease, padding 0.6s ease, border-color 0.6s ease;
}

/* Hover bg-image jako ::after — opacity transition daje smooth fade
   (background-image w transition jest non-animatable, dlatego pseudo-element).
   BACKEND HANDOFF: per-event grafika przez inline custom property:
   <li class="event-card" style="--card-hover-bg: url('img/event-X.jpg')">...</li>
   Fallback (event-photo.jpg) używany gdy backend nie ustawi zmiennej. */
.event-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--card-hover-bg, url('../img/shared/placeholders/event.jpg'));
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}

/* Dark overlay na hover (opacity 0→1 dla fade). Intensywność 0.55 zapewnia
   czytelność białego tekstu nawet na bardzo jasnych zdjęciach. KLIENT-UWAGI #11.
   z-index: 1 — NAD ::after (bg image z-index 0). Bez tego dark byłby pod bg image
   bo ::after jest later w DOM order. Texts/link mają z-index 1 i są later w DOM
   = nadal nad dark overlay. */
.event-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.6s ease;
    border-radius: inherit;
}

/* Stretched link — całe kafel/wiersz klikalny → wydarzenie.html.
   Pozostałe interaktywne elementy (np. .btn-orange "Kup bilet") muszą mieć z-index > 1
   żeby stay clickable on top — domyślnie pozycjonowane elementy mają z-index auto = poniżej.

   Pointer-events trick: na hover texty dostają position:relative + z-index:1 (żeby były nad
   ::before overlay), przez co przesłaniają link w stacking order. Robimy je pass-through
   (pointer-events: none), klik trafia do __link pod spodem. Wyjątek: __btn (event-card) /
   __action (event-row) zachowują pointer-events: auto żeby button "Kup bilet" działał osobno. */
.event-card__link,
.event-row__link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.event-card > :not(.event-card__link):not(.event-card__btn),
.event-row > :not(.event-row__link):not(.event-row__action) {
    pointer-events: none;
}

.event-card .btn-orange,
.event-row .btn-orange {
    position: relative;
    z-index: 2;
    pointer-events: auto;
}
/* Hover: image staje się tłem całej karty (Variant 2 wg Figma 2335:12032 desktop).
   Desktop NIE ma rounded corners — kafle są równoległoboczne, image-wrapper wewnątrz
   ma własny rounded:24. Mobile (< 768px) NADPISUJE — tam rounded:24 na hover.
   BACKEND HANDOFF: dla unikalnej grafiki per-event dodać `data-bg="img/event-X.jpg"`
   na .event-card + JS handler na mouseenter (snippet w INSTRUKCJA.md sek. 6).
   Domyślny obraz hardcoded poniżej (placeholder demo). */
.event-card:hover {
    border-color: transparent;
}
.event-card:hover::after {
    opacity: 1;
}
.event-card:hover::before {
    opacity: 1;
}

/* __media fade out zamiast visibility hidden (visibility nie animuje) */
.event-card__media {
    transition: opacity 0.6s ease;
}
.event-card:hover .event-card__media {
    opacity: 0;
}

/* Texts/row/btn ZAWSZE z position:relative + z-index:1 (nad ::before/::after).
   Color transition daje smooth fade kolorów (czarny → biały). */
.event-card__day,
.event-card__time,
.event-card__title,
.event-card__weekday,
.event-card__venue {
    position: relative;
    z-index: 1;
    transition: color 0.6s ease;
}
.event-card__row,
.event-card__btn,
.event-card__date {
    position: relative;
    z-index: 1;
}

/* Hover: texts białe (date, weekday, time, title, venue) */
.event-card:hover .event-card__day,
.event-card:hover .event-card__time,
.event-card:hover .event-card__title {
    color: #fff;
}
.event-card:hover .event-card__weekday,
.event-card:hover .event-card__venue {
    color: #f8f8f8;
}
.event-card__date {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.event-card__day {
    font-family: var(--font-sora);
    font-weight: 600;
    font-size: 40px;
    line-height: 1;
    color: var(--black);
    margin: 0;
}
.event-card__weekday {
    font-family: var(--font-sora);
    font-weight: 400;
    font-size: 24px;
    line-height: 33px;
    color: #848484;
    margin: 0;
}
.event-card__time {
    font-family: var(--font-montserrat);
    font-weight: 400;
    font-size: 18px;
    line-height: 1;
    color: var(--black);
    margin: 0;
}
.event-card__time strong {
    font-weight: 700;
}
.event-card__media {
    position: relative;
    width: 100%;
    height: 164px;
    border-radius: var(--radius-card);
    overflow: hidden;
}
.event-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Default state — overlay transparent (zdjęcie BEZ wyciemnienia).
   Wyciemnienie pojawia się tylko na hover przez .event-card::before (rgba 0.55 z fade).
   KLIENT-UWAGI #11: hover dimming dla czytelności tekstu na jasnych zdjęciach. */
.event-card__overlay {
    position: absolute;
    inset: 0;
    background: transparent;
    border-radius: var(--radius-card);
}
.event-card__row {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.event-card__category {
    background: var(--grey-bg);
    padding: 10px 20px;
    border-radius: var(--radius-pill);
    font-family: var(--font-montserrat);
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 2.1px;
    text-transform: uppercase;
    color: var(--black);
    white-space: nowrap;
}
.event-card__price {
    background: #66f1fd; /* cyan-light wg Figma */
    padding: 10px 20px;
    border-radius: var(--radius-pill);
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    color: var(--black);
    white-space: nowrap;
}
.event-card__title {
    font-family: var(--font-sora);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.2;
    color: var(--black);
    margin: 0;
    width: 100%;
    /* Max 2 linie + rezerwacja miejsca: button "Kup bilet" zawsze na stałej pozycji
       niezależnie od długości tytułu (1 linia vs 2 linie). 3+ linie ucina ellipsis.
       min-height = 2 × line-height (1.2 × 20px = 24px) = 48px. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 48px;
}
.event-card__venue {
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.2;
    color: #848484;
    margin: 0;
    width: 100%;
    /* Truncate single-line: bardzo długie venue → ellipsis */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.event-card__btn {
    margin-top: 8px;
}

/* === 7d. WIDOK LIST / POZIOME (Component 114) === */
.events-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Grid: 25.47% / 33.25% / 25.28% / 16% wg Figma 2335:11811 (proporcje frame'u 1284px).
   Info column ~427px musi zmieścić tytuł "Ciało i krew albo niewypowiedziane" w 1 linii. */
.event-row {
    position: relative;
    display: grid;
    grid-template-columns: 326px 1fr 325px 205px;
    align-items: center;
    gap: 0;
    min-height: 254px;
    border-bottom: 1px solid #f0f0f0;
    background-color: transparent;
    transition: border-bottom-color 0.6s ease;
}

/* Hover bg-image i overlay jako pseudo-elementy z opacity transition (smooth fade).
   BACKEND HANDOFF: per-event grafika przez inline custom property:
   <li class="event-row" style="--row-hover-bg: url('img/event-X.jpg')">...</li>
   Fallback (event-photo.jpg) używany gdy backend nie ustawi zmiennej. */
.event-row::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--row-hover-bg, url('../img/shared/placeholders/event.jpg'));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
    z-index: 0;
}

.event-row::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.6s ease;
}

/* Hover wg Figma 2335:11829 (Variant2 Component 114):
   image jako tło całego wiersza + dark overlay 30% + texts białe.
   border-bottom: 0 żeby price pill (margin-top: auto, margin-bottom: 0)
   stykał się z dolną krawędzią wiersza (zamiast 1px nad nią). */
.event-row:hover {
    border-bottom-color: transparent;
}
.event-row:hover::after {
    opacity: 1;
}
.event-row:hover::before {
    opacity: 1;
}

/* __image-wrap fade out (zamiast visibility hidden — visibility nie animuje) */
.event-row__image-wrap {
    transition: opacity 0.6s ease;
}
.event-row:hover .event-row__image-wrap {
    opacity: 0;
}

/* Wnętrzności ZAWSZE z position:relative + z-index:1 (nad ::before/::after).
   transform/color transitions dają smooth hover (translateX 30px wsuwanie + kolor fade). */
.event-row__date,
.event-row__info,
.event-row__action {
    position: relative;
    z-index: 1;
    transition: transform 0.6s ease;
}

.event-row__date-day,
.event-row__date-weekday,
.event-row__date-time,
.event-row__title,
.event-row__venue {
    transition: color 0.6s ease;
}

/* Hover: data wsuwa się w prawo o ~30px, button wsuwa się w lewo o ~30px
   wg Figma 2335:11811 → 2335:11829: data left 0.04% → 2.38%, btn calc(50%+554.5) → calc(50%+524.5).
   Daje to "powietrze" przy krawędziach żeby image był widoczny pod tekstem/buttonem. */
.event-row:hover .event-row__date {
    transform: translateX(30px);
}
.event-row:hover .event-row__action {
    transform: translateX(-30px);
}
/* Hover: texts białe (data, weekday, time, title, venue) */
.event-row:hover .event-row__date-day,
.event-row:hover .event-row__date-weekday,
.event-row:hover .event-row__date-time,
.event-row:hover .event-row__title,
.event-row:hover .event-row__venue {
    color: #fff;
}

/* Data — wg Figma 2335:11825 (default) / 2335:11841 (hover):
   data zaczyna się od TOP wiersza, na tej samej wysokości co TEATR pill (top: 17.73%).
   Wcześniej justify-content: center spychało datę do pionowego środka — teraz
   align-self: stretch + naturalne flex-start. */
.event-row__date {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 20px 24px 20px 0;
    align-self: stretch;
    transition: transform 0.6s ease;
}

.event-row__date-day {
    font-family: var(--font-sora);
    font-weight: 600;
    font-size: 40px;
    color: var(--black);
    line-height: normal;
}

.event-row__date-weekday {
    font-family: var(--font-sora);
    font-weight: 400;
    font-size: 24px;
    color: var(--grey-text);
    line-height: 1.375;
    margin-top: 4px;
}

.event-row__date-time {
    font-family: var(--font-montserrat);
    font-weight: 400;
    font-size: 18px;
    color: var(--black);
    margin-top: 8px;
}

.event-row__date-time strong {
    font-weight: 700;
}

/* Info */
.event-row__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px 24px 0 24px;
    align-self: stretch;
}

.event-row__category {
    display: inline-block;
    align-self: flex-start;
    padding: 8px 20px;
    background: var(--grey-bg);
    border-radius: var(--radius-pill);
    font-family: var(--font-montserrat);
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 2.1px;
    text-transform: uppercase;
    color: var(--black);
    margin-bottom: 8px;
}

.event-row__title {
    font-family: var(--font-sora);
    font-weight: 600;
    font-size: 20px;
    color: var(--black);
    line-height: normal;
}

.event-row__venue {
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 16px;
    color: var(--grey-text);
}

/* Zdjęcie */
.event-row__image-wrap {
    position: relative;
    height: 214px;
    border-radius: var(--radius-card);
    overflow: hidden;
}

.event-row__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-card);
}

/* Cena – zawsze przy dolnej krawędzi wiersza */
.event-row__price {
    display: inline-block;
    align-self: flex-start;
    padding: 8px 20px;
    background: var(--cyan-light);
    border-radius: 24px 24px 0 0;
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    color: var(--black);
    margin-top: auto;
    margin-bottom: 0;
}

/* Akcja */
.event-row__action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 20px 0 20px 24px;
    transition: transform 0.6s ease;
}

/* Aktywna strona paginacji — wyróżnienie outline (wszystkie buttony są orange wg Frame 888) */
.page-btn--active {
    outline: 2px solid var(--white);
    outline-offset: -4px;
}

/* --------------------------------------------------------------------------
   8. SEKCJA: MECENASI
   -------------------------------------------------------------------------- */
.mecenas-banner {
    position: relative;
    height: 482px;
    border-radius: var(--radius-card);
    overflow: hidden;
}

.mecenas-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Gradient wg Figma Group 465: 207.79deg, kierunek z górnego-prawego (transparent)
   do dolnego-lewego (orange). Intensywność: 0.65 (Figma) → 0.30 → 0.45 → 0.90 (2× mocniej,
   per Marcin: tekst nieczytelny na jasnych zdjęciach). */
.mecenas-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(207.794deg,
        rgba(0, 0, 0, 0) 28.77%,
        rgba(242, 123, 53, 0.90) 76.8%
        );
}

.mecenas-banner-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 24px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.mecenas-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    max-width: 440px;
}

/* Pill kategorii wg Figma: bg #F8F8F8, padding 10/20, font 14 black tracking 2.1, gap 24 do tytułu */
.mecenas-info__category {
    display: inline-block;
    padding: 10px 20px;
    margin-bottom: 24px;
    background: var(--grey-bg);
    border-radius: var(--radius-pill);
    font-family: var(--font-montserrat);
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 2.1px;
    text-transform: uppercase;
    color: var(--black);
    line-height: 1;
}

.mecenas-title {
    font-family: var(--font-sora);
    font-weight: 600;
    font-size: 24px;
    color: var(--white);
    line-height: 1;
    margin: 0 0 8px 0;
}

.mecenas-venue {
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;
    color: var(--white);
    margin: 0;
}

.mecenas-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--white);
    padding: 8px 16px;
    border-radius: var(--radius-card);
}

.mecenas-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.mecenas-nav-btn:hover {
    transform: scale(1.1);
}

/* banner-arrow: <img> z pliku SVG (peach prev / orange next). Direction chevron-right;
   CSS rotate dla "poprzedni" (chevron-left). Kolor okręgu jest w samym pliku SVG. */
.mecenas-nav-btn--prev .banner-arrow {
    transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   9. SEKCJA: AKTUALNOŚCI
   -------------------------------------------------------------------------- */

/* Header row: label+title on left, nav arrows on right */
.aktualnosci-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.news-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 52px; /* align vertically with section-title baseline */
}

.news-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 27px;
    height: 27px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.news-nav-btn:hover {
    transform: scale(1.1);
}

.news-nav-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.news-nav-btn:disabled:hover {
    transform: none;
}

/* Strzałka w SVG wskazuje w prawo — odwracamy dla "poprzedni" */
.news-nav-btn--prev img {
    transform: rotate(180deg);
}

/* Carousel Frame 848: 3 karty (1 featured 521×411 + 2 secondary 521×365),
   ostatnia wystaje poza container (1611 vs 1284), strzałkami przesuwamy track. */
.news-carousel {
    overflow: hidden;
}

.news-carousel__inner {
    width: 100%;
    max-width: calc(var(--content-w) + var(--page-pad) * 2);
    margin: 0 auto;
    padding-left: var(--page-pad);
    padding-right: 0; /* karty wystają poza container w prawo */
}

.news-carousel__track {
    display: flex;
    align-items: flex-end; /* wyrównanie do dołu — karty secondary 365px wsuwają się 46px niżej */
    gap: 24px;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* Base card – fixed width 521 wg Figmy */
.news-card {
    position: relative;
    display: block;
    flex-shrink: 0;
    width: 521px;
    border-radius: var(--radius-card);
    overflow: hidden;
    text-decoration: none;
}

.news-card--featured {
    height: 411px;
    background: var(--orange);
}

.news-card--secondary {
    height: 365px;
    background: var(--cyan);
}

/* Image wrapper: zaczyna się pod kolorowym pasem (~9.86%).
   HOVER (Group 393 z Figmy): top → 0 (pasek znika, obraz wypełnia kartę). */
.news-card__image-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--radius-card);
    overflow: hidden;
    transition: top 0.4s ease;
}

.news-card--featured .news-card__image-wrap {
    top: 41px;
}
.news-card--secondary .news-card__image-wrap {
    top: 36px;
}

.news-card:hover .news-card__image-wrap {
    top: 0;
}

.news-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.news-card:hover .news-card__image {
    transform: scale(1.08);
}

/* Gradient overlay (default 0.5 alpha). Hover overlay (pełny kolor) jako ::after
   z opacity 0→1 transition (background-image gradient w transition jest non-animatable). */
.news-card__overlay {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-card);
}

.news-card__overlay--orange {
    background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(242,123,53,0.5) 100%);
}

.news-card__overlay--cyan {
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,232,252,0.5) 100%);
}

.news-card__overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-card);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.news-card__overlay--orange::after {
    background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, #F27B35 100%);
}

.news-card__overlay--cyan::after {
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #00E8FC 100%);
}

.news-card:hover .news-card__overlay::after {
    opacity: 1;
}

/* Badge: kropka + kategoria w pasie kolorowym. HOVER: opacity 0 (znika razem z paskiem) */
.news-card__band {
    position: absolute;
    top: 12px;
    left: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 2;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.news-card:hover .news-card__band {
    opacity: 0;
}

.news-card__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--white);
    flex-shrink: 0;
}

.news-card__cat {
    font-family: var(--font-montserrat);
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 2.1px;
    text-transform: uppercase;
    color: var(--black);
}

/* Tytuł nakładany na obraz, dolny lewy róg */
.news-card__title {
    position: absolute;
    bottom: 41px;
    left: 24px;
    right: 80px;
    z-index: 2;
    font-family: var(--font-sora);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--white);
    margin: 0;
}

/* Przycisk strzałki: domyślnie biały okrąg + czarna strzałka,
   na hover (Group 323) — orange okrąg + biała strzałka. Przejście opacity. */
.news-card__btn {
    position: absolute;
    bottom: 41px;
    right: 24px;
    z-index: 2;
    width: 37px;
    height: 37px;
}

.news-card__btn .arrow-default,
.news-card__btn .arrow-hover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    transition: opacity 0.3s ease;
}

.news-card__btn .arrow-hover {
    opacity: 0;
}

.news-card:hover .news-card__btn .arrow-default {
    opacity: 0;
}
.news-card:hover .news-card__btn .arrow-hover {
    opacity: 1;
}

/* Arrow icons swap on hover – place cards (opacity-based sequential fade) */
.miejsce-card__arrow .arrow-default,
.miejsce-card__arrow .arrow-hover {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    transition: opacity 0.2s ease;
}
.miejsce-card__arrow .arrow-default {
    opacity: 1;
}
.miejsce-card__arrow .arrow-hover   {
    opacity: 0;
}

/* Swap arrow tylko na hover belki (nie zdjęcia) */
.miejsce-card__info:hover .arrow-default {
    opacity: 0;
}
.miejsce-card__info:hover .arrow-hover   {
    opacity: 1;
}


/* --------------------------------------------------------------------------
   10. SEKCJA: POLECANE MIEJSCA
   -------------------------------------------------------------------------- */

/* CSS grid: 3 equal columns, 26px gap — mirrors Figma gap-[26px] */
.miejsca-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

/* Listing wszystkich miejsc smaku (miejsca-smaku.html) — desktop 3×4 = 12
   (kafle kwadratowe analogicznie do .miejsca-grid w sekcji "Polecane"),
   mobile 1×6 (pierwsze 6 z 12, reszta ukryta). */
.miejsca-smaku-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

/* Listing wszystkich miejsc kultury (miejsca-kultury.html) — desktop 3×4 = 12
   (kafle kwadratowe, cyan info-tile przez .miejsce-card--kultura),
   mobile 1×6 (pierwsze 6 z 12, reszta ukryta). */
.miejsca-kultury-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

@media (max-width: 575.98px) {
    .miejsca-kultury-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .miejsca-kultury-grid .miejsce-card:nth-child(n+7) {
        display: none;
    }
}

/* Card: relative container so the info tile can overlay the photo */
.miejsce-card {
    position: relative;
    border-radius: var(--radius-card);
    overflow: hidden;
    display: block;
    text-decoration: none;
}

/* Photo fills the full card height */
.miejsce-card__img-wrap {
    position: relative;
    height: 412px;
    overflow: hidden;
    border-radius: var(--radius-card);
}

.miejsce-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

/* Gradient overlay (default — pełna przezroczystość, niewidoczny). Hover overlay
   jako osobna warstwa ::before z opacity 0→1 transition (smooth fade — background-image
   gradient w transition jest non-animatable, dlatego dwie warstwy). */
.miejsce-card__img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-card);
    background: linear-gradient(214.63deg, rgba(0, 0, 0, 0) 30%, rgba(242, 123, 53, 0) 81%);
    pointer-events: none;
}

.miejsce-card__img-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-card);
    background: linear-gradient(214.63deg, rgba(0, 0, 0, 0) 30%, rgba(242, 123, 53, 0.55) 81%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    /* z-index: 1 — żeby ::before (hover) był NAD ::after (default transparent),
       bo w DOM order ::before jest before <img> = niżej w stacking domyślnie. */
    z-index: 1;
}

/* HOVER #1 – cała kafelka:
   zdjęcie ZOOM + ROTATE counter-clockwise + pomarańczowy GRADIENT z dolnego-lewego (skos) */
.miejsce-card:hover .miejsce-card__img {
    transform: scale(1.07) rotate(-2deg);
}

.miejsce-card:hover .miejsce-card__img-wrap::before {
    opacity: 1;
}

/* Orange info tile — overlays the bottom-left portion of the photo.
   16px from bottom, 16px from left, stops ~17% before the right edge
   so the photo shows through on the right side (as in Figma). */
.miejsce-card__info {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 70px;
    height: 122px;
    background: var(--orange);
    border-radius: var(--radius-card);
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 16px;
    transition: background 0.3s ease;
    /* z-index: 2 — nad .miejsce-card__img-wrap::before (hover gradient z z-index 1).
       Panel z tytułem zawsze widoczny, gradient pojawia się tylko na zdjęciu pod nim. */
    z-index: 2;
}

/* HOVER #2 – tylko belka (mecenas-card-info):
   tło orange → cyan (płynna zmiana), arrow swap white circle → orange circle */
.miejsce-card__info {
    transition: background 0.35s ease;
}

.miejsce-card__info:hover {
    background: var(--cyan);
}

.miejsce-card__text {
    flex: 1;
    min-width: 0;
}

.miejsce-card__name {
    font-family: var(--font-sora);
    font-weight: 600;
    font-size: 20px;
    color: var(--black);
    line-height: 1.2;
    margin: 0;
}

.miejsce-card__city {
    font-family: var(--font-montserrat);
    font-weight: 300;
    font-size: 16px;
    line-height: 26px;
    color: var(--black);
    margin: 4px 0 0;
}

.miejsce-card__arrow {
    position: relative;
    width: 37px;
    height: 37px;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   10b. PAGINACJA
   -------------------------------------------------------------------------- */
.miejsca-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 40px;
}

/* Wszystkie buttony paginacji wg Frame 888: 64×64 orange #F27B35, white text Montserrat Medium 16 */
.page-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--orange);
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--white);
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.page-btn:hover {
    background: var(--orange-light);
}
.page-btn:disabled {
    opacity: 0.4;
    cursor: default;
}
.page-btn:disabled:hover {
    background: var(--orange);
}

/* Rotate arrows for Prev and First (left-pointing) */
.page-btn--first img,
.page-btn--prev img {
    transform: rotate(180deg);
}

/* Mobile pagination wg Figma 2335:11389 (Frame 889).
   - number buttony (1, 2, ..., 20): 46×46 orange
   - first/last (2335:11390/11419): composed SVG `pag-mobile-arrow-double.svg`
     (orange circle + biały double-chevron złożone lokalnie — patrz komentarz niżej)
   - prev/next (2335:11393/11416): 16×16 SVG `pag-mobile-arrow-prev.svg`
     (orange circle + biały single-chevron WBUDOWANE w jeden SVG przez Figmę)
   - gap 8px
   Wszystkie 4 nawigacyjne mają orange kółka — zgodnie z Figmą.
   Kierunek SVG = RIGHT default. First/prev rotate 180 żeby wskazywały w lewo. */
@media (max-width: 575.98px) {
    .miejsca-pagination {
        gap: 8px;
        margin-top: 32px;
    }
    .page-btn {
        width: 46px;
        height: 46px;
    }
    .page-btn--first,
    .page-btn--prev,
    .page-btn--next,
    .page-btn--last {
        width: 16px;
        height: 16px;
        background-color: transparent;
        background-position: center;
        background-repeat: no-repeat;
    }
    .page-btn--first img,
    .page-btn--prev img,
    .page-btn--next img,
    .page-btn--last img {
        display: none;
    }
    /* First/last: composed SVG (orange circle + double-chevron) wg Figma 2335:11390.
       Figma exportuje ellipse i double-chevron jako 2 osobne pliki — composing
       lokalnie w jeden SVG daje pewność pixel-perfect rendering bez problemów
       aspect-ratio przy małych rozmiarach. */
    .page-btn--first,
    .page-btn--last {
        background-image: url('../img/icons/pag-mobile-arrow-double.svg');
        background-size: 16px;
    }
    /* Prev/next: Figma SVG ma orange circle + single chevron wbudowane */
    .page-btn--prev,
    .page-btn--next {
        background-image: url('../img/icons/pag-mobile-arrow-prev.svg');
        background-size: 16px;
    }
    /* SVG default = RIGHT. First/prev → rotate 180 (LEFT). Next/last → bez rotacji (RIGHT). */
    .page-btn--first,
    .page-btn--prev {
        transform: rotate(180deg);
    }
    /* Hover preserved per typ: first/last orange kółko zostaje, prev/next transparent */
    .page-btn--first:hover,
    .page-btn--last:hover {
        background-color: var(--orange);
    }
    .page-btn--prev:hover,
    .page-btn--next:hover {
        background-color: transparent;
    }
}

/* --------------------------------------------------------------------------
   11. SEKCJA: JAK TO DZIAŁA
   -------------------------------------------------------------------------- */
.jak-dziala-row + .jak-dziala-row {
    margin-top: 0;
}

.krok-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.krok-number {
    font-family: var(--font-sora);
    font-weight: 600;
    font-size: 40px;
    color: var(--black);
    line-height: 1;
}

.krok-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 272px;
    height: 272px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: var(--shadow-card);
}

.krok-circle img {
    max-width: 120px;
    max-height: 120px;
}

.krok-title {
    font-family: var(--font-sora);
    font-weight: 600;
    font-size: 20px;
    color: var(--black);
    line-height: 1.3;
}

.krok-desc {
    font-family: var(--font-montserrat);
    font-weight: 300;
    font-size: 14px;
    line-height: 20px;
    color: var(--black);
    margin-top: 8px;
}

/* --------------------------------------------------------------------------
   12. SEKCJA: O NAS
   -------------------------------------------------------------------------- */

/* Flex row: text col + image col, 64px gap (większy odstęp tekst↔zdjęcie), top-aligned */
.o-nas-content {
    display: flex;
    gap: 64px;
    align-items: flex-start;
}

.o-nas-text-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* First paragraph — Montserrat Medium 20px / 28px line-height */
.o-nas-text--lead {
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    color: var(--black);
    margin: 0;
}

/* Second paragraph — Montserrat Light 16px / 26px line-height */
.o-nas-text--body {
    font-family: var(--font-montserrat);
    font-weight: 300;
    font-size: 16px;
    line-height: 26px;
    color: var(--black);
    margin: 0;
}

/* Photo: 629×412px, rounded corners */
.o-nas-image-wrap {
    flex: 0 0 calc(50% - 12px);
    display: block;
    border-radius: var(--radius-card);
    overflow: hidden;
    height: 412px;
    text-decoration: none;
}

.o-nas-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --------------------------------------------------------------------------
   13. FOOTER
   -------------------------------------------------------------------------- */

/* Footer: białe tło, zaokrąglenie 24px na top, overflow:hidden dla arc + clean rounded corners.
   Gradient wizualnie oddzielający footer od contentu jest na `main::after` (200px tall pas nad footer)
   — patrz reguła `main::after` poniżej. Tu na footerze nie ma cienia/gradientu żeby nie konkurował. */
.site-footer {
    position: relative;
    background: var(--white);
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    height: 373px;
    overflow: hidden;
}

/* Wizualne oddzielenie footera od contentu — DWA pseudo-elementy na <main>:
   1. ::after — pas 200px NAD footerem (wysoki z-index, widoczny na contentcie)
   2. ::before — pas 24px ZA footerem (niski z-index, widoczny tylko w rounded corner cutouts).
      Drugi pseudo wypełnia "wycięcia" zaokrąglonych rogów footera kolorem gradientu,
      dzięki czemu rounded corners są wizualnie wyraźne (kontrast: rounded cutout ~0.045 vs białe wnętrze footera). */
main {
    position: relative;
}

main::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 200px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.025) 0%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 2;
}

main::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.025);
    pointer-events: none;
    z-index: -1;
}

/* Arc decoration — right side, positioned relative to footer (full-width) */
.footer-arc {
    position: absolute;
    top: 0;
    right: -12%;
    bottom: 0;
    width: 46%;
    pointer-events: none;
}

.footer-arc picture,
.footer-arc img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right bottom;
}

/* Inner container — constrains content to design width */
.footer-container {
    position: relative;
    width: 100%;
    max-width: calc(var(--content-w) + var(--page-pad) * 2);
    margin: 0 auto;
    height: 100%;
}

/* Logo — top-left (81px from top, 78px from left) */
.footer-logo-wrap {
    position: absolute;
    top: 81px;
    left: var(--page-pad);
}

/* Social icons — top-right (93px from top, 78px from right) */
.footer-social {
    position: absolute;
    top: 93px;
    right: var(--page-pad);
    display: flex;
    gap: 24px;
}

.social-btn {
    display: block;
    flex-shrink: 0;
    transition: opacity 0.2s;
}

.social-btn:hover {
    opacity: 0.8;
}

.social-btn img {
    display: block;
}

/* Nav columns — bottom-left (196px from top, 78px from left) */
.footer-nav {
    position: absolute;
    top: 196px;
    left: var(--page-pad);
    display: flex;
    gap: 144px;
    align-items: flex-start;
}

.footer-nav-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.footer-nav-title {
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 16px;
    color: var(--black);
    line-height: 1;
    margin: 0;
}

.footer-nav-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-nav-list a {
    font-family: var(--font-sora);
    font-weight: 300;
    font-size: 14px;
    color: var(--black);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-nav-list a:hover {
    color: var(--orange);
}

/* --------------------------------------------------------------------------
   14. POWRÓT NA GÓRĘ
   -------------------------------------------------------------------------- */
/* Pozycjonowanie pośrodku góra-dół przy prawej krawędzi (top: 50% + translateY(-50%)).
   Asset z Figma (scroll-top-arrow.svg) ma wbudowane białe kółko + drop shadow,
   więc CSS NIE dodaje background/border-radius/box-shadow — wszystko jest w SVG. */
.back-to-top {
    position: fixed;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    z-index: 999;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
/* SVG z Figmy ma strzałkę pokazującą W DÓŁ. Rotujemy 180° żeby pokazywała W GÓRĘ
   (scroll-to-top). Drop shadow w SVG jest offset (0,4) — przy rotacji shadow
   przeniesie się do (0,-4), nadal subtelny i akceptowalny. */
.back-to-top img {
    display: block;
    width: 80px;
    height: 80px;
    transform: rotate(180deg);
}

.back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* --------------------------------------------------------------------------
   15. ANIMACJE
   -------------------------------------------------------------------------- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to   {
        opacity: 1;
        transform: translateY(0);
    }
}

.section {
    animation: fadeInUp 0.5s ease both;
    animation-play-state: paused;
}

.section.is-visible {
    animation-play-state: running;
}

/* --------------------------------------------------------------------------
   15b. RESPONSIVE – NAWIGACJA (< 1200px): dłuższe linki nie mieszczą się
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .main-nav {
        display: none;
    }
    .header-actions {
        display: none;
    }
    .nav-toggle {
        display: flex;
    }
}

/* --------------------------------------------------------------------------
   16. RESPONSIVE – TABLET (< 992px)
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    :root {
        --page-pad: 40px;
    }

    .hero-city-name {
        font-size: 48px;
    }
    .hero-subtitle {
        font-size: 22px;
    }

    .search-bar {
        gap: 6px;
    }
    .search-pill {
        padding: 12px 20px;
        height: 56px;
        font-size: 14px;
        gap: 10px;
    }
    .btn-search {
        padding: 12px 16px;
        height: 56px;
    }

    .events-controls {
        gap: 16px;
    }
    .events-controls-right {
        gap: 24px;
    }

    .event-row {
        grid-template-columns: 160px 1fr;
        grid-template-rows: auto auto;
        min-height: auto;
    }

    .event-row__image-wrap {
        display: none;
    }
    .event-row__action {
        grid-column: 1 / -1;
        justify-content: flex-start;
        padding: 0 0 20px 0;
    }
    .event-row__info {
        padding: 0 24px 0 24px;
    }
    .event-row__date {
        padding: 20px 24px 20px 0;
    }

    .news-card {
        width: 380px;
    }
    .news-card--featured {
        height: 340px;
    }
    .news-card--secondary {
        height: 300px;
    }
    .news-card--featured .news-card__image-wrap {
        top: 36px;
    }
    .news-card--secondary .news-card__image-wrap {
        top: 32px;
    }

    .site-footer {
        height: auto;
        overflow: hidden;
    }
    .footer-arc {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
    }
    .footer-arc img {
        object-fit: cover;
        object-position: bottom right;
    }
    .footer-container {
        height: auto;
        display: flex;
        flex-direction: column;
        padding: 48px var(--page-pad) 160px;
    }
    .footer-logo-wrap {
        position: relative;
        top: auto;
        left: auto;
    }
    .footer-social {
        position: relative;
        top: auto;
        right: auto;
        order: 3;
        margin-top: 64px;
    }
    .footer-nav {
        position: relative;
        top: auto;
        left: auto;
        order: 2;
        margin-top: 64px;
        gap: 32px;
        flex-wrap: wrap;
    }
}

/* --------------------------------------------------------------------------
   17. RESPONSIVE – MOBILE (< 576px)
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    :root {
        --page-pad: 20px;
    }

    /* Wyłącz sticky header na mobile — header scrolluje się razem ze stroną
       (znika z viewport po przewinięciu w dół). Mobile-bottom-nav przejmuje rolę nawigacji.
       `position: relative` (nie static) — dalej in-flow, ALE z-index 1000 z bazowej
       reguły aktywuje stacking — mobile-nav (children header) widoczne nad hero. */
    .site-header {
        position: relative;
    }

    .hero {
        height: auto;
        /* Mobile hero higher per Figma — więcej przestrzeni nad i pod content. */
        min-height: 780px;
        padding-bottom: 60px;
        /* Header in-flow zajmuje 80px na top — bazowy padding-top var(--header-h)
           byłby duplikatem. Override na 0 żeby uniknąć +80px gap. */
        padding-top: 0;
    }

    .hero-content {
        padding-top: 160px;
        gap: 12px;
    }
    .hero-city {
        gap: 12px;
    }
    .hero-city-name {
        font-size: 48px;
    }
    .hero-subtitle {
        font-size: 18px;
    }

    /* Chevron na mobile dużo mniejszy — w Figmie m-01 to mała ikona obok dużego KRAKÓW
       (desktop 34, mobile ~24 — proporcjonalnie do mniejszego tekstu) */
    .btn-city-change {
        width: 24px;
        height: 24px;
        transform: translateY(-3px) rotate(90deg);
    }
    .btn-city-change:hover {
        transform: translateY(-3px) rotate(270deg);
    }
    .btn-city-change img {
        width: 24px;
        height: 24px;
    }

    /* Mobile: ukryć "Wyświetl jako" label (nie ma go w Figmie m-01),
       wyśrodkować view-toggle (3 ikonki kafle/lista/kalendarz) na własnym wierszu.
       padding-bottom: 16px daje powietrze między ikonami a border-bottom .events-controls. */
    .view-toggle-label {
        display: none;
    }
    .events-controls-right {
        width: 100%;
        justify-content: center;
        padding-bottom: 16px;
    }

    /* Mobile search wg Figma 2335:11569 (Frame 835): 3 wiersze × 2 kolumny w gridzie
       proporcji 188:131 (~1.435:1), pillsy 50px wysokości, gap 8px, wrapper p-8 rounded-24.
       HTML order po reorderze: typ, data, osoby, godzina, input, Szukaj — wypełnia grid:
       row 1: typ | data, row 2: osoby | godzina, row 3: input | Szukaj. */
    .search-bar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* Mobile: 2 równe kolumny — minmax(0,…) zapobiega ekspansji od intrinsic content size */
        flex-direction: unset;
        align-items: unset;
        flex-wrap: unset;
        gap: 8px;
        width: 100%;
        padding: 8px;
        border-radius: 24px;
    }
    /* Override desktop fixed widths (.search-pill[data-dropdown] = 0,0,2,0 specificity) */
    .search-bar .search-pill,
    .search-bar .search-pill--input,
    .search-bar .btn-search {
        width: 100%;
    }
    .search-pill {
        height: 50px;
        padding: 15px 30px;
        font-size: 16px;
        justify-content: center;
        gap: 16px;
    }
    .search-pill img {
        width: 16px;
        height: 16px;
    }
    .search-pill--input {
        padding: 15px 30px;
        cursor: text;
    }
    .search-pill--input input {
        width: 100%;
        text-align: center;
        font-size: 16px;
    }
    .btn-search {
        width: 100%;
        height: 50px;
        padding: 15px 20px;
        gap: 16px;
        font-size: 16px;
        justify-content: center;
        /* Po wycięciu pillsów godzina+osoby zostały 4 pillsy + Szukaj (nieparzyście).
           Span na 2 kolumny daje finalny wiersz na pełną szerokość — symetria. */
        grid-column: 1 / -1;
    }
    .btn-search:hover {
        gap: 20px;
    } /* mniejszy bump bo gap startowy 16 zamiast 24 */
    .btn-search img {
        width: 16px;
        height: 16px;
    }
    .hero-subtitle {
        font-size: 24px;
    } /* Figma 2335:11578 — Sora SemiBold 24 */

    .section {
        padding: 48px 0;
    }
    /* Section title mobile per Figma Mobile/H3_bold: Sora 700 32px / line-height 40px.
       Section-label już 16/2.4 (matches desktop subheader_big) — no override needed. */
    .section-title {
        font-size: 32px;
        font-weight: 700;
        line-height: 40px;
    }

    /* Body text + opinie review font overrides — przeniesione na koniec pliku
       żeby wygrywały w source order z desktopowymi rules (line 3298+, 5286+) które są PO mobile @media. */
    .krok-number {
        font-size: 28px;
    }
    .krok-circle {
        width: 200px;
        height: 200px;
    }

    .event-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .event-row__date {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        align-items: baseline;
    }
    .event-row__date-day {
        font-size: 28px;
    }
    .event-row__date-weekday {
        font-size: 16px;
    }

    /* Banner portret na mobile per Figma 327×534 (vs desktop 482 landscape).
       aspect-ratio: 327/534 = 0.612 — height auto, dopasowuje się do dostępnej szerokości.
       Override per sekcja: .mecenasi-section ma kwadrat 1:1 + ukryty venue (decyzja klienta 2026-05-26). */
    .mecenas-banner {
        aspect-ratio: 327 / 534;
        height: auto;
    }

    /* Sekcja Mecenasi kultury — kwadratowy banner + tylko tytuł (bez venue).
       Selektor 0,0,2,0 nadpisuje aspect-ratio na .mecenas-banner. */
    .mecenasi-section .mecenas-banner {
        aspect-ratio: 1 / 1;
    }
    .mecenasi-section .mecenas-venue {
        display: none;
    }
    /* Title Sora 600 24px line-height normal (wg Figma m-01 banner).
       .mecenas-venue już Montserrat 500 18/26 — bez zmian na mobile. */
    .mecenas-title {
        font-size: 24px;
        line-height: normal;
    }

    /* Banner content layout na mobile: stack column — info na górze (title + venue),
       nav pill pod spodem dosunięty do LEFT edge per Figma m-01. */
    .mecenas-banner-content {
        padding: 24px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .mecenas-info {
        max-width: none;
        width: 100%;
    }

    /* Aktualności mobile (Figma m-01): native scroll-snap carousel, hide nav arrows,
       wszystkie karty same size 300×411 (bez --featured/--secondary różnicy),
       phantom ::after scroll buffer (analogiczny pattern do galeria mobile sesja 2026-05-11). */
    .news-nav {
        display: none;
    }

    .news-carousel {
        overflow: visible;
    }
    .news-carousel__inner {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        padding-right: 0;
        scrollbar-width: none;
        scroll-padding-left: var(--page-pad);
    }
    .news-carousel__inner::-webkit-scrollbar {
        display: none;
    }
    .news-carousel__track {
        transform: none !important; /* override JS translateX z sek. 8b */
        will-change: auto;
        align-items: stretch; /* wszystkie karty same height */
        gap: 16px;
    }
    /* Phantom flex item = scroll buffer po ostatniej karcie. padding-right na inner
       + margin-right na last-child nie są honorowane przez flex+overflow:auto. */
    .news-carousel__track::after {
        content: '';
        flex: 0 0 var(--page-pad);
        align-self: stretch;
    }

    /* Karty same size 300×411 — bez --featured / --secondary różnicy wizualnej */
    .news-card {
        flex: 0 0 300px;
        width: 300px;
        scroll-snap-align: start;
    }
    .news-card--featured,
    .news-card--secondary {
        height: 411px;
    }
    .news-card--featured .news-card__image-wrap,
    .news-card--secondary .news-card__image-wrap {
        top: 41px;
    }

    /* Tytuł Sora 600 24px line-height normal (Figma m-01); kategoria Montserrat 400 14/2.1
       (już desktop spec, no override potrzebny). */
    .news-card__title {
        font-size: 24px;
        line-height: normal;
        bottom: 32px;
        right: 76px;
    }
    .news-card__btn {
        bottom: 32px;
    }

    /* Polecane miejsca smaku mobile (Figma m-01): 2 wiersze kafli, horizontal swipe.
       Negative margin breakuje grid POZA container-gk (margin -page-pad neutralizuje parent padding),
       wewnątrz padding-left + padding-right żeby first/last cards align z content area. */
    .miejsca-grid {
        display: grid;
        grid-template-rows: repeat(2, auto);
        grid-auto-flow: column;
        grid-auto-columns: 300px;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Break out of container-gk padding */
        margin-left: calc(-1 * var(--page-pad));
        margin-right: calc(-1 * var(--page-pad));
        padding-left: var(--page-pad);
        padding-right: var(--page-pad);
        scroll-padding-left: var(--page-pad);
    }
    .miejsca-grid::-webkit-scrollbar {
        display: none;
    }

    /* Listing miejsc smaku (miejsca-smaku.html) — mobile single column, max 6 kafli.
       Override desktop 4-col; pozostałe 6 (z 12) ukryte. */
    .miejsca-smaku-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .miejsca-smaku-grid .miejsce-card:nth-child(n+7) {
        display: none;
    }

    /* Karty fixed 300×412 */
    .miejsca-section .miejsce-card {
        width: 300px;
        scroll-snap-align: start;
    }
    .miejsce-card__img-wrap {
        height: 412px;
    }

    /* Orange info pill 263×123 (per Figma) — right offset = card_width 300 - 16 left - 263 = 21.
       Text-col centered (default), arrow przesunięty 4px w dół żeby jego bottom edge zrównał się
       z bottom edge city text (centered arrow miałby bottom 3.5px wyżej niż city bottom). */
    .miejsce-card__info {
        right: 21px;
        height: 123px;
        padding: 0 16px;
    }
    .miejsca-section .miejsce-card__arrow {
        transform: translateY(15px);
    }

    /* Typography: name Montserrat 600 16/22, city Montserrat 300 14/20 (per Figma m-01) */
    .miejsce-card__name {
        font-family: var(--font-montserrat);
        font-weight: 600;
        font-size: 16px;
        line-height: 22px;
    }
    .miejsce-card__city {
        font-size: 14px;
        line-height: 20px;
        margin-top: 2px;
    }


    /* O nas mobile: image 326×326 square (per Figma m-01) — content stack column. */
    .o-nas-content {
        flex-direction: column;
    }
    .o-nas-image-wrap {
        flex: none;
        width: 326px;
        max-width: 100%;
        height: 326px;
    }
    .footer-nav {
        flex-direction: column;
        gap: 32px;
    }

    .back-to-top {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   18. ROZBIEGÓWKA – wybór miasta
   -------------------------------------------------------------------------- */

.city-chooser {
    margin-top: var(--header-h);
}

/* Panel miasta – desktop: pełna szerokość, 700px wysokości */
.city-panel {
    position: relative;
    height: 700px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* Wrapper zdjęcia – desktop: pokrywa cały panel */
.city-panel__img-wrap {
    position: absolute;
    inset: 0;
}

/* Zdjęcie tła */
.city-panel__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Gradientowe nakładki – desktop */
.city-panel__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.city-panel__overlay--left {
    background:
        linear-gradient(90deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2) 100%),
        linear-gradient(-75.7deg, rgba(242,123,53,0) 0.2%, rgb(242,123,53) 99.8%);
}

.city-panel__overlay--right {
    background:
        linear-gradient(90deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2) 100%),
        linear-gradient(255.3deg, rgb(242,123,53) 0.76%, rgba(242,123,53,0) 99.25%);
}

/* Obszar treści – desktop */
.city-panel__content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding-left: 82px;
    padding-right: 82px;
}

.city-panel__content--right {
    display: flex;
    justify-content: flex-end;
}

/* Blok tekstowy */
.city-panel__text {
    max-width: 602px;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

/* Nagłówek + opis – gap 24px wg Figma */
.city-panel__heading {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Nagłówek miasta */
.city-panel__name {
    font-family: var(--font-sora);
    font-weight: 600;
    font-size: 40px;
    line-height: 1;
    color: var(--white);
    margin: 0;
}

/* Opis */
.city-panel__desc {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.city-panel__lead {
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--white);
    margin: 0;
}

.city-panel__body {
    font-family: var(--font-montserrat);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--white);
    margin: 0;
}

/* Przycisk "Poznaj miasto" – desktop: biały z rozmyciem */
.btn-city {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    padding: 15px 20px;
    background: rgba(255,255,255,0.9);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 16px;
    color: var(--black);
    text-decoration: none;
    align-self: flex-start;
    transition: background 0.3s, color 0.3s;
    --fill-0: var(--orange);
    --stroke-0: var(--black);
}

.btn-city:hover {
    background: var(--black);
    color: var(--white);
}
/* Strzałka jako span z background-image (nie inline SVG) -- 2 stany: default + hover */
.btn-city__arrow {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    background-image: url('../img/icons/btn-city-arrow.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.btn-city:hover .btn-city__arrow {
    background-image: url('../img/icons/btn-arrow.svg');
}

/* --------------------------------------------------------------------------
   Rozbiegówka – tablet (992px–1199px): tekst węższy
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .city-panel__content {
        padding-left: 48px;
        padding-right: 48px;
    }
}

/* --------------------------------------------------------------------------
   Rozbiegówka – mobile (≤575px): zdjęcie na górze, tekst czarny na białym
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {

    /* Panel – pionowy stack, brak stałej wysokości */
    .city-panel {
        height: auto;
        flex-direction: column;
        align-items: stretch;
        overflow: visible;
    }

    /* Wrapper zdjęcia – flow, 327px */
    .city-panel__img-wrap {
        position: relative;
        height: 327px;
        flex-shrink: 0;
        overflow: hidden;
    }

    /* Gradient mobilny – orange od dołu */
    .city-panel__overlay--left,
    .city-panel__overlay--right {
        background:
            linear-gradient(90deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2) 100%),
            linear-gradient(188.2deg, rgba(242,123,53,0) 38.4%, rgb(242,123,53) 98.7%);
    }

    /* Treść – biały blok poniżej zdjęcia */
    .city-panel__content,
    .city-panel__content--right {
        position: static;
        display: block;
        width: 100%;
        max-width: 100%;
        padding: 51px 24px;
        background: var(--white);
        justify-content: flex-start;
    }

    /* Blok tekstu – pełna szerokość */
    .city-panel__text {
        max-width: 100%;
        gap: 36px;
    }

    /* Tytuł – czarny, 32px */
    .city-panel__name {
        color: var(--black);
        font-size: 32px;
    }

    /* Opisy – czarne, 14px, mobile line-height */
    .city-panel__lead {
        color: var(--black);
        font-size: 14px;
        line-height: 20px;
    }

    .city-panel__body {
        color: var(--black);
        font-size: 14px;
        font-weight: 300;
        line-height: 20px;
    }

    /* Przycisk – pomarańczowy, wyśrodkowany w stacku, ikona 16×16 wg Figma 2335:11125.
       Mobile używa Component 109 (default) / Component 110 (hover): biały okrąg + czarny chevron,
       odwrotność desktopu (orange circle + black chevron). */
    .btn-city {
        align-self: center;
        background: var(--orange);
        color: var(--white);
        gap: 16px;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        --fill-0: var(--white);
        --stroke-0: var(--black);
    }

    .btn-city:hover {
        background: var(--orange-light);
        color: var(--white);
        --fill-0: var(--white);
        --stroke-0: var(--black);
    }

    .btn-city svg {
        width: 16px;
        height: 16px;
    }
}

/* --------------------------------------------------------------------------
   18b. HERO – wariant z pomarańczowym gradientem (mecenasi.html, d-07)
   -------------------------------------------------------------------------- */

/* Modifier .hero--orange: gradient pomarańczowy z dolnego-lewego (Rectangle 209 z Figmy).
   Bardziej skupiony (start 50%) i delikatniejszy (max 0.5) — orange tylko w dolnym-lewym ~40%, top-right czysty.
   Bez warstwy 0.15 black (powodowała ogólne ściemnienie obrazu). */
.hero--orange .hero-bg-overlay {
    background: linear-gradient(245deg,
        rgba(242, 123, 53, 0) 50%,
        rgba(242, 123, 53, 0.55) 100%
        );
}

/* Przycisk play – Group 322 z Figmy (Ellipse 16 + Vector 75 wewnątrz play-button.svg).
   Sam SVG niesie kolor i kształt – wrapper to tylko pozycja + animacja. */
.hero-play-btn {
    position: absolute;
    top: calc(var(--header-h) + 45px);
    right: var(--page-pad);
    z-index: 2;
    display: inline-flex;
    width: 37px;
    height: 37px;
    border-radius: 50%;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.hero-play-btn:hover {
    transform: scale(1.08);
    opacity: 0.9;
}

.hero-play-btn img {
    width: 100%;
    height: 100%;
    display: block;
}

@media (max-width: 575.98px) {
    /* Po #18 (header relative in-flow, hero padding-top: 0) hero zaczyna się pod headerem.
       Play btn jest absolute względem hero — wystarczy 20px od top hero (bez header-h compensation). */
    .hero-play-btn {
        top: 20px;
    }
}

/* --------------------------------------------------------------------------
   18c. MODAL VIDEO (Frame 872 z d-06/m-06-Home_video)
   --------------------------------------------------------------------------
   Otwiera się po kliknięciu .hero-play-btn. Tło lekko przyciemnione (rgba 0.5),
   modal 986×501 desktop / 327×~184 mobile (16:9 ratio), border 1px #F8F8F8,
   rounded 24, close X w prawym górnym rogu (orange + white X). */

/* Modal jako fixed overlay obejmujący hero (h=780); center align — wizualnie modal
   pojawia się na środku hero góra-dół. Padding-top var(--header-h) by nie przesłaniać header. */
.video-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 780px; /* matches .hero height — modal centruje się względem hero */
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--header-h) 24px 24px;
}

.video-modal[hidden] {
    display: none !important;
}

/* Dim backdrop (lekkie przyciemnienie reszty ekranu wg Figmy) */
.video-modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    animation: videoBackdropIn 0.3s ease both;
}

/* Dialog: zaślepka graficzna (checker placeholder + 3 buttony) — backend
   wstawi player gdy będzie real video URL. */
.video-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 986px;
    border-radius: var(--radius-card);
    overflow: visible;
    animation: videoModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Placeholder — checker pattern w stylu Figmy "transparency indicator".
   Repeating-conic-gradient daje 2-kolor szachownicę 32×32. Backend zamieni na <iframe YT>. */
.video-modal__placeholder {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-card);
    overflow: hidden;
    background:
        repeating-conic-gradient(#EAEAEA 0% 25%, #F8F8F8 0% 50%) 0 0 / 32px 32px;
}

/* Play button — lewy dolny róg, statyczny placeholder (backend doda handler) */
.video-modal__play {
    position: absolute;
    left: 16px;
    bottom: 16px;
    width: 37px;
    height: 37px;
    padding: 0;
    background: none;
    border: none;
    cursor: default;
    z-index: 2;
}
.video-modal__play img {
    width: 100%;
    height: 100%;
    display: block;
}

/* Fullscreen button — prawy dolny róg, statyczny placeholder */
.video-modal__fullscreen {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 37px;
    height: 37px;
    padding: 0;
    background: none;
    border: none;
    cursor: default;
    z-index: 2;
}
.video-modal__fullscreen img {
    width: 100%;
    height: 100%;
    display: block;
}

/* Close button — orange #F27B35 koło 37×37 z białą X (popup-close.svg).
   Wewnątrz ramki (prawy górny róg, 16/16 offset) per Figma d-06. */
.video-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 37px;
    height: 37px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 2;
    transition: transform 0.2s ease;
}

.video-modal__close:hover {
    transform: scale(1.1);
}
.video-modal__close img {
    width: 100%;
    height: 100%;
    display: block;
}

/* Animacje wejścia */
@keyframes videoBackdropIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes videoModalIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Body scroll lock klasa (dodawana JS-em gdy modal otwarty) */
body.video-modal-open {
    overflow: hidden;
}

/* Mobile (Figma m-06: mniejszy modal, krótszy hero) */
@media (max-width: 575.98px) {
    .video-modal {
        height: 600px;
        padding: var(--header-h) 16px 16px;
    }
    .video-modal__close {
        top: 12px;
        right: 12px;
    }
    .video-modal__play {
        left: 12px;
        bottom: 12px;
    }
    .video-modal__fullscreen {
        right: 12px;
        bottom: 12px;
    }
}

/* --------------------------------------------------------------------------
   19. MECENASI – LISTA KAFLI (mecenasi.html, frame d-07/m-07)
   -------------------------------------------------------------------------- */
.mecenasi-list-section {
    padding-top: 80px;
}

/* Frame 849: 3 rzędy po 4 kafle, oddzielone liniami Vector 66/67. */
.mecenasi-grid {
    margin-bottom: 64px;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
}

.mecenasi-grid__row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    padding: 24px 0;
}

.mecenasi-grid__row + .mecenasi-grid__row {
    border-top: 1px solid #e5e5e5;
}

.mecenas-tile {
    position: relative;
    display: block;
    height: 534px;
    border-radius: var(--radius-card);
    overflow: hidden;
    color: var(--white);
    text-decoration: none;
    isolation: isolate;
}

/* Pozycjonowanie obrazu wg Figma (Frame 861 Default):
   w 361.16%, h 147.44%, left -182.58%, top -22.43%.
   Hover (Variant2): w 434.63%, h 177.43%, left -238.04%, top -35.58% — czyli ~1.2x zoom. */
.mecenas-tile__img {
    position: absolute;
    width: 361.16%;
    height: 147.44%;
    left: -182.58%;
    top: -22.43%;
    max-width: none;
    object-fit: cover;
    z-index: 1;
    transform-origin: center center;
    transition: transform 0.5s ease;
}

.mecenas-tile:hover .mecenas-tile__img {
    transform: scale(1.2);
}

.mecenas-tile__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(248.93deg, rgba(0,0,0,0) 28.77%, rgba(242,123,53,0.65) 76.8%),
        rgba(0,0,0,0.15);
}

.mecenas-tile__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;       /* center buttona horyzontalnie */
    gap: 8px;
}

.mecenas-tile__name {
    font-family: var(--font-sora);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.15;
    color: var(--white);
    margin: 0;
    width: 100%;
    text-align: left;
}

.mecenas-tile__desc {
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;
    color: var(--white);
    margin: 0;
    width: 100%;
    text-align: left;
}

/* button_orange w kaflu: padding 15/20, gap 16, ikona 16x16 (wg Frame 861). */
.mecenas-tile__btn {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 15px 20px;
    margin-top: 8px;
    background: var(--orange);
    border-radius: var(--radius-pill);
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    color: var(--white);
    transition: background 0.2s ease, gap 0.2s ease;
}

.mecenas-tile__btn img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.mecenas-tile:hover .mecenas-tile__btn {
    background: var(--orange-light);
    gap: 20px;
}

/* Banner mecenasa jako link (kursor + reset koloru) */
.mecenas-banner--link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* Stretched link — banner jako <div> z osobnym __link pokrywającym całość.
   Dlaczego: nav buttons (prev/next dla carousel) były wcześniej wewnątrz <a>, więc klik
   na nie nawigował zamiast przewijać. Teraz <a> jest osobnym overlayem (z-index 1),
   nav-buttons mają pointer-events: auto + z-index 2 (klikalne osobno, NIE nawigują). */
.mecenas-banner__link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.mecenas-banner > :not(.mecenas-banner__link) {
    pointer-events: none;
}

.mecenas-banner .mecenas-nav,
.mecenas-banner .mecenas-nav-btn {
    pointer-events: auto;
}

.mecenas-banner .mecenas-nav {
    position: relative;
    z-index: 2;
}

/* Click-shield: nav ma border-radius 24px — Chrome clipuje hitbox do rounded shape,
   więc rogi pigułki przepuszczały klik do .mecenas-banner__link pod spodem. ::before bez
   border-radius wypełnia bounding box rectangle i catchuje kliki w rogach.
   z-index:-1 (w obrębie stacking nav z-index:2) wypycha shield POD in-flow children
   (buttony), żeby kliki na buttony hitowały buttony, nie shield. */
.mecenas-banner .mecenas-nav::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: auto;
    z-index: -1;
}

/* --------------------------------------------------------------------------
   20. MECENAS – WIZYTÓWKA (mecenas.html, frame d-08/m-08)
   -------------------------------------------------------------------------- */

/* Hero wizytówki – wg Figma d-08 / Rectangle 94:
   - Pełna szerokość, 350px wysokości
   - bg image (zdjęcie wnętrza teatru) + 2 overlaye:
     1) linear-gradient 198.79deg cyan rgba(0,232,252,0.65) bottom-left
     2) rgba(0,0,0,0.15) – delikatny czarny dla kontrastu z białym tekstem
   - Layout: logo card 160×133 (Rectangle 209) na lewej krawędzi (x=78),
     heading block (Frame 723: tytuł + nazwa) obok (x=274), social (Frame 738) pod */
.mecenas-hero {
    position: relative;
    margin-top: var(--header-h);
    height: 350px;
}

.mecenas-hero__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.mecenas-hero__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mecenas-hero__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(198.79deg, rgba(0,0,0,0) 28.77%, rgba(0,232,252,0.65) 76.8%),
        rgba(0,0,0,0.15);
}

/* Lokal gastronomiczny — orange overlay zamiast cyan (kultura → cyan, gastronomia → orange) */
.mecenas-hero--lokal .mecenas-hero__overlay {
    background:
        linear-gradient(198.79deg, rgba(0,0,0,0) 28.77%, rgba(242,123,53,0.65) 76.8%),
        rgba(0,0,0,0.15);
}

.mecenas-hero__inner {
    position: relative;
    height: 100%;
}

/* Logo card – biała kwadratowa karta WEWNĄTRZ hero (lewy dół), bottom przy hero bottom.
   border-radius: TOP-only żeby bottom "stapiał się" z białym tłem sekcji niżej. */
.mecenas-hero__logo-card {
    position: absolute;
    bottom: 0;
    left: var(--page-pad);
    width: 160px;
    height: 133px;
    background: var(--white);
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    z-index: 2;
}

/* Logo Capa_1 – małe, 78×59, w środku karty */
.mecenas-hero__logo {
    /*    width: 78px;
        height: 59px;*/
    max-width: 150px;
    max-height: 100px;
    object-fit: contain;
    display: block;
}

/* Heading block: kind + name (Frame 723) – obok logo card.
   Pozycja wg Figma: top y=297 = 217 od hero top → bottom = 49 od hero bottom.
   Left = page-pad (78) + logo card width (160) + gap (36) = 274 od hero left. */
.mecenas-hero__heading {
    position: absolute;
    bottom: 49px;
    left: calc(var(--page-pad) + 196px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--white);
    z-index: 2;
}

/* Tytuł "Mecenas kultury" – Sora SemiBold 40px (Desktop/H3_Semibold) */
.mecenas-hero__kind {
    font-family: var(--font-sora);
    font-weight: 600;
    font-size: 40px;
    line-height: 1;
    margin: 0;
    color: var(--white);
}

/* Nazwa – Montserrat Medium 18/26 */
.mecenas-hero__name {
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;
    color: var(--white);
    margin: 0;
}

/* Social Frame 738 – 3 cyan ikony 33.7×33.7 z gap 24px.
   Pozycja: środek na linii dolnej krawędzi hero (połowa nad / połowa pod, jak Figma).
   bottom: 0 + translateY(50%) = środek social na hero bottom. */
.mecenas-hero__social {
    position: absolute;
    bottom: 0;
    left: calc(var(--page-pad) + 196px);
    transform: translateY(50%);
    display: flex;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 3;
}

/* Social link — ikona SVG zawiera kompletny okrąg + glyph (linkedin.svg / -cyan.svg etc.).
   CSS daje tylko display + transition; bez background, border, outline — okrąg jest w SVG.
   Hover: lekkie rozjaśnienie (filter brightness), bez przezroczystości. */
.mecenas-hero__social-link {
    display: block;
    width: 34px;
    height: 34px;
    border: none;
    outline: none;
    transition: filter 0.2s ease;
}
.mecenas-hero__social-link:focus,
.mecenas-hero__social-link:focus-visible {
    outline: none;
    box-shadow: none;
}

.mecenas-hero__social-link img {
    display: block;
}
.mecenas-hero__social-link:hover {
    filter: brightness(1.1);
}

/* --- Sekcja: opis (2 kolumny tekstu) ---
   padding-bottom 60px (-20 vs global 80) — odstęp do następnej sekcji galerii zredukowany per Marcin. */
.mecenas-opis-section {
    padding-top: 64px;
    padding-bottom: 60px;
}

.mecenas-opis {
    display: grid;
    grid-template-columns: 629fr 521fr;
    gap: 134px;
    align-items: start;
}

.mecenas-opis__col p {
    margin: 0 0 16px 0;
}
.mecenas-opis__col p:last-child {
    margin-bottom: 0;
}

/*.mecenas-opis__col--lead p {*/
.mecenas-opis__col--lead {
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    color: var(--black);
}

.mecenas-opis__col--lead strong {
    font-weight: 500;
}

.mecenas-opis__col--body p {
    font-family: var(--font-montserrat);
    font-weight: 300;
    font-size: 16px;
    line-height: 26px;
    color: var(--black);
}

/* --- Sekcja: galeria zdjęć (Frame 689 + Rectangle 205 + Frame 690 + Frame 677) --- */

/* Główne zdjęcie (Rectangle 205: 1283×482) */
.mecenas-galeria__main {
    width: 100%;
    height: 482px;
    border-radius: var(--radius-card);
    overflow: hidden;
    margin-top: 32px;
}
.mecenas-galeria__main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Thumbs carousel (Frame 690: 5×302 z gap 24, total 1606 wystaje poza container).
   Pattern wg news-carousel (Frame 848): inner z padding-right:0, track translateX, JS sekcja 9c. */
.galeria-carousel {
    overflow: hidden;
    margin-top: 32px;
    /* padding-bottom: bufor dla hover scale(1.1) na .galeria-nav-btn — bez tego dolne ~1-2px
       przyciszane przez overflow:hidden parenta. 4px daje breathing room dla scale. */
    padding-bottom: 4px;
}
.galeria-carousel__inner {
    width: 100%;
    max-width: calc(var(--content-w) + var(--page-pad) * 2);
    margin: 0 auto;
    padding-left: var(--page-pad);
    padding-right: 0; /* thumbs wystają poza container w prawo */
}
.galeria-carousel__track {
    display: flex;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
.galeria-thumb {
    position: relative;
    flex: 0 0 302px;
    width: 302px;
    height: 302px;
    border-radius: var(--radius-card);
    overflow: hidden;
}
.galeria-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Nav arrows (Frame 677: Group 302 prev jasny + Group 317 next pomarańczowy), gap 8, po prawej.
   Po przeniesieniu nav INTO .galeria-carousel (mobile overlay) — żeby na desktopie strzałki
   były nadal przy prawej krawędzi CONTENT area (a nie carousel/viewport edge), wymuszamy
   max-width = content + page-pad×2 oraz padding-right = page-pad (= analogicznie do .container-gk). */
.galeria-carousel__nav {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 24px auto 0;
    max-width: calc(var(--content-w) + var(--page-pad) * 2);
    padding-right: var(--page-pad);
    box-sizing: border-box;
}
.galeria-nav-btn {
    width: 27px;
    height: 27px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.galeria-nav-btn:hover {
    transform: scale(1.1);
}
.galeria-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.galeria-nav-btn:disabled:hover {
    transform: none;
}
.galeria-nav-btn img {
    width: 100%;
    height: 100%;
    display: block;
}
/* Group 302 default jest chevronem prawym → odwracamy dla "prev" */
.galeria-nav-btn--prev img {
    transform: rotate(180deg);
}

/* Button "Wróć" – button_orange + chevron right (btn-arrow.svg = white circle) */
.galeria-back {
    display: flex;
    justify-content: center;
    margin-top: 48px;
}


/* --------------------------------------------------------------------------
   21. RESPONSIVE – MECENASI/MECENAS (tablet i mobile)
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .mecenasi-grid__row {
        grid-template-columns: repeat(3, 1fr);
    }
    .mecenas-opis {
        grid-template-columns: 1fr 1fr;
        gap: 48px;
    }
}

@media (max-width: 991.98px) {
    .mecenasi-grid__row {
        grid-template-columns: repeat(2, 1fr);
    }

    .mecenas-hero {
        height: auto;
        min-height: 320px;
    }
    .mecenas-hero__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding-bottom: 24px;
    }
    .mecenas-hero__logo-card {
        width: 120px;
        height: 100px;
        padding: 16px;
        align-self: flex-start;
    }
    .mecenas-hero__heading {
        padding-top: 0;
    }
    .mecenas-hero__kind {
        font-size: 32px;
    }
    .mecenas-hero__nav {
        top: 16px;
        right: var(--page-pad);
        width: 44px;
        height: 44px;
    }

    .mecenas-opis {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .mecenas-galeria__main {
        height: 320px;
    }
    .mecenas-galeria__thumbs li {
        flex: 0 0 220px;
        height: 220px;
    }
}

@media (max-width: 575.98px) {
    .mecenasi-grid__row {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .mecenas-tile {
        height: 460px;
    }
    .mecenas-tile__name {
        font-size: 20px;
    }
    .mecenas-tile__desc {
        font-size: 16px;
        line-height: 22px;
    }

    /* --- Mobile hero (m-02 wizytowka lokalu + m-03 wizytowka miejsca kultury) ---
       Layout per design Figma: image full-width top (280px), logo card half-overlapping
       bottom edge of image, heading + social w białej przestrzeni POD hero. Menu button
       (lokal only) absolute przy prawej krawędzi image, overlap bottom. */
    .mecenas-hero {
        height: auto;
        min-height: 0;
        padding-bottom: 32px;
    }
    /* BG → normal flow (relative) zamiast absolute = bg zajmuje 280px na górze,
       reszta hero wewnątrz .mecenas-hero__inner ląduje pod spodem */
    .mecenas-hero__bg {
        position: relative;
        inset: auto;
        width: 100%;
        height: 280px;
    }
    .mecenas-hero__overlay {
        display: none;
    }   /* czyste zdjęcie na mobile per design */

    .mecenas-hero__inner {
        position: static;           /* static → absolute menu-btn anchoruje do .mecenas-hero (relative) */
        height: auto;
    }

    /* Logo card: normal flow + ujemne margin-top żeby overlap dolny edge bg po 50% */
    .mecenas-hero__logo-card {
        position: relative;
        bottom: auto;
        left: auto;
        width: 130px;
        height: 130px;
        margin-top: -65px;        /* połowa wysokości = overlap bg po 50% */
        padding: 16px;
        border-radius: var(--radius-card);
        z-index: 4;
    }

    /* Heading: black text (zamiast white na overlay), normal flow pod logo */
    .mecenas-hero__heading {
        position: relative;
        bottom: auto;
        left: auto;
        margin-top: 24px;
        color: var(--black);
    }
    .mecenas-hero__kind {
        color: var(--black);
        font-size: 32px;
    }
    .mecenas-hero__name {
        color: var(--black);
        font-size: 16px;
        line-height: 22px;
    }

    /* Social: normal flow pod heading, większe ikony żeby były bardziej tap-friendly */
    .mecenas-hero__social {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        margin: 24px 0 0;
        gap: 16px;
    }
    .mecenas-hero__social-link,
    .mecenas-hero__social-link img {
        width: 40px;
        height: 40px;
    }

    /* Menu btn (tylko lokal): absolute, prawy róg bg, połowa nad/połowa pod bg bottom.
       Override desktop static + 991.98 static positioning. */
    .mecenas-hero--lokal .mecenas-hero__menu-btn {
        position: absolute;
        top: 280px;               /* bg bottom edge — translateY(-50%) wypycha połowę nad */
        right: var(--page-pad);
        bottom: auto;
        left: auto;
        transform: translateY(-50%);
        margin: 0;
        padding: 12px 20px;
        font-size: 16px;
        gap: 12px;
        align-self: auto;
    }
    .mecenas-hero--lokal .mecenas-hero__menu-btn img {
        width: 24px;
        height: 21px;
    }

    .mecenas-galeria__main {
        height: 220px;
    }
    .mecenas-galeria__thumbs li {
        flex: 0 0 180px;
        height: 180px;
    }
}

/* ==========================================================================
   22. PROFIL UŻYTKOWNIKA (profil-uzytkownika.html, frame d-04 / m-04)
   ========================================================================== */

/* HERO – img bg + osobny overlay rgba (zamiast blend-mode multiply, żeby uzyskać
   delikatniejszą warstwę pomarańczową wg Figma node 2335:20793 / Rectangle 226).
   Header fixed = 80px + 24 spacing = margin-top 104. */
.profil-hero {
    padding-top: 104px;
}
.profil-hero__inner {
    position: relative;
    height: 213px;
    border-radius: 24px;
    overflow: hidden;
}
.profil-hero__bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.profil-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(242, 123, 53, 0.8); /* Figma: rgba(242,123,53,0.8) overlay normal */
}
.profil-hero__btn {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    padding: 15px 20px;
    border: 1px solid #fff;
    border-radius: 100px;
    background: transparent;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.profil-hero__btn:hover {
    background: #fff;
    color: #F27B35;
}

/* SECTION wrapper – grid 322 + 882 z gap 49px (profil-grid też ma class
   container-gk żeby dziedziczyć page padding/max-width) */
.profil-section {
    padding: 32px 0 64px;
}
.profil-grid {
    display: grid;
    grid-template-columns: 322px 1fr;
    gap: 49px;
    align-items: start;
}

/* SIDEBAR – Twoje konto */
.profil-sidebar {
    background: #F8F8F8;
    border-radius: 24px;
    padding: 36px;
    min-height: 683px;
}
.profil-sidebar__title {
    margin: 0 0 24px;
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1;
    color: #000;
}
.profil-nav__list,
.profil-nav__sublist {
    list-style: none;
    margin: 0;
    padding: 0;
}
.profil-nav__list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.profil-nav__sublist {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

.profil-nav__link,
.profil-nav__group-title {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    color: #000;
    text-decoration: none;
    transition: color .2s ease;
}
.profil-nav__link:hover {
    color: #F27B35;
}
.profil-nav__link--active {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}
.profil-nav__sublink {
    display: block;
    font-family: 'Sora', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 1;
    color: #000;
    text-decoration: none;
    transition: color .2s ease;
}
.profil-nav__sublink:hover {
    color: #F27B35;
}
.profil-nav__link.is-disabled,
.profil-nav__sublink.is-disabled {
    color: #000;
    cursor: not-allowed;
    pointer-events: none;
}

/* PASEK POWROTU – mobile only (toggle JS) */
.profil-back {
    display: none; /* widoczny tylko na mobile gdy content otwarty */
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 16px;
    background: #F8F8F8;
    border: 0;
    border-radius: 24px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: #000;
    text-align: left;
}
.profil-back img {
    width: 37px;
    height: 37px;
    flex-shrink: 0;
}

/* CONTENT panel – Moje dane */
.profil-content {
    background: #F8F8F8;
    border-radius: 24px;
    padding: 36px 52px;
    min-height: 683px;
}
.profil-content__title {
    margin: 0 0 12px;
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 1;
    color: #000;
}
.profil-content__desc {
    margin: 0 0 36px;
    font-family: 'Sora', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.4;
    color: #000;
    max-width: 770px;
}

/* GÓRNA KARTA – avatar + grid danych + edytuj */
.profil-card {
    display: grid;
    grid-template-columns: 95px 1fr auto;
    gap: 36px;
    align-items: center;
    padding-bottom: 36px;
}
.profil-card__avatar {
    width: 95px;
    height: 95px;
    border-radius: 24px;
    object-fit: cover;
    display: block;
}
.profil-card__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 24px;
    column-gap: 32px;
}

/* POJEDYNCZE POLE label + value */
.profil-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.profil-field__label {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    color: #000;
}
.profil-field__value {
    font-family: 'Sora', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 1;
    color: #000;
}

/* WIERSZ z ikoną cyan + label/value + edytuj
   Większy gap między ikoną a tekstem niż w Figma (132px desktop, w 882-wide content
   ikona ma flex-start a tekst dalej). Border-top na każdym row (bez pierwszego –
   ten jest oddzielony od profil-card border-bottem). */
.profil-row {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    gap: 132px;
    align-items: center;
    padding: 28px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}
/* Pierwszy row po profil-card – bez border-top (linia byłaby duplikatem
   z border-bottom karty avatara) */
.profil-card + .profil-row {
    border-top: 0;
}
.profil-row__icon {
    width: 34px;
    height: 34px;
    display: block;
    flex-shrink: 0;
}
.profil-row__field {
    min-width: 0;
} /* żeby grid się skurczył gdy gap duży */

/* BUTTON Edytuj – wariant outline button_orange (Figma Component 109/110).
   Default: pomarańczowy border + czarny tekst.
   Hover: czarny border + pomarańczowy tekst (jak na screenie "przyciski"). */
.btn-edit {
    display: inline-flex;
    align-items: center;
    padding: 15px 20px;
    border: 1px solid #F27B35;
    border-radius: 100px;
    background: transparent;
    color: #000;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .2s ease, color .2s ease;
}
.btn-edit:hover {
    border-color: #000;
    color: #F27B35;
    background: transparent;
}

/* Avatar w headerze – aktywny stan (border orange) */
.header-avatar--active img {
    box-shadow: 0 0 0 2px #F27B35;
    border-radius: 50%;
}

/* Mecenas banner – wariant compact dla profil-uzytkownika (Frame 846 = 1282×326) */
.mecenas-banner--compact {
    height: 326px;
}

/* ----- RESPONSIVE: tablet (< 992px) ----- */
@media (max-width: 991.98px) {
    .profil-grid {
        grid-template-columns: 280px 1fr;
        gap: 32px;
    }
    .profil-sidebar {
        padding: 28px;
        min-height: 0;
    }
    .profil-content {
        padding: 28px 32px;
        min-height: 0;
    }
    .profil-card {
        grid-template-columns: 95px 1fr;
        grid-template-areas:
            "avatar grid"
            "btn    btn";
    }
    .profil-card__avatar {
        grid-area: avatar;
    }
    .profil-card__grid   {
        grid-area: grid;
    }
    .profil-card .btn-edit {
        grid-area: btn;
        justify-self: start;
    }
}

/* ----- RESPONSIVE: mobile (< 768px) – TOGGLE menu/content ----- */
@media (max-width: 767.98px) {
    /* hero zachowuje padding-top: 104px z bazowej reguły (header 80 + spacing 24) */
    .profil-hero__btn {
        padding: 12px 16px;
        font-size: 14px;
        top: 12px;
        right: 12px;
    }

    /* Domyślnie: ukryj hero, content, back – pokazuj tylko menu */
    .profil-hero {
        display: none;
    }
    .profil-content {
        display: none;
    }
    .profil-back {
        display: none;
    }
    .profil-section + .mecenasi-section {
        display: none;
    }

    .profil-grid {
        display: block;
        padding: 0 24px;
    }
    .profil-section {
        padding-top: 104px; /* 80 fixed header + 24 spacing */
    }
    .profil-sidebar {
        padding: 24px;
        border-radius: 24px;
    }
    .profil-sidebar__title {
        font-family: 'Montserrat', sans-serif;
        font-weight: 600;
        font-size: 16px;
        line-height: 22px;
        margin-bottom: 16px;
    }
    .profil-nav__list {
        gap: 16px;
    }
    .profil-nav__sublist {
        gap: 14px;
        margin-top: 14px;
    }
    .profil-nav__link,
    .profil-nav__group-title {
        font-size: 14px;
        line-height: 20px;
    }
    .profil-nav__sublink {
        font-size: 13px;
    }

    /* Stan: content otwarty (klik "Moje dane") */
    .profil-uzytkownika.is-content-open .profil-sidebar {
        display: none;
    }
    .profil-uzytkownika.is-content-open .profil-back {
        display: flex;
        margin-bottom: 24px;
    }
    .profil-uzytkownika.is-content-open .profil-hero {
        display: block;
        margin-bottom: 24px;
    }
    .profil-uzytkownika.is-content-open .profil-content {
        display: block;
    }
    .profil-uzytkownika.is-content-open .profil-section + .mecenasi-section {
        display: block;
    }

    .profil-content {
        padding: 0;
        background: transparent;
        border-radius: 0;
    }
    .profil-content__title {
        font-family: 'Sora', sans-serif;
        font-weight: 700;
        font-size: 20px;
        line-height: 33px;
        margin-bottom: 8px;
    }
    .profil-content__desc {
        font-size: 13px;
        line-height: 20px;
        margin-bottom: 24px;
    }

    /* Avatar mobile – większy, dane stack pod nim */
    .profil-card {
        grid-template-columns: 117px 1fr;
        grid-template-areas:
            "avatar grid"
            "btn    btn";
        gap: 16px 28px;
        padding-bottom: 24px;
    }
    .profil-card__avatar {
        width: 117px;
        height: 117px;
    }
    .profil-card__grid {
        grid-template-columns: 1fr;
        row-gap: 16px;
    }
    .profil-card .btn-edit {
        justify-self: start;
    }
    .profil-field__label,
    .profil-field__value {
        font-size: 13px;
    }

    .profil-row {
        grid-template-columns: 34px 1fr;
        gap: 24px; /* mobile: ikony bliżej tekstu, nie 132px */
        padding: 20px 0;
    }
    .profil-row .btn-edit {
        display: none;
    }

    /* Hero – padding-top: 104 jest już z bazowej reguły, nie nadpisujemy */
    .profil-uzytkownika.is-content-open .profil-hero__inner {
        height: 213px;
    }
    /* Sidebar był z padding-top: 104; w trybie content-open hero przejmuje to zadanie */
    .profil-uzytkownika.is-content-open .profil-section {
        padding-top: 24px;
    }
}

/* ----- RESPONSIVE: małe mobile (< 380px) ----- */
@media (max-width: 379.98px) {
    .profil-grid {
        padding: 0 16px;
    }
    .profil-sidebar {
        padding: 20px;
    }
    .profil-card {
        grid-template-columns: 100px 1fr;
        gap: 14px 20px;
    }
    .profil-card__avatar {
        width: 100px;
        height: 100px;
    }
}

/* ===== RESPONSIVE: WIDOKI WYDARZEŃ (kafle / poziome / kalendarz) =====
   Definiowane PO bazowych regułach żeby nadpisać grid-template-columns. */

/* Tablet (< 992px): kafle 3 kol */
@media (max-width: 991.98px) {
    .events-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .event-card:nth-child(4n) {
        border-right: 1px solid rgba(0, 0, 0, 0.08);
    }
    .event-card:nth-child(3n) {
        border-right: 0;
    }
    /* Calendar: scroll-x bo 7 kolumn za szerokie */
    .events-calendar {
        overflow-x: auto;
    }
    .cal-week {
        min-width: 900px;
    }
}

/* Mobile (< 768px): wg Figma m-01-home tylko 2 widoki – kafle (default) + kalendarz.
   Widok poziomy (list) jest UKRYTY na mobile; JS ma fallback do grid w main.js sek. 12. */
@media (max-width: 767.98px) {
    .view-btn[data-view="list"] {
        display: none;
    }
    .events-grid {
        grid-template-columns: 1fr;
    }
    /* Mobile: max 4 kafle widoczne — pokaż tylko pierwsze 4, ukryj resztę.
       EXCEPT wszystkie-wydarzenia.html, która ma własną paginację JS (state.mobileLimit). */
    .events-grid .event-card:nth-child(n+5) {
        display: none;
    }
    .events-section--wszystkie .events-grid .event-card:nth-child(n+5) {
        display: flex;
    }
    .event-card {
        border-right: 0 !important;
        padding: 32px 0; /* wg Figma 2255:12382 py-[32px] (z 24 → 32 dla większego oddechu) */
    }
    /* Większe odstępy między sekcjami: media→pills i venue→button = 32px
       (gap event-card to default 16 + margin-top 16 = 32). Wewnątrz sekcji: 16. */
    .event-card .event-card__row {
        margin-top: 16px;
    }
    .event-card .event-card__btn {
        margin-top: 16px;
    }
    /* Mobile fonty wg Figma 2335:11972 (Frame 678 Default):
       Sora SemiBold 32 / Sora Regular 20 / Montserrat Medium 15 (data),
       Montserrat SemiBold 16 (title — UWAGA: Montserrat, NIE Sora jak na desktopie),
       Montserrat Medium 14 (venue), Montserrat Medium 16 (price). */
    .event-card__day {
        font-size: 32px;
    }
    .event-card__weekday {
        font-size: 20px;
        line-height: 33px;
    }
    .event-card__time {
        font-size: 15px;
        line-height: 26px;
    }
    .event-card__title {
        font-family: var(--font-montserrat);
        font-weight: 600;
        font-size: 16px;
        line-height: 22px;
        min-height: 44px;  /* 2 × 22px -- rezerwacja 2 linii także na mobile */
    }
    .event-card__venue {
        font-size: 14px;
        line-height: 20px;
    }
    .event-card__price {
        font-size: 16px;
        line-height: 22px;
    }

    /* Button "Kup bilet" mobile wg Figma button_orange (W hug 146 / H hug 50, gap 16, padding 15 20).
       gap 24→16, ikona 34→20 (mniejszy circle dopasowany do wysokości tekstu 20px). */
    .event-card .btn-orange,
    .event-row .btn-orange {
        gap: 16px;
    }
    .event-card .btn-orange:hover,
    .event-row .btn-orange:hover {
        gap: 20px; /* hover preserve: gap +4 jak desktop (24→28), proporcjonalnie 16→20 */
    }
    .event-card .btn-orange img,
    .event-row .btn-orange img {
        width: 20px;
        height: 20px;
    }
    /* Mobile hover wg Figma 2335:11992 (Frame 678 Variant2):
       rounded:24 na całej karcie + texts/pills inset 16px (tym razem JEST inset
       w przeciwieństwie do desktopu). Image bg fills cały kafel. */
    .event-card:hover {
        border-radius: 24px;
        padding: 24px 16px;
    }
    .event-card:hover::before {
        border-radius: 24px;
    }
    /* Filtry kategorii na mobile: zamiast wrappingu do 2 linii — horizontalny scroll
       + gradient fade na krawędziach (visual cue scrollowalności).
       min-width: 0 + width: 100% pozwala flex-itemowi shrinkować poniżej intrinsic
       content width (sum tabów ~570px > 375px viewport). scroll-snap proximity
       daje gentle snap przy swipe. ::-webkit-scrollbar:display:none + scrollbar-width:none
       ukrywa scrollbar. mask-image fade 24px na obu krawędziach. */
    .events-filters {
        flex-wrap: nowrap;
        width: 100%;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    }
    .events-filters::-webkit-scrollbar {
        display: none;
    }
    .events-filters .filter-tab {
        scroll-snap-align: start;
        flex-shrink: 0;
    }
    /* Kalendarz mobile: stack pionowy zamiast 7 kolumn.
       Pokazujemy MAX 7 dni — ukrywamy week 2-5 (per user request).
       Odstępy 2× większe + data wyśrodkowana między kafelkami:
       gap (cal-week wewn.) 24 + cal-day gap 24 = równe 24 z obu stron headera (centered). */
    .events-calendar {
        overflow-x: visible;
    }
    .events-calendar .cal-week:not(:first-child) {
        display: none;
    }
    .cal-week {
        grid-template-columns: 1fr;
        min-width: 0;
        gap: 24px; /* 2× większe od poprzednich 12, równe cal-day gap żeby data była centered */
        margin-bottom: 24px;
    }
    .cal-day {
        gap: 24px;
    } /* równe cal-week gap = data centrowana między kartami */
    .cal-day__card {
        height: auto;
        min-height: 180px;
        padding: 17px 16px;
    }
}

/* ==========================================================================
   23. WYDARZENIE.HTML (d-10/m-10) — nagłówek, galeria, organizator, mapa
   ========================================================================== */

/* --- Nagłówek wydarzenia (Frame 14886): split 2 kol — main 779 + meta 417, gap 81 --- */
.wydarzenie-header-section {
    padding-top: 64px;
    padding-bottom: 32px;
}

.wydarzenie-header {
    display: grid;
    grid-template-columns: 779fr 417fr;
    gap: 81px;
    align-items: start;
}

.wydarzenie-header__main {
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.wydarzenie-title {
    font-family: var(--font-sora);
    font-weight: 600;
    font-size: 40px;
    line-height: 1;
    color: var(--black);
    margin: 0;
}

.wydarzenie-venue {
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 16px;
    color: #848484;
    margin: 0;
}

.wydarzenie-header__meta {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wydarzenie-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}
.wydarzenie-meta-row--cta {
    align-items: center;
}

/* Data: 22.10 (Sora SemiBold 40) / Środa (Sora Regular 24 #848484) / godzina 19:30 */
.wydarzenie-date {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.wydarzenie-date__day {
    font-family: var(--font-sora);
    font-weight: 600;
    font-size: 40px;
    line-height: 1;
    color: var(--black);
    margin: 0;
}
.wydarzenie-date__weekday {
    font-family: var(--font-sora);
    font-weight: 400;
    font-size: 24px;
    line-height: 33px;
    color: #848484;
    margin: 0;
}
.wydarzenie-date__time {
    font-family: var(--font-montserrat);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.2;
    color: var(--black);
    margin: 7px 0 0 0;
}
.wydarzenie-date__time strong {
    font-weight: 700;
}

/* Kategoria pill (gray #F8F8F8) — tracking 2.1px uppercase */
.wydarzenie-category {
    display: inline-flex;
    align-items: center;
    background: #F8F8F8;
    border-radius: 100px;
    padding: 10px 20px;
    font-family: var(--font-montserrat);
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 2.1px;
    line-height: 1;
    text-transform: uppercase;
    color: var(--black);
    height: 37px;
    white-space: nowrap;
}

/* Cena pill (cyan #66F1FD) 114×63 */
.wydarzenie-price {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #66F1FD;
    border-radius: 47px;
    padding: 16px 28px;
    height: 63px;
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    color: var(--black);
    white-space: nowrap;
}

/* --- Galeria wydarzenia (Frame 14872) — cover 1284×482 + 2col opis + thumbs carousel + button --- */
.wydarzenie-galeria-section {
    padding-top: 32px;
    padding-bottom: 64px;
}

.wydarzenie-cover {
    width: 100%;
    height: 482px;
    border-radius: var(--radius-card);
    overflow: hidden;
    margin-bottom: 42px;
}
.wydarzenie-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Opis 2 kol — taki sam wzorzec jak .mecenas-opis (lead 629px Medium 20 / body 521px Light 16) */
.wydarzenie-opis {
    display: grid;
    grid-template-columns: 629fr 521fr;
    gap: 134px;
    align-items: start;
}
.wydarzenie-opis__col p {
    margin: 0 0 16px 0;
}
.wydarzenie-opis__col p:last-child {
    margin-bottom: 0;
}
.wydarzenie-opis__col--lead p {
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    color: var(--black);
}
.wydarzenie-opis__col--lead strong {
    font-weight: 500;
}
.wydarzenie-opis__col--body p {
    font-family: var(--font-montserrat);
    font-weight: 300;
    font-size: 16px;
    line-height: 26px;
    color: var(--black);
}

/* Galeria thumbs carousel — reuse istniejącego .galeria-carousel z mecenas
   (track translateX, JS sek. 9c). Tylko spacing-fix dla wydarzenia: */
.wydarzenie-galeria-section .galeria-carousel {
    margin-top: 42px;
}
.wydarzenie-galeria-section .section-btn-wrap {
    margin-top: 48px;
}

/* --- Sekcja: O organizatorze (Frame 14930) --- */
.wydarzenie-organizator-section {
    padding-top: 64px;
    padding-bottom: 32px;
}
.wydarzenie-organizator-section .wydarzenie-opis {
    margin-top: 32px;
}

/* --- Sekcja: Lokalizacja / Mapa (Frame 15027) — img 1284×482 + pin absolute --- */
.wydarzenie-mapa-section {
    padding-top: 64px;
    padding-bottom: 64px;
}

.wydarzenie-mapa {
    position: relative;
    width: 100%;
    height: 482px;
    border-radius: var(--radius-card);
    overflow: hidden;
    margin-top: 32px;
}
.wydarzenie-mapa__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.wydarzenie-mapa__pin {
    position: absolute;
    left: 55%;
    top: 60%;
    width: 56px;
    height: 56px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.wydarzenie-mapa__pin img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* --------------------------------------------------------------------------
   24. RESPONSIVE — WYDARZENIE.HTML
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .wydarzenie-header {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .wydarzenie-opis {
        grid-template-columns: 1fr 1fr;
        gap: 48px;
    }
    .wydarzenie-cover {
        height: 380px;
    }
    .wydarzenie-mapa {
        height: 380px;
    }
}

@media (max-width: 991.98px) {
    .wydarzenie-opis {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .wydarzenie-cover {
        height: 320px;
    }
    .wydarzenie-mapa {
        height: 320px;
    }
    .wydarzenie-title {
        font-size: 32px;
    }
}

@media (max-width: 767.98px) {
    .wydarzenie-header__meta {
        gap: 24px;
    }
    .wydarzenie-meta-row {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .wydarzenie-meta-row--cta {
        justify-content: space-between;
        gap: 16px;
    }
}

@media (max-width: 575.98px) {
    .wydarzenie-header-section {
        padding-top: 32px;
    }
    .wydarzenie-header {
        gap: 24px;
    }
    .wydarzenie-title {
        font-size: 28px;
    }
    .wydarzenie-date__day {
        font-size: 32px;
    }
    .wydarzenie-date__weekday {
        font-size: 20px;
        line-height: 1.3;
    }
    .wydarzenie-date__time {
        font-size: 16px;
    }
    .wydarzenie-cover {
        height: 260px;
        margin-bottom: 24px;
    }
    .wydarzenie-mapa {
        height: 260px;
    }
    .wydarzenie-price {
        font-size: 18px;
        height: 50px;
        padding: 12px 20px;
    }
}

/* ==========================================================================
   25. AKTUALNOSC.HTML (d-01-aktualnosc / m-05-aktualnosc) — slider hero + artykuł
   ========================================================================== */

/* --- Slider aktualności (Rectangle 209: 1440×350 desktop, 375×300 mobile) --- */
.aktualnosc-hero {
    position: relative;
    width: 100%;
    height: 350px;
    overflow: hidden;
    margin-top: 80px; /* fixed header offset */
}
.aktualnosc-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.aktualnosc-hero__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.aktualnosc-hero__overlay {
    /* Wg Figma 2335:14612 (Rectangle 209): cyan gradient z bottom-left + dark wash 15% */
    position: absolute;
    inset: 0;
    background:
        linear-gradient(198.79deg, rgba(0, 0, 0, 0) 28.77%, rgba(0, 232, 252, 0.65) 76.8%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%);
}

/* Content na dole hero: tytuł + venue (lewa) | button (prawa) */
.aktualnosc-hero__inner {
    /* Wg Figma: tytuł/button na y=332 z hero h=350 → padding-bottom = 350-(332-80+64) = 34px */
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    max-width: calc(var(--content-w) + var(--page-pad) * 2);
    margin: 0 auto;
    padding: 0 var(--page-pad) 34px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.aktualnosc-hero__info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 600px;
    color: #fff;
}
.aktualnosc-hero__title {
    font-family: var(--font-sora);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.25;
    margin: 0;
    color: #fff;
}
.aktualnosc-hero__venue {
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;
    margin: 0;
    color: #fff;
}

.aktualnosc-hero__cta {
    flex-shrink: 0;
}

/* Mobile-only chevron next (Frame 706 m-05) — ukryte na desktopie */
.aktualnosc-hero__next {
    display: none;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* --- Sekcja: artykuł (Group 443) --- */
.artykul-section {
    padding-top: 64px;
    padding-bottom: 64px;
}

.artykul-cover {
    width: 100%;
    height: 482px;
    border-radius: var(--radius-card);
    overflow: hidden;
    margin-top: 32px;
    margin-bottom: 42px;
}
.artykul-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Opis 2 kol — taki sam wzorzec jak .mecenas-opis / .wydarzenie-opis */
.artykul-opis {
    display: grid;
    grid-template-columns: 629fr 521fr;
    gap: 134px;
    align-items: start;
}
.artykul-opis__col p {
    margin: 0 0 16px 0;
}
.artykul-opis__col p:last-child {
    margin-bottom: 0;
}
.artykul-opis__col--lead p {
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    color: var(--black);
}
.artykul-opis__col--lead strong {
    font-weight: 500;
}
.artykul-opis__col--body p {
    font-family: var(--font-montserrat);
    font-weight: 300;
    font-size: 16px;
    line-height: 26px;
    color: var(--black);
}

/* Galeria thumbs — reuse istniejącego .galeria-carousel */
.artykul-section .galeria-carousel {
    margin-top: 42px;
}

/* Dolny pas — button "Następny artykuł" centered (nav arrows przeniesione do .galeria-carousel). */
.artykul-bottom {
    display: flex;
    justify-content: center;
    margin-top: 48px;
}
/* Nav arrows — shift 5px w lewo + 5px w dół wzgl. globalnego patternu.
   Dotyczy galerii w aktualnosc.html + mecenas.html + obie wizytówki + wydarzenie.html. */
.artykul-section .galeria-carousel__nav,
.mecenas-galeria-section .galeria-carousel__nav,
.wydarzenie-galeria-section .galeria-carousel__nav {
    margin-top: 29px;
    padding-right: calc(var(--page-pad) + 5px);
}

/* --------------------------------------------------------------------------
   26. RESPONSIVE — AKTUALNOSC.HTML
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .artykul-opis {
        grid-template-columns: 1fr 1fr;
        gap: 48px;
    }
    .artykul-cover {
        height: 380px;
    }
}

@media (max-width: 991.98px) {
    .artykul-opis {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .artykul-cover {
        height: 320px;
    }
    .aktualnosc-hero {
        height: 320px;
    }
}

@media (max-width: 767.98px) {
    .aktualnosc-hero {
        height: 300px;
    }
    .aktualnosc-hero__inner {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        padding-bottom: 24px;
        gap: 16px;
    }
    .aktualnosc-hero__title {
        font-size: 20px;
    }
    .aktualnosc-hero__venue {
        font-size: 16px;
        line-height: 22px;
    }
    .aktualnosc-hero__cta {
        width: auto;
    }
    .aktualnosc-hero__next {
        display: flex;
        position: absolute;
        right: 16px;
        bottom: 24px;
        width: 27px;
        height: 27px;
    }
    .aktualnosc-hero__next img {
        width: 100%;
        height: 100%;
        display: block;
    }

}

@media (max-width: 575.98px) {
    .artykul-section {
        padding-top: 32px;
        padding-bottom: 48px;
    }
    .artykul-cover {
        height: 260px;
        margin-bottom: 24px;
    }
}

/* ==========================================================================
   27. AKTUALNOSCI.HTML (d-01-aktualnosc_kafle / m-05-aktualność-kafle)
   ========================================================================== */

/* --- Sekcja: aktualności listing (Frame 710) --- */
.aktualnosci-listing-section {
    padding-top: 96px;
    padding-bottom: 64px;
}

/* Reuse .events-controls (border-bottom = Vector 66 line, active filter underline = Vector 67).
   Override: padding/margin pod aktualnosci + większy gap filtrów (64px wg Figma metadata 2335:14494).
   Plus: ukryj month-picker margin: auto (na aktualnosci ma być po prawej, nie centered). */
.events-controls--aktualnosci {
    margin-top: 48px;
}
.events-controls--aktualnosci .events-filters {
    gap: 64px;
}
.events-controls--aktualnosci .month-picker {
    margin-left: auto;
    margin-right: 0;
    padding-bottom: 8px;
}

/* Grid 4×3 (12 kart) — 3 osobne <ul> po 4 karty z <hr> między rzędami (Vector 68) */
.aktualnosci-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
    margin: 24px 0 0 0;
    padding: 0;
    list-style: none;
}
.aktualnosci-grid > li {
    display: contents;
}

/* Linia pozioma między rzędami kart (Frame 710 Vector 68) — grid-column 1/-1 (full width).
   Jako <li> wewnątrz grid; ukrywany gdy filter aktywny żeby filtrowane karty zlewały się w 1 rząd. */
/* Dwukrotny selektor (.aktualnosci-grid > li.aktualnosci-divider-row) bije
   `.aktualnosci-grid > li { display: contents }` powyżej (specyficzność 0,2,1 > 0,1,1).
   Border-color spójny z linią .events-controls (#e0e0e0) — Vector 68 z Figmy. */
.aktualnosci-grid > li.aktualnosci-divider-row {
    /* Odstęp wiersz↔linia = 32px wg Figmy. Grid row-gap = 26px, więc margin = 6px (26+6=32). */
    display: block;
    grid-column: 1 / -1;
    height: 0;
    border-top: 1px solid #e0e0e0;
    margin: 6px 0;
    list-style: none;
}
.aktualnosci-listing-section.is-filtered .aktualnosci-grid > li.aktualnosci-divider-row {
    display: none;
}

/* --- Karta aktualności (Component 126 orange / 128 cyan) ---
   - Pomarańczowy/cyan background na całym kafelku
   - Image absolute od top:41px (zostawia pasek z labelem na górze)
   - Top label (band) z dotem + kategorią
   - Tytuł 24px Sora SemiBold biały na gradient
   - Arrow up button po prawej dole */
.aktualnosc-card {
    position: relative;
    display: block;
    height: 411px;
    border-radius: var(--radius-card);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: var(--orange);
    transition: transform 0.3s ease;
}
.aktualnosc-card--cyan {
    background: #00E8FC;
}

.aktualnosc-card__image {
    position: absolute;
    top: 41px;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--radius-card);
    overflow: hidden;
    transition: top 0.4s ease;
}
.aktualnosc-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.aktualnosc-card__image::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-card);
    background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(242,123,53,0.5) 100%);
    pointer-events: none;
}
.aktualnosc-card--cyan .aktualnosc-card__image::after {
    background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,232,252,0.5) 100%);
}

/* Hover gradient (pełny kolor 100%) jako osobna warstwa ::before — opacity transition
   daje smooth fade (background-image gradient w transition jest non-animatable). */
.aktualnosc-card__image::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-card);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}
.aktualnosc-card--orange .aktualnosc-card__image::before {
    background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, var(--orange) 100%);
}
.aktualnosc-card--cyan .aktualnosc-card__image::before {
    background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #00E8FC 100%);
}
.aktualnosc-card:hover .aktualnosc-card__image::before {
    opacity: 1;
}

/* Top band label (na pomarańczowej/cyan belce) */
.aktualnosc-card__band {
    position: absolute;
    top: 12px;
    left: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 2;
}
.aktualnosc-card__dot {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
}
.aktualnosc-card__cat {
    font-family: var(--font-montserrat);
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 2.1px;
    text-transform: uppercase;
    color: #000;
}

.aktualnosc-card__title {
    /* Wg Figma 2335:11872: bottom:79 + translateY(50%) → bottom-edge ≈ 41px od dołu karty */
    position: absolute;
    bottom: 41px;
    left: 24px;
    right: 70px;
    margin: 0;
    font-family: var(--font-sora);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.1;
    color: #fff;
    z-index: 2;
}

.aktualnosc-card__btn {
    position: absolute;
    bottom: 41px;
    right: 24px;
    width: 37px;
    height: 37px;
    z-index: 2;
}
.aktualnosc-card__btn img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    transition: opacity 0.3s ease;
}
.aktualnosc-card__btn .arrow-hover {
    opacity: 0;
}

/* --- Hover (Component 126/128 z Figmy 2335:11877 / 2335:11940):
   - Image rośnie zakrywając belkę (top:41 → top:0) + scale 1.08 (inset:-3.91%)
   - Band (label "WIADOMOŚCI"/"BLOG") fade out
   - Gradient z 0.5 alpha → pełny kolor (orange #F27B35 / cyan #00E8FC)
   - Arrow: white circle + black arrow → orange circle + white arrow (Group 322 → 323)
   - Brak rotacji obrazka (różnica vs .news-card carousel) --- */
.aktualnosc-card:hover .aktualnosc-card__image {
    top: 0;
}
.aktualnosc-card:hover .aktualnosc-card__image img {
    transform: scale(1.08);
}
.aktualnosc-card:hover .aktualnosc-card__band {
    opacity: 0;
}
.aktualnosc-card:hover .aktualnosc-card__btn .arrow-default {
    opacity: 0;
}
.aktualnosc-card:hover .aktualnosc-card__btn .arrow-hover {
    opacity: 1;
}
.aktualnosc-card--orange:hover .aktualnosc-card__image::after {
    background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, var(--orange) 100%);
}
.aktualnosc-card--cyan:hover .aktualnosc-card__image::after {
    background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #00E8FC 100%);
}

.aktualnosc-card__band {
    transition: opacity 0.3s ease;
}

/* --------------------------------------------------------------------------
   28. RESPONSIVE — AKTUALNOSCI.HTML
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .aktualnosci-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991.98px) {
    .aktualnosci-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .aktualnosci-controls {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

@media (max-width: 575.98px) {
    .aktualnosci-listing-section {
        padding-top: 48px;
        padding-bottom: 48px;
    }
    .aktualnosci-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .aktualnosc-card {
        height: 380px;
    }
}

/* ==========================================================================
   29. WIZYTOWKA-MIEJSCA-KULTURY.HTML (d-03 / m-02) — opinie klientów + button cyan
   ========================================================================== */

/* Cyan button (Component 109/110 z Figma 2335:11092) — biały tekst.
   Hover (Component 110): bg light cyan 75% alpha, gap 28px, text #F8F8F8 */
.btn-cyan {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    padding: 15px 20px;
    border-radius: 100px;
    background: #00E8FC;
    color: #fff;
    text-decoration: none;
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 16px;
    transition: background 0.2s, gap 0.2s, color 0.2s;
    border: 0;
    cursor: pointer;
}
.btn-cyan:hover {
    background: rgba(102, 241, 253, 0.75);
    gap: 28px;
    color: #F8F8F8;
}
.btn-cyan img {
    width: 34px;
    height: 34px;
}

/* --- Sekcja: Opinie klientów (Frame 711 + Frame 728 d-03) --- */
/* z-index: 2 — sekcja ma `transform` z animacji section-reveal (tworzy stacking context).
   Dropdowny opinii (`.opinie-dropdown`) wystają poza dolną krawędź `.opinie-card` i muszą
   się malować NAD kolejną sekcją (.miejsca-section / .polecane-miejsca-section, też z transform).
   Bez explicit z-index sekcja jest "auto" → kolejna sekcja (później w DOM) wygrywa stacking. */
.opinie-section {
    position: relative;
    z-index: 2;
    padding-top: 64px;
    padding-bottom: 64px;
}

/* Duży cudzysłów dekoracyjny — wg Figmy: nieco prawo od tytułu (środek strony), niżej
   niż section-header. Częściowo ukryty pod kartą (z-index 0 < .opinie-card). */
.opinie-quote-decor {
    position: absolute;
    top: 20px;
    right: calc(35% - 90px);
    width: 340px;
    height: 270px;
    pointer-events: none;
    z-index: 0;
}
.opinie-quote-decor img {
    width: 100%;
    height: 100%;
    display: block;
}

.opinie-section .container-gk {
    position: relative;
    z-index: 1;
}
.opinie-card {
    position: relative;
    z-index: 1;
}

/* WHITE CARD wrapper (Rectangle 210 1284×1387 z box-shadow) — cała sekcja w jednym kontenerze */
.opinie-card {
    background: #fff;
    border-radius: var(--radius-card);
    box-shadow: 0 4px 50px rgba(0, 0, 0, 0.07);
    padding: 64px 56px;
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

/* Top row: rating box (lewa) + Q&A box (dosunięty do PRAWEJ krawędzi karty, gray sub-card).
   Q&A ma stałą szerokość ~540px wg Figmy, justify-self: end wypycha go do prawej. */
.opinie-top {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 64px;
    align-items: stretch;
}
.opinie-top .opinie-qa {
    width: 100%;
    max-width: 650px;
    justify-self: end;
    /* width 100% + max-width zamiast fixed width — inaczej na mobile (grid 1fr) child
       z width:N wymusza rozszerzenie kolumny powyżej containera (grid 1fr = minmax(auto,1fr),
       auto rośnie do min-content dziecka). Efekt: cała strona dostawała scrollWidth >viewport
       → hero rendered jak na rozjeżdżającym się viewporcie. */
}

/* Rating Frame 733 — column z 4.0 + stars + count + button cyan */
.opinie-rating {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
}
.opinie-rating__score {
    /* Wg user feedback: cieńszy + ciut mniejszy (zamiast Sora ExtraBold 81px → SemiBold 64px) */
    font-family: var(--font-sora);
    font-weight: 600;
    font-size: 64px;
    line-height: 1;
    color: var(--black);
    margin: 0 0 16px 0;
}
.opinie-stars {
    display: flex;
    gap: 8px;
}
.opinie-stars img {
    width: 30px;
    height: 30px;
    display: block;
}
.opinie-rating__count {
    font-family: var(--font-sora);
    font-weight: 300;
    font-size: 16px;
    color: var(--black);
    margin: 8px 0 32px 0;
}

/* Q&A Frame 737 — szary sub-card #F8F8F8 z padding */
.opinie-qa {
    background: #F8F8F8;
    border-radius: var(--radius-card);
    padding: 36px 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.opinie-qa__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.opinie-qa__nav {
    display: flex;
    gap: 8px;
}
/* Nav buttons: SVG ma wbudowany okrąg (light cyan #99F6FE prev / cyan #00E8FC next)
   + chevron — button to przezroczysty wrapper, bez własnego tła i rotacji. */
.opinie-qa__nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.opinie-qa__nav-btn:hover {
    transform: scale(1.08);
}
.opinie-qa__nav-btn img {
    width: 27px;
    height: 27px;
    display: block;
}

.opinie-qa__question {
    font-family: var(--font-montserrat);
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    color: var(--black);
    margin: 0;
}
.opinie-qa__answers {
    font-family: var(--font-montserrat);
    font-weight: 400;
    font-size: 16px;
    color: var(--black);
    margin: 0;
}
.opinie-qa__answers strong {
    font-weight: 600;
}
/* Divider Q&A — div zamiast hr (uniknij konfliktu z global hr style), 1px line full-width */
.opinie-qa__divider {
    display: block;
    height: 1px;
    background: #e0e0e0;
    margin: 8px 0 0 0;
}
.opinie-qa__ask {
    display: inline-block;
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 16px;
    color: var(--black);
    text-decoration: underline;
    cursor: pointer;
}
.opinie-qa__ask:hover {
    color: var(--orange);
}

/* --- Modal: zadaj pytanie (Frame 777 d-03) ---
   Otwiera się po kliknięciu .opinie-qa__ask. Backdrop subtelnie wyciemnia stronę
   (rgba 0.05 wg Marcina), modal centered fixed, white card z close X w prawym górnym. */
.qa-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.qa-modal[hidden] {
    display: none !important;
}
body.qa-modal-open {
    overflow: hidden;
}

.qa-modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);  /* 2× ciemniejszy niż wcześniejszy 0.1 (per user 2026-05-11) */
    cursor: pointer;
    z-index: 0;
}

.qa-modal__dialog {
    position: relative;
    background: #fff;
    border-radius: 24px;
    padding: 32px;
    max-width: 734px;
    width: 100%;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    z-index: 1;
    box-shadow: 0 4px 50px rgba(0, 0, 0, 0.07);
}

.qa-modal__close {
    position: absolute;
    top: 32px;
    right: 32px;
    width: 37px;
    height: 37px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: filter 0.2s ease;
}
.qa-modal__close:hover {
    filter: brightness(1.1);
}
.qa-modal__close img {
    display: block;
    width: 100%;
    height: 100%;
}

.qa-modal__title {
    font-family: var(--font-sora);
    font-weight: 600;
    font-size: 40px;
    line-height: 1.1;
    color: var(--black);
    margin: 0 0 12px;
}
.qa-modal__subtitle {
    font-family: var(--font-montserrat);
    font-weight: 400;
    font-size: 18px;
    color: #848484;
    margin: 0 0 32px;
}

.qa-modal__textarea {
    display: block;
    width: 100%;
    min-height: 200px;
    padding: 24px;
    background: #F8F8F8;
    border: 0;
    border-radius: 16px;
    font-family: var(--font-montserrat);
    font-weight: 400;
    font-size: 16px;
    color: var(--black);
    resize: none;
    margin-bottom: 32px;
}
.qa-modal__textarea::placeholder {
    color: #848484;
}
.qa-modal__textarea:focus {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}

.qa-modal__submit {
    width: 100%;
    justify-content: center;
}

@media (max-width: 575.98px) {
    .qa-modal__dialog {
        padding: 32px 24px;
        border-radius: 16px;
    }
    .qa-modal__title {
        font-size: 28px;
    }
    .qa-modal__subtitle {
        font-size: 16px;
        margin-bottom: 24px;
    }
    .qa-modal__close {
        top: 16px;
        right: 16px;
        width: 32px;
        height: 32px;
    }
    .qa-modal__textarea {
        min-height: 200px;
        padding: 16px;
    }
}

/* --- Modal: Napisz opinię (d-03/d-02 — popup po kliknięciu .opinie-rating .btn-cyan) ---
   Layout 2-col: zdjęcie miejsca (lewy) + formularz (prawy). Pattern analogiczny do
   .qa-modal (fixed overlay, white card, close X, ESC + backdrop close), ale szerszy
   (max 1440px) i z dodatkowym media slot. Backdrop rgba 0.20 jak qa-modal. */
.review-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.review-modal[hidden] {
    display: none !important;
}
body.review-modal-open {
    overflow: hidden;
}

.review-modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 0;
}

.review-modal__dialog {
    position: relative;
    display: grid;
    grid-template-columns: minmax(240px, 320px) 1fr;
    gap: 40px;
    background: #fff;
    border-radius: 24px;
    padding: 32px;
    max-width: 1080px;
    width: 100%;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    z-index: 1;
    box-shadow: 0 4px 50px rgba(0, 0, 0, 0.07);
    align-items: stretch;        /* obie kolumny tej samej wysokości */
}

.review-modal__close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 37px;
    height: 37px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    z-index: 2;
    transition: filter 0.2s;
}
.review-modal__close:hover {
    filter: brightness(1.1);
}
.review-modal__close img {
    display: block;
    width: 100%;
    height: 100%;
}

/* Img: aspect-ratio portrait 1:2 wymusza wysokość = 2× szerokość kolumny.
   To zmusza grid-row do takiej wysokości, content stretchuje się do tej samej wysokości.
   textarea (flex: 1) rośnie żeby wypełnić wolne miejsce między fieldsetami a submit. */
.review-modal__media {
    display: block;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 1 / 2;
}
.review-modal__photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Content column — flex column, gap kontroluje pionowy rytm. submit ostatnie dziecko
   = jego dolna krawędź = dół content columna = dół grid row = dół .review-modal__media.
   Padding 0 — textarea/attach/regulamin/submit zajmują pełną szerokość. Tytuł i adres
   (jedyne elementy, które mogłyby kolidować z close X w prawym górnym rogu) mają osobny
   padding-right poniżej. */
.review-modal__content {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 0;
    min-width: 0;
}

.review-modal__title {
    font-family: var(--font-sora);
    font-weight: 700;
    font-size: 40px;
    line-height: 1.1;
    color: var(--black);
    margin: 0;
    padding-right: 56px;        /* clearance pod close X (37×37 w prawym górnym rogu) */
}
.review-modal__address {
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 16px;
    color: var(--black);
    margin: 0;
    padding-right: 56px;        /* clearance pod close X — symetria z tytułem */
}

/* Meta row: rating + visited w jednej linii (nowrap żeby się nie łamało) */
.review-modal__meta {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: nowrap;
    margin-top: 4px;
}

.review-modal__label {
    font-family: var(--font-sora);
    font-weight: 700;
    font-size: 18px;
    color: var(--black);
    white-space: nowrap;
}

.review-modal__rating-group,
.review-modal__visited-group {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.review-modal__stars {
    display: flex;
    gap: 6px;
}
.review-modal__star {
    width: 28px;
    height: 28px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.review-modal__star img {
    display: block;
    width: 100%;
    height: 100%;
}

.review-modal__month-pill {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 10px 22px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 100px;
    cursor: pointer;
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 15px;
    color: var(--black);
    white-space: nowrap;
    transition: box-shadow 0.15s;
}
.review-modal__month-pill:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.review-modal__month-pill img {
    width: 12px;
    height: 12px;
}

.review-modal__textarea {
    display: block;
    width: 100%;
    min-height: 160px;
    flex: 1 1 auto;               /* textarea rośnie wypełniając wolne miejsce — utrzymuje submit przy image bottom */
    padding: 20px 22px;
    background: #F8F8F8;
    border: 0;
    border-radius: 16px;
    font-family: var(--font-montserrat);
    font-weight: 400;
    font-size: 15px;
    color: var(--black);
    resize: none;
}
.review-modal__textarea::placeholder {
    color: #848484;
}
.review-modal__textarea:focus {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}

.review-modal__attach {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    align-self: flex-start;
}
.review-modal__attach img {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
}
.review-modal__attach-label {
    font-family: var(--font-sora);
    font-weight: 700;
    font-size: 16px;
    color: var(--black);
}

.review-modal__regulamin {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}
.review-modal__regulamin-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.review-modal__regulamin-radio {
    width: 18px;
    height: 18px;
    border: 1.5px solid #848484;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 2px;
    position: relative;
    transition: border-color 0.15s;
}
.review-modal__regulamin-input:checked + .review-modal__regulamin-radio {
    border-color: var(--orange);
}
.review-modal__regulamin-input:checked + .review-modal__regulamin-radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: var(--orange);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.review-modal__regulamin-text {
    font-family: var(--font-montserrat);
    font-weight: 300;
    font-size: 12px;
    line-height: 1.5;
    color: var(--black);
}

.review-modal__submit {
    width: 100%;
    justify-content: center;
    height: 56px;
    margin-top: 4px;
}

@media (max-width: 991.98px) {
    .review-modal__dialog {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 24px;
    }
    .review-modal__media {
        aspect-ratio: 16/9;
        max-height: 280px;
    }
    .review-modal__title {
        font-size: 32px;
    }
    .review-modal__content {
        padding: 0;
    }
    .review-modal__meta {
        gap: 20px;
        flex-wrap: wrap;
    }
    .review-modal__textarea {
        flex: 0 0 auto;
        min-height: 180px;
    }
}

@media (max-width: 575.98px) {
    .review-modal {
        padding: 12px;
    }
    .review-modal__dialog {
        padding: 20px;
        border-radius: 16px;
        gap: 16px;
    }
    .review-modal__close {
        top: 12px;
        right: 12px;
        width: 32px;
        height: 32px;
    }
    .review-modal__title {
        font-size: 24px;
    }
    .review-modal__address {
        font-size: 13px;
    }
    .review-modal__label {
        font-size: 14px;
    }
    .review-modal__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .review-modal__rating-group,
    .review-modal__visited-group {
        flex-wrap: wrap;
        gap: 10px;
    }
    .review-modal__textarea {
        min-height: 140px;
        padding: 14px;
    }
    .review-modal__attach-label {
        font-size: 14px;
    }
}

/* Filter bar Frame 695 — szare tło #F8F8F8 + pillsy biały z borderem + button orange "Szukaj" */
.opinie-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #F8F8F8;
    border-radius: 100px;
    padding: 8px;
}
.opinie-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 13px 30px;
    background: #fff;
    border: 0;
    border-radius: 100px;
    cursor: pointer;
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 16px;
    color: var(--black);
    white-space: nowrap;
    height: 50px;
}
.opinie-filter-pill img {
    width: 16px;
    height: 16px;
}
.opinie-filter-pill--input {
    flex: 1;
    cursor: text;
    padding: 0 30px;
}
.opinie-filter-pill--input input {
    width: 100%;
    border: 0;
    outline: 0;
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 16px;
    color: var(--black);
    background: transparent;
}
.opinie-filter-pill--input input::placeholder {
    color: #848484;
}
/* Button "Szukaj" wg Figmy: węższy niż domyślny btn-orange + mniejsza strzałka
   (~18×18 zamiast 34×34 standardowego btn-arrow). */
.opinie-filter-submit {
    gap: 12px;
    padding: 12px 20px;
    height: 50px;
    min-width: 0;
}
.opinie-filter-submit img {
    width: 18px;
    height: 18px;
}

/* ----------- Dropdowny opinii (Filtry rating + Sortuj) ----------------
   Pattern wizualnie analogiczny do .search-dropdown (sekcja 6.4 — hero searchbar):
   biały panel rounded z box-shadow, opcje jako rounded pillsy z hover gray bg.
   Trigger (.opinie-filter-pill[aria-expanded="true"]) ma rotated chevron 180°. */
.opinie-filter-wrap {
    position: relative;
}

.opinie-filter-pill img {
    transition: transform 0.2s;
}
.opinie-filter-pill[aria-expanded="true"] img {
    transform: rotate(180deg);
}

.opinie-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--white);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 8px 0;
    min-width: 220px;
    z-index: 50;
}

.opinie-dropdown__option {
    display: block;
    width: calc(100% - 16px);
    margin: 0 8px 4px;     /* 4px gap między opcjami żeby hover-pillsy nie zlewały się ze sobą */
    padding: 12px 22px;
    background: transparent;
    border: 0;
    text-align: left;
    border-radius: var(--radius-pill);
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 16px;
    color: var(--black);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.opinie-dropdown__option:last-child {
    margin-bottom: 0;
}

.opinie-dropdown__option:hover {
    background: var(--grey-bg);
}

.opinie-dropdown__option--selected {
    background: var(--grey-bg);
    font-weight: 600;
}

/* Review cards Frame 720/721/722 — 3 cards stacked, divider między nimi */
.opinie-list {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}
.opinie-review {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 80px;
    padding: 32px 0;
    border-bottom: 1px solid #e0e0e0;
}
.opinie-review:first-child {
    padding-top: 0;
}
/* Ostatni review zachowuje border-bottom = kreska na dole listy (per user feedback) */

/* Author column (lewy): head (avatar+meta) + stars + like */
.opinie-review__author {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.opinie-review__head {
    display: flex;
    align-items: center;
    gap: 24px;
}
.opinie-review__avatar {
    width: 63px;
    height: 63px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}
.opinie-review__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.opinie-review__name {
    font-family: var(--font-sora);
    font-weight: 600;
    font-size: 16px;
    color: var(--black);
    margin: 0;
}
.opinie-review__date {
    font-family: var(--font-montserrat);
    font-weight: 400;
    font-size: 14px;
    color: #848484;
    margin: 0;
}

.opinie-review__stars {
    display: flex;
    gap: 8px;
}
.opinie-review__stars img {
    width: 30px;
    height: 30px;
}

.opinie-review__like {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: transparent;
    border: 0;
    padding: 0;
    font-family: var(--font-montserrat);
    font-weight: 400;
    font-size: 16px;
    color: var(--black);
    cursor: pointer;
    align-self: flex-start;
}
.opinie-review__like img {
    width: 20px;
    height: 19px;
}
.opinie-review__like-count {
    color: #848484;
}

/* Body column (prawy): tytuł + tekst */
.opinie-review__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.opinie-review__title {
    font-family: var(--font-sora);
    font-weight: 600;
    font-size: 20px;
    color: var(--black);
    margin: 0;
}
.opinie-review__text {
    font-family: var(--font-montserrat);
    font-weight: 300;
    font-size: 16px;
    line-height: 26px;
    color: var(--black);
    margin: 0;
}

/* Button "Więcej opinii" — na przecięciu dolnej krawędzi karty i tła sekcji.
   margin-top: -32px = połowa wysokości buttona (64/2) wciąga go do góry.
   z-index: 2 jest potrzebny żeby button wizualnie był NAD .opinie-card (z-index 1).
   pointer-events: none na wrapie + auto na buttonie — bez tego full-width przezroczysty
   wrap przechwytuje kliki w dropdownie opinii, gdy karta jest skrócona (np. po filtrze
   ratingu który ukrywa wszystkie recenzje) i dropdown nakłada się na wrapa. */
.opinie-section .section-btn-wrap {
    position: relative;
    z-index: 2;
    margin-top: -32px;
    display: flex;
    justify-content: center;
    pointer-events: none;
}
.opinie-section .section-btn-wrap > * {
    pointer-events: auto;
}

/* --------------------------------------------------------------------------
   30. RESPONSIVE — WIZYTOWKA-MIEJSCA-KULTURY.HTML
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .opinie-card {
        padding: 48px 40px;
    }
    .opinie-review {
        grid-template-columns: 200px 1fr;
        gap: 48px;
    }
}

@media (max-width: 991.98px) {
    .opinie-quote-decor {
        width: 200px;
        height: 160px;
    }
    .opinie-top {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .opinie-review {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .opinie-filters {
        flex-wrap: wrap;
    }
    .opinie-filter-pill--input {
        flex: 1 0 100%;
        order: 3;
        padding: 13px 30px;
    }
    .opinie-filter-submit {
        order: 4;
        flex: 1 0 100%;
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .opinie-section {
        padding-top: 48px;
        padding-bottom: 48px;
    }
    .opinie-card {
        padding: 32px 24px;
        gap: 32px;
    }
    .opinie-rating__score {
        font-size: 60px;
    }

    /* Filter bar: stack column z czarnymi obramówkami na pillsach (bez gray bg parenta) —
       per design Figma m-02. Każda pill 100% szerokości, chevron po prawej. */
    .opinie-filters {
        flex-direction: column;
        align-items: stretch;
        background: transparent;
        border-radius: 0;
        padding: 0;
        gap: 12px;
    }
    .opinie-filter-wrap {
        width: 100%;
    }
    .opinie-filter-pill,
    .opinie-filter-pill--input {
        width: 100%;
        border: 0;
        background: #fff;
    }
    .opinie-filter-pill {
        justify-content: space-between;
    }
    .opinie-filter-pill--input {
        padding: 13px 22px;
    }
    .opinie-filter-submit {
        width: 100%;
    }
    /* Dropdown panel: full width pillu, nie minimum 220 (mogłoby wystawać poza viewport) */
    .opinie-dropdown {
        min-width: 0;
        width: 100%;
    }

    /* Galeria zdjęć: native scroll z snap. Main hide, nav arrows overlay na image
       (peach prev + orange next, vertical center). Margin lewy/prawy buduje padding
       na .galeria-carousel__inner — first image inset, scroll-padding-right zostawia
       przestrzeń po ostatnim. 85vw thumb = peek następnego po prawej (per Figma m-02). */
    .mecenas-galeria__main {
        display: none;
    }
    .galeria-carousel {
        overflow: visible;
        position: relative;     /* anchor dla absolute .galeria-carousel__nav */
    }
    .galeria-carousel__inner {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        /* Image 85vw wide → symetrycznie 7.5vw margines z każdej strony. Nav arrows centered
         na image edges (półna obrazie / półna marginesie). */
        padding-left: 7.5vw;
        padding-right: 7.5vw;
        scroll-padding-left: 7.5vw;
        scrollbar-width: none;
    }
    .galeria-carousel__inner::-webkit-scrollbar {
        display: none;
    }
    .galeria-carousel__track {
        transform: none !important;     /* override JS translateX — native scroll przejmuje */
        will-change: auto;
        gap: 16px;                       /* mniejszy gap na mobile niż desktop 24px */
    }
    .galeria-thumb {
        flex: 0 0 85vw;
        width: 85vw;
        height: 85vw;
        scroll-snap-align: start;
    }
    /* ::after spacer = scroll buffer po ostatnim zdjęciu. padding-right na inner
       i margin-right na last-child nie są honorowane jako scroll-end space przez
       flex + overflow:auto w wielu silnikach. Phantom flex item rozwiązuje problem
       deterministically (jest częścią content i zwiększa scrollWidth). */
    .galeria-carousel__track::after {
        content: '';
        flex: 0 0 24px;
        align-self: stretch;
    }
    /* Nav arrows centered on image edges — pół na zdjęciu, pół na marginesie.
       padding-x = 7.5vw (image margin) − 20px (arrow_half) → arrow center = 7.5vw = image_edge. */
    .galeria-carousel__nav {
        display: flex;
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        margin: 0;
        padding: 0 calc(7.5vw - 12px);
        justify-content: space-between;
        pointer-events: none;
        z-index: 5;
    }
    .galeria-nav-btn {
        width: 24px;
        height: 24px;
        pointer-events: auto;
        filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
    }
    .opinie-qa {
        padding: 24px;
    }
}

/* ==========================================================================
   31. LOKAL.HTML (d-02 / m-02 wizytówka lokalu gastronomicznego)
   Hero variant z social pomarańczowymi + button "Menu restauracji",
   banner rezerwacja, polecane miejsca kultury (cyan→orange hover swap).
   ========================================================================== */

/* --- Hero lokal: logo wpisane w białą przestrzeń z marginesami, aspect zachowany.
   SVG ma viewBox dopasowany do bounds logo (no transparent margins),
   object-fit: contain zachowuje kształt (squircle/okrąg pozostaje sobą).
   Padding 10px daje uniform oddech wokół logo (~71% width karty,
   +15% nad oryginalnym ~62% gdy SVG miał własne transparent margins). --- */
.mecenas-hero--lokal .mecenas-hero__logo-card {
    padding: 10px;
    overflow: hidden;
}
.mecenas-hero--lokal .mecenas-hero__logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Hero social — kolor okręgu z SVG (orange linkedin.svg vs cyan linkedin-cyan.svg).
   Bez wariantu CSS — modyfikator --orange tylko semantic (HTML), kolor przez plik SVG. */

/* --- Hero: button "Menu restauracji" (Frame 738) — cyan pill, prawy róg
       hero, z drop-shadow per Figma "drop shadow do apli".
       Override .btn-cyan: tekst czarny, hover bez przezroczystości
       (solid lighter cyan + rozsunięcie gap, brak alpha). --- */
.mecenas-hero__menu-btn {
    position: absolute;
    bottom: 0;
    right: var(--page-pad);
    transform: translateY(50%);
    z-index: 3;
    font-size: 18px;
    padding: 15px 25px;
    gap: 16px;
    color: #000;
    filter: drop-shadow(0 4px 50px rgba(0, 0, 0, 0.07));
}
.mecenas-hero__menu-btn:hover {
    background: #66F1FD;
    color: #000;
}
.mecenas-hero__menu-btn img {
    width: 30px;
    height: 26px;
}

/* --- Banner rezerwacji stolika (d-02 Frame 740 + Rectangle 226) ---
   1281×213 z bg image + orange overlay 0.8 + tytuł + cyan button. */
.rezerwacja-section {
    padding-top: 48px;
    padding-bottom: 48px;
}
.rezerwacja-banner {
    position: relative;
    border-radius: var(--radius-card);
    overflow: hidden;
    height: 213px;
    display: flex;
    align-items: center;
}
.rezerwacja-banner__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}
.rezerwacja-banner__overlay {
    position: absolute;
    inset: 0;
    background: rgba(242, 123, 53, 0.8);
    z-index: 1;
}
.rezerwacja-banner__content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    width: 100%;
    padding: 0 75px;
}
.rezerwacja-banner__title {
    font-family: var(--font-sora);
    font-weight: 600;
    font-size: 40px;
    line-height: 1.5;     /* per user 2026-05-11: x2 było za dużo, -50% → 1.5 */
    color: var(--white);
    margin: 0 0 8px 0;
}
.rezerwacja-banner__subtitle {
    font-family: var(--font-montserrat);
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    color: var(--white);
    margin: 0;
}
/* Button "Zarezerwuj stolik" — odwrócony Figma 2335:11108→11103:
   default: black bg + white text + white-circle/black-arrow icon (btn-arrow.svg)
   hover: white bg + black text + orange-circle/white-arrow icon (btn-arrow-orange.svg)
   Standalone (NIE dziedziczy z .btn-cyan — własny styl) */
.rezerwacja-banner__btn {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    padding: 15px 20px;
    border-radius: 100px;
    background: #050505;
    color: #fff;
    text-decoration: none;
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 16px;
    border: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s, gap 0.2s;
}
.rezerwacja-banner__btn:hover {
    background: #fff;
    color: #000;
    gap: 28px;
}
.rezerwacja-banner__btn-icon {
    position: relative;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: block;
}
.rezerwacja-banner__btn-icon img {
    position: absolute;
    inset: 0;
    width: 34px;
    height: 34px;
    display: block;
    transition: opacity 0.2s ease;
}
/* arrow-default = white-circle/black-arrow (btn-arrow.svg) — pasuje do default czarnego tła
   arrow-hover = orange-circle/white-arrow (btn-arrow-orange.svg) — pasuje do hover białego tła
   UWAGA: w HTML klasy .arrow-default/.arrow-hover są przy odpowiednich src, więc CSS opacity. */
.rezerwacja-banner__btn-icon .arrow-default {
    opacity: 1;
}
.rezerwacja-banner__btn-icon .arrow-hover {
    opacity: 0;
}
.rezerwacja-banner__btn:hover .arrow-default {
    opacity: 0;
}
.rezerwacja-banner__btn:hover .arrow-hover {
    opacity: 1;
}

/* --- Polecane miejsca kultury — kolor info-tile odwrócony vs miejsca smaku.
       Default = cyan, hover = orange (vs. miejsce-card domyślnie orange→cyan).
       Hover trigger na .miejsce-card__info (sama belka, NIE cała karta) —
       analogicznie do miejsc smaku: hover na zdjęcie animuje tylko zdjęcie+gradient,
       hover na info-tile animuje kolor info + arrow swap. */
.miejsce-card--kultura .miejsce-card__info {
    background: var(--cyan);
}
.miejsce-card--kultura .miejsce-card__info:hover {
    background: var(--orange);
}
/* Arrow swap na hover info-tile (analogicznie do bazowego .miejsce-card__info:hover).
   Bazowe reguły dla .arrow-default/.arrow-hover swap są w sekcji 9 (linie ~1463-1465)
   i działają dla obu wariantów kart, więc tu nic nie nadpisujemy. */

/* --- Responsive — lokal --- */
@media (max-width: 1199.98px) {
    .mecenas-hero--lokal .mecenas-hero__menu-btn {
        position: static;
        transform: none;
        align-self: flex-start;
        margin-top: 16px;
    }
    .rezerwacja-banner {
        height: auto;
        min-height: 200px;
        padding: 32px 0;
    }
    .rezerwacja-banner__content {
        padding: 0 32px;
        flex-direction: column;
        align-items: flex-start;
    }
    .rezerwacja-banner__title {
        font-size: 32px;
    }
}

@media (max-width: 575.98px) {
    .rezerwacja-banner__title {
        font-size: 26px;
    }
    .rezerwacja-banner__subtitle {
        font-size: 16px;
    }
    /* Mobile: content i button wyśrodkowane (zamiast flex-start z 1199.98) +
       proporcje 1:1 (aspect-ratio) per user 2026-05-11 */
    .rezerwacja-banner {
        height: auto;
        min-height: 0;
        aspect-ratio: 1 / 1;
        padding: 0;
        justify-content: center;
    }
    .rezerwacja-banner__content {
        padding: 0 24px;
        gap: 20px;
        align-items: center;
        text-align: center;
    }

    /* Override 1199.98 static — na mobile menu-btn ma być absolute przy prawej krawędzi
       bg, połowa nad / połowa pod dolnej krawędzi bg (per design Figma m-02). */
    .mecenas-hero--lokal .mecenas-hero__menu-btn {
        position: absolute;
        top: 280px;
        right: var(--page-pad);
        bottom: auto;
        left: auto;
        transform: translateY(-50%);
        margin: 0;
        padding: 12px 20px;
        font-size: 16px;
        gap: 12px;
        align-self: auto;
    }
    .mecenas-hero--lokal .mecenas-hero__menu-btn img {
        width: 24px;
        height: 21px;
    }
    /* Skrócony label "Menu" zamiast "Menu restauracji" — HTML zachowany dla a11y,
       CSS chowa oryginalny tekst (font-size: 0) i wstrzykuje krótki ::before. */
    .mecenas-hero--lokal .mecenas-hero__menu-btn span {
        font-size: 0;
        line-height: 0;
    }
    .mecenas-hero--lokal .mecenas-hero__menu-btn span::before {
        content: 'Menu';
        font-size: 16px;
        line-height: normal;
    }
}

/* ==========================================================================
   32. MOBILE FONT OVERRIDES (przeniesione na koniec dla wygranej w source order
       wzgl. desktopowych rules zdefiniowanych PO mobile @media block ~line 2347).
   ========================================================================== */
@media (max-width: 575.98px) {
    /* Body text wszystkie opis variants per Figma m-01:
       Lead (bold strong): Montserrat 500 16/22 (Mobile/Body_L_Medium)
       Body (normal): Montserrat 300 14/20 (Mobile/Body_S_Light) */
    .mecenas-opis__col--lead p,
    .wydarzenie-opis__col--lead p,
    .artykul-opis__col--lead p {
        font-size: 16px;
        line-height: 22px;
    }
    .mecenas-opis__col--body p,
    .wydarzenie-opis__col--body p,
    .artykul-opis__col--body p {
        font-size: 14px;
        line-height: 20px;
    }

    /* Opinie review per Figma m-01:
       Title: Montserrat 600 16/22 (Mobile/Body_L_Semibold) — była Sora 600 20
       Body: Montserrat 400 14/20 (Mobile/Body_S_Regular) — była Montserrat 300 16/26 */
    .opinie-review__title {
        font-family: var(--font-montserrat);
        font-weight: 600;
        font-size: 16px;
        line-height: 22px;
    }
    .opinie-review__text {
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
    }
}

/* Mobile: redukcja odstępu hero → opis-section o ~30% (visual gap 120 → 84).
   Desktop padding-top 64 → mobile 28 (oszczędza 36px). */
@media (max-width: 575.98px) {
    .mecenas-opis-section {
        padding-top: 28px;
    }
}

/* Mobile: redukcja odstępu opis → rezerwacja (lokal) o ~30% (visual gap 132 → 92).
   Desktop padding-bottom 60 → mobile 20 (oszczędza 40px). */
@media (max-width: 575.98px) {
    .mecenas-opis-section {
        padding-bottom: 20px;
    }
}

/* Mobile galeria nav — override desktop shift rule (specificity 0,0,2,0 = .section .nav)
   tak żeby mobile padding (centered on image edges) wygrał z desktop shift padding-right. */
@media (max-width: 575.98px) {
    .artykul-section .galeria-carousel__nav,
    .mecenas-galeria-section .galeria-carousel__nav,
    .wydarzenie-galeria-section .galeria-carousel__nav {
        margin-top: 0;
        padding: 0 calc(7.5vw - 12px);
    }
}

/* Mobile mapa (Figma m-01): portrait 327×534, flex column, padding 24, justify-end items-start.
   img/pin absolute inset:0 żeby wypełniły całą kafelkę (border-box) niezależnie od padding. */
@media (max-width: 575.98px) {
    .wydarzenie-mapa {
        display: flex;
        width: 327px;
        max-width: 100%;
        height: 534px;
        padding: 24px;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        gap: 10px;
        flex-shrink: 0;
        /* margin auto żeby kafelka centerowała się w container-gk gdy content area > 327 */
        margin-left: auto;
        margin-right: auto;
    }
    .wydarzenie-mapa__img {
        position: absolute;
        inset: 0;
    }
}

/* Mobile opinie tweaks per Figma m-01:
   - Cudzysłów decor: +60 top, +40 right (shift left 40 + down 60)
   - Rating score: Sora 700 48px line-height normal (Mobile/H2_Bold) — była 60px na mobile
   - Rating count: Montserrat 500 14/20 (Mobile/Body_S_Medium) — była Sora 300 16
   - Napisz opinię button: width 187, height 50, gap 16, padding 15 20, justify-center */
@media (max-width: 575.98px) {
    .opinie-quote-decor {
        top: 80px;
        right: calc(35% - 50px);
    }
    .opinie-rating__score {
        font-family: var(--font-sora);
        font-weight: 700;
        font-size: 48px;
        line-height: normal;
    }
    .opinie-rating__count {
        font-family: var(--font-montserrat);
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
    }
    .opinie-rating .btn-cyan {
        display: flex;
        width: 210px;
        white-space: nowrap;
        height: 50px;
        padding: 15px 20px;
        justify-content: center;
        align-items: center;
        gap: 16px;
        box-sizing: border-box;
    }
    .opinie-rating .btn-cyan:hover {
        gap: 20px;
    }
    /* Strzałka + kółko 40% mniejsze (34 → 20) */
    .opinie-rating .btn-cyan img {
        width: 20px;
        height: 20px;
    }
}

/* Mobile: ukrycie strzałek nav w Q&A (sekcja opinii) — per Figma m-01 */
@media (max-width: 575.98px) {
    .opinie-qa__nav {
        display: none;
    }
}

/* Mobile opinie filter bar centering + remove card visual po Szukaj button:
   - Pills i input: content centered (text + chevron)
   - .opinie-card box-shadow removed → white tło "kończy się" wizualnie pod button Szukaj
     (poniżej reviews na page bg). */
@media (max-width: 575.98px) {
    .opinie-filter-pill {
        justify-content: center;
    }
    .opinie-filter-pill--input input {
        text-align: center;
    }
    .opinie-filter-pill--input input::placeholder {
        text-align: center;
    }
}

/* Opinie card-frame: wrapper around .opinie-top + .opinie-filters.
   Desktop: niewidoczne (.opinie-card ma card visual, frame jest tylko organizer).
   Mobile: frame BIERZE card visual (white bg + shadow + rounded), .opinie-card znika wizualnie
   → biała karta kończy się pod Szukaj button, reviews na page bg (poza kartą wizualnie). */
.opinie-card-frame {
    display: flex;
    flex-direction: column;
    gap: 48px; /* desktop: same gap as .opinie-card was between top and filters */
}

@media (max-width: 575.98px) {
    /* Card invisible — just layout container z gap między frame i reviews */
    .opinie-card {
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
    }
    /* Frame: the visible white card with shadow */
    .opinie-card-frame {
        background: white;
        box-shadow: 0 4px 50px rgba(0, 0, 0, 0.07);
        border-radius: 24px;
        padding: 32px 24px;
        gap: 32px;
    }
    /* Reviews list: outside frame, horizontal alignment z frame content (padding-left 24) */
    .opinie-list {
        padding: 0 24px;
    }
    /* Section btn-wrap ("Więcej opinii"): outside frame też, no margin-top: -32 (overlap kartę)
       bo karta już skończyła się wcześniej; standard spacing. */
    .opinie-section .section-btn-wrap {
        margin-top: 0;
    }
}

/* Mobile: button "Więcej opinii" (sekcja opinii) — odsunięcie od dolnej linii reviews
   na 32px (tyle samo co padding-bottom reviewa do linii poprzecznej).
   Spec Figma: 178×50, gap 16, img 20×20 (consistent z "Napisz opinię"). */
@media (max-width: 575.98px) {
    .opinie-section .section-btn-wrap {
        margin-top: 32px;
    }
    .opinie-section .section-btn-wrap .btn-orange {
        display: inline-flex;
        width: 178px;
        height: 50px;
        padding: 15px 20px;
        justify-content: center;
        align-items: center;
        gap: 16px;
        border-radius: 100px;
        box-sizing: border-box;
        white-space: nowrap;
    }
    .opinie-section .section-btn-wrap .btn-orange img {
        width: 20px;
        height: 20px;
    }
}

/* Mobile review-modal Napisz opinię tweaks per Figma m-01:
   - Image (media column) hidden — modal single column z content tylko
   - Meta row gap 24px (2x: oddalenie "Oceń miejsce" od "Odwiedzono")
   - Submit button arrow 20×20 (consistent z innymi cyan buttonami: Napisz opinię w opinie-rating) */
@media (max-width: 575.98px) {
    .review-modal__media {
        display: none;
    }
    .review-modal__meta {
        gap: 24px;
    }
    .review-modal .review-modal__submit img {
        width: 20px;
        height: 20px;
    }
}

/* events-section--miejsce — wizytówka miejsca kultury ma własny zestaw widoków:
   Desktop: kafelki + rzędy. Mobile: kafelki + kalendarz (per Figma m-02).
   List view-btn hidden on mobile, calendar view-btn hidden on desktop. */
.events-section--miejsce .view-btn--mobile-only {
    display: none;
}
@media (max-width: 575.98px) {
    .events-section--miejsce .view-btn--desktop-only {
        display: none;
    }
    .events-section--miejsce .view-btn--mobile-only {
        display: flex;
    }
}

/* events-section--miejsce — view-toggle dosunięty do prawej (kultura page bez filtrów + month-picker
   ma tylko events-controls-right jako single child w events-controls). */
.events-section--miejsce .events-controls-right {
    margin-left: auto;
}

/* Profil mobile — reorder per Figma m-04 Moje konto: back → title → desc → hero → card → rows → polecamy.
   Hero przesunięte między desc a card za pomocą flex order na <main>.
   `display: contents` na profil-section + container-gk + profil-content "rozpłaszcza" DOM żeby
   wszystkie elementy stały się bezpośrednimi dziećmi main (a tym samym flex items orderowalnymi). */
@media (max-width: 767.98px) {
    body.profil-uzytkownika.is-content-open main {
        display: flex;
        flex-direction: column;
    }
    body.profil-uzytkownika.is-content-open .profil-section,
    body.profil-uzytkownika.is-content-open .profil-section > .container-gk,
    body.profil-uzytkownika.is-content-open .profil-content {
        display: contents;
    }
    body.profil-uzytkownika.is-content-open .profil-back {
        order: 1;
    }
    body.profil-uzytkownika.is-content-open .profil-content__title {
        order: 2;
    }
    body.profil-uzytkownika.is-content-open .profil-content__desc {
        order: 3;
    }
    body.profil-uzytkownika.is-content-open .profil-hero {
        order: 4;
    }
    body.profil-uzytkownika.is-content-open .profil-card {
        order: 5;
    }
    body.profil-uzytkownika.is-content-open .profil-row {
        order: 6;
    }
    body.profil-uzytkownika.is-content-open .mecenasi-section {
        order: 7;
    }

    /* Re-apply container-gk padding via padding na main (24px mobile per .profil-grid).
       Hero i mecenasi-section dostają negative margin żeby wystawać do krawędzi viewportu (mają własne wewnętrzne container-gk). */
    body.profil-uzytkownika.is-content-open main {
        padding-left: 24px;
        padding-right: 24px;
        box-sizing: border-box;
    }
    body.profil-uzytkownika.is-content-open .profil-hero,
    body.profil-uzytkownika.is-content-open .mecenasi-section {
        margin-left: -24px;
        margin-right: -24px;
    }
    /* Padding-top utracone przy display: contents na .profil-section — przywróć
       przez margin-top na PIERWSZYM widocznym elemencie (back button = order 1). */
    body.profil-uzytkownika.is-content-open .profil-back {
        margin-top: 104px;
    }
}

/* Profil mobile dalsze poprawki per Figma m-04 Moje konto:
   - Hero przesunięte do góry (usuń padding-top 104 — hero nie jest już na top of page po reorder)
   - .profil-card: avatar top-aligned z pierwszą etykietą, btn-edit w prawym górze (na poziomie ostatniego pola)
   - .profil-row--last: line pozioma pod hasłem */
@media (max-width: 767.98px) {
    body.profil-uzytkownika.is-content-open .profil-hero {
        padding-top: 0;
    }

    .profil-card {
        grid-template-columns: 117px 1fr;
        grid-template-areas:
            "avatar grid"
            "btn    grid";
        grid-template-rows: auto 1fr;
        align-items: start;
        gap: 16px 16px;
    }
    .profil-card__avatar {
        grid-area: avatar;
    }
    .profil-card__grid {
        grid-area: grid;
    }
    .profil-card .btn-edit {
        grid-area: btn;
        align-self: end;
        justify-self: start;
        margin-top: 16px;
    }

    /* Border-bottom pod ostatnim wierszem (hasło) — wcześniej tylko border-top między rows */
    .profil-row--last {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
}

/* Profil hover animations per Figma m-04:
   - .profil-back: arrow swap (orange/white → black/orange) via 2-img overlay z opacity
   - .profil-hero__btn "Edytuj zdjęcie": text+border white → black on hover (bg pozostaje transparent)
   - .btn-edit "Edytuj": already correct hover (orange text + black border) — no change */
.profil-back__icon {
    position: relative;
    width: 37px;
    height: 37px;
    flex-shrink: 0;
}
.profil-back__icon img {
    position: absolute;
    inset: 0;
    width: 37px;
    height: 37px;
    transition: opacity 0.2s ease;
}
.profil-back__icon .arrow-hover {
    opacity: 0;
}
.profil-back:hover .arrow-default {
    opacity: 0;
}
.profil-back:hover .arrow-hover {
    opacity: 1;
}

/* Override profil-hero__btn hover (było: bg white + text orange; teraz: text+border czarne) */
.profil-hero__btn:hover {
    background: transparent;
    color: #000;
    border-color: #000;
}

/* Profil mobile — banner Polecamy 327×327 kwadratowy (vs portrait 327/534 na wizytówkach).
   Padding 24, flex column justify-end items-start gap 10, border-radius 24.
   Overlay: orange gradient 234deg 0.65 + uniform black 0.15 (per Figma m-04). */
@media (max-width: 575.98px) {
    body.profil-uzytkownika .mecenas-banner--compact {
        aspect-ratio: 1 / 1;
        height: auto;
        padding: 0; /* obraz wypełnia border-box, padding tylko na content */
        border-radius: 24px;
    }
    /* Image absolute żeby wypełnił border-box ignorując padding (jak overlay) */
    body.profil-uzytkownika .mecenas-banner--compact .mecenas-banner-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }
    body.profil-uzytkownika .mecenas-banner-overlay {
        background:
            linear-gradient(234deg, rgba(0, 0, 0, 0) 28.77%, rgba(242, 123, 53, 0.65) 76.8%),
            linear-gradient(0deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));
    }
    body.profil-uzytkownika .mecenas-banner-content {
        padding: 24px;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        gap: 10px;
    }

    /* Zobacz więcej button — strzałka 20×20 (consistent z innymi Edytuj/Napisz opinię/Więcej opinii) */
    body.profil-uzytkownika .section-btn-wrap .btn-orange img {
        width: 20px;
        height: 20px;
    }
}

/* Linia pozioma pod ostatnim wierszem (hasło) — na DESKTOP też (rule poza mobile @media block).
   Wcześniej tylko mobile miało border-bottom; teraz wszystkie viewporty. */
.profil-row--last {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* aktualnosci.html mobile — usunięty month-picker, kafle 327×411, max 4 widoczne,
   paginacja ukryta, button "Zobacz więcej" zastępuje. */
.aktualnosci-show-more-wrap {
    display: none;
} /* desktop: ukryty (zastąpiony paginacją) */

@media (max-width: 575.98px) {
    .aktualnosci-listing-section .month-picker {
        display: none;
    }
    .aktualnosci-grid > li:nth-child(n+5):not(.aktualnosci-divider-row) {
        display: none;
    }
    .aktualnosci-listing-section .miejsca-pagination {
        display: none;
    }
    .aktualnosci-show-more-wrap {
        display: flex;
        margin-top: 32px;
    }

    /* Card width 327 (na 375 viewport z page-pad 20 = full content area) */
    .aktualnosc-card {
        width: 327px;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        height: 411px;
    }
}

/* Mobile: smaller arrow (20×20) on "Zobacz więcej" buttons in section-btn-wrap dla
   .mecenasi-section + .polecane-wydarzenie-section + .aktualnosci-listing-section
   (consistent z innymi mobile buttonami). */
@media (max-width: 575.98px) {
    .mecenasi-section .section-btn-wrap .btn-orange img,
    .polecane-wydarzenie-section .section-btn-wrap .btn-orange img,
    .aktualnosci-listing-section .section-btn-wrap .btn-orange img,
    .aktualnosci-show-more-wrap .btn-orange img,
    .aktualnosci-section .section-btn-wrap .btn-orange img {
        width: 20px;
        height: 20px;
    }
}

/* aktualnosci mobile — pokazujemy max 4 kafle (= 1 wiersz) → 1 divider wystarczy.
   Hide drugi i trzeci divider (zostaje tylko pierwszy = po 4 kaflach, przed "Zobacz więcej"). */
@media (max-width: 575.98px) {
    .aktualnosci-grid > .aktualnosci-divider-row ~ .aktualnosci-divider-row {
        display: none;
    }
}

/* aktualnosc.html mobile — button "Następny artykuł" zgodny z innymi sekcyjnymi "Zobacz więcej":
   height 50, padding 15 20, gap 16, img 20×20, white-space nowrap. */
@media (max-width: 575.98px) {
    .artykul-bottom .btn-orange {
        display: inline-flex;
        height: 50px;
        padding: 15px 20px;
        gap: 16px;
        box-sizing: border-box;
        white-space: nowrap;
        align-items: center;
    }
    .artykul-bottom .btn-orange img {
        width: 20px;
        height: 20px;
    }
}

/* aktualnosc.html mobile hero — Figma m-05:
   - Image 375×300 (full width)
   - Gradient overlay: 234deg cyan 0.65 + black 0.15 (z 198.79deg cyan)
   - Title: Sora 600 24px line-height normal (override mobile 20px)
   - Venue: Montserrat 500 18/26 (override mobile 16/22)
   - CTA "Zobacz więcej" hidden — zastąpione chevron pill w prawym dolnym (link do wydarzenie.html)
   - .aktualnosc-hero__next: 44×44 orange circle z chevron prawo, position absolute bottom-right 16/16 */
@media (max-width: 575.98px) {
    .aktualnosc-hero__overlay {
        background:
            linear-gradient(234deg, rgba(0, 0, 0, 0) 28.77%, rgba(0, 232, 252, 0.65) 76.8%),
            linear-gradient(0deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));
    }
    .aktualnosc-hero__title {
        font-size: 24px;
        line-height: normal;
    }
    .aktualnosc-hero__venue {
        font-size: 18px;
        line-height: 26px;
    }
    .aktualnosc-hero__cta {
        display: none;
    }
    .aktualnosc-hero__next {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 16px;
        bottom: 16px;
        /* White pill z orange circle (chevron) wewnątrz — chevron 30% mniejszy (44 → 31) */
        background: #fff;
        border-radius: 100px;
        padding: 4px 14px;
        border: 0;
        width: auto;
        height: auto;
    }
    .aktualnosc-hero__next img {
        width: 31px !important;
        height: 31px !important;
        flex-shrink: 0;
        min-width: 31px;
        display: block;
    }

    /* Info text nie nakłada się na pill: max-width = parent - pill width - margin */
    .aktualnosc-hero__info {
        max-width: calc(100% - 80px);
    }
}

/* mecenasi.html mobile — sekcja "Mecenasi kultury" max 4 kafle (ukryj rzędy 2 i 3) */
@media (max-width: 575.98px) {
    .mecenasi-list-section .mecenasi-grid__row:nth-child(n+2) {
        display: none;
    }

    /* Kafel "Poznaj" per Figma m-01: 327×534, padding 24, flex column,
       justify-end, items-start, gap 10. Image/overlay absolute inset:0 zachowują pełne wypełnienie. */
    .mecenasi-list-section .mecenas-tile {
        display: flex;
        width: 327px;
        max-width: 100%;
        height: 534px;
        padding: 24px;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        gap: 10px;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }
    .mecenasi-list-section .mecenas-tile__img {
        inset: 0;
        width: 100%;
        height: 100%;
        left: auto;
        top: auto;
    }
    .mecenasi-list-section .mecenas-tile__body {
        position: static;
        padding: 0;
        width: 100%;
        align-items: flex-start;
    }
    /* Button "Zobacz więcej" wyśrodkowany horyzontalnie w kaflu (name/desc zostają lewe) */
    .mecenasi-list-section .mecenas-tile__btn {
        align-self: center;
    }

    /* Mobile typography per Figma m-01:
       Name: Sora 600 24px / normal (Desktop/Body_XL_Bold)
       Desc: Montserrat 500 18/26 (Desktop/Body_M_Medium) */
    .mecenasi-list-section .mecenas-tile__name {
        font-family: var(--font-sora);
        font-weight: 600;
        font-size: 24px;
        line-height: normal;
    }
    .mecenasi-list-section .mecenas-tile__desc {
        font-family: var(--font-montserrat);
        font-weight: 500;
        font-size: 18px;
        line-height: 26px;
    }
}

/* mecenas.html mobile hero — gradient overlay per Figma m-04:
   234deg cyan 0.65 (z czarnym 0.15). Wcześniej mobile miało display:none na overlayu. */
@media (max-width: 575.98px) {
    .mecenas-hero__overlay {
        display: block;
        background:
            linear-gradient(234deg, rgba(0, 0, 0, 0) 28.77%, rgba(0, 232, 252, 0.65) 76.8%),
            linear-gradient(0deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));
    }
}

/* mecenas.html mobile — button "Wróć" w stylu mobile "Zobacz więcej":
   height 50, padding 15 20, gap 16, img 20×20, white-space nowrap. */
@media (max-width: 575.98px) {
    .galeria-back .btn-orange {
        display: inline-flex;
        height: 50px;
        padding: 15px 20px;
        gap: 16px;
        box-sizing: border-box;
        white-space: nowrap;
        align-items: center;
    }
    .galeria-back .btn-orange img {
        width: 20px;
        height: 20px;
    }
}

/* Galeria — fade dla peek thumbs (lewa i prawa krawędź): opacity 0.4 ↔ 1
   wraz z visibility ratio. JS (main.js, sek. 8c) ustawia opacity via inline style
   na podstawie intersection thumb ↔ .galeria-carousel (clipper). Działa mobile i desktop. */
.galeria-thumb {
    transition: opacity 0.2s ease-out;
}

/* O nas sekcja mobile per Figma m-01:
   Section-label: Montserrat 400 16/normal/2.4px/uppercase (Desktop/subheader_big)
   Section-title: Sora 700 32/40 (Mobile/H3_Bold)
   Lead (pogrubiony): Montserrat 500 16/22 (Mobile/Body_L_Medium) — była 20/28
   Body (zwykły): Montserrat 300 14/20 (Mobile/Body_S_Light) — była 16/26 */
@media (max-width: 575.98px) {
    .o-nas-section .section-label {
        line-height: normal;
    }
    .o-nas-text--lead {
        font-size: 16px;
        line-height: 22px;
    }
    .o-nas-text--body {
        font-size: 14px;
        line-height: 20px;
    }
}

/* ============================================================
   33. MOBILE BOTTOM NAV (floating sticky pill, scroll-driven)
   Pokazuje się po scrollu (scrollY > 200), tylko na mobile (≤575.98px).
   ============================================================ */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    display: none;
    justify-content: space-around;
    align-items: center;
    gap: 8px;
    background: #fff;
    /* Tylko górne rogi zaokrąglone — pasek dochodzi do dolnej krawędzi viewport */
    border-radius: 24px 24px 0 0;
    padding: 12px 16px;
    /* iOS safe-area-inset — żeby nav nie kolidował z home indicator */
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
}

.mobile-bottom-nav__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    text-decoration: none;
}

.mobile-bottom-nav__btn img {
    width: 46px;
    height: 46px;
    display: block;
}

/* Mobile only */
@media (max-width: 575.98px) {
    .mobile-bottom-nav {
        display: flex;
    }
}

/* ============================================================
   35. WSZYSTKIE WYDARZENIA — controls bar + range calendar.
   ============================================================ */
.events-controls--wszystkie {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #F8F8F8;
    border-radius: 100px;
    padding: 8px 16px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.events-controls--wszystkie .opinie-filter-wrap {
    position: relative;
}

/* View-toggle desktop: reset legacy padding-bottom: 8px (z .events-controls-right rule linia ~772
   dla starego layoutu z border-bottom). W nowym pasku panel ma align-items: center -- view-toggle
   musi mieć padding 0 żeby centrum było zgodne z pillami i input. */
.events-controls--wszystkie .events-controls-right {
    padding: 0;
}

.events-search-input {
    flex: 1;
    min-width: 200px;
    height: 50px;
    padding: 12px 20px;
    background: #fff;
    border: 0;
    border-radius: 100px;
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 14px;
    color: var(--black);
}
.events-search-input::placeholder {
    color: #848484;
}
.events-search-input:focus {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}

/* Stacking nad sąsiednimi sekcjami (.section ma transform = osobne stacking contexts).
   Bez explicit z-index sibling DOM-później wygrywa -- dropdowny chowają się pod nią.
   Klasa --toolbar dla wszystkich podstron z nowym paskiem (wydarzenia, polecane, wizytowka, wszystkie). */
.events-section--toolbar {
    position: relative;
    z-index: 5;
}

/* Empty state: pokazywany przez applyFilters() gdy visibleCount === 0.
   Flex center + min-height = napis wyśrodkowany pionowo i poziomo w obszarze sekcji
   (przybliżona wysokość gridu z kafli, żeby sekcja nie skakała wizualnie). */
.events-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 480px;
    padding: 40px 24px;
    text-align: center;
    font-family: var(--font-sora);
    font-weight: 500;
    font-size: 20px;
    color: #848484;
}
.events-empty p {
    margin: 0;
}

/* Mobile paginacja "Zobacz więcej": button widoczny tylko na mobile (≤575.98px).
   Desktop ma JS toggle hidden = true, wszystkie wydarzenia w gridzie. Na mobile JS odsłania
   gdy pasujących event-card > state.mobileLimit. Styl btn-orange reuse (gap 24→28 hover). */
.events-show-more-wrap {
    margin-top: 32px;
}

/* Range calendar panel -- padding od brzegów dropdownu (oddech) */
.opinie-dropdown--range.range-calendar {
    padding: 20px 24px 16px;
}

/* Header miesiąca: strzałki + label, większe odstępy, większe klikalne strzałki */
.range-calendar .cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.range-calendar .cal-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 8px;
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s ease;
}
.range-calendar .cal-arrow:hover {
    background: var(--grey-bg);
}
.range-calendar .cal-arrow[data-range-action="prev-month"] img {
    transform: rotate(180deg);
}
.range-calendar .cal-pick-label {
    font-family: var(--font-montserrat);
    font-weight: 600;
    font-size: 16px;
    color: var(--black);
    text-transform: capitalize;
}

/* Day headers w range-calendar -- większy gap, więcej oddechu nad gridem */
.range-calendar .cal-day-headers {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin: 4px 0 12px;
}
.range-calendar .cal-day-headers span {
    text-align: center;
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 12px;
    color: #848484;
    text-transform: uppercase;
}

/* Range calendar -- 2-click selection: pending (ring), start/end (cyan fill), in-range (tint) */
.range-calendar .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}
.range-calendar .cal-day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 auto;
    border-radius: 50%;
    font-family: var(--font-montserrat);
    font-size: 14px;
    cursor: pointer;
    background: transparent;
    border: 0;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.range-calendar .cal-day:hover:not(:disabled) {
    background: var(--grey-bg);
}
.range-calendar .cal-day--other {
    opacity: 0.4;
    pointer-events: none;
}
.range-calendar .cal-day--pending {
    box-shadow: inset 0 0 0 2px var(--cyan);
    color: var(--cyan);
    font-weight: 700;
}
.range-calendar .cal-day--range-start,
.range-calendar .cal-day--range-end {
    background: var(--cyan);
    color: var(--white);
    font-weight: 700;
}
.range-calendar .cal-day--in-range {
    background: rgba(0, 232, 252, 0.25);
    border-radius: 0;  /* tile look between start/end */
}
.range-calendar__hint {
    margin: 16px 0 0;
    font-family: var(--font-montserrat);
    font-size: 12px;
    color: #848484;
    text-align: center;
}

@media (max-width: 575.98px) {
    .events-controls--wszystkie {
        flex-direction: column;
        align-items: stretch;
        border-radius: 24px;
        padding: 12px;
        gap: 8px;
    }
    .events-controls--wszystkie .opinie-filter-wrap {
        width: 100%;
    }
    .events-controls--wszystkie .opinie-filter-pill {
        width: 100%;
    }
    .events-search-input {
        width: 100%;
    }
    /* View-toggle wyśrodkowany pionowo między dolną krawędzią input a dolną krawędzią szarego panel.
       Override legacy padding-bottom: 16 z .events-controls-right rule (linia ~2438).
       Padding-top 4 + flex gap 8 (z parenta) = 12 nad ikonami; padding-bottom 0 + panel padding 12 = 12 pod ikonami. */
    .events-controls--wszystkie .events-controls-right {
        padding: 4px 0 0;
    }
    /* Range calendar -- na mobile zmniejsz padding panelu i komórek, żeby zmieścić 7 kolumn */
    .opinie-dropdown--range.range-calendar {
        padding: 16px 12px 12px;
    }
    .range-calendar .cal-header {
        margin-bottom: 12px;
    }
    .range-calendar .cal-arrow {
        min-width: 36px;
        min-height: 36px;
        padding: 6px;
    }
    .range-calendar .cal-day-headers {
        gap: 4px;
        margin: 4px 0 8px;
    }
    .range-calendar .cal-grid {
        gap: 4px;
    }
    .range-calendar .cal-day {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }
    .events-empty {
        min-height: 320px;
        padding: 40px 16px;
        font-size: 16px;
    }
}

/* ============================================================
   34. MODAL AUTH (logowanie / rejestracja) — placeholder UI.
   Otwiera się po kliknięciu .header-avatar--guest (data-auth-modal-open).
   Backend (Bartek): podstawia POST handler na form submit.
   ============================================================ */
.auth-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.auth-modal[hidden] {
    display: none !important;
}
body.auth-modal-open {
    overflow: hidden;
}

.auth-modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 0;
}

.auth-modal__dialog {
    position: relative;
    background: #fff;
    border-radius: 24px;
    padding: 48px 32px 32px;
    max-width: 440px;
    width: 100%;
    z-index: 1;
    box-shadow: 0 4px 50px rgba(0, 0, 0, 0.1);
}

.auth-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 37px;
    height: 37px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.auth-modal__close:hover {
    transform: scale(1.1);
}
.auth-modal__close img {
    display: block;
    width: 100%;
    height: 100%;
}

.auth-modal__title {
    font-family: var(--font-sora);
    font-weight: 600;
    font-size: 32px;
    color: var(--black);
    margin: 0 0 24px;
    text-align: center;
}

.auth-modal__tabs {
    display: flex;
    gap: 4px;
    background: #F8F8F8;
    border-radius: 100px;
    padding: 4px;
    margin-bottom: 24px;
}
.auth-modal__tab {
    flex: 1;
    padding: 10px 20px;
    background: transparent;
    border: 0;
    border-radius: 100px;
    font-family: var(--font-sora);
    font-weight: 500;
    font-size: 14px;
    color: var(--black);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.auth-modal__tab--active {
    background: var(--cyan);
    color: var(--white);
    font-weight: 700;
}

.auth-modal__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.auth-modal__form[hidden] {
    display: none;
}

.auth-modal__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.auth-modal__label {
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 14px;
    color: var(--black);
}
.auth-modal__field input {
    padding: 14px 18px;
    background: #F8F8F8;
    border: 0;
    border-radius: 12px;
    font-family: var(--font-montserrat);
    font-weight: 400;
    font-size: 16px;
    color: var(--black);
}
.auth-modal__field input:focus {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}
.auth-modal__field input::placeholder {
    color: #848484;
}

.auth-modal__forgot {
    align-self: flex-end;
    font-family: var(--font-montserrat);
    font-weight: 500;
    font-size: 14px;
    color: var(--orange);
    text-decoration: underline;
}

.auth-modal__submit {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
}

/* --------------------------------------------------------------------------
   36. FIX MOBILE — biała przestrzeń pod menu (header relative na mobile)
   Na mobile (≤575.98) header jest position:relative (in-flow, zajmuje 80px).
   Bazowa kompensacja fixed-headera (margin/padding-top = wysokość headera) staje
   się duplikatem → 80px biała przerwa. Searchbarowy .hero dostał reset w sesji 27.05;
   tu zerujemy pozostałe typy hero, każdy wg swojego mechanizmu kompensacji:
   - .city-chooser (index.html)        margin-top: var(--header-h) → 0
   - .aktualnosc-hero (aktualnosc.html) margin-top: 80px            → 0
   - .mecenas-hero (mecenas + 2 wizytówki) margin-top: var(--header-h) → 0
   - .profil-hero (profil-uzytkownika)  padding-top: 104px          → 0
   Desktop/tablet bez zmian (header fixed, kompensacja zachowana).
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .city-chooser {
        margin-top: 0;
    }
    .aktualnosc-hero {
        margin-top: 0;
    }
    .mecenas-hero {
        margin-top: 0;
    }
    .profil-hero {
        padding-top: 0;
    }
}



/* FEEDBACK */
.feedback_btn{
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 2; /*żeby nie znikał pod kalendarzem */
}
.hover_btn span{
    font-size: 0px;
    /*display: none;*/
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.hover_btn:hover span,
.hover_btn:focus span{
    font-size: 1em;
}

.feedback_img canvas{
    max-width: 100%;
    max-width: 320px;
}

.box-feedbacks .message_content{
    background-color: #EEEEEE;
    /*cursor: not-allowed;*/
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #555555;
    display: table;
    /*display: block;*/
    font-size: 14px;
    line-height: 1.42857;
    padding: 6px 12px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    vertical-align: middle;
    width: 100%;
    margin-bottom: 10px;
}

/*.box-feedbacks .message_content.client{*/
/*    background-color: #d9edf7;
    border-color: #d9edf7;
}*/

.message_author.contact,
.message_author.client{
    background-color: #d9edf7;
    border-color: #d9edf7;
    text-align: left;
}

.message_author.user{
    background-color: #EEEEEE;
}


.box-feedbacks .message_author_user {
    display: block;
    text-align: right;
}

/*.box-feedbacks .message {
    display: inline-block;
}*/

.box-feedbacks_preview{
    padding: 0px;
}


.box-feedbacks_preview .message_author_client,
.box-feedbacks_preview .message_author_user {
    background-color: #d9edf7;
    border-bottom: 1px solid #ddd;
    display: block;
    padding: 5px;
}

.box-feedbacks_preview .message_author_user {
    background-color: #EEEEEE;
    text-align: right;
}

.box-feedbacks_preview .message_content {
    padding: 5px;
}

/* end FEEDBACK */

.fade.in {
    opacity: 1;
}

/*.modal {
    background: rgba(0,0,0,0.3);
}*/
.modal-backdrop {
    --bs-backdrop-bg: rgba(0,0,0,0.3);
}

.btn-default {
    background-color: #f4f4f4;
    color: #444;
    border-color: #ddd;
}

.close {
    float: right;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
}

#modal_feedback .modal-dialog{
    margin-top: 80px;
}

.gm-style .gm-style-iw {
  text-align: center;
}

.gm-style .gm-style-iw a{
    color: #3c8dbc;
}