/* ============================================================
   POLYTECHNIQUE MONTRÉAL — GIGL CUSTOM
   NAMESPACED CORPORATE DESIGN SYSTEM
   ============================================================

   This CSS was created from the interpretation of Polytechnique guidelines in the site [Logos et normes graphiques](https://www.polymtl.ca/salle-de-presse/logos-et-normes-graphiques)

   IMPORTANT

   All styles are intentionally scoped to:

       .polymtl-gigl-site

   This prevents the WordPress theme and its own DOM/CSS
   from being affected by this design system.

   Expected page structure:

   <div class="gigl-site">
       ...
   </div>

   ============================================================ */


/* ============================================================
   1. POLYTECHNIQUE MONTRÉAL — OFFICIAL WEB FONTS
   ============================================================ */

/* Giorgio Sans Poly — corporate navigation/light treatment.
   Verified against polymtl.ca: Bold file is declared as weight 100. */
@font-face {
    font-family: "Giorgio Sans Poly";
    src:
        url("/wp-content/uploads/polymtl-fonts/GiorgioSansPoly-Bold-Web.woff2")
        format("woff2");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

/* Giorgio Sans Poly — strong display treatment.
   Verified against polymtl.ca: Heavy file is declared as weight 700. */
@font-face {
    font-family: "Giorgio Sans Poly";
    src:
        url("/wp-content/uploads/polymtl-fonts/GiorgioSansPoly-Heavy-Web.woff2")
        format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Feature Text — editorial / introductory text. */
@font-face {
    font-family: "Feature Text";
    src:
        url("/wp-content/uploads/polymtl-fonts/FeatureText-Regular-Web.woff2")
        format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Inter — body / interface typography. */
@font-face {
    font-family: "Inter";
    src:
        url("/wp-content/uploads/polymtl-fonts/Inter-Regular.woff2")
        format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src:
        url("/wp-content/uploads/polymtl-fonts/Inter-Bold.woff2")
        format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* ============================================================
   2. DESIGN TOKENS
   ============================================================ */

.polymtl-gigl-site {

    /* --------------------------------------------------------
       BRAND COLORS
       -------------------------------------------------------- */

    --polymtl-gigl-poly-red: #ed1c24;
    --polymtl-gigl-poly-orange: #f15a22;
    --polymtl-gigl-poly-green: #25b34b;
    --polymtl-gigl-poly-blue: #00bdf2;

    --polymtl-gigl-poly-white: #ffffff;
    --polymtl-gigl-poly-black: #000000;

    --polymtl-gigl-poly-ink: #1a1a1a;
    --polymtl-gigl-poly-muted: #5c5c5c;
    --polymtl-gigl-poly-border: #d9d9d9;
    --polymtl-gigl-poly-light: #f5f5f5;


    /* --------------------------------------------------------
       BRAND GRADIENT
       -------------------------------------------------------- */

    --polymtl-gigl-poly-gradient:
        linear-gradient(
            90deg,
            var(--polymtl-gigl-poly-red) 0%,
            var(--polymtl-gigl-poly-orange) 33.33%,
            var(--polymtl-gigl-poly-green) 66.66%,
            var(--polymtl-gigl-poly-blue) 100%
        );

    --polymtl-gigl-poly-gradient-vertical:
        linear-gradient(
            180deg,
            var(--polymtl-gigl-poly-red) 0%,
            var(--polymtl-gigl-poly-orange) 33.33%,
            var(--polymtl-gigl-poly-green) 66.66%,
            var(--polymtl-gigl-poly-blue) 100%
        );


    /* --------------------------------------------------------
       TYPOGRAPHY
       -------------------------------------------------------- */

--polymtl-gigl-font-display:
    "Giorgio Sans Poly",
    "Arial Narrow",
    "Roboto Condensed",
    sans-serif;

--polymtl-gigl-font-editorial:
    "Feature Text",
    Georgia,
    serif;

--polymtl-gigl-font-body:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;


    /* --------------------------------------------------------
       TYPE SCALE
       -------------------------------------------------------- */

    --polymtl-gigl-text-xs: 0.75rem;
    --polymtl-gigl-text-sm: 0.875rem;
    --polymtl-gigl-text-md: 1rem;
    --polymtl-gigl-text-lg: 1.125rem;
    --polymtl-gigl-text-xl: 1.25rem;
    --polymtl-gigl-text-2xl: 1.5rem;
    --polymtl-gigl-text-3xl: 2rem;
    --polymtl-gigl-text-4xl: 2.75rem;
    --polymtl-gigl-text-5xl: 3.5rem;
    --polymtl-gigl-text-6xl: 4.5rem;


    /* --------------------------------------------------------
       LINE HEIGHT
       -------------------------------------------------------- */

    --polymtl-gigl-leading-tight: 0.95;
    --polymtl-gigl-leading-heading: 1.05;
    --polymtl-gigl-leading-body: 1.55;
    --polymtl-gigl-leading-relaxed: 1.75;


    /* --------------------------------------------------------
       SPACING
       -------------------------------------------------------- */

    --polymtl-gigl-space-1: 0.25rem;
    --polymtl-gigl-space-2: 0.5rem;
    --polymtl-gigl-space-3: 0.75rem;
    --polymtl-gigl-space-4: 1rem;
    --polymtl-gigl-space-5: 1.25rem;
    --polymtl-gigl-space-6: 1.5rem;
    --polymtl-gigl-space-8: 2rem;
    --polymtl-gigl-space-10: 2.5rem;
    --polymtl-gigl-space-12: 3rem;
    --polymtl-gigl-space-16: 4rem;
    --polymtl-gigl-space-20: 5rem;
    --polymtl-gigl-space-24: 6rem;
    --polymtl-gigl-space-32: 8rem;


    /* --------------------------------------------------------
       LAYOUT
       -------------------------------------------------------- */

    --polymtl-gigl-content-width: 1200px;
    --polymtl-gigl-content-width-wide: 1440px;
    --polymtl-gigl-reading-width: 720px;

    --polymtl-gigl-gutter:
        clamp(
            1.25rem,
            4vw,
            4rem
        );


    /* --------------------------------------------------------
       CORNERS
       -------------------------------------------------------- */

    --polymtl-gigl-radius-sm: 2px;
    --polymtl-gigl-radius-md: 4px;
    --polymtl-gigl-radius-lg: 8px;
    --polymtl-gigl-radius-pill: 999px;


    /* --------------------------------------------------------
       BORDERS / SHADOWS
       -------------------------------------------------------- */

    --polymtl-gigl-border-thin:
        1px solid var(--polymtl-gigl-poly-border);

    --polymtl-gigl-shadow-sm:
        0 2px 8px rgb(0 0 0 / 8%);

    --polymtl-gigl-shadow-md:
        0 8px 24px rgb(0 0 0 / 10%);


    /* --------------------------------------------------------
       MOTION
       -------------------------------------------------------- */

    --polymtl-gigl-ease-standard:
        cubic-bezier(0.2, 0, 0, 1);

    --polymtl-gigl-transition-fast:
        160ms var(--polymtl-gigl-ease-standard);

    --polymtl-gigl-transition:
        240ms var(--polymtl-gigl-ease-standard);
}


/* ============================================================
   3. LOCAL RESET
   ============================================================ */

/*
   IMPORTANT:

   We deliberately DO NOT reset the WordPress document globally.

   Instead, everything is scoped to .polymtl-gigl-site.
*/

.polymtl-gigl-site,
.polymtl-gigl-site *,
.polymtl-gigl-site *::before,
.polymtl-gigl-site *::after {
    box-sizing: border-box;
}


.polymtl-gigl-site {
    margin: 0;

    background: var(--polymtl-gigl-poly-white);
    color: var(--polymtl-gigl-poly-ink);

    font-family: var(--polymtl-gigl-font-body);
    font-size: var(--polymtl-gigl-text-md);
    line-height: var(--polymtl-gigl-leading-body);

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


.polymtl-gigl-site img,
.polymtl-gigl-site svg,
.polymtl-gigl-site video {
    display: block;
    max-width: 100%;
}


.polymtl-gigl-site button,
.polymtl-gigl-site input,
.polymtl-gigl-site textarea,
.polymtl-gigl-site select {
    font: inherit;
}


.polymtl-gigl-site button {
    cursor: pointer;
}


.polymtl-gigl-site a {
    color: inherit;
}


/* ============================================================
   4. ACCESSIBILITY
   ============================================================ */

.polymtl-gigl-site :focus-visible {
    outline:
        3px solid var(--polymtl-gigl-poly-blue);

    outline-offset: 4px;
}


.polymtl-gigl-site ::selection {
    background: var(--polymtl-gigl-poly-red);
    color: white;
}


/* ============================================================
   5. CONTAINER SYSTEM
   ============================================================ */

.gigl-container {
    width: min(
        calc(100% - (var(--polymtl-gigl-gutter) * 2)),
        var(--polymtl-gigl-content-width)
    );

    margin-inline: auto;
}


.gigl-container--wide {
    width: min(
        calc(100% - (var(--polymtl-gigl-gutter) * 2)),
        var(--polymtl-gigl-content-width-wide)
    );

    margin-inline: auto;
}


.gigl-container--reading {
    width: min(
        calc(100% - (var(--polymtl-gigl-gutter) * 2)),
        var(--polymtl-gigl-reading-width)
    );

    margin-inline: auto;
}


/* ============================================================
   6. BRAND COLOR UTILITIES
   ============================================================ */

.gigl-bg-white {
    background: var(--polymtl-gigl-poly-white);
}

.gigl-bg-red {
    background: var(--polymtl-gigl-poly-red);
}

.gigl-bg-orange {
    background: var(--polymtl-gigl-poly-orange);
}

.gigl-bg-green {
    background: var(--polymtl-gigl-poly-green);
}

.gigl-bg-blue {
    background: var(--polymtl-gigl-poly-blue);
}

.gigl-bg-black {
    background: var(--polymtl-gigl-poly-black);
}


.gigl-text-red {
    color: var(--polymtl-gigl-poly-red);
}

.gigl-text-orange {
    color: var(--polymtl-gigl-poly-orange);
}

.gigl-text-green {
    color: var(--polymtl-gigl-poly-green);
}

.gigl-text-blue {
    color: var(--polymtl-gigl-poly-blue);
}

.gigl-text-white {
    color: white;
}


/* ============================================================
   7. TYPOGRAPHY
   ============================================================ */

.polymtl-gigl-site h1,
.polymtl-gigl-site h2,
.polymtl-gigl-site h3,
.polymtl-gigl-site h4,
.gigl-display {
    margin-top: 0;

    font-family: var(--polymtl-gigl-font-display);
    font-weight: 700;

    line-height: var(--polymtl-gigl-leading-heading);

    color: var(--polymtl-gigl-poly-black);
}


.polymtl-gigl-site h1,
.gigl-display--xl {
    font-size: clamp(
        2.75rem,
        7vw,
        5.5rem
    );

    letter-spacing: -0.025em;
    text-transform: uppercase;
}


.polymtl-gigl-site h2,
.gigl-display--lg {
    font-size: clamp(
        2.25rem,
        5vw,
        4rem
    );

    letter-spacing: -0.02em;
    text-transform: uppercase;
}


.polymtl-gigl-site h3,
.gigl-display--md {
    font-size: clamp(
        1.75rem,
        3vw,
        2.75rem
    );

    text-transform: uppercase;
}


.polymtl-gigl-site h4,
.gigl-display--sm {
    font-size: clamp(
        1.4rem,
        2vw,
        2rem
    );

    text-transform: uppercase;
}


/* ------------------------------------------------------------
   Editorial / Feature
   ------------------------------------------------------------ */

.gigl-feature {
    font-family: var(--polymtl-gigl-font-editorial);
}


.gigl-feature--intro {
    font-family: var(--polymtl-gigl-font-editorial);

    font-size: clamp(
        1.3rem,
        2vw,
        1.75rem
    );

    line-height: 1.35;
}


/* ------------------------------------------------------------
   Body
   ------------------------------------------------------------ */

.gigl-body {
    font-family: var(--polymtl-gigl-font-body);
}


.gigl-lead {
    max-width: 760px;

    font-size: clamp(
        1.125rem,
        2vw,
        1.35rem
    );

    line-height: 1.5;
}


/* ------------------------------------------------------------
   Eyebrows / labels
   ------------------------------------------------------------ */

.gigl-eyebrow {
    margin-bottom: var(--polymtl-gigl-space-4);

    font-family: var(--polymtl-gigl-font-body);
    font-size: var(--polymtl-gigl-text-sm);
    font-weight: 700;

    letter-spacing: 0.12em;
    text-transform: uppercase;

    color: var(--polymtl-gigl-poly-red);
}


/* ============================================================
   8. HEADLINE ACCENT
   ============================================================ */

.gigl-heading-accent {
    position: relative;

    padding-left: 1rem;
}


.gigl-heading-accent::before {
    content: "";

    position: absolute;

    inset-block: 0;
    left: 0;

    width: 4px;

    background:
        var(--polymtl-gigl-poly-gradient-vertical);
}


/* ============================================================
   9. BRAND BANDS
   ============================================================ */

.gigl-poly-band {
    background: var(--polymtl-gigl-poly-gradient);
}


.gigl-poly-band--top {
    width: 100%;
    height: 8px;
}


.gigl-poly-band--bottom {
    width: 100%;
    height: 8px;
}


.gigl-poly-band--left {
    width: 8px;
    height: 100%;
}


/* ------------------------------------------------------------
   Header
   ------------------------------------------------------------ */

.gigl-poly-header {
    border-top: 8px solid transparent;

    border-image:
        var(--polymtl-gigl-poly-gradient)
        1;
}


/* ------------------------------------------------------------
   Image-associated band
   ------------------------------------------------------------ */

.gigl-image-band {
    position: relative;
}


.gigl-image-band::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 8px;

    background: var(--polymtl-gigl-poly-gradient);
}


/* ------------------------------------------------------------
   Wide graphic band
   ------------------------------------------------------------ */

.gigl-poly-band--wide {
    min-height: 220px;

    display: flex;
    align-items: center;

    padding-block: var(--polymtl-gigl-space-16);

    background: var(--polymtl-gigl-poly-gradient);

    color: white;
}


/* ------------------------------------------------------------
   Vertical version
   ------------------------------------------------------------ */

.gigl-poly-band--vertical {
    background:
        var(--polymtl-gigl-poly-gradient-vertical);
}


/* ============================================================
   10. HEADER / NAVIGATION
   ============================================================ */

.polymtl-gigl-site-header {
    position: relative;

    background: var(--polymtl-gigl-poly-white);
    color: var(--polymtl-gigl-poly-black);

    border-bottom:
        1px solid var(--polymtl-gigl-poly-border);
}


.polymtl-gigl-site-header__inner {
    min-height: 88px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--polymtl-gigl-space-8);
}


/* ------------------------------------------------------------
   Logo
   ------------------------------------------------------------ */

.polymtl-gigl-site-logo {
    display: inline-flex;
    align-items: center;

    min-height: 44px;

    padding: var(--polymtl-gigl-space-4);
}


.polymtl-gigl-site-logo--protected {
    padding: 1em;
}


/* ------------------------------------------------------------
   Navigation
   ------------------------------------------------------------ */

.polymtl-gigl-site-nav {
    display: flex;
    align-items: center;

    gap: var(--polymtl-gigl-space-8);
}


.polymtl-gigl-site-nav a {
    position: relative;

    padding-block: var(--polymtl-gigl-space-3);

    font-size: var(--polymtl-gigl-text-sm);
    font-weight: 600;

    text-decoration: none;
}


.polymtl-gigl-site-nav a::after {
    content: "";

    position: absolute;

    left: 0;
    right: 100%;
    bottom: 0;

    height: 2px;

    background: var(--polymtl-gigl-poly-red);

    transition:
        right var(--polymtl-gigl-transition);
}


.polymtl-gigl-site-nav a:hover::after,
.polymtl-gigl-site-nav a[aria-current="page"]::after {
    right: 0;
}


/* ============================================================
   11. HERO
   ============================================================ */

.gigl-hero {
    position: relative;

    padding-block:
        clamp(5rem, 10vw, 9rem);

    overflow: hidden;

    background: var(--polymtl-gigl-poly-white);
}


.gigl-hero__content {
    position: relative;
    z-index: 1;
}


.gigl-hero__title {
    max-width: 1100px;

    margin-bottom: var(--polymtl-gigl-space-8);
}


.gigl-hero__description {
    max-width: 720px;

    font-size: clamp(
        1.1rem,
        2vw,
        1.4rem
    );
}


/* ------------------------------------------------------------
   Branded hero
   ------------------------------------------------------------ */

.gigl-hero--brand {
    background: var(--polymtl-gigl-poly-gradient);

    color: white;
}


.gigl-hero--brand h1,
.gigl-hero--brand h2 {
    color: white;
}


/* ============================================================
   12. BUTTONS
   ============================================================ */

.gigl-btn {
    min-height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: var(--polymtl-gigl-space-3);

    padding:
        0.75rem
        1.25rem;

    border:
        2px solid
        transparent;

    border-radius:
        var(--polymtl-gigl-radius-sm);

    font-family: var(--polymtl-gigl-font-body);
    font-size: var(--polymtl-gigl-text-sm);
    font-weight: 700;

    text-decoration: none;

    transition:
        background-color var(--polymtl-gigl-transition-fast),
        color var(--polymtl-gigl-transition-fast),
        border-color var(--polymtl-gigl-transition-fast),
        transform var(--polymtl-gigl-transition-fast);
}


.gigl-btn:hover {
    transform: translateY(-1px);
}


/* Primary */

.gigl-btn--primary {
    background: var(--polymtl-gigl-poly-red);
    color: white;
}


.gigl-btn--primary:hover {
    background: #a90d27;
}


/* Secondary */

.gigl-btn--secondary {
    background: var(--polymtl-gigl-poly-black);
    color: white;
}


.gigl-btn--secondary:hover {
    background: #333;
}


/* Outline */

.gigl-btn--outline {
    background: transparent;

    border-color: var(--polymtl-gigl-poly-black);

    color: var(--polymtl-gigl-poly-black);
}


.gigl-btn--outline:hover {
    background: var(--polymtl-gigl-poly-black);
    color: white;
}


/* White */

.gigl-btn--white {
    background: white;
    color: var(--polymtl-gigl-poly-black);
}


.gigl-btn--white:hover {
    background: var(--polymtl-gigl-poly-light);
}


/* ============================================================
   13. LINKS
   ============================================================ */

.gigl-content a:not(.gigl-btn) {
    color: var(--polymtl-gigl-poly-red);

    text-decoration: underline;

    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}


.gigl-content a:not(.gigl-btn):hover {
    color: var(--polymtl-gigl-poly-blue);
}


/* ============================================================
   14. CARDS
   ============================================================ */

.gigl-card {
    background: white;

    border:
        1px solid
        var(--polymtl-gigl-poly-border);

    border-radius:
        var(--polymtl-gigl-radius-md);

    overflow: hidden;

    transition:
        box-shadow var(--polymtl-gigl-transition),
        transform var(--polymtl-gigl-transition);
}


.gigl-card:hover {
    transform: translateY(-3px);

    box-shadow:
        var(--polymtl-gigl-shadow-md);
}


.gigl-card__image {
    aspect-ratio: 16 / 9;

    width: 100%;

    object-fit: cover;
}


.gigl-card__body {
    padding: var(--polymtl-gigl-space-8);
}


.gigl-card__title {
    margin-bottom: var(--polymtl-gigl-space-4);
}


.gigl-card__meta {
    margin-bottom: var(--polymtl-gigl-space-3);

    font-size: var(--polymtl-gigl-text-xs);
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: var(--polymtl-gigl-poly-green);
}


/* ------------------------------------------------------------
   Branded card
   ------------------------------------------------------------ */

.gigl-card--accent {
    border-top:
        6px solid transparent;

    border-image:
        var(--polymtl-gigl-poly-gradient)
        1;
}


/* ============================================================
   15. CONTENT SECTIONS
   ============================================================ */

.gigl-section {
    padding-block:
        clamp(4rem, 8vw, 8rem);
}


.gigl-section--compact {
    padding-block:
        clamp(2.5rem, 5vw, 4rem);
}


.gigl-section--light {
    background: var(--polymtl-gigl-poly-light);
}


.gigl-section--dark {
    background: var(--polymtl-gigl-poly-black);

    color: white;
}


.gigl-section--dark h1,
.gigl-section--dark h2,
.gigl-section--dark h3,
.gigl-section--dark h4 {
    color: white;
}


/* ============================================================
   16. GRID
   ============================================================ */

.gigl-grid {
    display: grid;

    gap: var(--polymtl-gigl-space-8);
}


.gigl-grid--2 {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}


.gigl-grid--3 {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}


.gigl-grid--4 {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}


/* ============================================================
   17. IMAGE SYSTEM
   ============================================================ */

.gigl-image {
    width: 100%;

    object-fit: cover;
}


.gigl-image--16-9 {
    aspect-ratio: 16 / 9;
}


.gigl-image--4-3 {
    aspect-ratio: 4 / 3;
}


.gigl-image--square {
    aspect-ratio: 1;
}


.gigl-image--brand {
    position: relative;
}


.gigl-image--brand img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ============================================================
   18. FEATURE / EDITORIAL INTRO
   ============================================================ */

.gigl-intro {
    max-width: 900px;

    margin-bottom: var(--polymtl-gigl-space-12);

    font-family: var(--polymtl-gigl-font-editorial);

    font-size: clamp(
        1.5rem,
        3vw,
        2.25rem
    );

    line-height: 1.25;
}


/* ============================================================
   19. QUOTES
   ============================================================ */

.polymtl-gigl-site blockquote {
    margin:
        var(--polymtl-gigl-space-12)
        0;

    padding-left: var(--polymtl-gigl-space-8);

    border-left:
        5px solid
        var(--polymtl-gigl-poly-red);

    font-family: var(--polymtl-gigl-font-editorial);

    font-size: clamp(
        1.5rem,
        3vw,
        2.25rem
    );

    line-height: 1.3;
}


/* ============================================================
   20. FORMS
   ============================================================ */

.gigl-form-group {
    margin-bottom: var(--polymtl-gigl-space-6);
}


.gigl-form-label {
    display: block;

    margin-bottom: var(--polymtl-gigl-space-2);

    font-size: var(--polymtl-gigl-text-sm);
    font-weight: 700;
}


.gigl-form-control {
    width: 100%;

    min-height: 48px;

    padding:
        0.75rem
        1rem;

    border:
        1px solid
        var(--polymtl-gigl-poly-border);

    border-radius:
        var(--polymtl-gigl-radius-sm);

    background: white;
    color: var(--polymtl-gigl-poly-black);

    transition:
        border-color var(--polymtl-gigl-transition-fast),
        box-shadow var(--polymtl-gigl-transition-fast);
}


.gigl-form-control:hover {
    border-color: var(--polymtl-gigl-poly-black);
}


.gigl-form-control:focus {
    outline: none;

    border-color: var(--polymtl-gigl-poly-blue);

    box-shadow:
        0 0 0 3px
        rgb(0 114 206 / 20%);
}


/* ============================================================
   21. TABLES
   ============================================================ */

.gigl-table-wrapper {
    width: 100%;

    overflow-x: auto;
}


.polymtl-gigl-site table {
    width: 100%;

    border-collapse: collapse;

    font-size: var(--polymtl-gigl-text-sm);
}


.polymtl-gigl-site th {
    padding: var(--polymtl-gigl-space-4);

    background: var(--polymtl-gigl-poly-black);
    color: white;

    font-weight: 700;

    text-align: left;
}


.polymtl-gigl-site td {
    padding: var(--polymtl-gigl-space-4);

    border-bottom:
        1px solid
        var(--polymtl-gigl-poly-border);
}


.polymtl-gigl-site tbody tr:hover {
    background: var(--polymtl-gigl-poly-light);
}


/* ============================================================
   22. ALERTS
   ============================================================ */

.gigl-alert {
    padding: var(--polymtl-gigl-space-6);

    border-left: 5px solid;

    background: var(--polymtl-gigl-poly-light);
}


.gigl-alert--red {
    border-color: var(--polymtl-gigl-poly-red);
}


.gigl-alert--orange {
    border-color: var(--polymtl-gigl-poly-orange);
}


.gigl-alert--green {
    border-color: var(--polymtl-gigl-poly-green);
}


.gigl-alert--blue {
    border-color: var(--polymtl-gigl-poly-blue);
}


/* ============================================================
   23. FOOTER
   ============================================================ */

.polymtl-gigl-site-footer {
    position: relative;

    padding-block:
        var(--polymtl-gigl-space-16);

    background: var(--polymtl-gigl-poly-black);

    color: white;
}


/* ------------------------------------------------------------
   Branded color strip
   ------------------------------------------------------------ */

.polymtl-gigl-site-footer::before {
    content: "";

    display: block;

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 8px;

    background: var(--polymtl-gigl-poly-gradient);
}


.polymtl-gigl-site-footer a {
    color: white;
}


.polymtl-gigl-site-footer a:hover {
    color: var(--polymtl-gigl-poly-orange);
}


/* ============================================================
   24. BRAND SEAL
   ============================================================ */

.gigl-brand-seal {
    display: block;

    max-height: 80px;

    width: auto;

    margin-left: auto;
}


.gigl-brand-seal--small {
    max-height: 48px;
}


/* ============================================================
   25. COLOR-BAND UTILITIES
   ============================================================ */

.gigl-band-red {
    background: var(--polymtl-gigl-poly-red);
}


.gigl-band-orange {
    background: var(--polymtl-gigl-poly-orange);
}


.gigl-band-green {
    background: var(--polymtl-gigl-poly-green);
}


.gigl-band-blue {
    background: var(--polymtl-gigl-poly-blue);
}


/* ------------------------------------------------------------
   Horizontal brand band
   ------------------------------------------------------------ */

.gigl-brand-stripe {
    width: 100%;
    height: 8px;

    background: var(--polymtl-gigl-poly-gradient);
}


/* ------------------------------------------------------------
   Vertical brand band
   ------------------------------------------------------------ */

.gigl-brand-stripe--vertical {
    width: 8px;
    height: 100vh;

    background:
        var(--polymtl-gigl-poly-gradient-vertical);
}


/* ============================================================
   26. COLOR BLOCKS
   ============================================================ */

.gigl-color-block {
    padding: var(--polymtl-gigl-space-12);

    color: white;
}


.gigl-color-block--red {
    background: var(--polymtl-gigl-poly-red);
}


.gigl-color-block--orange {
    background: var(--polymtl-gigl-poly-orange);
}


.gigl-color-block--green {
    background: var(--polymtl-gigl-poly-green);
}


.gigl-color-block--blue {
    background: var(--polymtl-gigl-poly-blue);
}


/* ============================================================
   27. RESPONSIVE BEHAVIOUR
   ============================================================ */

@media (max-width: 900px) {

    .polymtl-gigl-site-nav {
        gap: var(--polymtl-gigl-space-4);
    }

    .gigl-grid--4 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .gigl-grid--3 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 700px) {

    .polymtl-gigl-site {
        --polymtl-gigl-gutter: 1.25rem;
    }


    .polymtl-gigl-site-header__inner {
        min-height: 72px;
    }


    .polymtl-gigl-site-nav {
        display: none;
    }


    .gigl-grid--2,
    .gigl-grid--3,
    .gigl-grid--4 {
        grid-template-columns: 1fr;
    }


    .gigl-poly-band--wide {
        min-height: 180px;
    }


    .gigl-section {
        padding-block: 4rem;
    }
}


/* ============================================================
   28. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .polymtl-gigl-site *,
    .polymtl-gigl-site *::before,
    .polymtl-gigl-site *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* ============================================================
   29. PRINT
   ============================================================ */

@media print {

    .polymtl-gigl-site {
        color: black;
        background: white;
    }

    .polymtl-gigl-site .polymtl-gigl-site-header,
    .polymtl-gigl-site .polymtl-gigl-site-footer,
    .polymtl-gigl-site .polymtl-gigl-site-nav,
    .polymtl-gigl-site .gigl-btn {
        display: none !important;
    }

    .polymtl-gigl-site a {
        color: black !important;
        text-decoration: none !important;
    }

    .polymtl-gigl-site .gigl-section {
        padding-block: 1rem;
    }
}