/* OIB Urbanek - hosting fixes v10 */
:root {
  --oib-red: #8c1d2c;
  --oib-red-dark: #65121d;
  --oib-ink: #17191b;
  --oib-muted: #62686e;
  --oib-line: #dfe2e4;
  --oib-soft: #f5f6f6;
}

.hero {
  background:
    linear-gradient(90deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.95) 38%, rgba(255,255,255,.66) 58%, rgba(255,255,255,.14) 100%),
    url("/assets/img/hero-oib-urbanek.png?v=17") center right / cover no-repeat #fff !important;
}

.hero::before,
.hero::after {
  display: none !important;
}

.hero .container,
.hero-content {
  position: relative !important;
  z-index: 1 !important;
}

.eyebrow::before,
.section-kicker::before {
  width: 46px !important;
  height: 2px !important;
  border-radius: 0 !important;
  background: var(--oib-red) !important;
}

.site-logo,
.footer-logo {
  min-width: 188px;
}

.service-card {
  position: relative;
  overflow: hidden;
}

.service-card-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 34px !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 0 0 10px !important;
  min-width: 0 !important;
}

.service-card-head .tag,
.service-card .service-card-head .tag {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  padding-right: 10px !important;
}

.service-card-number,
.service-card .service-card-number {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  color: #9aa0a6 !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: right !important;
  transform: none !important;
}

.project-visual-placeholder {
  min-height: 190px;
  display: grid;
  place-items: center;
  color: #8d949a;
  background:
    linear-gradient(135deg, rgba(140,29,44,.08), rgba(23,25,27,.02)),
    repeating-linear-gradient(90deg, rgba(23,25,27,.06) 0 1px, transparent 1px 34px);
}

#map {
  min-height: 420px !important;
  border: 1px solid var(--oib-line);
  background: #eef0f1;
}

.oib-calendar-priority {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin: 24px 0;
  padding: 22px;
  border-top: 4px solid var(--oib-red);
  background: #fff;
  box-shadow: 0 18px 45px rgba(23,25,27,.08);
}

.article-grid .service-card p {
  color: #4f565c;
  line-height: 1.62;
}

