/* ==========================================================================
   EAP — inner pages (Figma frames: epitropi 2001:208, xrisima 2012:329,
   nea 2012:886, article 2077:346, contact 2012:1142)
   ========================================================================== */

/* ── Shared: body text + two-column page scaffold (410px label col) ──────── */

.body-text {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}

.body-text p {
    margin: 0 0 24px;
}

.body-text p:last-child {
    margin-bottom: 0;
}

/* Lists from the editors (accordions, ΙΣΤΟΡΙΚΟ, policy pages): same gap
   below as a paragraph instead of the browser's 1em top/bottom + 40px indent. */
.body-text ul,
.body-text ol {
    margin: 0 0 24px;
    padding-left: 22px;
}

.body-text ul:last-child,
.body-text ol:last-child,
.body-text li:last-child {
    margin-bottom: 0;
}

/* Every content list on the site: 14px between items, 12px ≤1023px. Scoped
   to content lists so menus (header, mobile, footer) keep their own spacing. */
.body-text li,
.members-list li,
.studies-group__list li {
    margin-bottom: 14px;
}

@media (max-width: 1023px) {
    .body-text li,
    .members-list li,
    .studies-group__list li {
        margin-bottom: 12px;
    }
}

.body-text a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.body-text a:hover {
    color: var(--color-accent);
}

.page-head {
    display: grid;
    grid-template-columns: 410px 1fr;
    padding: 150px 0 0;
}

.page-head--section {
    padding-top: 130px;
}

.page-head__title {
    margin: 0;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
}

.page-head__sub {
    margin: 4px 0 0;
    max-width: 360px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
}

.page-cols {
    display: grid;
    grid-template-columns: 410px 1fr;
}

/* ── Epitropi: members ───────────────────────────────────────────────────── */

.epitropi-intro {
    margin-top: 110px;
    max-width: 1124px;
}

.members-label {
    margin: 70px 0 0;
    font-size: 24px;
    font-weight: 700;
}

.members-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 80px 25px;
    margin-top: 60px;
    max-width: 1150px;
}

.member__photo {
    display: block;
    width: 175px;
    height: 175px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.15);
}

.member__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Each photo has its own organic shape — uneven per-corner radii from
   Figma frame 2001:208 (tl tr br bl), used raw: when a side's radii add up
   to more than 175px, CSS scales all four down proportionally — the same
   rule Figma applies, so #1 renders as its lopsided blob, not a circle.
   The 8 shapes repeat if more members are added. */
.members-grid .member:nth-child(8n+1) .member__photo { border-radius: 88px 254px 543px 140px; }
.members-grid .member:nth-child(8n+2) .member__photo { border-radius: 60px 79px 40px 58px; }
.members-grid .member:nth-child(8n+3) .member__photo { border-radius: 102px 40px 59px 24px; }
.members-grid .member:nth-child(8n+4) .member__photo { border-radius: 58px 74px 21px 94px; }
.members-grid .member:nth-child(8n+5) .member__photo { border-radius: 23px 40px 21px 81px; }
.members-grid .member:nth-child(8n+6) .member__photo { border-radius: 70px 101px 24px 23px; }
.members-grid .member:nth-child(8n+7) .member__photo { border-radius: 67px 53px 79px 31px; }
.members-grid .member:nth-child(8n+8) .member__photo { border-radius: 70px 48px 71px 17px; }
.members-grid--secretary .member:nth-child(n) .member__photo { border-radius: 70px 79px 37px 41px; }

/* Figma: text 25px under the photo; name line, then role 10px below. */
.member__text {
    margin: 25px 0 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    max-width: 340px;
}

.member__name-line,
.member__role {
    display: block;
}

.member__role {
    margin-top: 10px;
}

.member__name {
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.member__name--plain {
    cursor: auto;
}

button.member__name:hover {
    color: var(--color-accent);
}

.members-list {
    margin: 60px 0 0;
    padding: 0;
    list-style: none;
}

/* ── Accordions ──────────────────────────────────────────────────────────── */

.accordion {
    margin-top: 130px;
    border-top: 1px solid var(--color-text);
    border-bottom: 1px solid var(--color-text);
}

.accordion__row {
    margin: 0;
}

/* Standalone accordion (ΕΠΙΤΡΟΠΗ ΙΣΤΟΡΙΚΟ): the section spans the full
   viewport, so its rules live on the row inside .container instead —
   lines stop at the 50px gutters and frame just the title bar. */
.accordion:not(.accordion--stacked) {
    border-top: 0;
    border-bottom: 0;
}

.accordion:not(.accordion--stacked) .accordion__row {
    border-top: 1px solid var(--color-text);
    border-bottom: 1px solid var(--color-text);
}

/* Open: the bottom rule moves from under the title to under the content,
   so the text sits inside the two lines. (The panel is `hidden` when
   closed, so its border only shows while open.) */
.accordion:not(.accordion--stacked):has(.accordion__trigger[aria-expanded='true']) .accordion__row {
    border-bottom: 0;
}

.accordion:not(.accordion--stacked) .accordion__panel {
    border-bottom: 1px solid var(--color-text);
}

.accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    width: 100%;
    padding: 24px 0;
    background: none;
    border: none;
    font-family: var(--font-main);
    font-size: 40px;
    font-weight: 700;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.accordion__trigger:hover {
    color: var(--color-accent);
}

/* Plus icon (collapsed) / minus icon (expanded) — the real Figma SVG
   assets. Rendered as CSS mask-images so `currentColor` still tints them
   (so they turn accent-blue on hover along with the trigger text). */
.accordion__icon {
    flex: 0 0 39px;
    width: 39px;
    height: 39px;
    background-color: currentColor;
    -webkit-mask: url('../img/icon-plus.svg') no-repeat center / contain;
            mask: url('../img/icon-plus.svg') no-repeat center / contain;
    transition: -webkit-mask-image 0.15s ease, mask-image 0.15s ease;
}

.accordion__trigger[aria-expanded='true'] .accordion__icon {
    -webkit-mask-image: url('../img/icon-minus.svg');
            mask-image: url('../img/icon-minus.svg');
}

.accordion__panel-inner {
    padding: 20px 0 24px;
}

/* Text accordions (ΧΡΗΣΙΜΑ, ΙΣΤΟΡΙΚΟ) get more room under the last line. */
.accordion__panel-inner.body-text {
    padding: 20px 0 44px;
}

.accordion .accordion__panel-inner {
    max-width: 1290px;
    margin-left: 410px;
}

/* Stacked accordion rows share borders */
.accordion-stack {
    margin: 120px 0 0;
}

.accordion-stack .accordion {
    margin-top: 0;
    border-bottom: 0;
}

.accordion-stack .accordion:last-child {
    border-bottom: 1px solid var(--color-text);
}

/* ── Xrisima ─────────────────────────────────────────────────────────────── */

.xrisima-search {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    padding-top: 28px;
}

.xrisima-search__label {
    margin: 0;
    flex: 0 0 257px;
    font-size: 32px;
    font-weight: 700;
}

.xrisima-search__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 20px;
    /* Full width of what's left beside the label (and of the column on
       mobile); min-width: 0 lets it shrink instead of pushing past the edge. */
    width: 100%;
    min-width: 0;
    padding-top: 6px;
}

/* Two flavors:
   .pill        — general (black border → hover: black bg)
   .pill--eap   — EAP-related (blue border → hover: black border + blue bg) */
.pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 16px;
    border: 1px solid var(--color-text);
    border-radius: 7px;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text);
    text-align: left;
    text-decoration: none;
    /* Short labels stay on one line; a label wider than the row wraps
       inside its pill instead of being cut. */
    max-width: 100%;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pill:hover {
    background: var(--color-text);
    border-color: var(--color-text);
    color: #fff;
}

