/*
  Pretendard Font Weight Reference
  Thin: 100, ExtraLight: 200, Light: 300, Regular: 400,
  Medium: 500, SemiBold: 600, Bold: 700, ExtraBold: 800
*/

/* ===============================================
   About Page
   =============================================== */
   
.about-section {
    padding: 12.8rem 2.0rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    gap: 6.4rem;
}



/* ----- 글씨 ----- */
.about-feature-block__title,
.about-promo-block__title {
    padding: 0;
    margin: 0;
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 200%;
    color: var(--color-main);
}

.about-promo-block__subtitle {
    padding: 0;
    margin: 0;
    font-size: 2.4rem;
    font-family: "Prata", serif;
    font-weight: 400;
    font-style: normal;
    line-height: 200%;
    color: var(--color-main);
    text-decoration: underline;
}

.about-feature-block__intro,
.about-feature-block__footer,
.about-promo-block__description {
    padding: 0;
    margin: 0;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 200%;
}



/* --- About Feature Block : SOON Movement Global --- */
.about-feature-block {
    width: 65ch;
    padding-bottom: 6.4rem;
    border-bottom: 0.1rem solid #EEEEEE;
    display: flex;
    flex-direction: column;
    gap: 8.4rem;
}

.about-feature-block__header {
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
}

.about-feature-block__body {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 7.2rem;
}

.about-feature-block__item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-feature-block__item-content {
    width: 26.0rem;
    height: 26.0rem;
    padding: 2.0rem;
    border: 0.1rem solid var(--color-main);
    border-radius: 20.0rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1.2rem;
    box-shadow: 0 0 1.0rem 1.0rem #CFE9D9;
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    overflow: hidden;
}

.about-feature-block__item-content:hover {
    /* 크기를 1.05배 (5%) 키움 */
    transform: scale(1.05);

    /* 그림자를 더 짙고 넓게 만들어 '떠오르는' 느낌을 줌 */
    box-shadow: 0 0.5rem 2.0rem 1.5rem #CFE9D9;
}

.about-feature-block__item-content-background-01 {
    background-color: var(--color-main);
}

.about-feature-block__item-content-background-02 {
    background-color: #FFFFFF;
}

.about-feature-block__item-title {
    padding: 0;
    margin: 0;
    font-size: 1.6rem;
    font-weight: 600;
    text-align: center;
    transition: transform 0.3s ease-out;
}

.about-feature-block__item-description {
    padding: 0;
    margin: 0;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 200%;
    text-align: center;
    transition: transform 0.3s ease-out;
}

.about-feature-block__item-content:hover .about-feature-block__item-title,
.about-feature-block__item-content:hover .about-feature-block__item-description {
    /* 텍스트 크기를 1.05배 (5%) 키움 */
    transform: scale(1.05);
}

.about-feature-block__item-title-color-01,
.about-feature-block__item-description-color-01 {
    color: var(--color-text-inverse);
}

.about-feature-block__item-title-color-02,
.about-feature-block__item-description-color-02 {
    color: var(--color-main);
}



/* --- About Promo Block : Youth Higher Calling Conference --- */
.about-promo-block {
    width: 65ch;
    display: flex;
    flex-direction: column;
    gap: 25.6rem;
}

.about-promo-block__header {
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
}

.about-promo-block__callout {
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 0.1rem solid var(--color-main);
    border-bottom: 0.1rem solid var(--color-main);
}

.about-promo-block__callout-text {
    padding: 0;
    margin: 0;
    font-size: 1.6rem;
    font-family: "Playwrite US Trad", cursive;
    font-optical-sizing: auto;
    font-weight: 300;
    /* Figma = Regular 400 --> CSS = Light 300 */
    font-style: normal;
    color: var(--color-main);
}



