/* Shared layout helpers for the front page sections */

.section__inner {
    max-width: 1100px;
    margin-inline: auto;
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
}

.section__inner--narrow {
    max-width: 780px;
}

.section__heading {
    margin: 0 0 16px;
    font-size: clamp(24px, 4vw, 32px);
    text-align: center;
}

.about .section__heading {
    text-align: left;
}

.section__lead {
    margin: 0 0 48px;
    color: var(--color-text-sub);
    text-align: center;
}

.section__link {
    margin-top: 48px;
    text-align: center;
}

.section__link a {
    padding-bottom: 2px;
    border-bottom: 1px solid currentColor;
}

.section__link a:hover,
.section__link a:focus-visible {
    color: var(--color-pink);
}

/* ---------------------------------- */
/* 1. Hero / First View */
/* ---------------------------------- */

.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    min-height: 70svh;
    padding-block: 48px;
}

@media (min-width: 768px) {
    .hero {
        min-height: 75vh;
        min-height: 75svh;
    }
}

.hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    max-width: 1000px;
    margin-inline: auto;
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
    text-align: center;
}

.hero__copy {
    margin: 0;
    font-size: clamp(22px, 5vw, 32px);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.hero__image img {
    width: 100%;
    max-width: 480px;
    margin-inline: auto;
}

@media (min-width: 600px) {
    .hero__image img {
        max-width: 620px;
    }
}

@media (min-width: 900px) {
    .hero__image img {
        max-width: 760px;
    }
}

@media (min-width: 1200px) {
    .hero__image img {
        max-width: 860px;
    }
}

@media (max-width: 767px) {
    /*
     * The artwork itself draws grass to its own left/right edges, so
     * letting the image escape .hero__inner's side padding (instead of
     * shrinking it to fit inside that padding) is what makes the grass
     * reach the edges of the screen, matching the Ending treatment.
     */
    .hero__inner {
        gap: 12px;
    }

    .hero__image {
        width: 100vw;
        /*
         * The artwork itself has a large blank area above the grass
         * line (the pig peeks up from roughly the bottom half of the
         * frame), so most of the visible gap between the copy and the
         * illustration is empty pixels inside the image, not the flex
         * gap above. Pulling the image up compensates for that blank
         * margin so copy + illustration read as one Hero, while still
         * leaving some breathing room before the grass appears.
         */
        margin-top: -100px;
        margin-inline: calc(50% - 50vw);
    }

    .hero__image img {
        max-width: none;
    }
}

/* ---------------------------------- */
/* 2. About / とぅむぶたとは */
/* ---------------------------------- */

.about {
    background-color: var(--color-bg-sub);
    padding-block: clamp(70px, 10vw, 160px);
}

.about__inner {
    display: grid;
    gap: 48px;
}

.about__body,
.about__keyphrase {
    margin: 0 0 24px;
}

.about__keyphrase {
    margin-top: 32px;
    margin-bottom: 0;
}

.about__image {
    display: flex;
    justify-content: center;
}

.about__image img {
    width: 100%;
    max-width: 280px;
}

@media (max-width: 767px) {
    /* Tighten the text -> character -> link rhythm so About reads as
       one grouped section on narrow screens instead of three floating
       blocks; desktop's own gap (below) is untouched. */
    .about__inner {
        gap: 28px;
    }

    /* Give the whole section a single center axis on mobile only;
       PC keeps the left-aligned text + right-aligned image layout. */
    .about__text {
        text-align: center;
    }

    .about .section__heading {
        text-align: center;
    }

    .about .section__link {
        margin-top: 32px;
    }
}

@media (min-width: 768px) {
    .about__inner {
        grid-template-columns: 1.4fr 1fr;
        align-items: center;
        gap: 64px;
    }

    .about__image {
        justify-content: flex-end;
    }

    .about__image img {
        max-width: 340px;
    }
}

/* ---------------------------------- */
/* 3. Daily / とぅむぶたの日々 */
/* ---------------------------------- */

.daily {
    padding-block: clamp(70px, 10vw, 160px);
}

.daily__scenes {
    display: flex;
    flex-direction: column;
    gap: 72px;
    margin: 56px 0 0;
}

.daily__scene {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: fit-content;
    max-width: 240px;
}

.daily__scene--a {
    align-self: flex-start;
}

.daily__scene--b {
    align-self: flex-end;
}

.daily__scene-image img {
    width: 100%;
    max-width: 200px;
}

.daily__scene-text {
    margin: 0;
    text-align: center;
    color: var(--color-text-main);
}

@media (max-width: 767px) {
    /* Slightly larger images and a softer left/right lean than the
       flush-to-edge alignment used at wider widths. */
    .daily__scene {
        max-width: 280px;
    }

    .daily__scene--a {
        margin-left: 20px;
    }

    .daily__scene--b {
        margin-right: 20px;
    }

    .daily__scene-image img {
        max-width: 240px;
    }
}

@media (min-width: 768px) {
    .daily__scenes {
        gap: 112px;
    }

    .daily__scene {
        max-width: 300px;
    }

    .daily__scene-image img {
        max-width: 260px;
    }
}

/* ---------------------------------- */
/* 4. Goods / とぅむぶたグッズ */
/* ---------------------------------- */

.goods {
    padding-block: clamp(70px, 10vw, 160px);
}

.goods__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 56px;
}