.pill--eap {
    border-color: var(--color-accent);
}

.pill--eap:hover {
    background: var(--color-accent);
    border-color: var(--color-text);
    color: #fff;
}

.pill.is-active {
    background: var(--color-text);
    border-color: var(--color-text);
    color: #fff;
}

/* Bottom rule under the pills row + after ΠΟΛΙΤΙΚΕΣ (per updated Figma) */
.xrisima-search {
    border-bottom: 1px solid var(--color-text);
    padding-bottom: 30px;
}

.xrisima-section--bordered {
    border-bottom: 1px solid var(--color-text);
    padding-bottom: 120px;
}

/* Desktop: when the section's doc list paginates, the pager supplies the
   space above the rule (90 above it, 30 below) instead of the 120px. */
@media (min-width: 1024px) {
    .page-cols__content > .doc-pager {
        margin: 90px 0 30px;
    }

    /* Pager inside an accordion (ΠΕΠΡΑΓΜΕΝΑ). */
    .accordion__panel-inner > .doc-pager {
        margin: 90px 0 0;
    }

    .xrisima-section--bordered:has(.page-cols__content > .doc-pager:not([hidden])) {
        padding-bottom: 0;
    }
}

/* Doc-list pager (ΕΠΟΜΕΝΑ / ΠΡΟΗΓΟΥΜΕΝΑ, right-aligned) */
.doc-pager {
    display: flex;
    justify-content: flex-end;
    gap: 70px;
    margin: 45px 0 0;
}

/* [hidden] would normally imply display:none, but our own .doc-row/.doc-pager
   rules set display:flex and win over the UA style. These bump specificity to
   restore the intended hide-when-hidden behaviour. */
.doc-row[hidden],
.doc-pager[hidden] {
    display: none;
}

.doc-pager button {
    padding: 0;
    background: none;
    border: none;
    font-family: var(--font-main);
    font-size: 24px;
    font-weight: 700;
    color: inherit;
    cursor: pointer;
}

.doc-pager button:hover {
    color: var(--color-accent);
}

.doc-pager button[disabled] {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.xrisima-section {
    position: relative;
    margin-top: 120px;
}

.xrisima-section--studies {
    padding-bottom: 0;
}

/* Spacing between rows lives on the parent as `gap`, not on the row itself.
   :last-child is DOM-based and doesn't know about paginated [hidden] rows,
   which caused a margin-of-difference height jump between slides. */
[data-doc-list] {
    display: flex;
    flex-direction: column;
    gap: 55px;
}

.doc-row {
    display: flex;
    gap: 40px;
}

.doc-row__cover {
    flex: 0 0 141px;
}

.doc-row__cover img {
    width: 141px;
    height: 205px;
    object-fit: cover;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.doc-row__body {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
}

.doc-row__title {
    margin: 0;
    max-width: 627px;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.35;
}

/* Inline variant (ΠΟΛΙΤΙΚΕΣ ΕΑΠ): title and button on the same row. */
.doc-row--inline {
    align-items: center;
}

.doc-row--inline .doc-row__body {
    align-items: center;
    gap: 40px;
}

.doc-row--inline .doc-row__btn {
    margin-left: auto;
}

/* Stacked variant (ΠΕΠΡΑΓΜΕΝΑ): title on top, button below, both aligned
   to the same left edge (right of the cover). */
.doc-row--stacked .doc-row__body {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 99px;
}
.studies-group {
    margin-bottom: 90px;
    max-width: 850px;
}

.studies-group:last-child {
    margin-bottom: 0;
}

.studies-group__heading {
    margin: 0 0 36px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
}

.studies-group__list {
    margin: 0;
    padding: 0 0 0 22px;
    list-style: none;
}

.studies-group__list li {
    position: relative;
}

.studies-group__list li::before {
    content: '\2014';
    position: absolute;
    left: -22px;
    top: 0;
}

.studies-group__note {
    margin: 40px 0 0 22px;
    font-size: 18px;
    font-weight: 600;
}

.studies-group__note a {
    text-decoration: underline;
}

.sticker {
    position: absolute;
    pointer-events: none;
}

/* The fist sticker is pinned with 100vw, which includes the scrollbar, so it
   pokes ~8px past the page edge — clip sideways overflow on this page. */
.page-xrisima {
    overflow-x: clip;
}

/* Pinned to the viewport's right edge (past the container's right padding
   and any auto-margin around it). The negative offset equals half the
   distance from the container-inner width to the viewport width. */
.sticker--fist { top: 90px; right: calc((100% - 100vw) / 2); width: 138px; }
.sticker--rainbow { top: 540px; left: 51px; width: 200px; }
/* Fully visible on big screens; below 1600 it moves to the page edge half
   hidden (see the 1280-1599 media query) so it doesn't sit over the text. */
.sticker--trans { top: 1050px; right: 20px; width: 203px; }
.sticker--intersex { top: 1460px; left: 51px; width: 203px; }

/* ── News listing ────────────────────────────────────────────────────────── */

/* Same top space as .page-head on the other pages (150 / 30 on ≤1023).
   first-of-type: ΝΕΑ starts with a screen-reader-only <h1>, not a section. */
.page-nea .news-section:first-of-type {
    padding-top: 150px;
}

.news-section {
    margin-bottom: 120px;
}

.news-section:last-child {
    margin-bottom: 60px;
}

.news-section__grid {
    display: grid;
    grid-template-columns: 573px 1fr;
}

.news-row {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 30px;
    border-top: 1px solid var(--color-text);
    /* Cap the row to the media square so a long title/excerpt on one card
       can't push adjacent cards apart with dead vertical space. Also clip
       the media (320×320) so it can't overflow into the next row's border. */
    max-height: 320px;
    overflow: hidden;
}

.news-row:last-child {
    border-bottom: 1px solid var(--color-text);
}

.news-row__media {
    display: block;
    width: 320px;
    height: 320px;
}

.news-row__media img,
.news-row__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-row__body {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    /* Reduced vertical padding since the row is now 320px tall — keeps the
       title/excerpt visually balanced instead of squeezing to the middle. */
    padding: 24px 0 24px 10px;
    overflow: hidden;
}

.news-row__title {
    margin: 0 0 24px;
    max-width: 700px;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
}

.news-row__title a {
    text-decoration: none;
}

.news-row__title a:hover {
    color: var(--color-accent);
}

.news-row__excerpt {
    max-width: 553px;
    /* Clamp so the excerpt never grows past what the row can fit. When the
       title is very long the excerpt gets fewer visible lines; when the row
       runs out of height the excerpt is clipped/hidden entirely. */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 0;
}

.news-row__excerpt p {
    margin: 0;
}

.news-section__more {
    margin: 25px 0 0;
    text-align: right;
}

.news-section__more a,
.news-section__pager a,
.post-pager a,
.pager-disabled {
    font-size: 24px;
    font-weight: 700;
    text-decoration: none;
}

/* Missing ΕΠΟΜΕΝΟ/ΠΡΟΗΓΟΥΜΕΝΟ stays as faded text, same as the ΧΡΗΣΙΜΑ
   doc pager's disabled buttons. */
.pager-disabled {
    opacity: 0.3;
    cursor: default;
}

.news-section__more a:hover,
.news-section__pager a:hover,
.post-pager a:hover {
    color: var(--color-accent);
}

/* Category archive pager — ΠΡΟΗΓΟΥΜΕΝΑ (older) on the left, ΕΠΟΜΕΝΑ (newer)
   on the right, the site-wide pager order. */
.news-section__pager {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 25px 0 0;
}

.news-section__pager-next,
.news-section__pager-prev {
    display: inline-block;
    min-width: 1px;
}

.news-section__pager-prev {
    text-align: left;
}

.news-section__pager-next {
    text-align: right;
}

.news-section__empty {
    padding: 40px 0;
    border-top: 1px solid var(--color-text);
    border-bottom: 1px solid var(--color-text);
    margin: 0;
}

/* ── Home sections (below the hero) — Figma frame 37:2 ───────────────────── */

.hero__logo {
    display: none;
}

.home-more {
    display: inline-block;
    font-size: 24px;
    font-weight: 700;
    line-height: 26px;
    text-decoration: none;
}

.home-more:hover {
    color: var(--color-accent);
}

/* Η επιτροπή teaser: 850×567 photo on the left half, text block vertically
   centred 130px right of the midline. Grid areas (not a text wrapper) so
   mobile can move the title above the photo. */
.home-epitropi {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas:
        "media ."
        "media title"
        "media text"
        "media more"
        "media .";
    /* Hero ends with 100px padding; Figma has 120px from ΕΞΕΡΕΥΝΗΣΤΕ. */
    margin-top: 20px;
    border-top: 1px solid var(--color-text);
    border-bottom: 1px solid var(--color-text);
}

.home-epitropi__media {
    grid-area: media;
    display: block;
}

.home-epitropi__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 850 / 567;
    object-fit: cover;
}

/* Photo fills exactly the left half; the text starts 130px into the right. */
.home-epitropi__title,
.home-epitropi__text,
.home-epitropi__more {
    margin-left: 130px;
}

.home-epitropi__title {
    grid-area: title;
    max-width: 553px;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 36px;
    font-weight: 700;
}

.home-epitropi__text {
    grid-area: text;
    max-width: 553px;
    margin-top: 0;
    margin-bottom: 70px;
    font-size: 20px;
    font-weight: 600;
}

.home-epitropi__more {
    grid-area: more;
    justify-self: start;
}

/* ΝΕΑ & ΑΝΑΚΟΙΝΩΣΕΙΣ / ΕΚΔΗΛΩΣΕΙΣ — heading row + latest-post card. The
   previous block's bottom rule doubles as this heading's top line. */
.home-news__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 30px;
    padding: 44px 0 45px;
}

