/* ---------------------------- */
/* GLOBAL SETTINGS & VARIABLES  */
/* ---------------------------- */

/* ========== GLOBAL STYLES ========== */

body {
    margin: 0;
    padding: 0;
    background-color: #dfe8f5;
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
}

.page-container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    padding-top: 40px;
}

:root {
    --main-title-font: "Garamond", serif;
    --subtitle-font: "Helvetica Neue Light", sans-serif;
    --body-font: "Helvetica Neue", sans-serif;

    --main-title-color: #5C3D28;
    --text-color: #333;
}

/* Reset */
body, h1, h2, h3, p, ul, li {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--body-font);
    color: var(--text-color);
}

/* ---------------------------- */
/* TOP NAV BAR                  */
/* ---------------------------- */

.top-nav {
    background-color: #144B73;
    padding: 36px 0;
    position: sticky;
    top: 0;
    z-index: 999;
}

.top-nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 0;
    margin: 0;
}

.top-nav a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
}

.top-nav a:hover {
    color: gray;
}

.top-nav a.active {
    color: red;
}

/* ---------------------------- */
/* MAIN TITLE                   */
/* ---------------------------- */

.main-title {
    font-family: var(--main-title-font);
    font-size: 39px;
    font-weight: 700;
    color: var(--main-title-color);
    padding-left: 15ch;
    margin-bottom: 10px;
}

/* ---------------------------- */
/* SUBTITLE + SOCIAL ICONS      */
/* ---------------------------- */

