/* ============================================================
   FLEX-E Project Website – Main Stylesheet
   ============================================================
   Static site for the Interreg project FLEX-E.
   Built with Hugo, supports German (de), French (fr), English (en).
   ============================================================ */

/* ============================================================
   GENERAL SETUP
   ============================================================
   CSS custom properties, box-sizing reset, base typography,
   and the main page container.
   ============================================================ */

:root {
    --font-display: 'Raleway', sans-serif;
    --font-body:    'Google Sans Flex', sans-serif;
    --max-width-content: 1400px;
}

/* Reset default margins and paddings; use border-box sizing everywhere */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Body: gradient background, flex column layout, responsive font size */
body {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--color-near-black);
    background: linear-gradient(180deg, var(--color-teal-pale) 0%, #ffffff 100%);
    background-attachment: fixed;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-size: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);   /* 16px → 18px */
    line-height: 1.7;
}

/* H1: display font, bold, responsive size (28px → 40px) */
h1 {
    font-family: var(--font-display);                  /* Raleway */
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw + 1rem, 2.5rem);     /* 24px → 40px */
    line-height: 1.4;
    margin: 1.5rem 0;
}

/* H2–H4: display font, semi-bold */
h2, h3, h4, h5 {
    font-family: var(--font-display);                  /* Raleway */
    font-weight: 600;
    line-height: 1.4;
}

/* H2: responsive size (22px → 32px) */
h2 {
    font-size: clamp(1.4rem, 2vw + 0.8rem, 2rem);      /* 22px → 32px */
    margin-top: 3rem;
    margin-bottom: 1.25rem;
}

/* H3: responsive size (18px → 24px) */
h3 {
    font-size: clamp(1.1rem, 1.5vw + 0.6rem, 1.5rem);  /* 18px → 24px */
    margin-top: 2.25rem;
    margin-bottom: 1rem;
}

/* H4: fixed 18px */
h4 {
    font-size: 1.1rem;                                 /* 18px, fixed */
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
}

/* Paragraphs: responsive size (16px → 18px) */
p {
    font-size: inherit;                                 /* 16px → 18px */
    line-height: 1.4;
    margin-bottom: 1.25rem;
}

/* Main white container: centered, shadowed, rounded corners, min-viewport height */
.main-container {
    background-color: #ffffff;
    width: 90%;
    max-width: var(--max-width-content);
    margin: 40px auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 80px);
}




/* ============================================================
   GLOABAL UTILITIES
   ============================================================
   Image Credits
   ============================================================ */

/* Base badge style - handles typography, backgrounds, and safety layers */
.image-credit-badge {
    position: absolute;
    bottom: 12px;
    background-color: rgba(2, 27, 28, 0.7);
    color: #ffffff;
    font-size: 0.7rem;
    padding: 4px 8px;
    border-radius: 4px;
    pointer-events: none;
    font-family: var(--font-body);
    z-index: 5;
}

/* Position modifier: Snaps the badge cleanly to the left boundary */
.image-credit-left {
    left: 12px;
}

/* Position modifier: Snaps the badge cleanly to the right boundary */
.image-credit-right {
    right: 12px;
}

/* Position modifier: Snaps the badge cleanly to the top-right boundary */
.image-credit-top-right {
    top: 12px;
    right: 12px;
    bottom: auto;
}




/* ==========================================================================
   LINKEDIN BADGE COMPONENT
   Standardized layout core supporting green, blue, and black theme modifiers.
   ========================================================================== */

/* ── Base Structural Blueprint ── */
.linkedin-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 1.4rem;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
/* 
.linkedin-badge:hover {
    transform: scale(1.05);
} */

/* ── Modifier: Green Version (Default / Project Accent) ── */
.linkedin-badge--green {
    background-color: var(--color-teal-pale);
    color: var(--color-near-black);
    text-decoration: underline var(--color-accent-green) 2px;
}

.linkedin-badge--green:hover {
    background-color: var(--color-teal-dark);
}

/* ── Modifier: Blue Version ── */
.linkedin-badge--blue {
    background-color: var(--color-blue-pale);
    color: var(--color-blue-dark);
    text-decoration: underline var(--color-blue-dark) 2px;
}

.linkedin-badge--blue:hover {
    background-color: var(--color-teal-medium);
}

