/**
 * Styles for enova365 Kadry i Płace Template
 * Template: page-enova365.php
 * Reuses SCP nav (.c-scp__menu) and contact (.c-section__scp-contact) styles from scp.css
 */

/* =============================================
   VARIABLES & GLOBALS
   ============================================= */
:root {
    --enova-red: #C23035;
    --enova-dark: #000C2D;
    --enova-gray: #f5f5f5;
    --enova-text: #333;
    --tecza: linear-gradient(90deg, rgba(208,0,0,1) 0%, rgba(255,15,0,1) 33%, rgba(255,79,128,1) 66%, rgba(255,98,0,1) 100%);
}

.enova-wrapper {
    background: #f5f5f5;
}
.c-title.c-title--underline.aos-init.aos-animate{
    margin:0;
}
/* =============================================
   HERO SECTION – dark navy background per mockup
   ============================================= */
.enova-hero {
    overflow: clip;
    position: relative;
    background: var(--enova-dark);
    margin-top: 0;
    padding-top: 2rem;
    padding-bottom: 60px;
}
body{
    background: var(--enova-gray);
}
.enova-hero .container .row {
    align-items: center;
}
.c-section__product--description .main-photo img.photo{
    width: 100%;
    object-position: right;
    max-height: unset;
    overflow: visible;
    height:100%;
}
.c-section__product--description .main-photo .buttons .c-button{
    width:unset;
}
.c-section__product--description .main-photo .buttons {

  bottom: 100px;
}
.enova-hero__text h1 {
    font-size: 42px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.15;
    margin-bottom: 5px;
}

.enova-hero__text h2 {
    font-size: 22px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 20px;
    line-height: 1.4;
}

.enova-hero__text > p {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 10px;
}

/* Key benefits grid in hero – white card on dark bg */
.enova-hero__features {
    margin-top: 25px;
    padding: 25px 30px;
    background: white;
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15);
}
.c-scp__menu{
    border
    bi
;
    border-top: 1px solid #eee;
}
.c-scp__menu-brand {
  flex: 0;
  align-content: center;
  padding: 2rem 3rem 2rem 2rem;
}
.c-scp__menu-brand-logo {
    display: block;
    height: 100%;
    max-height: 36px;
    width: auto;
    object-fit: contain;
}
.enova-hero__features h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--enova-dark);
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.enova-hero__features-grid {
    display: flex;
    gap: 30px;
}

.enova-hero__features-grid ul {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
}

.enova-hero__features-grid ul li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--enova-text);
}

.enova-hero__features-grid ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 8px;
    height: 8px;
    background: var(--enova-red);
    border-radius: 50%;
}

.enova-hero__cta {
    margin-top: 25px;
    display: inline-block;
}

.enova-hero__image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.enova-hero__image img {
    max-width: 100%;
    height: auto;
}

/* =============================================
   ENOVA + SUPREMIS INTRO SECTION
   ============================================= */
.c-section__enova-intro {
    padding: 80px 0;
    background: white;
}

.c-section__enova-intro .row {
    align-items: center;
}

.enova-intro__label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--enova-red);
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.enova-intro__text h2 {
    font-size: 36px;
    font-weight: 800;
    color: var(--enova-dark);
    margin-bottom: 25px;
    line-height: 1.2;
}

.enova-intro__list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
}

.enova-intro__list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 14px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--enova-text);
}

.enova-intro__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bullet-icon, var(--enova-red));
    background-size: contain;
    background-repeat: no-repeat;
}

.enova-intro__list li[style*="--bullet-icon"]::before {
    width: 20px;
    height: 20px;
    top: 3px;
    border-radius: 0;
    background: var(--bullet-icon) no-repeat center / contain;
}

.enova-intro__graphic {
    display: flex;
    align-items: center;
    justify-content: center;
}

.enova-intro__graphic img {
    max-width: 100%;
    height: auto;
}

/* =============================================
   CHALLENGES SECTION
   ============================================= */
.c-section__enova-challenges {
    padding: 80px 0;
    background: white;
}

.enova-challenges__wrap {
    align-items: center;
}

.enova-challenges__header {
    margin-bottom: 0;
}

.enova-challenges__header h2 {
    font-size: 36px;
    font-weight: 800;
    color: var(--enova-dark);
    line-height: 1.2;
    margin-bottom: 10px;
    max-width: 20ch;
}

.enova-challenges__header p {
    font-size: 40px;
    font-weight: 300;
    color: var(--enova-text);
    margin-top: 0px;
}

