/* ==========================================================
   Bridging the A-I-R — btair.eu
   Styles built from grafička's brand manual + 12 designer notes
   ========================================================== */


/* ----------------------------------------------------------
   1. FONTS (loaded locally from /assets/fonts/)
   ---------------------------------------------------------- */

@font-face {
    font-family: "Sora";
    src: url("assets/fonts/Sora-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Sora";
    src: url("assets/fonts/Sora-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Sora";
    src: url("assets/fonts/Sora-Italic.otf") format("opentype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Bitter";
    src: url("assets/fonts/Bitter-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Bitter";
    src: url("assets/fonts/Bitter-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Bitter";
    src: url("assets/fonts/Bitter-Italic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}


/* ----------------------------------------------------------
   2. DESIGN TOKENS (from brand manual 3.1 + 3.2)
   ---------------------------------------------------------- */

:root {
    /* Primary brand colours — RGB values from manual */
    --c-yellow:        rgb(255, 212,  51);   /* Pantone 1225 C */
    --c-yellow-80:     rgb(255, 220,  95);
    --c-yellow-40:     rgb(255, 236, 173);

    --c-blue:          rgb( 78, 103, 172);   /* Pantone 7455 C */
    --c-blue-80:       rgb(113, 133, 190);
    --c-blue-40:       rgb(184, 194, 220);

    /* Accent — this is the HOVER colour on almost everything */
    --c-orange:        rgb(231, 175,  74);   /* Pantone 137 C */
    --c-orange-80:     rgb(237, 191, 108);
    --c-orange-40:     rgb(247, 223, 179);

    /* Neutrals */
    --c-black:         rgb(  0,   0,   0);
    --c-black-80:      rgb( 51,  51,  51);
    --c-grey:          rgb(177, 177, 176);   /* Cool Gray 4 C */
    --c-grey-light:    rgb(230, 230, 230);   /* card resting state */
    --c-grey-bg:       rgb(245, 245, 245);   /* section separator */
    --c-white:         rgb(255, 255, 255);

    /* Typography */
    --f-display: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
    --f-body:    "Bitter", Georgia, "Times New Roman", serif;

    /* Layout */
    --container: 1180px;
    --gutter: clamp(20px, 4vw, 60px);

    /* Motion */
    --ease: cubic-bezier(.2, .7, .2, 1);
    --lift: translateY(-4px);
    --dur:  .25s;
}


/* ----------------------------------------------------------
   3. RESET + BASE
   ---------------------------------------------------------- */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;   /* offset for sticky header */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--c-black);
    background: var(--c-white);
    min-height: 100vh;
    position: relative;
}

ul, ol { list-style: none; }
a      { color: inherit; text-decoration: none; }
img    { display: block; max-width: 100%; height: auto; }

strong { font-weight: 700; }
em     { font-style: italic; }


/* ----------------------------------------------------------
   4. DECORATIVE BACKGROUND FRAME (designer's PNG)
   The transparent PNG contains the shapes on both edges only —
   we set it as a fixed background covering the viewport.
   ---------------------------------------------------------- */

.bg-frame {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url("assets/bg/bg-decorative.png");
    background-repeat: repeat-y;
    background-position: center top;
    background-size: 100% auto;
    pointer-events: none;
    opacity: 1;
}


/* ----------------------------------------------------------
   5. TOP BAR — sticky nav
   NOTE 1: active menu item bolds when user is on that section
   NOTE 2: active item gets a coloured underline
   ---------------------------------------------------------- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--c-grey-light);
}

.topbar__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 14px var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.brand__logo {
    height: 32px;
    width: auto;
 transition: opacity var(--dur) var(--ease);
}
.brand:hover .brand__logo {
    opacity: 0.7;
}

.nav {
    display: flex;
    gap: 30px;
    font-family: var(--f-display);
    font-size: 14px;
    letter-spacing: 0.01em;
}

.nav a {
    position: relative;
    padding: 6px 0;
    font-weight: 400;
    color: var(--c-black);
    transition: color var(--dur) var(--ease), font-weight 0s;
}

.nav a:hover { color: var(--c-orange); }

/* Note 1 + Note 2: active item → bold + blue underline */
.nav a.is-active {
    font-weight: 700;
}
.nav a.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--c-blue);
}


/* ----------------------------------------------------------
   6. PAGE + SECTION LAYOUT
   ---------------------------------------------------------- */

.page {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
    background: var(--c-white);
}

.section {
    padding: clamp(60px, 8vw, 110px) 0;
    scroll-margin-top: 80px;
}

.section + .section {
    border-top: 1px solid var(--c-grey-light);
}

.section__meta {
    font-family: var(--f-display);
    font-size: 13px;
    letter-spacing: 0.02em;
    color: var(--c-black-80);
    margin-bottom: 30px;
}

.section__title {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(28px, 3.4vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: 28px;
    color: var(--c-black);
}

.section__sub {
    font-weight: 400;
    color: var(--c-black-80);
    font-size: 0.72em;
}

/* NOTE 3: keep line length 60–70 characters for readability */
.section__lede {
    font-family: var(--f-body);
    font-size: 17px;
    line-height: 1.7;
    color: var(--c-black);
    max-width: 65ch;
    margin-bottom: 48px;
}


/* ----------------------------------------------------------
   7. TIMELINE (About the Project header strip)
   ---------------------------------------------------------- */

.timeline {
    background: var(--c-grey-bg);
    border-radius: 4px;
    padding: 20px 24px;
    margin-bottom: 40px;
    font-family: var(--f-display);
}

.timeline__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--c-black);
    margin-bottom: 12px;
}

.timeline__now {
    font-weight: 700;
    color: var(--c-blue);
}

.timeline__bar {
    height: 6px;
    background: var(--c-grey-light);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 10px;
}

.timeline__progress {
    display: block;
    height: 100%;
    background: var(--c-yellow);
}

.timeline__labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--c-black-80);
    letter-spacing: 0.02em;
}