/* ── Modifier: Black/Dark Version ── */
.linkedin-badge--black {
    background-color: var(--color-near-black);
    color: #ffffff;
    text-decoration: underline var(--color-accent-green) 2px;
}

.linkedin-badge--black:hover {
    background-color: var(--color-teal-dark);
}




/* ============================================================
   HEADER
   ============================================================
   Header for home page with FLEX-E picture, Interreg,
   Wissenschaftsoffensive and FLEX-E Logo
   ============================================================ */

#main-header {
    width: 100%;
    overflow: hidden;
    background-color: var(--color-grey-light);
    display: block;
}

.header-content {
    position: relative;
    width: 100%;
    max-width: var(--max-width-content);
    margin-inline: auto;
    display: block;
}

#main-header img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    display: block;
    content-visibility: auto;
}




/* ============================================================
   NAVBAR
   ============================================================
   Sticky top navigation bar with logo, nav links, dropdown menus,
   language switcher, and a hamburger button for small screens.
   ============================================================ */

/* Sticky navbar background */
nav {
    position: sticky;
    top: 0;
    background-color: var(--color-near-black);
    z-index: 100;
    width: 100%;
}

/* Flex container for nav items */
.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: var(--max-width-content);
    margin-inline: auto;
    height: 60px;
    padding-inline: 12px;;
}

/* Left group (logo + links) and right group (language switcher) */
.nav-left-group,
.nav-right-group {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Small logo shown inside the navbar */
.nav-mini-logo {
    height: 32px;
    width: auto;
    display: block;
    padding-left: 12px;
}

/* Horizontal list of navigation links */
.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Nav link base style */
.nav-links a {
    color: #ffffff;
    margin: 0;
    border: 1px solid transparent;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.1s ease, background-color 0.1s ease;
}

/* Nav link interaction: show border */
.nav-links a:hover,
.nav-links a.active {
    border-color: #ffffff;
    background: transparent;
}

/* Dropdown parent item: positioned relatively so the dropdown can be absolute */
.nav-item.has-dropdown {
    position: relative;
}

/* Dropdown menu: hidden by default */
.dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    border: 2px solid var(--color-teal-light);
    border-radius: 8px;
    padding: 6px 0;
    margin-top: 6px;
    min-width: 200px;
    z-index: 110;
    list-style: none;
    box-shadow: 0 4px 12px rgba(2, 27, 28, 0.1);
}

/* Show dropdown on hover over parent item */
.nav-item.has-dropdown:hover .dropdown {
    display: block;
}

/* Dropdown link style */
.dropdown li a {
    display: block;
    padding: 8px 16px;
    white-space: nowrap;
    color: var(--color-near-black);
    text-decoration: none;
}

/* Dropdown link hover: light grey background */
.dropdown li a:hover {
    background: var(--color-teal-pale);
}

/* Language switcher: flex row with left border separator */
.lang-switch {
    display: flex;
    gap: 6px;
    margin-left: 6px;
    padding-left: 12px;
    border-left: 1px solid #ffffff
}

/* Individual language button */
.lang-btn {
    background: transparent;
    border: 1px solid transparent;
    color: #ffffff;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
    text-decoration: none;
}

/* Language button interaction */
.lang-btn:hover,
.lang-btn.active {
    border-color: #ffffff;
    color: #ffffff;
    background: transparent;
}

