/*
Theme Name: polimi-cds-theme
Theme Domain: polimi-cds-theme
Theme URI: https://example.com/
Author: Giovanni Malausa
Author URI: https://giovannimalausa.com
Description: Minimal block theme to convert a static HTML page into reusable Gutenberg patterns with locked styling.
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
Version: 1.4.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: polimi-cds-theme
Tags: block-patterns, full-site-editing, accessibility-ready
*/

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

/* #region Global Styles */
:root {
    /* ======== COLORS ======== */

    /* Area Colors */
    --design-solid: #aedd00;
    --design-alpha: #AEDD0000;

    --AUIC-solid: #FF8C8C;
    --AUIC-alpha: #FF8C8C00;

    --eng-generic-solid: #4DC9FF;
    --eng-generic-alpha: #4DC9FF00;

    --eng-ICAT-solid: #2DB7FF;
    --eng-ICAT-alpha: #2DB7FF00;

    --eng-3i-solid: #0BA4FF;
    --eng-3i-alpha: #0BA4FF00;

    /* Colors */
    --blue-main: #102C53;
    --blue-main-60: #75849A;
    --blue-main-40: rgba(16, 44, 83, 0.4);

    --primary-blue-accent: #2942DB;
    --primary-blue-accent-dark: #1C34C8;
    --primary-accent-2: #67B3FF;

    --primary-accent-solid: var(--design-solid); /* <——— Gets changed by setting in WP Customizer */
    --primary-accent-alpha: var(--design-alpha); /* <——— Gets changed by setting in WP Customizer */

    --grey-50: #F3F3F1;
    --grey-100: #E7EEF3;
    --grey-200: #E3E8EB;
    --grey-300: #C1C7CA;
    --grey-disabled: #5C6F82;
    --grey-news: #5C6F82;

    /* ======== FONT ======== */
    font-family: Manrope;

    /* ======== SIZES ======== */
    --max-width-desktop: 1456px;
    --padding-desktop: 80px;
    --radius-8px: 8px;
    --nav-height: 70px;

    /* tablet */
    --padding-tablet: 24px;

    /* mobile */
    --padding-mobile: 16px;

}

html {
    scroll-behavior: smooth;
}

/* ======== RESET ======== */
h1, h2, h3, h4, h5, p, a {
    margin: 0;
}

body {
    color: var(--blue-main);
}    

a {
    cursor: pointer;
    color: inherit;
    text-underline-offset: 4px;
}

h2 {
    font-size: 32px;
}

em {
    font-style: normal; /* Manrope does not support italic style of <em>. Ovveride to prevent rendering issues. */
}

* {
    box-sizing: border-box;
    margin: 0;
}

/* #endregion Global Styles */

/* Branding Bar */
.branding-bar {
    width: 100%;
    background-color: #e6e6e6;
}

.branding-bar--container {
    height: var(--nav-height);
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--max-width-desktop);
    padding-right: var(--padding-desktop);
    padding-left: var(--padding-desktop);
    margin-left: auto;
    margin-right: auto;
}

.lang-switch {
    display: flex;
    align-items: center;
    font-weight: 700;
}

.lang-switch.mobile-only-element {
    padding: 8px 0;
    width: 100%;
    justify-content: center;
    gap: 8px;
}

.branding-bar--container > div {
    display: flex;
    flex-flow: row;
    gap: 16px;
}

.lang-switch .lang-item {
    text-decoration: none;
    border-bottom: 2px solid transparent;
    padding: 0 4px 0 4px;
    line-height: 1;
    height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    border-bottom-color: transparent;
    transition: border-bottom-color 0.2s ease-in-out;
}

.lang-switch.mobile-only-element .lang-item {
    padding: 8px 4px;
}


.lang-switch .lang-item[aria-current="true"] {
    color: var(--primary-blue-accent);
    border-bottom-color: var(--primary-blue-accent); /* underline active */
}

.lang-switch .lang-item:hover {
     border-bottom-color: var(--primary-blue-accent-dark); /* nice hover */
}

.link--servizi-online {
    display: inline-flex;
    padding: 10px;
    flex-direction: column;
    align-items: flex-start;
    background-color: var(--primary-blue-accent);
    color: white;
    font-size: 14px;
    font-weight: 700;
    line-height: 90%;
    text-decoration: none;
}

/* ==========================================================================
   Header & Navigation Structure
   ========================================================================== */

/* The main <header> element that sticks to the top */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* The primary <nav> bar */
nav {
    position: relative;
    z-index: 100;
    width: 100%;
    background-color: #ffffffb3;
    backdrop-filter: blur(30px);
    transition: background-color .2s ease-in-out;
}

nav:hover {
    background-color: var(--primary-accent-solid);
}

