/* LŽTBKA — institutional visual identity.
   Core idea: "Multiple voices, one public space." Expressed through
   converging fine lines, editorial typography and asymmetrical
   composition rather than any literal icon or stock imagery.
   Deliberately distinct from the ALESIN.LT design system and from a
   government/law-firm/generic-NGO/startup/portfolio look.
   Fonts declared with system fallbacks so rendering never depends on the
   Google Fonts request succeeding. */

:root {
    --lztbka-bg: #FAF8F5;
    --lztbka-ink: #1B1B1B;
    --lztbka-accent: #1B3A6B;
    --lztbka-accent-light: #E9EDF2;
    --lztbka-rule: #D8D3CC;
    --lztbka-muted: #5C5850;
    --lztbka-gold: #A9822E;

    --lztbka-font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --lztbka-font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

body.lztbka {
    margin: 0;
    font-family: var(--lztbka-font-sans);
    color: var(--lztbka-ink);
    background: var(--lztbka-bg);
    line-height: 1.7;
    font-size: 1.02rem;
    overflow-x: hidden;
}

body.lztbka a {
    color: var(--lztbka-accent);
    text-decoration: none;
}

/* Subtle underline-motion links (About, Activities, Organization, Contact,
   footer). Not applied to nav or brand, which have their own hover style. */
.lztbka-section__body a,
.lztbka-footer__inner a {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size 0.25s ease;
}

.lztbka-section__body a:hover,
.lztbka-footer__inner a:hover {
    background-size: 100% 1px;
}

@media (prefers-reduced-motion: reduce) {
    * ,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* ---------------------------------------------------------------------- */
/* Shared line motif                                                      */
/* ---------------------------------------------------------------------- */

.motif-line {
    stroke: var(--lztbka-accent);
    stroke-width: 2;
    stroke-linecap: round;
    fill: none;
}

.motif-line--a {
    opacity: 0.9;
}

.motif-line--b {
    opacity: 0.45;
}

.motif-line--c {
    opacity: 0.3;
}

.motif-line--accent {
    stroke: var(--lztbka-gold);
    opacity: 0.55;
}

/* Signature mark — R3: editorial-rule/Ž geometry, navy bar terminating
   in an angular point, with one restrained gold dot. Bar fill inherits
   the institutional navy; the dot is the mark's one deliberate gold
   accent. Used in the header (inline) and mirrored in the standalone
   mark-color.svg / mark-mono.svg assets for non-website contexts. */
.lztbka-mark__bar {
    fill: none;
    stroke: var(--lztbka-accent);
    stroke-width: 3;
}

.lztbka-mark__dot {
    fill: var(--lztbka-gold);
}

/* ---------------------------------------------------------------------- */
/* Header                                                                  */
/* ---------------------------------------------------------------------- */

.lztbka-header {
    background: var(--lztbka-bg);
    border-bottom: 1px solid var(--lztbka-rule);
    position: relative;
}

.lztbka-header__inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0.9rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.lztbka-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    flex-shrink: 0;
}

.lztbka-brand svg {
    width: 40px;
    height: 22px;
    display: block;
}

.lztbka-brand__name {
    font-family: var(--lztbka-font-serif);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.03em;
    color: var(--lztbka-ink);
}

.lztbka-nav {
    display: flex;
    gap: 1.5rem;
    flex: 1;
}

.lztbka-nav a {
    color: var(--lztbka-ink);
    font-size: 0.92rem;
    padding: 0.2rem 0;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.lztbka-nav a:hover,
.lztbka-nav a:focus-visible {
    color: var(--lztbka-accent);
    border-bottom-color: var(--lztbka-accent);
}

.lztbka-brand:focus-visible,
.lztbka-nav a:focus-visible,
.lang-switcher a:focus-visible,
.lztbka-nav-toggle-label:focus-visible,
.domain-link a:focus-visible,
.lztbka-section__body a:focus-visible,
.lztbka-footer__inner a:focus-visible {
    outline: 2px solid var(--lztbka-accent);
    outline-offset: 3px;
}

.lang-switcher {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
    font-family: var(--lztbka-font-sans);
    font-size: 0.85rem;
}

.lang-switcher a {
    color: var(--lztbka-muted);
    padding: 0.1rem 0.3rem;
}

.lang-switcher a.is-active {
    color: var(--lztbka-accent);
    font-weight: 600;
}

/* Mobile nav toggle — CSS only, no JavaScript */
.lztbka-nav-toggle-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.lztbka-nav-toggle-label {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    margin-left: auto;
}

.lztbka-nav-toggle-label span {
    display: block;
    height: 2px;
    background: var(--lztbka-ink);
    border-radius: 1px;
}

/* ---------------------------------------------------------------------- */
/* Hero — asymmetrical editorial composition                              */
/* ---------------------------------------------------------------------- */

.lztbka-hero {
    max-width: 1120px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 2rem;
    display: grid;
    grid-template-columns: 1fr 2.2fr;
    gap: 2rem;
    align-items: start;
}

.lztbka-hero__left {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.lztbka-hero__label {
    font-family: var(--lztbka-font-sans);
    font-weight: 600;
    letter-spacing: 0.14em;
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--lztbka-accent);
}

.lztbka-hero__motif {
    width: 100%;
    max-width: 180px;
    height: auto;
    display: block;
}

.lztbka-hero__right {
    min-width: 0;
}

.lztbka-hero__legal-name {
    font-family: var(--lztbka-font-serif);
    font-weight: 600;
    font-size: clamp(1.6rem, 2.4vw + 1rem, 2.5rem);
    line-height: 1.3;
    color: var(--lztbka-ink);
    margin: 0 0 0.6rem;
    max-width: 30ch;
}

.lztbka-hero__descriptive {
    font-family: var(--lztbka-font-sans);
    font-size: 1.05rem;
    color: var(--lztbka-muted);
    margin: 0 0 0.75rem;
    max-width: 42ch;
}

.lztbka-hero__tagline {
    font-family: var(--lztbka-font-sans);
    font-size: 0.98rem;
    color: var(--lztbka-muted);
    margin: 0;
    max-width: 40ch;
    padding-left: 1.25rem;
    border-left: 2px solid var(--lztbka-rule);
}

/* ---------------------------------------------------------------------- */
/* Numbered editorial sections — shared skeleton                          */
/* ---------------------------------------------------------------------- */

.lztbka-main {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 1.5rem 3rem;
}

.lztbka-section {
    position: relative;
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 1.5rem;
    padding: 2.25rem 0;
    border-top: 1px solid var(--lztbka-rule);
}

.lztbka-section::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 26%;
    height: 2px;
    background: var(--lztbka-accent);
    opacity: 0.8;
}

.lztbka-section__number {
    font-family: var(--lztbka-font-sans);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    color: var(--lztbka-accent);
    padding-top: 0.2rem;
}

.lztbka-section__body h2 {
    font-family: var(--lztbka-font-serif);
    font-weight: 600;
    font-size: 1.4rem;
    color: var(--lztbka-ink);
    margin: 0 0 0.9rem;
}

.lztbka-section__body p {
    max-width: 62ch;
    margin: 0 0 0.75rem;
}

/* ---- 01 About: calm single column (default skeleton, no extra rules) --- */

/* ---- 02 Activities: two-column typographic matrix, roman-numeral index -- */

.activities-matrix {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 70ch;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    counter-reset: lztbka-activity;
    border-top: 1px solid var(--lztbka-rule);
}

.activities-matrix li {
    counter-increment: lztbka-activity;
    padding: 0.75rem 1rem 0.75rem 0;
    border-bottom: 1px solid var(--lztbka-rule);
    font-size: 0.98rem;
}

.activities-matrix li::before {
    content: counter(lztbka-activity, lower-roman) '. ';
    font-family: var(--lztbka-font-sans);
    font-weight: 600;
    color: var(--lztbka-muted);
    font-size: 0.85rem;
    margin-right: 0.35rem;
}

.activities-matrix li:nth-child(odd) {
    border-right: 1px solid var(--lztbka-rule);
    padding-right: 1.25rem;
}

.activities-matrix li:nth-child(odd) {
    padding-left: 0;
}

.activities-matrix li:nth-child(even) {
    padding-left: 1.25rem;
}

/* ---- 03 Our work and principles: the one expressive typographic moment - */

.lztbka-section--principles::before {
    background: var(--lztbka-gold);
    opacity: 0.8;
    width: 34%;
}

.pull-statement {
    font-family: var(--lztbka-font-serif);
    font-weight: 500;
    font-size: clamp(1.25rem, 1.1vw + 1rem, 1.6rem);
    line-height: 1.45;
    color: var(--lztbka-ink);
    max-width: 48ch;
    margin: 0 0 1.1rem;
    padding-left: 1.1rem;
    border-left: 3px solid var(--lztbka-gold);
}

.pull-supporting {
    font-family: var(--lztbka-font-sans);
    font-size: 0.96rem;
    color: var(--lztbka-muted);
    max-width: 58ch;
}

/* ---- 04 Organization details: dense, clean data grid ------------------- */

.org-details {
    max-width: 62ch;
    padding-top: 0.25rem;
}

.org-details__legal-name {
    font-weight: 600;
    font-size: 1.02rem;
    margin-bottom: 1rem;
    font-family: var(--lztbka-font-serif);
}

.org-details dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.45rem 1.25rem;
    margin: 0;
}