/* ===============================================
   모바일 반응형
   1152px == 72em  ( (1152 / 16 = 72) )
   1024px == 64em  ( (1024 / 16 = 64) )
   >>> 768px == 48em  ( (768 / 16 = 48) )
   >>> 672px == 42em  ( (672 / 16 = 42) )
   >>> 390px == 25em  ( (390 / 16 = 24.375) )
   >>> 320px == 16em  ( (320 / 16 = 16) )
   =============================================== */

@media (max-width: 48em) {
    .about-section {
        padding-top: 6.4rem;
        padding-bottom: 6.4rem;
    }

    .about-feature-block,
    .about-promo-block {
        width: 100%;
    }

    .about-promo-block {
        gap: 38.4rem;
    }
}



@media (max-width: 42em) {
    .about-section {
        padding-top: 3.2rem;
        padding-bottom: 3.2rem;
        gap: 3.2rem;
    }

    /* --- About Feature Block : SOON Movement Global --- */
    .about-feature-block {
        padding-bottom: 3.2rem;
        gap: 4.0rem;
        /* 3.2 + 0.8 = 4.0

        ◦ 3.2rem + 첫 번째 about-feature-block__item의 padding-top 0.8rem = 4.0rem
        ◦ 3.2rem + 두 번째 about-feature-block__item의 padding-bottom 0.8rem = 4.0rem

        ==> 이유: Figma에서는 "gap: 32px"인데,
        about-feature-block__item-content의 Drop shadow 때문에
        about-feature-block__item에 padding-top & padding-bottom에 8px을 줌.

        css에서는 Drop shadow의 영향이 없어서 그대로 "gap: 32px"을 해도 되지만,
        심미적인 관점에서 "gap: 40px;"하는 것이 보기에 더 아름다움.

        따라서 3.2rem + 0.8rem = 4.0rem 하는 것으로 결정. */
    }

    .about-feature-block__header {
        gap: 1.6rem;
    }

    .about-feature-block__body {
        flex-direction: column;
        gap: 3.2rem;
        /* 0.8 + 1.6 + 0.8 = 3.2

        (1) 1st 0.8 == 첫 번째 about-feature-block__item의 padding-bottom 0.8rem
        (2) Figma에서의 about-feature-block__body의 gap 1.6rem
        (3) 2nd 0.8 == 두 번째 about-feature-block__item의 padding-top 0.8rem

        (1) + (2) + (3) == 3.2rem

        ==> 이유: Figma에서는 "gap: 16px"인데,
        about-feature-block__item-content의 Drop shadow 때문에
        about-feature-block__item에 padding-top & padding-bottom에 8px을 줌.

        css에서는 Drop shadow의 영향이 없어서 그대로 "gap: 16px"을 해도 되지만,
        심미적인 관점에서 "gap: 32px;"하는 것이 보기에 더 아름다움.

        따라서 0.8rem + 1.6rem + 0.8rem = 3.2rem 하는 것으로 결정. */
    }

    .about-feature-block__item-content {
        width: 25.0rem;
        height: fit-content;
        border-radius: 2.5rem;
        gap: 1.0rem;
    }


    /* --- About Promo Block : Youth Higher Calling Conference --- */
    .about-promo-block {
        gap: 19.2rem;
    }

    .about-promo-block__header {
        gap: 1.6rem;
    }


    .about-promo-block__callout-text {
        font-size: 1.2rem;
    }
}



@media (max-width: 25em) {
    .about-section {
        padding-left: 1.6rem;
        padding-right: 1.6rem;
    }

    /* ----- 글씨 ----- */
    .about-feature-block__title,
    .about-promo-block__title {
        font-size: 1.8rem;
    }

    .about-promo-block__subtitle {
        font-size: 2.0rem;
    }

    .about-feature-block__intro,
    .about-feature-block__footer,
    .about-promo-block__description {
        font-size: 1.4rem;
    }
}



@media (max-width: 16em) {
    .about-promo-block__callout-text {
        font-size: 1.0rem;
    }
}