/*
Theme Name: ANTLab
Theme Domain: antlab-theme
Theme URI:
Author: ANTLab
Author URI:
Description: WordPress theme for ANTLab (Advanced Network Technologies Laboratory, Politecnico di Milano): people, research activities, thesis proposals, projects and news. Forked from the Politecnico di Milano CdS theme by Giovanni Malausa.
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: antlab-theme
Tags: block-patterns, education, custom-logo, custom-menu, featured-images
*/

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

/* #region Global Styles */
:root {
    /* ======== COLORS ======== */
    --eng-3i-solid: black;
    --eng-3i-alpha: black;

    /* Colors replaced with ANTLab branding */
    --blue-main: var(--antlab-primary);
    --blue-main-60: var(--antlab-primary);
    --blue-main-40: var(--antlab-primary);

    --primary-blue-accent: var(--antlab-primary);
    --primary-blue-accent-dark: var(--antlab-primary);
    --primary-accent-2: var(--antlab-primary);

    --antlab-primary: #93143B;
    --antlab-primary-dark: purple;
    --antlab-primary-alpha: #93143B00; /* antlab-primary at 0% opacity (same as editor-style.css) */
	
    --primary-accent-solid: var(--antlab-primary); /* <——— Gets changed by setting in WP Customizer */
    --primary-accent-alpha: var(--antlab-primary-alpha); /* <——— Gets changed by setting in WP Customizer */

    --text-secondary: #555;

    --grey-50: #F3F3F1;
    /* Neutrals tinted with the antlab maroon (#93143B mixed with white) */
    --grey-100: #F5EBEE;
    --grey-200: #EEDFE3;
    --grey-300: #D8C6CC;
    --grey-disabled: #75646A;
    --grey-news: #75646A;

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

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

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

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

}

html {
    scroll-behavior: smooth;
    /* Canvas behind the page: antlab maroon (same as header and footer). Newer Safari versions tint their bars
       from the page, and the area under a short page / the rubber-band scroll shows the footer colour instead of white. */
    background-color: var(--antlab-primary);
}

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

h1, h2, h3, h4, h5 {
	color: var(--antlab-primary)
}

body {
    color: black;
    background-color: #fff; /* the page itself stays white (the html canvas is maroon) */
}    

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

h2 {
    font-size: 32px;
}

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

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

/* #endregion Global Styles */

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

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

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

.link--servizi-online {
    display: none;
    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: var(--antlab-primary);
    backdrop-filter: blur(30px);
    transition: background-color .2s ease-in-out;
}

nav:hover,
nav.submenu-active {
    background-color: var(--antlab-primary);
}

/* 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(--antlab-primary);
    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: white;
    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;
    overflow: hidden;
    margin-top: calc(-1 * var(--nav-height)); /* to offset the nav height */
    margin-bottom: 0;
}

/* First section after the hero: the only gap below the hero text (hero margin + this padding used to add up to 120px) */
.is-homepage .home--title-section + .home-section {
    padding-top: 40px;
}

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

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

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

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

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

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

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

/* STATIC PAGE TITLE SECTION */

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

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

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

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

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

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

.static-page--title-section--backlink,
.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);
}

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

/* White fade over the lower part of the photo (same as the homepage hero),
   so the antlab-colored back link, title and subtitle are readable on any picture. */
.testimonial-single--hero.has-featured-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #FFF 7.5%, rgba(255, 255, 255, 0) 70%);
    z-index: 0;
}

.testimonial-single--hero.has-featured-image .testimonial-single--hero-inner,
.testimonial-single--hero.has-featured-image .testimonial-single--title,
.testimonial-single--hero.has-featured-image .testimonial-single--role,
.testimonial-single--hero.has-featured-image .testimonial-single--backlink {
    color: var(--antlab-primary);
}

.testimonial-single--hero.has-featured-image .testimonial-single--backlink:hover {
    color: var(--antlab-primary);
    opacity: 0.75;
}

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

/* Project page body: reuses the People profile grid (.people-post--*).
   Only the logo box and the no-logo case are specific to projects. */
.testimonial-post--logo-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1/1;
    background: var(--grey-50);
    border-radius: var(--radius-8px);
}

