/**
 * About page — Figma 412:6173.
 *
 * A full-bleed breadcrumb bar (page.css) over a 900 px centred content column.
 * Section navigation is the shared floating TOC (toc.css / toc.js); the old
 * hardcoded .sidebar-menu is gone.
 */

.dian-about {
    /* Figma content column. 32 px is the gutter added on either side below. */
    --dian-about-column: 900px;
    --dian-about-rule: #e0dcd7;
}

/* Let the breadcrumb bar reach the viewport edges. */
.dian-about-content {
    width: 100%;
    max-width: 100%;
    flex: 1 1 auto;
}

/* The About page column is narrower than the site default. */
.dian-about .dian-page__header-inner {
    max-width: var(--dian-about-column);
}

/* Section titles are stored lowercase in ACF ("το όραμά μας"); the design
   shows sentence case. The TOC copies the heading text, so it needs it too. */
.dian-about .dian-page__title::first-letter,
.dian-about__section-title::first-letter,
.dian-about-page .bmwp-toc__link::first-letter {
    text-transform: uppercase;
}

.dian-about__body {
    width: 100%;
    max-width: calc(var(--dian-about-column) + 2 * var(--dian-spacing-16));
    margin-inline: auto;
    padding-inline: var(--dian-spacing-16);
    padding-bottom: var(--dian-spacing-96);
    box-sizing: border-box;
}

/* ── Intro (editor content, sits under the title) ─────────────────────────── */
/* Figma body/large — 26 px PF Regal Text Pro, LH 36, 8 px between blocks. */
.dian-about__intro {
    margin-top: var(--dian-spacing-32);
}

.dian-about__intro > * {
    margin-block: 0;
}

.dian-about__intro > * + * {
    margin-top: var(--dian-spacing-8);
}

.dian-about__intro,
.dian-about__intro p,
.dian-about__intro li {
    font-family: var(--dian-regal-reg);
    font-size: var(--dian-body-26);
    line-height: var(--dian-line-height-body-26);
    color: #1e1e1e;
}

/* Figma 412:6248 — disc bullets, 39 px indent on each li, 8 px after the
   lead paragraph. Reset WP/GP ul margin so it does not stack on the indent. */
.dian-about__intro ul,
.dian-about__intro ol {
    list-style-type: disc;
    list-style-position: outside;
    margin: var(--dian-spacing-8) 0 0;
    padding: 0;
}

.dian-about__intro li {
    margin: 0 0 0 3.9rem;
    padding: 0;
}

/* ── Sections ─────────────────────────────────────────────────────────────── */
/* Figma: 64 px from the hero to the first rule, then 32 px either side of
   every rule — hence the border-top + padding-top on each block. */
.dian-about__sections {
    display: flex;
    flex-direction: column;
    gap: var(--dian-spacing-32);
    margin-top: var(--dian-spacing-64);
}

.dian-about__section {
    border-top: 1px solid var(--dian-about-rule);
    padding-top: var(--dian-spacing-32);
    /* Clears the fixed site header when the TOC scrolls to an anchor. */
    scroll-margin-top: var(--dian-spacing-96);
}

/* Figma Titles/H3 — 36 px bold, LH 42, tracking -0.72. */
.dian-about__section-title {
    margin: 0 0 var(--dian-spacing-24);
    font-family: var(--dian-bague-bold);
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 4.2rem;
    letter-spacing: -0.72px;
    color: #1e1e1e;
}

/* Figma body/regular-serif — 22 px PF Regal Text Pro, LH 30. */
.dian-about__section-content,
.dian-about__section-content p,
.dian-about__section-content li {
    font-family: var(--dian-regal-reg);
    font-size: 2.2rem;
    line-height: var(--dian-line-height-body-lg);
    color: #1e1e1e;
}

.dian-about__section-content > *:first-child {
    margin-top: 0;
}

.dian-about__section-content > *:last-child {
    margin-bottom: 0;
}

/* Same list treatment as the intro (Figma 412:6246): disc + 39 px indent.
   Theme paragraphs have no bottom margin, so a ul after a p needs the 8 px
   gap the design puts between the lead sentence and the list. */
.dian-about__section-content ul,
.dian-about__section-content ol {
    list-style-type: disc;
    list-style-position: outside;
    margin: 0;
    padding: 0;
}

