/*
 * OKNOVE — style główne.
 *
 * Źródło: sekcja <style> z mock.html (zatwierdzony mockup). CSS przeniesiony
 * niemal dosłownie — markup szablonów i bloków dopasowujemy do tych klas,
 * nie odwrotnie. Jedyne zmiany wobec mockupu:
 *   1. url(data:...) tła hero podmienione na plik w assets/images/
 *   2. dodatki wymagane przez WordPressa (pasek admina, .alignwide, a11y)
 *   3. --header-height jako zmienna, żeby kotwice one-page nie chowały się
 *      pod przyklejonym nagłówkiem
 */

:root {
      --black: #0a0a0a;
      --dark: #111111;
      --gray: #1a1a1a;
      --light-gray: #f5f5f5;
      --white: #ffffff;
      --blue: #1a6ce1;
      --blue-dark: #0f4da8;
      --blue-light: #3d8aef;
      --text: #222;
      --text-muted: #555;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Inter', system-ui, sans-serif;
      color: var(--text);
      background: var(--white);
      line-height: 1.6;
      overflow-x: hidden;
    }

    h1, h2, h3, h4 {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      line-height: 1.2;
    }

    a {
      text-decoration: none;
      color: inherit;
      transition: all 0.3s ease;
    }

    img {
      max-width: 100%;
      height: auto;
      display: block;
    }

    .container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }

    /* Header */
    /* Selektory zawężone do elementów motywu (#header, #nav, .site-footer,
       main section). Gołe selektory elementów wyciekały do znaczników wtyczek:
       <header> w oknie zgód na cookies dostawał białe tło i position: fixed,
       a reguła `nav { display: none }` poniżej 768 px ukryłaby dowolną
       nawigację wtyczki. */
    #header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      background: rgba(255,255,255,0.95);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(0,0,0,0.06);
      transition: all 0.3s ease;
    }

    #header.scrolled {
      box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    }

    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      /* Stała wysokość, nie minimalna: od niej zależy --header-height,
         od której z kolei zależy początek nagłówka podstrony. Gdyby
         nagłówek mógł rosnąć, zacząłby nachodzić na treść.
         96 px = logo 80 px + po 8 px odstępu; wcześniej było 120 px,
         co dawało 20 px luzu i zbyt masywny nagłówek. */
      height: 96px;
      max-height: 96px;
    }

    .logo,
    .header-inner .custom-logo-link {
      display: flex;
      align-items: center;
      gap: 14px;

      /* Kluczowe: to logo jest elementem flex nagłówka, więc to ono oddawało
         miejsce, gdy brakowało go na menu. Obraz w środku dostawał wtedy
         max-width: 100% z zawężonego rodzica przy zablokowanej wysokości —
         i wyglądał na rozciągnięty w pionie. */
      flex-shrink: 0;
    }

    .logo-text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
    }

    .logo-slogan {
      font-family: 'Montserrat', 'Inter', system-ui, sans-serif;
      font-size: 16px;
      font-weight: 700;
      font-style: normal;
      color: #1a5f3a;
      letter-spacing: 0.5px;
      margin-top: 4px;
      white-space: nowrap;
      text-transform: none;
    }

    .logo img,
    .header-inner .custom-logo-link img,
    .header-inner img {
      /* Zmniejszone o 30 px wobec mockupu — logo było za duże w nagłówku.
         Reguła obejmuje też markup z Customizera (.custom-logo-link), który
         ma inne klasy niż fallback motywu — bez tego logo wgrane przez
         klienta rozpychało nagłówek i nachodziło na treść pod nim. */
      height: 80px;
      max-height: 80px;
      width: auto;

      /* Nagłówek jest kontenerem flex, a wysokość logo jest zablokowana.
         Bez flex-shrink: 0 brakujące miejsce odbierane jest szerokości
         obrazu — przy stałej wysokości daje to wrażenie rozciągnięcia
         w pionie. object-fit: contain to druga linia obrony, gdyby obraz
         trafił jednak na ograniczenie szerokości (np. max-width: 100%). */
      flex-shrink: 0;
      object-fit: contain;
    }

    #nav ul {
      display: flex;
      list-style: none;
      gap: 36px;
    }

    #nav a {
      font-weight: 500;
      font-size: 15px;
      color: var(--text);
      position: relative;
    }

    #nav a::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--blue);
      transition: width 0.3s ease;
    }

    #nav a:hover::after,
    #nav a.active::after {
      width: 100%;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 28px;
      font-weight: 600;
      font-size: 15px;
      border-radius: 8px;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .btn-primary {
      background: var(--blue);
      color: white;
    }

    .btn-primary:hover {
      background: var(--blue-dark);
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(26,108,225,0.35);
    }

    .btn-outline {
      background: transparent;
      color: var(--black);
      border: 2px solid var(--black);
    }

    .btn-outline:hover {
      background: var(--black);
      color: white;
    }

    .btn-white {
      background: white;
      color: var(--black);
    }

    .btn-white:hover {
      background: var(--light-gray);
      transform: translateY(-2px);
    }

    .mobile-toggle {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
    }

    .mobile-toggle span {
      display: block;
      width: 24px;
      height: 2px;
      background: var(--black);
      margin: 6px 0;
      transition: 0.3s;
    }

    /* Hero */
    .hero {
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      background: var(--black);
      overflow: hidden;
      padding-top: 120px;
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      background: url('../images/hero/willa-panoramiczne-okna.jpg') center/cover no-repeat;
      opacity: 0.55;
    }

    .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.4) 50%, rgba(10,30,60,0.6) 100%);
    }

    .hero-content {
      position: relative;
      z-index: 2;
      color: white;
      max-width: 720px;
      padding: 60px 0;
    }

    .hero-content h1 {
      font-family: 'Montserrat', 'Inter', system-ui, sans-serif;
      font-size: clamp(1.45rem, 3.2vw, 2.35rem);
      font-weight: 700;
      line-height: 1.3;
      letter-spacing: -0.015em;
      margin-bottom: 14px;
      text-wrap: balance;
    }

    .hero-content h1 span {
      display: block;
      margin-top: 4px;
    }

    .hero-content > p {
      font-size: clamp(0.95rem, 1.6vw, 1.15rem);
      font-weight: 400;
      opacity: 0.92;
      line-height: 1.5;
      margin-bottom: 28px;
      max-width: 520px;
    }


    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(26,108,225,0.2);
      border: 1px solid rgba(26,108,225,0.4);
      color: #8ab4f8;
      padding: 8px 16px;
      border-radius: 50px;
      font-size: 13px;
      font-weight: 500;
      margin-bottom: 24px;
    }

    .hero h1 {
      font-size: clamp(1.45rem, 3.2vw, 2.35rem);
      font-weight: 700;
      margin-bottom: 14px;
      letter-spacing: -0.015em;
    }

    .hero h1 span {
      color: var(--blue-light);
    }

    .hero p {
      font-size: 1.2rem;
      font-weight: 300;
      opacity: 0.9;
      margin-bottom: 36px;
      max-width: 560px;
    }

    .hero-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
    }

    /* Section common */
    main section {
      padding: 100px 0;
    }

    .section-header {
      text-align: center;
      max-width: 700px;
      margin: 0 auto 60px;
    }

    .section-header .label {
      display: inline-block;
      color: var(--blue);
      font-weight: 600;
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      margin-bottom: 12px;
    }

    .section-header h2 {
      font-size: clamp(1.8rem, 4vw, 2.6rem);
      margin-bottom: 16px;
      color: var(--black);
    }

    .section-header p {
      color: var(--text-muted);
      font-size: 1.1rem;
    }

    /* About */
    .about {
      background: var(--light-gray);
    }

    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
    }

    .about-content h2 {
      font-size: 2.2rem;
      margin-bottom: 20px;
    }

    .about-content p {
      color: var(--text-muted);
      margin-bottom: 16px;
      font-size: 1.05rem;
    }

    .about-features {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-top: 32px;
    }

    .feature-item {
      display: flex;
      gap: 14px;
      align-items: flex-start;
    }

    .feature-icon {
      width: 44px;
      height: 44px;
      background: var(--blue);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: white;
      font-size: 20px;
    }

    .feature-item h4 {
      font-size: 1rem;
      margin-bottom: 4px;
    }

    .feature-item p {
      font-size: 0.9rem;
      color: var(--text-muted);
      margin: 0;
    }

    .about-image {
      position: relative;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 25px 50px rgba(0,0,0,0.15);
    }

    .about-image img {
      width: 100%;
      height: 480px;
      object-fit: cover;
    }

    .about-badge {
      position: absolute;
      bottom: 24px;
      left: 24px;
      background: white;
      padding: 16px 24px;
      border-radius: 12px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    }

    .about-badge strong {
      display: block;
      font-size: 1.1rem;
      color: var(--black);
    }

    .about-badge span {
      font-size: 0.85rem;
      color: var(--text-muted);
    }

    /* Products */
    .products-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 28px;
    }

    .product-card {
      background: white;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0,0,0,0.06);
      transition: all 0.4s ease;
      border: 1px solid rgba(0,0,0,0.04);
    }

    .product-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 40px rgba(0,0,0,0.12);
    }

    .product-card .img-wrap {
      height: 220px;
      overflow: hidden;
      position: relative;
    }

    .product-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }

    .product-card:hover img {
      transform: scale(1.08);
    }

    .product-card .content {
      padding: 24px;
    }

    .product-card h3 {
      font-size: 1.25rem;
      margin-bottom: 10px;
      color: var(--black);
    }

    .product-card p {
      font-size: 0.95rem;
      color: var(--text-muted);
      margin-bottom: 16px;
    }

    .product-card .link {
      color: var(--blue);
      font-weight: 600;
      font-size: 0.95rem;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .product-card .link:hover {
      gap: 10px;
    }

    /* Why us */
    .why {
      background: var(--black);
      color: white;
    }

    .why .section-header h2,
    .why .section-header .label {
      color: white;
    }

    .why .section-header p {
      color: rgba(255,255,255,0.7);
    }

    .why-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
    }

    .why-card {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 16px;
      padding: 36px 28px;
      transition: all 0.3s ease;
    }

    .why-card:hover {
      background: rgba(26,108,225,0.15);
      border-color: rgba(26,108,225,0.3);
    }

    .why-card .num {
      font-family: 'Montserrat', sans-serif;
      font-size: 2.5rem;
      font-weight: 800;
      color: var(--blue-light);
      margin-bottom: 16px;
      opacity: 0.8;
    }

    .why-card h3 {
      font-size: 1.3rem;
      margin-bottom: 12px;
    }

    .why-card p {
      color: rgba(255,255,255,0.7);
      font-size: 0.95rem;
    }

    /* Gallery */
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .gallery-item {
      position: relative;
      border-radius: 14px;
      overflow: hidden;
      height: 280px;
      cursor: pointer;
    }

    .gallery-item.large {
      grid-column: span 2;
      height: 360px;
    }

    .gallery-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }

    .gallery-item:hover img {
      transform: scale(1.06);
    }

    .gallery-item .caption {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 20px;
      background: linear-gradient(transparent, rgba(0,0,0,0.75));
      color: white;
      font-weight: 500;
      opacity: 0;
      transform: translateY(10px);
      transition: all 0.3s ease;
    }

    .gallery-item:hover .caption {
      opacity: 1;
      transform: translateY(0);
    }

    /* CTA */
    .cta {
      background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
      color: white;
      text-align: center;
      padding: 80px 0;
    }

    .cta h2 {
      font-size: 2.2rem;
      margin-bottom: 16px;
    }

    .cta p {
      font-size: 1.15rem;
      opacity: 0.9;
      margin-bottom: 32px;
      max-width: 500px;
      margin-left: auto;
      margin-right: auto;
    }

    /* Contact */
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
    }

    .contact-info h3 {
      font-size: 1.5rem;
      margin-bottom: 24px;
    }

    .contact-item {
      display: flex;
      gap: 16px;
      margin-bottom: 28px;
    }

    .contact-item .icon {
      width: 48px;
      height: 48px;
      background: var(--light-gray);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: var(--blue);
      font-size: 20px;
    }

    .contact-item strong {
      display: block;
      margin-bottom: 4px;
      font-size: 1rem;
    }

    .contact-item p,
    .contact-item a {
      color: var(--text-muted);
      font-size: 0.95rem;
    }

    .contact-item a:hover {
      color: var(--blue);
    }

    .contact-form {
      background: var(--light-gray);
      padding: 40px;
      border-radius: 16px;
    }

    .contact-form h3 {
      font-size: 1.4rem;
      margin-bottom: 24px;
    }

    .form-group {
      margin-bottom: 18px;
    }

    .form-group label {
      display: block;
      font-size: 0.9rem;
      font-weight: 500;
      margin-bottom: 6px;
      color: var(--text);
    }

    .form-group input:not([type="checkbox"]),
    .form-group textarea,
    .form-group select {
      width: 100%;
      padding: 14px 16px;
      border: 1px solid #ddd;
      border-radius: 8px;
      font-family: inherit;
      font-size: 1rem;
      transition: border-color 0.3s;
      background: white;
    }

    .form-group input:not([type="checkbox"]):focus,
    .form-group textarea:focus,
    .form-group select:focus {
      outline: none;
      border-color: var(--blue);
      box-shadow: 0 0 0 3px rgba(26,108,225,0.15);
    }

    .form-group textarea {
      min-height: 120px;
      resize: vertical;
    }


    .rodo-consent {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin: 4px 0 18px;
      font-size: 0.84rem;
      font-weight: 400;
      color: #555;
      line-height: 1.45;
      cursor: pointer;
    }
    .rodo-consent input[type="checkbox"] {
      width: 16px;
      height: 16px;
      margin-top: 3px;
      flex-shrink: 0;
      accent-color: var(--blue);
    }
    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    /* Footer */
    .site-footer {
      background: var(--dark);
      color: rgba(255,255,255,0.7);
      padding: 60px 0 30px;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      gap: 40px;
      margin-bottom: 40px;
    }

    .footer-brand img {
      height: 52px;
      width: auto;
      margin-bottom: 16px;
      filter: none;
    }

    .footer-brand p {
      font-size: 0.95rem;
      max-width: 300px;
      line-height: 1.6;
    }

    .footer-col h4 {
      color: white;
      font-size: 1rem;
      margin-bottom: 18px;
    }

    .footer-col ul {
      list-style: none;
    }

    .footer-col li {
      margin-bottom: 10px;
    }

    .footer-col a:hover {
      color: var(--blue-light);
    }

    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,0.1);
      padding-top: 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.9rem;
    }

    /* Responsive */
    @media (max-width: 1024px) {
      .products-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .why-grid {
        grid-template-columns: 1fr;
      }
      .gallery-grid {
        grid-template-columns: 1fr 1fr;
      }
      .gallery-item.large {
        grid-column: span 1;
        height: 280px;
      }
    }

    @media (max-width: 768px) {
      .header-inner {
        /* 72 px = logo 56 px + po 8 px odstępu */
        height: 72px;
        max-height: 72px;
      }
      .logo img,
      .header-inner .custom-logo-link img,
      .header-inner img {
        height: 56px;
        max-height: 56px;
        /* Powtórzone świadomie: gdyby ktoś kiedyś nadpisał tu szerokość,
           logo znów zaczęłoby się deformować. */
        width: auto;
        flex-shrink: 0;
      }
      .logo-slogan {
        font-size: 15px;
      }
      #nav {
        display: none;
        position: absolute;
        /* Wysokość nagłówka zmienia się w punktach łamania (97 → 73 px),
           więc sztywne 95 px zostawiało przy 768 px ciemną szparę między
           nagłówkiem a panelem menu. */
        top: var(--header-height);
        left: 0;
        right: 0;
        background: white;
        padding: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
      }
      /*
       * Musi być #nav.open, nie nav.open. Reguła wyżej ukrywa menu przez
       * #nav (specyficzność 1,0,0); selektor z samą klasą (0,1,1) przegrywa
       * z nią i menu nie otwierało się po kliknięciu w hamburger, mimo że
       * JavaScript poprawnie dokładał klasę.
       */
      #nav.open {
        display: block;
      }
      #nav ul {
        flex-direction: column;
        gap: 16px;
      }
      .mobile-toggle {
        display: block;
      }
      .hero-content {
        padding: 40px 0;
      }
      .about-grid,
      .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
      }
      .about-features {
        grid-template-columns: 1fr;
      }
      .products-grid {
        grid-template-columns: 1fr;
      }
      .gallery-grid {
        grid-template-columns: 1fr;
      }
      .footer-grid {
        grid-template-columns: 1fr;
      }
      .form-row {
        grid-template-columns: 1fr;
      }
      .footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
      }
    }

