/*
Theme Name: Polimi CdS Theme
Theme Domain: polimi-cds-theme
Theme URI: https://github.com/giovannimalausa/polimi-cds-theme/
Author: Giovanni Malausa
Author URI: https://giovannimalausa.com
Description: Custom WordPress theme for Politecnico di Milano Courses of Study websites, bundling branded Gutenberg patterns, CPT-driven news/projects workflows, and school-aware styling controls.
Requires at least: 6.4
Tested up to: 7.0.3
Requires PHP: 7.4
Version: 1.8.0
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, education, custom-menu, featured-images
*/

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&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-blue: #7290A6;
    --grey-disabled: #5C6F82;
    --grey-news: #5C6F82;
    --missing-asset-orange: #F26A21;

    /* ======== FONT ======== */
    font-family: Manrope;
    --serif-font: 'Libre Caslon Text', serif;

    /* ======== 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;
}

/* Provide an explicit fallback for editorial and dynamically generated H3s.
   Component-specific heading treatments remain free to override this scale. */
h3 {
    font-size: 24px;
    font-weight: 700;
    line-height: 120%;
    letter-spacing: -0.01em;
}

p + h3 {
    margin-top: 24px;
}

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,
nav.submenu-active {
    background-color: var(--primary-accent-solid);
}

/* PAGE BREADCRUMBS */
.polimi-breadcrumbs-bar {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 32px;
    background-color: transparent;
}

.polimi-breadcrumbs-bar.has-hero-background {
    background-color: rgb(255 255 255 / 75%);
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
}

.polimi-breadcrumbs {
    width: 100%;
    max-width: var(--max-width-desktop);
    height: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--padding-desktop);
    padding-left: var(--padding-desktop);
}

.polimi-breadcrumbs__list {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: var(--blue-main);
    font-family: Manrope, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 90%;
    letter-spacing: 0;
    list-style: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.polimi-breadcrumbs__item {
    min-width: 0;
}

.polimi-breadcrumbs__item:not(.is-current) {
    flex: 0 0 auto;
}

.polimi-breadcrumbs__item a {
    color: inherit;
    text-decoration: none;
}

.polimi-breadcrumbs__item a:hover,
.polimi-breadcrumbs__item a:focus-visible {
    color: var(--primary-blue-accent);
    text-decoration: underline;
}

.polimi-breadcrumbs__item.is-current {
    flex: 1 1 auto;
    overflow: hidden;
    opacity: 0.5;
    text-overflow: ellipsis;
}

.polimi-breadcrumbs__item.is-current span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.polimi-breadcrumbs__separator {
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
}

.polimi-breadcrumbs__separator svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* 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;
}

.nav--nav-links > .menu-item {
    display: flex;
    align-items: stretch;
    flex: 0 1 auto; /* Prevents stretching */
}

/* ==========================================================================
   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 */
    height: var(--nav-height);
    overflow: visible;
    pointer-events: none; /* Prevents interaction when hidden */
}

/* The actual <ul> sub-menu bar */
.sub-menu-container .sub-menu {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    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;
}

.nav--nav-links > .menu-item-has-children > a {
    padding-right: 0;
}

.desktop-menu .desktop-submenu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 22px 16px 20px 8px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--blue-main);
    cursor: pointer;
    transition: padding 0.2s ease-in-out, border-color 0.2s ease-in-out;
    font: inherit;
    appearance: none;
    -webkit-appearance: none;
}

.desktop-menu .desktop-submenu-toggle:hover,
.desktop-menu .desktop-submenu-toggle:focus-visible,
.desktop-menu .menu-item-has-children.submenu-open > .desktop-submenu-toggle {
    padding-top: 20px;
    padding-bottom: 24px;
    border-bottom-color: var(--blue-main);
}

.desktop-menu .desktop-submenu-toggle:focus-visible {
    outline: 2px solid var(--blue-main);
    outline-offset: 2px;
}

.desktop-menu .desktop-submenu-toggle svg {
    width: 18px;
    height: 18px;
    transition: transform 0.25s ease-in-out;
}

.desktop-menu .menu-item-has-children.submenu-open > .desktop-submenu-toggle svg {
    transform: rotate(180deg);
}

.desktop-menu .menu-item-has-children.submenu-open > a {
    padding-top: 20px;
    padding-bottom: 24px;
    border-bottom-color: var(--blue-main);
}

/* ======== 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;
    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 */
    object-fit: cover;
    object-position: center;
    max-height: 100%;
}

.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,
.testimonial-single--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,
.testimonial-single--backlink:hover {
    color: var(--primary-blue-accent);
    text-decoration: underline;
}

.static-page--title-section--backlink::before,
.testimonial-single--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);
    /* Preserve space for glyphs that extend below the final line box. */
    padding-bottom: 0.08em;
}

.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;
}

/* Single Testimonial (selectors only) */
.testimonial-single--hero {
    display: flex;
    flex-flow: column;
    justify-content: flex-end;
    height: 70svh;
    max-height: 80svh;
    width: 100%;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.testimonial-single--hero-content {
    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;
    margin-bottom: 56px;
}

.testimonial-single--hero-inner {
    color: white;
}

.testimonial-single--backlink {
    color: white;
}

.testimonial-single--backlink:hover {
    color: white;
}

.testimonial-single--title {
    font-size: 56px;
    font-weight: 700;
    line-height: 120%;
    letter-spacing: -1px;
}

.testimonial-single--role {
    margin-top: 8px;
    font-size: 18px;
    font-weight: 500;
    line-height: 120%;
}

.testimonial-single--container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 16px;
    margin-top: 48px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--padding-desktop);
    padding-right: var(--padding-desktop);
    width: 100%;
    max-width: var(--max-width-desktop);
}

.testimonial-single--sidebar {
    grid-column: span 3;
    display: flex;
    flex-flow: column;
    gap: 16px;
}

.testimonial-single--content {
    grid-column: span 7;
}

.testimonial-single--intro {
    font-family: var(--serif-font);
    font-size: 20px;
    font-weight: 400;
    line-height: 125%;
}
.testimonial-single--body {
    margin-top: 24px;
}

/* 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-eyebrow,
.section-supertitle,
.course-semester-eyebrow,
.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);
}

/* Optional supporting paragraph below the section title. Colour is inherited
   from body, matching .people-block--description. */
.section-description {
    margin-top: 16px;
    font-size: 20px;
    font-weight: 500;
    line-height: 140%;
}

.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;
}

/* Hero and Card Grid use the shared homepage section structure. When either is
   rendered in a full-width page-layout slot, give it the same bounded content
   area without requiring the homepage body class. */
.polimi-page-slot > .home-section > .section-header,
.polimi-page-slot > .home-section > .section--container {
    width: 100%;
    max-width: var(--max-width-desktop);
    padding-right: var(--padding-desktop);
    padding-left: var(--padding-desktop);
    margin-right: auto;
    margin-left: auto;
}

.polimi-page-slot > .home-section > .section-header {
    margin-bottom: 24px;
}

/* 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: 12px;
}

.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,
.static-page--main-content > ul a,
.static-page--main-content > ol a,
.warning-msg--block a {
    color: var(--primary-blue-accent);
    text-decoration: underline;
}

/* Editorial lists in page content. Previously unstyled (browser defaults, 16px),
   so they clashed with the 20px / 140% paragraph scale. Match paragraphs and
   give consistent markers and spacing. */