/* The container that centers the nav content */
.nav--container {
    height: var(--nav-height); /* Use min-height instead of height */
    max-width: var(--max-width-desktop);
    padding: 0 var(--padding-desktop); /* Adjust vertical padding for aesthetics */
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Site logo/title */
.nav--site-id {
    font-size: 14px;
    font-weight: 700;
    color: var(--blue-main);
    text-transform: uppercase;
    text-decoration: none;
}

/* Wrapper for the main menu <ul> */
.nav--links-wrapper {
    height: 100%;
    display: flex;
    justify-content: center;
    margin-right: -16px; /* Balances padding of the last link */
}

/* The main <ul> menu list */
.nav--nav-links {
    list-style: none;
    display: flex;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   Sub-Menu System
   ========================================================================== */

/* The container that positions the sub-menu bar */
.sub-menu-container {
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    z-index: 99; /* Sits just behind the main nav */
    pointer-events: none; /* Prevents interaction when hidden */
}

/* The actual <ul> sub-menu bar */
.sub-menu-container .sub-menu {
    width: 100%;
    height: var(--nav-height);
    background-color: #ffffffb3;
    backdrop-filter: blur(30px);
    
    list-style: none;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 32px;
    
    /* Animation: Hidden by default */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}

/* The "open" state for the sub-menu bar */
.sub-menu-container .sub-menu.submenu-open {
    visibility: visible;
    opacity: 1;
    pointer-events: all; /* Enables interaction when visible */
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ==========================================================================
   Shared Link Styles (Main & Sub-Menu)
   ========================================================================== */


/* Base styles for ALL links in both menus */
.nav--nav-links > .menu-item > a,
.sub-menu-container .sub-menu > .menu-item > a {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 22px 16px 20px 16px;
    border-bottom: 2px solid transparent;
    transition: padding 0.2s ease-in-out, border-color 0.2s ease-in-out;
    
    font-size: 14px;
    color: var(--blue-main);
    text-decoration: none;
}

/* Shared hover state for the underline effect */
.nav--nav-links > .menu-item > a:hover,
.sub-menu-container .sub-menu > .menu-item > a:hover {
    padding-top: 20px;
    padding-bottom: 24px;
    border-bottom-color: var(--blue-main);
}

/* --- Unique font weights for each menu --- */
.nav--nav-links > .menu-item > a {
    font-weight: 700;
}
.sub-menu-container .sub-menu > .menu-item > a {
    font-weight: 500;
}

/* The dropdown indicator arrow on parent items */
.nav--nav-links > .menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M20.9014 10.7725L13.4014 18.2725C13.2968 18.3774 13.1727 18.4606 13.0359 18.5174C12.8992 18.5742 12.7526 18.6034 12.6045 18.6034C12.4564 18.6034 12.3098 18.5742 12.1731 18.5174C12.0363 18.4606 11.9121 18.3774 11.8076 18.2725L4.30762 10.7725C4.09627 10.5612 3.97754 10.2746 3.97754 9.97567C3.97754 9.67678 4.09627 9.39014 4.30762 9.17879C4.51896 8.96745 4.8056 8.84872 5.10449 8.84872C5.40338 8.84872 5.69002 8.96745 5.90137 9.17879L12.6054 15.8829L19.3095 9.17786C19.5208 8.96651 19.8075 8.84778 20.1064 8.84778C20.4053 8.84778 20.6919 8.96651 20.9032 9.17786C21.1146 9.3892 21.2333 9.67584 21.2333 9.97473C21.2333 10.2736 21.1146 10.5603 20.9032 10.7716L20.9014 10.7725Z' fill='%23102C53'/%3e%3c/svg%3e");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.25s ease-in-out;
}

/* Rotates the indicator when the menu is open */
.nav--nav-links > .menu-item-has-children.submenu-open > a::after {
    transform: rotate(180deg);
}

/* ======== PAGE STRUCTURE ======== */

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

.is-homepage .home-section {
    padding-top: 80px;
}

/* HOME TITLE SECTION */
.home--title-section {
    position: relative;
    height: 78svh;
    width: 100%;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    margin-top: calc(-1 * var(--nav-height)); /* to offset the nav height */
    margin-bottom: 40px;
}

.home--title-section--video,
.home--title-section--bg-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
}

/* Specific Z-indexes to create layers */
.home--title-section--bg-image {
    z-index: 1;
    background-size: cover;
    background-position: center;
}

.home--title-section--video {
    z-index: 2; /* Video sits on top of the fallback image */
}

.home--title-section--gradient {
    position: absolute;
    width: 100%;
    inset: 0;
    background: linear-gradient(0deg, #FFF 7.5%, rgba(255, 255, 255, 0) 70%);
    z-index: 3;
}

.home--title-section--header {
    position: relative;
    z-index: 4;
    display: flex;
    flex-flow: column;
    width: 100%;
    max-width: var(--max-width-desktop);
    padding-right: var(--padding-desktop);
    padding-left: var(--padding-desktop);
    margin-left: auto;
    margin-right: auto;
}

.home--title-section--supertitle {
    color: var(--primary-blue-accent);
    font-size: 22px;
    font-weight: 700;
    line-height: 24px;
}

.home--title-section--title {
    font-size: 92px;
    font-weight: 700;
    line-height: 110%;
    letter-spacing: -1%;
    color: var(--blue-main);
    overflow: visible;
}

/* STATIC PAGE TITLE SECTION */

.static-page--simple-title-section {
    position: relative;
    margin-top: -67px; /* to offset the nav height */
    padding-top: calc(67px + 48px);
    padding-bottom: 100px;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.static-page--title-section {
    position: relative;
    height: 70svh;
    width: 100%;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    margin-top: -67px; /* to offset the nav height */
    margin-bottom: 100px;
}

.static-page--title-section--img {
    position: absolute;
    object-fit: cover;
    object-position: center;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

.static-page--title-section--gradient {
    position: absolute;
    width: 100%;
    inset: 0;
    background: linear-gradient(0deg, #FFF 7.5%, rgba(255, 255, 255, 0) 70%);
    z-index: 1;
}

.static-page--title-section--header {
    position: relative;
    z-index: 1;
    display: flex;
    flex-flow: column;
    width: 100%;
    max-width: var(--max-width-desktop);
    padding-right: var(--padding-desktop);
    padding-left: var(--padding-desktop);
    margin-left: auto;
    margin-right: auto;
}

.static-page--title-section--supertitle {
    color: var(--primary-blue-accent);
    font-size: 17px;
    font-weight: 700;
    line-height: 120%;
}

.static-page--title-section--backlink {
    color: var(--blue-main);
    font-size: 16px;
    font-weight: 700;
    line-height: 120%;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.static-page--title-section--backlink:hover {
    color: var(--primary-blue-accent);
    text-decoration: underline;
}

.static-page--title-section--backlink::before {
    content: '';
    background-image: url('Assets/Arrows/arrow--internal--blue-circle.svg');
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    width: 18px;
    height: 18px;
    transform: rotate(180deg);
}

.static-page--title-section--title,
.page-title--no-image--title {
    font-size: 56px;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: -1%;
    color: var(--blue-main);
}

.static-page--title-section--subtitle,
.page-title--no-image--subtitle {
    font-size: 18px;
    font-weight: 500;
    line-height: 140%;
    margin-top: 16px;
    max-width: 80ch;
}

/* SECTION HEADER */
.is-homepage .section-header {
    max-width: var(--max-width-desktop);
    padding-right: var(--padding-desktop);
    padding-left: var(--padding-desktop);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
}

.section-supertitle,
.course-semester-title {
    border-left: 1px solid var(--primary-blue-accent);
    color: var(--primary-blue-accent);
    margin-bottom: 16px;
    padding-left: 12px;
    font-size: 17px;
    font-weight: 700;
    line-height: 24px;
}

.section-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 120%;
    letter-spacing: -1%;
    color: var(--blue-main);
}

.section-title--wrapper {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: baseline;
}

.section-title--last-updated {
    font-size: 14px;
    font-weight: 500;
    line-height: 160%;
    color: var(--blue-main-40);
}

.section-title--CTA {
    display: inline-flex;
    flex-flow: row;
    align-items: center;
    gap: 6px;
    font-size: 18px;
    font-weight: 700;
    color: var(--blue-main);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
    cursor: pointer;
}

.section-title--CTA:hover {
    color: var(--primary-blue-accent);
    text-decoration: underline;
}

.section-title--CTA::after {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url('Assets/Arrows/arrow--internal--blue-circle.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

/* SECTION CONTAINER */
.is-homepage .section--container {
    max-width: var(--max-width-desktop);
    padding-right: var(--padding-desktop);
    padding-left: var(--padding-desktop);
    margin-left: auto;
    margin-right: auto;
}

/* STATIC PAGE -- CONTAINER */
.static-page--container {
    max-width: var(--max-width-desktop);
    padding-right: var(--padding-desktop);
    padding-left: var(--padding-desktop);
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: auto;
    gap: 16px;
    align-items: baseline;
}

.static-page--shoulder {
    grid-column: 1 / 4; /* Always occupy the first three columns (columns 1..3) */
    grid-row: 1 / -1; /* Span from the first to the last row so it fills any rows created */
    display: flex;
    flex-flow: column;
    gap: 4px;
    position: sticky;
    top: 67px; /* Stick under the top navigation (nav height is 67px) */
}

.static-page--shoulder--title {
    font-size: 14px;
    font-weight: 700;
    line-height: 100%;
}

.static-page--main-content {
    grid-column: 4 / 11;
    display: flex;
    flex-flow: column;
    gap: 0px;
    margin-bottom: 80px;
}

.static-page--main-content > h2 {
    font-size: 32px;
    font-weight: 700;
    line-height: 110%;
    letter-spacing: -1%;
    margin-bottom: 24px;
}

.static-page--main-content > h2:not(:first-child) {
    margin-top: 48px;
}

.static-page--main-content > p,
.people-block--description {
    font-size: 20px;
    font-weight: 500;
    line-height: 140%;
}

.static-page--main-content > p a, .warning-msg--block a {
    color: var(--primary-blue-accent);
    text-decoration: underline;
}

/* HOME HERO SECTION */
.home--hero-section--wrapper {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 16px;
    margin-bottom: 40px;
    align-items: baseline;
}

.home--hero-section--title {
    grid-column: span 3;
    display: flex;
    justify-content: flex-start;
    font-size: 32px;
}

.home--hero-section--description {
    grid-column: span 7;
    display: flex;
    flex-flow: column;
    justify-content: center;
    gap: 0px;
}

.home--hero-section--description p {
    font-size: 27px;
    font-weight: 500;
    line-height: 130%;
    color: var(--blue-main);
    margin-bottom: 0px;
}

.home--hero-section--description p:last-of-type {
    margin-bottom: 48px;
}


/* Link / Arrow Right (circled, blue) */
.link--arrow-right--circled--blue {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-blue-accent);
    text-decoration: none;
    transition-property: color;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
}

.link--arrow-right--circled--blue::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('Assets/arrow-right_circled_white-on-blue.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

.link--arrow-right--circled--blue:hover {
    color: var(--primary-blue-accent);
    text-decoration: underline;
}

/* CARDS */
/* Cards Wrappers */
.cards-wrapper-2x1-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    grid-column-gap: 16px;
    grid-auto-rows: 400px;
    gap: 16px;
}

.cards-wrapper-2x1-grid:has(> :nth-last-child(4)) {
    grid-template-columns: 1fr 1fr; /* 2 columns */
    grid-auto-flow: unset; /* Reset auto-flow */
    grid-auto-columns: unset; /* Reset auto-columns */
}

.cards-wrapper-3x1-sq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    grid-column-gap: 16px;
    grid-template-rows: 1fr;
    gap: 16px;
}

.spotlight--cards-wrapper {
    max-width: var(--max-width-desktop);
    padding-right: var(--padding-desktop);
    padding-left: var(--padding-desktop);
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: repeat(5, 1fr);
    grid-template-columns: repeat(2, 1fr);
    height: 650px;
    margin-left: auto;
    margin-right: auto;
    display: grid;
}

/* Card Base Styles */
.card {
    height: 100%;
    background-color: var(--grey-100);
    border-radius: var(--radius-8px);
    display: flex;
    flex-flow: column;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    color: white;
}

.card-square {
    aspect-ratio: 1/1;
}

.card.is-text {
    color: var(--blue-main);
}

.graphical-card {
    color: var(--blue-main);
}

.card--bg-img {
    position: absolute;
    object-fit: cover;
    object-position: center;
    inset: 0;
    width: 100%;
    height: 100%;
}

.card--graphics {
    position: absolute;
    bottom: 0px;
    right: 0px;
    object-fit: scale-down;
    object-position: center;
}

.card.is-text .card-graphic {
    position: absolute;
    bottom: 0px;
    right: 0px;
    object-fit: scale-down;
    object-position: center;
    height: 80%;
}

.card.is-text .card-upper-title {
    color: var(--primary-blue-accent);
}

.card.is-text .card-text {
    margin-top: 8px;
}

.card.is-text .card-cta {
    background-color: var(--primary-blue-accent);
    color: white;
}

.spotlight-card {
    color: var(--blue-main);
    aspect-ratio: unset;
}

.spotlight--bg-img {
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.card-overlay {
    background-image: linear-gradient(#000000a1,#0000 62%);
    width: 100%;
    height: 100%;
    position: absolute;
}

.accent {
    background-image: linear-gradient(180deg,var(--primary-accent-alpha) 36%,var(--primary-accent-solid));
    inset: 0% auto auto 0%;
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
}

.card:hover .accent {
    opacity: 1
}

.card-link {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    text-decoration: none;
    position: relative;
    padding: 24px;
}

.spotlight-card.card-link {
    padding: 0px;
}

.card-header {
    display: flex;
    flex-flow: column;
    gap: 8px;
}

.graphical-card .card-header {
    max-width: 70%;
}

.card-title {
    font-size: 27px;
    font-weight: 700;
    line-height: 110%;
    letter-spacing: -1%;
}

.spotlight-card-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 110%;
    letter-spacing: -1%;
    color: var(--blue-main);
}

.card-upper-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 125%;
}

.graphical-card .card-upper-title {
    color: var(--primary-blue-accent);
}

.spotlight-card .card-upper-title {
    color: var(--primary-blue-accent);
}

.card-description {
    font-size: 18px;
    font-weight: 500;
    line-height: 160%;
    margin-top: 8px;
}

.card-cta {
    gap: 0px;
    color: var(--blue-main);
    background-color: rgb(255, 255, 255);
    border-radius: 200px;
    justify-content: center;
    align-items: center;
    width: max-content;
    height: 38px;
    padding: 10px;
    transition-property: padding, grid-column-gap;
    transition-duration: 0.2s, 0.6s;
    transition-timing-function: cubic-bezier(.645, .045, .355, 1), cubic-bezier(.645, .045, .355, 1);
    display: flex;
    position: relative;
    bottom: 0px;
    left: 0px;
}

.graphical-card .card-cta {
    background-color: var(--primary-blue-accent);
    color: white;
}

.card:hover .card-cta {
    padding-left: 12px;
    grid-column-gap: 2px;
}

.card-cta-txt {
    display: block;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 700;
    line-height: 20;
    max-width: 0px;
    overflow: hidden;
    transition: max-width 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.card:hover .card-cta-txt {
    max-width: 300px;
}

.card-cta-img {
    object-fit: none;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
}

.spotlight--main-card {
    grid-area: span 5/span 1/span 5/span 1;
}

.spotlight--main-card .card-link, .spotlight--tertiary-card .card-link {
    padding: 24px;
}

.spotlight--secondary-card {
    grid-area: span 3/span 1/span 3/span 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.spotlight--secondary-card--left-half {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    padding: 24px;
}

.spotlight--secondary-card--right-half {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    height: 100%;
}

.spotlight--secondary-card--right-half img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.spotlight--tertiary-card {
    grid-area: span 2/span 1/span 2/span 1;
}

.spotlight--tertiary-card--footer {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: flex-end; /* align items to the bottom edge */
    width: 100%;
}

.spotlight--tertiary-card--stats-wrapper {
    display: flex;
    flex-flow: row;
    gap: 56px;
}

.spotlight--tertiary-card--stat {
    display: flex;
    flex-flow: column;
    gap: 4px;
}

.spotlight--tertiary-card--stat--value {
    font-size: 56px;
    font-weight: 700;
    line-height: 110%;
    letter-spacing: -1%;
    background: linear-gradient(90deg, #2942DB, #67B3FF);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.spotlight--tertiary-card--stat--label {
    font-size: 14px;
    font-weight: 700;
}

.spotlight--tertiary-card--bg-img {
    position: absolute;
    object-fit: cover;
    inset: auto 0% 0% auto;
}

/* FULL WIDTH BANNER */
.full-width-banner {
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--primary-accent-solid);
    padding-top: 48px;
    padding-bottom: 48px;
    margin-top: 80px;

    background-image: url("Assets/Graphics/full-width-banner--bg-graphics.svg"); /* Do not repeat, cover */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.full-width-banner--container {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    max-width: var(--max-width-desktop);
    padding-right: var(--padding-desktop);
    padding-left: var(--padding-desktop);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.full-width-banner--description {
    font-size: 14px;
    font-weight: 700;
    line-height: 125%;
}

.full-width-banner--title {
    font-size: 32px;
    font-weight: 700;
    line-height: 120%;
}

.full-width-banner--cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 14px 20px 14px 24px;
    border-radius: 200px;
    border: 1px solid var(--blue-main);
    font-size: 14px;
    font-weight: 700;
    line-height: 140%;
    text-decoration: none;
    width: max-content;
    transition: border 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.full-width-banner--cta:hover {
    background-color: var(--blue-main);
    color: white;
}

.full-width-banner--cta svg {
    position: relative;
    top: 1px;
}

/* STAT SECTION */
.stats-section--wrapper {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto;
    column-gap: 16px;
    row-gap: 40px;
    grid-auto-flow: column dense;
    margin-top: 80px;
}

/* Statistic */
.stats-section--stat {
    grid-column: span 4;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    gap: 16px;
}

.stats-section--stat.is-large {
    grid-row: 1;
}

.stats-section--stat.is-small {
    grid-row: 2;
}

.stats-section--stat--value {
    font-size: 40px;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: -1%;
    border-left: 1px solid var(--blue-main);
    padding-left: 16px;
}

.stats-section--stat.is-large .stats-section--stat--value {
    font-size: 74px;
}

.stats-section--stat--unit {
    font-size: 60%;
}

.stats-section--stat--label {
    font-size: 16px;
    font-weight: 500;
    line-height: 125%;
    padding-left: 16px;
}

/* Table of Contents */ 
.toc-list {
    list-style-type: decimal-leading-zero;
    font-size: 14px;
    font-weight: 500;
    padding-left: 30px;
}

.toc-list a {
    text-decoration: none;
}

/* Shoulder Quick Links */
.quick-links-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.polimi-quick-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.polimi-quick-links li {
    margin: 0;
}

.polimi-quick-links a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--blue-main);
    text-decoration: none;
    transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.polimi-quick-links a:hover {
    color: var(--primary-blue-accent-dark);
    text-decoration: underline;
}

/* Icon after link: default INTERNAL arrow */
.polimi-quick-links a::after {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: var(--primary-blue-accent);
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    /* Internal arrow (same glyph used in buttons) */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='white'%3E%3Cpath d='M13.44 8.71416C13.4043 8.62209 13.3508 8.53799 13.2825 8.46666L9.5325 4.71666C9.46257 4.64673 9.37955 4.59126 9.28819 4.55341C9.19682 4.51557 9.09889 4.49609 9 4.49609C8.80027 4.49609 8.60873 4.57543 8.4675 4.71666C8.39757 4.78659 8.3421 4.8696 8.30426 4.96097C8.26641 5.05234 8.24693 5.15026 8.24693 5.24916C8.24693 5.44888 8.32627 5.64043 8.4675 5.78166L10.9425 8.24916H5.25C5.05109 8.24916 4.86032 8.32818 4.71967 8.46883C4.57902 8.60948 4.5 8.80025 4.5 8.99916C4.5 9.19807 4.57902 9.38884 4.71967 9.52949C4.86032 9.67014 5.05109 9.74916 5.25 9.74916H10.9425L8.4675 12.2166C8.3972 12.2863 8.34141 12.3693 8.30333 12.4607C8.26526 12.5521 8.24565 12.6501 8.24565 12.7491C8.24565 12.8481 8.26526 12.9462 8.30333 13.0375C8.34141 13.1289 8.3972 13.2119 8.4675 13.2816C8.53722 13.3519 8.62017 13.4077 8.71157 13.4458C8.80296 13.4839 8.90099 13.5035 9 13.5035C9.09901 13.5035 9.19704 13.4839 9.28843 13.4458C9.37983 13.4077 9.46278 13.3519 9.5325 13.2816L13.2825 9.53166C13.3508 9.46033 13.4043 9.37622 13.44 9.28416C13.515 9.10156 13.515 8.89675 13.44 8.71416Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='white'%3E%3Cpath d='M13.44 8.71416C13.4043 8.62209 13.3508 8.53799 13.2825 8.46666L9.5325 4.71666C9.46257 4.64673 9.37955 4.59126 9.28819 4.55341C9.19682 4.51557 9.09889 4.49609 9 4.49609C8.80027 4.49609 8.60873 4.57543 8.4675 4.71666C8.39757 4.78659 8.3421 4.8696 8.30426 4.96097C8.26641 5.05234 8.24693 5.15026 8.24693 5.24916C8.24693 5.44888 8.32627 5.64043 8.4675 5.78166L10.9425 8.24916H5.25C5.05109 8.24916 4.86032 8.32818 4.71967 8.46883C4.57902 8.60948 4.5 8.80025 4.5 8.99916C4.5 9.19807 4.57902 9.38884 4.71967 9.52949C4.86032 9.67014 5.05109 9.74916 5.25 9.74916H10.9425L8.4675 12.2166C8.3972 12.2863 8.34141 12.3693 8.30333 12.4607C8.26526 12.5521 8.24565 12.6501 8.24565 12.7491C8.24565 12.8481 8.26526 12.9462 8.30333 13.0375C8.34141 13.1289 8.3972 13.2119 8.4675 13.2816C8.53722 13.3519 8.62017 13.4077 8.71157 13.4458C8.80296 13.4839 8.90099 13.5035 9 13.5035C9.09901 13.5035 9.19704 13.4839 9.28843 13.4458C9.37983 13.4077 9.46278 13.3519 9.5325 13.2816L13.2825 9.53166C13.3508 9.46033 13.4043 9.37622 13.44 9.28416C13.515 9.10156 13.515 8.89675 13.44 8.71416Z'/%3E%3C/svg%3E");
}

/* External links: swap to external arrow when target is _blank */
.polimi-quick-links a[target="_blank"]::after {
    background: url("Assets/Arrows/arrow--external--blue.svg") no-repeat center;
    background-size: contain;
    vertical-align: middle;

    background-color: unset;
    mask-size: unset;
    -webkit-mask-size: unset;
    mask-repeat: unset;
    -webkit-mask-repeat: unset;
    -webkit-mask-image: unset;
    mask-image: unset;
}

/* FOOTER */
footer {
    background-color: var(--blue-main);
    margin-top: 80px;
}

body > .full-width-banner + .footer {
    /* selects the footer when directly following a full-width banner */
    margin-top: 0px;
}

.footer--container {
    display: flex;
    flex-flow: column;
    color: white;
    font-size: 14px;
}

.footer--row {
    border-bottom: 1px solid #ffffff33;
}

.footer--row:last-child {
    border-bottom: none;
}

.footer--inner-row-1,
.footer--inner-row-2,
.footer--inner-row-3 {
    width: 100%;
    max-width: var(--max-width-desktop);
    padding-right: var(--padding-desktop);
    padding-left: var(--padding-desktop);
    margin-left: auto;
    margin-right: auto;
}

.footer--inner-row-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    padding-bottom: 24px;
}

.footer--inner-row-2 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    padding-top: 40px;
    padding-bottom: 40px;
}

.footer--row-2--clmn-1 {
    grid-column: span 6;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
}

.footer--row-2--clmn-2, .footer--row-2--clmn-3 {
    grid-column: span 3;
    display: flex;
    flex-flow: column;
    gap: 16px;
}

.footer--inner-row-3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    padding-top: 24px;
    padding-bottom: 24px;
}

.footer--row-3--links {
    display: flex;
    gap: 24px;
    font-weight: 700;
}

.footer--row-2--clmn-1--sedi,
.footer--row-2--clmn-1--dona {
    display: flex;
    flex-flow: column;
    gap: 16px;
}

.footer--row-2--clmn-1--sedi > *:not(h3),
.footer--row-2--clmn-1--dona > *:not(h3),
.footer--row-2--clmn-2 > *:not(h3),
.footer--row-2--clmn-3 > *:not(h3) {
    margin-left: 19px;
}

.footer--row-1--social-icons {
    display: flex;
    gap: 16px;
}

.footer--social-media-icon {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

footer h3 {
    display: flex;
    padding-left: 19px;
    border-left: 1px solid var(--primary-accent-2);
    font-size: 14px;
    font-weight: 700;
    line-height: 14px;
    color: var(--primary-accent-2);
}

footer a {
    text-decoration: none;
}

.link--external--outline {
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px 9px 16px;
    border-radius: 200px;
    border: 1px solid white;
    align-self: flex-start;
    transition: border 0.2s ease-in-out;
}

.link--external--outline:hover {
    border: 1px solid #ffffff80;
}

.link--external--outline::after {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url("Assets/Arrows/arrow--external--white.svg") no-repeat center;
    background-size: contain;
    vertical-align: middle;
}

.footer--nav-links {
    list-style: none;
    display: flex;
    flex-flow: column;
    gap: 16px;
    margin: 0;
    padding: 0;
    width: 100%;
}

.footer--nav-links .menu-item, .footer--link--internal, .footer--link--external {
    text-decoration: none;
    text-align: unset;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    list-style-type: none;
    margin-block-end: 0;
    margin-block-start: 0;
    padding-inline-start: 0;
}

.footer--nav-links .menu-item::after, .footer--link--internal::after {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url("Assets/Arrows/arrow--internal--light-blue.svg") no-repeat center;
    background-size: contain;
    vertical-align: middle;
}

.footer--link--external::after {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url("Assets/Arrows/arrow--external--light-blue.svg") no-repeat center;
    background-size: contain;
    vertical-align: middle;
    margin-left: 2px;
}

.footer--row-2--clmn-1--dona p {
    font-size: 13px;
    font-weight: 700;
    line-height: 160%;
}

/* News Post Styles */
.news-post--title-section {
    padding-bottom: 40px;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.news-post--title-section--wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    column-gap: 16px;
    width: 100%;
    max-width: var(--max-width-desktop);
    padding-right: var(--padding-desktop);
    padding-left: var(--padding-desktop);
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    margin-bottom: 80px;
}

.news-post--title-section--image {
    grid-column: span 1;
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 16px;
}

.news-post--title-section--header {
    display: flex;
    grid-column: span 1;
    flex-flow: column;
    gap: 16px;
    height: 100%;
    justify-content: flex-end;
}

.news-post--title-section--backlink {
    grid-column: span 2;
    color: var(--primary-blue-accent);
    font-size: 16px;
    font-weight: 700;
    line-height: 120%;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.news-post--title-section--header h1 {
    font-size: 56px;
    font-weight: 700;
    line-height: 70px;
    letter-spacing: -1px;
}

.news-post--title-section--date {
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
}

.news-post--title-section--tag-wrapper {
    display: flex;
    flex-flow: row wrap;
    gap: 8px;
}

.news-post--title-section--tag {
    display: inline-flex;
    padding: 6px 10px;
    color: var(--grey-news);
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
    border: 1px solid #C1C7CA;
    border-radius: 8px;
    width: max-content;
}

.news-post--container {
    max-width: var(--max-width-desktop);
    padding-right: var(--padding-desktop);
    padding-left: var(--padding-desktop);
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: auto;
    gap: 16px;
    align-items: baseline;
    margin-bottom: 80px;
}

.news-post--content {
    grid-column: 4 / -3; /* Always occupy 7 columns (3 empty on left, 2 empty on right) */
    display: flex;
    flex-flow: column;
    gap: 24px;
    font-size: 20px;
    font-weight: 500;
    line-height: 140%;
}

.page-title--no-image--wrapper {
    width: 100%;
    max-width: var(--max-width-desktop);
    padding-right: var(--padding-desktop);
    padding-left: var(--padding-desktop);
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    margin-bottom: 40px;
}

/* News Archive Styles */
.news-archive--container {
    max-width: var(--max-width-desktop);
    padding-right: var(--padding-desktop);
    padding-left: var(--padding-desktop);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 80px;
}

.news-archive--grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 24px;
}

.news--preview {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 16px;
    height: 300px;
    border-radius: 16px;
    background-color: var(--grey-100);
    overflow: hidden;
}

.news--preview--image-link {
    grid-column: span 4;
    display: block;
    width: 100%;
    height: 100%;
}

.news--preview--image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news--preview--content {
    grid-column: span 8;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    padding: 24px;
}

.news--preview--meta {
    display: flex;
    flex-flow: column;
    gap: 16px;
    line-height: 20px;
    font-size: 14px;
    font-weight: 500;
}

.news--preview--title {
    font-size: 18px;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: -1%;
}

.news--preview--title a {
    text-decoration: none;
}

.news--preview--date {
    color: var(--grey-news);
    font-weight: 700;
}

.news--preview--more {
    display: flex;
    gap: 4px;
    align-items: center;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    color: var(--primary-blue-accent);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
    cursor: pointer;
}

/* Home > News Grid */

.home-news--grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 16px;
    height: 470px;
}

.news--card {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, 1fr);
    row-gap: 16px;
    height: 100%;
    border-radius: 8px;
    background-color: var(--grey-100);
    overflow: hidden;
    grid-column: span 3;
    border: 1px solid var(--grey-200);
    transition: box-shadow 0.2s ease-in-out;
}

.news--card:hover {
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.1); /* soft, diffused ambient */
}

.news--card:hover .news--card--more {
    text-decoration: underline;

}

.news--card--image-link {
    grid-row: span 2;
    display: block;
    width: 100%;
    height: 100%;
}

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

.news--card--content {
    grid-row: span 3;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    padding: 16px;
}

.news--card--meta {
    display: flex;
    flex-flow: column;
    gap: 8px;
    line-height: 20px;
    font-size: 14px;
    font-weight: 500;
}

.news--card--title {
    font-size: 18px;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: -1%;
}

.news--card--title a {
    text-decoration: none;
}

.news--card--date {
    color: var(--grey-news);
    font-weight: 700;
}

.news--card--excerpt {
    font-size: 16px;
    font-weight: 500;
    line-height: 140%;
    display: -webkit-box;
    -webkit-line-clamp: 3;  /* number of lines to show */
    line-clamp: 3;          /* standard property (for forward compatibility) */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.news--card--more {
    display: flex;
    gap: 3px;
    align-items: center;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    color: var(--primary-blue-accent);
    text-decoration: none;
    text-decoration-thickness: 1.5px;
    transition: color 0.2s ease-in-out;
    cursor: pointer;
}

/* WARNING MESSAGE BLOCK */
.warning-msg--block {
    border-left: 2px solid var(--blue-main);
    border-radius: 0px 8px 8px 0px;
    background-color: var(--grey-100);
    display: flex;
    flex-flow: column;
    gap: 0px;
    padding: 24px 56px 24px 60px;
    overflow: hidden;
    font-weight: 500;
    font-size: 16px;
    line-height: 140%;
    margin-top: 48px;
}

.static-page--main-content > .warning-msg--block:first-child {
    margin-top: 0;
}

.warning-msg--block--title {
    font-size: 18px;
    font-weight: 700;
    line-height: 160%;
    margin: 0;
}

.warning-msg--block p {
    margin: 0;
}

.editor-error {
    color: red;
    font-weight: 700;
}

/* Projects Post Layout */
.projects-post--title-section--wrapper,
.projects-post--container {
    max-width: var(--max-width-desktop);
    padding-right: var(--padding-desktop);
    padding-left: var(--padding-desktop);
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    margin-bottom: 80px;
}

.projects-post--title-section--wrapper {
    display: flex;
    flex-flow: column;
    gap: 16px;
}

.projects-post--title-section--wrapper h1 {
    font-size: 56px;
    font-weight: 700;
    line-height: 70px;
    letter-spacing: -1px;
    margin: 0;
}

.projects-post--container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: auto;
    gap: 16px;
}

.projects-post--sidebar {
    grid-column: span 4;
    display: flex;
    flex-flow: column;
    gap: 16px;
}

.projects-post--content {
    grid-column: span 7;
    font-size: 20px;
    font-weight: 500;
    line-height: 140%;
}

.projects-post--content a {
    color: var(--primary-blue-accent);
}

.projects-post--content img {
    max-width: 100%;
    width: 100%;
    border-radius: var(--radius-8px);
    display: block;
    margin-top: 24px;
    margin-bottom: 0; 
}

/* * Remove top margin from the first element.
 *
 * This targets an <img> if it's the direct first child,
 * OR if it's inside a <p> or <figure> that is the first child.
 * This is robust for WordPress content.
 */
.projects-post--content > img:first-child,
.projects-post--content > p:first-child,
.projects-post--content > figure:first-child {
    margin-top: 0;
}

/* If the image is wrapped, reset the margin
 * on the image *inside* that first wrapper.
 */
.projects-post--content > p:first-child img,
.projects-post--content > figure:first-child img {
    margin-top: 0;
}

figcaption {
    font-size: 14px;
    font-weight: 500;
    line-height: 140%;
}

.projects-post--featured-image {
    width: 100%;
    height: 500px;
    border-radius: var(--radius-8px);
    object-fit: cover;
    margin-top: 16px;
}

.projects-post--meta {
    display: flex;
    flex-flow: column;
    gap: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 160%;
}

.projects-post--meta-label {
    opacity: .6;
    font-size: 14px;
}

/* PROJECTS ARCHIVE Layout */
.projects-archive--grid {
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--padding-desktop);
    padding-right: var(--padding-desktop);
    width: 100%;
    max-width: var(--max-width-desktop);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 16px;
    row-gap: 16px;
    margin-top: 40px;
    margin-bottom: 80px;
}

.projects-archive--grid .project--card {
    grid-column: span 4;
}

/* PEOPLE LAYOUT */
.people-archive--grid {
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--padding-desktop);
    padding-right: var(--padding-desktop);
    width: 100%;
    max-width: var(--max-width-desktop);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 16px;
    row-gap: 24px;
    margin-top: 40px;
    margin-bottom: 80px;
}

.people-archive--card {
    grid-column: span 4;
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    gap: 16px;
}

.people-archive--card img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 8px;
}