/* ─────────────────────────────────────────────────────────────────
   Dodatki WordPressa — nie ma ich w mockupie
   ───────────────────────────────────────────────────────────────── */

:root {
	/*
	 * Pełna wysokość nagłówka: 96 px treści (.header-inner) + 1 px dolnej
	 * krawędzi. Bez tego jednego piksela zdjęcie podstrony wchodzi pod menu.
	 */
	--header-height: 97px;
}

/* Kotwice one-page (#oferta, #kontakt…) nie mogą chować się pod nagłówkiem. */
html {
	scroll-padding-top: var(--header-height);
}

/*
 * Pasek administratora przesuwa przyklejony nagłówek w dół.
 * Musi być `.admin-bar #header` — sam `.admin-bar header` (0,1,1) przegrywa
 * z regułą `#header { top: 0 }` (1,0,0) i nagłówek chowa się pod paskiem.
 */
.admin-bar #header {
	top: 32px;
}

/*
 * …i o tyle samo musi wzrosnąć odstęp kotwic, inaczej po kliknięciu w menu
 * górne 32 px sekcji chowa się pod nagłówkiem. Reguła celuje w element
 * przewijany (html), bo klasa .admin-bar siedzi na body.
 */
html:has(body.admin-bar) {
	scroll-padding-top: calc(var(--header-height) + 32px);
}