.static-page--main-content > ul,
.static-page--main-content > ol,
.landing-page--main-content > ul,
.landing-page--main-content > ol {
    margin-block: 0; /* spacing is owned by the text-flow rule below */
    padding-left: 1.5em;
    color: var(--blue-main);
    font-size: 20px; /* direct-child only — never reaches into component blocks */
    font-weight: 500;
    line-height: 140%;
}

/* Editorial text (paragraphs, lists) self-spaces 24px from whatever precedes it,
   including component blocks like the card grid that carry no bottom margin of
   their own. Headings already supply a bottom margin, so text immediately after
   one is reset to avoid doubling the gap. */
.static-page--main-content > * + :where(p, ul, ol, .wp-block-table),
.landing-page--main-content > * + :where(p, ul, ol, .wp-block-table) {
    margin-top: 24px;
}

.static-page--main-content > h2 + :is(p, ul, ol, .wp-block-table),
.landing-page--main-content > h2 + :is(p, ul, ol, .wp-block-table) {
    margin-top: 0;
    margin-block-start: 0;
}

/* Keep supporting copy visually attached to its heading. Set both physical and
   logical margins so WordPress's generated flow styles cannot restore 24px. */
.static-page--main-content > :is(h3, h4, h5, h6) + p,
.landing-page--main-content > :is(h3, h4, h5, h6) + p {
    margin-top: 12px;
    margin-block-start: 12px;
}

.static-page--main-content > :is(p, ul, ol) + :is(h3, h4, h5, h6),
.landing-page--main-content > :is(p, ul, ol) + :is(h3, h4, h5, h6) {
    margin-top: 24px;
    margin-block-start: 24px;
}

/* Person-profile quotations use a restrained editorial treatment rather than
   the browser/Core quote decoration. */
.person-profile--section .wp-block-quote {
    border-left-style: none;
    max-width: 60ch;
    margin-top: 0;
    margin-bottom: 24px;
    padding: 0;
    font-family: "Libre Caslon Text", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 140%;
}

.person-profile--section .wp-block-quote p {
    margin: 0;
    font: inherit;
}

/* A quote is editorial content, not a component: retain its own 24px bottom
   rhythm instead of adding the generic 48px component gap to the next item. */
.person-profile--section .wp-block-quote + * {
    margin-top: 0;
    margin-block-start: 0;
}

/* Static pages use a wider rhythm around component/media blocks. Keep the
   tighter editorial flow above whenever both neighbours are text elements. */
.static-page--main-content > * + :not(:is(h1, h2, h3, h4, h5, h6, p, ul, ol)),
.static-page--main-content > :not(:is(h1, h2, h3, h4, h5, h6, p, ul, ol)) + * {
    margin-top: 48px;
}

.static-page--main-content > ul,
.landing-page--main-content > ul {
    list-style: disc outside;
}

.static-page--main-content > ol,
.landing-page--main-content > ol {
    list-style: decimal outside;
}

.static-page--main-content > ul li,
.static-page--main-content > ol li,
.landing-page--main-content > ul li,
.landing-page--main-content > ol li {
    margin-block: 8px;
}

/* Nested lists sit tighter. Written with plain type selectors (no `:is()` after
   a descendant space) because the CSS minifier strips that space and turns the
   selector into one that matches the outer list itself. Font size is left to
   inherit naturally — no explicit declaration, so nothing can override the 20px
   above. */
.static-page--main-content > ul ul,
.static-page--main-content > ul ol,
.static-page--main-content > ol ul,
.static-page--main-content > ol ol,
.landing-page--main-content > ul ul,
.landing-page--main-content > ul ol,
.landing-page--main-content > ol ul,
.landing-page--main-content > ol ol {
    margin-block: 8px;
}

/* TABLE BLOCK (core/table) */
/* Two design-system block styles: "Header row" (default; the thead is the
   heading) and "Header column" (is-style-polimi-table-header-column; the first
   column is the heading). Base styling below applies to every table; Manrope is
   inherited from :root. */
.wp-block-table {
    width: 100%;
    overflow-x: auto; /* wide tables scroll instead of overflowing the layout */
}

.wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    color: var(--blue-main);
}

.wp-block-table th,
.wp-block-table td {
    padding: 16px;
    vertical-align: middle;
    text-align: left;
    border: 0;
    border-bottom: 0.5px solid var(--grey-disabled); /* secondary border #5C6F82 */
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0;
}

/* Header row — the thead created by the block's "Header section" toggle. */
.wp-block-table thead th,
.wp-block-table thead td {
    font-weight: 700;
    letter-spacing: -0.02em;
    border-bottom: 2px solid var(--grey-blue); /* #7290A6 */
}

/* Header column — first column is the heading, no header row. It shrinks to its
   content (no wrap) so the other columns take the remaining width. It has its own
   padding (16px top/bottom, 0 left, 32px right); every other column keeps the
   base 16px on all sides — the 16px gap to the next column is that column's own
   left padding. */
.wp-block-table.is-style-polimi-table-header-column tr > :first-child {
    font-weight: 700;
    letter-spacing: -0.02em;
    border-bottom: 0;
    width: 1%;
    white-space: nowrap;
    padding: 16px 32px 16px 0;
}

/* LANDING PAGE TEMPLATE */
.landing-page--section {
    margin-bottom: 80px;
}

.landing-page--container {
    max-width: var(--max-width-desktop);
    padding-right: var(--padding-desktop);
    padding-left: var(--padding-desktop);
    margin-left: auto;
    margin-right: auto;
}

.landing-page--main-content {
    display: flex;
    flex-flow: column;
    gap: 0;
    width: 100%;
}

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

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

.landing-page--main-content > p {
    max-width: 840px;
    font-size: 20px;
    font-weight: 500;
    line-height: 140%;
}

.landing-page--main-content > p a,
.landing-page--main-content > ul a,
.landing-page--main-content > ol a {
    color: var(--primary-blue-accent);
    text-decoration: underline;
}

.landing-page--main-content > .full-width-banner {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* POLIMI TWO COLUMNS */
.polimi-two-columns {
    width: 100%;
    margin-top: 80px;
}

.polimi-two-columns__container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px;
    align-items: start;
}

.polimi-two-columns__column {
    min-width: 0;
}

.polimi-two-columns--media-left .polimi-two-columns__column--right {
    order: -1;
}

.polimi-two-columns__column--left {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.polimi-two-columns__column--left > .polimi-documents-links {
    align-self: stretch;
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    margin-left: 0;
}

.polimi-two-columns__column--left p {
    font-size: 21px;
    line-height: 140%;
}

.polimi-two-columns__column--right {
    position: sticky;
    top: calc(var(--nav-height) + 24px);
    align-self: start;
}

.polimi-two-columns__column--right .wp-block-image {
    margin: 0;
}

.polimi-two-columns__column--right img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-8px);
}

