/* ============================================================
   ENERO – warstwa projektowa strony (nadpisuje main.css)
   Zasada: ostra, techniczna geometria – zero zaokrągleń,
   ścięte narożniki (clip-path), cienkie linie, akcent #EA5501.
   ============================================================ */

:root {
    --enero-orange: #EA5501;
    --enero-navy:   #192D7B;
    --enero-dark:   #111127;
    --enero-dark-2: #0c0c1e;
    --enero-line:   #e3e4ea;
    --enero-cut:    22px;   /* wielkość ścięcia narożnika */
}

/* --- ścięty narożnik (prawy górny) --- */
.enero-cut {
    clip-path: polygon(0 0, calc(100% - var(--enero-cut)) 0, 100% var(--enero-cut), 100% 100%, 0 100%);
}

/* ============================================================
   HERO – 3 kafle na tle technicznego motywu
   ============================================================ */
.enero-hero {
    position: relative;
    background-color: var(--enero-dark-2);
    /* siatka konstrukcyjna (blueprint) */
    background-image:
        linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
    background-size: 240px 240px, 240px 240px, 48px 48px, 48px 48px;
    padding: 90px 0 100px;
    overflow: hidden;
}
/* pozioma linia akcentowa u góry sekcji */
.enero-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 38%;
    height: 3px;
    background: var(--enero-orange);
}
.enero-hero-motif {
    position: absolute;
    right: -60px;
    top: -20px;
    width: 780px;
    max-width: 90vw;
    height: auto;
    pointer-events: none;
    user-select: none;
}
.enero-hero .rs-banner-title { color: #fff; }
.enero-hero .rs-banner-descrip p { color: rgba(255,255,255,0.72); }
.enero-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: rgba(255,255,255,0.68);
    font-size: 13.5px;
    letter-spacing: .13em;
    line-height: 1.7;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.enero-hero-kicker::before {
    content: '';
    width: 34px;
    height: 2px;
    background: var(--enero-orange);
    flex-shrink: 0;
}
.enero-hero .rs-banner-title { font-size: 72px; line-height: 1.12; }

/* ============================================================
   NAGŁÓWKI SEKCJI – styl "kicker" w większej skali,
   bez małych podtytułów nad tytułem
   ============================================================ */
.enero-naglowek {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: .09em;
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--rs-title-primary, #1F1F1F);
    margin: 0 0 54px;
}
.enero-naglowek::before {
    content: '';
    width: 46px;
    height: 3px;
    background: var(--enero-orange);
    flex-shrink: 0;
}
.enero-naglowek-wrap { text-align: center; }
.enero-kroki .enero-naglowek { color: #fff; }
.enero-hero-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 56px;
    position: relative;
    z-index: 1;
}
.enero-hero-tile {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #16162e;
    clip-path: polygon(0 0, calc(100% - var(--enero-cut)) 0, 100% var(--enero-cut), 100% 100%, 0 100%);
}
.enero-hero-tile::after {              /* dolna linia akcentowa */
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--enero-orange) 0%, transparent 70%);
    z-index: 2;
}
.enero-hero-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease;
}
.enero-hero-tile img.is-visible { opacity: 1; }
.enero-hero-tile .tile-index {         /* techniczny numer kafla */
    position: absolute;
    left: 14px;
    top: 10px;
    z-index: 2;
    font-size: 12px;
    letter-spacing: .2em;
    color: rgba(255,255,255,0.85);
    background: rgba(12,12,30,0.55);
    padding: 4px 10px;
    backdrop-filter: blur(2px);
}
@media (max-width: 991px) {
    .enero-hero { padding: 60px 0 70px; }
    .enero-hero-tiles { grid-template-columns: 1fr; }
    .enero-hero-motif { display: none; }
}

/* ============================================================
   OFERTA – kafle pionowe: ikona / grupa / tytuł / opis
   ============================================================ */
.enero-oferta a.enero-oferta-link { display: block; height: 100%; }
.enero-oferta .enero-tile {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--enero-line);
    border-top: 3px solid #c9ccda;   /* widoczny także bez hovera */
    padding: 30px 26px 28px;
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.enero-oferta a:hover .enero-tile {
    border-top-color: var(--enero-orange);
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(17, 17, 39, .10);
}
.enero-oferta .enero-tile-icon {
    position: relative;
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #edeff4;
    margin-bottom: 22px;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
    transition: background .25s ease;
}
.enero-oferta .enero-tile-icon i {
    font-size: 30px;
    color: var(--enero-orange);
    transition: color .25s ease;
}
.enero-oferta a:hover .enero-tile-icon {
    background: var(--enero-orange);
}
.enero-oferta a:hover .enero-tile-icon i { color: #fff; }
.enero-oferta .enero-tile-group {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #8a8b97;
    margin-bottom: 6px;
}
.enero-oferta .enero-tile-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--enero-navy);
    margin: 0 0 10px;
    line-height: 1.3;
}
.enero-oferta .enero-tile-desc {
    font-size: 14px;
    line-height: 1.65;
    color: #555;
    margin: 0 0 18px;
}
.enero-oferta .enero-tile-more {
    margin-top: auto;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--enero-navy);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color .25s ease, gap .25s ease;
}
.enero-oferta a:hover .enero-tile-more { color: var(--enero-orange); gap: 14px; }