/* Hamburger toggle button: hidden on large screens, shown on small screens */
.nav-hamburger {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    padding: 6px 8px;
    display: none;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* Hamburger hover: show border */
.nav-hamburger:hover {
    border-color: #ffffff;
}

/* Hamburger active press: slight white overlay */
.nav-hamburger:active {
    background: rgba(255, 255, 255, 0.1);
}


/* ============================================================
   MAIN CONTENT
   ============================================================
   Flex-grow wrapper and inner content area with padding.
   ============================================================ */

/* Main content area: fills remaining vertical space */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Inner content block: white background, generous padding */
.content {
    flex: 1;
    padding: clamp(1.25rem, 3vw, 3rem); 
    background-color: #ffffff;
    line-height: 1.6;
}


/* ============================================================
   SECTIONS
   ============================================================
   Reusable section variants: plain, muted (green/grey), accent,
   and the inner content container.
   ============================================================ */

/* --------------------------------------------------------------------------
   Section plain
   -------------------------------------------------------------------------- */

.section-plain {
    padding: 48px 48px;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-sizing: border-box;
    display: block;
}

/* H1 in plain section: dark blue */
.section-plain h1 {
    color: var(--color-blue-dark);
    font-size: clamp(1.4rem, 2vw + 0.8rem, 2rem);      /* 22px → 32px */
    line-height: 1.4;
    margin: 1.5rem 0;
}

/* H2 in plain section: dark teal with orange left border accent */
.section-plain h2 {
    color: var(--color-teal-dark);
    font-size: clamp(1.4rem, 2vw + 0.8rem, 2rem);      /* 22px → 32px */
    line-height: 1.4;
    border-left: 5px solid var(--color-accent-orange);
    margin-top: 3rem;
    margin-bottom: 1.25rem;
    padding-left: 20px;
}

/* H3 in plain section: medium teal */
.section-plain h3 {
    color: var(--color-teal-medium);
    font-size: clamp(1.1rem, 1.5vw + 0.6rem, 1.5rem);  /* 18px → 24px */
    line-height: 1.4;
    margin-top: 2.25rem;
    margin-bottom: 1rem;
}

/* H4 in plain section: accent orange */
.section-plain h4 {
    color: var(--color-accent-orange);
    font-size: clamp(1.1rem, 1.5vw + 0.6rem, 1.5rem);  /* 18px → 24px */
    line-height: 1.4;
    margin-top: 2.25rem;
    margin-bottom: 1rem;
}

/* H5 in plain section: uppercase, letter-spaced */
.section-plain h5 {
    color: var(--color-near-black);
    font-size: clamp(1.4rem, 2vw + 0.8rem, 1.6rem);
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 3rem;
}

.section-plain h5.text-center {
    max-width: 70%;
    margin-inline: auto;
    text-align: center;
}

.section-plain h5.text-center.statement {
    color: var(--color-near-black);
    font-size: clamp(1rem, 1.5vw + 0.7rem, 1.3rem);
    margin-bottom: 0;
}

/* Paragraphs in plain section: near-black text */
.section-plain p {
    color: var(--color-near-black);
    margin-bottom: 1.25rem;
}

.section-plain .list {
    margin-bottom: 2rem;
}

.section-plain .list ul {
    padding-left: 1.2rem;
    margin: 0;
}

.section-plain .list li {
    font-size: 1.1rem;
    line-height: 1.5;
    margin-bottom: 0.8rem;
}

/* Base styles for the images inside the flex containers */
/* ── Container for Image Left or Right ── */
.section-plain .flex-row,
.section-plain .flex-row-reverse {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 2rem;
    width: 100%;
}

.section-plain .flex-row {
    flex-direction: row;
}

.section-plain .flex-row-reverse {
    flex-direction: row-reverse;
}

/* Ensure the text block fills the remaining horizontal space */
.section-plain .flex-row .flex-column,
.section-plain .flex-row-reverse .flex-column {
    flex: 1;
}

/* Base styles for paragraphs inside to prevent margin alignment disruptions */
.section-plain .flex-row p,
.section-plain .flex-row-reverse p {
    margin: 0 0 1.25rem 0;
}
.section-plain .flex-row p:last-child,
.section-plain .flex-row-reverse p:last-child {
    margin-bottom: 0;
}

/* ── Reusable Image Wrapper (Brings anchor point for absolute badges) ── */
.section-plain .img-wrapper {
    position: relative;
    display: block;
    box-sizing: border-box;
}

/* Standardized dimensions for sidebar graphics in a text row */
.section-plain .flex-row .img-wrapper,
.section-plain .flex-row-reverse .img-wrapper {
    width: 40%;
    flex-shrink: 0;
}

/* Unified internal image scaling inside the wrapper core */
.section-plain .img-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

/* Centered Image between paragraphs (No text wrapping) */
.section-plain .img-center-wrapper {
    display: block;
    margin-inline: auto;
    margin-bottom: 2rem;
    max-width: 80%;
    height: auto;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    align-items: center;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 20px;
}

.benefit-icon {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.benefit-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.benefit-text {
    background-color: var(--color-teal-pale);
    color: var(--color-near-black);
    padding: 16px 20px;
    border-radius: 2px;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.4;
    width: 100%;
}


/* --------------------------------------------------------------------------
   Accent Section dark teal
   -------------------------------------------------------------------------- */

.section-dark-teal {
    padding: 48px 48px;
    background-color: var(--color-teal-dark);
}

.section-dark-teal h1 {
    color: var(--color-accent-green);
    font-size: 3rem;
}

.section-dark-teal h2 {
    color: white;
    font-size: 2.3rem;
}


/* --------------------------------------------------------------------------
   Accent Section near black
   -------------------------------------------------------------------------- */

.section-near-black {
    padding: 48px 48px;
    background-color: var(--color-near-black);
}

.section-near-black h1 {
    color: var(--color-accent-green);
    /* font-size: 3rem; */
}

.section-near-black h2 {
    color: white;
    /* font-size: 2.3rem; */
}


/* --------------------------------------------------------------------------
   Accent Section muted green
   -------------------------------------------------------------------------- */

.section-muted-green {
    padding: 48px 60px;
    width: 100%;
    background-color: var(--color-teal-pale);
}

/* --------------------------------------------------------------------------
   Accent Section muted grey
   -------------------------------------------------------------------------- */

.section-muted-grey {
    padding: 48px 60px;
    margin: 20px 0;
    background-color: var(--color-grey-light);
}

/* --------------------------------------------------------------------------
   Accent Section Orange
   -------------------------------------------------------------------------- */

.section-accent-orange {
    padding: 48px 24px;
    border: 1px solid var(--color-accent-orange);
    background-color: var(--color-accent-orange);
}

/* --------------------------------------------------------------------------
   Intro Section
   -------------------------------------------------------------------------- */

/* Outer section layout context */
.section-intro {
    width: 100%;
    display: block;
}

/* Container converted to CSS Grid with seamless green background */
.section-intro .intro-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    width: 100%;
    position: relative;
    background-image: url(../images/FLEX-E_Industriepark_bg.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center;
    overflow: visible;
}

/* Background image filling the area without cropping or stretching */
.intro-bg {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Displays the full artwork without cropping */
    object-position: right bottom;
    display: block;
    z-index: 1;
}

/* Container holding textual nodes - relative positioning drives the section height */
.intro-content {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    position: relative;
    width: 45%;
    margin-top: 48px;
    margin-left: 48px;
    margin-bottom: 48px; /* Provides space so the news box never gets cut off */
    display: flex;
    flex-direction: column;
    z-index: 2;
}

.intro-headline {
    font-size: 1.5rem;
    color: var(--color-near-black);
    line-height: 1.3;
    font-weight: 700;
    margin: 0 0 2rem 0;
}

/* Navigation link element stacks */
.intro-links {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 2rem;
}

.intro-orange-link {
    color: var(--color-accent-orange);
    text-decoration: underline;
    font-weight: 700;
    font-size: 1.25rem;
}

.intro-orange-link:hover {
    color: var(--color-accent-orange);
}

.intro-news-box {
    align-self: flex-start;
}

.intro-news-btn {
    display: inline-block;
    background-color: var(--color-near-black);
    color: white;
    text-decoration: underline var(--color-accent-green) 2px;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.4;
    padding: 12px 20px;
    border-radius: 8px;
    text-align: left;
}

/* Upper right layout boundary hosting the brand interaction badge */
.intro-social-block {
    position: absolute;
    top: 5%;
    right: 5%;
    z-index: 2;
}




/* --------------------------------------------------------------------------
   Section Inner Container
   -------------------------------------------------------------------------- */
.section-inner {
    max-width: 3000px;
    margin-inline: auto;
}


/* ============================================================
   LOGO BANNER
   ============================================================
   Centered banner image for the logo strip area
   ============================================================ */

.logo-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
}

/* Banner image: responsive, constrained height */
.logo-banner img {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
}


/* ============================================================
   BUDGET BANNER
   ============================================================
   Two-column layout showing budget breakdown and project duration.
   ============================================================ */

.budget-banner {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 200px;
    max-width: 1200px;
    margin: 0;
}

/* Budget info block: icon + text items */
.budget-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Budget icon wrapper */
.budget-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Budget icon image */
.budget-icon img {
    width: 120px;
    object-fit: contain;
    align-items: center;
}

/* Stack of budget line items */
.budget-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Total budget amount: large, bold, dark teal */
.budget-item.total .amount {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--color-teal-dark);
}

