/*!
 Theme Name:   Vertice Child (CCO)
 Theme URI:    https://cco.expert
 Description:  Child theme dla Vertice. Utworzony żeby chronić customizacje przed nadpisaniem przy update parent theme (Vertice). Wszystkie zmiany customowe — CSS, hooki PHP, override template — wpisuj TUTAJ, nie w parent.
 Author:       CCO infra
 Author URI:   https://cco.expert
 Template:     vertice
 Version:      1.0.3
 License:      GNU General Public License v3
 License URI:  http://www.opensource.org/licenses/gpl-license.php
 Text Domain:  vertice-child
*/

/* Custom CSS goes here. */

/* === PUBLICATIONS PREVIEW — wzorzec 1.png (Viverno) ===
 * Górna połowa kafelka: tło-obrazek + mocna nakładka navy/violet, białe logo CCO + tytuł.
 * Dolna połowa: białe tło, excerpt zakończony "…", autor pod spodem.
 * Wszystkie kafelki tej samej wysokości (clamp na tytuł + excerpt + grid stretch).
 */
.cco-pubs-preview {
    padding: 25px 24px 100px;
    background: #fff;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    color: rgb(35, 32, 57);
}
.cco-pubs-preview__inner { max-width: 1200px; margin: 0 auto; }
/* === KARUZELA === */
.cco-pubs-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
}
.cco-pubs-carousel__viewport {
    overflow: hidden;
    flex: 1 1 auto;
    min-width: 0;
    /* padding góra/dół — overflow:hidden ścinałby cień kart na hover (transform -4px + box-shadow ~44px) */
    padding: 16px 4px 48px;
}
.cco-pubs-carousel__track {
    display: flex;
    gap: 32px;
    align-items: stretch;   /* wszystkie karty równej wysokości = najwyższa karta */
    will-change: transform;
}
/* karta: 3 widoczne na desktop */
.cco-pubs-carousel__track .cco-pub-card {
    flex: 0 0 calc((100% - 2 * 32px) / 3);
    box-sizing: border-box;
}
@media (max-width: 900px) {
    .cco-pubs-carousel__track { gap: 24px; }
    .cco-pubs-carousel__track .cco-pub-card { flex-basis: calc((100% - 24px) / 2); }
}
@media (max-width: 600px) {
    .cco-pubs-carousel__track .cco-pub-card { flex-basis: 100%; }
}
.cco-pubs-carousel__arrow {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 0;
    background: rgb(35, 32, 57);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .2s ease, transform .2s ease, opacity .2s ease;
    box-shadow: 0 4px 14px rgba(35, 32, 57, 0.22);
}
.cco-pubs-carousel__arrow:hover { background: rgb(87, 79, 141); transform: scale(1.08); }
.cco-pubs-carousel__arrow:active { transform: scale(0.96); }
@media (max-width: 600px) {
    .cco-pubs-carousel__arrow { width: 40px; height: 40px; }
    .cco-pubs-carousel { gap: 8px; }
}

.cco-pub-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(35, 32, 57, 0.06);
    transition: transform .25s ease, box-shadow .25s ease;
    /* BEZ height:100% — to liczyłoby się jako 100% (nie auto) i WYŁĄCZAŁO align-items:stretch,
     * przez co karta z krótszą treścią (np. EUDR) była niższa. Auto-wysokość + stretch = równo. */
}
.cco-pub-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(35, 32, 57, 0.14);
    color: inherit;
}

/* === BANNER (górna połowa) === */
.cco-pub-card__banner {
    position: relative;
    aspect-ratio: 4/3;
    background-size: cover;
    background-position: center;
    background-color: rgb(35, 32, 57);
    overflow: hidden;
    isolation: isolate;
}
/* Nakładka navy "top banner" — opaque na górze (czytelny tytuł + logo),
 * fade do przezroczystości na dole tak żeby zdjęcie wybijało się spod spodu.
 * Kolor identyczny z tłem sekcji publikacji (navy #232039). */