@media (max-width: 767px) {
    /* Main image full-width on its own row, the two sub images side
       by side underneath -- achieved with the existing markup via
       grid auto-placement, no HTML changes needed. */
    .goods__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .goods__item--main {
        grid-column: 1 / -1;
    }
}

@media (min-width: 768px) {
    .goods__grid {
        grid-template-columns: 1.4fr 1fr;
        grid-template-rows: repeat(2, 1fr);
    }

    .goods__item--main {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    .goods__item:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    .goods__item:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
    }
}

/* ---------------------------------- */
/* 5. News / おしらせ */
/* ---------------------------------- */

.news {
    padding-block: clamp(70px, 10vw, 160px);
}

.news__list {
    margin: 56px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--color-border);
}

.news__item {
    border-bottom: 1px solid var(--color-border);
}

.news__link {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px 4px;
}

.news__link:focus-visible {
    outline: 2px solid var(--color-text-main);
    outline-offset: 4px;
}

.news__meta {
    display: flex;
    gap: 16px;
    font-size: 0.85rem;
    color: var(--color-text-sub);
}

.news__title {
    font-size: 1rem;
}

.news__link:hover .news__title,
.news__link:focus-visible .news__title {
    color: var(--color-pink);
}

.news__empty {
    margin: 56px 0 0;
    text-align: center;
    color: var(--color-text-sub);
}

@media (min-width: 768px) {
    .news__link {
        flex-direction: row;
        align-items: baseline;
        gap: 24px;
    }

    .news__meta {
        flex: 0 0 auto;
        width: 160px;
    }

    .news__title {
        flex: 1;
    }
}

/* ---------------------------------- */
/* 6. Ending */
/* ---------------------------------- */

.ending {
    padding-block: clamp(70px, 10vw, 160px);
}

.ending__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    text-align: center;
}

.ending__image {
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
}

@media (max-width: 767px) {
    /* PC and mobile now share the same (1600x1000) artwork, whose
       grass already reaches its own left/right edges, so letting it
       escape the centered column is what makes the grass reach the
       screen edges. Because it's the same image PC uses, the
       character renders proportionally smaller here than the old
       mobile-only crop did (see report). */
    .ending__image {
        width: 100vw;
        max-width: none;
        margin-inline: calc(50% - 50vw);
    }
}

@media (min-width: 768px) {
    .ending__image {
        max-width: 900px;
    }
}

.ending__copy {
    margin: 0;
    font-size: clamp(20px, 4vw, 28px);
    font-weight: 700;
}

/* ---------------------------------- */
/* 7. Play / あそぶ */
/* ---------------------------------- */

.play {
    padding-block: clamp(70px, 10vw, 160px);
}

.play__note {
    margin: 24px 0 0;
    color: var(--color-text-sub);
    font-size: 0.85rem;
    text-align: center;
}