.home-news__title {
    margin: 0;
    font-size: 40px;
    font-weight: 700;
}

.home-news__all {
    font-size: 32px;
    font-weight: 700;
    text-decoration: none;
}

.home-news__all:hover {
    color: var(--color-accent);
}

.home-card {
    display: grid;
    grid-template-columns: 410px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
        "media body"
        "media more";
    column-gap: 130px;
    /* 410 square + the two 1px rules; long titles clip instead of growing. */
    height: 412px;
    border-top: 1px solid var(--color-text);
    border-bottom: 1px solid var(--color-text);
}

.home-card__media {
    grid-area: media;
    display: block;
    width: 410px;
    height: 410px;
}

.home-card__media img,
.home-card__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-card__body {
    grid-area: body;
    min-height: 0;
    padding-top: 103px;
    overflow: hidden;
}

/* Title + excerpt are clamped (4 + 2 lines) so a long title can't push the
   excerpt out or run into ΠΕΡΙΣΣΟΤΕΡΑ — the card is a fixed 410px square. */
.home-card__title {
    max-width: 553px;
    margin: 0 0 15px;
    font-size: 36px;
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-card__title a {
    text-decoration: none;
}

.home-card__title a:hover {
    color: var(--color-accent);
}

.home-card__excerpt {
    max-width: 553px;
    font-size: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-card__excerpt p {
    margin: 0;
}

.home-card__more {
    grid-area: more;
    justify-self: end;
    padding-bottom: 23px;
}

/* ΧΡΗΣΙΜΑ call-to-action — 300px of air above and to the footer rule
   (footer already adds a 150px margin). */
.home-xrisima {
    padding: 300px 0 150px;
    text-align: center;
}

.home-xrisima__title {
    margin: 0;
    font-size: 64px;
    font-weight: 700;
}

.home-xrisima__text {
    max-width: 553px;
    margin: 15px auto 50px;
    font-size: 20px;
    font-weight: 600;
}

/* ── Single article ──────────────────────────────────────────────────────── */

.single-article__grid {
    display: grid;
    /* `minmax(0, 1fr)` (rather than just `1fr`) so the featured image doesn't
       force the column wider than the container — plain `1fr` uses the
       column's min-content, which for an `<img width="100%">` inside means
       the image's natural pixel width. */
    grid-template-columns: 573px minmax(0, 1fr);
    /* Three rows: image + aside share row 1; content and pager sit in the
       right column of rows 2 and 3, aligned with the image (aside stretches
       to the image height so its meta pins to the image's bottom edge). */
    grid-template-areas:
        "aside media"
        ".     content"
        ".     pager";
    padding-top: 150px;
}

.single-article__aside {
    grid-area: aside;
    display: flex;
    flex-direction: column;
}

.single-article__media {
    grid-area: media;
}

.single-article__content {
    grid-area: content;
}

.single-article__title {
    margin: 0;
    max-width: 553px;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.15;
}

.single-article__meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Pushes the meta to the bottom of the aside — which now stretches to
       the image's height — so cat/date line up with the image's bottom edge.
       Explicit zero on the other sides overrides the browser's default <p>
       margins (~1em top/bottom) that would otherwise nudge meta up. */
    margin: auto 0 0;
    font-size: 24px;
}

.single-article__cat {
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
}

.single-article__cat:hover {
    color: var(--color-accent);
}

.single-article__date {
    font-weight: 600;
}

/* Figma: the featured image is a 1127×767 box — featured images crop to
   that ratio so every article's header row has the same proportions. */
.single-article__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1127 / 767;
    object-fit: cover;
}

/* No featured image: a flat block in the post's cover colour (inline
   style from eap_post_color(), same as its square in the lists). */
.single-article__media--placeholder {
    aspect-ratio: 1127 / 767;
}

.single-article__content {
    margin-top: 40px;
    max-width: 1127px;
}

/* In-post typography (per Figma article frame: H1 36, H2 32, body 20).
   Figma separates every block with one blank body line (~24px), headings
   included — same as the paragraph margin, so they collapse to 24. */
.single-article__content h1 {
    margin: 24px 0;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
}

.single-article__content h2 {
    margin: 24px 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
}

.single-article__content h3 {
    margin: 40px 0 16px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
}

.single-article__content h1:first-child,
.single-article__content h2:first-child,
.single-article__content h3:first-child {
    margin-top: 0;
}

/* Figma: rule 40px under the text, links 25px under the rule; the footer's
   own 150px margin gives the gap below. */
.post-pager {
    grid-area: pager;
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    padding: 24px 0 0;
    border-top: 1px solid var(--color-text);
}

.post-pager a,
.post-pager .pager-disabled {
    line-height: 26px;
}

/* ── Contact — static info (no form), per Figma frame 2012:1142 ─────────── */

.page-contact .contact-grid {
    display: grid;
    /* Divider at 563 from container-inner-left per Figma frame 2012:1142
       (border on the media column supplies the vertical rule). `minmax(0,
       1fr)` prevents the nested .contact-info's 460px column + 109px margin
       from forcing the right column wider than the container on narrow
       desktops. */
    grid-template-columns: 563px minmax(0, 1fr);
    border-top: 1px solid var(--color-text);
}

.contact-grid__media {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 110px 56px 137px 54px;
    border-right: 1px solid var(--color-text);
}

