/* Styles for the "とぅむぶたグッズ" page template (page-templates/goods.php) only. */

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

.goods-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;
}

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

.goods-page__lead {
    margin: 0;
}

.goods-page__items {
    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 closing shop section and the shared footer. */
    padding-bottom: clamp(96px, 14vw, 200px);
}

.goods-page__item {
    margin-inline: auto;
    margin-bottom: clamp(72px, 11vw, 130px);
    text-align: center;
}

.goods-page__item-image img,
.goods-page__pair-image img {
    margin-inline: auto;
}

.goods-page__item-name {
    margin: 16px 0 4px;
    font-size: clamp(16px, 3vw, 18px);
    font-weight: 700;
}

.goods-page__item-copy {
    margin: 0;
    color: var(--color-text-sub);
}

/* 1. 3Dフィギュア: large and centered, ~90-100% of the padded container. */
.goods-page__item--figure .goods-page__item-image {
    max-width: 95%;
    margin-inline: auto;
}

/*
 * 2. アクリルキーホルダー: a bit smaller than the figure (~75-80% of the
 * container) and nudged slightly to the right, echoing the same subtle
 * left/right bias used on the "とぅむぶたの日々" page.
 */
.goods-page__item--keychains .goods-page__item-image {
    max-width: 78%;
    margin-left: 14%;
    margin-right: auto;
}

/* 3. ステッカー: same size as the keychains, mirrored to the left. */
.goods-page__item--stickers .goods-page__item-image {
    max-width: 78%;
    margin-left: auto;
    margin-right: 14%;
}

/* 4. ポストカード: back to large and centered, like the figure. */
.goods-page__item--postcards .goods-page__item-image {
    max-width: 95%;
    margin-inline: auto;
}

/*
 * 5. クリアファイル: slightly smaller than the postcard, centered with
 * only a mild rightward nudge (kept modest per spec: "極端な左右配置には
 * しない").
 */
.goods-page__item--clear-files .goods-page__item-image {
    max-width: 85%;
    margin-left: 8%;
    margin-right: auto;
}

/* 6 & 7: two-photo groups, side by side. */
.goods-page__pair {
    display: flex;
    gap: 16px;
    align-items: flex-end;
}

.goods-page__pair-image {
    flex: 1 1 0;
    min-width: 0;
}

/* 6. ミニタオルとコースター、7. ポーチと巾着: both an even 50:50 split. */

/*
 * Quiet closing section after the 7th group: event/venue copy first,
 * then a clear visual break, then the online-shop links — kept
 * separate so the two are never read as "buy these exact photographed
 * items online".
 */
.goods-page__shop {
    margin-top: clamp(96px, 14vw, 200px);
    text-align: center;
}

.goods-page__shop-text {
    margin: 0 0 20px;
}

/*
 * Widen only the gap between the event/venue copy ("見つけたら連れて
 * 帰れます。") and the online-shop copy ("オンラインでお迎えできる...")
 * so the two ideas read as distinct, without touching the tighter
 * spacing used between the first two lines or before the shop links.
 */
.goods-page__shop-text:nth-of-type(2) {
    margin-bottom: 44px;
}

.goods-page__shop-text:last-of-type {
    margin-bottom: 32px;
}

.goods-page__shop-links {
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 32px;
}

.goods-page__shop-link {
    padding-bottom: 2px;
    border-bottom: 1px solid currentColor;
}

.goods-page__shop-link:hover,
.goods-page__shop-link:focus-visible {
    color: var(--color-pink);
}

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