/* ----------------------------------------------------------
   8. SIGNPOST CARDS (blue navigation cards under About)
   NOTE 4: "Lift on hover" effect on blue cards
   ---------------------------------------------------------- */

.signpost {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    margin-top: 20px;
}

.signpost__card {
    display: block;
    background: var(--c-blue);
    color: var(--c-white);
    padding: 24px 22px;
    border-radius: 3px;
    height: 100%;
    transition: transform var(--dur) var(--ease),
                background var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

.signpost__card h3 {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 12px;
    letter-spacing: -0.005em;
}

.signpost__card p {
    font-family: var(--f-body);
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255,255,255,.9);
}

/* NOTE 4: lift on hover */
.signpost__card:hover {
    transform: var(--lift);
    background: var(--c-orange);
    box-shadow: 0 12px 24px -8px rgba(0,0,0,.15);
}


/* ----------------------------------------------------------
   9. AIR NATIONAL PLATFORM LINKS
   NOTE 5: card background changes from light grey to orange on hover
   ---------------------------------------------------------- */

.airlinks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 20px;
}

.airlink {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
    background: var(--c-grey-bg);
    border-radius: 3px;
    transition: background var(--dur) var(--ease),
                transform var(--dur) var(--ease),
                color var(--dur) var(--ease);
}

.airlink__flag {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.08em;
    background: var(--c-blue);
    color: var(--c-white);
    padding: 6px 10px;
    border-radius: 2px;
    transition: background var(--dur) var(--ease);
}

.airlink__name {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 18px;
    flex: 1;
}

.airlink__arrow {
    font-family: var(--f-display);
    font-size: 20px;
    transition: transform var(--dur) var(--ease);
}

/* NOTE 5: light-grey → orange on hover */
.airlink:hover {
    background: var(--c-orange);
    transform: var(--lift);
    color: var(--c-white);
}
.airlink:hover .airlink__flag {
    background: var(--c-white);
    color: var(--c-orange);
}
.airlink:hover .airlink__arrow {
    transform: translateX(4px);
}


/* ----------------------------------------------------------
   10. SUB-NAV (Residencies → models / programme / reports)
   NOTE 6: blue underline for active subpage link
   ---------------------------------------------------------- */

.subnav {
    display: flex;
    gap: 32px;
    margin-bottom: 36px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--c-grey-light);
    font-family: var(--f-display);
    font-size: 15px;
    font-weight: 400;
}

.subnav a {
    position: relative;
    padding-bottom: 6px;
    color: var(--c-black-80);
    transition: color var(--dur) var(--ease);
}

.subnav a:hover { color: var(--c-orange); }

/* NOTE 6: active sub-nav item → blue underline */
.subnav a.is-active {
    color: var(--c-black);
    font-weight: 700;
}
.subnav a.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -17px;
    height: 3px;
    background: var(--c-blue);
}


/* ----------------------------------------------------------
   11. DOCUMENT ROWS (PDF / DOC quick links in Residencies)
   ---------------------------------------------------------- */

