/* =========================
LAYOUT
========================= */

.grammar-layout{

    display:flex;

    flex-direction:column;

    gap:1.8rem;
}
/* =========================
SIDEBAR
========================= */

.grammar-sidebar{

    display:flex;

    flex-wrap:wrap;

    gap:1rem;

    align-items:center;
}

.back-btn svg{

    width:1.1rem;

    height:1.1rem;

    transform:
    translateY(0.05rem);
}
.topbar{

    margin-top:
    0.8rem;

    margin-bottom:
    2rem;
}

.back-btn{

    display:inline-flex;

    align-items:center;

    gap:0.6rem;
}
/* =========================
CATEGORY BUTTONS
========================= */

.grammar-category-btn{

    background:
    linear-gradient(
        145deg,
        #5C4059,
        #4C4E73
    );

    border:
    0.12rem solid rgba(255,255,255,0.08);

    border-radius:
    2rem 2.6rem 2rem 2.8rem;

    padding:
    1rem 1.3rem;

    color:white;

    font-size:1rem;

    font-weight:700;

    text-align:left;

    cursor:pointer;

    position:relative;

    overflow:hidden;

    transition:
    transform 0.2s ease,
    opacity 0.2s ease;

    box-shadow:
    0.5rem 0.6rem 0
    rgba(15,18,26,0.25);
}

/* =========================
TEXTURE
========================= */

.grammar-category-btn::before{

    content:"";

    position:absolute;

    inset:0;

    opacity:0.05;

    background-image:
    radial-gradient(
        rgba(255,255,255,0.9) 0.05rem,
        transparent 0.05rem
    );

    background-size:
    0.7rem 0.7rem;

    pointer-events:none;
}

/* =========================
HOVER
========================= */

.grammar-category-btn:hover{

    transform:
    translateY(-0.15rem)
    rotate(-1deg);
}

/* =========================
ACTIVE
========================= */

.grammar-category-btn.active{

    outline:
    0.18rem solid rgba(255,255,255,0.22);

    transform:
    rotate(-1deg)
    scale(1.02);
}

/* =========================
CONTENT AREA
========================= */

.grammar-content-area{

    display:flex;

    flex-direction:column;

    gap:2rem;
}

/* =========================
GRAMMAR CARD
========================= */

.grammar-card{

    background:
    rgba(255,248,242,0.06);

    border:
    0.12rem solid rgba(255,255,255,0.07);

    border-radius:
    2.4rem 2rem 2.7rem 1.9rem;

    padding:
    2rem;

    position:relative;

    overflow:hidden;

    backdrop-filter:
    blur(0.7rem);

    box-shadow:
    0.8rem 0.9rem 0
    rgba(15,18,26,0.34);

    transform:
    rotate(-0.5deg);
}

/* =========================
TOP STRIP
========================= */

.grammar-card-top{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:0.65rem;

    background:
    linear-gradient(
        90deg,
        var(--red),
        var(--orange),
        var(--sand)
    );
}

/* =========================
CARD TEXTURE
========================= */

.grammar-card::before{

    content:"";

    position:absolute;

    inset:0;

    opacity:0.04;

    background-image:
    radial-gradient(
        rgba(255,255,255,0.85) 0.05rem,
        transparent 0.05rem
    );

    background-size:
    0.7rem 0.7rem;

    pointer-events:none;
}

/* =========================
TITLE
========================= */

.grammar-title{

    font-size:
    clamp(1.6rem, 4vw, 2.2rem);

    margin-bottom:
    1.4rem;

    line-height:1.1;

    color:white;
}

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

.grammar-content{

    white-space:
    pre-line;

    line-height:1.9;

    font-size:
    1.05rem;

    color:
    rgba(255,255,255,0.88);
}

/* =========================
MOBILE
========================= */

@media (max-width: 900px){

    .grammar-layout{

        grid-template-columns:
        1fr;
    }

    .grammar-sidebar{

        position:static;

        flex-direction:row;

        overflow-x:auto;

        padding-bottom:0.5rem;
    }

    .grammar-category-btn{

        min-width:max-content;
    }
}