.contact-grid__media img {
    width: 453px;
    height: auto;
}

.contact-grid__content {
    /* Intro sits 45px inside the divider and 45px below the top border. */
    padding: 45px 0 45px 45px;
    display: flex;
    flex-direction: column;
    gap: 214px;
}

.contact-intro {
    margin: 0;
    max-width: 238px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.contact-info {
    /* Info block sits at 154 from the divider (109 further than the intro). */
    margin-left: 109px;
    display: grid;
    grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
    align-items: start;
}

.contact-info__block {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.contact-info__label {
    margin: 0;
    font-size: 24px;
    font-weight: 500; /* Syne Medium */
}

.contact-info__value {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.contact-info__value a {
    text-decoration: none;
    color: inherit;
}

.contact-info__value a:hover {
    color: var(--color-accent);
}

.insta-band {
    display: block;
    padding: 25px 0;
    text-decoration: none;
    color: inherit;
    /* Marquee viewport — clips the copies that extend past the container. */
    overflow: hidden;
    /* Soft fade at the left and right edges so letters ease in/out of the
       band instead of hard-clipping against the container edges. */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        black 80px,
        black calc(100% - 80px),
        transparent 100%
    );
            mask-image: linear-gradient(
        to right,
        transparent 0,
        black 80px,
        black calc(100% - 80px),
        transparent 100%
    );
    border-top: 1px solid var(--color-text);
}

.insta-band__track {
    display: flex;
    width: max-content;
    animation: insta-crawl 25s linear infinite;
}

/* Pause on hover / keyboard focus so a viewer can read the phrase. */
.insta-band:hover .insta-band__track,
.insta-band:focus-visible .insta-band__track,
.insta-band:focus-within .insta-band__track {
    animation-play-state: paused;
}

.insta-band__item {
    font-size: 36px;
    font-weight: 700;
    line-height: 55px;
    white-space: nowrap;
    /* Gap between consecutive copies — kept via padding rather than flex
       gap so total track width = 8 * (item + 60) and translating by -50%
       lands exactly on an item boundary (seamless loop). */
    padding-right: 60px;
}

@keyframes insta-crawl {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .insta-band__track {
        animation: none;
    }
}

.insta-band:hover {
    color: var(--color-accent);
}

/* ── CV modal ────────────────────────────────────────────────────────────── */

.cv-modal {
    position: fixed;
    inset: 0;
    /* Match the html/body 320px floor — a fixed overlay otherwise keeps
       shrinking with the viewport while the page itself stops at 320. */
    min-width: 320px;
    z-index: 200;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 120px 50px 50px;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    overflow-y: auto;
}

.cv-modal[aria-hidden='false'] {
    opacity: 1;
    visibility: visible;
    /* Visible at once on open (the fade is opacity) so the close button can
       take keyboard focus immediately; closing keeps the 0.2s fade-out. */
    transition: opacity 0.2s ease, visibility 0s;
}

.cv-modal__panel {
    position: relative;
    display: flex;
    gap: 50px;
    max-width: 1440px;
    width: 100%;
    /* Cap the panel to the viewport minus the outer modal padding so the CV
       body scrolls inside instead of growing the whole modal. */
    max-height: calc(100vh - 170px);
    padding: 36px;
    background: var(--color-accent);
    color: #fff;
    overflow: hidden;
}

.cv-modal__photo {
    flex: 0 0 469px;
    width: 469px;
    height: 469px;
    object-fit: cover;
}

.cv-modal__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    padding-top: 10px;
    padding-right: 0;
}

/* Keep name/role clear of the close ✕ (39px wide, 36px in from the panel
   edge — i.e. it overlaps the last 39px of the body column). */
.cv-modal__name,
.cv-modal__role {
    padding-right: 80px;
}

.cv-modal__name {
    margin: 0 0 6px;
    font-size: 28px;
    font-weight: 700;
}

.cv-modal__role {
    margin: 0 0 24px;
    font-size: 20px;
    font-weight: 600;
}

/* CV body scrolls independently — name/role stay pinned at the top.
   Native scrollbars can't guarantee a fixed-size circular thumb (the thumb
   sizes proportionally to content, becoming a pill for long CVs), so we
   render a custom scrollbar: a fixed 9px grey track + 23×23 orange circle
   that always stays a perfect circle regardless of content length. */
.cv-modal__scroll {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.cv-modal__cv {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    /* Figma 2005:2: text ends 133px before the 23px scrollbar column, which
       sits 8px inside the scroll box → 164px at 1800, eased down on
       narrower desktops so the column doesn't get squeezed. */
    padding-right: clamp(64px, 9.1vw, 164px);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    /* Hide native scrollbar; the custom one below takes over. */
    scrollbar-width: none;
}

.cv-modal__cv::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* The custom scrollbar column — 23px wide (to fit the round thumb), with a
   9px grey track drawn as a centered linear-gradient background strip. */
.cv-modal__scrollbar {
    position: absolute;
    top: 0;
    /* Centre lines up with the close ✕: 36px panel padding + 8px + 11.5px
       half-column = 55.5px from the panel edge, same as the ✕'s centre. */
    right: 8px;
    bottom: 0;
    width: 23px;
    pointer-events: none;
    background: linear-gradient(
        to right,
        transparent 0,
        transparent calc(50% - 4.5px),
        #D9D9D9 calc(50% - 4.5px),
        #D9D9D9 calc(50% + 4.5px),
        transparent calc(50% + 4.5px),
        transparent 100%
    );
}

.cv-modal__scrollbar-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: #FF7044;
    pointer-events: auto;
    cursor: grab;
    touch-action: none;
}

.cv-modal__scrollbar-thumb:active {
    cursor: grabbing;
}

.cv-modal__scrollbar[hidden] {
    display: none;
}

.cv-modal__close {
    position: absolute;
    /* Figma 2005:2: 31px below the panel top, 36px in from its right edge. */
    top: 31px;
    right: 36px;
    width: 39px;
    height: 39px;
    background: none;
    border: none;
    color: #fff;
    font-size: 39px;
    line-height: 1;
    cursor: pointer;
}

/* Substitute-member variant: orange panel, black text. */
.cv-modal--sub .cv-modal__panel {
    background: #f8a145;
    color: var(--color-text);
}

/* Any pop-up without a photo: the panel narrows so the CV keeps a readable
   ~800px measure (same as the text column in Figma 2005:2). */
.cv-modal--no-photo .cv-modal__panel {
    max-width: 1000px;
}

.cv-modal--sub .cv-modal__close {
    color: var(--color-text);
}

/* The orange thumb would vanish on the orange panel — use the brand blue. */
.cv-modal--sub .cv-modal__scrollbar-thumb {
    background: #2b00ff;
}

/* ── Policy pages ────────────────────────────────────────────────────────── */

.page-policy__title {
    padding-top: 130px;
    font-size: 48px;
    font-weight: 700;
}

.page-policy__content {
    max-width: 1100px;
    padding-bottom: 60px;
}

/* ── Epitropi: thought section ───────────────────────────────────────────── */

.thought-blobs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 100px;
    margin: 100px 0 90px;
    max-width: 1150px;
}

.thought-blobs__item {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--color-text);
}

/* All four shapes share one height (widths follow each shape's own
   proportions). That height is capped at 150px but also at 67% of the column
   width (cqw), so the widest shape — the magenta U, 1.47:1 — always fits its
   column instead of being squeezed on narrower screens. */
.thought-blobs__item {
    container-type: inline-size;
}

.thought-blobs__item img {
    display: block;
    width: auto;
    max-width: 100%;
    height: min(150px, 67cqw);
}

