@layer reset, base, components;

@layer reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    body {
        margin: 0;
    }

    img {
        display: block;
        max-width: 100%;
    }
}

@layer base {
    body {
        font-family: var(--font-sans);
        color: var(--color-text);
        background: var(--color-background);
        line-height: 1.6;
    }

    a {
        color: var(--color-primary);
    }
}

@layer components {
    .container {
        width: min(100% - 2 * var(--space), var(--container-width));
        margin-inline: auto;
    }

    .site-header {
        padding-block: var(--space);
        border-bottom: 1px solid var(--color-surface);

        & .site-header__inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space);
        }

        & .site-header__brand {
            font-weight: 600;
            text-decoration: none;
        }
    }

    .language-switcher {
        display: flex;
        gap: calc(var(--space) / 2);

        & a {
            color: var(--color-muted);
            text-decoration: none;
        }

        & a[aria-current] {
            color: var(--color-primary);
            font-weight: 600;
        }
    }

    .site-main {
        min-height: 60vh;
    }

    .site-footer {
        padding-block: calc(var(--space) * 2);
        color: var(--color-muted);
        background: var(--color-surface);
    }

    .hero {
        padding-block: calc(var(--space) * 4);

        & .hero__title {
            margin: 0;
            font-size: clamp(2rem, 5vw, 3.5rem);
        }
    }
}

@layer components {
    .button {
        display: inline-block;
        padding: 0.75em 1.5em;
        border-radius: var(--radius);
        color: #fff;
        background: var(--color-primary);
        font-weight: 600;
        text-decoration: none;

        &:hover {
            filter: brightness(1.1);
        }
    }

    .menu__list,
    .menu__children {
        display: flex;
        gap: var(--space);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .menu__item {
        position: relative;

        & a {
            color: var(--color-text);
            text-decoration: none;
        }

        & a[aria-current] {
            color: var(--color-primary);
        }
    }

    .menu__children {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 10;
        display: none;
        flex-direction: column;
        gap: calc(var(--space) / 2);
        min-width: 12rem;
        padding: var(--space);
        border-radius: var(--radius);
        background: var(--color-background);
        box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.1);
    }

    .menu__item:hover > .menu__children,
    .menu__item:focus-within > .menu__children {
        display: flex;
    }

    .site-footer__bottom {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space);
    }

    .page-header {
        padding-block: calc(var(--space) * 3) var(--space);

        & .page-header__title {
            margin: 0;
            font-size: clamp(1.75rem, 4vw, 2.75rem);
        }
    }

    .block {
        padding-block: calc(var(--space) * 3);

        & .block__title {
            margin-block: 0 calc(var(--space) * 1.5);
            font-size: clamp(1.5rem, 3vw, 2.25rem);
        }
    }

    .block-hero {
        position: relative;
        display: grid;
        min-height: 60vh;
        align-items: center;
        overflow: hidden;
        color: #fff;
        background: var(--color-text);

        & .block-hero__image {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.55;
        }

        & .block-hero__content {
            position: relative;
            padding-block: calc(var(--space) * 4);
        }

        & .block-hero__title {
            margin: 0;
            font-size: clamp(2rem, 5vw, 3.5rem);
        }

        & .block-hero__subtitle {
            max-width: 40rem;
            font-size: 1.125rem;
        }
    }

    .prose {
        max-width: 48rem;

        & img {
            border-radius: var(--radius);
        }
    }

    .card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
        gap: var(--space);
    }

    .card {
        padding: calc(var(--space) * 1.5);
        border-radius: var(--radius);
        background: var(--color-surface);

        & .card__title {
            margin-top: 0;
        }

        & .card__text {
            margin-bottom: 0;
            color: var(--color-muted);
        }
    }

    .faq-item {
        border-bottom: 1px solid var(--color-surface);

        & .faq-item__question {
            padding-block: var(--space);
            font-weight: 600;
            cursor: pointer;
        }

        & .faq-item__answer {
            margin-top: 0;
            color: var(--color-muted);
        }
    }

    .gallery-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
        gap: calc(var(--space) / 2);

        & img {
            width: 100%;
            aspect-ratio: 4 / 3;
            object-fit: cover;
            border-radius: var(--radius);
        }
    }

    .logo-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: calc(var(--space) * 2);
        margin: 0;
        padding: 0;
        list-style: none;

        & img {
            max-height: 3.5rem;
            filter: grayscale(1);
            opacity: 0.75;
        }

        & a:hover img {
            filter: none;
            opacity: 1;
        }
    }

    .block-cta {
        background: var(--color-surface);

        & .block-cta__inner {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: var(--space);
        }

        & .block-cta__title {
            margin: 0;
        }

        & .block-cta__text {
            margin-bottom: 0;
            color: var(--color-muted);
        }
    }

    @media (width < 48rem) {
        .site-header__inner {
            flex-wrap: wrap;
        }

        .menu__list {
            flex-wrap: wrap;
        }
    }
}