@media screen and (max-width: 782px) {
	html:has(body.admin-bar) {
		scroll-padding-top: calc(var(--header-height) + 46px);
	}
}

@media screen and (max-width: 782px) {
	.admin-bar #header {
		top: 46px;
	}
}

/*
 * Wartość musi odpowiadać rzeczywistej wysokości .header-inner, bo od niej
 * zależy odstęp kotwic i początek nagłówka podstrony. Nagłówek zmienia
 * wysokość dopiero przy 768 px (120 → 95), nie przy 1024.
 */
@media (max-width: 768px) {
	:root {
		--header-height: 73px;
	}
}

/* ─────────────────────────────────────────────────────────────────
   Szerokie i pełnoekranowe bloki Gutenberga

   Reguły są celowo proste, bo szablon podstrony nie opakowuje już treści
   w kontener (page.php). Blok z wyrównaniem „pełna szerokość” sięga więc
   krawędzi ekranu bez sztuczek na jednostkach vw, które przy widocznym
   pasku przewijania wystawały poza dokument.
   ───────────────────────────────────────────────────────────────── */

.alignwide {
	max-width: 1400px;
	margin-inline: auto;
}

.alignfull {
	width: 100%;
	max-width: none;
}

/*
 * Bloki rdzenia na podstronach nie mają własnego kontenera — ograniczamy je
 * tutaj. Sekcje tego motywu pomijamy, bo <section> trzyma .container w środku
 * i podwójne opakowanie zwężałoby treść.
 */
