/* Gallery archive: align container to TOP (1180/centered) and equalize grid L/R margins.
   2026-05-14 — replaces previous left-only `margin-left: -20px` hack. */

/* Step 1: relax .l-contents.l-inner constraint for gallery archive only,
   so .container can center on the viewport like the TOP page.
   Includes taxonomy archives so /gallery_type/* and /gallery_tag/* match. */
.post-type-archive-gallery .l-contents.l-inner,
.tax-gallery_type   .l-contents.l-inner,
.tax-gallery_tag    .l-contents.l-inner {
    max-width: none;
    width: 100%;
    padding: 0;
}

/* Restore .container's 92.1875% rule on SP (parent theme's `.l-inner .container { width:100% }`
   would otherwise stretch container to full viewport now that .l-inner padding is gone). */
@media only screen and (max-width: 767px) {
    .post-type-archive-gallery .l-inner .container,
    .tax-gallery_type   .l-inner .container,
    .tax-gallery_tag    .l-inner .container {
        width: 92.1875%;
        max-width: 1180px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Step 2: drop the negative-margin trick; use `gap` for true symmetry.
   .gallery_ul already has `display:flex; flex-wrap:wrap` via .list_flex_wrapper. */
.gallery_list .gallery_ul {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    gap: 20px;
}

.gallery_list .gallery_ul li {
    margin-left: 0;
    margin-bottom: 0;
    width: calc((100% - 40px) / 3);   /* PC: 3col, 2 gaps */
    box-sizing: border-box;
    max-width: 100%;
}

@media only screen and (max-width: 1120px) {
    .gallery_list .gallery_ul li,
    .gallery_list .gallery_ul li:nth-child(3n) {
        width: calc((100% - 20px) / 2);  /* tablet: 2col, 1 gap */
    }
}

@media only screen and (max-width: 767px) {
    .gallery_list .gallery_ul li,
    .gallery_list .gallery_ul li:nth-child(3n) {
        width: calc((100% - 20px) / 2);  /* SP: 2col, 1 gap */
    }
    .gallery_list .gallery_ul li img {
        max-width: 100%;
        height: auto;
        box-sizing: border-box;
    }
}