.cco-pub-card__banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(35, 32, 57, 0.96) 0%,
        rgba(35, 32, 57, 0.92) 40%,
        rgba(35, 32, 57, 0.55) 70%,
        rgba(35, 32, 57, 0.18) 100%
    );
    z-index: 1;
}
/* is-fallback (brak thumbnail) — pełny navy bez prześwitu */
.cco-pub-card__banner.is-fallback { background-color: rgb(35, 32, 57); }
.cco-pub-card__banner.is-fallback::before {
    background: rgba(35, 32, 57, 1);
}
.cco-pub-card__banner-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;   /* nie rozciągaj dzieci na 100% szerokości */
    gap: 12px;
    color: #fff;
    box-sizing: border-box;
    min-height: 0;
    overflow: hidden;
}
.cco-pub-card__banner-logo {
    height: 27px;             /* -10% z 30px */
    width: auto;              /* proporcjonalna szerokość — wymaga align-items:flex-start na parencie */
    max-width: 100%;
    flex: 0 0 auto;
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.22));
}
.cco-pub-card__banner-title {
    font-size: 1.02em;
    font-weight: 200;         /* max weight 200 (Lato Light) */
    line-height: 1.3;
    color: #fff;
    margin: 0;
    letter-spacing: 0.005em;
    max-width: 100%;
    flex: 0 1 auto;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* twarda granica wysokości jako fallback dla przeglądarek bez line-clamp */
    max-height: calc(3 * 1.3em);
    text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

/* === BODY (dolna połowa, białe tło) === */
.cco-pub-card__body {
    padding: 22px 24px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 18px;
}
.cco-pub-card__desc {
    font-size: 0.92em;
    line-height: 1.55;
    color: rgba(35, 32, 57, 0.78);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cco-pub-card__author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(35, 32, 57, 0.08);
}
.cco-pub-card__author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgb(35, 32, 57) 0%, rgb(150, 147, 165) 100%);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}
.cco-pub-card__author-info { display: flex; flex-direction: column; line-height: 1.2; }
.cco-pub-card__author-name { font-size: 0.86em; font-weight: 700; color: rgb(35, 32, 57); }
.cco-pub-card__author-role { font-size: 0.78em; color: rgba(35, 32, 57, 0.6); margin-top: 2px; }


/* === NEWSLETTER — tytuł podniesiony o 10px ===
 * Blok Kubio #newsletter ma tło-gradient mocno ścięty; transform przesuwa
 * sam nagłówek wizualnie bez wpływu na flow opisu/formularza pod nim. */
#newsletter h3 { transform: translateY(-10px); }

/* === SZKOLENIA — cały moduł podniesiony o 105px === */
#szkolenia { margin-top: -105px !important; }

/* === AUTO LINKI WEWNĘTRZNE (cco-internal-links.php) ===
 * Kontekstowe linki publikacja/szkolenie → usługa. Widoczne (nie ukryte),
 * dyskretne: kolor marki + cienkie podkreślenie z odstępem. */
.cco-ilink {
    color: rgb(87, 79, 141);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color .2s ease;
}
.cco-ilink:hover { color: rgb(35, 32, 57); }

/* === Blok „Powiązane usługi" (fallback, przed stopką) === */
.cco-related {
    background: #fff;
    padding: 32px 24px 48px;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
}
.cco-related__inner { max-width: 1200px; margin: 0 auto; }
.cco-related__title {
    font-size: 1.4em;
    font-weight: 300;
    color: rgb(35, 32, 57);
    margin: 0 0 16px;
}
.cco-related__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
}
.cco-related__link {
    display: inline-block;
    padding: 10px 18px;
    border: 1px solid rgba(87, 79, 141, 0.35);
    border-radius: 300px;
    color: rgb(87, 79, 141);
    text-decoration: none;
    font-size: 0.92em;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.cco-related__link:hover {
    background: rgb(35, 32, 57);
    border-color: rgb(35, 32, 57);
    color: #fff;
}