.page-content > *:not(section) {
	max-width: 1200px;
	margin-inline: auto;
	padding-left: 24px;
	padding-right: 24px;
}

.aligncenter {
	margin-inline: auto;
}

/* Treść tylko dla czytników ekranu (skip-link, etykiety). */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	z-index: 100000;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	padding: 12px 20px;
	clip-path: none;
	background: var(--white);
	color: var(--blue-dark);
	font-weight: 600;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* Widoczny focus — mockup nie definiuje go wcale. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--blue);
	outline-offset: 2px;
}

/* Przełącznik języka PL/EN w nagłówku. */
.lang-switcher {
	display: flex;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 14px;
	font-weight: 600;
}

.lang-switcher li a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--text-muted);
}

/* Sama flaga — nieco większa, skoro nie towarzyszy jej napis. */
.lang-switcher img {
	width: 22px;
	height: 15px;
	display: block;
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lang-switcher a:hover img,
.lang-switcher a:focus-visible img {
	transform: scale(1.08);
	box-shadow: 0 0 0 2px var(--blue);
}

.lang-switcher li.current-lang a,
.lang-switcher li a:hover {
	color: var(--blue);
}

/* Podstrony (polityka prywatności) — brak hero, treść pod nagłówkiem. */
/*
 * Odstęp od góry daje teraz nagłówek podstrony (.page-hero), więc treść nie
 * może dokładać wysokości menu drugi raz — wcześniej robiło to pustą przerwę.
 */
.page-content {
	padding: 64px 0 80px;
}

/*
 * Sekcje motywu wnoszą własne odstępy i własne tło. Gdy treść zaczyna się
 * albo kończy sekcją, wyściółka szablonu nie dodaje powietrza, tylko biały
 * pas — między zdjęciem nagłówka a sekcją oraz nad stopką. Odstęp zostaje
 * tam, gdzie strona składa się ze zwykłych bloków i faktycznie go potrzebuje.
 */
.page-content:has(> section:first-child) {
	padding-top: 0;
}

.page-content:has(> section:last-child) {
	padding-bottom: 0;
}

.page-content > h1 {
	font-size: clamp(28px, 4vw, 42px);
	margin-bottom: 24px;
}

/*
 * Tylko akapity wstawione wprost na podstronie. Bez ograniczenia do dzieci
 * reguła sięgała w głąb sekcji i nadpisywała im kolor — na stronie FAQ tekst
 * banera CTA wychodził szary na niebieskim tle mimo ustawienia białego.
 */
.page-content > p {
	margin-bottom: 16px;
	color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ─────────────────────────────────────────────────────────────────
   Misja i wartości — w mockupie zapisane jako style inline
   w atrybutach style="", tu przeniesione na klasy
   ───────────────────────────────────────────────────────────────── */

.mission-box {
	padding: 8px 0 24px;
	margin: 8px 0 24px;
}

.values-box {
	padding: 8px 0 28px;
	margin: 0 0 8px;
}

.mission-box h3,
.values-box h3 {
	font-family: var(--font-heading);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--black);
	margin: 0 0 14px;
}

.values-box h3 {
	margin-bottom: 16px;
}

.mission-box p {
	margin: 0;
	color: #333;
	line-height: 1.7;
	font-size: 1rem;
}

.values-box ul {
	margin: 0;
	padding-left: 20px;
	color: #333;
	line-height: 1.75;
	font-size: 1rem;
}

.values-box li {
	margin-bottom: 10px;
}

/* ─────────────────────────────────────────────────────────────────
   Szczegółowa oferta — w mockupie w całości na stylach inline
   (41 unikalnych deklaracji w 216 wystąpieniach), tu na klasach
   ───────────────────────────────────────────────────────────────── */

.offer-group {
	margin-top: 80px;
}

.offer-group .section-header {
	margin-bottom: 40px;
}

.offer-subheading {
	font-size: 1.4rem;
	margin: 40px 0 20px;
	color: var(--black);
}

.offer-lead {
	color: var(--text-muted);
	margin-bottom: 28px;
}

/* Karty parametrów (np. „System 70–76 mm") */
.spec-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	margin-bottom: 40px;
}