.doc-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.doc-row {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    align-items: center;
    gap: 24px;
    padding: 18px 22px;
    background: var(--c-yellow);
    border-radius: 3px;
    transition: background var(--dur) var(--ease),
                transform var(--dur) var(--ease);
}

.doc-row__type {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.08em;
    background: var(--c-black);
    color: var(--c-white);
    padding: 6px 12px;
    border-radius: 2px;
    text-align: center;
}

.doc-row__title {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 16px;
    color: var(--c-black);
}

.doc-row__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--f-display);
    font-size: 14px;
}

.doc-row__actions a {
    color: var(--c-black);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--dur) var(--ease);
}

.doc-row:hover {
    background: var(--c-orange);
    transform: var(--lift);
}

/* Grey variant — used for Reports (tab 3), to stay visually distinct
   from the yellow downloadable-file rows used elsewhere */
.doc-row--grey {
    background: var(--c-grey-bg);
}
.doc-row--grey:hover {
    background: var(--c-orange);
}


/* ----------------------------------------------------------
   12. OUTPUT CARDS (Research → 6 documents)
   NOTE 7: card background light-grey → orange on hover
   NOTE 8: side bar changes from blue to orange on hover
   ---------------------------------------------------------- */

.output-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.output {
    position: relative;
    background: var(--c-grey-bg);
    padding: 26px 30px 26px 46px;
    border-radius: 3px;
    transition: background var(--dur) var(--ease),
                transform var(--dur) var(--ease);
}

/* NOTE 8: blue side bar (left edge) */
.output::before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 14px;
    width: 6px;
    background: var(--c-blue);
    border-radius: 3px;
    transition: background var(--dur) var(--ease);
}

.output__title {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 12px;
    color: var(--c-black);
}

.output__desc {
    font-family: var(--f-body);
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--c-black);
    max-width: 65ch;
    margin-bottom: 16px;
}

.output__action {
    display: inline-block;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 14px;
    color: var(--c-blue);
    padding: 4px 0;
    border-bottom: 2px solid transparent;
    transition: color var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                transform var(--dur) var(--ease);
}

/* NOTES 7 + 8: hover — background orange, side bar orange */
.output:hover {
    background: var(--c-orange-40);
    transform: var(--lift);
}
.output:hover::before {
    background: var(--c-orange);
}
.output:hover .output__action {
    color: var(--c-black);
    border-bottom-color: var(--c-black);
    transform: translateX(4px);
}


/* ----------------------------------------------------------
   13. EVENTS
   NOTE 9:  media placeholder = "photo or graphic of the event"
   NOTE 10: sorted newest → oldest (handled in HTML order)
   NOTE 11: upcoming = light blue background, past = light grey
   ---------------------------------------------------------- */

.events__subhead {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--c-black-80);
    margin-bottom: 20px;
}

.events {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.event {
    position: relative;
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 20px;
    padding: 20px;
    border-radius: 3px;
    transition: transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
}

/* NOTE 11: upcoming → light blue */
.event--upcoming {
    background: var(--c-blue-40);
}

/* NOTE 11: past → light grey */
.event--past {
    background: var(--c-grey-bg);
}

/* Lift on hover (consistent with the rest of the site) */
.event:hover {
    transform: var(--lift);
    box-shadow: 0 12px 24px -8px rgba(0,0,0,.15);
}

/* NOTE 9: photo/graphic placeholder — designer's instruction */
.event__media {
    background: var(--c-white);
    border: 1px dashed var(--c-grey);
    border-radius: 2px;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--f-display);
    font-size: 11px;
    color: var(--c-black-80);
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.event__date {
    display: block;
    font-family: var(--f-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--c-black);
    margin-bottom: 8px;
}

.event__title {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.25;
    margin-bottom: 4px;
}

.event__org {
    font-family: var(--f-body);
    font-style: italic;
    font-size: 13px;
    color: var(--c-black-80);
    margin-bottom: 10px;
}

.event__desc {
    font-family: var(--f-body);
    font-size: 14px;
    line-height: 1.55;
    color: var(--c-black);
    margin-bottom: 14px;
}

.event__cta {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 13px;
    color: var(--c-blue);
    border-bottom: 2px solid var(--c-blue);
    padding-bottom: 2px;
    transition: color var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}

.event__cta:hover {
    color: var(--c-orange);
    border-bottom-color: var(--c-orange);
}

/* Date badge in corner — brand yellow marker */
.event__badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--c-yellow);
    color: var(--c-black);
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 2px;
}


/* ----------------------------------------------------------
   14. PARTNERS
   NOTE 12: Lead partner header is FIXED orange (not hover state)
            Other headers are dark grey (also fixed)
            All cards lift on hover
   ---------------------------------------------------------- */