/* 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-2x1-grid--two-columns,
:where(.slot-main, .static-page--main-content) .cards-wrapper-2x1-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: unset;
}

.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;
}

.polimi-projects-display--slider > .section-header,
.polimi-projects-display--slider > .section--container {
    width: 100%;
    max-width: var(--max-width-desktop);
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--padding-desktop);
    padding-left: var(--padding-desktop);
}

.polimi-projects-display--slider > .section-header {
    margin-bottom: 24px;
}

.slot-main .polimi-projects-display--slider > .section-header,
.slot-main .polimi-projects-display--slider > .section--container,
.static-page--main-content .polimi-projects-display--slider > .section-header,
.static-page--main-content .polimi-projects-display--slider > .section--container {
    max-width: none;
    padding-right: 0;
    padding-left: 0;
}

.polimi-projects-slider {
    width: 100%;
}

.polimi-projects-slider__viewport {
    overflow: hidden;
    border-radius: var(--radius-8px);
    touch-action: pan-y;
}

.polimi-projects-slider__track {
    display: flex;
}

.polimi-projects-slider__slide {
    flex: 0 0 100%;
    min-width: 0;
    height: clamp(320px, 42vw, 560px);
}

.slot-main .polimi-projects-slider__slide,
.static-page--main-content .polimi-projects-slider__slide {
    height: clamp(300px, 34vw, 460px);
}

.polimi-projects-slider__slide .project--card {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    /* The viewport provides the rounded corners; keep card edges square so they
       are clipped cleanly by its overflow. */
    border-radius: 0;
}

.polimi-projects-slider.is-transitioning .polimi-projects-slider__track {
    pointer-events: none;
}

.polimi-projects-slider.is-transitioning .card .accent {
    opacity: 0;
}

.polimi-projects-slider.is-transitioning .card .card-cta {
    grid-column-gap: 0;
    padding-left: 10px;
}

.polimi-projects-slider.is-transitioning .card .card-cta-txt {
    max-width: 0;
}

.polimi-projects-slider__footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    margin-top: 20px;
}

.polimi-projects-slider__progress-group {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.polimi-projects-slider__progress {
    flex: 0 0 60px;
    width: 60px;
    height: 2px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(41, 66, 219, 0.3);
    background: color-mix(in srgb, var(--primary-blue-accent) 30%, transparent);
}

.polimi-projects-slider__progress-value {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--primary-blue-accent);
    transition: width 0.4s ease-in-out;
}

.polimi-projects-slider__controls {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
    order: -1;
}

.polimi-projects-slider__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--primary-blue-accent);
    border-radius: var(--radius-8px);
    background: transparent;
    color: var(--primary-blue-accent);
    cursor: pointer;
    /* Prevent double-tap-to-zoom when tapping the controls repeatedly on touch. */
    touch-action: manipulation;
    transition:
        border-color 0.2s ease-in-out,
        background-color 0.2s ease-in-out;
}

.polimi-projects-slider__button:hover,
.polimi-projects-slider__button:focus-visible {
    border-color: var(--primary-blue-accent-dark);
    background: transparent;
    color: var(--primary-blue-accent-dark);
}

.polimi-projects-slider__button:focus-visible {
    outline: 2px solid var(--primary-blue-accent);
    outline-offset: 2px;
}

.polimi-projects-slider__button:disabled {
    border-color: rgba(41, 66, 219, 0.3);
    border-color: color-mix(in srgb, var(--primary-blue-accent) 30%, transparent);
    background: transparent;
    color: var(--primary-blue-accent);
    cursor: not-allowed;
}

.polimi-projects-slider__button svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.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%;
}

.project--card.is-missing-featured-image,
.polimi-image-card.is-missing-card-image {
    background-color: var(--missing-asset-orange);
}

.project--card.is-missing-featured-image .card-overlay.accent,
.polimi-image-card.is-missing-card-image .card-overlay.accent {
    display: none;
}

.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);
}

.spotlight--main-card .card-upper-title,
.spotlight--main-card .spotlight-card-title {
    color: white;
}

.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;
}

/* ===================== Large Card block ===================== */
/* Reuses the .card base (position, overflow, radius, hover .accent + .card-cta
   animation). Full width of its slot, with three styles. */
.polimi-large-card {
    width: 100%;
    height: auto;
    margin-block: 40px;
}

/* Avoid doubled spacing between two stacked Large Cards (covers containers that
   don't collapse margins, e.g. flex/grid slots). */
.polimi-large-card + .polimi-large-card {
    margin-top: 0;
}

.polimi-large-card--plain,
.polimi-large-card--split {
    color: var(--blue-main);
    background-color: var(--grey-100);
}

.polimi-large-card--bg {
    color: white;
    background-color: var(--blue-main);
}

.polimi-large-card__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.polimi-large-card__scrim {
    position: absolute;
    inset: 0;
    background: #00000099;
}

.polimi-large-card__link {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    min-height: 420px;
    padding: 24px;
    position: relative;
    text-decoration: none;
    color: inherit;
}

.polimi-large-card__body {
    display: flex;
    flex-flow: column;
    gap: 16px;
    max-width: 720px;
}

.polimi-large-card__eyebrow {
    font-size: 12px;
    font-weight: 700;
    line-height: 90%;
}

/* Eyebrow is accent on the solid/split styles; stays white over a bg image. */
.polimi-large-card--plain .polimi-large-card__eyebrow,
.polimi-large-card--split .polimi-large-card__eyebrow {
    color: var(--primary-blue-accent);
}

.polimi-large-card__heading {
    font-size: 32px;
    font-weight: 700;
    line-height: 110%;
    letter-spacing: -1%;
}

.polimi-large-card__text {
    max-width: 46ch;
    font-size: 18px;
    font-weight: 500;
    line-height: 160%;
}

/* Solid styles use the accent CTA pill (like .card.is-text). */
.polimi-large-card--plain .card-cta,
.polimi-large-card--split .card-cta {
    background-color: var(--primary-blue-accent);
    color: white;
}

/* Split layout: text half + media half; the accent hover overlay lives only in
   the media column (see markup). */
.polimi-large-card__link--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(420px, auto);
    align-items: stretch;
    gap: 0;
    padding: 0;
}

.polimi-large-card__col {
    position: relative;
    min-width: 0;
}

.polimi-large-card__col--text {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    padding: 24px;
}

.polimi-large-card__col--media {
    overflow: hidden;
}

@media (max-width: 768px) {
    .polimi-large-card {
        margin-block: 28px;
    }

    .polimi-large-card__link,
    .polimi-large-card__col--text {
        gap: 24px;
        padding: 20px;
    }

    .polimi-large-card__link {
        min-height: 320px;
    }

    .polimi-large-card__link--split {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }

    .polimi-large-card__col--media {
        min-height: 240px;
    }
}

.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%;
    text-wrap: balance;
}

.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;
}

/* LINK CARD block (child of Card Grid) */
/* Reuses the .card base (radius, overflow, hover .accent + .card-cta pill).
   Compact: title + CTA only, fixed 158px tall, in three variants. */
.polimi-link-card {
    height: 158px;
}

/* When a Card Grid holds only Link Cards, render.php adds these classes so the
   grid drops the tall 400px rows and lays the cards out in equal columns — one
   per card, up to four per row. Compound selectors keep specificity above the
   base grid's own column rules. */