.org-details dt {
    font-weight: 600;
    color: var(--lztbka-muted);
    font-size: 0.9rem;
    font-family: var(--lztbka-font-sans);
}

.org-details dd {
    margin: 0;
    font-size: 0.96rem;
    font-family: var(--lztbka-font-sans);
}

/* Domain relationship — visible, but visually secondary: smallest type on
   the page, no border-box/icon/banner, reads as ordinary institutional
   disclosure rather than a verification notice. */
.domain-relationship {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--lztbka-rule);
    max-width: 62ch;
}

.domain-relationship h3 {
    font-family: var(--lztbka-font-sans);
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--lztbka-muted);
    margin: 0 0 0.6rem;
}

.domain-relationship p {
    font-size: 0.9rem;
    color: var(--lztbka-muted);
}

.domain-link a {
    font-weight: 600;
    color: var(--lztbka-accent);
}

/* ---- 05 Contact: compact closing composition ---------------------------- */

.lztbka-section--contact {
    padding-bottom: 1.5rem;
}

.contact-block p {
    margin: 0.2rem 0;
    max-width: 50ch;
}

.contact-block__name {
    font-weight: 600;
    font-size: 1.05rem;
    font-family: var(--lztbka-font-serif);
}

/* ---------------------------------------------------------------------- */
/* Footer                                                                  */
/* ---------------------------------------------------------------------- */