/* ============================================================
   PARTNERZY (na tle jasnej siatki technicznej + kratownicy)
   ============================================================ */
.enero-partnerzy {
    position: relative;
    overflow: hidden;
    background-color: #fff;
    background-image:
        linear-gradient(#f0f1f6 1px, transparent 1px),
        linear-gradient(90deg, #f0f1f6 1px, transparent 1px);
    background-size: 48px 48px;
}
.enero-partnerzy .container { position: relative; z-index: 1; }
.enero-partnerzy-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
}
/* karty jak w sekcji "Kompleksowe rozwiązania" (jasny wariant) */
.enero-partner-box {
    background: #fff;
    border: 1px solid var(--enero-line);
    border-left: 3px solid var(--enero-orange);
    padding: 30px 54px;
    min-width: 230px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.enero-partner-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(17, 17, 39, .08);
}
.enero-partner-box img { max-height: 58px; max-width: 180px; object-fit: contain; }
.enero-partner-name { font-size: 25px; font-weight: 700; color: var(--enero-navy); letter-spacing: .02em; }

/* ============================================================
   REALIZACJE – 2 kafle-kategorie
   ============================================================ */
.enero-realizacje-kafel {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--enero-dark) center / cover no-repeat;
    clip-path: polygon(0 0, calc(100% - var(--enero-cut)) 0, 100% var(--enero-cut), 100% 100%, 0 100%);
}
.enero-realizacje-kafel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,10,28,.88) 0%, rgba(10,10,28,.12) 60%);
    transition: background .3s ease;
}
.enero-realizacje-kafel::before {      /* linia akcentowa na dole */
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 4px;
    background: var(--enero-orange);
    z-index: 2;
    transition: width .35s ease;
}
.enero-realizacje-kafel:hover::before { width: 100%; }
.enero-realizacje-kafel .kafel-caption {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 26px;
    z-index: 1;
    color: #fff;
}
.enero-realizacje-kafel .kafel-caption h3 { color: #fff; font-size: 28px; font-weight: 700; margin: 0 0 4px; }
.enero-realizacje-kafel .kafel-caption span { color: rgba(255,255,255,.78); font-size: 14px; }

/* ============================================================
   MODERNIZACJE I NAPRAWY – 4 kroki
   ============================================================ */
.enero-kroki {
    background-color: var(--enero-dark);
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 48px 48px;
}
.enero-kroki .rs-section-title { color: #fff; }
.enero-krok {
    position: relative;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.09);
    border-left: 3px solid var(--enero-orange);
    padding: 30px 26px 28px;
    height: 100%;
    transition: background .25s ease;
}
.enero-krok:hover { background: rgba(255,255,255,.07); }
.enero-krok-numer {
    font-size: 52px;
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--enero-orange);
    margin-bottom: 18px;
}
.enero-krok h5 { color: #fff; font-size: 19px; margin: 0 0 10px; }
.enero-krok p { color: rgba(255,255,255,.72); margin: 0; font-size: 14.5px; line-height: 1.65; }

/* ============================================================
   KONTAKT – formularz (lewa) + mapa (prawa)
   ============================================================ */
.enero-kontakt { background: #f5f6f9; }
.enero-kontakt-row { display: flex; gap: 0; align-items: stretch; }
.enero-kontakt-form-col {
    flex: 1 1 50%;
    background: #fff;
    border: 1px solid var(--enero-line);
    border-right: 0;
    padding: 44px 46px;
    display: flex;
    flex-direction: column;
}
.enero-kontakt-map-col {
    flex: 1 1 50%;
    min-height: 560px;
    position: relative;
    border: 1px solid var(--enero-line);
}
.enero-kontakt-map-col #enero-map { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.enero-kontakt-form { display: flex; flex-direction: column; flex: 1; }
.enero-kontakt-form .form-control {
    border: 1px solid #d9dbe4;
    border-radius: 0;
    padding: 14px 16px;
    margin-bottom: 18px;
    background: #fbfbfd;
    font-size: 15px;
    transition: border-color .2s ease, background .2s ease;
}
.enero-kontakt-form .form-control:focus {
    border-color: var(--enero-orange);
    background: #fff;
    box-shadow: none;
    outline: none;
}
.enero-kontakt-form .pole-wiadomosc {      /* opis wypełnia wolną przestrzeń */
    flex: 1;
    display: flex;
    flex-direction: column;
}
.enero-kontakt-form .pole-wiadomosc textarea {
    flex: 1;
    min-height: 220px;
    resize: vertical;
}
.enero-kontakt-form-tytul {
    font-size: 22px;
    font-weight: 700;
    color: var(--enero-navy);
    margin: 0 0 22px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--enero-orange);
    display: inline-block;
    align-self: flex-start;
}
.enero-kontakt-alert { padding: 13px 16px; margin-bottom: 18px; font-size: 14px; border-left: 3px solid; }
.enero-kontakt-alert.ok  { background: #ecf7ef; color: #1c6b34; border-color: #1c6b34; }
.enero-kontakt-alert.err { background: #fdefef; color: #922;    border-color: #922; }
@media (max-width: 991px) {
    .enero-kontakt-row { flex-direction: column; }
    .enero-kontakt-form-col { border-right: 1px solid var(--enero-line); padding: 30px 24px; }
    .enero-kontakt-map-col { min-height: 380px; border-top: 0; }
}

/* ============================================================
   O NAS – podstrona
   ============================================================ */
.enero-onas-liczniki { display: flex; gap: 22px; margin-top: 34px; flex-wrap: wrap; }
.enero-licznik {
    border: 1px solid var(--enero-line);
    border-top: 3px solid var(--enero-orange);
    padding: 22px 34px;
    min-width: 200px;
    background: #fff;
}
.enero-licznik .wartosc { font-size: 40px; font-weight: 800; color: var(--enero-navy); line-height: 1.1; }
.enero-licznik .etykieta { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #777; margin-top: 4px; }

/* ============================================================
   BREADCRUMB podstron – ten sam motyw techniczny co hero
   ============================================================ */
.enero-breadcrumb {
    position: relative;
    overflow: hidden;
    background-color: var(--enero-dark-2);
    background-image:
        linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
    background-size: 240px 240px, 240px 240px, 48px 48px, 48px 48px;
    padding: 46px 0;
}
.enero-breadcrumb::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 28%;
    height: 3px;
    background: var(--enero-orange);
}
.enero-breadcrumb .enero-motif {
    position: absolute;
    right: -50px;
    top: 50%;
    transform: translateY(-46%);
    width: 460px;
    max-width: 60vw;
    height: auto;
    pointer-events: none;
    user-select: none;
    opacity: .9;
}
.enero-breadcrumb .container { position: relative; z-index: 1; }
.enero-breadcrumb h1 { color: #fff; font-size: 42px; font-weight: 700; margin: 0; }
@media (max-width: 767px) {
    .enero-breadcrumb h1 { font-size: 30px; }
    .enero-breadcrumb .enero-motif { display: none; }
}

/* ============================================================
   Pasek "Porozmawiajmy o projekcie" nad formularzem kontaktowym
   ============================================================ */
.enero-kontakt-bar {
    display: flex;
    align-items: stretch;
    margin-bottom: 0;
    clip-path: polygon(0 0, calc(100% - var(--enero-cut)) 0, 100% var(--enero-cut), 100% 100%, 0 100%);
}
.enero-kontakt-bar .bar-logo {
    background: #fff;
    border: 1px solid var(--enero-line);
    border-right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 44px;
    flex-shrink: 0;
}
.enero-kontakt-bar .bar-logo img { max-height: 40px; display: block; }
.enero-kontakt-bar .bar-text {
    background: var(--enero-navy);
    display: flex;
    align-items: center;
    padding: 24px 44px;
    flex-grow: 1;
}
.enero-kontakt-bar .bar-text h2 {
    color: #fff;
    font-size: 25px;
    font-weight: 700;
    margin: 0;
    letter-spacing: .02em;
}
@media (max-width: 767px) {
    .enero-kontakt-bar { flex-direction: column; clip-path: none; }
    .enero-kontakt-bar .bar-logo { border-right: 1px solid var(--enero-line); padding: 20px; }
    .enero-kontakt-bar .bar-text { padding: 20px; justify-content: center; }
    .enero-kontakt-bar .bar-text h2 { font-size: 20px; text-align: center; }
}

/* ============================================================
   Linki: czytelne hovery
   – na ciemnym tle: delikatny szary (zamiast niewidocznego granatu)
   – na jasnym tle: granat + podkreślenie
   ============================================================ */
.rs-header-area .main-menu > ul > li:hover > a,
.rs-header-area .main-menu ul li a:hover,
.rs-header-top a:hover,
.rs-footer-two .rs-footer-widget-address a:hover,
.rs-footer-two .rs-footer-widget-email a:hover,
.rs-footer-two .rs-footer-widget-number span a:hover,
.rs-copyright-one .rs-footer-copyright a:hover,
.enero-breadcrumb a:not(.rs-btn):hover,
.enero-kroki a:hover,
.realizacja-detail-panel a:not(.gallery-item):hover,
.offcanvas-area .offcanvas-contact-text a:hover {
    color: #c7c9d4 !important;
}
.enero-kontakt a:not(.rs-btn):hover,
.enero-partnerzy a:not(.enero-partner-box):hover,
.rs-about-area a:not(.rs-btn):hover {
    color: var(--enero-navy) !important;
    text-decoration: underline;
}

/* ============================================================
   MODAL OFERTY – styl spójny z modułem kontaktowym:
   ścięty róg, granatowy nagłówek z motywem kratki, X do zamknięcia
   ============================================================ */
.enero-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 4000;
    background: rgba(10, 10, 28, .74);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.enero-modal-overlay.is-open { display: flex; }
.enero-modal {
    background: #fff;
    width: 100%;
    max-width: 940px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    clip-path: polygon(0 0, calc(100% - var(--enero-cut)) 0, 100% var(--enero-cut), 100% 100%, 0 100%);
}
.enero-modal-header {
    background-color: var(--enero-navy);
    background-image:
        linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
    background-size: 48px 48px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 30px;
    flex-shrink: 0;
}
.enero-modal-header h3 {
    color: #fff;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: .03em;
    margin: 0;
}
.enero-modal-close {
    background: transparent;
    border: 1px solid rgba(255,255,255,.35);
    color: #fff;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    transition: background .25s ease, border-color .25s ease;
}
.enero-modal-close:hover { background: var(--enero-orange); border-color: var(--enero-orange); }
.enero-modal-body {
    padding: 34px 30px;
    overflow-y: auto;
}
.enero-modal-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;   /* opis lewa, zdjęcie prawa (jak formularz/mapa) */
    gap: 30px;
    align-items: stretch;
}
.enero-modal-desc { color: #444; font-size: 15px; line-height: 1.75; }
.enero-modal-desc p { margin-bottom: 14px; }
.enero-modal-img {
    border: 1px solid var(--enero-line);
    min-height: 280px;
    background: #f2f3f7 center / cover no-repeat;
}
.enero-modal-cta { margin-top: 24px; }
@media (max-width: 767px) {
    .enero-modal-overlay { padding: 12px; }
    .enero-modal { clip-path: none; max-height: 94vh; }
    .enero-modal-grid { grid-template-columns: 1fr; }
    .enero-modal-img { min-height: 200px; order: -1; }
    .enero-modal-body { padding: 24px 20px; }
    .enero-modal-header { padding: 16px 20px; }
    .enero-modal-header h3 { font-size: 17px; }
}

/* ============================================================
   Responsywność typografii
   ============================================================ */
@media (max-width: 1366px) {
    .enero-hero .rs-banner-title { font-size: 58px; }
}
@media (max-width: 1199px) {
    .enero-hero .rs-banner-title { font-size: 50px; }
    .enero-naglowek { font-size: 26px; }
}
@media (max-width: 767px) {
    .enero-hero .rs-banner-title { font-size: 32px; line-height: 1.18; }
    .enero-hero-kicker { font-size: 11.5px; letter-spacing: .09em; gap: 10px; }
    .enero-naglowek { font-size: 19px; gap: 12px; letter-spacing: .06em; margin-bottom: 36px; }
    .enero-naglowek::before { width: 28px; }
    .enero-breadcrumb h1 { font-size: 28px; }
}

/* ============================================================
   Link w pasku copyright – jak zwykły tekst, podkreślenie
   dojeżdżające na hover
   ============================================================ */
.rs-copyright-one .rs-footer-copyright a,
.rs-copyright-one .rs-footer-copyright.has-theme-orange a {
    color: inherit !important;
    background: none !important;
    background-image: none !important;
    position: relative;
    padding-bottom: 2px;
}
.rs-copyright-one .rs-footer-copyright a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width .3s ease;
}
.rs-copyright-one .rs-footer-copyright a:hover::after { width: 100%; }

/* ============================================================
   Globalne odejście od zaokrągleń (elementy szablonu użyte na stronie)
   ============================================================ */
.rs-btn,
.rs-services-five .rs-services-icon,
.rs-portfolio-item,
.rs-portfolio-thumb,
.gallery-grid .gallery-item,
.project-sidebar,
.realizacja-detail-panel,
.enero-osoba,
.mfp-content img.mfp-img {
    border-radius: 0 !important;
}