.cards-wrapper-2x1-grid.cards-wrapper--link-cards {
    grid-auto-flow: row;
    grid-auto-columns: unset;
    grid-auto-rows: auto;
}

.cards-wrapper-2x1-grid.cards-wrapper--link-cards-1 {
    grid-template-columns: minmax(0, 1fr);
}

.cards-wrapper-2x1-grid.cards-wrapper--link-cards-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cards-wrapper-2x1-grid.cards-wrapper--link-cards-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cards-wrapper-2x1-grid.cards-wrapper--link-cards-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* In the narrow static-page column — the 3-slot Main slot and regular page
   content both render there — cap Link Card grids at three columns. Full-width
   contexts (homepage, landing, top/bottom slots) keep four. :where() adds no
   specificity, so the responsive caps below still win by source order. */
:where(.static-page--main-content) .cards-wrapper-2x1-grid.cards-wrapper--link-cards-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.polimi-link-card--light {
    color: var(--blue-main);
    background-color: var(--grey-100);
}

.polimi-link-card--dark {
    color: #fff;
    background-color: var(--blue-main);
}

.polimi-link-card--image {
    color: #fff;
    background-color: var(--blue-main);
}

.polimi-link-card__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Always-on dark overlay on the image variant, matching the Large Card scrim. */
.polimi-link-card__scrim {
    position: absolute;
    inset: 0;
    background: #00000099;
}

.polimi-link-card__link {
    gap: 16px;
    min-height: 0;
    color: inherit;
}

.polimi-link-card__title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 110%;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

/* STAT SECTION */
.stats-section--wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 80px;
}

.stats-section--group {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px 16px;
}

.stats-section--group.has-1-columns {
    grid-template-columns: minmax(0, 1fr);
}

.stats-section--group.has-2-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stats-section--group.has-3-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stats-section--group.has-4-columns {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Statistic */
.stats-section--stat {
    min-width: 0;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    gap: 16px;
}

.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%;
    line-height: 0;
    vertical-align: baseline;
}

.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;
    margin-top: 4px;
}

.toc-list > li + li {
    margin-top: 4px;
}

.toc-list a {
    text-decoration: none;
    transition: color 180ms ease;
}

.toc-list a:hover,
.toc-list a:focus-visible {
    color: var(--primary-blue-accent);
    text-decoration: underline;
}

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

.quick-links-container .static-page--shoulder--title {
    margin-bottom: 2px;
}

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

.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(--primary-blue-accent);
    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;
}

/* Same intent for the 3-slot layout: when the Bottom slot ends with a
   full-width banner, the banner sits flush against the footer. */
.polimi-page-slot--bottom:has(> .full-width-banner:last-child) + .footer {
    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;
    gap: 32px;
}

.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: 18px;
    height: 18px;
    background: url("Assets/Arrows/arrow--internal--light-blue.svg") no-repeat center;
    background-size: contain;
    vertical-align: middle;
}

.footer--nav-links--external .menu-item::after {
    width: 18px;
    height: 18px;
    background: url("Assets/Arrows/arrow--external--light-blue.svg") no-repeat center;
    background-size: contain;
    margin-left: 2px;
}

.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;
    min-width: 0;
    min-height: 0;
    padding: 24px;
}

.news--preview--meta {
    display: flex;
    flex-flow: column;
    gap: 16px;
    min-height: 0;
    overflow: hidden;
    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;
    flex: 0 0 auto;
    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;
}

/* Testimonials Archive Styles */
.testimonials-archive--grid {
    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;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 16px;
    row-gap: 52px;
}

.testimonial-card {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 16px;
    overflow: hidden;
    grid-column: span 12;
    align-items: center;
}

.testimonial-card--media {
    grid-column: span 3;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 200px;
    aspect-ratio: 1 / 1;
}

.testimonial-card--media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    filter: grayscale(1);
    display: block;
}

.testimonial-card--body {
    grid-column: span 7;
    display: flex;
    flex-flow: column;
    gap: 0px;
}

.testimonial-card--title {
    font-size: 28px;
    line-height: 34px;
    font-weight: 700;
}

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

.testimonial-card--role {
    font-size: 18px;
    font-weight: 700;
    line-height: 125%;
}

.testimonial-card--quote {
    margin-top: 8px;
    font-size: 18px;
    font-family: var(--serif-font);
    font-weight: 400;
    line-height: 140%;
}

.testimonial-card--link {
    font-size: 16px;
    font-weight: 700;
    margin-top: 8px;
}

/* News Grid */

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

.news--card {
    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;
    cursor: pointer;
}

.news--card--link {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, 1fr);
    row-gap: 16px;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.news--card:hover,
.news--card:focus-within {
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
}

.news--card--link:focus-visible {
    outline: 2px solid var(--primary-blue-accent);
    outline-offset: -2px;
}

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

}

.news--card--image {
    grid-row: span 2;
    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--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 */
.polimi-page-slot {
    display: flow-root;
}

.polimi-page-slot > .warning-msg--block {
    width: calc(100% - (2 * var(--padding-desktop)));
    max-width: calc(var(--max-width-desktop) - (2 * var(--padding-desktop)));
    margin-right: auto;
    margin-left: auto;
}

.polimi-page-slot--top > .warning-msg--block:last-child {
    margin-bottom: 80px;
}

/* Card Grid was added as a valid top-slot ending after the original slot
   spacing rules were defined. Match the established gap before main content,
   scoped to this new layout only. */
.polimi-page-slot--top > .home-section:last-child:has(> .section--container > .cards-wrapper-2x1-grid) {
    margin-bottom: 80px;
}

.polimi-page-slot--top > .polimi-key-facts-grid:has(+ .warning-msg--block) {
    padding-bottom: 40px;
}

.polimi-page-slot--top > .polimi-key-facts-grid + .warning-msg--block {
    margin-top: 0;
}

.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;
}

/* INFORMATION LIST BLOCK */
.polimi-documents-links {
    width: 100%;
    margin-top: 48px;
}

/* Optional block header, mirroring the Accordion List header
   (.polimi-accordion-list__header / __eyebrow / __heading). */
.polimi-documents-links__header {
    margin-bottom: 24px;
}

.polimi-documents-links__eyebrow {
    margin-bottom: 12px;
    padding-left: 12px;
    border-left: 1px solid var(--primary-blue-accent);
    color: var(--primary-blue-accent);
    font-size: 17px;
    font-weight: 700;
    line-height: 140%;
}

.polimi-documents-links__heading {
    color: var(--blue-main);
    font-size: 32px;
    font-weight: 700;
    line-height: 120%;
}

.polimi-documents-links__list {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.polimi-documents-links__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    padding: 20px 0;
    border-bottom: 1px solid var(--grey-300);
}

/* Text rows can wrap to several lines, so align the title with the first line
   of the text rather than centring it against the whole block. CTA rows keep
   the centred alignment above (a single-line button reads better centred). */
.polimi-documents-links__item--text {
    align-items: baseline;
}

.polimi-documents-links__title {
    min-width: 0;
    color: var(--blue-main);
    font-size: 18px;
    font-weight: 700;
    line-height: 140%;
    text-align: left;
}

