/* About page: four showroom photos in place of the old building photo (owner, 2026-11-14). The window with the
   Barami sign on top, three photos under it, all in the same calm proportions. */
.barami-about-gallery { display: grid; gap: 10px; }
.barami-about-gallery img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 4px;
}
.barami-about-gallery .barami-about-gallery__row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

/* About page text sized to the photos beside it (owner, 2026-11-14: "too long and too big"). */
body.page-id-11 .barami-content { font-size: 16px; line-height: 1.75; letter-spacing: 0; }
@media (min-width: 1024px) { body.page-id-11 .barami-content { font-size: 17px; } }
body.page-id-11 .barami-content p { margin: 0 0 12px; }
body.page-id-11 .barami-content :is(h1, h2, h3) { font-size: 26px; line-height: 1.35; letter-spacing: 0; margin: 0 0 16px; }
@media (min-width: 1024px) { body.page-id-11 .barami-content :is(h1, h2, h3) { font-size: 30px; } }
body.page-id-11 .barami-content .row { align-items: center; }
/* Round 2: a little smaller still, so the text ends about where the photos end. */
@media (min-width: 1024px) {
    body.page-id-11 .barami-content { font-size: 15px; line-height: 1.6; }
    body.page-id-11 .barami-content p { margin: 0 0 9px; }
    body.page-id-11 .barami-content :is(h1, h2, h3) { font-size: 26px; margin-bottom: 12px; }
}

/* Round 3 (owner, 2026-11-14): text on the right, photos on the left, both columns starting and ending on the same
   lines. Two equal columns; the text spreads over the photos' full height. */
@media (min-width: 1024px) {
    body.page-id-11 .barami-content .row {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 56px;
        align-items: stretch;
        margin: 0;
    }
    body.page-id-11 .barami-content .row > [class*="col-"] {
        width: auto !important;
        max-width: none !important;
        flex: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    body.page-id-11 .barami-content .row > [class*="col-"]:first-child {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    body.page-id-11 .barami-content .row > [class*="col-"]:first-child > :first-child { margin-top: 0; }
    body.page-id-11 .barami-content .row > [class*="col-"]:first-child > :last-child { margin-bottom: 0; }
    body.page-id-11 .barami-about-gallery { height: 100%; grid-template-rows: 1fr auto; }
    body.page-id-11 .barami-about-gallery > img.is-main { height: 100%; aspect-ratio: auto; min-height: 0; }
}
/* Round 3b: the photos keep their own size (they set the row's height); the text stretches to the same top and
   bottom lines. */
@media (min-width: 1024px) {
    body.page-id-11 .barami-about-gallery { height: auto; grid-template-rows: none; align-self: start; }
    body.page-id-11 .barami-about-gallery > img.is-main { height: auto; aspect-ratio: 4 / 3; }
    body.page-id-11 .barami-about-gallery .barami-about-gallery__row img { aspect-ratio: 4 / 3; }
    body.page-id-11 .barami-content .row > [class*="col-"]:first-child { justify-content: space-between; gap: 10px; }
    body.page-id-11 .barami-content .row > [class*="col-"]:first-child p { margin: 0; }
}

/* Round 4 (owner, 2026-11-14): the text-and-photos block centred on the page, not pressed to the right side. */
body.page-id-11 .barami-content { margin-inline: auto !important; max-width: 1240px !important; }

/* Round 5 (owner, 2026-11-14): no title band or breadcrumb line; the page opens right under the header. */
.barami-about-top { height: var(--header-height, 200px); }
/* Round 5b: the text block has its own top space, so the spacer is shorter than the header. */
.barami-about-top { height: max(0px, calc(var(--header-height, 200px) - 90px)); }
/* Round 5c (owner, 2026-11-14): the heading closer to the menu, so text and photos fit on one screen. */
.barami-about-top + section { padding-top: 40px !important; }

/* English "About Us" (page 7762, owner 2026-11-15): the whole content block left-aligned, left to right. */
body.page-id-7762 main[dir="ltr"] { direction: ltr; text-align: left; }
body.page-id-7762 main[dir="ltr"] :is(h1, h2, h3, p, ul, ol, li, .barami-content) { text-align: left !important; }
body.page-id-7762 main[dir="ltr"] .barami-content { margin-right: auto; margin-left: 0; }