/**
 * Frontend styles
 */

.c-page-header {
    position: relative;
    width: 100%;
    /* PC: 390px / 1920px = 20.3125% aspect ratio */
    aspect-ratio: 1920 / 390;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Fallback for browsers that don't support aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
    .c-page-header {
        height: 0;
        padding-bottom: 20.3125%; /* 390 / 1920 * 100 */
    }

    .c-page-header > .c-container {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.c-page-header__content {
    position: relative;
    z-index: 1;
    width: 100%;
}

.c-page-header__title {
    line-height: 1.3;
    word-wrap: break-word;
}

.c-page-header__subtitle {
    line-height: 1.5;
    word-wrap: break-word;
}

/* Alignment variations */
.c-page-header[data-align="left"] .c-page-header__content {
    text-align: left;
}

.c-page-header[data-align="center"] .c-page-header__content {
    text-align: center;
}

.c-page-header[data-align="right"] .c-page-header__content {
    text-align: right;
}

/* Mobile (SP): 886px / 1600px = 55.375% aspect ratio */
@media screen and (max-width: 767px) {
    .c-page-header {
        aspect-ratio: 1600 / 886;
    }

    @supports not (aspect-ratio: 1 / 1) {
        .c-page-header {
            padding-bottom: 55.375%; /* 886 / 1600 * 100 */
        }
    }
}