.oib-404-section {
  min-height: 62vh;
  display: grid;
  align-items: center;
  background:
    radial-gradient(circle at 82% 24%, rgba(140,29,44,.08), transparent 28%),
    linear-gradient(180deg, #fff, #f5f6f6);
}

.oib-404-card {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  min-height: 430px;
  background: #fff;
  border: 1px solid var(--oib-line);
  border-top: 5px solid var(--oib-red);
  box-shadow: 0 28px 80px rgba(20,22,24,.11);
}

.oib-404-card > div:first-child {
  padding: clamp(28px, 5vw, 58px);
}

.oib-404-visual {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  border-left: 1px solid var(--oib-line);
  background:
    repeating-linear-gradient(0deg, rgba(23,25,27,.05) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(23,25,27,.05) 0 1px, transparent 1px 44px),
    linear-gradient(135deg, #fff, #f0f2f2);
}

.oib-404-visual::before {
  content: "";
  position: absolute;
  right: 12%;
  top: 18%;
  width: 240px;
  height: 240px;
  border: 1px solid rgba(140,29,44,.22);
  border-radius: 50%;
  box-shadow: -80px 70px 0 -78px var(--oib-red), -120px 36px 0 -118px #17191b;
}

.oib-404-visual span {
  position: absolute;
  right: -18px;
  bottom: 18px;
  font-size: clamp(110px, 16vw, 210px);
  line-height: .8;
  font-weight: 950;
  letter-spacing: -.08em;
  color: rgba(140,29,44,.10);
}

.oib-404-note {
  margin-top: 22px;
  padding: 14px 16px;
  border-left: 4px solid var(--oib-red);
  background: #fff7f8;
  color: #33383d;
}

.oib-calendar-priority strong {
  display: block;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.05;
  margin: 4px 0 8px;
}

.oib-calendar-priority span {
  color: var(--oib-red);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.oib-calendar-priority p {
  margin: 0;
  color: var(--oib-muted);
  max-width: 760px;
}

.oib-tech-note {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  color: #4e555a;
  font-size: 13px;
}

.oib-tech-note a {
  color: var(--oib-red);
  font-weight: 800;
}

@media (max-width: 980px) {
  html,
  body {
    overflow-x: hidden;
  }

  .container {
    width: min(calc(100% - 28px), var(--max)) !important;
  }

  .topbar {
    display: none !important;
  }

  .site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  .nav-shell {
    min-height: 68px !important;
    padding-block: 8px !important;
  }

  .logo {
    min-width: 0 !important;
  }

  .site-logo,
  .footer-logo {
    min-width: 0 !important;
  }

  .logo-mark {
    font-size: 26px !important;
  }

  .logo-copy {
    display: none !important;
  }

  .nav-actions {
    margin-left: auto !important;
    gap: 8px !important;
  }

  .nav-actions > .button {
    min-height: 42px !important;
    padding: 9px 12px !important;
    font-size: .82rem !important;
    white-space: nowrap !important;
  }

  .menu-button {
    display: grid !important;
    order: 3 !important;
  }

  .main-nav {
    position: absolute !important;
    top: calc(100% + 1px) !important;
    left: 14px !important;
    right: 14px !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 8px !important;
    background: #fff !important;
    border: 1px solid var(--oib-line) !important;
    box-shadow: 0 18px 45px rgba(20,22,24,.14) !important;
  }

  .site-header.menu-open .main-nav {
    display: flex !important;
  }

  .main-nav a {
    padding: 13px 14px !important;
    border-bottom: 1px solid var(--oib-line) !important;
  }

  .main-nav a:last-child {
    border-bottom: 0 !important;
  }

  .hero {
    min-height: auto !important;
    padding: 62px 0 46px !important;
    background:
      linear-gradient(90deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.93) 58%, rgba(255,255,255,.54) 100%),
      url("/assets/img/hero-oib-urbanek.png?v=17") 62% center / cover no-repeat #fff !important;
  }

  .hero-content {
    max-width: 680px !important;
  }

  .hero h1 {
    max-width: 11ch !important;
    font-size: clamp(40px, 10vw, 58px) !important;
    line-height: .98 !important;
  }

  .hero-text {
    max-width: 56ch !important;
    font-size: 1rem !important;
  }

  .hero-actions,
  .signature-actions,
  .oib-calendar-priority {
    grid-template-columns: 1fr !important;
  }

  .toolbar {
    grid-template-columns: 1fr !important;
  }

  #map {
    min-height: 330px !important;
  }

}

@media (max-width: 760px) {
  .hero {
    padding: 48px 0 38px !important;
    background:
      linear-gradient(90deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.95) 62%, rgba(255,255,255,.66) 100%),
      url("/assets/img/hero-oib-urbanek.png?v=17") 70% center / cover no-repeat #fff !important;
  }

  .hero h1 {
    font-size: clamp(36px, 10.8vw, 48px) !important;
    letter-spacing: -0.04em !important;
  }

  .hero-proof {
    display: grid !important;
    gap: 8px !important;
    margin-top: 24px !important;
    padding-top: 16px !important;
  }

  .hero-proof span {
    font-size: .78rem !important;
  }

  .trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .trust-item {
    padding: 18px 14px !important;
    min-width: 0 !important;
  }

  .trust-item strong {
    font-size: .94rem !important;
  }

  .trust-item span {
    font-size: .78rem !important;
  }

  .section {
    padding: 56px 0 !important;
  }

  .section-title {
    font-size: clamp(30px, 8vw, 40px) !important;
    line-height: 1.08 !important;
  }

  .process-grid,
  .service-grid,
  .project-grid,
  .audience-grid,
  .home-proof-grid,
  .footer-grid {
    grid-template-columns: 1fr !important;
  }

  .process-card,
  .service-card {
    min-height: auto !important;
  }
}