.enova-challenges__list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    row-gap: 1.2rem;
}

.enova-challenges__list li {
    width: 50%;
    padding-right: 1rem;
}

.enova-challenge-item {
    display: flex;
    align-items: baseline;
    gap: .5rem;
}

.enova-challenge-bullet {
    flex-shrink: 0;
    height: 8px;
    width: 8px;
}

.enova-challenge-item p {
    font-size: 15px;
    line-height: 1.6;
    font-weight: 600;
    color: var(--enova-text);
    margin: 0;
}

/* =============================================
   WHY ENOVA SECTION
   ============================================= */
.c-section__enova-why {
    padding: 80px 0;
}

.c-section__enova-why .c-title--underline {
    text-align: center;
    margin-bottom: 60px;
}

.enova-why__grid {
    row-gap: 30px;
}

.enova-why__card {
    background: white;
    padding: 30px;
    height: 100%;
}
.enova-why__card.image-card{
    padding: 0;
}
.enova-why__card > img {
    width: 100%;
    height: auto;
    display: block;
}

.enova-why__card h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--enova-dark);
    margin-bottom: 10px;
    line-height: 1.3;
}
#dlaczego-enova .container {
  gap: 40px;
  display: flex;
  flex-direction: column;
}
.enova-why__card h3::first-letter {
    text-transform: uppercase;
}

.enova-why__card > p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--enova-text);
    margin-bottom: 15px;
}

.enova-why__card h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--enova-red);
    margin-bottom: 8px;
}

.enova-why__card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.enova-why__card ul li {
    margin-bottom: 6px;
}

.enova-why__benefit-item {
    display: grid;
    grid-template-columns: 12px 1fr;
    gap: .5rem;
    align-items: baseline;
}

.enova-why__bullet {
    height: 8px;
    margin-top: 5px;
}

.enova-why__benefit-item span {
    font-size: 13px;
    line-height: 1.5;
    color: var(--enova-text);
}

/* =============================================
   KEY FEATURES SECTION  (full-width, calc-based)
   ============================================= */
.c-section__enova-features {
    --_cw: 1640px;                          /* container width  */
    --_gutter: max(30px, (100vw - var(--_cw)) / 2); /* side margin     */

    display: grid;
    grid-template-columns: calc(var(--_gutter) + var(--_cw) * 5 / 12) 1fr;
    gap: 0;
    background: white;
    position: relative;
    overflow: hidden;
}

.enova-features__heading {
    font-size: 42px;
    font-weight: 800;
    color: var(--enova-dark);
    line-height: 1.2;
    margin-bottom: 30px;
}

.enova-features__text {
    display: flex;
    flex-direction: column;
    padding: 80px 40px 0 var(--_gutter);
}

.enova-features__text p {
    line-height: 1.7;
    margin-bottom: 20px;
}

.enova-features__text .c-button {
    margin-top: 10px;
    margin-bottom: 80px;
}
a.c-button {
    display: flex;
    justify-content: center;
    width:max-content;
}
.enova-features__list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.enova-features__list li {
    margin-bottom: 14px;
}

.enova-features__item {
    display: grid;
    grid-template-columns: 12px 1fr;
    gap: .5rem;
    align-items: baseline;
}

.enova-features__bullet {
    height: 8px;
    margin-top: 5px;
}

.enova-features__item span {
    font-size: 15px;
    line-height: 1.6;
    color: #333;
}

/* image column — spills to right viewport edge, height driven by left col */
.enova-features__image {
    position: relative;
    overflow: hidden;
}

.enova-features__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* -- integrations navy subsection — bleeds left to viewport edge -- */
.enova-features__integrations {
    margin-top: auto;
    padding: 80px 120px 80px var(--_gutter);
    margin-left: calc(-1 * var(--_gutter));
    margin-right: -40px;
    background: var(--enova-dark);
    position: relative;
}

.enova-features__integrations h3 {
    font-size: 22px;
    font-weight: 800;
    color: white;
    margin-bottom: 20px;
    line-height: 1.3;
}

.enova-integrations__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 24px;
    column-gap: 30px;
}

/* intro richtext above the columns */
.enova-integrations__intro {
    margin-bottom: 28px;
}

.enova-integrations__intro p {
    font-size: 15px;
    color: white;
    line-height: 1.65;
    margin-bottom: 6px;
}

/* column label — small uppercase caption */
.enova-integrations__col-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin-bottom: 8px;
    font-weight: 600;
}