/* Total budget label: large, bold, dark teal */
.budget-item.total .label {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--color-teal-dark);
    margin-left: 8px;
}

/* Sub-budget line: smaller, dark blue */
.budget-item.sub {
    font-size: 1.1rem;
    color: var(--color-blue-dark);
    margin-top: 5px;
}

/* Duration text: large, bold, dark teal */
.duration-info {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-teal-dark);
}


/* ==========================================================================
   Fancy Budget Banner
   ========================================================================== */

.section-budget-fancy {
    padding: 48px 0px 100px 0px;
}

.budget-banner-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    overflow: visible; /* Allows the budget card to visually overflow the bottom edge */
}

/* Background image stretches completely to fit the container height */
.budget-banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Overlay acts as the primary layout driver for dynamic height and vertical centering */
.budget-banner-overlay {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center; /* Vertically centers card and text text without rigid top margins */
    padding: 1rem 5%;   /* Explicit padding defines top and bottom spaces of the banner background */
    z-index: 2;
    box-sizing: border-box;
}

/* ── Left Side: Metrics Card with Visual Overlap ── */
.budget-card {
    background-color: var(--color-grey-light);
    padding: 30px;
    border-radius: 4px;
    width: 46%;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    align-self: center;
    margin-top: 1rem;
    margin-bottom: -96px; /* Forces the card to overshoot past the bottom section graphics layout */
}