.people-archive--card--details {
    font-weight: 500;
}   

.people-archive--card--fullName {
    font-size: 20px;
    font-weight: 700;
    line-height: 130%;
    margin: 0;
}

.people-archive--card--link {
    text-decoration: none;
    color: var(--blue-main);
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.people-archive--card--link:hover {
    text-decoration: underline;
    text-decoration-color: var(--primary-blue-accent);
}

/* People archive: optional black & white images */
.people-archive--section.is-bw .people-archive--card img {
    filter: grayscale(100%);
}

/* PEOPLE Block LAYOUT */
.people-block--section .container {
    display: flex;
    flex-flow: column;
    gap: 16px;
}

.people-block--header {
    display: flex;
    flex-flow: column;
    gap: 16px;
}

.people-block--grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 16px;
    row-gap: 24px;
}

.people-block--grid .people-archive--card {
    grid-column: span 1;
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    gap: 16px;
}

/* ====== Course Program Display ====== */
.course-program-display {
    display: flex;
    flex-flow: column;
    gap: 48px;
}

.course-year {
    display: flex;
    flex-flow: column;
    gap: 24px;
}

.course-year-title {
    margin-bottom: 16px;
}

.subject-list {
    list-style: none;  /* Removes the bullet points */
    padding: 0;        /* Removes the default left padding */
    margin: 0;         /* Removes the default top/bottom margins */
    margin-top: 16px;
    margin-bottom: 16px;
    width: 100%;
    display: flex;
    flex-flow: column;
}

