/* ========================================
   KAGENEKO-CHAN
   PROFILE Page CSS
======================================== */


/* ========================================
   PROFILE
======================================== */

.profile {
    width: min(1000px, calc(100% - 40px));
    margin-inline: auto;
    padding: 80px 0;
}

/* ========================================
   PROFILE TOP
======================================== */

.profile__top {
    background-color: #FFFFFF;
    border: 1px solid #D7DBDF;
    border-radius: 8px;
}


/* Header Image */

.profile__header-image {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 1;
    object-fit: cover;
    background-color: #DDE2E7;
    border-radius: 8px 8px 0 0;
}


/* Icon + Name */

.profile__identity {
    display: flex;
    align-items: flex-end;
    gap: 24px;
    padding: 0 32px 24px;
}


/* Profile Icon */

.profile__icon {
    flex-shrink: 0;
    width: 170px;
    height: 170px;
    margin-top: -85px;
    object-fit: cover;
    background-color: #E7EAED;
    border: 5px solid #FFFFFF;
    border-radius: 8px;
}


/* Name */

.profile__name {
    margin: 0 0 10px;
    font-size: 30px;
    font-weight: 700;
    color: #202328;
}

/* 自己紹介カード */
.profile__introduction {
    margin-top: 12px;
    padding: 32px;
    background-color: #FFFFFF;
    border: 1px solid #D7DBDF;
    border-radius: 8px;
}

.profile__description { /* 文章が増えたとしても自然に縦に伸びる。 */
    margin-bottom: 0;
    font-size: 15px;
    line-height: 1.9;
    color: #202328;
}

/* 将来拡張スペース (影猫ちゃんの要望次第で変化する場所。Steamショーケースのようなエリア)*/
.profile__extra {
    min-height: 220px;
/*    margin-top: 24px;
    background-color: #FFFFFF;
    border: 1px solid #D7DBDF;
    border-radius: 8px;*/
}

/* ========================================
   PROFILE - Mobile
======================================== */
/* ========================================
   PROFILE - Mobile
======================================== */

@media (max-width: 768px) {

    .profile {
        width: calc(100% - 24px);
        padding: 40px 0;
    }


    /* ヘッダーをより横長に */
    .profile__header-image {
        aspect-ratio: 16 / 5;
        object-fit: cover;
        object-position: center;
    }


    /* アイコン＋名前 */
    .profile__identity {
        align-items: flex-start;
        gap: 14px;
        padding: 0 16px 16px;
    }


    /* アイコンを少し小型化し、
       ヘッダー側へ食い込ませる */
    .profile__icon {
        width: 96px;
        height: 96px;
        margin-top: -48px;
        border-width: 4px;
    }


    /* 名前を今より上へ */
    .profile__name {
        margin: 10px 0 0;
        font-size: 22px;
        line-height: 1.3;
    }


    .profile__introduction {
        margin-top: 10px;
        padding: 20px;
    }
}