/* ============================================================
   BLOODMOON GRID
   Main stylesheet
============================================================ */


/* ============================================================
   GLOBAL VARIABLES
============================================================ */

:root {

    --background: #f5f6f8;

    --surface: #ffffff;

    --surface-soft: #fafbfc;

    --text: #20242a;

    --text-soft: #67707c;

    --text-light: #8a929d;

    --border: #e4e8ed;

    --bloodmoon: #c41225;

    --bloodmoon-dark: #98101e;

    --red-soft: #fff0f1;

    --pink-soft: #fff3f5;

    --blue-soft: #eef6ff;

    --purple-soft: #f7f0ff;

    --blue: #2875cf;

    --purple: #7943ad;

    --container: 1560px;

    --radius: 13px;

    --shadow:
        0 5px 20px rgba(27, 37, 50, 0.08);

}


/* ============================================================
   RESET
============================================================ */

* {
    box-sizing: border-box;
}


html {
    margin: 0;
    padding: 0;
}


body {

    margin: 0;
    padding: 0;

    background: var(--background);

    color: var(--text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    font-size: 14px;

    line-height: 1.4;

    -webkit-font-smoothing: antialiased;

}


a {
    color: inherit;
}


button,
input,
select,
textarea {
    font: inherit;
}


/* ============================================================
   HERO
============================================================ */

.hero {

    position: relative;

    height: 235px;

    min-height: 235px;

    overflow: hidden;

    display: flex;

    align-items: center;

    background:
        linear-gradient(
            90deg,
            #fff1ee 0%,
            #fff1ee 22%,
            rgba(255,241,238,0.96) 32%,
            rgba(255,241,238,0.73) 47%,
            rgba(255,241,238,0.18) 64%,
            rgba(255,241,238,0.00) 78%
        ),
        url("../images/hero-bloodmoon-maquette.jpg");

    background-repeat: no-repeat;

    background-size:
        100% 100%,
        75% 100%;

    background-position:
        center,
        right center;

}


/* ============================================================
   HERO CONTENT
============================================================ */

.hero-content {

    position: relative;

    z-index: 2;

    width: min(
        var(--container),
        calc(100% - 70px)
    );

    margin: 0 auto;

    padding-left: 125px;

}


.hero-kicker {

    margin-bottom: 7px;

    color: #535c66;

    font-size: 0.68rem;

    font-weight: 700;

    letter-spacing: 0.22em;

}


.hero h1 {

    margin: 0;

    color: #24282e;

    font-size: clamp(
        2.1rem,
        3.5vw,
        3.3rem
    );

    line-height: 1;

    letter-spacing: -0.045em;

}


.hero h1 span {
    color: var(--bloodmoon);
}


.hero-description {

    width: 470px;

    max-width: 100%;

    margin: 8px 0 0;

    color: #444b54;

    font-size: 0.96rem;

    line-height: 1.45;

}


/* ============================================================
   HERO BUTTONS
============================================================ */

.hero-actions {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 11px;

}


.btn {

    display: inline-flex;

    min-height: 36px;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 0 17px;

    border-radius: 7px;

    text-decoration: none;

    font-size: 0.84rem;

    font-weight: 700;

    transition:
        background 0.15s ease,
        transform 0.15s ease;

}


.btn:hover {
    transform: translateY(-1px);
}


.btn-primary {

    background: var(--bloodmoon);

    color: #ffffff;

}


.btn-primary:hover {
    background: var(--bloodmoon-dark);
}


.btn-secondary {

    border: 1px solid rgba(196,18,37,0.45);

    background: rgba(255,255,255,0.86);

    color: var(--bloodmoon);

}


/* ============================================================
   LOGIN URI
============================================================ */

.login-uri {

    display: flex;

    align-items: center;

    gap: 6px;

    margin-top: 9px;

    color: #6a717a;

    font-size: 0.82rem;

}


.login-uri strong {
    color: var(--bloodmoon);
}


.login-icon {
    color: var(--bloodmoon);
}


/* ============================================================
   COMMON HOME SECTION
============================================================ */

.home-section {

    width: min(
        var(--container),
        calc(100% - 60px)
    );

    margin: 0 auto;

}


/* ============================================================
   FEATURED REGIONS
============================================================ */

.featured-section {

    position: relative;

    margin-top: -1px;

    padding:
        10px
        12px
        12px;

    border:
        1px solid
        var(--border);

    border-radius: var(--radius);

    background: var(--surface);

    box-shadow: var(--shadow);

}


.section-heading {

    min-height: 32px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        0
        3px
        7px;

}


.section-heading h2 {

    margin: 0;

    padding-left: 10px;

    border-left:
        4px solid
        var(--bloodmoon);

    font-size: 1rem;

    line-height: 1.2;

}


.section-heading-right {

    display: flex;

    align-items: center;

    gap: 15px;

}


.section-subtitle {

    color: var(--text-soft);

    font-size: 0.75rem;

}


/* ============================================================
   CAROUSEL BUTTONS
============================================================ */

.carousel-buttons {

    display: flex;

    gap: 5px;

}


.carousel-buttons button {

    width: 28px;

    height: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    border:
        1px solid
        var(--border);

    border-radius: 50%;

    background: #ffffff;

    color: #4e5660;

    cursor: pointer;

    transition:
        color 0.15s ease,
        border-color 0.15s ease,
        background 0.15s ease;

}


.carousel-buttons button:hover {

    color: var(--bloodmoon);

    border-color: rgba(196,18,37,0.35);

    background: #fff8f8;

}


/* ============================================================
   FEATURED CAROUSEL
============================================================ */

.featured-viewport {

    width: 100%;

    overflow: hidden;

    border-radius: 9px;

}


.featured-track {

    display: flex;

    gap: 12px;

    transform: translateX(0);

    will-change: transform;

}


.featured-card {

    position: relative;

    flex:
        0 0
        calc(
            (100% - 36px) / 4
        );

    height: 150px;

    overflow: hidden;

    border-radius: 9px;

    background: #e9edf2;

    text-decoration: none;

}


.featured-card-image {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.35s ease;

}


.featured-card:hover .featured-card-image {

    transform: scale(1.035);

}


.featured-card::after {

    content: "";

    position: absolute;

    inset: 38% 0 0;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(0,0,0,0.78)
        );

}


