/* Baseline compatibility layer: widely supported features + safe fallbacks */

@supports not (background-clip: text) {
    .hero__title span {
        color: var(--text-accent-soft);
        background: none;
    }
}

@supports not (aspect-ratio: 3 / 2) {
    .pack-card__media,
    .item-detail__media {
        height: 0;
        padding-bottom: 66.6667%;
    }

    .pack-card__media > img,
    .pack-card__media > .pack-card__placeholder,
    .pack-card__media > .pack-card__overlay,
    .pack-card__media > .pack-card__tag,
    .pack-card__media > .pack-card__chrome,
    .item-detail__media > img,
    .item-detail__media > .pack-card__placeholder,
    .item-detail__media > .pack-card__tag {
        position: absolute;
        inset: 0;
    }

    .pack-card__media > img,
    .item-detail__media > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

@supports not (aspect-ratio: 16 / 10) {
    .app-card__preview,
    .software-card__preview {
        height: 0;
        padding-bottom: 62.5%;
        position: relative;
    }

    .app-card__preview > img,
    .software-card__preview > img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .navbar {
        background: rgba(11, 11, 15, 0.96);
    }

    .hero__floating {
        background: rgba(22, 22, 34, 0.98);
    }
}

button,
input,
select,
textarea {
    touch-action: manipulation;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.navbar__toggle:focus-visible,
.lang-switcher__toggle:focus-visible {
    outline: 2px solid var(--text-link);
    outline-offset: 2px;
}

.navbar__link:focus-visible,
.lang-switcher__link:focus-visible,
.pagination__btn:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--text-link);
    outline-offset: 2px;
}

img {
    height: auto;
}

.skip-link {
    position: absolute;
    top: 0;
    left: var(--page-gutter);
    z-index: 1000;
    padding: 12px 18px;
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    color: var(--text);
    border: 1px solid var(--border-strong);
    font-weight: 600;
    text-decoration: underline;
    transform: translateY(-150%);
    transition: transform 0.2s;
}

.skip-link:focus {
    transform: translateY(12px);
    outline: 2px solid var(--text-link);
    outline-offset: 2px;
}

.site-footer__links a,
.section__link,
.breadcrumbs__link,
.support-help__link,
.support-links__item,
.packs-sort-filter,
.apps-filter,
.software-filter,
.navbar__link,
.lang-switcher__link,
.pagination__btn {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 0.18em;
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible,
.section__link:hover,
.section__link:focus-visible,
.breadcrumbs__link:hover,
.breadcrumbs__link:focus-visible,
.support-help__link:hover,
.support-help__link:focus-visible,
.support-links__item:hover,
.support-links__item:focus-visible,
.packs-sort-filter:hover,
.packs-sort-filter:focus-visible,
.apps-filter:hover,
.apps-filter:focus-visible,
.software-filter:hover,
.software-filter:focus-visible,
.navbar__link:hover,
.navbar__link:focus-visible,
.lang-switcher__link:hover,
.lang-switcher__link:focus-visible,
.pagination__btn:hover,
.pagination__btn:focus-visible {
    text-decoration-color: currentColor;
}

@supports (width: min(100%, 1px)) {
    .container {
        width: min(var(--container-max), calc(100% - var(--page-gutter) * 2));
    }
}

@supports not (width: min(100%, 1px)) {
    .container {
        width: calc(100% - var(--page-gutter) * 2);
        max-width: var(--container-max);
    }
}