.partners {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 70px;
}

.partner {
    background: var(--c-white);
    border: 1px solid var(--c-grey-light);
    border-radius: 3px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
}

.partner__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: var(--c-black-80);   /* NOTE 12: dark grey — fixed */
    color: var(--c-white);
    font-family: var(--f-display);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.partner__role     { font-weight: 700; }
.partner__site {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    transition: color var(--dur) var(--ease);
}
.partner__site:hover { color: var(--c-yellow); }

/* NOTE 12: LEAD PARTNER — FIXED ORANGE header (not hover) */
.partner--lead .partner__head {
    background: var(--c-orange);
    color: var(--c-black);
}
.partner--lead .partner__site:hover { color: var(--c-blue); }

.partner__body {
    padding: 22px 24px 26px;
    flex: 1;
}

.partner__name {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.15;
    margin-bottom: 2px;
}

.partner__country {
    font-family: var(--f-body);
    font-style: italic;
    font-size: 13px;
    color: var(--c-black-80);
    margin-bottom: 14px;
}

.partner__desc {
    font-family: var(--f-body);
    font-size: 14px;
    line-height: 1.6;
    color: var(--c-black);
}

/* NOTE 12: lift-on-hover for ALL partner cards */
.partner:hover {
    transform: var(--lift);
    box-shadow: 0 12px 24px -8px rgba(0,0,0,.18);
}


/* ----------------------------------------------------------
   15. CONTACTS (staff cards under partners)
   ---------------------------------------------------------- */

.contacts {
    padding: 40px 0 0;
}

.contacts__title {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 24px;
}

.contacts__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.contacts__card {
    background: var(--c-yellow-40);
    padding: 22px 24px;
    border-radius: 3px;
    transition: background var(--dur) var(--ease),
                transform var(--dur) var(--ease);
}

.contacts__card h4 {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 17px;
    margin-bottom: 4px;
}

.contacts__card p {
    font-family: var(--f-body);
    font-size: 14px;
    color: var(--c-black-80);
    margin-bottom: 10px;
    font-style: italic;
}

.contacts__card a {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 14px;
    color: var(--c-blue);
    border-bottom: 2px solid var(--c-blue);
    padding-bottom: 1px;
    transition: color var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}

.contacts__card:hover {
    background: var(--c-yellow);
    transform: var(--lift);
}
.contacts__card a:hover {
    color: var(--c-black);
    border-bottom-color: var(--c-black);
}

.contacts__note {
    font-family: var(--f-body);
    font-style: italic;
    font-size: 14px;
    color: var(--c-black-80);
}


/* ----------------------------------------------------------
   16. FOOTER (EU compliance + project statement)
   ---------------------------------------------------------- */

.footer {
    background: var(--c-black);
    color: var(--c-white);
    padding: clamp(50px, 6vw, 80px) 0 30px;
    margin-top: 60px;
}

.footer__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.footer__eu {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 30px;
    align-items: start;
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid rgba(255,255,255,.15);
}

.footer__eu-logo {
    /* Note: we use the BLACK EU logo file, inverted for dark bg via filter,
       but the safer solution is to also request the WHITE variant.
       If assets/logos/eu-cofunded-white.png exists, swap the src in HTML. */
    background: var(--c-white);
    padding: 10px 14px;
    border-radius: 2px;
    max-width: 200px;
}

.footer__eu-text {
    font-family: var(--f-body);
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255,255,255,.85);
}

.footer__project {
    font-family: var(--f-body);
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255,255,255,.75);
    max-width: 90ch;
    margin-bottom: 40px;
}

.footer__project strong { color: var(--c-white); }

.footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.15);
}

.footer__ns {
    height: 40px;
    width: auto;
    filter: invert(1) brightness(1.2);   /* Nová síť logo → white on black bg */
}

.footer__copy {
    font-family: var(--f-display);
    font-size: 12px;
    letter-spacing: 0.03em;
    color: rgba(255,255,255,.6);
}


/* ----------------------------------------------------------
   17. RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 1024px) {
    .signpost { grid-template-columns: repeat(3, 1fr); }
    .partners { grid-template-columns: repeat(2, 1fr); }
    .events   { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .nav { display: none; }   /* TODO: add a hamburger later */

    .signpost,
    .airlinks,
    .partners,
    .contacts__grid { grid-template-columns: 1fr; }

    .doc-row {
        grid-template-columns: 60px 1fr;
    }
    .doc-row__actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .event {
        grid-template-columns: 1fr;
    }
    .event__media {
        aspect-ratio: 16 / 9;
    }

    .footer__eu {
        grid-template-columns: 1fr;
    }
    .footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* ----------------------------------------------------------
   18. MOTION-REDUCED
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}