.featured-card-content {

    position: absolute;

    z-index: 2;

    left: 14px;

    right: 14px;

    bottom: 10px;

    color: #ffffff;

}


.featured-card-content strong {

    display: block;

    margin-bottom: 1px;

    font-size: 0.95rem;

}


.featured-card-content span {

    color:
        rgba(255,255,255,0.85);

    font-size: 0.72rem;

}


/* ============================================================
   QUICK ACCESS
============================================================ */

.quick-access {

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 12px;

    margin-top: 12px;

    padding-bottom: 15px;

}


.quick-card {

    min-height: 90px;

    display: flex;

    align-items: center;

    gap: 13px;

    padding:
        13px
        17px;

    border:
        1px solid
        rgba(0,0,0,0.04);

    border-radius: 11px;

    text-decoration: none;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;

}


.quick-card:hover {

    transform: translateY(-2px);

    box-shadow: var(--shadow);

}


.quick-icon {

    width: 43px;

    height: 43px;

    flex: 0 0 43px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.65);

    font-size: 1.4rem;

    font-weight: 800;

}


.quick-content h3 {

    margin:
        0
        0
        1px;

    font-size: 0.91rem;

}


.quick-content p {

    margin: 0;

    color: #69717b;

    font-size: 0.73rem;

}


.quick-content span {

    display: inline-block;

    margin-top: 6px;

    font-size: 0.73rem;

    font-weight: 700;

}


.quick-red {

    background: var(--red-soft);

    color: var(--bloodmoon);

}


.quick-pink {

    background: var(--pink-soft);

    color: #d2243a;

}


.quick-blue {

    background: var(--blue-soft);

    color: var(--blue);

}


.quick-purple {

    background: var(--purple-soft);

    color: var(--purple);

}


/* ============================================================
   RESPONSIVE - CAROUSEL
============================================================ */


/* 3 CARDS */

@media (max-width: 1400px) {

    .featured-card {

        flex:
            0 0
            calc(
                (100% - 24px) / 3
            );

    }

}


/* ============================================================
   RESPONSIVE - TABLET
============================================================ */

@media (max-width: 1150px) {

    .hero-content {
        padding-left: 35px;
    }


    .quick-access {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }

}


/* ============================================================
   RESPONSIVE - SMALL TABLET
============================================================ */

@media (max-width: 850px) {

    .featured-card {

        flex:
            0 0
            calc(
                (100% - 12px) / 2
            );

    }

}


/* ============================================================
   RESPONSIVE - MOBILE
============================================================ */

@media (max-width: 700px) {

    .hero {

        height: auto;

        min-height: 280px;

        background-size: cover;

        background-position: center;

    }


    .hero-content {

        width: calc(100% - 32px);

        padding:
            30px
            0;

    }


    .hero-description {
        width: 100%;
    }


    .home-section {
        width: calc(100% - 24px);
    }


    .featured-card {

        flex: 0 0 100%;

        height: 145px;

    }


    .quick-access {

        grid-template-columns:
            1fr;

    }


    .section-subtitle {
        display: none;
    }

}