/*!
 * Home page — side column, banner, article list, faction carousel.
 */

.home-content {
    position: relative;
    overflow: hidden;
}

/* The download artwork is 327px wide and cannot be enlarged without going
   soft, so it sets the measure for the whole column. Everything under it is
   capped to the same width and centred, otherwise the blocks below run wider
   than the button they sit under and the edges do not line up. Change this
   only alongside the artwork. */
.home-content__left > * {
    max-width: 327px;
    margin-left: auto;
    margin-right: auto;
}

.home-content__left .account {
    margin: 0.5rem auto;
}

/* Register and sign in are two w-50 halves, so without this they meet at the
   centre with no seam and read as one wide button. The halves shrink to make
   room rather than the row growing past the column. */
.home-content__left .account > .d-flex {
    gap: 10px;
}

.home-content__left .account-image-button {
    background: transparent;
    border: 0;
    display: block;
    line-height: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
}

.logout-image-form {
    margin: 0;
}

.logout-link-form {
    display: contents;
}

.logout-link-form button {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: inherit;
}

.home-content__left .account-image-button img {
    display: block;
    height: auto;
    width: 100%;
}

.home-content__left .account-image-button__active {
    inset: 0;
    opacity: 0;
    position: absolute;
    transition: opacity 120ms ease;
}

.home-content__left .account-image-button:hover .account-image-button__active,
.home-content__left .account-image-button:focus-visible .account-image-button__active,
.home-content__left .account-image-button:active .account-image-button__active {
    opacity: 1;
}

.home-content__left .account-image-button:focus-visible {
    outline: 2px solid #f3d982;
    outline-offset: 2px;
    z-index: 1;
}

.home-content__left .account__loggedin {
    background-color: #2d233e;
    color: #ccc;
    padding: 1rem;
    border-radius: 0.25rem;
}

.home-content__left .account .btn {
    background: linear-gradient(180deg, #c63921, #b5341e);
    border-radius: 0;
    color: #fff;
    padding: 1rem;
    text-decoration: none;
    border: none;
    font-size: 0.875rem;
}

.home-content__left .account .btn:hover {
    background: linear-gradient(180deg, #dd4c33, #d33d23);
    transition: background-color 0.3s ease-in-out;
}

.home-content__left .game-payment:hover {
    opacity: 0.8;
}

.home-content__left .fanpage {
    background: #fff;
}

.home-content__left .main-feature {
    margin: 1rem auto;
    background: #fafafa;
}

.home-content__left .main-feature__header {
    padding: 1rem;
    background: linear-gradient(270deg, #004881, #00364d);
    color: #fff;
    font-size: 1.25rem;
    margin-bottom: 0;
}

.home-content__left .main-feature li {
    border-right: 1px solid #e9e9e9;
    border-top: 1px solid #e9e9e9;
    width: 50%;
    font-weight: 500;
    text-align: center;
    padding: 1rem 0.5rem;
}

.home-content__left .main-feature li>a {
    color: #343a40;
}

.home-content__left .main-feature li>a:hover {
    color: #d4152f;
    transition: 0.3s ease-out;
}

.home-content .banner img {
    border-radius: 0.25rem 0.25rem 0 0;
}

#bannerCarousel .carousel-inner {
    aspect-ratio: 868 / 350;
}

#bannerCarousel .carousel-item {
    height: 100%;
}

#bannerCarousel .carousel-item img {
    height: 100%;
    object-fit: cover;
    object-position: center top;
    width: 100%;
}

.home-content .banner .carousel-control-prev,
.home-content .banner .carousel-control-next {
    width: 42px;
    opacity: 1;
}

