@charset "utf-8";

/*-------------------------------------------------
   Breakpoints
   - Mobile portrait           : (default)
   - Mobile landscape          : ～h500px
   - Tablet portrait           : w768px～
   - Tablet landscape & Desktop: w1024px～
-------------------------------------------------*/


/* --- 変数はcommon.cssで一括管理 --- */


/**************************************************
   Works section
**************************************************/
.p-works__filter-list {
    inline-size: 100%;
    margin-inline: auto;
    position: sticky;
    inset-block-start: var(--spc-xl);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spc-s);
    margin-block-end: var(--spc-l);
    z-index: var(--z-front-content);
}

.p-works__filter-item {
    flex-basis: 20%;
}

.p-works__filter-link {
    display: block;
    text-align: center;
    padding-inline: var(--spc-s);
    padding-block: var(--spc-xs);
    background-color: var(--clr-primary);
    font-family: var(--fnt-accent);
    font-size: 2.0rem;
    line-height: 1;
    color: var(--clr-bg-card);
    border-radius: 9999px;
    transition: background-color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.p-works__filter-link:hover {
    background-color: var(--clr-active);
}

.p-works__list {
    inline-size: 80%;
    margin-inline: auto;
}

.p-works__item {
    padding-block-start: var(--spc-2xl);
}

.p-works__link {
    display: block;
    margin-block-end: var(--spc-l);
}

.p-works-info__link {
    display: flex;
    align-items: center;
    gap: var(--spc-s);
    margin-block-end: var(--spc-m);
}

.p-works-info__tag {
    color: var(--clr-primary);
}

.p-works-info__title {
    font-size: 1.4rem;
    font-weight: 400;
}

.p-works-info__title::after {
    content: ">";
    padding-inline-start: var(--spc-s);
}

.p-works-skill {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spc-xs);
}

.p-works-skill__label {
    padding-inline: var(--spc-xs);
    padding-block: var(--spc-2xs);
    font-size: 1.0rem;
    color: var(--clr-primary);
    border: 0.5px solid var(--clr-primary);
    border-radius: 9999px;
}


/**************************************************
   Media queries
**************************************************/
/* --- Tablet portrait --- */
@media screen and (min-width: 768px) and (orientation: portrait) {

    .p-works__filter-list {
        padding-inline: var(--spc-xl);
    }

    .p-works__link {
        inline-size: 100%;
    }
}


/* --- Tablet landscape & Desktop --- */
@media screen and (min-width: 1024px) {

    .p-works__filter-list {
        inset-block-start: var(--spc-m);
    }

    .p-works__filter-link {
        padding-block: var(--spc-s);
    }
        
    .p-works-info__link {
        gap: var(--spc-m);
    }

    .p-works-info__link:hover {
        text-decoration: underline;
        text-underline-offset: 0.5em;
        text-decoration-thickness: 0.5px;
        text-decoration-color: var(--clr-primary);
    }

    .p-works-info__title {
        font-size: 2.0rem;
    }
}


/* --- Mobile landscape --- */
@media screen and (max-height: 500px) and (orientation: landscape) {

    .p-works__container {
        padding-inline: var(--spc-m);
    }

    .p-works__filter-list {
        inset-block-start: var(--spc-m);
    }

    .p-works__filter-item {
        flex-basis: 15%;
    }

    .p-works__filter-link {
        font-size: 1.4rem;
        padding-inline: var(--spc-xs);
    }

    .p-works__item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--spc-l);
    }

    .p-works__link {
        margin-block-end: 0;
    }

    .p-works-info__link {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spc-2xs);
    }
}