/* Styles for the "とぅむぶたの日々" page template (page-templates/daily.php) only. */

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

.daily-page__inner {
    max-width: 640px;
    margin-inline: auto;
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
    text-align: center;
}

.daily-page__heading {
    margin: 0 0 24px;
    font-size: clamp(24px, 4vw, 32px);
}

.daily-page__lead {
    margin: 0;
}

.daily-page__scenes {
    max-width: 640px;
    margin-inline: auto;
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
    /* Gap between the ending block and the shared footer. */
    padding-bottom: clamp(96px, 14vw, 200px);
}

.daily-page__scene {
    margin-inline: auto;
    margin-bottom: clamp(56px, 9vw, 110px);
    text-align: center;
}

.daily-page__scene-image img {
    margin-inline: auto;
}

.daily-page__scene--wide {
    max-width: 100%;
}

/*
 * 80% of the already-padded container lands close to 70-75% of the
 * actual screen width on common phone sizes (the container itself
 * has already lost ~40px to its own side padding), which is what the
 * spec means by "画面幅のおよそ70〜75%程度".
 */
.daily-page__scene--square {
    max-width: 80%;
}

.daily-page__scene--right {
    margin-left: 12%;
    margin-right: auto;
}

.daily-page__scene--left {
    margin-left: auto;
    margin-right: 12%;
}

.daily-page__caption {
    margin: 16px 0 0;
    color: var(--color-text-main);
}

/*
 * The 8th scene keeps its normal margin-bottom (same as every other
 * scene); it collapses with this margin-top into a single gap sized
 * by the larger value, which is what gives the ending its own
 * deliberately bigger breathing room without stacking two margins.
 */
.daily-page__ending {
    margin-top: clamp(96px, 14vw, 200px);
    text-align: center;
}

.daily-page__ending-text {
    margin: 0 0 32px;
    font-size: clamp(18px, 3.5vw, 22px);
    color: var(--color-text-main);
}

/*
 * 55% of the already-padded container lands close to ~50% of the
 * actual screen width on common phone sizes (same reasoning as the
 * square scenes above), matching the "実画面幅のおよそ45〜55%程度" target.
 */
.daily-page__ending-image img {
    margin-inline: auto;
    max-width: 55%;
}

/*
 * .daily-page__scenes already ends with a generous padding-bottom
 * (clamp(96px, 14vw, 200px)); reusing that as the gap between the
 * ending image and this link keeps the "十分な余白" without adding a
 * second large gap. This wrapper only adds a smaller gap of its own
 * before the shared footer.
 */
.daily-page__back-home {
    padding-bottom: clamp(64px, 10vw, 120px);
}