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


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


/**************************************************
   Keyframes
**************************************************/
/* --- mockup画像の無限切り替え --- */
@keyframes img-switch-anim {
    0%   { transform: translateX(0); }
    45%  { transform: translateX(0); }
    50%  { transform: translateX(-100vw); }
    95%  { transform: translateX(-100vw); }
    100% { transform: translateX(0); }
}


/**************************************************
   Detail section
**************************************************/
.p-detail {
    margin-block-end: var(--spc-xl);
}

.p-detail__mockup {
    inline-size: 200vw;
    display: flex;
    align-items: center;
    margin-block-end: var(--spc-xl);
}

.p-detail__mockup-img {
    display: block;
    inline-size: 100vw;
    animation: img-switch-anim 10s infinite;
}

.p-detail__lead {
    margin-block-end: var(--spc-m);
}

.p-detail__list {
    margin-block-end: var(--spc-xl);
}

.p-detail__item {
    display: flex;
    flex-direction: column;
    gap: var(--spc-s);
    padding-inline: var(--spc-m);
    padding-block: var(--spc-l);
    border-block-start: 1px dotted var(--clr-primary);
}

.p-detail__item:last-child {
    border-block-end: 1px dotted var(--clr-primary);
}

.p-detail__term {
    font-size: 1.4rem;
    color: var(--clr-primary);
}

.p-detail__desc {
    text-align: justify;            /* 両端揃え */
    text-justify: inter-character;  /* 日本語の調整を最適化 */
    word-break: break-all;          /* 単語の途中で変な改行が起きないようにする */
}

.p-deail__desc-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--spc-m);
    margin-block-end: 0.5rem;
}

.p-detail__visit {
    display: block;
    inline-size: 150px;
    text-align: center;
    text-transform: capitalize;
}

.p-other__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(40%, 1fr));
    gap: var(--spc-l);
    justify-content: center;
    margin-block-end: var(--spc-xl);
    padding-inline: var(--spc-m);
}

.p-other__link {
    display: block;
    margin-block-end: var(--spc-s);
}

.p-other-info__link {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: var(--spc-xs);
    line-height: 1.2;
}

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

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

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

.p-other__back {
    display: block;
    inline-size: 150px;
    text-align: center;
    text-transform: capitalize;
}


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


    .p-detail__list {
        margin-block-end: var(--spc-2xl);
    }

    .p-deail__desc-wrapper {
        justify-content: flex-start;
    }

    .p-deail__desc-wrapper span:first-child {
        inline-size: 25%;
    }

    .p-other__list {
        gap: var(--spc-xl);
        margin-block-end: var(--spc-2xl);
        padding-inline: var(--spc-l);
    }

    .p-other__link {
        margin-block-end: var(--spc-m);
    }

    .p-other-info__link {
        flex-direction: row;
        gap: var(--spc-m);
    }
}


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

    .p-detail__mockup {
        inline-size: 80vw;
        max-inline-size: 1024px;
        margin-inline: auto;
        margin-block-end: var(--spc-2xl);
    }

    .p-detail__mockup-img {
        inline-size: 40vw;
        max-inline-size: 512px;
        padding: var(--spc-2xs);
        animation: none;
    }

    .p-detail__list {
        margin-block-end: var(--spc-2xl);
    }
    
    .p-deail__desc-wrapper {
        justify-content: flex-start;
    }

    .p-deail__desc-wrapper span:first-child {
        inline-size: 25%;
    }

    .p-detail__visit {
        inline-size: 300px;
    }

    .p-other__list {
        max-inline-size: 1268px;
        grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
        margin-inline: auto;
        padding-inline: var(--spc-xl);
    }

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

    .p-other__link {
        margin-block-end: var(--spc-m);
    }

    .p-other-info__link {
        flex-direction: row;
        gap: var(--spc-m);
    }

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

    .p-other__back {
        inline-size: 300px;
    }
}


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

    .p-detail__mockup {
        inline-size: 80vw;
        margin-inline: auto;
    }

    .p-detail__mockup-img {
        inline-size: 40vw;
        padding: var(--spc-2xs);
        animation: none;
    }

    .p-other__list {
        grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
        padding-inline: var(--spc-xl);
    }
}