.testimonial-post--logo {
    max-width: calc(100% - 64px);
    max-height: calc(100% - 64px);
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* No logo: metadata starts at the top of the left column */
.testimonial-post--container:not(:has(.people-post--photo-wrapper)) .projects-post--sidebar {
    grid-row: 1;
    align-self: start;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.static-page--container.no-shoulder .static-page--shoulder {
    display: none;
}

.static-page--container.no-shoulder .static-page--main-content {
    grid-column: 1 / 11;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.accent {
    /* Hover wash: fades from transparent to a light tint of the brand color (22%), so maroon text stays readable on top */
    background-image: linear-gradient(180deg,var(--primary-accent-alpha) 36%,color-mix(in srgb,var(--primary-accent-solid) 22%,transparent));
    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;
}

.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: var(--antlab-primary);
    -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;
    /* Replaces the blue arc hosted on an external CDN with the same ring in antlab maroon */
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='259' height='320' viewBox='0 0 259 320'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2393143B' stop-opacity='.04'/%3E%3Cstop offset='1' stop-color='%2393143B' stop-opacity='.5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' fill-rule='evenodd' d='M118 320a338.7 338.7 0 1 0 677.4 0a338.7 338.7 0 1 0 -677.4 0ZM222 320a234.7 234.7 0 1 0 469.4 0a234.7 234.7 0 1 0 -469.4 0Z'/%3E%3C/svg%3E");
}

/* Arrow inside the round CTA buttons: antlab maroon instead of the navy (#102C53) baked into the block markup.
   Only targets those hardcoded arrows, so currentColor arrows (text cards) are untouched. */
.card-cta-img path[fill="#102C53"] {
    fill: var(--antlab-primary);
}

/* Graphical cards have a maroon button: white arrow */
.graphical-card .card-cta-img path {
    fill: #fff;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.footer--row-2--clmn-1 {
    grid-column: span 6;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    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 #ffffff99;
    font-size: 14px;
    font-weight: 700;
    line-height: 14px;
    color: #fff;
}

footer a {
    text-decoration: none;
}

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

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

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

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

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

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

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

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

/* News Post Styles */
.news-post--title-section--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;
}

.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 (same look as the Projects list) */
.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-top: 40px;
    margin-bottom: 80px;
}

.news-archive--grid {
    display: flex;
    flex-flow: column;
    gap: 48px;
}

.news--preview--inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
    color: inherit;
}

.news--preview--inner,
.news--preview--inner * {
    text-decoration: none;
}

/* Square photo, same box as the Projects logos */
.news--preview--image-area {
    flex-shrink: 0;
    width: 200px;
    aspect-ratio: 1/1;
    background: var(--grey-50);
    border-radius: var(--radius-8px);
    overflow: hidden;
}

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

.news--preview--content {
    display: flex;
    flex-flow: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
    font-weight: 500;
}

.news--preview--date {
    color: var(--grey-news);
    font-size: 14px;
    font-weight: 700;
    line-height: 125%;
}

/* Same as .testimonial-card--title / .people-archive--group--title */
.news--preview--title {
    font-size: 28px;
    font-weight: 700;
    line-height: 110%;
    margin: 0;
}

.news--preview--subtitle {
    font-size: 18px;
    font-weight: 500;
    line-height: 140%;
    color: var(--text-secondary, #555);
    margin: 0;
}

.news--preview--excerpt {
    font-size: 16px;
    font-weight: 500;
    line-height: 140%;
    margin: 0;
}

/* Same as .testimonial-card--link / .people-archive--card--link */
.news--preview--more {
    color: var(--blue-main);
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
}

.news--preview--inner:hover .news--preview--more {
    text-decoration: underline;
    text-decoration-color: var(--primary-blue-accent);
}

@media (max-width: 576px) {
    .news--preview--inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .news--preview--image-area {
        width: 100%;
        aspect-ratio: 2/1;
    }
}

/* Thesis Proposals Archive (groups reuse .people-archive--group*) */
.thesis-archive--section {
    padding-bottom: 80px;
}

.thesis-archive--section > .people-archive--group:first-child {
    margin-top: 0;
}

.thesis-archive--list {
    display: flex;
    flex-flow: column;
}

.thesis-row {
    border-top: 1px solid var(--grey-200);
}

.thesis-row:last-child {
    border-bottom: 1px solid var(--grey-200);
}

.thesis-row--inner {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    gap: 8px;
    padding: 24px 0;
    color: inherit;
    font-weight: 500;
}

.thesis-row a,
.thesis-archive--section .people-archive--group--title a {
    text-decoration: none;
}

.thesis-row--title a:hover,
.thesis-archive--section .people-archive--group--title a:hover {
    text-decoration: underline;
    text-decoration-color: var(--primary-blue-accent);
}

.thesis-archive--section .people-archive--group--title a {
    color: inherit;
}

/* "Interested in this topic?" call to action at the end of a thesis proposal */
.cta-box {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 56px;
    padding: 32px;
    background: var(--grey-100);
    border-radius: var(--radius-8px);
}

.cta-box--title {
    font-size: 28px;
    font-weight: 700;
    line-height: 110%;
    margin: 0;
}

.cta-box--text {
    font-size: 18px;
    font-weight: 500;
    line-height: 140%;
    margin: 0 0 8px;
}

/* The global mailto: rule (icon, no background on hover) must not restyle this button */
a.cta-box--button,
a.cta-box--button[href^="mailto:"] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 999px;
    background: var(--antlab-primary);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}