/* richtext column body */
.enova-integrations__col-content {
    color: white;
}

.enova-integrations__col-content p {
    font-size: 14px;
    color: white;
    line-height: 1.6;
    margin-bottom: 8px;
}

.enova-integrations__col-content h2,
.enova-integrations__col-content h3,
.enova-integrations__col-content h4 {
    font-size: 15px;
    font-weight: 700;
    color: white;
    margin: 14px 0 10px;
    line-height: 1.3;
}

.enova-integrations__col-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#integracje ul{
    padding:0;
    
}
#integracje ul li {
    position: relative;
    padding-left: 28px;
    font-size: 14px;
    color: white;
    line-height: 1.55;
    margin-bottom: 10px;
    list-style: none;
}
#integracje ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 8px;
    height: 8px;
    background-image: url('https://www.supremis.pl/wp-content/uploads/2026/01/01.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

/* =============================================
   FOR WHOM (DLA KOGO) SECTION
   ============================================= */
.c-section__enova-audience {
    padding: 40px 0;
    background: white;
}

.c-section__enova-audience .c-title--underline {
    text-align: center;
    margin-bottom: 60px;
}

.enova-audience__grid {
    row-gap: 30px;
}

.enova-audience__card {
    padding: 35px 30px;
    height: 100%;
}

.enova-audience__card h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--enova-dark);
    margin-bottom: 12px;
}

.enova-audience__card > p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--enova-text);
    margin-bottom: 15px;
}

.enova-audience__card h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--enova-red);
    margin-bottom: 8px;
}

.enova-audience__card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.enova-audience__card ul li {
    margin-bottom: 6px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--enova-text);
}

.enova-audience__benefit-item {
    display: grid;
    grid-template-columns: 12px 1fr;
    gap: .5rem;
    align-items: baseline;
}

.enova-audience__bullet {
    height: 8px;
    margin-top: 3px;
}

/* =============================================
   WHY SUPREMIS SECTION
   ============================================= */
.c-section__enova-supremis-why {
    padding: 80px 0;
}

.c-section__enova-supremis-why .c-title--underline {
    text-align: center;
    margin-bottom: 60px;
}

.enova-supremis-why__grid {
    row-gap: 30px;
}

.enova-supremis-why__card {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 4px;
    align-items: start;
    text-align: left;
    padding: 24px 20px;
    height: 100%;
    font-weight: 700;
}

.enova-supremis-why__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.enova-supremis-why__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.enova-supremis-why__card p {
    color: var(--enova-text);
    margin: 0;
}

/* =============================================
   FAQ SECTION (accordion from single-rozwiazania)
   ============================================= */
.enova-faq-section {
    padding: 80px 0;
    margin-bottom: 0;
    margin-top: 0;
}

.enova-faq-section > h2 {
    text-align: center;
    font-size: 36px;
    font-weight: 800;
    color: var(--enova-dark);
    margin-bottom: 40px;
}

.enova-faq-section .accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    margin: 10px 0;
}

.enova-faq-section .activee,
.enova-faq-section .accordion:hover,
.enova-faq-section button:focus {
    background-color: #ddd;
    border: none;
}

.enova-faq-section .panel {
    padding: 0 18px;
    background-color: white;
    display: none;
    overflow: hidden;
}

.enova-faq-section .panel p {
    padding: 18px 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--enova-text);
}

.enova-faq-section .accordion:after {
    content: '\00FF0B';
    font-size: 30px;
    color: #ff4956;
    float: right;
    margin-left: 5px;
    margin-top: -20px;
}

.enova-faq-section .activee:after {
    content: "\00FF0D";
}

.enova-faq-section button.accordion h2 {
    font-size: 20px;
    padding-bottom: 0;
    margin-block-end: 0 !important;
    margin-block-start: 0 !important;
    text-align: left;
}

.enova-faq-section button.accordion > h2:after {
    content: '';
    height: 2px;
    width: 70px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    margin: 0;
    background-color: #ccc !important;
}

/* =============================================
   CONTACT FORM PLACEHOLDER
   (will be replaced by HubSpot embed)
   ============================================= */
.enova-contact-form-placeholder {
    width: 100%;
}

.enova-contact-form-placeholder .form-row {
    display: flex;
    gap: 20px;
}

.enova-contact-form-placeholder .form-row .form-group {
    flex: 1;
}

.enova-contact-form-placeholder .form-group {
    margin-bottom: 20px;
}

.enova-contact-form-placeholder label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 6px;
}

