/** Legacy homepage information hierarchy using OJS-provided data only. */

.page_index_journal.sukan_homepage {
    inline-size: 100%;
}

.sukan_homepage_media {
    display: flex;
    align-items: stretch;
    gap: 1.25rem;
    min-block-size: 15rem;
    margin-block-end: 1.75rem;
}

.sukan_homepage_cover {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 18rem;
    min-block-size: 15rem;
    padding: 1.5rem;
    background: var(--sukan-color-surface);
    border: 1px solid var(--sukan-color-border-subtle);
    border-radius: 0.5rem;
    box-shadow: var(--sukan-shadow-card);
}

.sukan_homepage_cover img {
    display: block;
    inline-size: auto;
    max-inline-size: 100%;
    block-size: auto;
    max-block-size: 13rem;
}

.sukan_homepage_media .banner-area {
    flex: 1;
    min-inline-size: 0;
    min-block-size: 15rem;
    background-color: var(--sukan-color-brand-surface);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0.5rem;
    box-shadow: var(--sukan-shadow-card);
    text-decoration: none;
    transition: box-shadow var(--sukan-duration-standard) ease, transform var(--sukan-duration-standard) ease;
}

.sukan_homepage_media .banner-area:hover,
.sukan_homepage_media .banner-area:focus-visible {
    box-shadow: var(--sukan-shadow-card-hover);
    transform: scale(1.01);
}

.sukan_role_entries {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.875rem;
    margin-block-end: 1.75rem;
}

.sukan_role_entry {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-block-size: 6.5rem;
    padding: 1rem;
    color: #fff;
    background: var(--sukan-color-interactive);
    border: 1px solid var(--sukan-color-interactive);
    border-radius: 0.375rem;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--sukan-duration-standard) ease, border-color var(--sukan-duration-standard) ease;
}

.sukan_role_entry:hover,
.sukan_role_entry:focus {
    color: #fff;
    background: var(--sukan-color-interactive-hover);
    border-color: var(--sukan-color-interactive-hover);
    text-decoration: none;
}

.pkp_structure_main .sukan_role_entry strong {
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
}

.sukan_role_entry span {
    margin-block-start: 0.35rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.8125rem;
}

.sukan_homepage_grid {
    display: grid;
    grid-template-columns: minmax(0, 2.6fr) minmax(17rem, 1fr);
    align-items: start;
    gap: 2rem;
}

.sukan_section_title {
    margin: 0 0 1.5rem;
    padding-inline-start: 1rem;
    border-inline-start: 0.35rem solid var(--sukan-color-interactive);
    font-size: 1.5rem;
    line-height: 1.5;
}

.sukan_section_title span {
    font-weight: inherit;
}

.sukan_home_article {
    margin-block-end: 1rem;
    padding: 1.5rem;
    background: var(--sukan-color-surface);
    border: 1px solid var(--sukan-color-border-subtle);
    border-radius: 0.5rem;
    box-shadow: var(--sukan-shadow-card);
}

.sukan_home_article__meta {
    color: var(--sukan-color-text-muted);
    font-size: 0.8125rem;
}

.sukan_home_article__meta a {
    color: inherit;
    text-decoration: none;
}

.sukan_home_article h3 {
    margin: 0.7rem 0 0;
    font-size: 1.1875rem;
}

.sukan_home_article h3 a {
    color: var(--sukan-color-brand-surface);
    text-decoration: none;
}

.sukan_home_article h3 a:hover,
.sukan_home_article h3 a:focus {
    color: var(--sukan-color-interactive);
}

.sukan_home_article__authors,
.sukan_home_article__abstract {
    color: var(--sukan-color-text-muted);
}

.sukan_home_article__authors {
    margin-block-start: 0.5rem;
    font-size: 0.875rem;
}

.sukan_home_article__abstract {
    margin: 0.75rem 0 0;
    line-height: 1.75;
}

.sukan_home_article__details,
.sukan_homepage_more {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    margin-block-start: 0.5rem;
    color: var(--sukan-color-interactive);
    font-weight: 700;
    text-decoration: none;
}

.sukan_home_widget,
.sukan_homepage_sidebar .cmp_announcements {
    margin-block-end: 1.5rem;
    padding: 1.5rem;
    background: var(--sukan-color-surface);
    border: 1px solid var(--sukan-color-border-subtle);
    border-radius: 0.5rem;
    box-shadow: var(--sukan-shadow-card);
}

.sukan_home_widget h2,
.sukan_homepage_sidebar .cmp_announcements > h2 {
    margin: 0 0 0.75rem;
    padding-block-end: 0.75rem;
    border-block-end: 2px solid var(--sukan-color-interactive);
    font-size: 1.125rem;
}

.sukan_home_widget dl,
.sukan_home_widget dd {
    margin: 0;
}

.sukan_home_widget dl > div {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 0.75rem;
    padding-block: 0.75rem;
    border-block-end: 1px solid var(--sukan-color-border-subtle);
}

.sukan_home_widget dl > div:last-child {
    border-block-end: 0;
}

.sukan_home_widget dt {
    color: var(--sukan-color-brand-surface);
    font-weight: 700;
}

.sukan_home_widget dd {
    min-inline-size: 0;
    color: var(--sukan-color-text-muted);
    overflow-wrap: anywhere;
}

.sukan_homepage .additional_content {
    margin-block-start: 2rem;
    padding: 1.5rem;
    background: var(--sukan-color-surface);
    border: 1px solid var(--sukan-color-border-subtle);
    border-radius: 0.5rem;
}

@media (max-width: 62rem) {
    .sukan_role_entries {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sukan_homepage_grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sukan_homepage_sidebar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
}

@media (max-width: 36rem) {
    .sukan_homepage_media {
        flex-direction: column;
    }

    .sukan_homepage_cover {
        inline-size: 100%;
        min-block-size: 13rem;
    }

    .sukan_homepage_media .banner-area {
        flex: none;
        inline-size: 100%;
        min-block-size: 10rem;
    }

    .sukan_role_entries,
    .sukan_homepage_sidebar {
        grid-template-columns: minmax(0, 1fr);
    }

    .sukan_role_entry {
        min-block-size: 5.75rem;
    }

    .sukan_home_article,
    .sukan_home_widget,
    .sukan_homepage_sidebar .cmp_announcements {
        padding: 1rem;
    }

    .sukan_section_title {
        font-size: 1.25rem;
    }
}