.home-content .banner .custom-carousel-icon {
    width: 16px;
    height: 64px;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.home-content .banner .carousel-control-prev-icon {
    background-image: url('../../img/previous.png');
}

.home-content .banner .carousel-control-next-icon {
    background-image: url('../../img/next.png');
}

.home-content .articles {
    border-radius: 0 0 0.25rem 0.25rem;
    padding: 0.25rem;
    background-color: #fff;
}

/* Tab switching.
   Bootstrap fades the incoming panel over 0.15s linear, which is quick enough
   to read as an instant swap, and it animates nothing else — so a category
   holding a different number of posts makes the panel snap to a new height.
   The panel now eases in with a short rise, and assets/js/site.js drives the
   height between the two so the box grows instead of jumping. */
.home-content .articles .tab-content {
    overflow: hidden;
    transition: height 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.home-content .articles .tab-pane.fade {
    transform: translateY(6px);
    transition: opacity 280ms ease, transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.home-content .articles .tab-pane.fade.show {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .home-content .articles .tab-content,
    .home-content .articles .tab-pane.fade {
        transition: none;
    }

    .home-content .articles .tab-pane.fade {
        transform: none;
    }
}

.home-content .articles .badge {
    min-width: 4.25rem;
}

.home-content .articles nav {
    font-size: 0.75rem;
    position: relative;
}

.home-content .articles nav .btn-view-more {
    position: absolute;
    right: 1rem;
    top: 0.5rem;
    font-size: 0.875rem;
}

.home-content .articles li {
    border-color: #eee;
    border-style: dashed;
    padding-left: 0.5rem;
    align-items: center;
}

.home-content .articles li.hot-post a {
    margin: 0 auto;
    padding: 1rem;
    font-size: 1.25rem;
    text-transform: uppercase;
    font-weight: 600;
}

.home-content .articles li:hover {
    font-weight: 600;
}

.home-content .articles__link {
    max-width: 80%;
    color: #333;
    text-decoration: none;
    font-size: 0.85rem;
}

.home-content .articles__link.hot {
    font-weight: 600;
    color: #c00000;
}

.home-content .articles__link .tag {
    min-width: 3.5rem;
    border: 1px solid;
    padding: 0.1rem 0.3rem !important;
    margin-right: 0.5rem;
    border-radius: 0.125rem;
    font-weight: 400;
    font-size: 0.75rem;
    background-color: transparent !important;
    display: inline-block;
    text-align: center;
}

.home-content .articles__link .tag.tag-announce {
    color: #f39c12 !important;
    border-color: #f39c12 !important;
}

.home-content .articles__link .tag.tag-news {
    color: #7f8c8d !important;
    border-color: #7f8c8d !important;
}

.home-content .articles__link .tag.tag-event {
    color: #3498db !important;
    border-color: #3498db !important;
}

.home-content .articles .published-time {
    color: #555;
    font-size: 0.85rem;
}

.home-content .articles .nav-tabs {
    border-bottom: 1px solid #eaeaec;
}

.home-content .articles .nav-tabs .nav-item {
    background-color: transparent;
    color: #000;
    border: none;
    font-weight: 500;
    position: relative;
    padding-bottom: 8px;
    margin-bottom: -1px;
}

.home-content .articles .nav-tabs .nav-item.active {
    color: #c00000;
    border-bottom: 2px solid #c00000;
}

.home-content .articles .nav-tabs .nav-item.active::after {
    content: "◆";
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: #c00000;
    background: #fff;
    padding: 0 2px;
    line-height: 1;
}

.home-content .factions .carousel-indicators {
    position: relative;
    margin: 0;
}

.home-content .factions .carousel-indicators li {
    flex: 0 0 20%;
    max-width: 20%;
    width: auto;
    height: auto;
    background: 0 0;
    text-indent: unset;
    margin: 0;
    padding: 0;
    color: #000;
    opacity: 0.9;
    border-bottom: 1px solid #eaeaec;
}

.home-content .factions .carousel-indicators li.active {
    color: #d4152f;
    font-weight: 500;
    opacity: 1;
}

.home-content .factions .carousel-indicators li.active div {
    font-weight: 500;
}

.home-content .factions .carousel-indicators li.active:after {
    background-color: #d4152f;
    width: 56px;
    height: 3px;
    left: 15%;
    bottom: -2px;
    position: absolute;
    content: "";
}

.home-content .factions .carousel-indicators li div {
    font-size: 0.75rem;
    text-align: center;
    padding: 1rem 0.5rem;
}

.home-content .factions .faction-name {
    position: absolute;
    background: url(../../name-bg.html);
}

.home-content .factions__desc {
    background-size: 20%;
    padding: 1rem;
    min-height: 200px;
}

.home-content .factions__desc .faction-title {
    font-weight: 500;
    font-size: 1.25rem;
    color: #333;
}

.home-content .factions__desc .faction-summary {
    font-size: 0.75rem;
}