.spec-grid--photos {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
}

.spec-card {
	background: #f8f9fa;
	border-radius: 12px;
	padding: 22px;
}

.spec-card h4 {
	margin-bottom: 10px;
}

.spec-card ul {
	color: var(--text-muted);
	font-size: 0.92rem;
	padding-left: 18px;
	margin: 0;
}

/* Wariant ze zdjęciem — systemy przesuwne (HST, Slide, PSK) */
.spec-card--photo {
	background: var(--white);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
	padding: 0;
}

.spec-card--photo img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
}

.spec-card--photo .spec-card__body {
	padding: 20px 22px 22px;
}

.spec-card--photo h4 {
	margin: 0 0 12px;
	font-size: 1.1rem;
}

/* Prezentacja pojedynczego systemu z oferty Eko-Okna */
.system-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 32px;
	align-items: center;
	background: #f8f9fa;
	border-radius: 16px;
	padding: 28px;
	margin-bottom: 20px;
}

/* Wzory drzwi mają szersze zdjęcie niż przekroje profili. */
.system-row--wide {
	grid-template-columns: minmax(340px, 1.2fr) minmax(280px, 1fr);
	gap: 40px;
	padding: 32px 36px;
}

.system-row__media {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
}

.system-row--wide .system-row__media {
	padding: 0;
}

.system-row__media img {
	width: 100%;
	max-width: 320px;
	height: auto;
	display: block;
}

.system-row--wide .system-row__media img {
	max-width: 680px;
}

.system-row__body h4 {
	margin: 0 0 6px;
	font-size: 1.15rem;
}

.system-row__type {
	color: var(--blue);
	font-weight: 600;
	font-size: 0.82rem;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	margin: 0 0 14px;
}

/* Parametry w dwóch kolumnach — przy wąskim ekranie schodzą do jednej. */
.system-row__specs {
	color: var(--text-muted);
	font-size: 0.92rem;
	padding-left: 18px;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 18px;
}

@media (max-width: 768px) {
	.system-row--wide {
		grid-template-columns: 1fr;
		padding: 24px;
	}

	.system-row__specs {
		grid-template-columns: 1fr;
	}

	.offer-group {
		margin-top: 56px;
	}
}

/* Boks z dodatkami i przycisk zamykający grupę oferty. */
.offer-note {
	background: var(--white);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 16px;
	padding: 28px;
	margin-bottom: 30px;
}

.offer-note h4 {
	margin-bottom: 12px;
}

.offer-note p {
	color: var(--text-muted);
	font-size: 0.95rem;
	margin: 0;
}


/* ─────────────────────────────────────────────────────────────────
   Sekcja RODO — w mockupie na stylach inline
   ───────────────────────────────────────────────────────────────── */

.rodo-section {
	padding: 70px 0 40px;
	background: #f8f9fa;
}

.rodo-section .container {
	max-width: 860px;
}

.rodo-section .section-header {
	margin-bottom: 28px;
}

.rodo-card {
	background: var(--white);
	border-radius: 16px;
	padding: 28px 32px;
	margin-bottom: 20px;
}

.rodo-card:last-child {
	margin-bottom: 0;
}

.rodo-card h3 {
	margin: 0 0 12px;
	font-size: 1.15rem;
}

.rodo-card p {
	color: #444;
	line-height: 1.7;
	margin: 0 0 12px;
}

.rodo-card p:last-child {
	margin-bottom: 0;
}

/* ─────────────────────────────────────────────────────────────────
   Contact Form 7 — dopasowanie do stylów formularza z mockupu.
   CF7 owija pola w <span class="wpcf7-form-control-wrap">, więc
   selektory .form-group input nadal działają. Poprawki poniżej dotyczą
   tego, co CF7 renderuje inaczej niż mockup: zgody, komunikatów i
   przycisku wysyłki.
   ───────────────────────────────────────────────────────────────── */

.contact-form .wpcf7-form-control-wrap {
	display: block;
}

/* Zgoda RODO: CF7 opakowuje checkbox w span.wpcf7-list-item. */
.contact-form .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.contact-form .wpcf7-acceptance .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 4px 0 18px;
	font-size: 0.84rem;
	font-weight: 400;
	color: var(--text-muted);
	line-height: 1.45;
	cursor: pointer;
}

.contact-form .wpcf7-acceptance input[type="checkbox"] {
	margin-top: 3px;
	flex-shrink: 0;
}

.contact-form .wpcf7-submit {
	width: 100%;
}

/* Komunikaty walidacji i wysyłki. */
.contact-form .wpcf7-not-valid-tip {
	color: #b3261e;
	font-size: 0.82rem;
	margin-top: 6px;
}

.contact-form .wpcf7-not-valid {
	border-color: #b3261e !important;
}

.contact-form .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 14px 16px;
	border-radius: 8px;
	border: 1px solid currentColor;
	font-size: 0.9rem;
}

.contact-form form.sent .wpcf7-response-output {
	color: #1a6b3a;
	background: rgba(26, 107, 58, 0.06);
}

