/**
 * Styles for product pages: SAP Joule & SUPREMIS Agentic
 * Templates: single-sap-joule.php, single-supremis-agentic.php
 * (Shared blocks — tile slider, video facade, modal, feature-media — live in
 *  shared-blocks.css.)
 */

/* ============================================================
   HERO  — copied literally from page-scp.php (#top): the elegant
   dark-navy "wave" decoration (hero-bg.svg, supplied by scp.css on
   #top) sits over the light page, with the photo on the left and the
   description on the right. We therefore do NOT paint a flat navy
   background here (that would hide the wave); we keep the SCP look.
   ============================================================ */
.product-hero {
    padding-bottom: 60px;
}
.product-hero .c-section__breadcrumbs ul {
    list-style: none;
    display: flex;
    gap: 8px;
    padding: 0;
    margin: 0 0 20px;
    font-size: 13px;
}
/* Breadcrumbs sit over the dark wave blob (top-left), like SCP. */
.product-hero .c-section__breadcrumbs a { color: rgba(255, 255, 255, 0.7); }

/* Sticky sub-nav styling is inherited from scp.css (.c-scp__menu*), reused via
   template-parts/product-nav.php so product pages match the enova365 nav. */

/* ============================================================
   INTRO ("Czym jest…")
   ============================================================ */
.c-section__product-intro {
    padding: 70px 0;
    background-color: #fff;
}
.c-section__product-intro .product-intro__row { align-items: center; }
.c-section__product-intro .section-heading {
    font-size: 36px;
    font-weight: 700;
    color: #000C2D;
    margin: 0 0 15px;
    line-height: 1.3;
}
.c-section__product-intro .heading-divider {
    width: 60px; height: 3px; background-color: #C23035; margin: 0 0 25px;
}
.product-intro__content {
    font-size: 15px;
    line-height: 1.7;
    color: #333;
}
.product-intro__content p { margin-bottom: 15px; }
.product-intro__aside { position: relative; }
.product-intro__img {
    width: auto;
    border-radius: 4px;
    display: block;
    max-height: 70vh;
    margin-left: auto;
}
/* Stats: vertical stack of floating white cards over the image's right edge. */
.product-intro__stats {
    position: absolute;
    top: 50%;
    right: -10px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 18px;
    z-index: 2;
}
.product-intro__stat {
    background: #fff;
    border-radius: 8px;
    padding: 16px 30px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    text-align: left;
    min-width: 210px;
}
.product-intro__stat-value {
    display: block;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
    background: var(--tecza, linear-gradient(91deg, #D00000 0.23%, #FF0F00 8.59%, #FF4F80 16.95%, #FF6200 25.56%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.product-intro__stat-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #000C2D;
    margin-top: 4px;
}
.product-intro__quote {
    background: #000C2D;
    color: #fff;
    padding: 45px 40px;
    border-radius: 2px;
    margin-top: 50px;
    max-width: 760px;
}
.product-intro__quote .quote-text {
    font-style: italic;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 25px;
    color: rgba(255, 255, 255, 0.95);
}
.product-intro__quote .quote-author { display: flex; align-items: center; gap: 15px; }
.product-intro__quote .quote-avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.product-intro__quote .author-name {
    display: block; font-weight: 700; color: #C23035; font-size: 15px;
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px;
}
.product-intro__quote .author-position {
    display: block; font-size: 11px; color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase; letter-spacing: 0.5px;
}

/* ============================================================
   APPLICATIONS (icon cards)
   ============================================================ */
.c-section__product-apps {
    padding: 90px 0;
    background-color: #fafafa;
}
.c-section__product-apps .c-title--underline { text-align: center; margin-bottom: 20px; }
.product-apps__intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px;
    font-size: 15px;
    line-height: 1.7;
    color: #333;
}
.product-apps__card {
    background: #fff;
    padding: 35px 30px;
    height: 100%;
    border-radius: 2px;
    text-align: center;
}
.product-apps__icon { margin-bottom: 20px; }
.product-apps__icon img { width: 48px; height: 48px; object-fit: contain; }
.product-apps__card h3 {
    font-size: 18px; font-weight: 700; color: #000C2D; margin: 0 0 14px; line-height: 1.3;
}
.product-apps__body {
    font-size: 14px; line-height: 1.6; color: #333; text-align: left;
}

/* ============================================================
   INTRO ITEMS (SUPREMIS Agentic — image/heading/text cards)
   Two-column layout: heading + intro text on the left, a 2x2 grid
   of compact icon cards on the right.
   ============================================================ */
.product-intro__layout {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}
.c-section__product-intro .product-intro__head {
    flex: 1 1 50%;
    min-width: 0;
    margin: 0;
}
.c-section__product-intro .product-intro__head .section-heading {
    font-size: 40px;
    line-height: 1.15;
}
.product-intro__items {
    flex: 1 1 50%;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.product-intro__item {
    background: #fff;
    padding: 32px 30px;
    border-radius: 6px;
    text-align: left;
}
.product-intro__item-img {
    margin-bottom: 35px;
    line-height: 0;
}
.product-intro__item-img img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    display: block;
}
.product-intro__item-heading {
    font-size: 18px;
    font-weight: 700;
    color: #000C2D;
    margin: 0 0 10px;
    line-height: 1.3;
}
.product-intro__item-text {
    font-size: 14px;
    line-height: 1.6;
    color: #555;
}

/* ============================================================
   DLA KOGO ("dla kogo projektujemy rozwiązania?")
   ============================================================ */
.c-section__dla-kogo {
    position: relative;
    overflow: hidden;
    padding: 90px 0;
    background-color: #fff;
}
/* Optional decorative background image, top-right (e.g. a gradient blob). */
.dla-kogo__bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 55%;
    max-width: 1000px;
    height: auto;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}