a.cta-box--button[href^="mailto:"]::after {
    content: none;
}

a.cta-box--button:hover,
a.cta-box--button[href^="mailto:"]:hover {
    background: var(--antlab-primary) !important;
    color: #fff;
    opacity: 0.88;
    text-decoration: none;
}

/* Row version (title and text on the left, button on the right), used at the end of the People and Projects pages */
.cta-box--row {
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
}

.cta-box--row .cta-box--content {
    display: flex;
    flex-flow: column;
    gap: 8px;
    flex: 1 1 360px;
    max-width: 70ch;
}

.cta-box--row .cta-box--title,
.cta-box--row .cta-box--text {
    margin: 0;
}

.people-archive--cta {
    margin-bottom: 0;
}

@media (max-width: 576px) {
    .cta-box--row {
        flex-flow: column;
        align-items: flex-start;
    }

    /* stacked: the 360px "preferred width" of the text block must not turn into a height */
    .cta-box--row .cta-box--content {
        flex: 0 0 auto;
        max-width: none;
    }
}

@media (max-width: 576px) {
    .cta-box {
        padding: 24px;
    }
    .cta-box--title {
        font-size: 24px;
    }
}

/* "Related thesis proposals" under a People profile / Research activity */
.thesis-related {
    margin-top: 56px;
}

.thesis-related .people-archive--group--title {
    margin-bottom: 16px;
}

/* Same as .people-archive--card--fullName */
.thesis-row--title {
    font-size: 20px;
    font-weight: 700;
    line-height: 130%;
    margin: 0;
}

.thesis-row--meta {
    display: flex;
    flex-flow: row wrap;
    column-gap: 32px;
    row-gap: 4px;
    font-size: 16px;
    font-weight: 600;
    line-height: 140%;
    margin: 0;
}

.thesis-row--meta-label {
    opacity: .6;
    font-size: 14px;
    font-weight: 500;
    margin-right: 6px;
}

.thesis-row--abstract {
    font-size: 16px;
    font-weight: 500;
    line-height: 140%;
    margin: 0;
    max-width: 90ch;
}

/* Same as .people-archive--card--link */
.thesis-row--more {
    color: var(--blue-main);
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

.thesis-row--more:hover {
    text-decoration: underline;
    text-decoration-color: var(--primary-blue-accent);
}

/* 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-top: 40px;
    margin-bottom: 0; /* the banner below and the footer margin provide the space, as on the People page */
    display: flex;
    flex-flow: column;
    gap: 48px;
}

.testimonial-card--inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
    color: inherit;
}

.testimonial-card--inner,
.testimonial-card--inner * {
    text-decoration: none;
}

/* Logo box: square like the People photos */
.testimonial-card--logo-area {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 200px;
    aspect-ratio: 1/1;
    background: var(--grey-50);
    border-radius: var(--radius-8px);
}

.testimonial-card--logo {
    max-width: calc(100% - 48px);
    max-height: calc(100% - 48px);
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.testimonial-card--logo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--antlab-primary);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
}

.testimonial-card--body {
    display: flex;
    flex-flow: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
    font-weight: 500;
}

/* Same as .people-archive--group--title */
.testimonial-card--title {
    font-size: 28px;
    font-weight: 700;
    line-height: 110%;
    margin: 0;
}

.testimonial-card--subtitle {
    font-size: 18px;
    font-weight: 500;
    line-height: 140%;
    color: var(--text-secondary, #555);
    margin: 0;
}

.testimonial-card--quote {
    font-size: 16px;
    font-weight: 500;
    line-height: 140%;
    margin: 0;
}

/* Same as .people-archive--card--link */
.testimonial-card--link {
    color: var(--blue-main);
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
}

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

@media (max-width: 576px) {
    .testimonial-card--inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .testimonial-card--logo-area {
        width: 100%;
        aspect-ratio: 2/1;
    }
    .testimonial-card--subtitle {
        display: none;
    }
}

/* Home > News Grid */

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

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

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

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

}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.projects-post--content > p {
    margin-bottom: 1.2em;
}