/* Magenta U only: side padding on the item (not the img, which would squash
   it) — cqw then measures the narrower inner box, so the U scales down. */
.thought-blobs__item--magenta {
    padding-right: 8%;
    padding-left: 8%;
}

.thought-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    max-width: 1160px;
}

.thought-note {
    margin: 30px 0 140px;
}

/* ── Inner pages responsive ──────────────────────────────────────────────── */

@media (max-width: 1023px) {

    .body-text {
        /* Mobile body text = 14 SemiBold across all pages (matches Figma
           frames 2196:275 / 1284 / 1479 / 1572). */
        font-size: 14px;
        line-height: 1.35;
    }

    .page-head,
    .page-cols,
    .news-section__grid,
    .single-article__grid {
        grid-template-columns: 1fr;
    }

    /* ── Η ΕΠΙΤΡΟΠΗ page (Figma 2196:275) ─────────────────────────────────
       page-head grid keeps its 2-column layout on mobile — the title sits
       on the left (24 Bold, "Η ΕΠΙΤΡΟΠΗ") and the subtitle stacks to the
       right (16 Bold, multi-line). */
    .page-head {
        padding-top: 30px;
        grid-template-columns: auto 1fr;
        gap: 43px;
    }

    .page-head__title {
        font-size: 24px;
        line-height: 1.2;
    }

    .page-head__sub {
        font-size: 16px;
        line-height: 1.2;
        max-width: none;
    }

    .epitropi-intro {
        margin-top: 34px;
    }

    /* Members grid: single column, centered. Photo stays 175×175 (Figma
       mobile keeps it the same as desktop, just stacks the cards). */
    .members-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-top: 24px;
        justify-items: center;
        text-align: center;
    }

    .member {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .member__photo {
        width: 175px;
        height: 175px;
    }

    .member__text {
        margin: 25px 0 0;
        font-size: 14px;
        text-align: center;
    }

    /* Section labels ("Τακτικά μέλη", "Αναπληρωματικά μέλη", "Γραμματέας")
       — 16 Bold, centered on mobile. */
    .members-label {
        margin: 40px 0 0;
        font-size: 16px;
        text-align: center;
    }

    .members-list {
        margin: 24px 0 0;
        text-align: left;
    }

    /* ΙΣΤΟΡΙΚΟ ΤΗΣ ΕΠΙΤΡΟΠΗΣ (standalone accordion, not inside .accordion-stack)
       — 20 Bold on mobile per Figma frame 2196:275. */
    .accordion {
        margin-top: 40px;
    }

    .accordion:not(.accordion--stacked) .accordion__trigger {
        font-size: 20px;
        padding: 12px 0;
    }

    /* Stacked accordions (ΧΡΗΣΙΜΑ page) — 16 Bold. */
    .accordion--stacked .accordion__trigger {
        font-size: 16px;
        padding: 12px 0;
    }

    /* Fallback for accordions with neither class differentiation. */
    .accordion__trigger {
        padding: 12px 0;
    }

    .accordion__icon {
        flex-basis: 20px;
        width: 20px;
        height: 20px;
    }

    .accordion .accordion__panel-inner {
        margin-left: 0;
        padding: 16px 0 12px;
    }

    /* Text panels get more room under the text; the ΠΕΠΡΑΓΜΕΝΑ doc panel
       (no .body-text) keeps the 12px above. */
    .accordion .accordion__panel-inner.body-text {
        margin-left: 0;
        padding: 16px 0 52px;
    }

    /* "Τι ψάχνετε;" label — 12 Bold on mobile, stacked above the pills.
       Figma 2196:1284: label 3px under the header block, pills 29px below
       the label's top, rule 29px under the last pill row. */
    .xrisima-search {
        flex-direction: column;
        align-items: center;
        gap: 14px;
        padding-top: 3px;
        padding-bottom: 29px;
    }

    .xrisima-search__label {
        flex: none;
        font-size: 12px;
        margin: 0 auto 0 0;
    }

    .xrisima-search__pills {
        justify-content: flex-start;
        gap: 12px 8px;
        padding-top: 0;
    }

    /* Pills 13 SemiBold, 21px tall — smaller than the 20 desktop. */
    .pill {
        font-size: 13px;
        font-weight: 600;
        padding: 1.5px 10px;
    }

    /* ΠΟΛΙΤΙΚΕΣ ΕΑΠ / ΣΠΟΥΔΕΣ ΦΥΛΟΥ ΕΑΠ section titles — 16 Bold, 2 lines,
       left-aligned inside the page-cols content column (grid collapses to
       single-column stack via the earlier grid-template-columns: 1fr rule). */
    .page-cols {
        row-gap: 12px;
    }

    .page-cols__label.page-head__title {
        font-size: 16px;
        line-height: 1.2;
    }

    .xrisima-section {
        margin-top: 12px;
    }

    /* Section title (ΠΟΛΙΤΙΚΕΣ ΕΑΠ / ΣΠΟΥΔΕΣ ΦΥΛΟΥ ΕΑΠ) → its content: 40px. */
    .page-xrisima .page-cols {
        row-gap: 40px;
    }

    /* Pager sits 11px above the rule that closes ΠΟΛΙΤΙΚΕΣ ΕΑΠ. */
    .xrisima-section--bordered {
        padding-bottom: 11px;
    }

    .xrisima-section--studies {
        padding-bottom: 0;
    }

    .studies-group {
        margin-bottom: 40px;
    }

    .page-xrisima .accordion-stack {
        margin-top: 70px;
    }

    /* Last accordion rule → footer rule: 50px per Figma. */
    body:has(.page-xrisima) .site-footer {
        margin-top: 50px;
    }

    /* Doc row — 122×172 cover, 30px to the text column; title (max 205px,
       3 lines) and button centred against the cover with 25px between. */
    .doc-row {
        gap: 30px;
    }

    .doc-row__cover {
        flex: 0 0 122px;
    }

    .doc-row__cover img {
        width: 122px;
        height: 172px;
    }

    .doc-row__title {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.2;
        max-width: 205px;
    }

    /* On mobile BOTH doc-row variants stack: title on top, button below,
       both aligned to the left. Otherwise the button gets pushed off the
       right edge on narrow phones. */
    .doc-row--stacked .doc-row__body,
    .doc-row--inline .doc-row__body {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 25px;
    }

    .doc-row__btn,
    .doc-row .btn {
        padding: 4px 12px;
        font-size: 12px;
        line-height: 1.6;
        margin-left: 0;
        border-radius: 8px;
    }

    /* Studies groups on ΣΠΟΥΔΕΣ ΦΥΛΟΥ ΕΑΠ. */
    .studies-group__heading {
        font-size: 14px;
        margin-bottom: 16px;
    }

    .studies-group__list {
        font-size: 14px;
        line-height: 1.35;
    }

    .studies-group__note {
        font-size: 13px;
        margin-top: 16px;
    }

    /* Doc-list pager — 12 Bold on mobile, ΠΡΟΗΓΟΥΜΕΝΑ on the left and
       ΕΠΟΜΕΝΑ on the right, 28px under the cover; disabled = 23%. */
    .doc-pager {
        justify-content: space-between;
        gap: 20px;
        margin-top: 28px;
    }

    .doc-pager button {
        font-size: 12px;
    }

    .doc-pager button[disabled] {
        opacity: 0.23;
    }

    /* single-article h1/h2/h3 mobile sizes are defined further down in the
       page-specific block (Figma 2196:1479 override). */

    .sticker {
        display: none;
    }

    .page-nea .news-section:first-of-type {
        padding-top: 30px;
    }

    .news-section {
        margin-bottom: 50px;
    }

    .news-section__title {
        /* Title bottom (y=138) → row border below (y=154) = 16px per Figma. */
        padding: 0 0 16px;
        font-size: 20px;
    }

    /* Category-pager sizes on mobile (14 Bold, vs 24 desktop). ΠΕΡΙΣΣΟΤΕΡΑ
       and the news-row itself keep their desktop cover-left/text-right layout
       down to 768px — the mobile-card collapse (square image below title)
       lives in the ≤767 block further down. */
    .news-section__more {
        margin-top: 10px;
    }

    .news-section__more a,
    .news-section__pager a,
    .news-section__pager .pager-disabled {
        font-size: 14px;
    }

    .news-section__pager {
        margin-top: 10px;
    }

    .single-article__grid {
        /* Reorder: title → media → meta → content → pager (Figma 2196:1479).
           Aside gets display:contents so its title/meta children hoist up
           into the grid and can be placed independently. */
        grid-template-areas:
            "title"
            "media"
            "meta"
            "content"
            "pager";
        /* Figma 2196:1479: title 13px under the header block; 25px between
           title/image, meta/content and content/pager rule. */
        padding-top: 13px;
        gap: 25px;
    }

    .single-article__aside {
        display: contents;
    }

    .single-article__title {
        grid-area: title;
        font-size: 24px;
        line-height: 1.2;
    }

    .single-article__meta {
        grid-area: meta;
        flex-direction: row;
        justify-content: space-between;
        /* Only 10px under the image (grid gap is 25). */
        margin: -15px 0 0;
        gap: 12px;
        font-size: 11px;
        line-height: 1.2;
    }

    .single-article__cat {
        font-weight: 700;
    }

    .single-article__date {
        font-weight: 600;
    }

    .single-article__content {
        margin-top: 0;
        font-size: 14px;
        line-height: 1.35;
    }

    /* One blank 14px line (~17px) between every block, headings included. */
    .single-article__content p {
        margin-bottom: 17px;
    }

    .single-article__content h1 {
        font-size: 20px;
        margin: 17px 0;
    }

    .single-article__content h2 {
        font-size: 16px;
        margin: 17px 0;
    }

    .single-article__content h3 {
        font-size: 15px;
        margin: 17px 0;
    }

    /* Rule 25px under the text (grid gap), links 10px under the rule. */
    .post-pager {
        margin-top: 0;
        padding: 10px 0 0;
    }

    .post-pager a,
    .post-pager .pager-disabled {
        font-size: 14px;
        font-weight: 700;
        line-height: 26px;
    }

    .pager-disabled {
        opacity: 0.23;
    }

    /* Pager links → footer rule: 50px per Figma. */
    body:has(.single-article) .site-footer {
        margin-top: 50px;
    }

    /* Contact page mobile — content column LEFT, image RIGHT (opposite of
       desktop). Pixel-mapped from Figma frame 2196:1572 at 440px.
       Media comes first in the DOM but sits in column 2; pin both items to
       row 1 so grid auto-placement doesn't push .content to a second row
       (it can't move the cursor backward to fill column 1 of row 1). */
    .page-contact .contact-grid {
        grid-template-columns: 1fr 186px;
        column-gap: 24px;
        /* Figma has no top border on mobile — only the bottom stays. */
        border-top: none;
    }

    .contact-grid__content {
        grid-column: 1;
        grid-row: 1;
        /* Address bottom (Figma y=394) → contact-grid bottom border (y=439)
           = 45px of breathing room. Top is calibrated so intro sits ~24px
           below where the border would be. */
        padding: 24px 0 45px;
        gap: 61px;
    }

    .contact-grid__media {
        grid-column: 2;
        grid-row: 1;
        padding: 24px 0 0;
        /* Column divider stays for desktop only. */
        border-right: none;
    }

    .contact-grid__media img {
        width: 100%;
        max-width: 186px;
        height: auto;
    }

    .contact-intro {
        max-width: none;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.2;
    }

    .contact-info {
        grid-template-columns: 1fr;
        /* Value bottom → next label top = 38px per Figma. */
        gap: 38px;
        margin-left: 0;
    }

    .contact-info__block {
        /* Label bottom → value top = 10px per Figma. */
        gap: 10px;
    }

    .contact-info__label,
    .contact-info__value {
        font-size: 14px;
        line-height: 1.2;
    }

    .insta-band {
        /* Border above (Figma y=439) → text (y=451) = 12; text bottom
           (y=475) → border below (y=487) = 12. */
        padding: 12px 0;
    }

    .insta-band__item {
        font-size: 20px;
        line-height: 1.2;
        padding-right: 40px;
    }

    /* CV modal mobile — pixel-mapped from Figma frame 2196:805 at 440px.
       Blue panel sits flush left/right below the 60px header bar (146px
       from viewport top), photo pinned to the top-left of the panel with
       name/role/cv stacked underneath. The CV body scrolls inside the
       panel with the same custom scrollbar as desktop, sized down to the
       3px track + 13px orange circle Figma calls for. The same rgba
       backdrop tint the desktop modal uses stays on mobile — the panel
       is flush left/right but the 146px area above it still gets the
       subtle dim so the underlying page reads as "behind" the modal. */
    .cv-modal {
        padding: 100px 0 50px;
        align-items: stretch;
    }

    .cv-modal__panel {
        flex-direction: column;
        gap: 0;
        max-width: none;
        width: 100%;
        max-height: calc(100vh - 150px);
        max-height: calc(100dvh - 150px);
        padding: 0;
    }

    .cv-modal__photo {
        flex: none;
        width: 220px;
        height: 220px;
        max-width: none;
        align-self: flex-start;
        /* Photo bottom (y=366) → name top (y=405) = 39px per Figma. */
        margin-bottom: 39px;
    }

    .cv-modal__body {
        /* Body content sits 20px inside the left edge (photo hangs at 0). */
        padding: 0 0 60px 20px;
        min-height: 0;
    }

    /* Figma text block is 373px wide (x 20→393), so keep 47px clear on the right. */
    .cv-modal__name,
    .cv-modal__role {
        padding-right: 47px;
    }

    .cv-modal__name {
        margin: 0 0 10px;
        font-size: 20px;
    }

    .cv-modal__role {
        /* Role bottom (y=475) → CV body top (y=508) = 33px per Figma. */
        margin: 0 0 33px;
        font-size: 14px;
    }

    .cv-modal__scroll {
        display: flex;
        min-height: 0;
    }

    .cv-modal__cv {
        /* Leave room to the right of the CV for the 13px scrollbar plus
           the 20px panel gutter. */
        padding-right: 50px;
        padding-bottom: 20px;
        font-size: 14px;
        overflow-y: auto;
    }

    /* Scrollbar shrinks: 3px grey track (centered inside a 13px column so
       the round orange thumb has room to sit on top of it). */
    .cv-modal__scrollbar {
        display: block;
        right: 20px;
        width: 13px;
        background: linear-gradient(
            to right,
            transparent 0,
            transparent calc(50% - 1.5px),
            #D9D9D9 calc(50% - 1.5px),
            #D9D9D9 calc(50% + 1.5px),
            transparent calc(50% + 1.5px),
            transparent 100%
        );
    }

    .cv-modal__scrollbar-thumb {
        width: 13px;
        height: 13px;
    }

    /* Close button = the 20px thin ✕ from Figma (icon-close.svg), 18px
       below the panel top / 20px inside the right edge. The &times; text
       is hidden (font-size 0) but still there for the aria-label button. */
    .cv-modal__close {
        top: 18px;
        right: 20px;
        width: 20px;
        height: 20px;
        padding: 0;
        font-size: 0;
        background: url('../img/icon-close.svg') center / 20px 20px no-repeat;
    }

    /* Substitute variant: short CVs, so the panel hugs its content instead
       of filling the screen; the white ✕ SVG is inverted to black. */
    .cv-modal--sub {
        align-items: flex-start;
    }

    .cv-modal--sub .cv-modal__close {
        filter: invert(1);
    }

    /* No photo: the name needs to clear the ✕ from above instead. */
    .cv-modal--no-photo .cv-modal__body {
        padding-top: 58px;
    }

    .thought-blobs {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
        margin: 50px 0;
    }

    .thought-blobs__item img {
        height: min(100px, 67cqw);
    }

    /* Stacked columns: one blank line between the two texts, like the
       paragraph spacing elsewhere on mobile. */
    .thought-cols {
        grid-template-columns: 1fr;
        gap: 17px;
    }

    .thought-note {
        margin-bottom: 60px;
    }

    .page-policy__title {
        padding-top: 60px;
        font-size: 28px;
    }
}


