/* Kaizen home page, new design under development (Mauro, 27 October 2026).
   Served at kaizen-bjj.be/beta/, not linked and not indexed; the public home page is unchanged.
   Fonts: the self-hosted Lato of the main site (/css/lato.css). */

:root {
    --ink: #141414;
    --text: #3d3d3d;
    --muted: #5c5c5c;
    --line: #ececec;
    --mist: #f4f3f1;
    --red: #c8231f;
    --red-dark: #a51b18;
    --link: #b51f1e;
    --wrap: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 72px; }

body {
    margin: 0;
    font-family: Lato, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink);
    background: #fff;
}

img { max-width: 100%; }
a { color: var(--link); text-decoration: none; }
a:hover { color: #7d1514; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

/* ---------- header: logo, languages, menu button; menu laid out in the bar only when the
   whole header fits on one line (js decides, class .kz-wide on <header>) ---------- */

.kz-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid var(--line);
}

.kz-bar {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 56px;
    white-space: nowrap;
}

.kz-bar > * { flex-shrink: 0; }   /* nothing squeezes: if it does not fit, the menu collapses */

.kz-logo img { display: block; height: 32px; width: auto; }

.kz-langs {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 700;
}

.kz-langs a {
    display: inline-block;
    min-width: 30px;
    padding: 3px 6px;
    border-radius: 6px;
    text-align: center;
    text-decoration: none;
    color: #2a6fb0;
}

.kz-langs a[aria-current="true"] { background: #2a6fb0; color: #fff; }

.kz-nav {
    display: none;            /* collapsed: the links live in the drop-down panel */
    margin-left: auto;
    gap: 26px;
    font-size: 15px;
    font-weight: 700;
}

.kz-nav a { color: var(--ink); text-decoration: none; }
.kz-nav a:hover { color: var(--link); }

.kz-menu-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid #d8d8d8;
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
}

.kz-menu-btn svg { width: 22px; height: 22px; }

.kz-header.kz-wide .kz-nav { display: flex; }
.kz-header.kz-wide .kz-menu-btn,
.kz-header.kz-wide .kz-panel { display: none !important; }

.kz-panel {
    border-top: 1px solid var(--line);
    background: #fff;
}

.kz-panel[hidden] { display: none; }

.kz-panel ul {
    list-style: none;
    margin: 0 auto;
    padding: 8px 20px 14px;
}

.kz-panel a {
    display: block;
    padding: 11px 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
}

.kz-panel li:last-child a { border-bottom: none; }

/* ---------- common ---------- */

.section { padding: 88px 0; }
.section.mist { background: var(--mist); }

.eyebrow {
    margin: 0 0 10px;
    color: var(--red);
    font-weight: 900;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

h2.title {
    margin: 0 0 22px;
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.15;
    font-weight: 900;
}

.text { color: var(--text); }
.text p { margin: 0 0 16px; }

.btn {
    display: inline-block;
    padding: 12px 22px;
    border-radius: 26px;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    border: 1.5px solid transparent;
}

.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-dark); color: #fff; }
.btn-ghost { border-color: rgba(255, 255, 255, 0.85); color: #fff; }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.btn-line { border-color: var(--ink); color: var(--ink); }
.btn-line:hover { background: var(--ink); color: #fff; }

.split {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 44px 72px;
}

.split > .main { flex: 1 1 440px; min-width: 0; }
.split > .side { flex: 0 1 380px; min-width: 0; margin: 0; }

.card {
    background: #fff;
    border-radius: 14px;
    padding: 26px 28px;
}

.card h3 { margin: 0 0 12px; font-size: 20px; font-weight: 900; }

/* ---------- hero ---------- */

.hero {
    position: relative;
    overflow: hidden;
    background: #1b2530;
    min-height: min(640px, 88vh);
    display: flex;
    align-items: center;
}

.hero > img.bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.88;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 14, 20, 0.08) 0%, rgba(10, 14, 20, 0.08) 55%, rgba(10, 14, 20, 0.5) 100%);
}

.hero .inner {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 80px 20px 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
}

/* Logo and academy line as on the published home page: logo at most 560 px (82 % on phones),
   academy line as wide as the logo in every language and size (beta.js, fitAcademyLine) */
.hero h1.intro-logo { margin: 0 auto; width: 100%; max-width: 560px; }
.hero h1.intro-logo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45)); }
@media (max-width: 767px) { .hero h1.intro-logo { max-width: 82%; } }