.dian-about__section-content p + ul,
.dian-about__section-content p + ol {
    margin-top: var(--dian-spacing-8);
}

.dian-about__section-content li {
    margin: 0 0 0 3.9rem;
    padding: 0;
}

/* ── Tables in section content (e.g. Advisory board) ──────────────────────── */
/* Figma: name column 218 px, detail column fills; 18 px cells, #e0dcd7 rules. */
.dian-about__section-content table {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

.dian-about__section-content th,
.dian-about__section-content td {
    border: 0;
    border-bottom: 1px solid var(--dian-about-rule);
    text-align: left;
    vertical-align: middle;
    font-size: var(--dian-body-18);
    line-height: var(--dian-line-height-body-sm);
}

.dian-about__section-content th {
    padding: var(--dian-spacing-16) var(--dian-spacing-24);
    font-family: var(--dian-bague-medium);
    font-weight: 500;
    color: #556566;
}

.dian-about__section-content td {
    padding: var(--dian-spacing-24);
    height: 8.5rem;
    font-family: var(--dian-bague-reg);
    color: #556566;
}

/* Name column. */
.dian-about__section-content th:first-child,
.dian-about__section-content td:first-child {
    width: 218px;
    font-family: var(--dian-bague-medium);
    font-weight: 500;
    color: #1e1e1e;
}

/* The table's last row draws a bottom rule that would stack with the next
   section's border-top. Drop it so a table section shows a single divider. */
.dian-about__section-content .dian-about__board tbody tr:last-child td {
    border-bottom: 0;
}

/* Group heading row (e.g. Πρόεδρος / Μέλη) spans both columns. */
.dian-about__section-content .dian-about__board-group td {
    width: auto;
    font-family: var(--dian-bague-medium);
    font-weight: 500;
    color: #1e1e1e;
    text-align: left;
}

/* Keep email / LinkedIn links readable inside the table. */
.dian-about__section-content .dian-about__board a {
    color: #009ca7;
    text-decoration: underline;
}

.dian-about__section-content .dian-about__board a:hover,
.dian-about__section-content .dian-about__board a:focus {
    text-decoration: none;
}

/* The editor wraps cell text in <p>; keep the cell's type, not the body serif. */
.dian-about__section-content th > p,
.dian-about__section-content td > p {
    margin: 0;
    font: inherit;
    color: inherit;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media screen and (max-width: 1024px) {
    .dian-about__intro,
    .dian-about__intro p,
    .dian-about__intro li {
        font-size: 2.2rem;
        line-height: 3.2rem;
    }

    .dian-about__section-title {
        font-size: 2.8rem;
        line-height: 3.4rem;
        letter-spacing: -0.5px;
    }
}

@media screen and (max-width: 782px) {
    .dian-about__body {
        padding-bottom: var(--dian-spacing-48);
    }

    .dian-about__intro,
    .dian-about__intro p,
    .dian-about__intro li,
    .dian-about__section-content,
    .dian-about__section-content p,
    .dian-about__section-content li {
        font-size: var(--dian-body-18);
        line-height: var(--dian-line-height-body-md);
    }

    .dian-about__intro li,
    .dian-about__section-content li {
        margin-left: var(--dian-spacing-24);
    }

    .dian-about__sections {
        gap: var(--dian-spacing-24);
        margin-top: var(--dian-spacing-40);
    }

    .dian-about__section {
        padding-top: var(--dian-spacing-24);
    }

    .dian-about__section-title {
        margin-bottom: var(--dian-spacing-16);
        font-size: 2.4rem;
        line-height: 3rem;
    }

    /* Collapse the two-column table into stacked rows. */
    .dian-about__section-content table,
    .dian-about__section-content tbody,
    .dian-about__section-content tr,
    .dian-about__section-content td {
        display: block;
        width: 100%;
        height: auto;
    }

    .dian-about__section-content thead {
        display: none;
    }

    .dian-about__section-content tr {
        padding-block: var(--dian-spacing-16);
        border-bottom: 1px solid var(--dian-about-rule);
    }

    .dian-about__section-content td,
    .dian-about__section-content td:first-child {
        width: 100%;
        padding: var(--dian-spacing-4) 0;
        border: 0;
    }
}