.subtitle {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.subtitle-line h2 {
    font-family: var(--subtitle-font);
    font-size: 24px;
    font-weight: 300;
    padding-left: 35ch;
    margin: 0;
}

.social-icons {
    display: flex;
    align-items: center;
    margin-left: 20px;
}

.social-icons img {
    width: 28px;
    height: auto;
    margin-left: 10px;
}

/* ---------------------------- */
/* IMAGE BLOCK                  */
/* ---------------------------- */

.image-block {
    text-align: center;
    margin-top: 30px;
}

.image-block img {
    width: 100%;
    max-width: 900px;
    height: auto;
}

/* ---------------------------- */
/* FULL-WIDTH VIDEO             */
/* ---------------------------- */

.video-fullwidth {
    width: 80%;
    max-width: 900px;
    margin: 50px auto;
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    background-color: #000;
    overflow: hidden;
    margin: 40px 0;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: #000;
}

/* ---------------------------- */
/* PROJECTS PAGE LAYOUT         */
/* ---------------------------- */

.page-title h1 {
    text-align: center;
    font-size: 36px;
    margin-bottom: 40px;
}

.project-list {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: nowrap;
}

.project-item {
    flex: 0 0 calc(50% - 80px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.project-image img {
    width: 100%;
    height: auto;
    max-width: 400px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.project-description {
    width: 100%;
    max-width: 400px;
    text-align: left;
    line-height: 1.6;
}

.project-description p {
    margin-bottom: 15px;
}

.email-link {
    color: #144B73;
    font-weight: 500;
    text-decoration: none;
}

.email-link u {
    text-decoration: underline;
}

/* ---------------------------- */
/* STORYTELLER PAGE LAYOUT      */
/* ---------------------------- */

.storyteller-page .page-title h1 {
    text-align: center;
    font-size: 36px;
    margin-bottom: 30px;
}

.body-text {
    margin-bottom: 25px;
    line-height: 1.7;
}

.image-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 40px 0;
}

.image-row img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* 4-wide images */
.image-row.four-wide img {
    width: calc(25% - 20px);
}

/* 3-wide */
.image-row.three-wide img {
    width: calc(33.333% - 20px);
}

/* portrait row */
.image-row.portraits img {
    width: 22%;
    height: auto;
    object-fit: cover;
}

.bottom-spacer {
    height: 80px;
}

/* ---------------------------- */
/* STORYTELLER WIDTH FIX        */
/* ---------------------------- */

/* FIXED — now matches Projects exactly */
.page-container.storyteller-page {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
}

/* ---------------------------- */
/* IMAGE SIZE FIXES YOU ASKED   */
/* ---------------------------- */

/* storyteller1.jpg — reduce to 50% + center */
.storyteller-page .image-row:first-of-type img {
    width: 65%;
    margin: 0 auto;
    display: block;
}

/* storyteller2.jpg — match storyteller1 */
.storyteller-page .image-row.three-wide img {
    width: 80%;
    margin: 0 auto;
    display: block;
}

/* storyteller3.jpg — match storyteller1 */
.storyteller-page .image-row.portraits img {
    width: 80%;
    margin: 0 auto;
    display: block;
    object-fit: cover;
}
/* STORYTELLER — paragraph width matches nav bar text edges */
.storyteller-page .body-text {
    max-width: 720px; /* Adjusted to match left "H" and right "t" */
    margin-left: auto;
    margin-right: auto;
}
/* Restore video sizing/centering for Storyteller page only */
.storyteller-page .video-fullwidth {
    width: 80%;
    max-width: 900px;
    margin: 50px auto; /* centers and restores vertical spacing */
    box-sizing: border-box;
}

/* Keep the responsive 16:9 wrapper behavior inside Storyteller */
.storyteller-page .video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin: 40px 0;
}

.storyteller-page .video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: #000;
}
/* ACTOR PAGE — 3-column thumbnail grid */
.three-column-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.three-column-grid img {
    width: 100%;
    height: auto;
    object-fit: cover;
    cursor: pointer;
    border-radius: 4px;
    transition: opacity 0.2s ease-in-out;
}

.three-column-grid img:hover {
    opacity: 0.8;
}

/* Remove link underline for images */
.three-column-grid a {
    text-decoration: none;
}
/* ---------------------------- */
/* ACTOR PAGE — MATCH STORYTELLER PARAGRAPHS */
/* ---------------------------- */

.actor-page h1 {
    text-align: center;
    font-size: 36px;
    margin-bottom: 30px; /* same as storyteller page */
    font-family: var(--main-title-font);
    color: var(--main-title-color);
}

.actor-page .body-text {
    max-width: 720px;      /* matches Storyteller paragraph width */
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;      /* same spacing as storyteller */
    margin-bottom: 25px;   /* spacing between paragraphs */
}
/* ---------------------------- */
/* ACTOR PAGE SPECIFIC STYLING  */
/* ---------------------------- */

.actor-page h1 {
    /* Match Storyteller title */
    font-family: var(--main-title-font);
    font-size: 36px;
    color: var(--main-title-color);
    text-align: center;
    margin-bottom: 30px;
}

.actor-page .body-text {
    max-width: 720px;      /* same as Storyteller */
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
    margin-bottom: 25px;
}

/* Reduce all images in the 3-column grid by 75% */
.actor-page .actor-grid {
    width: 75%;            /* shrink entire grid */
    margin: 0 auto 40px;   /* center and add vertical spacing */
    gap: 15px;             /* optional: smaller gap between images */
}

.actor-page .actor-grid img {
    width: 100%;           /* scales within reduced container */
    height: auto;
    object-fit: cover;
}
/* ---------------------------- */
/* ACTOR PAGE SPECIFIC STYLING  */
/* ---------------------------- */

.actor-page h1 {
    font-family: "Helvetica Neue", Arial, sans-serif; /* match Storyteller exactly */
    font-size: 36px;
    color: #000; /* black */
    text-align: center;
    margin-bottom: 30px;
    font-weight: 700; /* bold like Storyteller */
}

.actor-page .body-text {
    max-width: 720px;      /* same as Storyteller */
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
    margin-bottom: 25px;
}

/* Reduce all images in the 3-column grid by 75% */
.actor-page .actor-grid {
    width: 75%;            /* shrink entire grid */
    margin: 0 auto 40px;   /* center and add vertical spacing */
    gap: 15px;             /* optional: smaller gap between images */
}

.actor-page .actor-grid img {
    width: 100%;           /* scales within reduced container */
    height: auto;
    object-fit: cover;
}
/* =============================== */
/* MAKING OF BABY STEPS — PAGE FIXES */
/* =============================== */

.mobs-page {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
}

/* Match Storyteller body paragraph width */
.mobs-page .body-text {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
    margin-bottom: 25px;
}

/* Center ALL images */
.mobs-page .centered-image-wrapper {
    text-align: center;
    margin: 40px 0;
}

.mobs-page .centered-image-wrapper img {
    width: 100%;
    max-width: 900px;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Big Title formatting */
.mobs-big-title {
    font-family: var(--main-title-font);
    font-size: 32px;
    text-align: center;
    color: var(--main-title-color);
    max-width: 720px;
    margin: 40px auto; /* space ABOVE and BELOW the title */
    line-height: 1.3;
}

/* Force title into two even lines */
.mobs-big-title {
    display: inline-block;
}

/* Divider line removed (optional): 
   If you keep <hr>, style it properly */
.mobs-page .thin-divider {
    width: 60%;
    margin: 20px auto;
}

/* Center + size video (match Storyteller) */
.mobs-page .video-fullwidth {
    width: 80%;
    max-width: 900px;
    margin: 50px auto;
}

.mobs-page .video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin: 40px 0;
}

.mobs-page .video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: #000;
}
/* MAKING-OF-BABY-STEPS — reduce ONLY the first image */
.mobs-page .centered-image-wrapper.first-image img {
    width: 50%;
    max-width: 350px; /* optional — ensures it stays modest */
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/* MAKING-OF-BABY-STEPS — fix title centering */
.mobs-page .mobs-big-title {
    text-align: center !important;
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;  /* override inherited padding from other title styles */
    width: 100%;
    max-width: 720px;  /* matches Storyteller text width */
    line-height: 1.3;
}
.mobs-page .mobs-big-title {
    font-size: 28px;   /* was 32px — this size will force the title into 2 lines */
    text-align: center !important;
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    width: 100%;
    max-width: 720px;
    line-height: 1.3;
}

/* MANDARIN PAGE — match photo width */
.mandarin-page .body-text {
    max-width: 900px;      /* same as photo */
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
}
/* Add space above the paragraph */
.body-text {
    margin-top: 30px; /* adjust the number as needed */
}
/* ---------------------------- */
/* MOBILE FIXES FOR iPHONE      */
/* ---------------------------- */
@media screen and (max-width: 768px) {

    /* Center main title, remove left padding */
    .main-title {
        font-size: 32px; /* smaller on phone */
        padding-left: 0;
        text-align: center;
    }

    /* Subtitle + social icons stack vertically */
    .subtitle-line {
        padding-left: 0;
        text-align: center;
    }

    .subtitle {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .social-icons {
        margin-left: 0;
        justify-content: center;
    }

    .subtitle-line h2 {
        font-size: 20px;
    }

    /* Video and images */
    .video-fullwidth, .image-block {
        width: 100%;
        margin: 20px auto;
    }

    /* Reduce social icon size */
    .social-icons img {
        width: 24px;
        height: auto;
    }

    /* Reduce nav font size for mobile */
    .top-nav a {
        font-size: 16px;
    }

    /* Reduce spacing */
    .top-nav {
        padding: 20px 0;
    }

    /* Page container padding */
    .page-container {
        padding-top: 20px;
    }
}
/* ---------------------------- */
/* MOBILE NAV BAR FIX           */
/* ---------------------------- */
@media screen and (max-width: 768px) {
    .top-nav ul {
        flex-direction: column;      /* stack links vertically */
        gap: 15px;                   /* space between each link */
        align-items: center;         /* center links horizontally */
    }

    .top-nav a {
        font-size: 18px;             /* slightly bigger tap area */
    }
/* ---------------------------- */
/* MOBILE STACK TITLES CLEANLY  */
/* ---------------------------- */
@media screen and (max-width: 768px) {
    /* For English page */
    .main-title {
        display: block;
        text-align: center;
        line-height: 1.3; /* spacing between lines */
    }

    .main-title span {
        display: block; /* forces each part to a new line */
    }

    .subtitle-line h2 {
        text-align: center; /* WRITER-DIRECTOR-ACTOR centered */
        margin-top: 5px;
    }

    /* For 中文 page */
    .main-title.chinese span {
        display: block;
        text-align: center;
    }

    .subtitle-line.chinese h2 {
        text-align: center;
        margin-top: 5px;
    }
}
/* ---------------------------- */
/* MOBILE STACK TITLES           */
/* ---------------------------- */
@media screen and (max-width: 768px) {
    /* Break BARNEY CHENG and 鄭伯昱 onto separate lines */
    .main-title {
        text-align: center;     /* center titles */
        white-space: normal;    /* allow wrapping */
    }

    /* Force a line break at the space between English and Chinese */
    .main-title {
        display: inline-block;  /* allows text wrapping properly */
    }

    /* Subtitle centered under names */
    .subtitle-line h2 {
        text-align: center;
        margin-top: 5px;
        display: block;
    }
}
/* ---------------------------- */
/* MOBILE OPENING IMAGE FIX     */
/* ---------------------------- */
@media screen and (max-width: 768px) {

    /* Hide the main title, subtitle, and social icons */
    .main-title,
    .subtitle-line {
        display: none !important;
    }

    /* Show a single opening image instead */
    .page-container::before {
        content: "";
        display: block;
        width: 100%;
        max-width: 600px; /* adjust if needed */
        height: auto;
        margin: 30px auto; /* top and bottom spacing */
        padding: 0 15px; /* left-right padding */
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    /* English page */
    body:not(.mandarin-page) .page-container::before {
        background-image: url('../images/openingpic.jpg');
    }

    /* Mandarin page */
    body.mandarin-page .page-container::before {
        background-image: url('../images/mandarinpic.jpg');
    }
}