.c-section__dla-kogo .container {
    position: relative;
    z-index: 1;
}

/* Top row: heading block (left) + stat cards (right). */
.dla-kogo__top {
    display: flex;
    gap: 60px;
    align-items: flex-start;
    margin-bottom: 60px;
}
.dla-kogo__head {
    flex: 1 1 50%;
    min-width: 0;
}
.dla-kogo__label {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #C23035;
    margin-bottom: 14px;
}
.c-section__dla-kogo .section-heading {
    font-size: 40px;
    font-weight: 700;
    color: #000C2D;
    margin: 0 0 15px;
    line-height: 1.15;
}
.c-section__dla-kogo .heading-divider {
    width: 60px;
    height: 3px;
    background-color: #C23035;
    margin: 0 0 25px;
}
.dla-kogo__intro {
    font-size: 15px;
    line-height: 1.7;
    color: #333;
    margin: 0;
}

/* Stat cards: sit top-right, value uses the tecza gradient. */
.dla-kogo__grid {
    flex: 1 1 50%;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.dla-kogo__card {
    background: #fff;
    padding: 32px 30px;
    border-radius: 6px;
    text-align: center;
}
.dla-kogo__value {
    display: block;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 14px;
    background: var(--tecza, linear-gradient(91deg, #D00000 0.23%, #FF0F00 8.59%, #FF4F80 16.95%, #FF6200 25.56%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.dla-kogo__desc {
    font-size: 14px;
    line-height: 1.45;
    font-weight: 600;
    color: #000C2D;
}

/* List: two columns, each item marked with an orange bullet dot. */
.dla-kogo__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 70px;
}
.dla-kogo__list-item {
    position: relative;
    padding-left: 22px;
}
.dla-kogo__list-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #FF6200;
}
.dla-kogo__list-heading {
    font-size: 16px;
    font-weight: 700;
    color: #000C2D;
    margin: 0 0 8px;
    line-height: 1.4;
}
.dla-kogo__list-content {
    font-size: 14px;
    line-height: 1.6;
    color: #555;
}
.dla-kogo__list-content p { margin-bottom: 10px; }

/* ============================================================
   FLEX BENEFITS ("Funkcje AI na przykładach…") accordion + media
   ============================================================ */
.c-section__flex-benefits {
    padding: 90px 0;
    background-color: #fafafa;
}
.c-section__flex-benefits .c-title--underline {
    text-align: center;
    margin-bottom: 20px;
}
.flex-benefits__intro {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 50px;
    font-size: 15px;
    line-height: 1.7;
    color: #333;
}
.flex-benefits__grid {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}
.flex-benefits__list {
    flex: 1 1 45%;
    background-color: #fff;
    border-radius: 4px;
    padding: 30px 28px;
}
.flex-benefits__media {
    flex: 1 1 55%;
    position: sticky;
    top: 90px;
}
.flex-accordion-item {
    border-left: 3px solid #e5e5e5;
    padding: 4px 0 4px 20px;
    margin-bottom: 4px;
    transition: border-color 0.3s ease;
}
.flex-accordion-item.active { border-left-color: #C23035; }
.flex-accordion-toggle {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}
.flex-accordion-toggle h3 {
    font-size: 17px;
    font-weight: 700;
    color: #000C2D;
    margin: 0;
    padding: 10px 0;
    line-height: 1.5;
}
.flex-accordion-toggle:hover h3 { color: #C23035; }
.flex-accordion-panel {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #333;
    padding-bottom: 0;
    transition: max-height 0.35s ease, opacity 0.3s ease, padding-bottom 0.35s ease;
}
.flex-accordion-item.active .flex-accordion-panel {
    max-height: 600px;
    opacity: 1;
    padding-bottom: 12px;
}
.flex-accordion-panel p { margin-bottom: 10px; }
.flex-media-panel { display: none; }
.flex-media-panel.active { display: block; }
.flex-media-panel__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

/* ============================================================
   QUOTE SECTION (full-width quote with optional background)
   ============================================================ */
.c-section__quote {
    position: relative;
    overflow: hidden;
    padding: 50px 0;
    background-color: #fff;
}
.c-section__quote .container {
    position: relative;
    z-index: 1;
}
/* Two-column card: quote text left, author right. */
.quote__grid {
    display: flex;
    align-items: center;
    gap: 40px;
    background: #fff;
    border-radius: 6px;
    padding: 40px 45px;
}
.quote__col-text {
    flex: 1 1 56%;
    min-width: 0;
}
.quote__col-author {
    position: relative;
    flex: 1 1 44%;
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 120px;
}
/* Decorative background — scoped to the author column only. */
.quote__bg {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 130%;
    max-width: none;
    height: auto;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}
.quote__text {
    font-size: 18px;
    line-height: 1.7;
    color: #000C2D;
    margin: 0;
    text-align: left;
}
.quote__author {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
}
.quote__avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.quote__author-info {
    text-align: left;
}
.quote__author-name {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #C23035;
    margin-bottom: 4px;
}
.quote__author-position {
    display: block;
    font-size: 13px;
    color: #555;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media only screen and (max-width: 991px) {
    .product-hero .description h1 { font-size: 30px; }
    .c-section__product-intro { padding: 50px 0; }
    .c-section__product-intro .section-heading { font-size: 28px; }
    .c-section__product-apps { padding: 50px 0; }
    .product-intro__aside { margin-top: 35px; }
    /* Stats: drop the over-image float, return to a centered row below the image. */
    .product-intro__stats {
        position: static;
        transform: none;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
        margin-top: 25px;
    }
    .product-intro__stat { min-width: 0; flex: 1 1 28%; text-align: center; }

    .product-intro__layout { flex-direction: column; gap: 35px; }
    .c-section__product-intro .product-intro__head { flex: 1 1 100%; }
    .c-section__product-intro .product-intro__head .section-heading { font-size: 30px; }
    .product-intro__items { flex: 1 1 100%; grid-template-columns: repeat(2, 1fr); width:100%;}
    .c-section__dla-kogo { padding: 50px 0; }
    .c-section__dla-kogo .section-heading { font-size: 30px; }
    .dla-kogo__top { flex-direction: column; gap: 35px; margin-bottom: 45px; }
    .dla-kogo__head { flex: 1 1 100%; }
    .dla-kogo__grid { flex: 1 1 100%; grid-template-columns: repeat(2, 1fr); width:100%; }
    .dla-kogo__bg { width: 80%; opacity: 0.5; }
    .c-section__flex-benefits { padding: 50px 0; }
    .flex-benefits__grid { flex-direction: column; gap: 35px; }
    .flex-benefits__media { position: static; width: 100%; }
    .c-section__quote { padding: 40px 0; }
    .quote__grid { flex-direction: column; align-items: flex-start; gap: 28px; }
    .quote__col-text, .quote__col-author { flex: 1 1 100%; width: 100%; }
    .quote__col-author { min-height: 0; }
    .quote__bg { width: 100%; opacity: 0.6; }
}

@media only screen and (max-width: 767px) {
    .product-hero .description h1 { font-size: 26px; }
    .product-intro__stat { flex: 1 1 45%; }

    .product-intro__items { grid-template-columns: 1fr; }
    .dla-kogo__grid { grid-template-columns: 1fr; gap: 16px; }
    .dla-kogo__card { padding: 24px; }
    .dla-kogo__value { font-size: 28px; }
    .dla-kogo__list { grid-template-columns: 1fr; gap: 24px; }
    .quote__grid { padding: 30px 22px; }
    .quote__text { font-size: 16px; }
}