/* =========================================================
   SALONY — styles (uporządkowane, selektory BEZ ZMIAN)
   - Nie zmieniaj nazw klas/ID → 1:1 design zostaje
   - Sekcje w HTML mają hooki data-section="..."
   =========================================================
   SPIS
   01) Variables / Reset
   02) Layout helpers
   03) Navigation
   04) Hero
   05) Sections (About/Menu/Events/Gallery/Contact)
   06) Components (buttons, cards, marquee, etc.)
   07) Utilities
   08) Responsive
   ========================================================= */



/* =========================================================
   LOCAL FONTS — Origin Super Condensed
   Fonts in: /themes/salony-child/fonts/
   ========================================================= */
@font-face{
  font-family: "Origin Super Condensed";
  src: url("../fonts/fonnts.com-Origin_Sup_Cond_Ultra_Light.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Origin Super Condensed";
  src: url("../fonts/fonnts.com-Origin_Sup_Cond_Ultra_Light_Italic.otf") format("opentype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face{
  font-family: "Origin Super Condensed";
  src: url("../fonts/fonnts.com-Origin_Sup_Cond_Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Origin Super Condensed";
  src: url("../fonts/fonnts.com-Origin_Sup_Cond_Light_Italic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face{
  font-family: "Origin Super Condensed";
  src: url("../fonts/fonnts.com-Origin_Sup_Cond.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Origin Super Condensed";
  src: url("../fonts/fonnts.com-Origin_Sup_Cond_Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face{
  font-family: "Origin Super Condensed";
  src: url("../fonts/fonnts.com-Origin_Sup_Cond_Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Origin Super Condensed";
  src: url("../fonts/fonnts.com-Origin_Sup_Cond_Bold_Italic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face{
  font-family: "Origin Super Condensed";
  src: url("../fonts/fonnts.com-Origin_Sup_Cond_Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Origin Super Condensed";
  src: url("../fonts/fonnts.com-Origin_Sup_Cond_Black_Italic.otf") format("opentype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* Global font variables */
:root{
  --display-font: "Origin Super Condensed", sans-serif;
  --text-font: "Origin Super Condensed", sans-serif;
}

/* ═══════════════════════════
       PALETA — BRANDBOOK 2025
       DZIEŃ:  #EFEEEA (dominuje) + #AC0202 (elementy)
       NOC:    #151515 + #B5C9DA + #3E1A02 (nie z czernią!) + #EFEEEA
    ═══════════════════════════ */
    :root {
      --beige:  #EFEEEA;
      --red:    #AC0202;
      --black:  #151515;
      --blue:   #B5C9DA;
      --brown:  #3E1A02;
      --white:  #FFFFFF;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
    body {
      background: var(--beige);
      color: var(--black);
      font-family: var(--text-font);
      font-weight: 300;
      overflow-x: hidden;
    }
    a { text-decoration: none; color: inherit; }

    /* Text-stroke only for large Origin Super Condensed display elements */
    .hero-word, .section-h, .stat-n, .dd-word, .marquee-item,
    .ev-date-num, .contact-address, .contact-phone, .mob-menu a {
      -webkit-text-stroke: 0.4px currentColor;
    }

    ::-webkit-scrollbar { width: 3px; }
    ::-webkit-scrollbar-thumb { background: var(--red); }

    .wrap { max-width: 1200px; margin: 0 auto; padding: 0 48px; }

    /* placeholder */
    .ph { background: #D8D6D0; position: relative; overflow: hidden; }
    .ph::after {
      content: 'ZDJĘCIE';
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--display-font);
      font-size: .85rem; letter-spacing: .18em;
      color: rgba(0,0,0,.15);
    }
    .ph-dark { background: #2a2a2a; }
    .ph-dark::after { color: rgba(255,255,255,.08); }

    /* ═══════════════════════════
       LOGO — CSS filter tricks
    ═══════════════════════════ */
    .logo-img {
      display: block;
      width: 100%;
      height: auto;
    }
    /* Logo is white SVG by default - perfect for dark backgrounds */
    .logo-white {
      /* no filter needed - SVG is already white */
    }
    /* Black version for light/beige backgrounds (scrolled nav) */
    .logo-dark {
      filter: brightness(0);
    }
    /* Red #AC0202 version for beige backgrounds */
    .logo-red {
      filter: brightness(0) saturate(100%)
              invert(7%) sepia(96%) saturate(6000%)
              hue-rotate(0deg) brightness(90%) contrast(120%);
    }

    /* ═══════════════════════════
       GRAIN OVERLAY
    ═══════════════════════════ */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 9999;
      pointer-events: none;
      opacity: .035;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
      background-repeat: repeat;
      background-size: 200px;
    }

    /* ═══════════════════════════
       NAV — Redesigned
    ═══════════════════════════ */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 200;
      display: flex; align-items: center; justify-content: space-between;
      padding: 24px 48px;
      transition: all .5s cubic-bezier(.22,1,.36,1);
      border-bottom: 1px solid transparent;
    }
    nav.scrolled {
      background: rgba(239,238,234,.95);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      padding: 14px 48px;
      border-bottom-color: rgba(0,0,0,.06);
    }
    .nav-logo { width: 120px; line-height: 0; }
    .nav-logo img { width: 100%; }

    .nav-links { display: flex; gap: 36px; list-style: none; }
    .nav-links a {
      font-family: var(--display-font);
      font-size: 1rem; font-weight: 900;
      letter-spacing: .14em; text-transform: uppercase;
      color: rgba(255,255,255,.7);
      transition: color .3s;
      position: relative;
    }
    .nav-links a::after {
      content: '';
      position: absolute; bottom: -4px; left: 0; right: 0;
      height: 1px; background: var(--red);
      transform: scaleX(0); transform-origin: right;
      transition: transform .4s cubic-bezier(.22,1,.36,1);
    }
    .nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
    nav.scrolled .nav-links a { color: var(--black); }
    .nav-links a:hover { color: var(--red); }

    .nav-cta {
      font-family: var(--display-font);
      font-size: .95rem; font-weight: 900;
      letter-spacing: .14em; text-transform: uppercase;
      padding: 14px 36px;
      background: var(--red);
      color: var(--white);
      transition: all .3s;
    }
    .nav-cta:hover { background: var(--black); transform: translateY(-1px); }

    .hamburger {
      display: none; flex-direction: column; gap: 5px;
      background: none; border: none; cursor: pointer; padding: 4px;
    }
    .hamburger span {
      display: block; width: 26px; height: 2px; background: var(--white);
      transition: all .4s cubic-bezier(.22,1,.36,1);
    }
    nav.scrolled .hamburger span { background: var(--black); }
    .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .mob-menu {
      display: none; position: fixed; inset: 0; z-index: 190;
      background: var(--beige);
      flex-direction: column; align-items: center; justify-content: center;
    }
    .mob-menu.open { display: flex; }
    .mob-menu a {
      font-family: 'Origin Super Condensed', var(--display-font);
      font-size: clamp(3rem, 12vw, 5rem); font-weight: 900;
      letter-spacing: .04em; text-transform: uppercase;
      color: var(--black); line-height: 1.1;
      transition: color .2s;
    }
    .mob-menu a:hover { color: var(--red); }
    .mob-rezerwuj {
      margin-top: 24px;
      background: var(--red);
      color: var(--white) !important;
      font-size: 1rem !important;
      padding: 14px 48px;
    }

    /* ═══════════════════════════
       HERO — SPLIT SCREEN
    ═══════════════════════════ */
    .hero {
      height: 100vh; min-height: 700px;
      display: grid; grid-template-columns: 1fr 1fr;
      position: relative; overflow: hidden;
    }
    .hero-half {
      position: relative;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      overflow: hidden;
    }
    .hero-day {
      background: var(--beige);
    }
    .hero-night {
      background: var(--black);
    }
    .hero-day .ph, .hero-night .ph {
      position: absolute; inset: 0;
    }
    .hero-day-overlay {
      position: absolute; inset: 0;
      background: rgba(239,238,234,.82);
    }
    .hero-night-overlay {
      position: absolute; inset: 0;
      background: rgba(21,21,21,.78);
    }

    .hero-content {
      position: relative; z-index: 2;
      display: flex; flex-direction: column;
      align-items: center; text-align: center;
      gap: 16px;
    }
    .hero-sub {
      font-family: var(--display-font);
      font-size: 1.1rem; font-weight: 900;
      letter-spacing: .18em; text-transform: uppercase;
      opacity: 0; animation: heroSlide .8s ease 1s forwards;
    }
    .hero-day .hero-sub { color: var(--red); }
    .hero-night .hero-sub { color: var(--blue); }

    .hero-word {
      font-family: 'Origin Super Condensed', var(--display-font);
      font-weight: 900; text-transform: uppercase;
      font-size: clamp(5rem, 14vw, 11rem);
      line-height: .85; letter-spacing: -.02em;
      opacity: 0; animation: heroReveal 1s ease .4s forwards;
    }
    .hero-day .hero-word { color: var(--red); }
    .hero-night .hero-word { color: var(--blue); }

    .hero-time {
      font-family: var(--display-font);
      font-size: 1.05rem; font-weight: 900;
      letter-spacing: .14em; text-transform: uppercase;
      opacity: 0; animation: heroSlide .8s ease 1.3s forwards;
    }
    .hero-day .hero-time { color: rgba(21,21,21,.65); }
    .hero-night .hero-time { color: rgba(181,201,218,.70); }

    /* Center logo */
    .hero-center-logo {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      z-index: 10;
      width: min(360px, 50vw);
      opacity: 0; animation: heroLogo 1.2s ease .1s forwards;
    }
    .hero-center-logo img { width: 100%; }

    /* Divider line */
    .hero-divider {
      position: absolute;
      top: 0; bottom: 0;
      left: 50%; width: 1px;
      background: rgba(255,255,255,.1);
      z-index: 5;
      transform: scaleY(0); transform-origin: top;
      animation: dividerGrow 1s ease .6s forwards;
    }

    .hero-scroll {
      position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
      z-index: 10;
      display: flex; flex-direction: column; align-items: center; gap: 10px;
      opacity: 0; animation: fadeUp .8s ease 1.8s forwards;
    }
    .hero-scroll-line {
      width: 1px; height: 48px;
      background: linear-gradient(to bottom, transparent, rgba(255,255,255,.4));
      animation: pulse 2s ease-in-out infinite;
    }
    .hero-scroll-txt {
      font-family: var(--display-font);
      font-size: .5rem; letter-spacing: .35em; text-transform: uppercase;
      color: rgba(255,255,255,.2);
    }

    /* Location badge */
    .hero-location {
      position: absolute;
      bottom: 36px; right: 48px; z-index: 10;
      font-family: var(--display-font);
      font-size: .95rem; font-weight: 900;
      letter-spacing: .15em; text-transform: uppercase;
      color: rgba(181,201,218,.25);
      writing-mode: vertical-rl;
      opacity: 0; animation: fadeUp .8s ease 1.6s forwards;
    }

    @keyframes heroReveal {
      from { opacity: 0; transform: translateY(40px) scaleY(1.15); }
      to { opacity: 1; transform: translateY(0) scaleY(1); }
    }
    @keyframes heroSlide {
      from { opacity: 0; transform: translateY(16px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes heroLogo {
      from { opacity: 0; transform: translate(-50%, -50%) scale(.85); }
      to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }
    @keyframes dividerGrow {
      to { transform: scaleY(1); }
    }
    @keyframes pulse { 0%,100%{opacity:0;transform:scaleY(.4) translateY(-12px)} 60%{opacity:1;transform:scaleY(1)} }
    @keyframes fadeUp { to { opacity:1; transform:translateY(0); } }

    /* ═══════════════════════════
       SECTION COMMON
    ═══════════════════════════ */
    .section-day { background: var(--beige); }
    .section-night { background: var(--black); }

    .section-label {
      font-family: var(--display-font);
      font-size: 1rem; font-weight: 900;
      letter-spacing: .28em; text-transform: uppercase;
      margin-bottom: 16px;
    }
    .section-day .section-label { color: var(--red); }
    .section-night .section-label { color: var(--blue); }

    .section-h {
      font-family: 'Origin Super Condensed', var(--display-font);
      font-weight: 900; text-transform: uppercase;
      font-size: clamp(3.5rem, 7vw, 7rem);
      line-height: .88; letter-spacing: -.01em;
      margin-bottom: 32px;
    }
    .section-day .section-h { color: var(--black); }
    .section-night .section-h { color: var(--white); }
    .section-h .accent { color: var(--red); }
    .section-night .section-h .accent { color: var(--blue); }

    .section-p {
      font-size: .88rem; line-height: 1.9;
      max-width: 480px;
    }
    .section-day .section-p { color: rgba(21,21,21,.5); }
    .section-night .section-p { color: rgba(255,255,255,.4); }

    /* ═══════════════════════════
       O NAS — Asymmetric layout
    ═══════════════════════════ */
    .about { padding: 140px 0 120px; }
    .about-grid {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 100px; align-items: center;
    }
    .about-img-wrap { position: relative; }
    .about-img-main {
      height: 620px;
      position: relative;
      overflow: hidden;
    }
    .about-img-main .ph { height: 100%; }
    .about-img-accent {
      position: absolute;
      bottom: -40px; right: -40px;
      width: 55%; height: 260px;
      border: 6px solid var(--beige);
      overflow: hidden;
    }
    .about-img-accent .ph { height: 100%; }
    /* Decorative red bar */
    .about-img-wrap::before {
      content: '';
      position: absolute;
      top: -20px; left: -20px;
      width: 80px; height: 4px;
      background: var(--red);
    }

    .about-text { padding-top: 20px; }

    .about-stats {
      display: flex; gap: 48px;
      margin-top: 56px; padding-top: 44px;
      border-top: 1px solid rgba(21,21,21,.1);
    }
    .stat-n {
      font-family: 'Origin Super Condensed', var(--display-font);
      font-size: 3rem; font-weight: 900;
      line-height: 1; color: var(--red);
    }
    .stat-l {
      font-family: var(--display-font);
      font-size: .95rem; font-weight: 900;
      letter-spacing: .14em; text-transform: uppercase;
      color: rgba(21,21,21,.35); margin-top: 6px;
    }

    /* ═══════════════════════════
       DZIEŃ/NOC DIVIDER — Enhanced
    ═══════════════════════════ */
    .divider-duality {
      display: grid; grid-template-columns: 1fr 1fr;
      min-height: 320px;
    }
    .dd-half {
      padding: 56px 56px;
      display: flex; flex-direction: column;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }
    .dd-day { background: var(--red); }
    .dd-night { background: var(--black); }

    .dd-day::after, .dd-night::after {
      content: '';
      position: absolute;
      top: -60%; right: -20%;
      width: 300px; height: 300px;
      border-radius: 50%;
      opacity: .06;
    }
    .dd-day::after { background: var(--white); }
    .dd-night::after { background: var(--blue); }

    .dd-sub {
      font-family: var(--display-font);
      font-size: 1.05rem; font-weight: 900;
      letter-spacing: .16em; text-transform: uppercase;
      position: relative;
    }
    .dd-day .dd-sub { color: rgba(255,255,255,.45); }
    .dd-night .dd-sub { color: rgba(181,201,218,.35); }
    .dd-word {
      font-family: 'Origin Super Condensed', var(--display-font);
      font-size: clamp(4rem, 8vw, 6.5rem);
      font-weight: 900; text-transform: uppercase; line-height: .9;
      position: relative;
      margin: 8px 0 16px;
    }
    .dd-day .dd-word { color: var(--white); }
    .dd-night .dd-word { color: var(--blue); }
    .dd-desc {
      font-size: .82rem; line-height: 1.75;
      max-width: 380px;
      position: relative;
    }
    .dd-day .dd-desc { color: rgba(255,255,255,.65); }
    .dd-night .dd-desc { color: rgba(255,255,255,.35); }

    a.dd-half { cursor: pointer; transition: filter .3s; }
    a.dd-half:hover { filter: brightness(1.08); }
    .dd-arrow {
      font-family: var(--display-font);
      font-size: .95rem; font-weight: 900;
      letter-spacing: .14em; text-transform: uppercase;
      margin-top: 20px;
      opacity: 0; transition: opacity .3s, transform .3s;
      transform: translateY(-4px);
      position: relative;
    }
    .dd-day .dd-arrow { color: rgba(255,255,255,.4); }
    .dd-night .dd-arrow { color: rgba(181,201,218,.3); }
    a.dd-half:hover .dd-arrow { opacity: 1; transform: translateY(0); }

    /* ═══════════════════════════
       MENU
    ═══════════════════════════ */
    .menu { padding: 120px 0; }
    .menu-header {
      display: flex; align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 72px;
      padding-bottom: 36px;
      border-bottom: 1px solid rgba(21,21,21,.08);
    }
    .section-night .menu-header {
      border-bottom-color: rgba(255,255,255,.06);
    }
    .menu-cols { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; }
    .menu-col { padding: 44px 40px; }
    .section-day .menu-col { background: rgba(0,0,0,.025); }
    .section-night .menu-col { background: rgba(255,255,255,.025); }

    .col-title {
      font-family: var(--display-font);
      font-size: 1rem; font-weight: 900;
      letter-spacing: .28em; text-transform: uppercase;
      margin-bottom: 32px;
      position: relative;
      padding-bottom: 12px;
    }
    .col-title::after {
      content: '';
      position: absolute; bottom: 0; left: 0;
      width: 24px; height: 2px;
    }
    .section-day .col-title { color: var(--red); }
    .section-day .col-title::after { background: var(--red); }
    .section-night .col-title { color: var(--blue); }
    .section-night .col-title::after { background: var(--blue); }

    .dish { padding: 18px 0; }
    .dish + .dish { border-top: 1px solid; }
    .section-day .dish + .dish { border-color: rgba(21,21,21,.06); }
    .section-night .dish + .dish { border-color: rgba(255,255,255,.05); }
    .dish-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
    .dish-name {
      font-family: var(--display-font);
      font-size: 1.15rem; font-weight: 900;
      letter-spacing: .08em; text-transform: uppercase;
      transition: color .2s;
    }
    .section-day .dish-name { color: var(--black); }
    .section-night .dish-name { color: var(--white); }
    .dish:hover .dish-name { color: var(--red); }
    .section-night .dish:hover .dish-name { color: var(--blue); }
    .dish-price {
      font-family: var(--display-font);
      font-size: 1.1rem; font-weight: 900;
    }
    .section-day .dish-price { color: var(--red); }
    .section-night .dish-price { color: var(--blue); }
    .dish-desc { font-size: .76rem; line-height: 1.65; }
    .section-day .dish-desc { color: rgba(21,21,21,.4); }
    .section-night .dish-desc { color: rgba(255,255,255,.25); }

    /* ═══════════════════════════
       MARQUEE — Enhanced
    ═══════════════════════════ */
    .marquee {
      background: var(--red);
      padding: 32px 0; overflow: hidden;
      position: relative;
    }
    .marquee::before, .marquee::after {
      content: '';
      position: absolute; top: 0; bottom: 0; width: 100px;
      z-index: 2;
    }
    .marquee::before { left: 0; background: linear-gradient(to right, var(--red), transparent); }
    .marquee::after { right: 0; background: linear-gradient(to left, var(--red), transparent); }
    .marquee-track {
      display: flex; gap: 48px; width: max-content;
      animation: marquee 20s linear infinite;
    }
    .marquee-item {
      font-family: 'Origin Super Condensed', var(--display-font);
      font-size: clamp(3rem, 6vw, 5rem);
      font-weight: 900; text-transform: uppercase;
      white-space: nowrap; line-height: 1;
    }
    .marquee-item.solid { color: var(--white); }
    .marquee-item.outline {
      color: transparent;
      -webkit-text-stroke: 1.5px rgba(255,255,255,.3);
    }
    @keyframes marquee { to { transform: translateX(-50%); } }

    /* ═══════════════════════════
       WYDARZENIA — Refined
    ═══════════════════════════ */
    .events { padding: 120px 0; }
    .events-top {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 80px; align-items: end;
      margin-bottom: 72px;
    }
    .events-month {
      font-family: var(--display-font);
      font-size: 1rem; font-weight: 900;
      letter-spacing: .16em; text-transform: uppercase;
      color: var(--red); margin-bottom: 10px;
    }
    .event-row {
      display: grid;
      grid-template-columns: 90px 1fr 110px;
      align-items: center; gap: 32px;
      padding: 24px 0;
      border-top: 1px solid rgba(21,21,21,.06);
      transition: all .25s;
      cursor: default;
    }
    .event-row:last-child { border-bottom: 1px solid rgba(21,21,21,.06); }
    .event-row:hover { padding-left: 12px; background: rgba(172,2,2,.03); }
    .ev-date-num {
      font-family: 'Origin Super Condensed', var(--display-font);
      font-size: 2rem; font-weight: 900; color: var(--red); line-height: 1;
    }
    .ev-date-day {
      font-family: var(--display-font);
      font-size: .9rem; font-weight: 900;
      letter-spacing: .14em; text-transform: uppercase;
      color: rgba(21,21,21,.3); margin-top: 3px;
    }
    .ev-name {
      font-family: var(--display-font);
      font-size: 1.25rem; font-weight: 900;
      text-transform: uppercase; letter-spacing: .08em;
      color: var(--black);
    }
    .ev-dj { font-size: .73rem; color: rgba(21,21,21,.38); margin-top: 4px; }
    .ev-time {
      font-family: var(--display-font);
      font-size: .95rem; font-weight: 900;
      letter-spacing: .12em;
      color: var(--white); background: var(--black);
      padding: 7px 16px; text-align: center;
      transition: background .2s;
    }
    .event-row:hover .ev-time { background: var(--red); }

    /* ═══════════════════════════
       GALERIA — Editorial Grid
    ═══════════════════════════ */
    .gallery { padding: 80px 0 80px; }
    .gallery-header { margin-bottom: 56px; }

    .ge-grid { display:flex; flex-direction:column; gap:4px; }
    .ge-row { display:flex; gap:4px; height:420px; }
    .ge-big { flex:0 0 60%; position:relative; overflow:hidden; cursor:pointer; }
    .ge-small-col { flex:0 0 calc(40% - 4px); display:flex; flex-direction:column; gap:4px; }
    .ge-small { flex:1; position:relative; overflow:hidden; cursor:pointer; }

    .ge-big img, .ge-small img {
      position:absolute; inset:0;
      width:100%; height:100%;
      object-fit:cover; display:block;
      transition: transform .5s cubic-bezier(.4,0,.2,1);
    }
    .ge-big::after, .ge-small::after {
      content:''; position:absolute; inset:0;
      background:#AC0202; opacity:0;
      transition:opacity .4s ease; pointer-events:none;
    }
    .ge-big:hover img, .ge-small:hover img { transform:scale(1.03); }
    .ge-big:hover::after, .ge-small:hover::after { opacity:0.15; }

    @media(max-width:768px){
      .ge-row { height:240px; }
      .ge-big { flex:0 0 58%; }
      .ge-small-col { flex:0 0 calc(42% - 4px); }
    }
    @media(max-width:480px){
      .ge-row { height:auto; flex-direction:column; }
      .ge-big, .ge-small-col { flex:none; width:100%; }
      .ge-big { height:260px; }
      .ge-small-col { flex-direction:row; height:150px; }
      .ge-small { flex:1; }
    }

    /* ═══════════════════════════
       TEAM — Refined cards
    ═══════════════════════════ */
    .team { padding: 120px 0; }
    .team-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; margin-top: 72px; }
    .team-card { cursor: default; }
    .team-card-img { height: 440px; position: relative; overflow: hidden; }
    .team-card-img .ph {
      height: 100%;
      transition: transform .6s cubic-bezier(.22,1,.36,1);
    }
    .team-card:hover .team-card-img .ph { transform: scale(1.05); }
    .team-card-bar {
      height: 3px; background: var(--red);
      transform: scaleX(0); transform-origin: left;
      transition: transform .5s cubic-bezier(.22,1,.36,1);
    }
    .team-card:hover .team-card-bar { transform: scaleX(1); }
    .team-card-info { padding: 16px 0; }
    .team-role {
      font-family: var(--display-font);
      font-size: .95rem; font-weight: 900;
      letter-spacing: .14em; text-transform: uppercase;
      color: var(--red); margin-bottom: 4px;
    }
    .team-name {
      font-family: var(--display-font);
      font-size: 1.6rem; font-weight: 900;
      text-transform: uppercase; letter-spacing: .06em;
      color: var(--black);
    }
    .team-bio { font-size: .76rem; line-height: 1.7; color: rgba(21,21,21,.45); margin-top: 8px; }

    /* ═══════════════════════════
       REZERWACJA — Elegant
    ═══════════════════════════ */
    .reservation { padding: 120px 0; border-top: 1px solid rgba(21,21,21,.06); }
    .res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: start; }
    .res-form { display: flex; flex-direction: column; gap: 16px; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .fg { display: flex; flex-direction: column; gap: 7px; }
    .fg label {
      font-family: var(--display-font);
      font-size: .92rem; font-weight: 900;
      letter-spacing: .14em; text-transform: uppercase;
      color: rgba(21,21,21,.4);
    }
    .fg input, .fg select, .fg textarea {
      background: var(--white);
      border: 1px solid rgba(21,21,21,.1);
      padding: 14px 18px;
      font-family: var(--text-font);
      font-size: .85rem; font-weight: 300;
      color: var(--black);
      outline: none;
      transition: border-color .3s;
      appearance: none;
    }
    .fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--red); }
    .fg textarea { min-height: 90px; resize: vertical; }
    .btn-res {
      background: var(--red); color: var(--white); border: none;
      padding: 16px 44px;
      font-family: var(--display-font);
      font-size: 1rem; font-weight: 900;
      letter-spacing: .14em; text-transform: uppercase;
      cursor: pointer; align-self: flex-start;
      transition: all .3s;
    }
    .btn-res:hover { background: var(--black); transform: translateY(-2px); }
    .res-info { display: flex; flex-direction: column; gap: 28px; padding-top: 8px; }
    .res-info-item { display: flex; gap: 18px; align-items: flex-start; }
    .ri-dot {
      width: 5px; height: 5px; border-radius: 50%;
      background: var(--red); margin-top: 8px; flex-shrink: 0;
    }
    .ri-lbl {
      font-family: var(--display-font);
      font-size: .95rem; font-weight: 900;
      letter-spacing: .14em; text-transform: uppercase;
      color: var(--red); margin-bottom: 4px;
    }
    .ri-val { font-size: .82rem; line-height: 1.65; color: rgba(21,21,21,.55); }

    /* ═══════════════════════════
       KONTAKT — Dramatic dark
    ═══════════════════════════ */
    .contact { padding: 140px 0; position: relative; }
    .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
    .contact-address {
      font-family: 'Origin Super Condensed', var(--display-font);
      font-size: clamp(2.8rem, 5vw, 4.5rem);
      font-weight: 900; text-transform: uppercase;
      line-height: 1; letter-spacing: -.01em;
      color: var(--white); margin-bottom: 56px;
    }
    .contact-address span { color: var(--blue); }
    .hours {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 40px; margin-bottom: 48px;
    }
    .hours-block-title {
      font-family: var(--display-font);
      font-size: .95rem; font-weight: 900;
      letter-spacing: .14em; text-transform: uppercase;
      margin-bottom: 18px;
    }
    .hours-day .hours-block-title { color: var(--red); }
    .hours-night .hours-block-title { color: var(--blue); }
    .hours-row {
      display: flex; justify-content: space-between;
      padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.05);
      font-size: .92rem;
    }
    .hours-row span:first-child { color: rgba(255,255,255,.3); }
    .hours-row span:last-child { color: var(--white); font-weight: 900; }
    .contact-map {
      height: 100%; min-height: 500px;
      background: rgba(255,255,255,.03);
      display: flex; align-items: center; justify-content: center;
      border: 1px solid rgba(255,255,255,.04);
    }
    .contact-map span {
      font-family: var(--display-font);
      font-size: .85rem; letter-spacing: .18em; text-transform: uppercase;
      color: rgba(255,255,255,.08);
    }
    .contact-socials { display: flex; gap: 28px; margin-top: 36px; }
    .cs-link {
      font-family: var(--display-font);
      font-size: .95rem; font-weight: 900;
      letter-spacing: .14em; text-transform: uppercase;
      color: rgba(255,255,255,.25);
      border-bottom: 1px solid rgba(255,255,255,.08);
      padding-bottom: 4px;
      transition: all .3s;
    }
    .cs-link:hover { color: var(--blue); border-color: var(--blue); }
    .contact-phone {
      font-family: 'Origin Super Condensed', var(--display-font);
      font-size: 2.2rem; font-weight: 900;
      color: var(--white); letter-spacing: .08em;
    }
    .contact-email {
      font-size: .85rem; color: rgba(255,255,255,.35); margin-top: 8px;
      transition: color .2s;
    }
    .contact-email:hover { color: var(--blue); }

    /* ═══════════════════════════
       FOOTER — Clean
    ═══════════════════════════ */
    footer {
      background: var(--black);
      border-top: 1px solid rgba(255,255,255,.04);
      padding: 40px 0;
    }
    .footer-inner {
      display: flex; align-items: center; justify-content: space-between;
    }
    .footer-logo { width: 80px; line-height: 0; }
    .footer-logo img { width: 100%; }
    .footer-mid {
      font-family: var(--display-font);
      font-size: .92rem; font-weight: 900;
      letter-spacing: .14em; text-transform: uppercase;
      color: rgba(255,255,255,.15);
    }
    .footer-copy { font-size: .68rem; color: rgba(255,255,255,.15); }

    /* ═══════════════════════════
       SCROLL ANIMATIONS
    ═══════════════════════════ */
    .fu {
      opacity: 0; transform: translateY(36px);
      transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
    }
    .fu.in { opacity: 1; transform: none; }
    .fu-delay-1 { transition-delay: .1s; }
    .fu-delay-2 { transition-delay: .2s; }
    .fu-delay-3 { transition-delay: .3s; }

    /* ═══════════════════════════
       RESPONSIVE
    ═══════════════════════════ */
    @media (max-width: 1024px) {
      .wrap { padding: 0 32px; }
      nav { padding: 18px 32px; }
      nav.scrolled { padding: 12px 32px; }
      .nav-links, .nav-cta { display: none; }
      .hamburger { display: flex; }

      /* Hero: flex column on tablet/mobile — both halves visible */
      .hero { display:flex; flex-direction:column; height:100svh; min-height:600px; grid-template-columns:unset; }
      .hero-half { flex:0 0 50%; width:100%; min-height:0; }
      .hero-center-logo { display:none; }
      .hero-divider { left:0; right:0; top:50%; bottom:auto; width:100%; height:2px; transform:translateY(-50%); cursor:ns-resize; }
      .hero-location { display: none; }

      .about-grid, .res-grid, .contact-grid { grid-template-columns: 1fr; gap: 48px; }
      .about-img-accent { display: none; }
      .about-img-main { height: 380px; }
      .menu-cols { grid-template-columns: 1fr; }
      .team-grid { grid-template-columns: repeat(2,1fr); }
      .events-top { grid-template-columns: 1fr; }
      /* gallery: responsive handled in .ge-grid rules above */
      .hours { grid-template-columns: 1fr; }
      .contact-map { min-height: 280px; }
      .dd-half { padding: 36px 32px; }
    }

    @media (max-width: 640px) {
      .wrap { padding: 0 20px; }
      nav { padding: 14px 20px; }
      nav.scrolled { padding: 10px 20px; }
      .about { padding: 80px 0; }
      .menu { padding: 80px 0; }
      .menu-header { flex-direction: column; align-items: flex-start; gap: 16px; }
      .events { padding: 80px 0; }
      .event-row { grid-template-columns: 68px 1fr; }
      .ev-time { display: none; }
      .team { padding: 80px 0; }
      .team-grid { grid-template-columns: 1fr; }
      .reservation { padding: 80px 0; }
      .form-row { grid-template-columns: 1fr; }
      .btn-res { width: 100%; text-align: center; padding: 16px; }
      .contact { padding: 80px 0; }
      .footer-inner { flex-direction: column; gap: 16px; }
      .footer-mid { display: none; }
      .divider-duality { grid-template-columns: 1fr; }
      .hero-word { font-size: clamp(4rem, 18vw, 6rem); }
    }

/* =========================================================
   LOGO (brandbook red + corner positioning)
   =========================================================
   1) Pozycja: lewy górny róg (fixed, zawsze widoczne)
   2) Kolor #AC0202:
      - jeśli logo jest <img src="...svg"> z twardym fill — zrób plik SVG czerwony i podmień src
      - jeśli logo jest inline SVG / currentColor — wystarczy klasa .logo-red
   ========================================================= */

:root{
  --brand-red: #AC0202;
}

/* Corner logo */
#navLogoImg,
nav .logo-img{
  position: fixed;
  top: 22px;
  left: 22px;
  height: 34px;
  width: auto;
  z-index: 9999;
}

/* Helper class (działa dla inline SVG / currentColor) */
.logo-red{ color: var(--brand-red); }

@media (max-width: 768px){
  #navLogoImg,
  nav .logo-img{
    top: 16px;
    left: 16px;
    height: 30px;
  }
}