.contact-form form.invalid .wpcf7-response-output,
.contact-form form.failed .wpcf7-response-output {
	color: #b3261e;
	background: rgba(179, 38, 30, 0.06);
}

.contact-form .wpcf7-spinner {
	display: block;
	margin: 12px auto 0;
}

/* ─────────────────────────────────────────────────────────────────
   Blog i podstrony
   ───────────────────────────────────────────────────────────────── */

/* Nagłówek podstrony — niższy odpowiednik hero ze strony głównej. */
/*
 * Menu jest przyklejone (position: fixed), więc bez odsunięcia zdjęcie
 * zaczynałoby się pod nim i częściowo przez nie prześwitywało. Marginesem,
 * a nie wypełnieniem — chodzi o to, żeby tło sekcji też startowało niżej.
 */
.page-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 320px;
	margin-top: var(--header-height);
	padding: 40px 0 48px;
	background: var(--black);
	overflow: hidden;
}

.page-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.page-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 10, 10, 0.35) 0%, rgba(10, 10, 10, 0.8) 100%);
}

.page-hero__content {
	position: relative;
	color: var(--white);
}

.page-hero__content h1 {
	font-size: clamp(1.9rem, 4vw, 3rem);
	margin: 0 0 10px;
	color: var(--white);
}

.page-hero__content p {
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 1.05rem;
}

/* Lista wpisów */
.post-list {
	padding: 72px 0 88px;
}

.post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 32px;
}

.post-card {
	display: flex;
	flex-direction: column;
	background: var(--white);
	border: 1px solid rgba(0, 0, 0, 0.07);
	border-radius: 14px;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.post-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.09);
}

.post-card__media {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.post-card:hover .post-card__media img {
	transform: scale(1.04);
}

.post-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 24px 26px 26px;
}

.post-card__meta {
	margin: 0 0 10px;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--blue);
}

.post-card__title {
	font-size: 1.25rem;
	line-height: 1.35;
	margin: 0 0 12px;
}

.post-card__title a {
	color: var(--black);
}

.post-card__title a:hover {
	color: var(--blue);
}

.post-card__excerpt {
	flex: 1;
	margin: 0 0 18px;
	color: var(--text-muted);
	font-size: 0.95rem;
}

.post-card__more {
	align-self: flex-start;
	font-weight: 600;
	color: var(--blue);
}

.post-card__more:hover {
	color: var(--blue-dark);
}

.post-list__empty {
	color: var(--text-muted);
	font-size: 1.05rem;
}

/* Paginacja */
.pagination {
	margin-top: 56px;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	font-weight: 600;
	color: var(--text);
}

.pagination .page-numbers:hover {
	border-color: var(--blue);
	color: var(--blue);
}

.pagination .page-numbers.current {
	background: var(--blue);
	border-color: var(--blue);
	color: var(--white);
}

.pagination .page-numbers.dots {
	border-color: transparent;
}

/* Pojedynczy wpis */
.single-post {
	padding: 72px 0 88px;
}

.single-post__content {
	max-width: 760px;
	margin: 0 auto;
	font-size: 1.05rem;
	line-height: 1.75;
}

.single-post__content h2 {
	font-size: 1.6rem;
	margin: 40px 0 16px;
}

.single-post__content h3 {
	font-size: 1.3rem;
	margin: 32px 0 14px;
}

.single-post__content p,
.single-post__content ul,
.single-post__content ol {
	margin: 0 0 18px;
	color: #333;
}

.single-post__content img {
	border-radius: 12px;
}

.single-post__content a {
	color: var(--blue);
	text-decoration: underline;
}

/* Poprzedni / następny wpis */
.post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	max-width: 760px;
	margin: 56px auto 0;
	padding-top: 32px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.post-nav__link {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 20px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
}

.post-nav__link:hover {
	border-color: var(--blue);
	background: rgba(26, 108, 225, 0.04);
}

.post-nav__link--next {
	text-align: right;
}

.post-nav__label {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--blue);
}

.post-nav__title {
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--black);
	line-height: 1.35;
}

.post-nav__spacer {
	display: block;
}

@media (max-width: 768px) {
	.page-hero {
		min-height: 220px;
		padding: 28px 0 32px;
	}

	.post-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.post-nav {
		grid-template-columns: 1fr;
	}

	.post-nav__link--next {
		text-align: left;
	}

	.post-nav__spacer {
		display: none;
	}
}

/* ─────────────────────────────────────────────────────────────────
   FAQ — natywny <details>, bez JavaScriptu
   ───────────────────────────────────────────────────────────────── */

.faq {
	padding: 72px 0 88px;
}

.faq-list {
	max-width: 820px;
	margin: 0 auto;
}

.faq-item {
	border: 1px solid rgba(0, 0, 0, 0.09);
	border-radius: 12px;
	margin-bottom: 14px;
	background: var(--white);
	overflow: hidden;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.faq-item[open] {
	border-color: rgba(26, 108, 225, 0.35);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
}

.faq-item__question {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.45;
	color: var(--black);
	cursor: pointer;
	list-style: none;
}

/* Ukrycie domyślnego trójkąta w przeglądarkach opartych na WebKit. */
.faq-item__question::-webkit-details-marker {
	display: none;
}

.faq-item__question::after {
	content: "+";
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(26, 108, 225, 0.1);
	color: var(--blue);
	font-family: var(--font-body);
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1;
	transition: transform 0.25s ease, background 0.25s ease;
}

.faq-item[open] .faq-item__question::after {
	content: "−";
	background: var(--blue);
	color: var(--white);
}

.faq-item__question:hover {
	color: var(--blue);
}

.faq-item__answer {
	padding: 0 24px 22px;
	color: var(--text-muted);
	line-height: 1.7;
}

.faq-item__answer p {
	margin: 0 0 12px;
}

.faq-item__answer p:last-child {
	margin-bottom: 0;
}

.faq-item__answer a {
	color: var(--blue);
	text-decoration: underline;
}

/* W edytorze pytanie i odpowiedź są zawsze widoczne — inaczej klient
   nie mógłby edytować treści ukrytej w zwiniętym <details>. */
.faq-item--editor {
	padding: 4px 0;
}

.faq-item--editor .faq-item__question::after {
	content: none;
}

@media (max-width: 768px) {
	.faq {
		padding: 48px 0 64px;
	}

	.faq-item__question {
		padding: 16px 18px;
		font-size: 1rem;
	}

	.faq-item__answer {
		padding: 0 18px 18px;
	}
}

/* Wstęp na liście wpisów — treść strony ustawionej jako strona wpisów. */
.post-list__intro {
	max-width: 760px;
	margin: 0 0 48px;
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--text-muted);
}