.polimi-documents-links__cta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    color: var(--primary-blue-accent);
    font-size: 14px;
    font-weight: 700;
    line-height: 140%;
    text-align: right;
    text-decoration: none;
    white-space: nowrap;
}

.polimi-documents-links__cta:hover {
    color: var(--primary-blue-accent-dark);
    text-decoration: underline;
}

.polimi-documents-links__cta:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

.polimi-documents-links__icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

.polimi-documents-links__text {
    min-width: 16ch;
    max-width: 60ch;
    color: var(--blue-main);
    font-size: 16px;
    font-weight: 500;
    line-height: 140%;
    text-align: right;
}

/* KEY FACTS GRID */
.polimi-key-facts-grid {
    width: 100%;
    margin-top: 40px;
    padding-bottom: 80px;
}

body:has(.polimi-page-slot--top > .polimi-key-facts-grid:first-child) .static-page--title-section,
body:has(.landing-page--main-content > .polimi-key-facts-grid:first-child) .static-page--title-section {
    margin-bottom: 40px;
}

body:has(.polimi-page-slot--top > .polimi-key-facts-grid:first-child) .static-page--simple-title-section,
body:has(.landing-page--main-content > .polimi-key-facts-grid:first-child) .static-page--simple-title-section {
    padding-bottom: 40px;
}

.polimi-page-slot--top > .polimi-key-facts-grid:first-child,
.landing-page--main-content > .polimi-key-facts-grid:first-child {
    margin-top: 0;
}

.landing-page--main-content > .polimi-key-facts-grid .polimi-key-facts-grid__container {
    padding-right: 0;
    padding-left: 0;
}

.polimi-key-facts-grid__container {
    width: 100%;
    max-width: var(--max-width-desktop);
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--padding-desktop);
    padding-left: var(--padding-desktop);
}

.polimi-key-facts-grid__list {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
}

.polimi-key-facts-grid__item {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
    padding-left: 16px;
    border-left: 2px solid var(--primary-blue-accent);
}

.polimi-key-facts-grid__label,
.polimi-key-facts-grid__text {
    margin: 0;
    overflow-wrap: anywhere;
}

.polimi-key-facts-grid__label {
    color: var(--primary-blue-accent);
    font-size: 14px;
    font-weight: 700;
    line-height: 140%;
}

.polimi-key-facts-grid__text {
    color: var(--blue-main);
    font-size: 18px;
    font-weight: 500;
    line-height: 140%;
}

@media (max-width: 1199px) {
    .polimi-key-facts-grid__list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        row-gap: 24px;
    }
}

/* STATEMENTS GRID */
/* In page content the rhythm is 48px, matching .polimi-accordion-list and
   .warning-msg--block. */
.polimi-statements-grid {
    width: 100%;
    margin-top: 48px;
}

/* Homepage sections sit 80px apart — see .polimi-two-columns,
   .full-width-banner and .stats-section--wrapper. */
.is-homepage .polimi-statements-grid {
    margin-top: 80px;
}

.polimi-statements-grid__container {
    width: 100%;
    max-width: var(--max-width-desktop);
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--padding-desktop);
    padding-left: var(--padding-desktop);
}

/* Inside the page containers the width and padding are already applied by
   .static-page--container / .landing-page--container, so drop them here. The
   container only earns its padding in full-width contexts (page slots, home). */
.static-page--main-content > .polimi-statements-grid .polimi-statements-grid__container,
.landing-page--main-content > .polimi-statements-grid .polimi-statements-grid__container {
    padding-right: 0;
    padding-left: 0;
}

/* On the homepage .section-header brings its own max-width and side padding for
   standalone sections, which would double up on the container above and pull the
   header in from the items. The container owns the width here, so neutralise it.
   The extra specificity is deliberate: .is-homepage .section-header is restated
   inside the media queries further down, which would otherwise win on order. */
.polimi-statements-grid .polimi-statements-grid__container .section-header {
    max-width: 100%;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 48px;
    padding-right: 0;
    padding-left: 0;
}

.polimi-statements-grid__list {
    display: grid;
    gap: 16px; /* Constant gutter, matching .cards-wrapper-2x1-grid. */
    margin: 0;
    padding: 0;
}

/* Column count is driven by the block's Grid style setting. Keeping the modifier
   on the list (rather than the wrapper) holds every column rule at the same
   specificity, so the responsive overrides below win purely by source order. */
.polimi-statements-grid__list.is-2-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.polimi-statements-grid__list.is-3-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Panel treatment mirrors .card. height:100% is belt-and-braces: grid items
   already stretch to the tallest in their row, which is what keeps the panels
   level. */
.polimi-statements-grid__item {
    display: flex;
    min-width: 0;
    height: 100%;
    flex-flow: column;
    gap: 16px;
    padding: 24px;
    border-radius: var(--radius-8px);
    background-color: var(--polimi-statements-item-bg, #f8f8f8);
}

.polimi-statements-grid__item-eyebrow,
.polimi-statements-grid__item-title,
.polimi-statements-grid__item-text {
    margin: 0;
    overflow-wrap: anywhere;
}

.polimi-statements-grid__item-eyebrow {
    border: 0;
    padding: 0;
    color: var(--primary-blue-accent);
    font-size: 14px;
    font-weight: 700;
    line-height: 125%;
}

.polimi-statements-grid__item-title {
    color: var(--blue-main);
    font-size: 27px; /* Matches .card-title. */
    font-weight: 700;
    line-height: 110%;
    letter-spacing: -1%;
}

.polimi-statements-grid__item-text {
    color: var(--blue-main);
    font-size: 16px;
    font-weight: 400;
    line-height: 140%;
}

/* ACCORDION LIST */
.polimi-accordion-list {
    width: 100%;
    margin-top: 48px;
}

.polimi-accordion-list__header {
    margin-bottom: 24px;
}

.polimi-accordion-list__eyebrow {
    margin-bottom: 12px;
    padding-left: 12px;
    border-left: 1px solid var(--primary-blue-accent);
    color: var(--primary-blue-accent);
    font-size: 17px;
    font-weight: 700;
    line-height: 140%;
}

.polimi-accordion-list__heading {
    color: var(--blue-main);
    font-size: 32px;
    font-weight: 700;
    line-height: 120%;
}

.polimi-accordion-list__item {
    border-bottom: 1px solid var(--grey-300);
}

.polimi-accordion-list__item:first-of-type {
    border-top: 1px solid var(--grey-300);
}

.polimi-accordion-list__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 20px 0;
    border: 0;
    background: transparent;
    color: var(--blue-main);
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.polimi-accordion-list__trigger:hover {
    color: var(--primary-blue-accent);
}

.polimi-accordion-list__trigger:focus-visible {
    border-radius: 2px;
    outline: 2px solid var(--primary-blue-accent);
    outline-offset: 4px;
}

/* Colour is inherited from the trigger: blue by default, accent on hover. */
.polimi-accordion-list__title {
    min-width: 0;
    color: inherit;
    font-size: 18px;
    font-weight: 700;
    line-height: 140%;
}

.polimi-accordion-list__icon {
    position: relative;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    color: var(--primary-blue-accent);
}

.polimi-accordion-list__icon::before,
.polimi-accordion-list__icon::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    content: "";
}