.subject-list li {
    padding: 16px 0;
    margin: 0;
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    gap: 16px;
    border-bottom: 1px solid var(--grey-200);
}

.subject-list li.has-options {
    padding-bottom: 0px;
    border-bottom: none;
}

.subject-options-list li {
    padding-left: 24px;
}

.subject-list li:first-child {
    border-top: 1px solid var(--grey-200);
}

.subject-header {
    width: 100%;
    display: flex;
    flex-flow: row;
    align-items: baseline;
    justify-content: space-between;
}

.subject-title a,
.subject-option-title a {
    text-decoration: none;
}

.subject-meta {
    display: flex;
    flex-flow: row;
    gap: 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--blue-main-60);
}

.subject-sections {
    display: flex;
    flex-flow: row;
    gap: 8px;
}

.subject-items-wrapper {
    display: flex;
    flex-flow: row;
    gap: 8px;
    color: var(--blue-main);
}

.subject-cfu {
    color: var(--blue-main);
}

.subject-options-list {
    list-style: none;  /* Removes the bullet points */
    padding: 0;        /* Removes the default left padding */
    margin: 0;         /* Removes the default top/bottom margins */
    display: flex;
    flex-flow: column;
    width: 100%;
}

.subject-options-list li {
    width: 100%;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
}