@layer components {
    .badge {
        display: inline-block;
        padding: 0.15em 0.6em;
        border-radius: 999px;
        color: #fff;
        background: var(--color-primary);
        font-size: 0.75rem;
        font-weight: 600;
    }

    .breadcrumbs ol {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5em;
        margin: 0 0 var(--space);
        padding: 0;
        color: var(--color-muted);
        font-size: 0.875rem;
        list-style: none;

        & li + li::before {
            content: "/";
            margin-inline-end: 0.5em;
        }

        & a {
            color: inherit;
        }
    }

    .catalog {
        display: grid;
        grid-template-columns: 16rem 1fr;
        gap: calc(var(--space) * 2);
        padding-block: var(--space) calc(var(--space) * 3);
    }

    .catalog__count {
        margin-top: 0;
        color: var(--color-muted);
    }

    .category-list ul {
        margin: 0 0 var(--space);
        padding: 0;
        list-style: none;

        & a {
            display: block;
            padding-block: 0.35em;
            color: var(--color-text);
            text-decoration: none;
        }
    }

    .catalog-filters {
        display: grid;
        gap: var(--space);

        & input[type="search"],
        & input[type="text"],
        & input[type="number"],
        & select {
            width: 100%;
            padding: 0.5em;
            border: 1px solid var(--color-surface);
            border-radius: var(--radius);
            font: inherit;
        }
    }

    .catalog-filters__field {
        display: grid;
        gap: 0.25em;
        font-weight: 600;
    }

    .catalog-filters__group {
        margin: 0;
        padding: 0;
        border: 0;

        & legend {
            margin-bottom: 0.5em;
            font-weight: 600;
        }
    }

    .catalog-filters__option {
        display: flex;
        align-items: center;
        gap: 0.5em;
        padding-block: 0.15em;
    }

    .catalog-filters__range {
        display: flex;
        align-items: center;
        gap: 0.5em;
    }

    .catalog-filters__actions {
        display: flex;
        align-items: center;
        gap: var(--space);
    }

    .product-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
        gap: var(--space);
    }

    .product-card {
        overflow: hidden;
        border-radius: var(--radius);
        background: var(--color-surface);

        & .product-card__link {
            display: block;
            color: inherit;
            text-decoration: none;
        }

        & .product-card__media {
            position: relative;
            aspect-ratio: 4 / 3;
            background: var(--color-background);

            & img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            & .badge {
                position: absolute;
                top: 0.75rem;
                left: 0.75rem;
            }
        }

        & .product-card__title {
            margin: var(--space) var(--space) 0.25em;
            font-size: 1rem;
        }

        & .product-card__price {
            margin: 0 var(--space) var(--space);
            color: var(--color-primary);
            font-weight: 600;
        }
    }

    .block__header {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--space);
    }

    .pagination {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
        margin-top: calc(var(--space) * 2);

        & a,
        & span {
            min-width: 2.25rem;
            padding: 0.4em 0.7em;
            border-radius: var(--radius);
            text-align: center;
            text-decoration: none;
        }

        & a {
            color: var(--color-text);
            background: var(--color-surface);
        }

        & [aria-current] {
            color: #fff;
            background: var(--color-primary);
        }

        & [aria-disabled] {
            color: var(--color-muted);
        }
    }

    .product {
        padding-block: var(--space) calc(var(--space) * 3);
    }

    .product__main {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: calc(var(--space) * 2);
    }

    .product__image {
        width: 100%;
        border-radius: var(--radius);
    }

    .product__thumbs {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin: 0.5rem 0 0;
        padding: 0;
        list-style: none;

        & img {
            width: 5rem;
            aspect-ratio: 4 / 3;
            object-fit: cover;
            border-radius: calc(var(--radius) / 2);
        }
    }

    .product__title {
        margin-top: 0;
        font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    }

    .product__code {
        color: var(--color-muted);
    }

    .product__price {
        color: var(--color-primary);
        font-size: 1.5rem;
        font-weight: 700;
    }

    .spec-table {
        width: 100%;
        border-collapse: collapse;

        & th,
        & td {
            padding: 0.6em 0;
            border-bottom: 1px solid var(--color-surface);
            text-align: start;
        }

        & th {
            width: 40%;
            color: var(--color-muted);
            font-weight: 500;
        }
    }

    .file-list {
        padding-inline-start: 1.25em;
    }

    @media (width < 48rem) {
        .catalog,
        .product__main {
            grid-template-columns: 1fr;
        }
    }
}