.post-list__intro p {
	margin: 0;
}

/* ─────────────────────────────────────────────────────────────────
   Treść z edytora — odstępy nagłówków i akapitów

   Mockup resetuje marginesy globalnie (* { margin: 0 }), a reguła
   h1–h4 ustawia tylko krój. W sekcjach mockupu odstępy dawały
   kontenery, ale tam, gdzie klient wstawia dowolne bloki, nagłówki
   zlewały się z tekstem. Wartości takie same jak w treści wpisu,
   żeby typografia była spójna w całym serwisie.
   ───────────────────────────────────────────────────────────────── */

.page-content > h2,
.page-content > h3,
.page-content > h4,
.post-list__intro h2,
.post-list__intro h3,
.post-list__intro h4,
.faq-item__answer h3,
.faq-item__answer h4 {
	color: var(--black);
}

.page-content > h2,
.post-list__intro h2 {
	font-size: 1.6rem;
	margin: 40px 0 16px;
}

.page-content > h3,
.post-list__intro h3,
.faq-item__answer h3 {
	font-size: 1.3rem;
	margin: 32px 0 14px;
}

.page-content > h4,
.post-list__intro h4,
.faq-item__answer h4 {
	font-size: 1.1rem;
	margin: 24px 0 12px;
}

/* Pierwszy element nie odsuwa się od góry kontenera — odstęp daje
   już sam kontener. */
.page-content > *:first-child,
.post-list__intro > *:first-child {
	margin-top: 0;
}

.page-content > p,
.page-content > ul,
.page-content > ol {
	margin-bottom: 16px;
}

.post-list__intro p,
.post-list__intro ul,
.post-list__intro ol {
	margin: 0 0 16px;
}

.post-list__intro > *:last-child {
	margin-bottom: 0;
}

/* ─────────────────────────────────────────────────────────────────
   Ikony Font Awesome

   Emoji niosły własny kolor i rozmiar; ikona <i> dziedziczy je po
   kontenerze, więc trzeba je ustawić jawnie. Kolor dobrany do tła
   danego kafelka: biały na niebieskim, niebieski na jasnym.
   ───────────────────────────────────────────────────────────────── */

.feature-icon i {
	font-size: 20px;
	line-height: 1;
	color: var(--white);
}

.contact-item .icon i {
	font-size: 20px;
	line-height: 1;
	color: var(--blue);
}

/* ─────────────────────────────────────────────────────────────────
   Hero z bloków Gutenberga

   Treść hero to teraz zwykłe bloki rdzenia, a nie sztywne pola.
   Reguły poniżej nadają im wygląd z mockupu — wcześniej robił to
   markup bloku, który sam generował h1, akapit i przyciski.
   ───────────────────────────────────────────────────────────────── */

.hero-content > h1,
.hero-content > h2,
.hero-content .wp-block-heading {
	font-size: clamp(2rem, 5vw, 3.4rem);
	color: var(--white);
	margin: 0 0 18px;
}

.hero-content p {
	font-size: clamp(1rem, 2vw, 1.25rem);
	color: rgba(255, 255, 255, 0.9);
	margin: 0 0 28px;
	max-width: 640px;
}

.hero-content > *:last-child {
	margin-bottom: 0;
}

.hero-content ul,
.hero-content ol {
	color: rgba(255, 255, 255, 0.9);
	margin: 0 0 28px;
	padding-left: 20px;
}

/* Przyciski rdzenia w stylu OKNOVE */
.hero-content .wp-block-buttons {
	gap: 14px;
}

.wp-block-button.is-style-oknove-primary .wp-block-button__link,
.wp-block-button.is-style-oknove-white .wp-block-button__link {
	display: inline-block;
	padding: 15px 34px;
	border-radius: 8px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	transition: all 0.3s ease;
}

.wp-block-button.is-style-oknove-primary .wp-block-button__link {
	background: var(--blue);
	color: var(--white);
}

.wp-block-button.is-style-oknove-primary .wp-block-button__link:hover {
	background: var(--blue-dark);
}

.wp-block-button.is-style-oknove-white .wp-block-button__link {
	background: var(--white);
	color: var(--black);
}

.wp-block-button.is-style-oknove-white .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.88);
}

/* Tło hero: obraz ustawiany inline na .hero-bg albo na samej sekcji
   (edytor renderuje go bezpośrednio na <section>). */
.hero {
	background-size: cover;
	background-position: center;
}

/* ─────────────────────────────────────────────────────────────────
   Siatka sterowana z panelu bloku

   Reguły włącza dopiero klasa .has-oknove-grid, którą render dodaje
   tylko wtedy, gdy redaktor ustawił liczbę kolumn. Bez niej bloki
   zachowują domyślne repeat(auto-fit, …) i wyglądają jak wcześniej.

   Punkty łamania odpowiadają tym z mockupu: 1024 px i 768 px.
   ───────────────────────────────────────────────────────────────── */