/* ── Small mobile (≤767px) ────────────────────────────────────────────────
   News-row collapses from horizontal (cover-left / text-right) to the
   Figma-mobile card layout: title above a square full-width featured
   image. Tablets between 768-1023 keep the horizontal row. */
@media (max-width: 767px) {

    .news-row {
        grid-template-columns: 1fr;
        gap: 25px;
        max-height: none;
        overflow: visible;
        /* Border → card title = 16; image bottom → next border = 28. */
        padding: 16px 0 28px;
    }

    .news-row__body {
        order: 1;
        padding: 0;
        max-height: none;
        overflow: visible;
        justify-content: flex-start;
    }

    .news-row__media {
        order: 2;
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        margin: 0;
    }

    .news-row__title {
        margin: 0;
        max-width: none;
        font-size: 16px;
        line-height: 1.2;
    }

    .news-row__excerpt {
        display: none;
    }
}


/* ── Intermediate desktop (1024-1279px) ───────────────────────────────────
   The default desktop layouts use fixed 410-573px left-column labels which
   leave too little room for content on narrower desktops (13" laptops etc.).
   Stack the label/content grids so titles and rows get the full width. */
@media (min-width: 1024px) and (max-width: 1279px) {

    /* ΕΠΙΤΡΟΠΗ + ΧΡΗΣΙΜΑ (page-cols has a 410px label column on the left).
       Stack so the label sits above the content block. */
    .page-cols {
        grid-template-columns: 1fr;
    }

    .page-cols__label {
        margin-bottom: 32px;
    }

    /* ΝΕΑ listing / category archive — stack the section-title vs rows grid
       so the news-rows below get the full container width. Each news-row
       itself STAYS in its horizontal cover-left / text-right layout — only
       the mobile block (≤1023) collapses that further to a stacked-square
       card. */
    .news-section__grid {
        grid-template-columns: 1fr;
    }

    .news-section__title {
        padding: 0 0 40px;
    }

    /* Single article (single-article__grid is a 573px 1fr with named areas
       for aside/media/content/pager). Compress the aside column so the
       content column gets more of the row width. `minmax(0, 1fr)` prevents
       the featured image's natural pixel width from blowing out the column. */
    .single-article__grid {
        grid-template-columns: 380px minmax(0, 1fr);
    }

    /* Contact page — at narrower desktops the 563px media column leaves the
       content column ~522px, and once .contact-info's 109px indent + the
       E-MAIL block's ~368px natural width are consumed the ΔΙΕΥΘΥΝΣΗ column
       collapses. Trim the media column, tighten the indent, and stack the
       two info blocks vertically so both keep enough width for their
       values regardless of the container size in this range. */
    .page-contact .contact-grid {
        grid-template-columns: 480px minmax(0, 1fr);
    }

    .contact-info {
        margin-left: 40px;
        grid-template-columns: 1fr;
        row-gap: 32px;
    }
}