.budget-flex-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.budget-card-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.budget-card-icon {
    width: 100px;
    height: auto;
    object-fit: contain;
}

.budget-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    width: 100%;
}

.budget-card-body .total-row {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-teal-dark);
    display: flex;
    justify-content: center;
    align-items: center;
}

.budget-card-body .total-row .label {
    margin-left: 8px;
}

.budget-card-body .sub-row {
    font-size: 1.1rem;
    color: var(--color-blue-dark);
    margin-top: 5px;
}

.budget-duration-row {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-teal-dark);
    text-align: center;
    width: 100%;
}

/* ── Right Side: Text Block ── */
.budget-text-side {
    width: 46%;
    display: flex;
    align-items: center;
}

.budget-text-side p {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
}


/* ============================================================
   NEWS GRID & CARDS
   ============================================================
   3-column grid of news preview cards with hover lift effect.
   ============================================================ */

.section-news {
    padding: 48px 48px;
    width: 100%;
    background-color: var(--color-teal-pale);
}

/* Master Grid Layout used by both views */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: stretch;
}

/* ── Base Card Blueprint ── */
.news-card {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    box-sizing: border-box;
}

.news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(7, 27, 25, 0.12);
}

.news-card-image {
    width: 100%;
    height: 220px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative; /* Anchor point for absolute badges */
}

.news-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.news-card-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.news-card h3 {
    margin: 0 0 1rem 0;
}

.news-card h3 a {
    font-family: inherit;
    text-decoration: none;
    display: inline-block;
}

.news-card p {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    text-overflow: ellipsis;
}

.news-card-meta {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    display: block;
}

/* Structural dynamic alignment footer nodes */
.news-card .read-more {
    font-weight: 700;
    font-size: 1rem;
    text-underline-offset: 4px;
    margin-top: auto; /* Pushes the button straight down to the card floor layout */
    align-self: flex-start;
}

/* ── Modifier: Index Page Variant ── */
.news-card--index {
    background-color: #ffffff;
    border-radius: 6px;
    box-shadow: 0 10px 25px rgba(7, 27, 25, 0.05);
}

.news-card--index h3 {
    color: var(--color-blue-dark);
}

.news-card--index h3 a {
    color: var(--color-blue-dark);
}

.news-card--index p {
    color: var(--color-blue-dark);
}

.news-card--index .read-more {
    color: var(--color-blue-dark);
    text-decoration: underline var(--color-accent-orange) 2px;
}

.news-card--index:hover .read-more {
    color: var(--color-accent-orange);
}

.news-card--index .read-more:hover {
    color: var(--color-accent-orange);
}

/* ── Modifier: News Overview List Variant ── */
.news-card--news {
    background-color: var(--color-grey-light);
    border: 1px solid var(--color-grey-dark);
    border-radius: 12px;
}