/* Blog */
@layer components {
    .post-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
        gap: calc(var(--space) * 1.5);
    }

    .post-card {
        overflow: hidden;
        border-radius: var(--radius);
        background: var(--color-surface);

        & .post-card__link {
            display: block;
            height: 100%;
            color: inherit;
            text-decoration: none;
        }

        & .post-card__image {
            width: 100%;
            aspect-ratio: 16 / 10;
            object-fit: cover;
        }

        & .post-card__body {
            padding: var(--space);
        }

        & .post-card__date {
            color: var(--color-muted);
            font-size: 0.875rem;
        }

        & .post-card__title {
            margin: 0.25em 0;
            font-size: 1.125rem;
        }

        & .post-card__excerpt {
            margin: 0;
            color: var(--color-muted);
        }
    }

    .post {
        max-width: 48rem;
        padding-block: calc(var(--space) * 2);

        & .post__title {
            margin: 0;
            font-size: clamp(1.75rem, 4vw, 2.75rem);
        }

        & .post__meta {
            color: var(--color-muted);
        }

        & .post__cover {
            width: 100%;
            margin-block: var(--space);
            border-radius: var(--radius);
        }
    }
}

/* Forms */
@layer components {
    .block-form__inner {
        max-width: 48rem;
    }

    .cms-form__honeypot {
        position: absolute;
        left: -9999px;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }

    .cms-form__fields {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space);
        margin-bottom: calc(var(--space) * 1.5);
    }

    .cms-form__field {
        display: grid;
        grid-column: 1 / -1;
        gap: 0.35em;

        & > label {
            font-weight: 600;
        }

        & input:not([type="checkbox"]),
        & select,
        & textarea {
            width: 100%;
            padding: 0.6em 0.75em;
            border: 1px solid color-mix(in srgb, var(--color-muted) 40%, transparent);
            border-radius: var(--radius);
            font: inherit;
            background: var(--color-background);

            &:focus-visible {
                outline: 2px solid var(--color-primary);
                outline-offset: 1px;
            }
        }

        &.cms-form__field--half {
            grid-column: span 1;
        }

        &.cms-form__field--checkbox > label {
            display: flex;
            align-items: flex-start;
            gap: 0.5em;
            font-weight: 400;
        }

        &.has-error :is(input, select, textarea) {
            border-color: #dc2626;
        }
    }

    .cms-form__required {
        color: #dc2626;
    }

    .cms-form__error {
        margin: 0;
        color: #dc2626;
        font-size: 0.875rem;
    }

    .alert {
        padding: var(--space);
        border-radius: var(--radius);

        &.alert--success {
            color: #166534;
            background: #dcfce7;
        }

        &.alert--error {
            color: #991b1b;
            background: #fee2e2;
        }
    }

    @media (width < 40rem) {
        .cms-form__field.cms-form__field--half {
            grid-column: 1 / -1;
        }
    }
}