.polimi-accordion-list__icon::before {
    transform: translate(-50%, -50%);
}

.polimi-accordion-list__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    transition: transform 280ms ease;
}

.polimi-accordion-list__item.is-open .polimi-accordion-list__icon::after {
    transform: translate(-50%, -50%) rotate(180deg);
}

.polimi-accordion-list__panel {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    opacity: 0;
    transition:
        grid-template-rows 320ms ease,
        opacity 240ms ease,
        visibility 0s linear 320ms;
}

.polimi-accordion-list__item.is-open .polimi-accordion-list__panel {
    grid-template-rows: 1fr;
    visibility: visible;
    opacity: 1;
    transition:
        grid-template-rows 320ms ease,
        opacity 240ms ease,
        visibility 0s linear 0s;
}

.polimi-accordion-list__panel-inner {
    min-height: 0;
    overflow: hidden;
}

.polimi-accordion-list__content {
    max-width: 70ch;
    padding: 0 0 20px;
    color: #5c6f82;
    font-size: 16px;
    font-weight: 500;
    line-height: 160%;
}

.polimi-accordion-list__content p + p {
    margin-top: 12px;
}

.polimi-accordion-list__content a {
    color: var(--primary-blue-accent);
    text-decoration: underline;
}

.polimi-accordion-list__content a:hover {
    color: var(--primary-blue-accent-dark);
}

@media (prefers-reduced-motion: reduce) {
    .polimi-projects-slider__progress-value,
    .polimi-accordion-list__icon::after,
    .polimi-accordion-list__panel,
    .polimi-accordion-list__item.is-open .polimi-accordion-list__panel {
        transition: none;
    }
}

.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);
}

/* Keep YouTube embeds aligned with the Project content column without
   changing embeds used by other post types or page layouts. */
.single-projects .projects-post--content .wp-block-embed:is(.is-provider-youtube, .wp-block-embed-youtube) {
    width: 100%;
    max-width: 100%;
    margin: 32px 0;
}

.single-projects .projects-post--content .wp-block-embed:is(.is-provider-youtube, .wp-block-embed-youtube) .wp-block-embed__wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-8px);
    aspect-ratio: 16 / 9;
}

.single-projects .projects-post--content .wp-block-embed:is(.is-provider-youtube, .wp-block-embed-youtube) .wp-block-embed__wrapper::before {
    content: none;
}

.single-projects .projects-post--content .wp-block-embed:is(.is-provider-youtube, .wp-block-embed-youtube) iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.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;
}

.projects-post--gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 32px;
}

.projects-post--gallery-item {
    min-width: 0;
    margin: 0;
}

.projects-post--gallery-item:only-child {
    grid-column: 1 / -1;
}

.projects-post--content .projects-post--gallery-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    margin: 0;
    border-radius: var(--radius-8px);
    object-fit: cover;
}

.projects-post--gallery-item figcaption {
    margin-top: 8px;
}

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,
.testimonial-single--meta {
    display: flex;
    flex-flow: column;
    gap: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 160%;
}

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

.projects-post--subject-link {
    color: var(--primary-blue-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.projects-post--subject-link:hover {
    color: var(--primary-blue-accent-dark);
}

.projects-post--thesis-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 999px;
    background: var(--primary-blue-accent);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    margin-top: 8px;
}

.projects-post--thesis-cta:hover {
    background: var(--primary-blue-accent-dark);
    color: #fff;
}

.projects-post--thesis-cta svg {
    width: 16px;
    height: 16px;
}

/* Subject single pages reuse the Project single layout. */
.subject-post--container.has-program-fallback .subject-post--sidebar {
    display: none;
}

.subject-post--container.has-program-fallback .subject-post--content {
    grid-column: 1 / -1;
}

.subject-post--projects-section {
    margin-bottom: 80px;
}

.subject-post--projects-container {
    width: 100%;
    max-width: var(--max-width-desktop);
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--padding-desktop);
    padding-left: var(--padding-desktop);
}

.subject-post--projects-container h2 {
    margin-top: 0;
    margin-bottom: 24px;
    font-size: 32px;
    line-height: 110%;
    letter-spacing: -0.01em;
}

/* PROJECTS ARCHIVE Layout */
.projects-archive--layout {
    width: 100%;
    max-width: var(--max-width-desktop);
    margin: 80px auto;
    padding-left: var(--padding-desktop);
    padding-right: var(--padding-desktop);
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.projects-archive--sidebar {
    position: static;
    width: 100%;
}

.projects-archive--filters {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 32px;
    align-items: flex-start;
}

.projects-archive--filter-group {
    border: 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.projects-archive--filter-group legend,
.projects-archive--filter-group label,
.projects-archive--filter-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--blue-main);
}

.projects-archive--filter-label {
    padding-left: 10px;
    opacity: 0.6;
}

.projects-archive--filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.projects-archive--filter-option {
    position: relative;
    display: inline-flex;
}

.projects-archive--filter-option input[type="radio"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

.projects-archive--filter-option span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: var(--radius-8px);
    border: 1px solid var(--grey-200);
    font-weight: 600;
    color: var(--blue-main);
    background: #fff;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.projects-archive--filter-option span:hover {
    border-color: var(--primary-blue-accent);
}

.projects-archive--filter-option input[type="radio"]:checked + span {
    background: var(--primary-accent-solid);
    border-color: var(--primary-accent-solid);
}

.projects-archive--filter-option input[type="radio"]:focus-visible + span {
    box-shadow: 0 0 0 3px rgba(41, 66, 219, 0.25);
    outline: none;
}

.projects-archive--select {
    position: relative;
}

.projects-archive--select::after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.75 9l5.25 5.25L17.25 9' stroke='%23102C53' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform 0.2s ease-in-out;
}

.projects-archive--select:focus-within::after {
    transform: translateY(-50%) rotate(180deg);
}

.projects-archive--filters select {
    width: 100%;
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-8px);
    padding: 12px 44px 12px 16px;
    font-size: 15px;
    font-weight: 600;
    color: var(--blue-main);
    background: #fff;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.projects-archive--filters select:focus {
    border-color: var(--primary-blue-accent);
    box-shadow: 0 0 0 3px rgba(41, 66, 219, 0.15);
    outline: none;
}

.projects-archive--filters select option {
    font-weight: 500;
    background: #fff;
    color: var(--blue-main);
}

.projects-archive--filters select option:checked {
    background: var(--primary-blue-accent);
    color: #fff;
}

.projects-archive--filters select::-ms-expand {
    display: none;
}

.projects-archive--filters-submit {
    margin-top: 12px;
    padding: 10px 16px;
    border-radius: var(--radius-8px);
    border: none;
    background: var(--primary-blue-accent);
    color: #fff;
    font-weight: 600;
}

.projects-archive--results {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}

.projects-archive--results.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-8px);
    backdrop-filter: blur(2px);
    z-index: 2;
}

.projects-archive--grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 16px;
    row-gap: 16px;
}

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

.projects-archive--pagination {
    display: flex;
    justify-content: center;
    padding-top: 8px;
}

