/* ==================================================
   1. Layout
================================================== */

.site-grid {

    grid-template-areas:
        "preorder preorder preorder preorder"
        "colors colors colors colors"
        "typography-a typography-a typography-a typography-a"
        "typography-b typography-b typography-b typography-b"
        "buttons buttons buttons buttons"
        "example-a example-a example-a example-a"
        "example-b example-b example-b example-b"
        "example-c example-c example-c example-c"
        "example-d example-d example-d example-d"
        "example-e example-e example-e example-e"
        "example-f example-f example-f example-f"
        "example-g example-g example-g example-g"
        "example-h example-h example-h example-h"
        "example-i example-i example-i example-i"
        "example-j example-j example-j example-j"
        "example-k example-k example-k example-k"
        "example-l example-l example-m example-m"
        "example-n example-n example-n example-n"
        "image-a image-a image-a image-a"
        "image-b image-b image-b image-b"
        "spacing spacing spacing spacing";
}


/* ==================================================
   2. Areas
================================================== */

.card-identity {
    grid-area: identity;
}

.card-contact {
    grid-area: contact;
}

.preorder-slider {
    grid-area: preorder;
}

.card-colors {
    grid-area: colors;
}

.card-typography-a {
    grid-area: typography-a;
}

.card-typography-b {
    grid-area: typography-b;
}

.card-buttons {
    grid-area: buttons;
}

.card-example-a {
    grid-area: example-a;
}

.card-example-b {
    grid-area: example-b;
}

.card-example-c {
    grid-area: example-c;
}

.card-example-d {
    grid-area: example-d;
}

.card-example-e {
    grid-area: example-e;
}

.card-example-f {
    grid-area: example-f;
}

.card-example-g {
    grid-area: example-g;
}

.card-example-h {
    grid-area: example-h;
}

.card-example-i {
    grid-area: example-i;
}

.card-example-j {
    grid-area: example-j;
}

.card-example-k {
    grid-area: example-k;
}

.card-example-l {
    grid-area: example-l;
}

.card-example-m {
    grid-area: example-m;
}

.card-example-n {
    grid-area: example-n;
}

.card-image-a {
    grid-area: image-a;
}

.card-image-b {
    grid-area: image-b;
}

.card-spacing {
    grid-area: spacing;
}


/* ==================================================
   3. Colors
================================================== */

.color-palette {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.color-swatch {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.color-preview {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 1px solid #000000;
    border-radius: var(--space-sm);
}

.preview-white {
    background-color: var(--color-white);
}

.preview-blue-light {
    background-color: var(--color-blue-light);
}

.preview-blue {
    background-color: var(--color-blue);
}

.preview-red {
    background-color: var(--color-red);
}

.preview-yellow {
    background-color: var(--color-yellow);
}

.preview-black {
    background-color: var(--color-black);
}


/* ==================================================
   4. Typography
================================================== */


/* ==================================================
   5. Buttons
================================================== */

.buttons-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* ==================================================
   6. Examples
================================================== */

/* ==================================================
   12. Précommandes
================================================== */

.preorder-slider {
    position: relative;
    overflow: hidden;
}

.preorder-slider-track {
    display: flex;
    transition: transform 0.4s ease;
}

.preorder-slide {
    flex: 0 0 100%;
}

.preorder-slider-prev,
.preorder-slider-next {
    display: block;
    position: absolute;
    top: 50%;
    z-index: 20;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transform: translateY(-50%);
}

.preorder-slider-prev {
    left: var(--space-sm);
}

.preorder-slider-next {
    right: var(--space-sm);
}

.preorder-slider-prev img,
.preorder-slider-next img {
    display: block;
    width: 100%;
    height: 100%;
}

.preorder-slider-prev img {
    transform: rotate(180deg);
}

.card-preorder {
    min-height: 400px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

.preorder-card-content {
    position: absolute;
    left: calc(var(--space-md) + var(--space-xl));
    top: var(--space-md);

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
}

.card-preorder > h3,
.preorder-card-platform,
.preorder-card-date,
.preorder-card-mention {
    width: fit-content;
    background-color: var(--color-blue);
    color: var(--color-white);
    padding: var(--space-xs);
    margin: 0;
    border-radius: 2px;
}

.preorder-card-title {
    max-width: calc(100vw - 100px);
    background-color: var(--color-blue);
    color: var(--color-yellow);
    padding: var(--space-xs);
    margin: 0;
    border-radius: 2px;
}

.preorder-card-platform {
    font-style: italic;
}

.preorder-card-date {
    font-weight: 700;
}

.preorder-card-price {
    position: absolute;
    right: var(--space-md);
    top: 50%;
    transform: translateY(-50%);

    display: flex;
    align-items: center;
    justify-content: center;

    right: calc(var(--space-2xl) + 16px);
    width: 192px;
    height: 192px;
    padding: var(--space-sm);

    border-radius: 50%;
    background-color: var(--color-red);
    color: var(--color-white);

    font-size: 2.5rem;
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
}

.preorder-card-link {
    position: absolute;
    inset: 0;
    z-index: 10;
}

.preorder-card-button {
    position: absolute;
    left: 50%;
    bottom: var(--space-md);
    transform: translateX(-50%);
    font-size: 1.5rem;
    padding: var(--space-sm) var(--space-md);
}


/* ==================================================
   8. Responsive
================================================== */

@media (min-width: 900px) {

    .site-grid {
        grid-template-areas:
            "preorder preorder preorder preorder preorder preorder preorder preorder preorder preorder preorder preorder"
            "colors colors colors colors colors colors colors colors colors colors colors colors"
            "typography-a typography-a typography-a typography-a typography-a typography-a typography-b typography-b typography-b typography-b typography-b typography-b"
            "buttons buttons buttons buttons buttons buttons buttons buttons buttons buttons buttons buttons"
            "example-a example-a example-a example-a example-a example-a example-b example-b example-b example-b example-b example-b"
            "example-c example-c example-c example-c example-d example-d example-d example-d example-e example-e example-e example-e"
            "example-f example-f example-f example-g example-g example-g example-g example-g example-g example-h example-h example-h"
            "example-i example-i example-i example-i example-i example-j example-j example-j example-j example-j example-j example-j"
            "example-k example-k example-k example-k example-k example-k example-k example-k example-k example-k example-k example-k"
            "example-l example-l example-l example-m example-m example-m example-m example-m example-m example-m example-m example-m"
            "example-l example-l example-l example-n example-n example-n example-n example-n example-n example-n example-n example-n"
            "image-a image-a image-a image-a image-a image-a image-a image-a image-b image-b image-b image-b"
            "spacing spacing spacing spacing spacing spacing spacing spacing image-b image-b image-b image-b";
    }

    .color-palette {
        grid-template-columns: repeat(6, 1fr);
    }


    .buttons-group {
        flex-direction: row;
    }

    .buttons-group .btn {
        width: auto;
    }

}