.enova-contact-form-placeholder label .required {
    color: var(--enova-red);
}

.enova-contact-form-placeholder input,
.enova-contact-form-placeholder textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0;
    padding: 12px 0;
    font-size: 16px;
    color: white;
    font-family: 'Poppins', sans-serif;
    transition: border-color 0.3s;
    outline: none;
}

.enova-contact-form-placeholder input::placeholder,
.enova-contact-form-placeholder textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.enova-contact-form-placeholder input:focus,
.enova-contact-form-placeholder textarea:focus {
    border-bottom-color: rgba(255, 255, 255, 0.8);
}

.enova-contact-form-placeholder textarea {
    resize: vertical;
}

.enova-contact-form-placeholder .c-button {
    margin-top: 10px;
    background-color: var(--enova-red);
    color: white;
    border: none;
    padding: 16px 40px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.enova-contact-form-placeholder .c-button:hover {
    background-color: white;
    color: var(--enova-red);
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media only screen and (max-width: 1400px) {
    .enova-hero__text h1 {
        font-size: 36px;
    }
    .enova-hero__features-grid {
        gap: 20px;
    }
}

@media only screen and (max-width: 991px) {
    /* Hero */
    .enova-hero__text h1 {
        font-size: 28px;
    }
    .enova-hero__text h2 {
        font-size: 18px;
    }
    .enova-hero__features-grid {
        flex-direction: column;
        gap: 10px;
    }
    .enova-hero__image {
        margin-top: 30px;
    }
    .enova-hero__image img {
        max-width: 350px;
    }

    /* Intro */
    .c-section__enova-intro {
        padding: 50px 0;
    }
    .enova-intro__text h2 {
        font-size: 28px;
    }
    .enova-intro__graphic {
        margin-top: 30px;
    }

    /* Challenges */
    .c-section__enova-challenges {
        padding: 50px 0;
    }
    .enova-challenges__header {
        margin-bottom: 30px;
    }
    .enova-challenges__header h2 {
        font-size: 28px;
    }

    /* Why enova */
    .c-section__enova-why {
        padding: 50px 0;
    }

    /* Features */
    .c-section__enova-features {
        grid-template-columns: 1fr;
        padding: 0;
    }
    .enova-features__text {
        padding: 50px 20px 0;
    }
    .enova-features__heading {
        font-size: 28px;
    }
    .enova-features__image {
        min-height: 300px;
    }
    .enova-features__integrations {
        margin-top: 30px;
        margin-left: -20px;
        margin-right: -20px;
        padding: 30px 20px;
    }
    .enova-integrations__grid {
        grid-template-columns: 1fr;
    }

    /* Audience */
    .c-section__enova-audience {
        padding: 50px 0;
    }

    /* Why SUPREMIS */
    .c-section__enova-supremis-why {
        padding: 50px 0;
    }
    .enova-supremis-why__card {
        padding: 30px 16px;
    }

    /* FAQ */
    .enova-faq-section {
        padding: 50px 0;
    }
}

@media only screen and (max-width: 767px) {
    .enova-hero__text h1 {
        font-size: 24px;
    }
    .enova-hero__features {
        padding: 20px;
    }
    .enova-challenges__header h2 {
        font-size: 24px;
    }
    .enova-challenges__list li {
        width: 100%;
    }
    .enova-features__heading {
        font-size: 24px;
    }
    .enova-features__integrations h3 {
        font-size: 18px;
    }
    .enova-intro__text h2 {
        font-size: 24px;
    }
    .c-section__enova-why .c-title--underline,
    .c-section__enova-audience .c-title--underline,
    .c-section__enova-supremis-why .c-title--underline {
        font-size: 26px;
    }
    .enova-faq-section > h2 {
        font-size: 26px;
    }
    .enova-contact-form-placeholder .form-row {
        flex-direction: column;
        gap: 0;
    }
}

@media only screen and (max-width: 572px) {
    .enova-hero__image {
        order: -1;
    }
    .enova-supremis-why__card {
    padding: 0px 16px;
  }
    .enova-audience__card {
  padding: 0px 30px;
  height: 100%;
}
    #top{
        background-position: top;
        background-size: 100% auto;
    }
    .c-section__product--description .main-photo .buttons .c-button{
        box-sizing: border-box;
        justify-self: center;
        display: flex;
        padding:12px 20px;
        margin: none;
        height: unset;
    }
    .c-section__product--description .main-photo .buttons{
        width: 100%;
    }
}