/* 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;
    margin-bottom: 4px;
}

.people-archive--card--meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
}

.people-archive--card--meta p {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 140%;
}

.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-block--section .people-archive--card--link {
    color: var(--primary-blue-accent);
}

.people-archive--card img.people-archive--card--link-icon {
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    aspect-ratio: auto;
    border-radius: 0;
    filter: none;
}

/* People archive and grid blocks: optional black & white images */
.people-archive--section.is-bw .people-archive--card img:not(.people-archive--card--link-icon),
.people-block--section.is-bw .people-archive--card img:not(.people-archive--card--link-icon) {
    filter: grayscale(100%);
}

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

.people-block--section:not(:first-child) {
    margin-top: 32px;
}

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

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

.people-block--header .section-eyebrow {
    margin-bottom: 0;
}

.people-block--header .section-title--wrapper {
    width: 100%;
}

/* On full-width templates, keep introductory copy to nine of twelve columns. */
.is-homepage .people-block--description,
.landing-page--main-content .people-block--description {
    width: 75%;
}

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

@media (min-width: 993px) {
    .people-block--grid {
        row-gap: 48px;
    }
}

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

.people-block--section.is-compact .people-block--grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.people-block--section.is-four-columns .people-block--grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.people-block--section.is-compact .people-archive--card {
    gap: 12px;
}

.people-block--section.is-compact .people-archive--card img {
    max-width: 240px;
}

/* Full-width templates have enough room for compact cards to fill their track. */
.is-homepage .people-block--section.is-compact .people-archive--card img,
.landing-page--main-content .people-block--section.is-compact .people-archive--card img {
    width: 100%;
    max-width: none;
}

.people-block--section.is-compact .people-archive--card--fullName {
    font-size: 18px;
}

.people-block--section + *,
.landing-page--main-content > section.people-block--section + * {
    margin-top: 32px;
}

.static-page--main-content > section.people-block--section + * {
    margin-top: 48px;
}

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

.course-program-display.inline-course-program-display {
    gap: 24px;
}

.course-program-display:not(:first-child) {
    margin-top: 40px;
}

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

.course-year[hidden] {
    display: none;
}

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

.course-program-display.is-compact .course-semesters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 24px;
    align-items: start;
}

.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-list li.is-linked {
    position: relative;
    cursor: pointer;
}

.subject-title,
.subject-option-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 120%;
    letter-spacing: 0;
    transition: color 0.2s ease-in-out;
}

.subject-details-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--blue-main);
    font-size: 14px;
    font-weight: 700;
    line-height: 120%;
    white-space: nowrap;
    text-underline-offset: 4px;
    transition: color 0.2s ease-in-out;
}

.subject-details-cta::after {
    content: '';
    display: inline-block;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    background: url('Assets/Arrows/arrow--internal--blue-circle.svg') no-repeat center / contain;
}

.subject-item.is-linked:hover > .subject-header > .subject-title,
.subject-option-item.is-linked:hover > .subject-option-title {
    color: var(--primary-blue-accent);
}

.subject-list li.is-linked:hover .subject-details-cta {
    color: var(--primary-blue-accent);
    text-decoration: underline;
}

.subject-row-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 2px;
    text-decoration: none;
}

.subject-row-link:focus-visible {
    border-radius: 2px;
    outline: 2px solid var(--primary-blue-accent);
    outline-offset: -2px;
}

.subject-list li.is-linked :is(a, button, input, select, textarea):not(.subject-row-link) {
    position: relative;
    z-index: 2;
}

.subject-meta {
    display: flex;
    flex-flow: row;
    align-items: center;
    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);
}

.course-program-display.is-compact .subject-header,
.course-program-display.is-compact .subject-options-list li {
    flex-flow: column;
    align-items: flex-start;
    gap: 4px;
}

.course-program-display.is-compact .subject-meta {
    flex-wrap: wrap;
    gap: 4px 16px;
}

.course-program-display.is-compact .subject-cfu {
    order: -1;
    flex-basis: 100%;
}

.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 nowrap;
    gap: 0;
    overflow-x: auto;
}

.course-filter-btn {
    cursor: pointer;
    font-family: Manrope, sans-serif;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--blue-main);
    background-color: transparent;
    border: 0;
    border-bottom: 2px solid var(--grey-300);
    padding: 16px;
    white-space: nowrap;
    transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.course-filter-btn:hover {
    color: var(--primary-blue-accent);
}

.course-filter-btn:focus-visible {
    outline: 2px solid var(--primary-blue-accent);
    outline-offset: -2px;
}

.course-filter-btn.is-active {
    color: var(--primary-blue-accent);
    border-bottom-color: var(--primary-blue-accent);
}



/* ====== 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) {
    .polimi-page-slot > .warning-msg--block {
        width: calc(100% - (2 * var(--padding-tablet)));
        max-width: none;
    }

    .polimi-page-slot--top > .warning-msg--block:last-child {
        margin-bottom: 40px;
    }

    .polimi-page-slot--top > .home-section:last-child:has(> .section--container > .cards-wrapper-2x1-grid) {
        margin-bottom: 40px;
    }

    .polimi-page-slot--top > .polimi-key-facts-grid:has(+ .warning-msg--block) {
        padding-bottom: 32px;
    }

    /* Avoid stacking each component's standalone spacing inside the top slot. */
    .polimi-page-slot--top > .polimi-key-facts-grid:has(+ .home-section) {
        padding-bottom: 40px;
    }

    .polimi-page-slot--top > .polimi-key-facts-grid + .home-section,
    .polimi-page-slot--top > .home-section:has(> .section--container > .home--hero-section--wrapper) + .home-section {
        padding-top: 0;
    }

    /* --- Your mobile and tablet styles go here --- */

    .polimi-key-facts-grid__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Three columns collapse to two on tablet; two-column stays as-is. */
    .polimi-statements-grid__list.is-3-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .people-block--section.is-four-columns .people-block--grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .is-homepage .people-block--description,
    .landing-page--main-content .people-block--description {
        width: 100%;
    }

    .polimi-statements-grid__item-title {
        font-size: 24px;
    }

    .polimi-statements-grid .polimi-statements-grid__container .section-header {
        margin-bottom: 32px;
    }

    /* 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,
    .polimi-breadcrumbs {
        padding-right: var(--padding-tablet);
        padding-left: var(--padding-tablet);
    }

    .polimi-projects-display--slider > .section-header,
    .polimi-projects-display--slider > .section--container {
        padding-right: var(--padding-tablet);
        padding-left: var(--padding-tablet);
    }

    .polimi-key-facts-grid__container,
    .polimi-statements-grid__container {
        max-width: 100%;
        padding-right: var(--padding-tablet);
        padding-left: var(--padding-tablet);
    }

    .home--title-section--header,
    .is-homepage .section-header,
    .is-homepage .section--container,
    .polimi-page-slot > .home-section > .section-header,
    .polimi-page-slot > .home-section > .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,
    .landing-page--container,
    .page-title--no-image--wrapper,
    .news-archive--container,
    .people-archive--grid,
    .news-post--title-section--wrapper,
    .news-post--container,
    .projects-archive--layout,
    .projects-post--title-section--wrapper,
    .projects-post--container,
    .subject-post--projects-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;
    }

    /* Link Card grids: cap at two columns on tablet. */
    .cards-wrapper-2x1-grid.cards-wrapper--link-cards-3,
    .cards-wrapper-2x1-grid.cards-wrapper--link-cards-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .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;
    }

    .static-page--title-section--title,
    .page-title--no-image--title {
        line-height: 125%;
    }

    .static-page--title-section--backlink + .static-page--title-section--title {
        margin-top: 8px;
    }

    .section-eyebrow,
    .section-supertitle,
    .course-semester-eyebrow,
    .course-semester-title,
    .polimi-accordion-list__eyebrow,
    .polimi-documents-links__eyebrow {
        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,
    .landing-page--main-content > p,
    .static-page--main-content > ul,
    .static-page--main-content > ol,
    .landing-page--main-content > ul,
    .landing-page--main-content > ol,
    .people-block--description,
    .news-post--content p,
    .section-description {
        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--link {
        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 {
        gap: 32px;
        margin-top: 0px;
    }

    .stats-section--group,
    .stats-section--group.has-2-columns,
    .stats-section--group.has-3-columns,
    .stats-section--group.has-4-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 16px;
    }

    .stats-section--group.has-1-columns {
        grid-template-columns: minmax(0, 1fr);
    }

    .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%;
    }

    .landing-page--section {
        margin-bottom: 40px;
    }

    .polimi-two-columns {
        margin-top: 48px;
    }

    /* Same 80px -> 48px step as .polimi-two-columns above. */
    .is-homepage .polimi-statements-grid {
        margin-top: 48px;
    }

    .polimi-two-columns__container {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .polimi-two-columns__column--left p {
        font-size: 16px;
    }

    .polimi-two-columns__column--right {
        position: static;
    }

    .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);
    }

    .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-meta {
        flex-wrap: wrap;
        gap: 4px 16px;
    }

    .subject-details-cta {
        flex-basis: 100%;
    }

    .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--layout {
        gap: 24px;
        margin-top: 24px;
        margin-bottom: 64px;
    }

    .projects-archive--filters {
        gap: 16px;
    }

    .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;
    }

    .projects-post--gallery {
        grid-template-columns: minmax(0, 1fr);
    }

}

