/* Poprawki do projektu z Claude Design (components.css zostaje bez zmian) — uwagi Grzegorza z 28.10.2026.
   Ładowany po styles.css. */

/* 1) Numer telefonu w nagłówku nachodził na „Kontakt” (długie menu INGO z „Finansowaniem aut”).
      Numer jest i tak w górnym pasku i w przycisku „Zadzwoń” — w nagłówku pokazujemy go dopiero na bardzo szerokim ekranie. */
/*    Środek strony ma najwyżej 1200 px niezależnie od szerokości okna, więc numer w nagłówku komputera chowamy zawsze
      (pierwsza wersja chowała go tylko do 1600 px okna — na szerokim/pomniejszonym ekranie znów nachodził na „Kontakt”). */
@container page (min-width:960px){ .ig-header__phone{display:none!important} }
.ig-header__nav{flex:1 1 auto;justify-content:flex-start}
.ig-header__nav .ig-navlink{white-space:nowrap}
/*    Na mniejszych ekranach komputera (960–1199 px) całe menu nie mieści się obok logo i przycisku — jak na telefonie:
      przycisk menu (☰) i słuchawka, a „Bezpłatna wycena” zostaje widoczna. */
@container page (min-width:960px) and (max-width:1199px){
  .ig-header__nav{display:none!important}
  .ig-header__burger,.ig-header__call{display:inline-flex!important}
  .ig-header__actions{margin-left:auto}
}

/* 2) Zdjęcie zespołu w banerze — równy odstęp od góry i od dołu (środek wolnego miejsca obok formularza). */
@container page (min-width:960px){
  .ig-hero__grid{align-items:stretch}
  .ig-hero__copy{display:flex;flex-direction:column;justify-content:flex-start}
  .ig-page .ig-hero__copy .ig-print{margin-top:auto;margin-bottom:auto;align-self:flex-start}
}

/* 3) Kafelek pracownika — kliknięcie w zdjęcie albo w dowolne miejsce kafelka otwiera jego stronę. */
.ig-person{position:relative;transition:border-color .2s ease-out,box-shadow .2s ease-out}
.ig-person__link::after{content:"";position:absolute;inset:0;z-index:1}
.ig-person:hover{border-color:var(--blue-300);box-shadow:var(--shadow-md)}
.ig-person:hover .ig-person__photo img{transform:scale(1.03)}
.ig-person__photo img{transition:transform .3s ease-out}

/* 4) Kontakt do doradców na podstronach kategorii — w bocznym pasku (na górze) i w treści przed formularzem.
      Boczny pasek NIE jest już przyklejony: przewija się razem ze stroną (uwaga Grzegorza: „przewija tylko prawą stronę”). */