.has-oknove-grid {
	display: grid;
	grid-template-columns: repeat(var(--oknove-cols-d, 1), minmax(0, 1fr));
	gap: var(--oknove-gap, 24px);
}

@media (max-width: 1024px) {
	.has-oknove-grid {
		grid-template-columns: repeat(var(--oknove-cols-t, var(--oknove-cols-d, 1)), minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.has-oknove-grid {
		grid-template-columns: repeat(var(--oknove-cols-m, 1), minmax(0, 1fr));
	}
}

/* Kontenery, które domyślnie nie są siatką — układ pionowy zostaje,
   dopóki redaktor nie włączy kolumn. */
.offer__inner,
.offer-group__inner {
	display: block;
}

.offer__inner.has-oknove-grid,
.offer-group__inner.has-oknove-grid {
	display: grid;
}

/* ─────────────────────────────────────────────────────────────────
   Kolory sekcji „Dlaczego my” sterowane z panelu

   Zmienne trafiają na sekcję, więc dziedziczą je bloki potomne —
   inaczej trzeba by kolorować każdy element z osobna.
   ───────────────────────────────────────────────────────────────── */

.why.has-oknove-colors {
	background: var(--why-bg, var(--black));
	color: var(--why-text, var(--white));
}

.why.has-oknove-colors .section-header h2,
.why.has-oknove-colors .section-header .label,
.why.has-oknove-colors .section-header p,
.why.has-oknove-colors .why-card h3,
.why.has-oknove-colors .why-card p,
.why.has-oknove-colors p,
.why.has-oknove-colors li {
	color: inherit;
}

/* Nadkreślenie i numeracja korzystają z koloru akcentu. */
.why.has-oknove-colors .section-header .label,
.why .why-card .num {
	color: var(--why-accent, var(--blue));
}

.why.has-oknove-colors .section-header p {
	opacity: 0.85;
}

/* ─────────────────────────────────────────────────────────────────
   Wyrównanie kafelków galerii w pionie

   Kafelki mają stałą wysokość (280 px, powiększony 360 px), więc
   w wierszu z powiększonym niższe domyślnie lgną do góry. Klasę
   dodaje render tylko wtedy, gdy redaktor wybrał wyrównanie —
   bez niej układ jest taki jak przed tą zmianą.
   ───────────────────────────────────────────────────────────────── */

.gallery-grid.is-valign-top {
	align-items: start;
}

.gallery-grid.is-valign-center {
	align-items: center;
}

.gallery-grid.is-valign-bottom {
	align-items: end;
}

/* ─────────────────────────────────────────────────────────────────
   Baner CTA — kolory i szerokość z panelu bloku

   Kolory wchodzą przez zmienne, które render wypisuje tylko wtedy, gdy
   redaktor je ustawił. Wartość zapasowa w var() to wygląd z mockupu,
   więc baner bez ustawień wygląda dokładnie jak wcześniej.

   Szerokość bierze się z wbudowanego wyrównania Gutenberga: `alignfull`
   to pas przez całą szerokość (domyślnie), a bez niego baner zostaje
   w kontenerze i dostaje zaokrąglone rogi.
   ───────────────────────────────────────────────────────────────── */

.cta {
	background: var(--cta-bg, linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%));
	color: var(--cta-text, #ffffff);
}

.cta .btn-white {
	background: var(--cta-btn-bg, #ffffff);
	color: var(--cta-btn-text, var(--black));
}

.cta .btn-white:hover {
	background: var(--cta-btn-bg, var(--light-gray));
}

/* Bez wyrównania baner zostaje w szerokości kontenera. Wyrównania „szeroka”
   i „pełna” obsługują reguły .alignwide/.alignfull wyżej — tutaj tylko
   zaokrąglamy rogi wersji, która nie dotyka krawędzi ekranu. */
.cta:not(.alignfull):not(.alignwide) {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

.cta:not(.alignfull) {
	border-radius: 20px;
}

/* Nagłówek i tekst banera trzymają się koloru sekcji, także gdy baner stoi
   na podstronie, gdzie obowiązuje typografia treści. */
.cta h2,
.cta p {
	color: inherit;
}

/* ─────────────────────────────────────────────────────────────────
   Listy wstawiane w edytorze

   Mockup resetuje odstępy globalnie (* { margin: 0; padding: 0 }), więc <ul>
   traci domyślne wcięcie. Przy list-style-position: outside markery rysują się
   poza ramką listy i wychodzą na lewo od kolumny tekstu.

   Klasa wp-block-list obejmuje wyłącznie listy z bloku „Lista” — listy
   budowane przez motyw (parametry, nawigacja, przełącznik języka) mają własne
   style z list-style: none i nie są tu ruszane.
   ───────────────────────────────────────────────────────────────── */

.wp-block-list {
	padding-left: 1.35em;
}

.wp-block-list li {
	margin-bottom: 8px;
}

.wp-block-list li:last-child {
	margin-bottom: 0;
}

.wp-block-list .wp-block-list {
	margin-top: 8px;
}

/* ─────────────────────────────────────────────────────────────────
   Treść polityki w karcie RODO

   Blok przyjmuje teraz dowolne bloki edytora, a globalny reset mockupu
   (* { margin: 0 }) zabrał nagłówkom i listom odstępy — nagłówki sekcji
   sklejały się z poprzednim akapitem. Akapity mają swoje odstępy wyżej,
   tutaj dokładamy brakujące.
   ───────────────────────────────────────────────────────────────── */

.rodo-card h4 {
	margin: 28px 0 10px;
	font-size: 1.02rem;
}

.rodo-card > *:first-child {
	margin-top: 0;
}

.rodo-card .wp-block-list {
	margin: 0 0 12px;
}

.rodo-card .wp-block-list:last-child {
	margin-bottom: 0;
}