/* ==========================================================================
   Feramat – karty aktualit / referencí a horizontální carousely
   Nahrazuje starší pravidla v pex.css (pevné rozměry 300x200 / 655x435,
   fixní výška .child 359px), kvůli kterým se obrázky vůbec nevykreslovaly
   a karty měly rozhozené proporce.

   Obrázky mají jednotný poměr stran a object-fit: cover, takže se nikdy
   nedeformují ani nepřetékají z karty.
   Barvy a písmo vychází z brand manuálu skupiny C-energy.
   ========================================================================== */

/* ------------------------------------------------------------------ karta */

#aktuality .news-item,
#portfolio .news-item,
#news-section-all .news-item {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin: 0;
    background: #fff;
    border: 1px solid rgba(27, 50, 128, .08);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(6, 10, 26, .07);
    transition: transform .22s ease, box-shadow .22s ease;
}

#aktuality .news-item:hover,
#portfolio .news-item:hover,
#news-section-all .news-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(6, 10, 26, .16);
}

/* ---------------------------------------------------------------- obrázek */

#aktuality .news-item .image,
#portfolio .news-item .image,
#news-section-all .news-item .image {
    position: relative;
    flex: 0 0 auto;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--fe-blue-10, #ebefff);
    box-shadow: none !important;
    border-radius: 0 !important;
}

#aktuality .news-item .image a,
#portfolio .news-item .image a,
#news-section-all .news-item .image a {
    display: block !important;
    width: 100%;
    height: 100%;
    line-height: 0;
}

/* display:block je nutný – odkaz kolem obrázku byl inline a obrázek se
   kvůli tomu vůbec nevykreslil */
#aktuality .news-item .image img,
#portfolio .news-item .image img,
#news-section-all .news-item .image img,
#news-section-all .news-item .image a img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    object-position: center;
    border-radius: 0 !important;
    transition: transform .45s ease;
}

#aktuality .news-item:hover .image img,
#portfolio .news-item:hover .image img,
#news-section-all .news-item:hover .image img {
    transform: scale(1.05);
}

/* ------------------------------------------------------------------ obsah */

#aktuality .news-item .content,
#portfolio .news-item .content,
#news-section-all .news-item .content,
#news-section-all .news-item .contenta {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 10px;
    padding: 18px 18px 20px !important;
    background: #fff;
}

#aktuality .news-item .content .title,
#portfolio .news-item .content .title,
#news-section-all .news-item .content .title,
#news-section-all .news-item .contenta .titlea {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 !important;
    font-family: "Barlow", Calibri, Helvetica, sans-serif;
    font-size: 1.0625rem !important;
    font-weight: 700 !important;
    line-height: 1.34 !important;
    color: var(--fe-blue-90, #0b1432) !important;
    text-decoration: none;
    transition: color .18s ease;
}

#aktuality .news-item .content .title:hover,
#portfolio .news-item .content .title:hover,
#news-section-all .news-item .contenta .titlea:hover {
    color: var(--fe-blue-60, #1b3280) !important;
    text-decoration: none;
}

#aktuality .news-item .content .date,
#portfolio .news-item .content .date,
#news-section-all .news-item .contenta .datea {
    margin: auto 0 0 !important;
    padding-top: 4px;
    font-family: "Barlow", Calibri, Helvetica, sans-serif;
    font-size: .75rem !important;
    font-weight: 400;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fe-green-70, #5b9529) !important;
}

/* -------------------------------------------------------------- carousel */

#aktuality .cover,
#portfolio .cover {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    /* v postranním odsazení sedí navigační šipky */
    padding-left: 7.88%;
    padding-right: 7.88%;
}

.scroll-images,
.scroll-imagesr {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: 22px;
    width: 100%;
    padding: 26px 4px 30px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.scroll-images::-webkit-scrollbar,
.scroll-imagesr::-webkit-scrollbar {
    display: none;
    width: 0 !important;
    height: 0 !important;
}

/* Přebíjí pevnou výšku 359 px a vlastní stín z pex.css – stín i pozadí
   nese samotná karta uvnitř. */
.scroll-images > .child,
.scroll-imagesr > .child {
    display: block !important;
    flex: 0 0 302px !important;
    width: 302px !important;
    min-width: 302px !important;
    max-width: 302px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    scroll-snap-align: start;
    transform: none !important;
}

.scroll-images > .child:hover,
.scroll-imagesr > .child:hover {
    transform: none !important;
    box-shadow: none !important;
}

@media (max-width: 560px) {
    .scroll-images > .child,
    .scroll-imagesr > .child {
        flex-basis: 84vw !important;
        width: 84vw !important;
        min-width: 84vw !important;
        max-width: 84vw !important;
    }
}

/* ------------------------------------------------------------ šipky */

/* Šipky zůstávají absolutně pozicované (jako v pex.css), ale zmenšené
   ze 140 px na kroužek, který se vejde do postranního odsazení a
   nepřekrývá karty. */
#aktuality .cover > button,
#portfolio .cover > button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(27, 50, 128, .22);
    border-radius: 50%;
    background: #fff;
    color: var(--fe-blue-60, #1b3280);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(6, 10, 26, .08);
    transition: background-color .18s ease, color .18s ease,
                border-color .18s ease, opacity .18s ease;
}

#aktuality .cover > button.left,
#aktuality .cover > button.leftr,
#portfolio .cover > button.left,
#portfolio .cover > button.leftr {
    left: 18px;
    right: auto;
}

#aktuality .cover > button.right,
#aktuality .cover > button.rightr,
#portfolio .cover > button.right,
#portfolio .cover > button.rightr {
    right: 18px;
    left: auto;
}

#aktuality .cover > button:hover:not([disabled]),
#portfolio .cover > button:hover:not([disabled]) {
    background: var(--fe-green-60, #72bd44);
    border-color: var(--fe-green-60, #72bd44);
    color: #fff;
}

#aktuality .cover > button:focus-visible,
#portfolio .cover > button:focus-visible {
    outline: 3px solid var(--fe-green-60, #72bd44);
    outline-offset: 2px;
}

#aktuality .cover > button[disabled],
#portfolio .cover > button[disabled] {
    opacity: .3;
    cursor: default;
}

@media (max-width: 760px) {
    #aktuality .cover > button,
    #portfolio .cover > button { display: none !important; }
    #aktuality .cover,
    #portfolio .cover {
        padding-left: 18px;
        padding-right: 18px;
    }
}

/* ------------------------------------------- výpis aktualit (/aktuality/) */

#news-section-all .container-fluida {
    max-width: 1320px;
    margin: 0 auto;
    padding: 56px 24px 72px;
}

#news-section-all .row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin: 0 !important;
}

#news-section-all .row > [class*="col-"] {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
}

@media (max-width: 992px) {
    #news-section-all .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    #news-section-all .row { grid-template-columns: 1fr; }
    #news-section-all .container-fluida { padding: 36px 18px 48px; }
}