.projects-post--content > p:last-child {
    margin-bottom: 0;
}

/* People profile: the bio sits in its own wrapper, same paragraph spacing */
.people-post--body > p {
    margin-bottom: 1.2em;
}

.people-post--body > p:last-child {
    margin-bottom: 0;
}

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

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

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

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

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

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

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

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

.projects-post--meta-value {
    display: block;
}

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

/* PEOPLE Single Post */
.people-post--container {
    column-gap: 40px;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto 1fr;
}

.people-post--photo-wrapper {
    grid-column: 1 / 5;
    grid-row: 1;
}

.people-post--container .projects-post--sidebar {
    grid-column: 1 / 5;
    grid-row: 2;
    align-self: start;
}

.people-post--container .projects-post--content {
    grid-column: 5 / 12;
    grid-row: 1 / 3;
}

.people-post--photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: top;
    border-radius: 8px;
}

.people-post--header {
    display: flex;
    flex-flow: column;
    gap: 8px;
    margin-bottom: 32px;
}

.people-post--header h1 {
    font-size: 56px;
    font-weight: 700;
    line-height: 70px;
    letter-spacing: -1px;
    margin: 0;
}

.people-post--job-title {
    font-size: 20px;
    font-weight: 500;
    line-height: 140%;
    margin: 0;
    opacity: 0.7;
}

@media (max-width: 576px) {
    .people-post--container {
        display: flex;
        flex-flow: column;
    }
    .people-post--photo-wrapper {
        order: 1;
        width: 100%;
    }
    /* Order on phones: photo > name > subtitle > tag > metadata > body > related thesis proposals.
       The text column dissolves (display: contents) so its parts can be interleaved with the metadata. */
    .people-post--container .projects-post--content {
        display: contents;
    }
    .people-post--container .people-post--header {
        order: 2;
    }
    .people-post--container .projects-post--sidebar {
        order: 3;
        margin-bottom: 32px;
    }
    .people-post--container .people-post--body {
        order: 4;
    }
    .people-post--container .thesis-related {
        order: 5;
    }
    .people-post--header h1 {
        font-size: 36px;
        line-height: 44px;
    }
}
/* People post — social icons */
.people-post--socials {
    display: flex;
    flex-flow: column;
    gap: 8px;
}

.people-post--socials--icons {
    display: flex;
    flex-flow: row;
    gap: 12px;
}

.people-post--social-icon {
    display: flex;
    align-items: center;
    color: var(--antlab-primary);
    transition: opacity 0.2s ease;
}

.people-post--social-icon:hover {
    opacity: 0.7;
}

.people-post--social-icon svg {
    width: 28px;
    height: 28px;
}

