/* SomGeek homepage hero side cards */

/*
 * Hlavná titulná karta zobrazuje celý náhľadový obrázok.
 * Tmavé pozadie vyplní prípadné úzke okraje bez deformácie fotografie.
 */
.sg-home .sg-hero-main.sg-media-card {
    background-color: #050709;
    background-image: var(
        --sg-card-image,
        radial-gradient(circle at 25% 20%, #243342, #0d1218 52%, #050709)
    );
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.sg-home .sg-hero-main .sg-media-card__overlay {
    background:
        linear-gradient(90deg, rgba(2, 4, 6, 0.14) 0%, rgba(2, 4, 6, 0.02) 66%),
        linear-gradient(180deg, rgba(2, 4, 6, 0) 42%, rgba(2, 4, 6, 0.3) 65%, rgba(2, 4, 6, 0.88) 100%);
}

.sg-home .sg-hero-main:hover {
    background-size: contain;
}

/* Dve väčšie bočné karty vyplnia celú výšku hlavnej titulnej sekcie. */
.sg-home .sg-hero-side {
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

/*
 * Pozdĺžne karty napravo používajú priamo náhľadový obrázok bez
 * dodatočného tmavého filtra vloženého do background-image.
 */
.sg-home .sg-side-card.sg-media-card {
    min-height: 243px;
    container-type: inline-size;
    background-color: #050709;
    background-image: var(
        --sg-card-image,
        radial-gradient(circle at 25% 20%, #243342, #0d1218 52%, #050709)
    );
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.sg-home .sg-side-card .sg-media-card__overlay {
    background:
        linear-gradient(90deg, rgba(2, 4, 6, 0.18) 0%, rgba(2, 4, 6, 0.04) 72%),
        linear-gradient(180deg, rgba(2, 4, 6, 0) 34%, rgba(2, 4, 6, 0.18) 58%, rgba(2, 4, 6, 0.78) 100%);
}

.sg-side-card .sg-media-card__content {
    padding: clamp(16px, 2.1vw, 24px) clamp(18px, 2.2vw, 26px);
}

.sg-side-card .sg-kicker {
    min-height: 27px;
    padding: 4px 10px;
    font-size: 0.72rem;
}

.sg-side-card h2 {
    max-width: 88%;
    margin: 9px 0 0;
    color: #f1f3f5 !important;
    font-size: clamp(1rem, 1.35vw, 1.38rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 7px rgba(0, 0, 0, 0.96);
    text-wrap: balance;
}

.sg-side-card h2 a,
.sg-side-card h2 a:visited,
.sg-side-card h2 a:hover,
.sg-side-card h2 a:focus {
    color: #f1f3f5 !important;
    opacity: 1 !important;
    text-decoration: none;
}

@supports (font-size: 1cqi) {
    .sg-side-card h2 {
        font-size: clamp(1rem, 3.1cqi, 1.38rem);
    }
}

@media (max-width: 1180px) {
    .sg-side-card h2 {
        max-width: 92%;
        font-size: clamp(0.96rem, 1.45vw, 1.2rem);
    }
}

@media (max-width: 1024px) {
    .sg-home .sg-hero-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
    }

    .sg-home .sg-side-card.sg-media-card {
        min-height: 230px;
    }
}

@media (max-width: 820px) {
    .sg-side-card .sg-media-card__content {
        padding: 16px 18px;
    }

    .sg-side-card h2 {
        max-width: 94%;
        font-size: clamp(0.9rem, 2.8vw, 1.08rem);
        line-height: 1.06;
    }
}

@media (max-width: 760px) {
    .sg-home .sg-hero-side {
        grid-template-columns: 1fr;
    }

    .sg-home .sg-side-card.sg-media-card {
        min-height: 195px;
    }
}

/* Darker lower homepage content for reduced glare */
.sg-home .sg-content-layout {
    color: #aab0b7;
}

.sg-home .sg-content-layout .sg-section-heading h2,
.sg-home .sg-content-layout .sg-sidebar-box > h2,
.sg-home .sg-content-layout .sg-category-column > h2 {
    color: #c5c9ce !important;
}

.sg-home .sg-story-card h3,
.sg-home .sg-story-card h3 a,
.sg-home .sg-video-card h3,
.sg-home .sg-video-card h3 a,
.sg-home .sg-mini-story h3,
.sg-home .sg-mini-story h3 a,
.sg-home .sg-category-column p,
.sg-home .sg-ranking li,
.sg-home .sg-ranking li a,
.sg-home .sg-popular-list h3,
.sg-home .sg-popular-list h3 a,
.sg-home .sg-sidebar-box p,
.sg-home .sg-release-box li span,
.sg-home .sg-more-link,
.sg-home .sg-category-column__more {
    color: #b7bcc2 !important;
    opacity: 1 !important;
}

.sg-home .sg-meta,
.sg-home .sg-meta span,
.sg-home .sg-meta time,
.sg-home .sg-meta a,
.sg-home .sg-popular-list time,
.sg-home .sg-release-box time {
    color: #858d96 !important;
    opacity: 1 !important;
}

.sg-home .sg-content-layout button,
.sg-home .sg-content-layout .button,
.sg-home .sg-content-layout input[type="button"],
.sg-home .sg-content-layout input[type="submit"] {
    color: #aeb4bb !important;
}

.sg-home .sg-story-card h3 a:visited,
.sg-home .sg-video-card h3 a:visited,
.sg-home .sg-mini-story h3 a:visited,
.sg-home .sg-ranking li a:visited,
.sg-home .sg-popular-list h3 a:visited {
    color: #b7bcc2 !important;
}

.sg-home .sg-story-card h3 a:hover,
.sg-home .sg-video-card h3 a:hover,
.sg-home .sg-mini-story h3 a:hover,
.sg-home .sg-ranking li a:hover,
.sg-home .sg-popular-list h3 a:hover,
.sg-home .sg-more-link:hover,
.sg-home .sg-category-column__more:hover {
    color: var(--sg-gold-bright) !important;
}

/* Limit titles in the narrow category columns to three lines */
.sg-home .sg-category-column .sg-mini-story h3,
.sg-home .sg-category-column .sg-mini-story h3 a {
    min-width: 0;
}

.sg-home .sg-category-column .sg-mini-story h3 a {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    max-height: calc(1.25em * 3);
    line-height: 1.25;
    overflow-wrap: anywhere;
    text-overflow: ellipsis;
}

/* Board games category background */
.sg-home .sg-category-columns > .sg-category-column:nth-child(6) {
    overflow: hidden;
    background-color: #090c10;
    background-image:
        linear-gradient(180deg, rgba(5, 8, 11, 0.72), rgba(5, 8, 11, 0.88)),
        url("../images/categories/spolocenske-hry-bg.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border: 1px solid rgba(214, 168, 49, 0.28);
    box-shadow: inset 0 0 44px rgba(0, 0, 0, 0.62);
}

.sg-home .sg-category-columns > .sg-category-column:nth-child(6) > h2 {
    color: #d8dadd !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);
}

.sg-home .sg-category-columns > .sg-category-column:nth-child(6) .sg-mini-story {
    border-bottom-color: rgba(255, 255, 255, 0.11);
}

.sg-home .sg-category-columns > .sg-category-column:nth-child(6) .sg-mini-story h3 a,
.sg-home .sg-category-columns > .sg-category-column:nth-child(6) .sg-category-column__more {
    color: #c4c8cd !important;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.95);
}