/*
 * ArsLudi landing — Catalogo giochi
 * ----------------------------------
 * All visual rules specific to _LandingGameCatalog.cshtml live here.
 */

.landing-catalog-section {
    background-color: #fffdf8;
}

.landing-catalog-viewport,
.landing-catalog-slide-frame {
    background-color: #fbf7ee;
}

.landing-catalog-detail-image {
    max-height: calc(100% - 8px);
    filter: drop-shadow(0 18px 20px rgba(15, 23, 42, 0.14));
}

.landing-catalog-tancas-image {
    filter: drop-shadow(0 22px 22px rgba(15, 23, 42, 0.18));
}


.landing-catalog-bgg-source {
    margin-top: 1.35rem;
    display: grid;
    min-height: 3.65rem;
    max-width: 34rem;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.9rem;
    border: 1px solid #ded6c6;
    border-radius: 0.9rem;
    background: rgba(251, 249, 242, 0.86);
    padding: 0.8rem 0.9rem;
    text-decoration: none;
    transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.landing-catalog-bgg-source:hover {
    border-color: rgba(201, 162, 39, 0.56);
    background: #fffdf8;
    transform: translateY(-1px);
}

.landing-catalog-bgg-source:focus-visible {
    outline: 3px solid rgba(201, 162, 39, 0.45);
    outline-offset: 2px;
}

.landing-catalog-bgg-logo {
    display: block;
    width: 6.9rem;
    height: auto;
}

.landing-catalog-bgg-copy {
    font-size: 0.72rem;
    font-weight: 550;
    line-height: 1.25rem;
    color: #64748b;
}

.landing-catalog-paths {
    margin-top: 1.8rem;
    border-top: 1px solid #ded6c6;
}

.landing-catalog-path {
    display: grid;
    grid-template-columns: 2.2rem minmax(0, 1fr);
    gap: 0.85rem;
    border-bottom: 1px solid #ded6c6;
    padding: 1.05rem 0;
}

.landing-catalog-path-index {
    display: inline-flex;
    height: 1.85rem;
    width: 1.85rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(15, 118, 110, 0.24);
    border-radius: 9999px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #0f766e;
    background: #fffdf8;
}

.landing-catalog-path h3 {
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.2rem;
    letter-spacing: 0.015em;
    color: #042f2e;
}

.landing-catalog-path p {
    margin-top: 0.25rem;
    max-width: 32rem;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.35rem;
    color: #64748b;
}

.landing-catalog-create-modes {
    margin-top: 0.72rem;
    display: grid;
    gap: 0.18rem;
}

.landing-catalog-create-modes span {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 0.64rem;
    font-weight: 500;
    line-height: 1.15rem;
    letter-spacing: 0.055em;
    color: #64748b;
}

.landing-catalog-create-modes span:first-child {
    color: #9a3412;
}

.landing-catalog-icon-dice {
    -webkit-mask: url("/icons/fontawesome/free/solid/dice.svg") center / contain no-repeat;
    mask: url("/icons/fontawesome/free/solid/dice.svg") center / contain no-repeat;
}

.landing-catalog-icon-check {
    -webkit-mask: url("/icons/fontawesome/free/solid/circle-check.svg") center / contain no-repeat;
    mask: url("/icons/fontawesome/free/solid/circle-check.svg") center / contain no-repeat;
}

.landing-catalog-icon-plus {
    -webkit-mask: url("/icons/fontawesome/free/solid/circle-plus.svg") center / contain no-repeat;
    mask: url("/icons/fontawesome/free/solid/circle-plus.svg") center / contain no-repeat;
}



.landing-catalog-icon-search {
    -webkit-mask: url("/icons/fontawesome/free/solid/magnifying-glass.svg") center / contain no-repeat;
    mask: url("/icons/fontawesome/free/solid/magnifying-glass.svg") center / contain no-repeat;
}

.landing-catalog-icon-chevron-left {
    -webkit-mask: url("/icons/fontawesome/free/solid/chevron-left.svg") center / contain no-repeat;
    mask: url("/icons/fontawesome/free/solid/chevron-left.svg") center / contain no-repeat;
}

.landing-catalog-icon-chevron-right {
    -webkit-mask: url("/icons/fontawesome/free/solid/chevron-right.svg") center / contain no-repeat;
    mask: url("/icons/fontawesome/free/solid/chevron-right.svg") center / contain no-repeat;
}

.landing-catalog-icon-pause {
    -webkit-mask: url("/icons/fontawesome/free/solid/pause.svg") center / contain no-repeat;
    mask: url("/icons/fontawesome/free/solid/pause.svg") center / contain no-repeat;
}

.landing-catalog-icon-play {
    -webkit-mask: url("/icons/fontawesome/free/solid/play.svg") center / contain no-repeat;
    mask: url("/icons/fontawesome/free/solid/play.svg") center / contain no-repeat;
}

.landing-catalog-icon-xmark {
    -webkit-mask: url("/icons/fontawesome/free/solid/xmark.svg") center / contain no-repeat;
    mask: url("/icons/fontawesome/free/solid/xmark.svg") center / contain no-repeat;
}

/* Side controls stay invisible until the screenshot is intentionally explored. */
[data-catalog-carousel-prev],
[data-catalog-carousel-next] {
    opacity: 0;
    pointer-events: none;
}

[data-catalog-carousel-viewport]:hover [data-catalog-carousel-prev],
[data-catalog-carousel-viewport]:hover [data-catalog-carousel-next],
[data-catalog-carousel-viewport]:focus-within [data-catalog-carousel-prev],
[data-catalog-carousel-viewport]:focus-within [data-catalog-carousel-next] {
    opacity: 1;
    pointer-events: auto;
}

dialog[data-catalog-lightbox]::backdrop {
    background: transparent;
}

@media (hover: none) {
    [data-catalog-carousel-prev],
    [data-catalog-carousel-next] {
        display: none;
    }
}

/*
 * Mobile/tablet flow:
 * intro -> signature -> real carousel -> catalog details.
 */
@media (max-width: 1023px) {
    .landing-catalog-shell {
        padding-top: 3.25rem;
        padding-bottom: 3.25rem;
    }

    .landing-catalog-layout {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .landing-catalog-copy {
        display: contents;
    }

    .landing-catalog-eyebrow {
        order: 1;
    }

    .landing-catalog-title {
        order: 2;
        margin-top: 0.85rem;
    }

    .landing-catalog-intro {
        order: 3;
        margin-top: 1rem;
    }

    .landing-catalog-bgg-source {
        order: 4;
        margin-top: 1.15rem;
    }

    .landing-catalog-signature {
        order: 5;
        margin-top: 1.15rem;
    }

    .landing-catalog-media {
        order: 6;
        margin-top: 1.5rem;
    }

    .landing-catalog-details {
        order: 7;
        margin-top: 1.5rem;
    }
}

@media (max-width: 639px) {
    .landing-catalog-bgg-source {
        grid-template-columns: 1fr;
        gap: 0.55rem;
        padding: 0.8rem;
    }

    .landing-catalog-bgg-logo {
        width: 6.4rem;
    }

    .landing-catalog-bgg-copy {
        font-size: 0.7rem;
        line-height: 1.15rem;
    }

    .landing-catalog-path {
        grid-template-columns: 2rem minmax(0, 1fr);
        gap: 0.7rem;
    }

    .landing-catalog-signature {
        flex-wrap: nowrap;
        column-gap: 0.35rem;
        font-size: 0.62rem;
        letter-spacing: 0.08em;
        white-space: nowrap;
    }
}