@container page (min-width:960px){ .ig-catlayout__side{position:static} }
.ig-kontakt-maly .ig-row{flex-wrap:nowrap;align-items:center}
.ig-kontakt-maly .ig-avatar{flex:none}
.ig-kontakt-maly{display:grid;gap:4px;padding:10px 0;border-top:1px solid var(--border-subtle)}
.ig-kontakt-maly:first-of-type{border-top:0;padding-top:4px}
.ig-kontakt-maly__tel{display:inline-flex;align-items:center;gap:6px;margin-left:50px;font-family:var(--font-heading);font-weight:600;font-size:16px;color:var(--brand-navy)!important;text-decoration:none!important}
.ig-kontakty{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@container page (min-width:700px){ .ig-kontakty{grid-template-columns:repeat(2,minmax(0,1fr))} }
.ig-kontakt{display:grid;gap:12px;padding:16px;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:#fff}
.ig-kontakt__osoba{display:flex;align-items:center;gap:12px;text-decoration:none!important;color:inherit!important}
.ig-kontakt__osoba strong{display:block;font-family:var(--font-heading);font-size:17px;color:var(--text-strong)}
.ig-kontakt__osoba .ig-small{display:block;line-height:1.35}
.ig-kontakt__osoba:hover strong{color:var(--brand-blue)}

/* 5) Wizytówka pracownika — zdjęcia CAŁE, w swoich proporcjach, bez przycinania (uwaga Grzegorza 28.10: „całe zdjęcie ma być widoczne”).
      Na telefonie zdjęcie najwyżej na 60% wysokości ekranu (całe, pomniejszone), żeby imię i „Zadzwoń” były blisko góry (zasada 37 sekund).
      Pracownik bez zdjęcia — inicjały w kwadracie jak dotąd. Drugi selektor łapie wizytówki wygenerowane przed tą zmianą (styl w linii). */
.ig-adv-hero__photo:has(> img){aspect-ratio:auto;background:transparent}
.ig-adv-hero__photo > img{display:block;width:100%;height:auto;max-height:60vh;object-fit:contain}
.ig-omnie__foto,.ig-split > img[loading]{aspect-ratio:auto!important;height:auto!important;object-fit:contain!important;max-height:80vh;min-height:160px}   /* min-height: zdjęcie ładowane „leniwie” bez wysokości (0 px) przeglądarka by nie pobrała */
@container page (min-width:960px){
  .ig-adv-hero__photo > img{max-height:none;border-radius:var(--radius-xl)}
}

/* 6) Zdjęcia (Grzegorz 29.10: „tak samo jak na twojeauto”; zdjęcia polskie/europejskie, wybór Grzegorza) — tło za górą strony głównej
      i podstron (przyciemnione granatem, tekst biały, formularz wyceny zostaje biały) oraz kafelki ze zdjęciem 3:2 nad nazwą i opisem:
      2 w rzędzie na telefonie, 3 na tablecie, 4 na komputerze („Zobacz też” — 3). Na wydruku bez zdjęć, tekst ciemny. */
.ig-hero.ig-hero--foto{position:relative;overflow:hidden;background:var(--navy-950)}
.ig-hero__tlo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.ig-hero--foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,27,51,.55),rgba(12,27,51,.92) 70%);pointer-events:none}
.ig-hero--foto > .ig-wrap{position:relative;z-index:1}
.ig-hero--foto .ig-display,.ig-hero--foto .ig-h1,.ig-hero--foto .ig-hero__tagline{color:#fff}
.ig-hero--foto .ig-lead,.ig-hero--foto .ig-hero__where,.ig-hero--foto .ig-hero__people,.ig-hero--foto .ig-trust,.ig-hero--foto p.ig-body{color:#DCE6F5!important}
.ig-hero--foto .ig-hero__people strong,.ig-hero--foto p.ig-body strong{color:#fff!important}
.ig-hero--foto .ig-eyebrow,.ig-hero--foto .ig-hero__where .ig-icon,.ig-hero--foto .ig-trust .ig-icon{color:var(--blue-300)}
.ig-hero--foto .ig-badge--outline{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.35);color:#fff}
.ig-hero--foto .ig-btn--secondary{background:transparent;color:#fff!important;border-color:rgba(255,255,255,.6)}
.ig-hero--foto .ig-btn--secondary:hover{background:rgba(255,255,255,.12);border-color:#fff}
.ig-hero--foto .ig-crumbs,.ig-hero--foto .ig-crumbs a,.ig-hero--foto .ig-crumbs .ig-icon{color:#C3D1E8!important}
.ig-hero--foto .ig-crumbs [aria-current]{color:#fff}
.ig-hero--podstrona{padding-top:32px!important;padding-bottom:40px}
@container page (min-width:960px){
  .ig-hero--foto::after{background:linear-gradient(90deg,rgba(12,27,51,.94) 0%,rgba(12,27,51,.82) 48%,rgba(12,27,51,.35) 100%)}
  .ig-hero--podstrona{padding-top:56px!important;padding-bottom:64px}
}
.ig-tiles.ig-tiles--foto{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ig-tile.ig-tile--foto{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;align-items:stretch;gap:0;padding:0;overflow:hidden}
.ig-tile.ig-tile--foto:hover{transform:translateY(-2px)}
.ig-tile__foto{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--blue-50)}
.ig-tile__body{display:block;padding:10px 12px 12px}
.ig-tile--foto .ig-tile__t{font-size:15px}
.ig-tile--foto .ig-tile__d{font-size:13px;line-height:1.4}
.ig-tile--foto .ig-tile__tag{top:10px;right:10px}
.ig-tile--foto.ig-tile--finance .ig-tile__body{background:var(--surface-finance)}
@container page (min-width:700px){
  .ig-tiles.ig-tiles--foto{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@container page (min-width:960px){
  .ig-tiles.ig-tiles--foto{gap:16px}
  .ig-tiles.ig-tiles--foto:not(.ig-tiles--3){grid-template-columns:repeat(4,minmax(0,1fr))}
  .ig-tile__body{padding:14px 16px 16px}
  .ig-tile--foto .ig-tile__t{font-size:17px}
  .ig-tile--foto .ig-tile__d{font-size:14.5px}
}
/* 8) Strona „Dziękujemy” (29.10, Grzegorz): potwierdzenie, „Co dalej?” w karcie, kafelki „Czym jeszcze się zajmujemy” z przyciskiem tekstowym, duże logo na koniec. */
.ig-thanks{max-width:640px;margin:0 auto}
.ig-thanks .ig-thanks__icon{background:var(--success-100,#E4F5EC);color:var(--success-600,#1A8754)}
.ig-thanks__next{width:100%;text-align:left;background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm,0 1px 3px rgba(10,26,47,.08));padding:18px 20px;display:grid;gap:8px}
.ig-thanks__next .ig-h4{margin:0}
.ig-thanks__ctas{justify-content:center;margin-top:8px}
.ig-tile__cta{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-weight:var(--fw-semibold);color:var(--brand-blue)}
.ig-thanks__brand{display:grid;justify-items:center;gap:6px;text-align:center;padding:8px 0 16px}
.ig-thanks__brand img{width:112px;height:112px;border-radius:50%;box-shadow:var(--shadow-md)}
.ig-thanks__brand .ig-logo__mark{width:112px;height:112px;font-size:36px}
.ig-thanks__brandname{margin:6px 0 0;font:var(--fw-semibold) 26px/1.15 var(--font-heading);color:var(--brand-navy);letter-spacing:-.01em}

/* 7) Biała karta z formularzem w ciemnej sekcji („Współpraca”, 29.10) — tekst ciemny jak w każdym formularzu
      (bez tego nagłówek karty był biały na białym, a opis jasnoszary — Grzegorz: „nie da się uzupełnić”). */
.ig-section--dark .ig-formcard .ig-h3,.ig-section--dark .ig-formcard .ig-label{color:var(--text-strong)}
.ig-section--dark .ig-formcard .ig-small,.ig-section--dark .ig-formcard .ig-body,.ig-section--dark .ig-formcard .ig-form__human,.ig-section--dark .ig-formcard .ig-form__clause{color:var(--text-muted)}
@media print{
  .ig-hero__tlo,.ig-hero--foto::after,.ig-tile__foto{display:none!important}
  .ig-hero.ig-hero--foto{background:none!important}
  .ig-hero--foto .ig-display,.ig-hero--foto .ig-h1,.ig-hero--foto .ig-hero__tagline,.ig-hero--foto .ig-lead,.ig-hero--foto .ig-hero__where,.ig-hero--foto .ig-hero__people,.ig-hero--foto .ig-trust,.ig-hero--foto p.ig-body,.ig-hero--foto .ig-crumbs,.ig-hero--foto .ig-crumbs a{color:#1d2433!important}
}