.academy {
    display: block;
    width: max-content;
    margin: 0.55em auto 0;
    padding-left: 0.2em;          /* balances the letter spacing after the last letter */
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 1.2;
    white-space: nowrap;
    text-transform: uppercase;
    font-size: 26px;
    color: #fff;
    text-shadow: 0.07em 0 0 #111, -0.07em 0 0 #111, 0 0.07em 0 #111, 0 -0.07em 0 #111,
                 0.05em 0.05em 0 #111, -0.05em 0.05em 0 #111, 0.05em -0.05em 0 #111, -0.05em -0.05em 0 #111,
                 0 3px 10px rgba(0, 0, 0, 0.45);
}

.hero .tagline {
    margin: 8px 0 0;
    max-width: 560px;
    color: #fff;
    font-size: 19px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.hero .ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }

/* ---------- motto band ---------- */

.motto { background: var(--ink); color: #fff; }
.motto p {
    margin: 0;
    padding: 34px 0;
    text-align: center;
    font-size: clamp(20px, 2.6vw, 30px);
    line-height: 1.35;
    font-weight: 400;
    font-style: italic;
}

/* ---------- classes ---------- */

.cards { display: flex; flex-wrap: wrap; gap: 24px; }
.cards > .grow { flex: 1 1 420px; min-width: 0; }
.cards > .narrow { flex: 1 1 320px; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 24px; }

table.schedule { width: 100%; border-collapse: collapse; font-size: 16px; }
table.schedule td { padding: 10px 0; border-bottom: 1px solid var(--line); }
table.schedule tr:last-child td { border-bottom: none; }
table.schedule td:last-child { text-align: right; font-weight: 700; white-space: nowrap; }
.nogi { color: var(--muted); }

.note { margin: 14px 0 0; color: var(--muted); font-size: 14px; }

ul.closures { list-style: none; margin: 0; padding: 0; font-size: 16px; }
ul.closures li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--line);
}
ul.closures li:last-child { border-bottom: none; }
ul.closures li span:last-child { font-weight: 700; white-space: nowrap; }
ul.closures .why { color: var(--muted); font-weight: 400; }

.more-btn {
    margin-top: 10px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--link);
    font: inherit;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
}