.people-post--inline-link {
    color: var(--antlab-primary);
    font-weight: 600;
    font-size: 16px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.people-post--inline-link:hover {
    opacity: 0.75;
}

/* The global mailto: rule adds an envelope icon and drops the underline;
   on the profile the email link must look like the other links in the sidebar. */
a.people-post--inline-link[href^="mailto:"] {
    display: inline;
    font-size: 16px;
    font-weight: 600;
    color: var(--antlab-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

a.people-post--inline-link[href^="mailto:"]::after {
    content: none;
}

a.people-post--inline-link[href^="mailto:"]:hover {
    color: var(--antlab-primary);
    opacity: 0.75;
    text-decoration: underline;
    text-decoration-color: currentColor;
}

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

/* No filters to show: do not leave an empty box (and its gap) above the list */

.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--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 a:has(img) {
    display: block;
    width: 100%;
}

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

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

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

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

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

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

/* Per-category group */
.people-archive--group {
    margin-top: 56px;
    padding-left: var(--padding-desktop);
    padding-right: var(--padding-desktop);
    max-width: var(--max-width-desktop);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.people-archive--group--header {
    margin-bottom: 24px;
}

.people-archive--group--title {
    font-size: 28px;
    font-weight: 700;
    line-height: 110%;
    margin: 0 0 8px 0;
}

.people-archive--group--subtitle {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-secondary, #555);
    margin: 0;
}

.people-archive--carousel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 8px;
}

.people-archive--carousel .people-archive--card {
    grid-column: unset;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .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='%2393143B'/%3e%3c/svg%3e");
        background-size: contain;
        background-repeat: no-repeat;
        margin-bottom: -1px; /* Slight adjustment to align with text */

    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .section-supertitle{
        font-size: 14px;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    /* Shared back-link / title styles (People, Projects, News) */
    .news-post--title-section--backlink {
        grid-column: span 1;
    }

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

    /* Projects Archive */
    .projects-archive--layout {
        gap: 24px;
        margin-top: 24px;
        margin-bottom: 64px;
    }

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

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

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

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

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

}

@media (max-width: 576px) {
    .branding-bar--container,
    .nav--container,
    .mobile-nav-links > .menu-item {
        padding-right: var(--padding-mobile);
        padding-left: var(--padding-mobile);
    }
	
	.people-archive--carousel {
        grid-template-columns: repeat(2, 1fr);
    }

    .people-archive--group {
        padding-left: var(--padding-mobile);
        padding-right: var(--padding-mobile);
    }

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

/* Homepage research topics: compact cards on phones (wide and short instead of big squares) */
@media (max-width: 576px) {
    .is-homepage .cards-wrapper-3x1-sq-grid {
        grid-auto-rows: auto;
        gap: 12px;
    }

    .is-homepage .cards-wrapper-3x1-sq-grid .card-square {
        aspect-ratio: 2 / 1;
    }

    .is-homepage .cards-wrapper-3x1-sq-grid .card--bg-img {
        object-position: center 30%;
    }

    .is-homepage .cards-wrapper-3x1-sq-grid .card-link {
        padding: 16px;
    }

    .is-homepage .cards-wrapper-3x1-sq-grid .card-title {
        font-size: 22px;
    }
}

/* Thesis proposal on phones/tablets: title > metadata > abstract > contact button
   (other research pages keep the text first; the contact box is already the last element of the text column) */
@media (max-width: 992px) {
    .thesis-post--container .projects-post--sidebar {
        order: -1;
        margin-bottom: 32px;
    }

    .thesis-post--container .projects-post--content {
        order: 0;
    }
}

/* Project page on phones: image > title > subtitle > body > metadata
   (the People profile puts its metadata before the body; projects keep it last) */
@media (max-width: 576px) {
    .testimonial-post--container .people-post--body {
        order: 3;
    }

    .testimonial-post--container .projects-post--sidebar {
        order: 4;
        margin-top: 32px;
        margin-bottom: 0;
    }
}

/* People page: "Past members" (inline, compact: name + profile link) */
.people-past--list {
    display: flex;
    flex-flow: row wrap;
    gap: 8px 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.people-past--item {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
}

.people-past--name {
    font-size: 16px;
    font-weight: 700;
    line-height: 140%;
}

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

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

.people-past--link svg {
    align-self: center;
}

/* Site logo (header and footer): fixed display height, whatever the size of the uploaded file */
.site-logo {
    display: block;
    height: 44px;
    width: auto;
    max-width: 100%;
}

@media (max-width: 992px) {
    .is-homepage .home--title-section + .home-section {
        padding-top: 24px;
    }
}

/* Long unbroken strings (e.g. web addresses in a preview) must wrap instead of running off the screen */
.testimonial-card--body,
.news--preview--content,
.thesis-row--inner {
    overflow-wrap: anywhere;
}

/* Footer: "where we are" block */
.footer--location {
    grid-column: span 6;
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    gap: 12px;
}

.footer--location > *:not(h3) {
    margin-left: 19px;
}

.footer--location--text {
    font-style: normal;
    font-size: 14px;
    font-weight: 500;
    line-height: 150%;
}

@media (max-width: 992px) {
    .footer--location {
        grid-column: auto;
    }
}

/* Research activity on phones/tablets: title > picture > metadata > body > related thesis proposals
   (the title and picture sit above the columns; the related proposals follow the body inside the text column) */
@media (max-width: 992px) {
    .research-post--container .projects-post--sidebar {
        order: -1;
        margin-bottom: 32px;
    }

    .research-post--container .projects-post--content {
        order: 0;
    }
}

/* ==========================================================================
   Overrides migrated from the Customizer "Additional CSS" (they used to live in the database only,
   so they would have been lost when exporting the theme).
   ========================================================================== */
.full-width-banner--title,
.full-width-banner--description,
.full-width-banner--cta {
    color: white;
}

.card-title {
    color: white;
}

.stats-section--wrapper {
    color: var(--antlab-primary);
}

.stats-section--stat--label {
    color: black;
}