/* ── CV modal, narrow desktop (1024-1199px) ────────────────────────────────
   Before the one-column mobile layout kicks in (≤1023), the 469px photo
   leaves the CV text only ~240-400px wide. Shrink the photo and the gaps
   so the text column gets the room. */
@media (min-width: 1024px) and (max-width: 1199px) {
    .cv-modal__panel {
        gap: 36px;
    }

    .cv-modal__photo {
        flex: 0 0 300px;
        width: 300px;
        height: 300px;
    }

    .cv-modal__cv {
        padding-right: 64px;
    }
}


/* Decorative ΧΡΗΣΙΜΑ stickers only on wide desktops — below 1280 they'd
   run into the text. */
@media (max-width: 1279px) {
    .sticker {
        display: none;
    }
}

/* 1280-1599: flag pinned to the page's right edge with half of it
   (101.5 of 203px) past the edge — .page-xrisima clips the rest. */
@media (min-width: 1280px) and (max-width: 1599px) {
    .sticker--trans {
        right: calc((100% - 100vw) / 2 - 101.5px);
    }
}

/* 1280-1439: the studies text reaches closer to the edge, so the flag
   tucks further off-screen (~45px visible) to stay clear of it. */
@media (min-width: 1280px) and (max-width: 1439px) {
    .sticker--trans {
        right: calc((100% - 100vw) / 2 - 150px);
    }
}


/* ── Wide desktop transition (1280-1499px) ─────────────────────────────────
   Once past the intermediate block, the two-column .contact-info layout is
   back but the fixed 460px E-MAIL column (Figma's desktop spec) + 109px
   indent leaves the ΔΙΕΥΘΥΝΣΗ column too narrow to fit "address line 1"
   without word-per-line wrapping. Tighten the indent and let the E-MAIL
   column take its natural width so the address column keeps ~200px. */
@media (min-width: 1280px) and (max-width: 1499px) {
    .contact-info {
        margin-left: 45px;
        grid-template-columns: max-content minmax(0, 1fr);
        column-gap: 40px;
    }
}


/* ── Narrow mobile (≤419px) ────────────────────────────────────────────────
   Anything narrower than a "standard" 420-440px design gets an extra layer
   of adjustments so long Greek words don't overflow their columns. */