.card.dark { background: var(--ink); color: #fff; }
.card.dark p { color: #d6d6d6; }

.strip {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-top: 40px;
    padding-bottom: 8px;
}

.strip img {
    flex: 0 0 auto;
    width: min(420px, 80vw);
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
    scroll-snap-align: start;
}

/* ---------- kids ---------- */

.kids-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.kids-photos img { width: 100%; object-fit: cover; border-radius: 12px; display: block; }
.kids-photos img.wide { grid-column: span 2; aspect-ratio: 16 / 9; }
.kids-photos img.small { aspect-ratio: 4 / 3; height: 100%; }
.kids-photos .times {
    background: var(--mist);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 15px;
    color: var(--text);
}
.kids-photos .times b { font-size: 17px; color: var(--ink); }

/* ---------- team ---------- */

.profs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 24px; }

.prof {
    background: #fff;
    border-radius: 14px;
    padding: 26px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

/* Portrait in a belt ring (Mauro, 27 October 2026). The ring is the belt image of the main site
   (--ring, set in belts.css or by script for professors and instructors), shown in the padding only;
   inside it, a white disc with a grey head-and-shoulders silhouette, under the photograph. While the
   photograph loads, or if it fails (beta.js then empties it), the placeholder is what shows. */
img.belt-photo {
    display: block;
    margin: 0 auto;
    padding: 9px;
    width: 130px;
    height: auto;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    border: 1px solid #000;
    border-radius: 50%;
    object-fit: cover;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='39' r='17' fill='%23c4c4c4'/%3E%3Cpath d='M17 100c0-24 15-36 33-36s33 12 33 36z' fill='%23c4c4c4'/%3E%3C/svg%3E") center / 100% no-repeat content-box,
        linear-gradient(#fff, #fff) content-box,
        var(--ring, linear-gradient(#ddd, #ddd)) center / auto no-repeat padding-box;
}

.prof img.belt-photo { width: 160px; }
.prof b { font-size: 18px; margin-top: 10px; }
.prof span { color: var(--muted); font-size: 14px; }

.family {
    margin-top: 28px;
    background: #fff;
    border-radius: 14px;
}

.family > button {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border: 0;
    background: none;
    font: inherit;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

.faces { display: flex; }
.faces img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; }
.faces img + img { margin-left: -10px; }
.family .label { flex: 1 1 200px; font-weight: 700; }
.family .label span { color: var(--muted); font-weight: 400; }
.family .action { font-weight: 700; color: var(--link); }

.family-body { padding: 4px 20px 24px; }
.family-body h3 { margin: 26px 0 14px; font-size: 18px; font-weight: 900; }

.people {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
    gap: 18px 12px;
}

.person { text-align: center; font-size: 14px; }
.person img.belt-photo { margin-bottom: 8px; }
.person b { display: block; font-size: 15px; }
.person span { color: var(--muted); font-size: 13px; }

/* ---------- name ---------- */

.kanji { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.kanji img { width: 100%; max-width: 340px; height: auto; }
.kanji figcaption { font-size: 22px; color: var(--text); }

/* ---------- contact and map ---------- */

/* Carlotta's photo behind the contacts, as on the current site (Mauro, 27 October 2026): she sits
   on the right of the photo, the card on the left. On phones she is pushed against the right edge
   so the card stands beside her face, never on it (same composition as the published page). */
.contact-photo {
    background: #0d3a49 url(/img/Banner1.jpg) center right / cover no-repeat;
    min-height: 460px;
    display: flex;
    align-items: center;
    padding: 64px 0;
}

.contact-photo .wrap { width: 100%; }

.contact-title {
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 900;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.contact-card {
    max-width: 400px;
    background: #fff;
    border-radius: 14px;
    padding: 20px 24px;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.2);
}

.contact-card table { width: 100%; border-collapse: collapse; font-size: 16px; }
.contact-card td { padding: 9px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.contact-card td:first-child { padding-right: 18px; }
.contact-card tr:last-child td { border-bottom: none; }
.contact-card td:last-child { text-align: right; }
.contact-card p { margin: 12px 0 0; color: var(--text); font-size: 15px; }

.contact .map { display: block; }
.contact .map img { display: block; width: 100%; height: 420px; object-fit: cover; object-position: 55% 50%; }

@media (max-width: 767px) {
    .contact-photo {
        --ph: max(300px, 60vw);
        display: block;
        min-height: var(--ph);
        padding: 36px 0;
        background:
            linear-gradient(to bottom, #0d3a49 0, #0d3a49 calc(100% - var(--ph) + 10px), rgba(13, 58, 73, 0) calc(100% - var(--ph) + 90px)),
            linear-gradient(to right, rgba(13, 58, 73, 0.45) 0, rgba(13, 58, 73, 0) 65%),
            url(/img/Banner1.jpg) right calc(-0.425 * var(--ph)) bottom / auto var(--ph) no-repeat,
            #0d3a49;
    }
    .contact-title { font-size: 30px; }
    /* only as wide as its content, so it stays beside her face */
    .contact-card { width: max-content; max-width: 100%; padding: 10px 14px; border-radius: 10px; }
    .contact-card table { width: auto; font-size: 13px; }
    .contact-card td { padding: 6px 0; }
    .contact-card p { font-size: 12px; }
    .contact .map img { height: 340px; }
}

@media (max-width: 374px) {
    .contact-photo {
        padding-bottom: 300px;
        background:
            linear-gradient(to bottom, #0d3a49 0, #0d3a49 calc(100% - 305px), rgba(13, 58, 73, 0.5) calc(100% - 235px), rgba(13, 58, 73, 0) calc(100% - 150px)),
            url(/img/Banner1.jpg) right bottom / max(100%, 760px) auto no-repeat,
            #0d3a49;
    }
}

/* ---------- affiliations and footer ---------- */

.affiliations { border-top: 1px solid var(--line); }
.affiliations .wrap {
    padding-top: 52px;
    padding-bottom: 52px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 26px 48px;
}
.affiliations p { margin: 0; font-weight: 900; font-size: 18px; }
.logos { display: flex; flex-wrap: wrap; align-items: center; gap: 26px 52px; }
.logos img { height: 64px; width: auto; display: block; }

footer { background: var(--ink); color: #d6d6d6; font-size: 14px; }
footer .wrap {
    padding-top: 38px;
    padding-bottom: 38px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 22px;
}
footer .who { display: flex; flex-direction: column; gap: 6px; }
footer nav { display: flex; flex-wrap: wrap; gap: 10px 22px; align-content: flex-start; }
footer a { color: #d6d6d6; text-decoration: none; }
footer a:hover { color: #fff; }

.beta-flag {
    position: fixed;
    left: 12px;
    pointer-events: none;
    bottom: 12px;
    z-index: 60;
    padding: 6px 10px;
    border-radius: 6px;
    background: #2a6fb0;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

@media (max-width: 600px) {
    .section { padding: 64px 0; }
}

/* Round X at the end of each opened panel (Mauro, 27 October 2026): sticky, so it floats at the
   bottom of the screen while the panel is in view and leaves with the panel when it ends. */
.panel-close {
    position: sticky;
    bottom: 16px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 12px 0 0 auto;
    border: 0;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.panel-close[hidden] { display: none; }
.panel-close svg { width: 20px; height: 20px; }
.panel-close:hover { background: #333; }

/* Team story, opened on request */
.story { max-width: 760px; }
.story > .more-btn { margin-top: 0; }
.story-body { margin-top: 14px; padding: 20px 24px 6px; background: #fff; border-radius: 14px; }

/* Timetables: the one in force looks as usual; the other one, shown on request, is greyed out
   with a warning (beta.js, setupTimetables) */
.timetable .not-now { display: none; }
.timetable.other h3,
.timetable.other table.schedule td,
.timetable.other .nogi { color: #a3a3a3; }
.timetable.other table.schedule td:last-child { font-weight: 400; }
.timetable.other .not-now {
    display: block;
    margin: 14px 0 0;
    padding: 9px 12px;
    border-radius: 8px;
    background: #fff4e5;
    color: #8a4b00;
    font-size: 14px;
    font-weight: 700;
}
.timetable .switch {
    margin-top: 14px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    color: var(--muted);
    text-decoration: underline;
    cursor: pointer;
}
.timetable .switch:hover { color: var(--ink); }

/* Bilingual pages of the kids path (Mauro, 27 October 2026): every block exists twice, with
   lang="en" and lang="fr"; bilingual.js hides one of the two. Without script both show. */
.lang-bar { margin: 0 0 22px; font-size: 15px; }
.lang-bar button { background: none; border: 0; padding: 0 .4em; font: inherit; color: var(--red); cursor: pointer; }
.lang-bar button:first-child { padding-left: 0; }
.lang-bar button[aria-pressed="true"] { font-weight: 700; color: var(--ink); cursor: default; }
.lang-bar .sep { color: #999; }
body.show-en [lang="fr"], body.show-fr [lang="en"] { display: none !important; }

/* Data from Grist (site-data.js, 30 October 2026): the spinning wheel while /data/site.json loads,
   and the notice if it cannot be loaded. */
.kz-spin { display: inline-block; width: 16px; height: 16px; border: 2.5px solid #f0c9c9; border-top-color: var(--red);
           border-radius: 50%; animation: kz-spin .8s linear infinite; vertical-align: -2px; }
.kz-loading.block, td.kz-loading, li.kz-loading { display: block; padding: 10px 0; }
@keyframes kz-spin { to { transform: rotate(360deg); } }
.kz-fail { margin: 0; padding: 10px 18px; background: #fdecec; color: #8a1c1c; font-size: 15px; text-align: center; }

/* Languages (lang.js, 30 October 2026): the page stays hidden while the texts of another language load */
.kz-translating body { visibility: hidden; }

.nowrap { white-space: nowrap; }
.profs.stacked .prof > span .nowrap { display: block; }
.profs.stacked .prof > span .sep { display: none; }

/* ---------- Google reviews (3 November 2026) ---------- */

.reviews .rating { margin: -8px 0 28px; font-size: 18px; color: var(--text); }
.reviews .stars { color: #e3a008; letter-spacing: 0.08em; font-size: 20px; }
.quotes { display: flex; flex-wrap: wrap; gap: 24px; }
.quote {
    flex: 1 1 300px;
    min-width: 0;
    margin: 0;
    padding: 28px 28px 24px;
    background: #fff;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
}
.quote blockquote {
    margin: 0 0 16px;
    color: var(--text);
    font-size: 16px;
    line-height: 1.65;
    flex: 1;
}
.quote blockquote::before { content: "\201C"; display: block; color: var(--red); font-size: 44px; line-height: 0.8; font-weight: 900; }
.quote figcaption { font-weight: 900; color: var(--ink); }
.more-reviews { margin: 28px 0 0; }
.more-reviews a { font-weight: 700; }
.more-reviews a::after { content: " \2192"; }