.news-card--news h3 a {
    color: var(--color-near-black);
}

.news-card--news p {
    color: var(--color-near-black);
}

.news-card--news .news-card-meta {
    color: var(--color-grey-extra-dark);
}

.news-card--news .read-more {
    color: var(--color-near-black);
    text-decoration: underline var(--color-accent-orange) 2px;
}

.news-card--news:hover .read-more {
    color: var(--color-accent-orange);
}

.news-card--news .read-more:hover {
    color: var(--color-accent-orange);
}




/* --------------------------------------------------------------------
   Contact Section
   -------------------------------------------------------------------- */

.section-contact {
    width: 100%;
    background-color: var(--color-near-black); /* Adapts the exact background color from the footer */
    padding: 60px 24px 30px 24px;
}

.contact-banner-overlay {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    box-sizing: border-box;
    max-width: 1200px;
    margin-inline: auto;
}

.contact-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-blue-pale);
    margin: 0;
}

.contact-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
    width: 100%;
}

.contact-column {
    flex: 1;
}

.contact-grid .contact-column:last-child {
    flex: 0 0 auto;
    align-self: center;
}

.contact-column p {
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-blue-pale);
    margin-top: 0;
    margin-bottom: 6px;
}

.contact-profile-link a,
.contact-profile-link a:visited {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: inherit;
    transition: color 0.2s ease;
}

.contact-profile-link a:hover {
    color: var(--color-teal-medium);
}


/* ==========================================================================
   Vision Banner & Overlapping Cards Layout
   ========================================================================== */

.vision-banner {
    width: 100%;
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    padding: 80px 0 140px 0; 
    box-sizing: border-box;
}

.vision-banner-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 48px;
}

.vision-text-container {
    max-width: 55%; 
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.vision-main-title {
    font-size: clamp(1.4rem, 2vw + 0.8rem, 1.6rem);
    font-weight: 800;
    line-height: 1.4;
    color: var(--color-near-black);
    margin: 0;
}

.vision-subtitle {
    font-size: clamp(1.1rem, 1.5vw + 0.6rem, 1.3rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-teal-dark); 
    margin: 0;
}

.vision-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10%;
    width: 80%;
    margin-top: -80px; /* Pulls the cards over the banner boundary */
    margin-bottom: 2rem;;
    margin-inline: auto;
    position: relative;
    z-index: 10;
}

.vision-card {
    background-color: var(--color-near-black, #071b19);
    padding: 30px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    box-sizing: border-box;
}

.vision-card p {
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    margin: 0;
}

/* ==========================================================================
   FEATURES ASYMMETRIC GRID SYSTEM
   Two-column grid system with offset rows and overlapping heading icons.
   ========================================================================== */

.features-section {
    width: 100%;
    background-color: #ffffff;
    padding: 60px 0;
    box-sizing: border-box;
}

/* Master grid splitting the content layer into two balanced viewport tracks */
.features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: flex-start;
    margin: 0 48px;
}

.features-col-left,
.features-col-right {
    display: flex;
    flex-direction: column;
    gap: 50px; /* Generous spacing between stacked elements within columns */
}

/* ── Individual Feature Card Architecture ── */
.feature-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
}

/* Heading row acting as a light green horizontal accent belt */
.feature-header {
    display: flex;
    align-items: center;
    background-color: var(--color-teal-pale);
    padding: 20px 24px 20px 80px; /* Left padding provides empty room for the absolute icon */
    min-height: 85px;
    box-sizing: border-box;
    position: relative;
}

/* THE OVERLAP TRICK: Shifts the icon upward and anchors it to the left edge */
.feature-icon-wrapper {
    position: absolute;
    left: 15px;
    top: -20px; /* Pulls the icon container past the top boundary line */
    background-color: #ffffff;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(2, 27, 28, 0.08);
}

.feature-icon {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.feature-headline {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-near-black);
    line-height: 1.3;
    margin: 0;
}

/* Soft gray content block sitting directly below the header belt */
.feature-body {
    background-color: var(--color-blue-extra-pale);
    padding: 24px;
    box-sizing: border-box;
}

.feature-body p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-near-black);
    margin: 0;
}

/* ── Graphic Asset Elements ── */
.feature-graphic-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
}