@media (max-width: 419px) {

    /* Contact page — image shrinks from 186px so the text column has room
       for words like "Επικοινωνήστε" without overflowing. */
    .page-contact .contact-grid {
        grid-template-columns: 1fr min(35vw, 156px);
        column-gap: 16px;
    }

    .contact-info__block {
        gap: 8px;
    }

    /* Crawler tightens too — text stays legible at 18px on a 320px phone. */
    .insta-band__item {
        font-size: 18px;
    }

    /* Page-head title + subtitle side-by-side layout doesn't fit under
       ~400px: the subtitle needs ~183px, the title ~150px, plus a 43px
       gap, totalling ~376px vs a 335-content-width phone at 375px. Stack
       them vertically so nothing gets clipped. */
    .page-head {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    /* ─ ΧΡΗΣΙΜΑ narrow-mobile ─────────────────────────────────────────────
       Long-labeled pills like "ΕΘΝΙΚΗ ΠΟΛΙΤΙΚΗ ΓΙΑ ΤΗΝ ΕΜΦΥΛΗ ΙΣΟΤΗΤΑ"
       measure ~380px unbroken — wider than the whole viewport at 320-380.
       Allow them to wrap onto multiple lines inside the pill and drop the
       font by 1px so they fit. */
    .page-xrisima .pill {
        font-size: 12px;
        padding: 4px 10px;
        white-space: normal;
        line-height: 1.15;
        text-align: left;
    }

    /* Doc-list cover shrinks so the title/button column beside it stays wide
       enough for the wrapping title text. */
    .doc-row__cover {
        flex: 0 0 96px;
    }

    .doc-row__cover img {
        width: 96px;
        height: 135px;
    }

    .doc-row {
        gap: 12px;
    }

    /* Studies text tightens too so items don't wrap to 4+ lines each. */
    .studies-group__heading {
        font-size: 13px;
    }

    .studies-group__list {
        font-size: 13px;
    }

    .studies-group__note {
        font-size: 12px;
    }
}


/* ── Home sections, responsive ─────────────────────────────────────────────
   ≤1279: tighter gaps so the text columns keep room on narrow desktops.
   ≤1023: tablet — smaller square/type, still side by side.
   ≤767:  Figma mobile frame 2196:2 — everything stacks. */
@media (max-width: 1279px) {
    .home-epitropi__title,
    .home-epitropi__text,
    .home-epitropi__more {
        margin-left: 60px;
    }

    .home-card {
        column-gap: 60px;
    }

    .home-card__body {
        padding-top: 60px;
    }

    .home-card__title {
        font-size: 28px;
    }
}

@media (max-width: 1023px) {
    /* ΕΞΕΡΕΥΝΗΣΤΕ — tablet size (mobile goes smaller again below). */
    .hero__explore {
        gap: 12px;
        margin-top: 80px;
    }

    .hero__explore-label {
        font-size: 18px;
    }

    .hero__explore-line {
        height: 50px;
    }

    .home-epitropi__title,
    .home-epitropi__text,
    .home-epitropi__more {
        margin-left: 40px;
    }

    .home-epitropi__title {
        font-size: 28px;
    }

    .home-epitropi__text {
        margin-bottom: 40px;
        font-size: 16px;
    }

    .home-news__head {
        padding: 36px 0;
    }

    .home-news__title {
        font-size: 28px;
    }

    .home-news__all {
        font-size: 22px;
    }

    .home-card {
        grid-template-columns: 300px minmax(0, 1fr);
        column-gap: 40px;
        height: 302px;
    }

    .home-card__media {
        width: 300px;
        height: 300px;
    }

    .home-card__body {
        padding-top: 40px;
    }

    .home-card__title {
        font-size: 24px;
    }

    .home-card__excerpt {
        font-size: 16px;
    }

    .home-more {
        font-size: 18px;
    }

    .home-xrisima {
        padding: 180px 0 120px;
    }

    .home-xrisima__title {
        font-size: 48px;
    }

    .home-xrisima__text {
        font-size: 16px;
    }
}

@media (max-width: 767px) {
    /* Hero — left-aligned per Figma 2196:2: 20px title (281px measure),
       15px subtitle, "γρήγορη πρόσβαση" centred over two link columns, no
       ΕΞΕΡΕΥΝΗΣΤΕ, and the logo blob hanging off the right edge. */
    .hero {
        position: relative;
        overflow-x: clip;
        /* Header block ends at y=86 here; Figma title top is y=104. */
        padding: 18px 0 30px;
        text-align: left;
        /* Header + hero fill the screen (svh = height with the browser bars
           showing, so it doesn't jump as they hide), capped at 700px total
           so tall screens don't get a huge empty hero. Content taller than
           that still grows the hero. */
        min-height: calc(min(100vh, 900px) - var(--eap-header-h, 94px));
        min-height: calc(min(100svh, 700px) - var(--eap-header-h, 94px));
        /* Content centred in that space (logo moves with it) instead of
           leaving all the extra height empty under the quick links. */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .hero > .container {
        width: 100%;
    }

    /* Container fills the hero's full height; ΕΞΕΡΕΥΝΗΣΤΕ (margin-top:
       auto below) sits at the bottom, the rest stays at the top. Capped at
       530px so on tall phones the content doesn't spread too far apart
       (the hero then centres it). */
    .hero .container {
        position: relative;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        margin: 0;
        max-height: 530px;
    }

    .hero__logo {
        display: block;
        position: absolute;
        /* 141px off the right edge (Figma x 315 on a 440 frame), so it hangs
           off the same way on wider phones; lowered 80px from Figma's y.
           Height follows the file (600×539 → 239px); top +4.5px keeps the
           logo where the old 248px letterboxed box centred it. */
        top: 104.5px;
        right: -141px;
        width: 266px;
        height: auto;
        object-fit: contain;
        max-width: none;
        pointer-events: none;
    }

    .hero__title {
        position: relative;
        max-width: 281px;
        margin: 0;
        font-size: 20px;
        line-height: 1.15;
    }

    .hero__subtitle {
        position: relative;
        max-width: 242px;
        margin: 22px 0 0;
        font-size: 15px;
    }

    /* Quick links float midway between the subtitle and ΕΞΕΡΕΥΝΗΣΤΕ
       (auto top/bottom margins); padding keeps at least 58px under the
       subtitle on short screens. */
    .hero__quick {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 16px;
        margin: auto auto;
        padding-top: 58px;
        font-size: 11px;
        text-align: center;
        max-width: fit-content;
    }

    .hero__quick span {
        grid-column: 1 / -1;
        font-size: 10px;
    }

    .hero__quick a {
        /* Centred in its column so a JS max-width (see main.js) keeps it
           centred; balance evens out the two lines when it wraps. */
        justify-self: center;
        text-wrap: balance;
        text-underline-offset: 3px;
        line-height: 1.7;
    }

    /* ΕΞΕΡΕΥΝΗΣΤΕ stays on mobile, scaled down, at the bottom of the hero
       right under the quick links. */
    .hero__explore {
        gap: 10px;
        margin-top: 40px;
        padding-top: 0;
    }

    .hero__explore-label {
        font-size: 12px;
    }

    .hero__explore-line {
        width: 1px;
        height: 32px;
    }

    .home-more {
        font-size: 14px;
    }

    /* Teaser: title → photo → text → ΠΕΡΙΣΣΟΤΕΡΑ, 12px inside each rule. */
    .home-epitropi {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-template-areas:
            "title"
            "media"
            "text"
            "more";
        padding: 12px 0;
    }

    .home-epitropi__title {
        margin: 0 0 14px;
        font-size: 20px;
    }

    .home-epitropi__media img {
        aspect-ratio: 400 / 267;
    }

    .home-epitropi__text {
        max-width: 319px;
        margin: 14px 0 12px;
        font-size: 14px;
    }

    .home-epitropi__more {
        margin-left: 0;
    }

    /* Each news block sits 80px below the previous rule and gets its own
       top line; the card's top rule closes the 54px heading row. */
    .home-news {
        margin-top: 80px;
    }

    .home-news__head {
        padding: 14px 0 15px;
        border-top: 1px solid var(--color-text);
    }

    .home-news__title {
        font-size: 20px;
    }

    .home-news__all {
        font-size: 16px;
    }

    /* Card: title → ΠΕΡΙΣΣΟΤΕΡΑ → full-width square. */
    .home-card {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-template-areas:
            "body"
            "more"
            "media";
        height: auto;
    }

    .home-card__media {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }

    .home-card__body {
        padding-top: 16px;
    }

    .home-card__title {
        max-width: 379px;
        margin: 0;
        font-size: 16px;
    }

    .home-card__excerpt {
        display: none;
    }

    .home-card__more {
        justify-self: start;
        padding: 13px 0;
    }

    .home-xrisima {
        padding: 120px 0 60px;
    }

    .home-xrisima__title {
        font-size: 36px;
    }

    .home-xrisima__text {
        max-width: 328px;
        margin: 7px auto 20px;
        font-size: 14px;
    }
}