@media (max-width: 576px) {
    .polimi-breadcrumbs__item:not(.is-current),
    .polimi-breadcrumbs__item.is-current {
        flex: 0 1 auto;
        max-width: 120px;
    }

    .polimi-breadcrumbs__item.is-compact {
        flex-shrink: 0;
        max-width: none;
    }

    .polimi-breadcrumbs__item > :is(a, span) {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .single-projects .projects-post--content .wp-block-embed:is(.is-provider-youtube, .wp-block-embed-youtube) {
        margin-top: 24px;
        margin-bottom: 24px;
    }

    .polimi-page-slot > .warning-msg--block {
        width: calc(100% - (2 * var(--padding-mobile)));
    }

    .polimi-page-slot--top > .warning-msg--block:last-child {
        margin-bottom: 32px;
    }

    .polimi-page-slot--top > .home-section:last-child:has(> .section--container > .cards-wrapper-2x1-grid) {
        margin-bottom: 32px;
    }

    .polimi-page-slot--top > .polimi-key-facts-grid:has(+ .warning-msg--block) {
        padding-bottom: 24px;
    }

    .polimi-page-slot--top > .polimi-key-facts-grid:has(+ .home-section),
    .polimi-page-slot--top > .home-section > .section--container > .home--hero-section--wrapper {
        padding-bottom: 0;
        margin-bottom: 32px;
    }

    .course-program-display.is-compact .course-semesters {
        grid-template-columns: minmax(0, 1fr);
    }

    .people-block--section.is-compact .people-block--grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .branding-bar--container,
    .nav--container,
    .polimi-breadcrumbs,
    .mobile-nav-links > .menu-item {
        padding-right: var(--padding-mobile);
        padding-left: var(--padding-mobile);
    }

    .polimi-projects-display--slider > .section-header,
    .polimi-projects-display--slider > .section--container {
        padding-right: var(--padding-mobile);
        padding-left: var(--padding-mobile);
    }

    .polimi-projects-slider__slide {
        height: 280px;
    }

    .polimi-projects-slider__footer {
        gap: 12px;
    }

    .polimi-projects-slider__progress-group {
        gap: 8px;
    }

    .polimi-projects-slider__button {
        width: 40px;
        height: 40px;
    }

    .home--title-section--header,
    .is-homepage .section-header,
    .is-homepage .section--container,
    .polimi-page-slot > .home-section > .section-header,
    .polimi-page-slot > .home-section > .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,
    .landing-page--container,
    .page-title--no-image--wrapper,
    .news-archive--container,
    .people-archive--grid,
    .news-post--title-section--wrapper,
    .news-post--container,
    .projects-archive--layout,
    .projects-post--title-section--wrapper,
    .projects-post--container,
    .subject-post--projects-container {
        padding-right: var(--padding-mobile);
        padding-left: var(--padding-mobile);
    }

    .polimi-documents-links__item {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding: 16px 0;
    }

    .polimi-documents-links__title {
        font-size: 16px;
    }

    .polimi-documents-links__cta,
    .polimi-documents-links__text {
        justify-content: flex-start;
        text-align: left;
    }

    .polimi-key-facts-grid {
        margin-top: 24px;
    }

    .polimi-key-facts-grid__container,
    .polimi-statements-grid__container {
        padding-right: var(--padding-mobile);
        padding-left: var(--padding-mobile);
    }

    .polimi-key-facts-grid__list {
        gap: 16px 8px;
    }

    /* Single column on mobile regardless of the chosen grid style. */
    .polimi-statements-grid__list.is-2-columns,
    .polimi-statements-grid__list.is-3-columns {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Link Card grids: single column on mobile. */
    .cards-wrapper-2x1-grid.cards-wrapper--link-cards-2,
    .cards-wrapper-2x1-grid.cards-wrapper--link-cards-3,
    .cards-wrapper-2x1-grid.cards-wrapper--link-cards-4 {
        grid-template-columns: minmax(0, 1fr);
    }

    .polimi-key-facts-grid__item {
        gap: 2px;
        padding-left: 8px;
    }

    .polimi-key-facts-grid__label {
        font-size: 11px;
    }

    .polimi-key-facts-grid__text {
        font-size: 14px;
    }

    .polimi-accordion-list__trigger {
        gap: 16px;
        padding: 16px 0;
    }

    .polimi-accordion-list,
    .polimi-documents-links {
        margin-top: 32px;
    }

    /* Both contexts converge on 32px here, matching .polimi-accordion-list.
       The homepage selector is repeated so it does not win on specificity. */
    .polimi-statements-grid,
    .is-homepage .polimi-statements-grid {
        margin-top: 32px;
    }

    .polimi-accordion-list__header,
    .polimi-documents-links__header {
        margin-bottom: 20px;
    }

    .polimi-accordion-list__eyebrow,
    .polimi-documents-links__eyebrow {
        margin-bottom: 8px;
    }

    .polimi-accordion-list__heading,
    .polimi-documents-links__heading {
        font-size: 24px;
    }

    .polimi-accordion-list__title {
        font-size: 16px;
    }

    .polimi-accordion-list__content {
        padding-right: 0;
        padding-bottom: 16px;
        font-size: 14px;
    }
}