.feature-main-graphic {
    width: 100%;
    height: auto;
    display: block;
}

 .feature-img-center {
    display: block;
    margin-inline: auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
    max-width: 80%;
    height: auto;
}


/* ==========================================================================
   WORK PACKAGES TABLE GRID
   Two-column structural row layout featuring clean bottom dividing borders.
   ========================================================================== */

.packages-section {
    max-width: var(--max-width-content);
    background-color: #ffffff;
    box-sizing: border-box;
    margin: 48px 48px;
}

.packages-main-title {
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.packages-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Master row architecture splitting title and data contents */
.package-row {
    display: grid;
    grid-template-columns: 3fr 7fr; /* Allocates 30% width to titles and 70% to documentation text */
    gap: 40px;
    padding-top: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-teal-dark);
    box-sizing: border-box;
}

/* Strips out the border rule on the very last structural iteration item */
.package-row:last-child {
    border-bottom: none;
}

.package-title-col {
    display: block;
}

.package-title {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.4;
    color: var(--color-near-black);
    margin: 0;
}

.package-content-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.package-description {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-near-black);
    margin: 0;
}

/* High-contrast brand green styling for legal and administrative leads */
.package-lead {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-teal-medium);
    margin: 0;
}

.package-lead span {
    text-underline-offset: 3px;
}


/* ==========================================================================
   PROJECT PARTNERS ARCHITECTURE
   Comprehensive system handling master grids, custom borders, and 
   asymmetric splits across multiple partner status layers.
   ========================================================================== */

/* Outer section container spacing boundaries */
.partners-section {
    width: 100%;
    background-color: #ffffff;
    padding: 48px; /* Integrated custom padding boundaries */
    box-sizing: border-box;
    display: block;
}

/* Common layout section titles typography spacing */
.partners-main-title {
    margin-top: 0;
    margin-bottom: 3rem;
    font-family: var(--font-display);
    color: var(--color-near-black);
}

/* ── Layout Grids & Tracks ── */

/* Master layout grid forcing up to three balanced columns per row block */
.partners-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px; /* Integrated custom gap spacing */
    width: 100%;
}

/* Individual horizontal row bands wrapping inner elements for custom splitting tracks */
.partners-row-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Maintains the same uniform 3-column width calculation */
    gap: 32px; /* Integrated custom track gap spacing */
    width: 100%;
}

/* Fixes code duplicate collision: Switches to flex layout ONLY if row tracks are detected inside */
.partners-grid:has(.partners-row-track) {
    display: flex;
    flex-direction: column;
    gap: 32px; /* Integrated custom column flow gap spacing */
}

/* ── Core Card Component ── */

/* Base profile container framing individual organizational assets */
.partner-card {
    border: 4px solid var(--color-teal-medium); /* Integrated thicker 4px layout border accent */
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes the call-to-action button directly to the bottom line */
    min-height: 300px; /* Integrated reduced custom layout card height */
    box-sizing: border-box;
    position: relative;
}

/* Content padded block structuring text nodes above action components */
.partner-content {
    padding: 24px 24px 10px 24px; /* Integrated custom card padding architecture */
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Unified containment fields keeping logo imagery dimensionally accurate */
.partner-logo-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.partner-logo {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.partner-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.partner-name-short {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--color-near-black);
    margin: 0;
    font-family: var(--font-display);
}

.partner-name-long {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-near-black);
    margin: 0;
}

/* Decorative role list items formatting administrative descriptors */
.partner-roles {
    list-style: none;
    padding: 0;
    margin: 4px 0 0 0;
}

.partner-roles li {
    font-size: 1rem; /* Integrated structural font size adjustment */
    line-height: 1.4;
    color: var(--color-grey-extra-dark);
}

/* ── Interactive Action Buttons ── */