@media (max-width: 430px) {
  .container {
    width: min(calc(100% - 24px), var(--max)) !important;
  }

  .nav-shell {
    gap: 8px !important;
  }

  .nav-actions > .button {
    padding: 8px 10px !important;
    font-size: .76rem !important;
  }

  .hero h1 {
    font-size: clamp(34px, 10vw, 42px) !important;
  }

  .hero-text {
    font-size: .95rem !important;
  }

  .trust-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .container {
    width: min(calc(100% - 26px), var(--max)) !important;
  }

  .topbar {
    display: none !important;
  }

  .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
  }

  .nav-shell {
    min-height: 64px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding-block: 8px !important;
  }

  .logo {
    min-width: 0 !important;
  }

  .logo-mark {
    font-size: 24px !important;
    line-height: 1 !important;
  }

  .logo-copy {
    display: none !important;
  }

  .nav-actions {
    margin-left: auto !important;
    gap: 8px !important;
  }

  .nav-actions > .button {
    min-height: 40px !important;
    padding: 8px 11px !important;
    font-size: .76rem !important;
    white-space: nowrap !important;
  }

  .menu-button {
    display: grid !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    order: 3 !important;
  }

  .main-nav {
    position: absolute !important;
    top: calc(100% + 1px) !important;
    left: 13px !important;
    right: 13px !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 8px !important;
    background: #fff !important;
    border: 1px solid var(--oib-line) !important;
    box-shadow: 0 18px 45px rgba(20,22,24,.16) !important;
  }

  .site-header.menu-open .main-nav {
    display: flex !important;
  }

  .main-nav a {
    padding: 13px 14px !important;
    border-bottom: 1px solid var(--oib-line) !important;
    font-size: .96rem !important;
  }

  .hero {
    min-height: auto !important;
    padding: 46px 0 38px !important;
    background:
      linear-gradient(90deg, rgba(255,255,255,.995) 0%, rgba(255,255,255,.96) 58%, rgba(255,255,255,.72) 100%),
      url("/assets/img/hero-oib-urbanek.png?v=17") 74% center / cover no-repeat #fff !important;
  }

  .hero-content {
    max-width: 100% !important;
  }

  .hero h1 {
    max-width: 10.5ch !important;
    font-size: clamp(34px, 9.6vw, 46px) !important;
    line-height: .98 !important;
    letter-spacing: -0.045em !important;
  }

  .hero-text {
    max-width: 37ch !important;
    font-size: .96rem !important;
    line-height: 1.5 !important;
  }

  .hero-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .hero-actions .button {
    min-height: 42px !important;
    padding: 10px 13px !important;
    font-size: .86rem !important;
  }

  .hero-proof {
    display: grid !important;
    gap: 7px !important;
    margin-top: 22px !important;
    padding-top: 15px !important;
  }

  .hero-proof span {
    font-size: .76rem !important;
  }

  .trust-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .trust-item {
    min-width: 0 !important;
    padding: 18px 14px !important;
  }

  .section {
    padding: 54px 0 !important;
  }

  .section-title {
    font-size: clamp(29px, 7.8vw, 39px) !important;
    line-height: 1.08 !important;
  }

  .process-grid,
  .service-grid,
  .project-grid,
  .audience-grid,
  .home-proof-grid,
  .footer-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .process-card,
  .service-card {
    min-height: auto !important;
  }

  .toolbar,
  .detail-columns,
  .gallery-grid,
  .form-grid,
  .contact-layout,
  .about-layout {
    grid-template-columns: 1fr !important;
  }
}