.lztbka-footer {
    background: var(--lztbka-accent-light);
    border-top: 1px solid var(--lztbka-rule);
}

.lztbka-footer__motif {
    display: block;
    width: 100%;
    max-width: 220px;
    height: auto;
    margin: 0 auto;
    padding-top: 1.25rem;
}

.lztbka-footer__inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 1rem 1.5rem 1.75rem;
    font-size: 0.88rem;
    color: var(--lztbka-muted);
}

.lztbka-footer__inner p {
    margin: 0.25rem 0;
}

.lztbka-footer__legal-name {
    font-weight: 600;
    color: var(--lztbka-ink);
    font-family: var(--lztbka-font-serif);
    margin-bottom: 0.5rem;
}

.lztbka-footer__inner a {
    color: var(--lztbka-accent);
}

/* ---------------------------------------------------------------------- */
/* Responsive                                                             */
/* ---------------------------------------------------------------------- */

@media (max-width: 900px) {
    .lztbka-hero {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .lztbka-hero__left {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
    }

    .lztbka-hero__motif {
        max-width: 120px;
    }

    .lztbka-hero__legal-name {
        max-width: none;
    }
}

@media (max-width: 860px) {
    .activities-matrix {
        grid-template-columns: 1fr;
    }

    .activities-matrix li:nth-child(odd) {
        border-right: none;
        padding-right: 0;
    }

    .activities-matrix li:nth-child(even) {
        padding-left: 0;
    }
}

@media (max-width: 720px) {
    .lztbka-nav-toggle-label {
        display: flex;
    }

    .lztbka-nav {
        display: none;
        flex-direction: column;
        gap: 0;
        width: 100%;
        order: 3;
        border-top: 1px solid var(--lztbka-rule);
        margin-top: 0.75rem;
        padding-top: 0.5rem;
    }

    .lztbka-nav a {
        padding: 0.6rem 0;
        border-bottom: 1px solid var(--lztbka-rule);
    }

    .lztbka-nav-toggle-input:checked ~ .lztbka-nav {
        display: flex;
    }

    .lztbka-header__inner {
        flex-wrap: wrap;
    }

    .lztbka-section {
        grid-template-columns: 40px 1fr;
        gap: 1rem;
    }

    .org-details dl {
        grid-template-columns: 1fr;
        gap: 0.15rem 0;
    }

    .org-details dd {
        margin-bottom: 0.5rem;
    }

    .pull-statement {
        font-size: 1.25rem;
    }
}