.subject-external-link {
    display: flex;
    flex-flow: row;
    align-items: center;
    gap: 2px;
    color: var(--primary-blue-accent);
}


.course-year-filters {
    display: flex;
    flex-flow: row;
    gap: 12px;
    overflow-x: auto;
}

.course-filter-btn {
    cursor: pointer;
    font-family: Manrope, sans-serif;
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    color: var(--blue-main);
    background-color: var(--grey-200);
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    white-space: nowrap;
    transition: background-color 0.2s ease-in-out;
}

.course-filter-btn:hover {
    background-color: var(--grey-300);
}

.course-filter-btn.is-active {
    background-color: var(--primary-accent-solid);
}



/* ====== BUTTONS ====== */

.polimi-button-internal-fill {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    padding: 10px 12px 10px 16px;
    border-radius: 200px;
    text-decoration: none;
    width: fit-content;
    /* Fill */
    background: var(--primary-blue-accent);
    color: white;
    border: 1px solid var(--primary-blue-accent);
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.polimi-button-internal-fill::after {
    content: "";
    display: block;
    position: relative;
    width: 18px;
    height: 18px;
    
    /* Add the -webkit- prefixes */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    /* This is correct: the background-color IS the icon color */
    background-color: currentColor;

    /* Add the prefixed version of mask-image */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M13.44 8.71416C13.4043 8.62209 13.3508 8.53799 13.2825 8.46666L9.5325 4.71666C9.46257 4.64673 9.37955 4.59126 9.28819 4.55341C9.19682 4.51557 9.09889 4.49609 9 4.49609C8.80027 4.49609 8.60873 4.57543 8.4675 4.71666C8.39757 4.78659 8.3421 4.8696 8.30426 4.96097C8.26641 5.05234 8.24693 5.15026 8.24693 5.24916C8.24693 5.44888 8.32627 5.64043 8.4675 5.78166L10.9425 8.24916H5.25C5.05109 8.24916 4.86032 8.32818 4.71967 8.46883C4.57902 8.60948 4.5 8.80025 4.5 8.99916C4.5 9.19807 4.57902 9.38884 4.71967 9.52949C4.86032 9.67014 5.05109 9.74916 5.25 9.74916H10.9425L8.4675 12.2166C8.3972 12.2863 8.34141 12.3693 8.30333 12.4607C8.26526 12.5521 8.24565 12.6501 8.24565 12.7491C8.24565 12.8481 8.26526 12.9462 8.30333 13.0375C8.34141 13.1289 8.3972 13.2119 8.4675 13.2816C8.53722 13.3519 8.62017 13.4077 8.71157 13.4458C8.80296 13.4839 8.90099 13.5035 9 13.5035C9.09901 13.5035 9.19704 13.4839 9.28843 13.4458C9.37983 13.4077 9.46278 13.3519 9.5325 13.2816L13.2825 9.53166C13.3508 9.46033 13.4043 9.37622 13.44 9.28416C13.515 9.10156 13.515 8.89675 13.44 8.71416Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M13.44 8.71416C13.4043 8.62209 13.3508 8.53799 13.2825 8.46666L9.5325 4.71666C9.46257 4.64673 9.37955 4.59126 9.28819 4.55341C9.19682 4.51557 9.09889 4.49609 9 4.49609C8.80027 4.49609 8.60873 4.57543 8.4675 4.71666C8.39757 4.78659 8.3421 4.8696 8.30426 4.96097C8.26641 5.05234 8.24693 5.15026 8.24693 5.24916C8.24693 5.44888 8.32627 5.64043 8.4675 5.78166L10.9425 8.24916H5.25C5.05109 8.24916 4.86032 8.32818 4.71967 8.46883C4.57902 8.60948 4.5 8.80025 4.5 8.99916C4.5 9.19807 4.57902 9.38884 4.71967 9.52949C4.86032 9.67014 5.05109 9.74916 5.25 9.74916H10.9425L8.4675 12.2166C8.3972 12.2863 8.34141 12.3693 8.30333 12.4607C8.26526 12.5521 8.24565 12.6501 8.24565 12.7491C8.24565 12.8481 8.26526 12.9462 8.30333 13.0375C8.34141 13.1289 8.3972 13.2119 8.4675 13.2816C8.53722 13.3519 8.62017 13.4077 8.71157 13.4458C8.80296 13.4839 8.90099 13.5035 9 13.5035C9.09901 13.5035 9.19704 13.4839 9.28843 13.4458C9.37983 13.4077 9.46278 13.3519 9.5325 13.2816L13.2825 9.53166C13.3508 9.46033 13.4043 9.37622 13.44 9.28416C13.515 9.10156 13.515 8.89675 13.44 8.71416Z'/%3E%3C/svg%3E");
}

.polimi-button-internal-fill:hover {
    background: var(--primary-blue-accent-dark);
    color: white;
    border: 1px solid var(--primary-blue-accent-dark);
}

.wp-block-buttons {
    margin-top: 24px;
    margin-bottom: 24px;
    gap: 16px;
}

/* Reset WP default button styles */
/* Scope to your variant + cover both link classes */
.wp-block-button.is-style-polimi-button-internal-outline :is(.wp-block-button__link, .wp-element-button),
.wp-block-button.is-style-polimi-button-internal-fill :is(.wp-block-button__link, .wp-element-button),
.wp-block-button.is-style-polimi-button-external-outline :is(.wp-block-button__link, .wp-element-button),
.wp-block-button.is-style-polimi-button-external-fill :is(.wp-block-button__link, .wp-element-button) {
    /* Optional reset to ditch core defaults */
    all: unset;
    display: inline-flex;
    cursor: pointer;

    /* Your base look */
    align-items: center;
    gap: 6px;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    font-weight: 700;
    padding: 10px 12px 10px 16px;
    border-radius: 200px;
    text-decoration: none;
}

.wp-block-button.is-style-polimi-button-internal-outline :is(.wp-block-button__link, .wp-element-button),
.wp-block-button.is-style-polimi-button-external-outline :is(.wp-block-button__link, .wp-element-button) {
    /* Outline */
    background: transparent;
    color: var(--primary-blue-accent);
    border: 1px solid var(--primary-blue-accent);
}

.wp-block-button.is-style-polimi-button-internal-fill :is(.wp-block-button__link, .wp-element-button),
.wp-block-button.is-style-polimi-button-external-fill :is(.wp-block-button__link, .wp-element-button) {
    /* Fill */
    background: var(--primary-blue-accent);
    color: white;
    border: 1px solid var(--primary-blue-accent);
}

.is-style-polimi-button-internal-outline .wp-block-button__link:hover,
.is-style-polimi-button-external-outline .wp-block-button__link:hover {
    background-color: var(--primary-blue-accent);
    color: white;
    border: 1px solid var(--primary-blue-accent);
}

.is-style-polimi-button-internal-fill .wp-block-button__link:hover,
.is-style-polimi-button-external-fill .wp-block-button__link:hover {
    background-color: var(--primary-blue-accent-dark);
    color: white;
    border: 1px solid var(--primary-blue-accent-dark);
}
/* add the arrow as an SVG background */
.wp-block-button.is-style-polimi-button-internal-outline .wp-block-button__link::after,
.wp-block-button.is-style-polimi-button-internal-fill .wp-block-button__link::after,
.wp-block-button.is-style-polimi-button-external-outline .wp-block-button__link::after,
.wp-block-button.is-style-polimi-button-external-fill .wp-block-button__link::after {
    content: "";
    display: block;
    position: relative;
    width: 21px;
    height: 21px;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-color: currentColor;
}

.wp-block-button.is-style-polimi-button-internal-outline .wp-block-button__link::after,
.wp-block-button.is-style-polimi-button-internal-fill .wp-block-button__link::after {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='white'%3E%3Cpath d='M13.44 8.71416C13.4043 8.62209 13.3508 8.53799 13.2825 8.46666L9.5325 4.71666C9.46257 4.64673 9.37955 4.59126 9.28819 4.55341C9.19682 4.51557 9.09889 4.49609 9 4.49609C8.80027 4.49609 8.60873 4.57543 8.4675 4.71666C8.39757 4.78659 8.3421 4.8696 8.30426 4.96097C8.26641 5.05234 8.24693 5.15026 8.24693 5.24916C8.24693 5.44888 8.32627 5.64043 8.4675 5.78166L10.9425 8.24916H5.25C5.05109 8.24916 4.86032 8.32818 4.71967 8.46883C4.57902 8.60948 4.5 8.80025 4.5 8.99916C4.5 9.19807 4.57902 9.38884 4.71967 9.52949C4.86032 9.67014 5.05109 9.74916 5.25 9.74916H10.9425L8.4675 12.2166C8.3972 12.2863 8.34141 12.3693 8.30333 12.4607C8.26526 12.5521 8.24565 12.6501 8.24565 12.7491C8.24565 12.8481 8.26526 12.9462 8.30333 13.0375C8.34141 13.1289 8.3972 13.2119 8.4675 13.2816C8.53722 13.3519 8.62017 13.4077 8.71157 13.4458C8.80296 13.4839 8.90099 13.5035 9 13.5035C9.09901 13.5035 9.19704 13.4839 9.28843 13.4458C9.37983 13.4077 9.46278 13.3519 9.5325 13.2816L13.2825 9.53166C13.3508 9.46033 13.4043 9.37622 13.44 9.28416C13.515 9.10156 13.515 8.89675 13.44 8.71416Z' fill='%23102C53'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='white'%3E%3Cpath d='M13.44 8.71416C13.4043 8.62209 13.3508 8.53799 13.2825 8.46666L9.5325 4.71666C9.46257 4.64673 9.37955 4.59126 9.28819 4.55341C9.19682 4.51557 9.09889 4.49609 9 4.49609C8.80027 4.49609 8.60873 4.57543 8.4675 4.71666C8.39757 4.78659 8.3421 4.8696 8.30426 4.96097C8.26641 5.05234 8.24693 5.15026 8.24693 5.24916C8.24693 5.44888 8.32627 5.64043 8.4675 5.78166L10.9425 8.24916H5.25C5.05109 8.24916 4.86032 8.32818 4.71967 8.46883C4.57902 8.60948 4.5 8.80025 4.5 8.99916C4.5 9.19807 4.57902 9.38884 4.71967 9.52949C4.86032 9.67014 5.05109 9.74916 5.25 9.74916H10.9425L8.4675 12.2166C8.3972 12.2863 8.34141 12.3693 8.30333 12.4607C8.26526 12.5521 8.24565 12.6501 8.24565 12.7491C8.24565 12.8481 8.26526 12.9462 8.30333 13.0375C8.34141 13.1289 8.3972 13.2119 8.4675 13.2816C8.53722 13.3519 8.62017 13.4077 8.71157 13.4458C8.80296 13.4839 8.90099 13.5035 9 13.5035C9.09901 13.5035 9.19704 13.4839 9.28843 13.4458C9.37983 13.4077 9.46278 13.3519 9.5325 13.2816L13.2825 9.53166C13.3508 9.46033 13.4043 9.37622 13.44 9.28416C13.515 9.10156 13.515 8.89675 13.44 8.71416Z' fill='%23102C53'/%3E%3C/svg%3E");
}

.wp-block-button.is-style-polimi-button-external-outline .wp-block-button__link::after,
.wp-block-button.is-style-polimi-button-external-fill .wp-block-button__link::after {
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><path fill='white' d='M11.9369 5.65776C11.8466 5.61791 11.7493 5.59628 11.6506 5.59413L6.3473 5.59412C6.24841 5.59412 6.15048 5.6136 6.05912 5.65145C5.96775 5.68929 5.88473 5.74476 5.8148 5.81469C5.67358 5.95592 5.59424 6.14747 5.59424 6.34719C5.59424 6.44609 5.61371 6.54401 5.65156 6.63538C5.6894 6.72675 5.74488 6.80976 5.8148 6.87969C5.95603 7.02092 6.14758 7.10026 6.3473 7.10026L9.84218 7.09496L5.81697 11.1202C5.67632 11.2608 5.5973 11.4516 5.5973 11.6505C5.5973 11.8494 5.67632 12.0402 5.81697 12.1808C5.95763 12.3215 6.14839 12.4005 6.3473 12.4005C6.54622 12.4005 6.73698 12.3215 6.87763 12.1808L10.9028 8.15562L10.8975 11.6505C10.8971 11.7495 10.9163 11.8476 10.954 11.9392C10.9917 12.0307 11.0471 12.1139 11.1171 12.1839C11.1872 12.2539 11.2703 12.3094 11.3619 12.3471C11.4534 12.3848 11.5515 12.404 11.6506 12.4036C11.7496 12.404 11.8477 12.3848 11.9392 12.3471C12.0308 12.3094 12.114 12.2539 12.184 12.1839C12.254 12.1139 12.3094 12.0307 12.3471 11.9392C12.3848 11.8476 12.404 11.7495 12.4036 11.6505V6.34719C12.4015 6.24848 12.3798 6.15115 12.34 6.06082C12.2639 5.87866 12.1191 5.73384 11.9369 5.65776Z'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><path fill='white' d='M11.9369 5.65776C11.8466 5.61791 11.7493 5.59628 11.6506 5.59413L6.3473 5.59412C6.24841 5.59412 6.15048 5.6136 6.05912 5.65145C5.96775 5.68929 5.88473 5.74476 5.8148 5.81469C5.67358 5.95592 5.59424 6.14747 5.59424 6.34719C5.59424 6.44609 5.61371 6.54401 5.65156 6.63538C5.6894 6.72675 5.74488 6.80976 5.8148 6.87969C5.95603 7.02092 6.14758 7.10026 6.3473 7.10026L9.84218 7.09496L5.81697 11.1202C5.67632 11.2608 5.5973 11.4516 5.5973 11.6505C5.5973 11.8494 5.67632 12.0402 5.81697 12.1808C5.95763 12.3215 6.14839 12.4005 6.3473 12.4005C6.54622 12.4005 6.73698 12.3215 6.87763 12.1808L10.9028 8.15562L10.8975 11.6505C10.8971 11.7495 10.9163 11.8476 10.954 11.9392C10.9917 12.0307 11.0471 12.1139 11.1171 12.1839C11.1872 12.2539 11.2703 12.3094 11.3619 12.3471C11.4534 12.3848 11.5515 12.404 11.6506 12.4036C11.7496 12.404 11.8477 12.3848 11.9392 12.3471C12.0308 12.3094 12.114 12.2539 12.184 12.1839C12.254 12.1139 12.3094 12.0307 12.3471 11.9392C12.3848 11.8476 12.404 11.7495 12.4036 11.6505V6.34719C12.4015 6.24848 12.3798 6.15115 12.34 6.06082C12.2639 5.87866 12.1191 5.73384 11.9369 5.65776Z'/></svg>");
}

/* --- Polimi Email Inline Button Style --- */

/* Use the simpler selector you suggested */
.is-style-polimi-button-email-inline .wp-block-button__link {
    /* --- 1. Reset Button Styles (Still required!) --- */
    background: none !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0;
    box-shadow: none;

}

.is-style-polimi-button-email-inline .wp-block-button__link,
a[href^="mailto:"],
.static-page--main-content > p a[href^="mailto:"] {
  /* --- 2. Apply Link Styles --- */
    display: inline-flex;
    align-items: center;
    font-size: inherit;
    line-height: inherit;
    color: var(--blue-main);
    text-decoration: none;
    font-weight: 700;
    gap: 6px;
}

a[href^="mailto:"],
.static-page--main-content > p a[href^="mailto:"] {
    font-size: 16px;
}

/* --- 3. Handle Hover State --- */
.is-style-polimi-button-email-inline .wp-block-button__link:hover,
a[href^="mailto:"]:hover,
.static-page--main-content > p a[href^="mailto:"]:hover {
    color: var(--primary-blue-accent-dark);
    background: none !important;
    text-decoration: underline;
    text-decoration-color: var(--primary-blue-accent);
}

/* --- 4. Add the Icon After the Link Text --- */
.is-style-polimi-button-email-inline .wp-block-button__link::after,
a[href^="mailto:"]:after,
.static-page--main-content > p a[href^="mailto:"]::after {
    content: "";
    display: inline-block;
    position: relative;
    width: 21px;
    height: 21px;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: var(--primary-blue-accent);
    mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M19 4H5C4.20435 4 3.44129 4.31607 2.87868 4.87868C2.31607 5.44129 2 6.20435 2 7V17C2 17.7956 2.31607 18.5587 2.87868 19.1213C3.44129 19.6839 4.20435 20 5 20H19C19.7956 20 20.5587 19.6839 21.1213 19.1213C21.6839 18.5587 22 17.7956 22 17V7C22 6.20435 21.6839 5.44129 21.1213 4.87868C20.5587 4.31607 19.7956 4 19 4V4ZM18.59 6L12.71 11.88C12.617 11.9737 12.5064 12.0481 12.3846 12.0989C12.2627 12.1497 12.132 12.1758 12 12.1758C11.868 12.1758 11.7373 12.1497 11.6154 12.0989C11.4936 12.0481 11.383 11.9737 11.29 11.88L5.41 6H18.59ZM20 17C20 17.2652 19.8946 17.5196 19.7071 17.7071C19.5196 17.8946 19.2652 18 19 18H5C4.73478 18 4.48043 17.8946 4.29289 17.7071C4.10536 17.5196 4 17.2652 4 17V7.41L9.88 13.29C10.4425 13.8518 11.205 14.1674 12 14.1674C12.795 14.1674 13.5575 13.8518 14.12 13.29L20 7.41V17Z' fill='currentColor'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M19 4H5C4.20435 4 3.44129 4.31607 2.87868 4.87868C2.31607 5.44129 2 6.20435 2 7V17C2 17.7956 2.31607 18.5587 2.87868 19.1213C3.44129 19.6839 4.20435 20 5 20H19C19.7956 20 20.5587 19.6839 21.1213 19.1213C21.6839 18.5587 22 17.7956 22 17V7C22 6.20435 21.6839 5.44129 21.1213 4.87868C20.5587 4.31607 19.7956 4 19 4V4ZM18.59 6L12.71 11.88C12.617 11.9737 12.5064 12.0481 12.3846 12.0989C12.2627 12.1497 12.132 12.1758 12 12.1758C11.868 12.1758 11.7373 12.1497 11.6154 12.0989C11.4936 12.0481 11.383 11.9737 11.29 11.88L5.41 6H18.59ZM20 17C20 17.2652 19.8946 17.5196 19.7071 17.7071C19.5196 17.8946 19.2652 18 19 18H5C4.73478 18 4.48043 17.8946 4.29289 17.7071C4.10536 17.5196 4 17.2652 4 17V7.41L9.88 13.29C10.4425 13.8518 11.205 14.1674 12 14.1674C12.795 14.1674 13.5575 13.8518 14.12 13.29L20 7.41V17Z' fill='currentColor'/></svg>");
}

/* ==========================================================================
   START: Responsive Styles (Mobile & Tablet)
   ========================================================================== */

/* --- Mobile Menu Toggle Button (Hamburger) --- */
.nav--menu-toggle {
    display: none; /* Hidden by default on desktop */
    z-index: 101; /* Ensure it's above the nav bar content */
    padding: 8px;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.nav--menu-toggle svg {
    width: 28px;
    height: 28px;
    color: var(--blue-main);
}

.nav--menu-toggle .icon--close {
    display: none; /* The 'X' icon is hidden initially */
}

/* When the menu is open, show the 'X' and hide the hamburger */
.site-header.is-open .nav--menu-toggle .icon--close {
    display: block;
}
.site-header.is-open .nav--menu-toggle .icon--menu {
    display: none;
}

/* Hide the mobile menu container on desktop */
.mobile-menu {
    display: none;
}


@media (max-width: 992px) {
    /* --- Your mobile and tablet styles go here --- */

    /* Hide a desktop-only element */
    .desktop-only-element {
        display: none;
    }
    
    /* --- START: Mobile Navigation Styles --- */
    .desktop-menu,
    .sub-menu-container {
        display: none; /* Hide the desktop menu */
    }

    /* Show the hamburger button */
    .nav--menu-toggle {
        display: block;
    }

    /* --- MOBILE MENU PANEL STYLING --- */
    .mobile-menu {
        display: flex; /* Show the mobile menu container */
        flex-flow: column;
        position: fixed;
        top: var(--nav-height); /* Start below the nav bar */
        left: 0;
        width: 100vw;
        height: calc(100vh - var(--nav-height)); /* Fill remaining screen height */
        background-color: #fff;
        padding: 0;
        overflow-y: auto;
        
        /* Animation: Hide it by default */
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    /* When the menu is open, make the panel visible */
    .site-header.is-open .mobile-menu {
        visibility: visible;
        opacity: 1;
    }
    
    .mobile-nav-links > .menu-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap; /* Allows sub-menu to wrap to a new line */
        width: 100%;
        padding-left: var(--padding-tablet);
        padding-right: var(--padding-tablet);
        border-bottom: 1px solid #5c6f82;
    }

    .mobile-nav-links {
        list-style-type: none;
        margin-block-start: 0px;
        margin-block-end: 0px;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        padding-inline-start: 0px;
        padding-inline-end: 0px;
    }

    .mobile-nav-links a {
        flex-grow: 1; /* NEW: Link takes up all available space */
        padding: 16px 0;
        /* border-bottom: none;  */
        text-decoration: none;
        font-weight: 500;
        display: flex;
        gap: 4px;
        align-items: center;
    }

    /* Arrow icon for ALL menu items */
    .mobile-nav-links > .menu-item > a::after {
        content: '';
        display: inline-block;
        width: 12px;
        height: 12px;
        background-image: url("data:image/svg+xml,%3csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8.64795 6.39795L4.89795 10.1479C4.79228 10.2536 4.64895 10.313 4.49951 10.313C4.35007 10.313 4.20675 10.2536 4.10107 10.1479C3.9954 10.0423 3.93604 9.89895 3.93604 9.74951C3.93604 9.60007 3.9954 9.45674 4.10107 9.35107L7.4531 5.99998L4.10201 2.64795C4.04969 2.59562 4.00818 2.53351 3.97986 2.46514C3.95155 2.39678 3.93697 2.32351 3.93697 2.24951C3.93697 2.17551 3.95155 2.10224 3.97986 2.03388C4.00818 1.96551 4.04969 1.9034 4.10201 1.85107C4.15433 1.79875 4.21645 1.75724 4.28482 1.72893C4.35318 1.70061 4.42645 1.68604 4.50045 1.68604C4.57445 1.68604 4.64772 1.70061 4.71608 1.72893C4.78445 1.75724 4.84656 1.79875 4.89889 1.85107L8.64889 5.60107C8.70126 5.65339 8.7428 5.71554 8.77111 5.78394C8.79942 5.85235 8.81395 5.92567 8.81386 5.99971C8.81377 6.07374 8.79907 6.14703 8.7706 6.21536C8.74213 6.2837 8.70045 6.34575 8.64795 6.39795Z' fill='%232942DB'/%3e%3c/svg%3e");
        background-size: contain;
        background-repeat: no-repeat;
        margin-bottom: -1px; /* Slight adjustment to align with text */

    }

    /* --- ACCORDION BUTTON (+/- icon) --- */
    .accordion-toggle {
        /* Reset button styles */
        background: none;
        border: none;
        padding: 15px; /* Make it easy to tap */
        cursor: pointer;
        position: relative;
        width: 44px; /* Fixed width */
        height: 44px;
    }

    /* Create the + icon using pseudo-elements */
    .accordion-toggle::before,
    .accordion-toggle::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 16px;
        height: 2px;
        background-color: var(--blue-main);
        border-radius: 1px;
        transition: transform 0.25s ease-in-out;
    }
    .accordion-toggle::before {
        transform: translate(-50%, -50%) rotate(90deg);
    }
    .accordion-toggle::after {
        transform: translate(-50%, -50%);
    }

    /* Transform + to - when expanded */
    .menu-item.is-expanded .accordion-toggle::before {
        transform: translate(-50%, -50%) rotate(180deg);
    }
    .menu-item.is-expanded .accordion-toggle::after {
        transform: translate(-50%, -50%) rotate(180deg);
    }

    .mobile-nav-links .sub-menu {
        list-style: none;
        padding-inline-start: 0px;
        padding-left: 16px; /* Indent sub-items */
        width: 100%;
        
        /* Accordion animation */
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out;
    }
    .mobile-nav-links .menu-item.is-expanded > .sub-menu {
        max-height: 500px; /* Animate to a large enough value */
    }
    .mobile-nav-links .sub-menu a {
        font-size: 14px;
        font-weight: 700;
        padding: 16px 0;
    }

    .link--servizi-online {
        padding-top: 20px;
        padding-bottom: 20px;
        align-items: center;
    }

    /* --- END: Mobile Navigation Styles --- */

    .branding-bar--container,
    .nav--container {
        padding-right: var(--padding-tablet);
        padding-left: var(--padding-tablet);
    }

    .home--title-section--header,
    .is-homepage .section-header,
    .is-homepage .section--container,
    .spotlight--cards-wrapper,
    .full-width-banner--container,
    .footer--inner-row-1, .footer--inner-row-2, .footer--inner-row-3,
    .static-page--title-section--header,
    .static-page--container,
    .page-title--no-image--wrapper,
    .news-archive--container,
    .people-archive--grid,
    .news-post--title-section--wrapper,
    .news-post--container,
    .projects-archive--grid,
    .projects-post--title-section--wrapper,
    .projects-post--container {
        padding-right: var(--padding-tablet);
        padding-left: var(--padding-tablet);
        margin-left: 0px;
        margin-right: 0px;
        max-width: 100%;
        width: 100%;
    }

    .is-homepage .home-section {
        padding-top: 40px;
    }

    .home--hero-section--wrapper {
        grid-template-columns: 1fr;
        row-gap: 16px;
    }

    .cards-wrapper-2x1-grid {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
        grid-auto-rows: 280px;
    }

    .cards-wrapper-2x1-grid:has(> :nth-last-child(4)) {
        grid-template-columns: 1fr; /* 1 column */
        grid-auto-flow: row;
    }


    .home-news--grid {
        display: flex;
        flex-flow: column;
        gap: 16px;
        height: unset;
    }

    .home--title-section--supertitle {
        font-size: 21px;
    }

    .static-page--title-section--title,
    .page-title--no-image--title,
    .home--title-section--title {
        font-size: 38px;
    }

    .section-supertitle,
    .course-semester-title {
        font-size: 14px;
    }

    .section-title--CTA {
        font-size: 14px;
    }

    .section-title,
    .home--hero-section--title,
    .spotlight-card-title,
    .card-title,
    .full-width-banner--title {
        font-size: 24px;
    }

    .section-title--wrapper {
        flex-flow: column;
        gap: 8px;
    }

    .full-width-banner--title br {
        display: none;
    }

    .home--hero-section--description p {
        font-size: 18px;
    }

    .static-page--main-content > p,
    .people-block--description,
    .news-post--content p {
        font-size: 16px;
    }

    /* Unset grid spans and grid areas */
    .home--hero-section--title,
    .home--hero-section--description,
    .home--hero-section--link,
    .home--hero-section--image,
    .spotlight--main-card,
    .spotlight--secondary-card,
    .spotlight--tertiary-card,
    .news--card {
        grid-column: unset;
        grid-row: unset;
        grid-area: unset;
    }

    /* Spotlight layout */
    .spotlight--cards-wrapper {
        display: flex;
        flex-flow: column;
        gap: 16px;
        height: unset;
    }

    .spotlight--main-card {
        height: 300px;
    }

    .spotlight--secondary-card {
        display: flex;
        flex-flow: column;
    }

    .spotlight--secondary-card--right-half {
        order: -1;
    }

    .spotlight--secondary-card--left-half {
        gap: 16px;
    }

    .card-link {
        height: 100%;
        justify-content: space-between;
        gap: 16px;
    }

    .spotlight--tertiary-card--footer {
        flex-flow: column;
        align-items: flex-start;
        gap: 16px;
    }

    .spotlight--tertiary-card--stats-wrapper {
        gap: 32px;
    }

    .spotlight--tertiary-card--stat--value {
        font-size: 32px;
    }

    .news--card {
        display: flex;
        flex-flow: column;
        gap: 0px;
    }

    .cards-wrapper-3x1-sq-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 1fr;
    }

    .footer--inner-row-2,
    .footer--inner-row-3 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .footer--row-2--clmn-1 {
        order: 3;
    }

    .footer--row-2--clmn-2 {
        order: 1;
    }

    .footer--row-2--clmn-3 {
        order: 2;
    }

    .stats-section--wrapper {
        display: flex;
        flex-flow: column;
        gap: 16px;
        margin-top: 0px;
    }

    .stats-section--stat {
        gap: 8px;
    }
    
    .stats-section--stat--value {
        font-size: 28px;
    }

    .stats-section--stat.is-large .stats-section--stat--value {
        font-size: 38px;
    }


    .static-page--simple-title-section {
        padding-top: calc(67px + 32px);
        padding-bottom: 40px;
    }

    .static-page--container {
        display: flex;
        flex-flow: column;
        gap: 16px;
    }

    .static-page--main-content {
        width: 100%;
    }

    .static-page--shoulder {
        position: static;
    }

    /* Subjects */
    .course-year-filters {
        margin-left: calc(-1 * var(--padding-tablet));
        margin-right: calc(-1 * var(--padding-tablet));
        padding-left: var(--padding-tablet);
        padding-right: var(--padding-tablet);
        gap: 8px;
    }

    .subject-list li {
        flex-flow: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .subject-header {
        flex-flow: column;
        align-items: flex-start;
        gap: 4px;
    }

    .subject-options-list li {
        gap: 4px;
    }

    .subject-cfu {
        order: -1;
    }

    /* News Archive */
    .news--preview {
        display: flex;
        flex-flow: column;
        gap: 0px;
        height: auto;
    }

    .news--preview--meta {
        gap: 4px;
    }

    /* Single-News */
    .news-post--title-section--wrapper {
        grid-template-columns: 1fr;
        row-gap: 16px;
        margin-top: 16px;
        margin-bottom: 0px;
    }

    .news-post--title-section--backlink {
        grid-column: span 1;
    }

    .news-post--title-section--header h1,
    .projects-post--title-section--wrapper h1 {
        font-size: 28px;
        line-height: 34px;
    }

    .news-post--title-section--tag {
        font-size: 13px;
        line-height: 16px;
    }

    .news-post--container {
        display: flex;
        flex-flow: column;
    }

    /* Projects Archive */
    .projects-archive--grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 1fr;
        gap: 16px;
    }


    /* Single-Projects */
    .projects-post--title-section--wrapper {
        margin-bottom: 0px;
    }

    .projects-post--featured-image {
        object-fit: cover;
        height: unset;
        aspect-ratio: 4 / 3;
    }

    .projects-post--container {
        display: flex;
        flex-flow: column;
        margin-top: 24px;
        margin-bottom: 40px;
    }

    .projects-post--content {
        order: -1;
        font-size: 18px;
    }

}

@media (max-width: 576px) {
    .branding-bar--container,
    .nav--container,
    .mobile-nav-links > .menu-item {
        padding-right: var(--padding-mobile);
        padding-left: var(--padding-mobile);
    }

    .home--title-section--header,
    .is-homepage .section-header,
    .is-homepage .section--container,
    .spotlight--cards-wrapper,
    .full-width-banner--container,
    .footer--inner-row-1, .footer--inner-row-2, .footer--inner-row-3,
    .static-page--title-section--header,
    .static-page--container,
    .page-title--no-image--wrapper,
    .news-archive--container,
    .people-archive--grid,
    .news-post--title-section--wrapper,
    .news-post--container,
    .projects-archive--grid,
    .projects-post--title-section--wrapper,
    .projects-post--container {
        padding-right: var(--padding-mobile);
        padding-left: var(--padding-mobile);
    }
}