/* V16: real mobile layout after viewport fix. Keep this at the end. */
@media (max-width: 760px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .topbar {
    display: none !important;
  }

  .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
  }

  .container {
    width: min(calc(100% - 24px), var(--max)) !important;
  }

  .nav-shell {
    min-height: 58px !important;
    padding-block: 7px !important;
    gap: 8px !important;
  }

  .logo-copy {
    display: none !important;
  }

  .logo-mark {
    font-size: 24px !important;
    letter-spacing: -0.04em !important;
  }

  .nav-actions {
    margin-left: auto !important;
    gap: 8px !important;
  }

  .nav-actions > .button {
    min-height: 38px !important;
    padding: 8px 11px !important;
    font-size: .74rem !important;
    white-space: nowrap !important;
  }

  .menu-button {
    display: grid !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    order: 3 !important;
  }

  .main-nav {
    position: absolute !important;
    top: calc(100% + 1px) !important;
    left: 12px !important;
    right: 12px !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 8px !important;
    background: #fff !important;
    border: 1px solid var(--oib-line) !important;
    box-shadow: 0 18px 45px rgba(20,22,24,.16) !important;
  }

  .site-header.menu-open .main-nav {
    display: flex !important;
  }

  .main-nav a {
    padding: 13px 14px !important;
    border-bottom: 1px solid var(--oib-line) !important;
    font-size: .95rem !important;
  }

  .hero {
    min-height: auto !important;
    padding: 42px 0 34px !important;
    background:
      linear-gradient(90deg, rgba(255,255,255,.995) 0%, rgba(255,255,255,.965) 58%, rgba(255,255,255,.74) 100%),
      url("/assets/img/hero-oib-urbanek.png?v=17") 72% center / cover no-repeat #fff !important;
  }

  .hero-content {
    max-width: 100% !important;
  }

  .eyebrow {
    font-size: .7rem !important;
    line-height: 1.25 !important;
    letter-spacing: .12em !important;
  }

  .eyebrow::before {
    width: 32px !important;
  }

  .hero h1 {
    max-width: 10.3ch !important;
    margin-top: 22px !important;
    font-size: clamp(36px, 12vw, 48px) !important;
    line-height: .98 !important;
    letter-spacing: -0.045em !important;
  }

  .hero-text {
    max-width: 35ch !important;
    font-size: .96rem !important;
    line-height: 1.5 !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    max-width: 100% !important;
  }

  .hero-actions .button {
    min-height: 42px !important;
    justify-content: center !important;
    padding: 10px 11px !important;
    font-size: .82rem !important;
  }

  .hero-proof {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    margin-top: 20px !important;
    padding-top: 14px !important;
  }

  .hero-proof span {
    font-size: .76rem !important;
    line-height: 1.35 !important;
  }

  .trust-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .trust-item {
    min-width: 0 !important;
    padding: 16px 12px !important;
  }

  .trust-item strong {
    font-size: .9rem !important;
  }

  .trust-item span {
    font-size: .76rem !important;
    line-height: 1.35 !important;
  }

  .section {
    padding: 50px 0 !important;
  }

  .section-title {
    font-size: clamp(29px, 8.5vw, 38px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.03em !important;
  }

  .process-grid,
  .service-grid,
  .project-grid,
  .audience-grid,
  .home-proof-grid,
  .form-grid,
  .footer-grid,
  .contact-layout,
  .about-layout,
  .toolbar,
  .detail-columns,
  .gallery-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .process-step,
  .process-card,
  .service-card {
    min-height: auto !important;
  }
}

@media (max-width: 430px) {
  .hero-actions {
    grid-template-columns: 1fr !important;
  }

  .trust-grid {
    grid-template-columns: 1fr !important;
  }
}