/* Bottom anchored link element establishing dynamic hover parameters */
.partner-btn {
    align-self: flex-end; /* Snaps the call-to-action block to the bottom right corner boundary */
    background-color: var(--color-teal-medium);
    color: #ffffff;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    padding: 12px 24px 8px 24px; /* Integrated custom button asymmetrical spacing values */
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.partner-btn:hover {
    transform: translateY(-2px) translateX(-2px);
    box-shadow: 0 6px 15px rgba(7, 27, 25, 0.15); 
}

/* .partner-btn:hover {
    background-color: var(--color-teal-dark);
} */

/* ── Layer Variation Modifiers ── */

/* Associate status theme modifications */
.partner-card--associate {
    border-color: var(--color-teal-light);
}

.partner-card--associate .partner-btn {
    background-color: var(--color-teal-light);
    color: var(--color-near-black);
}

.partner-card--associate .partner-btn:hover {
    transform: translateY(-2px) translateX(-2px);
    box-shadow: 0 6px 15px rgba(7, 27, 25, 0.15); 
}

/* .partner-card--associate .partner-btn:hover {
    background-color: var(--color-teal-medium);
    color: #ffffff;
} */

/* Funding status theme modifications */
.partner-card--funding {
    border-color: var(--color-blue-medium);
}

.partner-card--funding .partner-btn {
    background-color: var(--color-blue-medium);
    color: #ffffff;
}

.partner-card--funding .partner-btn:hover {
    transform: translateY(-2px) translateX(-2px);
    box-shadow: 0 6px 15px rgba(7, 27, 25, 0.15); 
}

/* .partner-card--funding .partner-btn:hover {
    background-color: var(--color-blue-dark);
    color: #ffffff;
} */




/* ============================================================
   SIDEBAR LAYOUT
   ============================================================
   Two-column grid (content + sticky sidebar) used on news and
   partner pages. Includes logo grid with greyscale-to-color hover.
   ============================================================ */

/* Two-column layout: fluid content on left, 280px sidebar on right */
.sidebar-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    align-items: start;
    margin: 12px;
}

/* Sidebar content wrapper: vertical flex */
.sidebar-content {
    display: flex;
    flex-direction: column;
}

.sidebar-content h2 {
    margin-left: 16px;
}

/* Sidebar: sticky so it follows scroll within viewport */
.sidebar {
    position: sticky;
    top: 100px;
}

/* Sidebar box: card-style container with border and rounded corners */
/* Section heading inside sidebar */
.sidebar-box h3 {
    color: var(--color-near-black);
    margin: 16px 0px;
}

/* Images inside sidebar box */
.sidebar-box img {
    width: 100%;
    object-fit: contain;
    /* margin-bottom: 24px; */
}

/* 2-column grid for partner logos */
.logo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: center;
}

/* Logo grid link: centered flex container */
.logo-grid a {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Logo images: greyscale + reduced opacity by default, full color on hover */
.logo-grid img {
    width: 100%;
    height: 48px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.6;
    transition: filter 0.2s, opacity 0.2s;
}

/* Logo hover: restore color and full opacity */
.logo-grid img:hover {
    filter: grayscale(0);
    opacity: 1;
}


/* ============================================================
   NEWS ARTICLE
   ============================================================
   Styles for article cards (overview page) and single article view.
   ============================================================ */

.article {
    margin: 24px;
}

.article-meta {
    font-size: 0.9rem;
    color: var(--color-grey-extra-dark);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.article-header h1 {
    margin: 0.5rem 0 2rem 0;
}

.article-featured-image {
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    margin-bottom: 2rem;
}

.article-featured-image img {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: contain;
    display: block;
}

.article-body {
    line-height: 1.8;
    margin: 2rem 0;
}

.article-body p {
    margin-bottom: 1rem;
}

.article-body ul {
    padding-left: 1.2rem;
    margin: 0;
    margin-left: 2px;
}

.article-body li {
    font-size: 1.1rem;
    line-height: 1.5;
    margin-bottom: 0.8rem;
}



/* ============================================================
   10. FOOTER
   ============================================================
   Dark footer with copyright text and legal links.
   ============================================================ */

/* Footer: dark background, pushed to bottom via margin-top: auto on parent */
#footer {
    background-color: var(--color-near-black);
    padding: 24px;
    margin-top: auto;
}

/* Footer bottom row: flex, wrapped, centered content */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    max-width: 1200px;
    margin-inline: auto;
    font-size: 0.85rem;
    color: var(--color-blue-pale);
}

/* Legal links row */
.footer-legal {
    display: flex;
    gap: 24px;
}

/* Legal link base style */
.footer-legal a {
    color: var(--color-blue-pale);
    text-decoration: none;
    transition: color 0.2s ease;
}

/* Legal link hover: medium teal */
.footer-legal a:hover {
    color: var(--color-teal-medium);
}