/* ═══════════════════════════════════════════════════════
   Paweł Kobiałka – Biuro Obsługi Budowy | theme.css
   ═══════════════════════════════════════════════════════ */

/* ── Base ── */
body { font-family: 'Outfit', sans-serif; color: #383838; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }

/* ── Gradients ── */
.gradient-orange { background: linear-gradient(to right, #ff9400, #ff7f00); }
.gradient-dark   { background: linear-gradient(to right, #000000, #5b5b5b); }

/* ── Buttons ── */
a.btn, button.btn {
  position: relative; overflow: hidden;
  letter-spacing: 0.1em; isolation: isolate;
  transition: color .35s ease;
  cursor: pointer;
}
a.btn::after, button.btn::after {
  content: ''; position: absolute; inset: 0;
  opacity: 0; z-index: -1; transition: opacity .35s ease;
}
a.btn.gradient-orange::after, button.btn.gradient-orange::after {
  background: linear-gradient(to right, #000000, #5b5b5b);
}
a.btn.gradient-dark::after, button.btn.gradient-dark::after {
  background: linear-gradient(to right, #ff9400, #ff7f00);
}
a.btn:hover::after, button.btn:hover::after { opacity: 1; }
a.btn.gradient-orange:hover, button.btn.gradient-orange:hover { color: #ffffff; }
a.btn.gradient-dark:hover,   button.btn.gradient-dark:hover   { color: #000000; }

@keyframes arrow-pulse {
  0%   { transform: translateX(0); }
  40%  { transform: translateX(6px); }
  70%  { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}
a.btn:hover .arrow-icon, button.btn:hover .arrow-icon {
  animation: arrow-pulse .65s ease-in-out infinite;
}

/* ── Reveal animations ── */
[data-reveal] {
  opacity: 0;
  transition: opacity .75s cubic-bezier(.22,.68,0,1.2),
              transform .75s cubic-bezier(.22,.68,0,1.2);
}
[data-reveal="up"]    { transform: translateY(44px); }
[data-reveal="left"]  { transform: translateX(-56px); }
[data-reveal="right"] { transform: translateX(56px); }
[data-reveal="scale"] { transform: scale(0.92); }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-delay="1"] { transition-delay: .08s; }
[data-delay="2"] { transition-delay: .16s; }
[data-delay="3"] { transition-delay: .24s; }
[data-delay="4"] { transition-delay: .32s; }
[data-delay="5"] { transition-delay: .40s; }
[data-delay="6"] { transition-delay: .48s; }
[data-delay="7"] { transition-delay: .56s; }
[data-delay="8"] { transition-delay: .64s; }

/* ── Custom gallery items ── */
.gallery-item { cursor: zoom-in; overflow: hidden; }
.gallery-item img {
  transition: transform .5s cubic-bezier(.22,.68,0,1.2);
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.gallery-item:hover img { transform: scale(1.06); }
.gallery-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0);
  display: flex; align-items: center; justify-content: center;
  transition: background .35s ease;
  pointer-events: none;
}
.gallery-item:hover .gallery-overlay { background: rgba(0,0,0,.35); }
.gallery-overlay svg {
  opacity: 0; transform: scale(0.7);
  transition: opacity .3s ease, transform .3s ease;
}
.gallery-item:hover .gallery-overlay svg { opacity: 1; transform: scale(1); }

/* ── WP Block Gallery – override to match design ── */
/* Galeria Gutenberg – stary i nowy format – kwadraty */
.wp-block-gallery,
.wp-block-gallery.has-nested-images {
  display: grid !important;
  gap: 2rem !important;
  grid-template-columns: repeat(1, 1fr) !important;
  flex-wrap: unset !important;
  align-items: unset !important;
}
.wp-block-gallery .blocks-gallery-grid { display: contents; }

/* każdy kafelek = kwadrat */
.wp-block-gallery figure.wp-block-image,
.wp-block-gallery .blocks-gallery-item {
  margin: 0 !important; padding: 0 !important; width: 100% !important;
  cursor: zoom-in; overflow: hidden;
  position: relative; aspect-ratio: 1 / 1;
  border-radius: 0 !important; flex-shrink: unset !important;
}
/* obraz wypełnia cały kwadrat */
.wp-block-gallery figure.wp-block-image img,
.wp-block-gallery .blocks-gallery-item img {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; display: block !important;
  transition: transform .5s cubic-bezier(.22,.68,0,1.2);
}
/* wrapper <a> też musi wypełniać kwadrat */
.wp-block-gallery figure.wp-block-image > a,
.wp-block-gallery figure.wp-block-image > div:not(.gallery-overlay) {
  position: absolute !important; inset: 0 !important;
  display: block !important; width: 100% !important; height: 100% !important;
}
.wp-block-gallery figure.wp-block-image:hover img,
.wp-block-gallery .blocks-gallery-item:hover img { transform: scale(1.06); }
.wp-block-gallery figcaption { display: none !important; }
@media (min-width: 640px)  { .wp-block-gallery, .wp-block-gallery.has-nested-images { grid-template-columns: repeat(2, 1fr) !important; } }
@media (min-width: 1024px) { .wp-block-gallery, .wp-block-gallery.has-nested-images { grid-template-columns: repeat(3, 1fr) !important; } }
@media (min-width: 1280px) { .wp-block-gallery, .wp-block-gallery.has-nested-images { grid-template-columns: repeat(4, 1fr) !important; } }

/* ── Lightbox ── */
#pko-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.95);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
#pko-lightbox.open { opacity: 1; pointer-events: all; }
#pko-lightbox img {
  max-width: min(1200px, 94vw); max-height: 88vh;
  object-fit: contain;
  transform: scale(0.92);
  transition: transform .35s cubic-bezier(.22,.68,0,1.2);
}
#pko-lightbox.open img { transform: scale(1); }
#pko-lb-close {
  position: fixed; top: 20px; right: 24px;
  width: 44px; height: 44px;
  background: rgba(255,255,255,.1); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: background .2s ease; color: white;
}
#pko-lb-close:hover { background: rgba(255,148,0,.7); }
#pko-lb-prev, #pko-lb-next {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  background: rgba(255,255,255,.08); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: background .2s ease; color: white;
}
#pko-lb-prev { left: 16px; }
#pko-lb-next { right: 16px; }
#pko-lb-prev:hover, #pko-lb-next:hover { background: rgba(255,148,0,.7); }
#pko-lb-counter {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.5);
  font-size: 13px; font-family: 'Outfit', sans-serif; letter-spacing: .1em;
}

/* ── Contact Form 7 ── */
.wpcf7-form p { margin-bottom: 1rem; }
.wpcf7-form label { display: block; font-size: .875rem; font-weight: 500; margin-bottom: .375rem; color: #383838; }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%;
  border: 1px solid #b3b3b3;
  border-radius: .5rem;
  padding: .875rem 1rem;
  font-family: 'Outfit', sans-serif;
  font-size: .875rem;
  color: #383838;
  background: white;
  transition: border-color .2s ease;
  outline: none;
  appearance: none;
}
.wpcf7-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23383838'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .75rem center; background-size: 1rem;
  padding-right: 2.5rem;
}
.wpcf7-form input:focus, .wpcf7-form select:focus, .wpcf7-form textarea:focus { border-color: #ff9400; box-shadow: 0 0 0 3px rgba(255,148,0,.1); }
.wpcf7-form textarea { height: 9rem; resize: vertical; }
.wpcf7-form input[type="submit"] {
  background: linear-gradient(to right, #ff9400, #ff7f00);
  color: white; font-family: 'Outfit', sans-serif;
  font-weight: 700; font-size: .875rem;
  text-transform: uppercase; letter-spacing: .1em;
  padding: 1.375rem 2.5rem;
  border: none; border-radius: 9999px;
  cursor: pointer; transition: opacity .3s ease; width: auto;
}
.wpcf7-form input[type="submit"]:hover { opacity: .85; }
.wpcf7-not-valid-tip { color: #ef4444; font-size: .75rem; margin-top: .25rem; display: block; }
.wpcf7-response-output {
  margin-top: 1rem; padding: .875rem 1rem;
  border-radius: .5rem; font-size: .875rem;
  border: 1px solid #b3b3b3;
}
.wpcf7-mail-sent-ok { border-color: #22c55e; color: #16a34a; background: #f0fdf4; }
.wpcf7-mail-sent-ng, .wpcf7-aborted { border-color: #ef4444; color: #dc2626; background: #fef2f2; }
.wpcf7-acceptance span.wpcf7-list-item { margin: 0; }
.wpcf7-acceptance input[type="checkbox"] { accent-color: #ff9400; width: 1rem; height: 1rem; margin-right: .5rem; }

/* ── Entry content (Gutenberg / the_content) ── */
.pko-content h2 { font-size: 1.5rem; font-weight: 700; margin: 2rem 0 .75rem; color: #000; line-height: 1.3; }
.pko-content h3 { font-size: 1.25rem; font-weight: 600; margin: 1.5rem 0 .5rem; color: #000; }
.pko-content h4 { font-size: 1.125rem; font-weight: 600; margin: 1.25rem 0 .5rem; color: #000; }
.pko-content p  { margin-bottom: 1rem; line-height: 1.75; color: #383838; }
.pko-content ul { list-style: none; padding: 0; margin-bottom: 1rem; }
.pko-content ul li {
  padding-left: 1.5rem; position: relative;
  margin-bottom: .5rem; line-height: 1.6; color: #383838;
}
.pko-content ul li::before {
  content: ''; position: absolute; left: 0; top: .625rem;
  width: .4rem; height: .4rem; border-radius: 50%;
  background: linear-gradient(to right, #ff9400, #ff7f00);
}
.pko-content ol { padding-left: 1.5rem; margin-bottom: 1rem; counter-reset: pko-ol; list-style: none; }
.pko-content ol li { counter-increment: pko-ol; padding-left: .25rem; margin-bottom: .5rem; color: #383838; position: relative; }
.pko-content ol li::before { content: counter(pko-ol) '.'; position: absolute; left: -1.5rem; color: #ff9400; font-weight: 700; }
.pko-content strong { font-weight: 700; color: #000; }
.pko-content a { color: #ff9400; text-decoration: underline; }
.pko-content a:hover { color: #ff7f00; }
.pko-content blockquote { border-left: 4px solid #ff9400; padding: 1rem 1.5rem; margin: 1.5rem 0; background: #fff8f0; }
.pko-content blockquote p { margin: 0; font-style: italic; color: #383838; }
.pko-content .wp-block-image { margin: 2rem 0; }
.pko-content .wp-block-image img { max-width: 100%; border-radius: .5rem; }
.pko-content hr { border: none; border-top: 1px solid #e5e5e5; margin: 2rem 0; }

/* ── Usługi – sekcja bez gap ── */
.services-grid { display: grid; }
@media (min-width: 640px)  { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(5, 1fr); } }

/* ── Hero H1 – font scaling between 1536–1699px ── */
@media (min-width: 1536px) and (max-width: 1699px) {
  .pko-hero-h1 { font-size: 52px !important; line-height: 1.1 !important; }
}

/* ── Portfolio hover ── */
.portfolio-item img { transition: transform .5s cubic-bezier(.22,.68,0,1.2); }
.portfolio-item:hover img { transform: scale(1.06); }
.portfolio-item .portfolio-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background .35s ease;
  display: flex; align-items: center; justify-content: center;
}
.portfolio-item:hover .portfolio-overlay { background: rgba(0,0,0,.3); }
.portfolio-item .portfolio-overlay svg { opacity: 0; transition: opacity .3s ease; }
.portfolio-item:hover .portfolio-overlay svg { opacity: 1; }