/* V17: contact bar, 404 and calendar polish. Keep last. */
@media (max-width: 760px) {
  body {
    padding-bottom: 68px !important;
  }

  .mobile-contact {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    box-shadow: 0 -14px 34px rgba(20,22,24,.12) !important;
  }

  .mobile-contact a {
    min-height: 60px !important;
    padding: 8px 5px !important;
    font-size: .74rem !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }

  .mobile-contact a:nth-child(3) {
    color: var(--oib-red) !important;
    background: #fff7f8 !important;
  }

  .mobile-contact a:last-child {
    color: #fff !important;
    background: var(--oib-red) !important;
  }

  .booking-shell {
    padding: 16px !important;
  }

  .oib-calendar-priority {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin: 18px 0 !important;
    padding: 18px !important;
  }

  .oib-calendar-priority strong {
    font-size: 1.35rem !important;
    line-height: 1.12 !important;
  }

  .booking-picker {
    grid-template-columns: 1fr !important;
    padding: 14px !important;
  }

  .booking-times {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .oib-404-card {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  .oib-404-card > div:first-child {
    padding: 28px 20px !important;
  }

  .oib-404-visual {
    min-height: 190px !important;
    border-left: 0 !important;
    border-top: 1px solid var(--oib-line) !important;
  }

  .oib-404-note {
    font-size: .9rem !important;
  }
}

.service-card-head {
  position: relative !important;
}

.service-card-head .tag {
  min-height: 32px !important;
  display: flex !important;
  align-items: center !important;
}

.service-card-number,
.service-card .service-card-number {
  position: relative !important;
  right: auto !important;
  top: auto !important;
  z-index: 2 !important;
  padding-left: 4px !important;
  background: #fff !important;
}

/* OIB V15: menu w jednej linii + brak łamania „O firmie” / „Realizacje i mapa” */
.nav-shell{flex-wrap:nowrap!important;gap:16px!important;}
.logo,.main-nav,.nav-actions{flex-shrink:0!important;}
.main-nav{flex-wrap:nowrap!important;white-space:nowrap!important;gap:4px!important;}
.main-nav a,.nav-actions a,.nav-actions .button,.portal-nav-link,.portal-nav-link span{white-space:nowrap!important;word-break:keep-all!important;overflow-wrap:normal!important;}
.main-nav a{flex:0 0 auto!important;padding-left:9px!important;padding-right:9px!important;}
.nav-actions{display:flex!important;align-items:center!important;flex-wrap:nowrap!important;gap:10px!important;margin-left:auto!important;}
.nav-actions>.button,.portal-nav-link{flex:0 0 auto!important;}
@media (max-width:1180px){
  .nav-shell{position:relative!important;flex-wrap:nowrap!important;}
  .main-nav{position:absolute!important;top:calc(100% + 1px)!important;left:0!important;right:0!important;display:none!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;padding:8px!important;overflow:visible!important;background:#fff!important;border:1px solid var(--line,var(--oib-line,#dfe2e4))!important;box-shadow:0 18px 45px rgba(20,22,24,.14)!important;white-space:normal!important;}
  .site-header.menu-open .main-nav{display:flex!important;}
  .main-nav a{padding:12px 14px!important;border-bottom:1px solid var(--line,var(--oib-line,#dfe2e4))!important;white-space:nowrap!important;}
  .main-nav a:last-child{border-bottom:0!important;}
  .main-nav a.active{box-shadow:inset 3px 0 0 var(--red,var(--oib-red,#8c1d2c))!important;}
  .menu-button{display:grid!important;order:3!important;flex:0 0 46px!important;}
}

/* OIB V15b: więcej miejsca dla desktopowego nagłówka, bez łamania tekstów */
@media (min-width:1181px){
  .site-header .container.nav-shell{width:min(calc(100% - 40px),1260px)!important;}
  .logo-copy{max-width:155px!important;font-size:.64rem!important;line-height:1.18!important;letter-spacing:.07em!important;}
  .main-nav a{font-size:.95rem!important;padding-left:8px!important;padding-right:8px!important;}
  .nav-actions>.button{padding-left:20px!important;padding-right:20px!important;}
  .portal-nav-link{padding-left:10px!important;padding-right:10px!important;gap:8px!important;}
}