/* ═══════════════════════════════════════════════════════════════════════════
   GUITARCARE.PL — arkusz stylów
   Uwaga: większość layoutu siedzi INLINE w index.html / index-en.html.
   Tutaj są tylko rzeczy, których inline style nie obsłuży: :hover, media
   queries, animacje i stany klas.

   Kolejność bloków (Ctrl+F po nazwie klasy):
     baza .......... html, body, nagłówki, linki, :focus-visible
     .nav-* ........ nawigacja i menu mobilne
     .r-* .......... slider Realizacje (track, slajd, strzałki, kropki)
     .ba-* ......... przełącznik Przed / Po na zdjęciach realizacji
     .faq-* ........ akordeon FAQ
     .form-* ....... pola formularza
     klasy z inline'ów — na końcu pliku:
       .t-body/.t-muted/.eyebrow ... typografia powtarzalna
       .r-card/.r-body/.r-desc ..... slajd realizacji
       .price-row/.price-value ..... tabela cen
       .issue/.issue-title/.issue-desc ... lista usterek
       .faq-answer, .field ......... FAQ i pola formularza

   PALETA
     #0B0C0E  tło strony        #14161A  tło kart
     #242830  linie/obramowania #383E4A  obramowania jaśniejsze
     #F4F5F7  tekst główny      #9AA0AB  tekst wyszarzony
     #D9B25F  złoty akcent
   ═══════════════════════════════════════════════════════════════════════════ */

  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
  body { margin: 0; background: #0B0C0E; color: #F4F5F7; font-family: Geist, system-ui, sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; text-wrap: pretty; }
  h1, h2 { font-family: 'Playfair Display', Georgia, serif; }
  * { box-sizing: border-box; }
  a { color: #F4F5F7; text-decoration: none; }
  a:hover { color: #D9B25F; }
  :focus-visible { outline: 2px solid #D9B25F; outline-offset: 3px; }
  ::selection { background: #D9B25F; color: #0B0C0E; }

  .nav-link { color: #C8CDD6; font-size: 14px; font-weight: 500; transition: color 0.15s; }
  .nav-link:hover { color: #F4F5F7 !important; }

  .nav-phone {
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    letter-spacing: 0.06em;
    color: #F4F5F7;
    border: 1px solid #383E4A;
    border-radius: 6px;
    padding: 9px 15px;
    transition: border-color 0.15s;
  }
  .nav-phone:hover { border-color: #D9B25F !important; color: #F4F5F7 !important; }

  .btn-primary {
    display: inline-flex;
    align-items: center;
    background: #D9B25F;
    color: #0B0C0E;
    font-size: 15px;
    font-weight: 500;
    padding: 15px 24px;
    border-radius: 6px;
    transition: background 0.15s;
  }
  .btn-primary:hover { background: #EBCB8B !important; color: #0B0C0E !important; }

  .btn-secondary {
    display: inline-flex;
    align-items: center;
    border: 1px solid #383E4A;
    color: #F4F5F7;
    font-size: 15px;
    font-weight: 500;
    padding: 15px 24px;
    border-radius: 6px;
    transition: border-color 0.15s;
  }
  .btn-secondary:hover { border-color: #D9B25F !important; color: #F4F5F7 !important; }

  .faq-btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: none;
    border: 0;
    color: #F4F5F7;
    font-family: inherit;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-align: left;
    padding: 22px 0;
    cursor: pointer;
    transition: color 0.15s;
  }
  .faq-btn:hover { color: #D9B25F; }
  .faq-chevron {
    flex-shrink: 0;
    color: #9AA0AB;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s;
  }
  .faq-btn:hover .faq-chevron { color: #D9B25F; }
  .faq-btn[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }

  .faq-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .faq-body.open { grid-template-rows: 1fr; }
  .faq-body > div { overflow: hidden; }

  @media (max-width: 600px) {
    .grid-2x2 { grid-template-columns: 1fr !important; }
  }

  .menu-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: 1px solid #242830;
    border-radius: 6px;
    cursor: pointer;
    color: #F4F5F7;
    transition: border-color 0.2s, color 0.2s;
  }
  .menu-toggle:hover { border-color: #4A5260; }
  .menu-toggle .ic {
    position: absolute;
    transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .menu-toggle .ic-menu  { opacity: 1; transform: rotate(0deg)   scale(1); }
  .menu-toggle .ic-x     { opacity: 0; transform: rotate(-90deg) scale(0.7); }
  .menu-toggle.open .ic-menu { opacity: 0; transform: rotate(90deg)  scale(0.7); }
  .menu-toggle.open .ic-x    { opacity: 1; transform: rotate(0deg)   scale(1); }

  .wide-nav { display: flex !important; }
  .narrow-nav { display: none !important; }
  @media (max-width: 860px) {
    .wide-nav { display: none !important; }
    .narrow-nav { display: flex !important; }
  }

  /* ── Realizacje slider ── */
  .r-track-wrap { overflow: hidden; margin-top: clamp(40px,5vw,72px); }
  .r-track {
    display: flex;
    gap: 28px;
    transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
  }
  .r-track:active { cursor: grabbing; }
  .r-track img { -webkit-user-drag: none; pointer-events: none; }
  .r-slide { flex: 0 0 calc(50% - 14px); min-width: 0; }

  .r-arrow {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid #242830;
    border-radius: 8px;
    color: #9AA0AB;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
    padding: 0;
    flex-shrink: 0;
  }
  .r-arrow:hover { border-color: #D9B25F; color: #D9B25F; }
  .r-arrow:disabled { opacity: 0.25; pointer-events: none; }

  .r-dots { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
  .r-dot {
    height: 6px; width: 6px;
    border-radius: 3px;
    background: #2A2F38;
    border: none; padding: 0; cursor: pointer;
    transition: background 0.25s, width 0.25s;
  }
  .r-dot.active { background: #D9B25F; width: 20px; }

  @media (max-width: 640px) {
    .r-slide { flex: 0 0 100%; }
    .r-track { gap: 16px; }
  }

  /* ── Realizacje: przed / po ── */
  .ba-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.35s ease;
  }
  .ba-img.is-active { opacity: 1; }

  .ba-toggle {
    position: absolute;
    right: 14px;
    bottom: 14px;
    display: flex;
    gap: 2px;
    padding: 3px;
    background: rgba(11,12,14,0.82);
    border: 1px solid #242830;
    border-radius: 6px;
  }
  .ba-btn {
    background: none;
    border: none;
    padding: 6px 14px;
    border-radius: 4px;
    color: #9AA0AB;
    font-family: inherit;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
  }
  .ba-btn:hover { color: #F4F5F7; }
  .ba-btn.is-active { background: #D9B25F; color: #0B0C0E; }

  @media (max-width: 600px) {
    .data-bar { grid-template-columns: 1fr !important; }
    .data-bar > div { justify-content: flex-start !important; border-right: none !important; border-bottom: 1px solid #242830; }
    .data-bar > div:last-child { border-bottom: none; }
  }

  .scroll-cue {
    position: absolute;
    right: 40px;
    bottom: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #9AA0AB;
    text-decoration: none;
    transition: color 0.2s;
  }
  .scroll-cue::before {
    content: '';
    display: block;
    width: 1px;
    height: 44px;
    background: currentColor;
    opacity: 0.35;
    margin-bottom: 6px;
  }
  .scroll-cue svg { animation: scrollCue 2.4s ease-in-out infinite; }
  .scroll-cue:hover { color: #D9B25F; }
  @keyframes scrollCue {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    55%       { transform: translateY(7px); opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) { .scroll-cue svg { animation: none; } }
  @media (max-width: 700px) { .scroll-cue { display: none; } }

  .skip-link {
    position: absolute;
    top: -100%;
    left: 24px;
    background: #D9B25F;
    color: #0B0C0E;
    font-size: 14px;
    font-weight: 500;
    padding: 12px 20px;
    border-radius: 0 0 6px 6px;
    z-index: 100;
    text-decoration: none;
  }
  .skip-link:focus { top: 0; outline: 2px solid #0B0C0E; outline-offset: -2px; }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }

  /* ══ KLASY WYCIĄGNIĘTE Z INLINE'ÓW ══
     Deklaracje przeniesione 1:1 z atrybutów style= w index.html.
     Zmiana tutaj = zmiana we wszystkich miejscach naraz. */
  .ba { position: relative; aspect-ratio: 16/9; overflow: hidden; }
  /* podstawowy tekst 17px */
  .t-body { font-size:17px; line-height:1.5; }
  /* tekst wyszarzony (tylko span) */
  .t-muted { color:#9AA0AB; }
  /* karta realizacji */
  .r-card { border:1px solid #242830; border-radius:8px; overflow:hidden; background:#14161A; }
  /* treść pod zdjęciem realizacji */
  .r-body { padding:clamp(20px,2.2vw,28px); }
  /* kwota w tabeli cen */
  .price-value { font-variant-numeric:tabular-nums; font-size:15px; color:#D9B25F; white-space:nowrap; }
  /* wiersz tabeli cen */
  .price-row { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 24px; border-top:1px solid #242830; padding:18px 0; }
  /* pozycja na liście usterek */
  .issue { border-top:1px solid #242830; padding:22px 0; }
  /* nazwa usterki */
  .issue-title { font-size:20px; line-height:1.35; }
  /* opis usterki */
  .issue-desc { margin-top:10px; font-size:13px; line-height:1.6; color:#9AA0AB; }
  /* treść odpowiedzi FAQ */
  .faq-answer { margin:0; padding:0 0 20px; font-size:15px; line-height:1.7; color:#9AA0AB; }
  /* opis realizacji pod tytułem */
  .r-desc { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: #9AA0AB; }