/* =====================================================
   DOPLŇKY — pro novou verzi Eleventy (29. 10. 2026)
   Přidat na KONEC souboru style.css
   ===================================================== */

/* --------------------------------------------------------
   1. ART-IN-RES karty — stejná velikost, SVG vlajka vpravo
      Struktura: [CZ] ART-IN-RES 🇨🇿  (+ "In preparation")
   -------------------------------------------------------- */

.airlinks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);   /* 3 stejně široké sloupce */
    gap: 18px;
    margin-top: 20px;
    align-items: stretch;                     /* všechny karty stejně vysoké */
    list-style: none;
    padding: 0;
}

.airlink {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
    min-height: 92px;                         /* VĚTŠÍ minimum pro vyrovnání karet */
    background: var(--c-grey-bg);
    border-radius: 3px;
    text-decoration: none;
    color: inherit;
    transition: background var(--dur, 0.25s) var(--ease, ease),
                transform var(--dur, 0.25s) var(--ease, ease),
                color var(--dur, 0.25s) var(--ease, ease);
}

/* Modrý obdélníček vlevo (CZ/SK/HU) */
.airlink__code {
    display: inline-block;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.08em;
    background: var(--c-blue);
    color: var(--c-white);
    padding: 6px 11px;
    border-radius: 2px;
    transition: background var(--dur, 0.25s) var(--ease, ease),
                color var(--dur, 0.25s) var(--ease, ease);
    flex-shrink: 0;
}

/* Hlavní text ART-IN-RES */
.airlink__name {
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex-grow: 1;                             /* roztáhne se, aby vlaječka šla vpravo */
}

/* Vlajka SVG — bez pozadí, jen samotný obrázek */
.airlink__flag {
    display: block;
    width: 36px;
    height: 24px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08);   /* jemný rámeček pro oddělení od pozadí */
    flex-shrink: 0;
    object-fit: cover;
    background: transparent !important;         /* přebije starý modrý styl */
    padding: 0 !important;
}

/* "In preparation" tag — pod hlavním textem */
.airlink__status {
    width: 100%;
    text-align: left;
    margin-top: 0;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-orange);
    font-weight: 500;
}

/* Hover — podle poznámky grafičky: šedé → oranžové + "lift" */
.airlink:hover {
    background: var(--c-orange);
    transform: translateY(-4px);
    color: var(--c-white);
}
.airlink:hover .airlink__code {
    background: var(--c-white);
    color: var(--c-orange);
}
.airlink:hover .airlink__status {
    color: var(--c-white);
}


/* --------------------------------------------------------
   2. Více prostoru mezi obdélníky Research a nadpisem Reports
   -------------------------------------------------------- */

.section__sub-title {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 18px;
    margin-top: 60px;                         /* VELKÝ odstup od předchozího */
    margin-bottom: 20px;
    letter-spacing: 0.02em;
}


/* --------------------------------------------------------
   3. Status badges u Research dokumentů
   -------------------------------------------------------- */

.output__status {
    display: inline-block;
    margin-left: 10px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 2px;
    vertical-align: middle;
}

.output__status--available {
    background: #d4edda;
    color: #155724;
}

.output__status--in-preparation {
    background: var(--c-orange);
    color: var(--c-white);
}

.output__status--internal-—-not-public {
    background: #e2e3e5;
    color: #495057;
}

.output__status--ongoing {
    background: var(--c-yellow);
    color: var(--c-black);
}


/* --------------------------------------------------------
   4. Signpost card body (prevent nested <p>)
   -------------------------------------------------------- */

.signpost__card-body {
    font-family: var(--f-body);
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255,255,255,.9);
}
.signpost__card-body p {
    margin: 0;
}


/* --------------------------------------------------------
   5. Empty state pro prázdné kolekce
   -------------------------------------------------------- */

.empty-state {
    padding: 24px;
    background: var(--c-grey-bg);
    border-radius: 3px;
    color: var(--c-ink-60, #5A5A5A);
    font-style: italic;
    text-align: center;
}


/* --------------------------------------------------------
   6. Mobilní responzivita — airlinks na malém displeji
   -------------------------------------------------------- */

@media (max-width: 720px) {
    .airlinks {
        grid-template-columns: 1fr;            /* na mobil: 1 sloupec */
    }
}