/*
 * Graduate Trainee Program page (template-graduate-trainee.php).
 *
 * Standalone on purpose, like csr.css: main.scss / main.css are untouched.
 * Loaded only on this template (see inc/enqueue.php). Palette and type come
 * from the theme: #52283B brown, #8EC73F green, #FDC533 yellow, #E63323 red,
 * MarkPro faces (declared in main.css).
 */

:root {
    --grad-brown: #52283B;
    --grad-brown-dark: #3a1c2a;
    --grad-green: #8EC73F;
    --grad-yellow: #FDC533;
    --grad-red: #E63323;
    --grad-sand: #F0EDE8;
    --grad-body: #4A4A4A;
}

.grad {
    color: var(--grad-body);
    font-size: 17px;
    line-height: 1.7;
}

.grad p {
    margin-bottom: 18px;
}

.grad_eyebrow {
    display: inline-block;
    font-family: 'MarkProBold', Helvetica, sans-serif;
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--grad-red);
    margin-bottom: 14px;
}

.grad_eyebrow--light {
    color: var(--grad-yellow);
}

.grad_title,
.grad_heading {
    font-family: 'MarkProBold', Helvetica, sans-serif;
    font-weight: normal;
    color: var(--grad-brown);
    line-height: 1.15;
}

.grad_title {
    font-size: clamp(2rem, 4vw, 3.2rem);
    margin-bottom: 24px;
}

.grad_heading {
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    margin-bottom: 28px;
}

/* The first editor paragraph is the lead. */
.grad_intro_body > p:first-child {
    font-size: 1.2em;
    color: #222;
}

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

.grad_intro {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 70px;
    align-items: center;
}

.grad_pills,
.grad_teams {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 26px 0 0;
    padding: 0;
}

.grad_pills li,
.grad_teams li {
    font-size: 14px;
    line-height: 1.3;
    padding: 8px 16px;
    border-radius: 100px;
    border: 1px solid rgba(82, 40, 59, .25);
    color: var(--grad-brown);
    background: #fff;
}

.grad_intro_media {
    position: relative;
    padding: 0 0 30px 30px;
}

/* Offset colour block behind the photo. */
.grad_intro_media::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 75%;
    height: 70%;
    background: var(--grad-yellow);
    border-radius: 24px;
}

.grad_intro_frame {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
}

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

.grad_intro_chip {
    position: absolute;
    right: -20px;
    bottom: 70px;
    background: var(--grad-brown);
    color: #fff;
    padding: 16px 22px;
    border-radius: 16px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
    line-height: 1.35;
    max-width: 220px;
}

.grad_intro_chip strong {
    display: block;
    font-family: 'MarkProBold', Helvetica, sans-serif;
    font-weight: normal;
    color: var(--grad-yellow);
    font-size: 18px;
}

.grad_intro_chip span {
    font-size: 14px;
}

/* ---------------------------------------------------------- Highlights --- */

.grad_highlights {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 80px 0 0;
    padding: 0;
    border-top: 1px solid rgba(82, 40, 59, .15);
    border-bottom: 1px solid rgba(82, 40, 59, .15);
}

.grad_highlight {
    padding: 34px 30px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.grad_highlight + .grad_highlight {
    border-left: 1px solid rgba(82, 40, 59, .15);
}

.grad_highlight_value {
    font-family: 'MarkProBold', Helvetica, sans-serif;
    font-size: 3rem;
    line-height: 1;
    color: var(--grad-brown);
}

.grad_highlight_value small {
    font-size: .4em;
    color: var(--grad-red);
    margin-left: 4px;
}

.grad_highlight_label {
    font-size: 15px;
}

/* --------------------------------------------------------------- Split --- */

.grad_split {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 24px;
    margin-top: 80px;
}

.grad_split--single {
    grid-template-columns: 1fr;
}

.grad_split_card {
    border-radius: 24px;
    padding: 44px;
}

.grad_split_card h3 {
    font-family: 'MarkProBold', Helvetica, sans-serif;
    font-weight: normal;
    font-size: 1.5em;
    margin-bottom: 16px;
}

.grad_split_card p:last-child,
.grad_about_body > :last-child {
    margin-bottom: 0;
}

.grad_split_card--brown {
    background: var(--grad-brown);
    color: rgba(255, 255, 255, .88);
}

.grad_split_card--brown h3 {
    color: var(--grad-yellow);
}

.grad_split_card--green {
    background: var(--grad-sand);
    border-top: 6px solid var(--grad-yellow);
}

.grad_split_card--green h3 {
    color: var(--grad-brown);
}

/* --------------------------------------------------------------- About --- */

.grad_about {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 70px;
    margin-top: 100px;
}

.grad_about_heading .grad_heading {
    margin-bottom: 0;
}

.grad_teams li {
    background: var(--grad-sand);
    border-color: transparent;
}

/* ---------------------------------------------------------- Objectives --- */

.grad_objectives {
    margin-top: 100px;
}

.grad_objectives_grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    margin: 0;
    padding: 0;
}

/* 3 across on top, 2 wider cards below. */
.grad_objective {
    grid-column: span 2;
    background: #fff;
    border: 1px solid rgba(82, 40, 59, .12);
    border-radius: 20px;
    padding: 30px;
    transition: transform .25s ease, box-shadow .25s ease;
}

/* Last row of two: split it in halves. Last row of one: full width. */
.grad_objective:nth-child(3n+1):nth-last-child(2),
.grad_objective:nth-child(3n+1):nth-last-child(2) + .grad_objective {
    grid-column: span 3;
}

.grad_objective:nth-child(3n+1):last-child {
    grid-column: 1 / -1;
}

.grad_objective:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 30px rgba(82, 40, 59, .1);
}

.grad_objective_num {
    display: block;
    font-family: 'MarkProBold', Helvetica, sans-serif;
    font-size: 2.2rem;
    line-height: 1;
    color: var(--grad-brown);
    margin-bottom: 16px;
}

.grad_objective p {
    margin: 0;
}

/* -------------------------------------------------------- Testimonials --- */

.grad_voices {
    position: relative;
    margin-top: 110px;
    padding: 100px 0 110px;
    background: var(--grad-brown);
    overflow: hidden;
}

/* Oversized quote mark as a watermark. */
.grad_voices::before {
    content: '\201C';
    position: absolute;
    top: -120px;
    right: 4%;
    font-family: Georgia, serif;
    font-size: 520px;
    line-height: 1;
    color: rgba(255, 255, 255, .05);
    pointer-events: none;
}

.grad_voices_head .grad_heading {
    color: #fff;
    margin-bottom: 50px;
}

/*
 * Mosaic: the lead quote (the trainee who went full-time) is a tall yellow
 * card on the left; the other two stack on the right, staggered and tilted
 * slightly so the band reads like notes pinned to a board.
 */
.grad_voices_grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    grid-template-rows: auto auto;
    gap: 30px 40px;
}

.grad_voices_grid--single {
    grid-template-columns: 1fr;
    max-width: 900px;
}

.grad_voices_grid--single .grad_voice--lead {
    grid-row: auto;
}

.grad_voice {
    position: relative;
    margin: 0;
    border-radius: 24px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    box-shadow: 0 24px 40px rgba(0, 0, 0, .22);
    transition: transform .3s ease;
}

.grad_voice blockquote {
    margin: 0;
    padding: 0;
    border: 0;
}

.grad_voice blockquote p {
    margin: 0;
}

.grad_voice--lead {
    grid-row: span 2;
    background: var(--grad-yellow);
    color: var(--grad-brown-dark);
    padding: 56px 50px;
}

.grad_voice--lead blockquote p {
    font-family: 'MarkProBold', Helvetica, sans-serif;
    font-size: clamp(1.4rem, 2.2vw, 1.8rem);
    line-height: 1.35;
}

.grad_voice--a {
    background: #fff;
    color: #2b2b2b;
    transform: rotate(1.2deg);
    margin-top: 30px;
}

.grad_voice--b {
    background:#E5DBD4;
    color: #1f2a10;
    transform: rotate(-1.2deg);
    margin-left: -30px;
}

.grad_voice--a blockquote p,
.grad_voice--b blockquote p {
    font-size: 1.1em;
    line-height: 1.6;
}

.grad_voice:hover {
    transform: rotate(0) translateY(-4px);
}

.grad_voice_badge {
    position: absolute;
    top: -14px;
    right: 30px;
    font-family: 'MarkProBold', Helvetica, sans-serif;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 7px 14px;
    border-radius: 100px;
    background: var(--grad-red);
    color: #fff;
}

.grad_voice figcaption {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
    line-height: 1.4;
}

.grad_voice figcaption strong {
    display: block;
    font-family: 'MarkProBold', Helvetica, sans-serif;
    font-weight: normal;
    font-size: 17px;
}

.grad_voice_avatar {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: 'MarkProBold', Helvetica, sans-serif;
    font-size: 20px;
    background: var(--grad-brown);
    color: #fff;
}

img.grad_voice_avatar {
    object-fit: cover;
}

.grad_voice--lead .grad_voice_avatar {
    width: 64px;
    height: 64px;
    font-size: 26px;
}

/* ------------------------------------------------------------- Closing --- */

.grad_closing_wrap {
    padding-top: 100px;
    padding-bottom: 110px;
    text-align: center;
}

.grad_closing {
    max-width: 920px;
    margin: 0 auto !important;
    text-align: center;
    font-family: 'MarkProBold', Helvetica, sans-serif;
    font-size: clamp(1.3rem, 2.2vw, 1.8rem);
    line-height: 1.45;
    color: var(--grad-brown);
}

.grad_cta {
    display: inline-block;
    margin-top: 36px;
    padding: 16px 34px;
    border-radius: 100px;
    background: var(--grad-brown);
    color: #fff;
    font-family: 'MarkProBold', Helvetica, sans-serif;
    text-decoration: none;
    transition: background .2s ease;
}

.grad_cta:hover,
.grad_cta:focus-visible {
    background: var(--grad-red);
    color: #fff;
}

/* -------------------------------------------------------------- Mobile --- */

@media only screen and (max-width: 1100px) {
    .grad_intro,
    .grad_about {
        gap: 50px;
    }

    /* Two per row; an odd one out takes the full row. */
    .grad_objectives_grid .grad_objective {
        grid-column: span 3;
    }

    .grad_objectives_grid .grad_objective:nth-child(odd):last-child {
        grid-column: 1 / -1;
    }
}

@media only screen and (max-width: 960px) {
    .grad_intro,
    .grad_about,
    .grad_split {
        grid-template-columns: 1fr;
    }

    .grad_intro_media {
        max-width: 520px;
    }

    .grad_intro_chip {
        right: 10px;
    }

    .grad_voices_grid {
        grid-template-columns: 1fr;
    }

    .grad_voice--lead {
        grid-row: auto;
    }

    .grad_voice--a,
    .grad_voice--b {
        margin: 0;
    }
}

@media only screen and (max-width: 768px) {
    .grad {
        font-size: 16px;
    }

    .grad_highlights {
        grid-template-columns: 1fr;
        margin-top: 50px;
    }

    .grad_highlight {
        padding: 22px 0;
    }

    .grad_highlight + .grad_highlight {
        border-left: 0;
        border-top: 1px solid rgba(82, 40, 59, .15);
    }

    .grad_split,
    .grad_about,
    .grad_objectives {
        margin-top: 60px;
    }

    .grad_split_card {
        padding: 30px 24px;
    }

    .grad_objectives_grid {
        grid-template-columns: 1fr;
    }

    .grad_objectives_grid .grad_objective,
    .grad_objectives_grid .grad_objective:nth-child(odd):last-child {
        grid-column: revert-rule;
    }

    .grad_objective{
        padding: 20px;
    }
    .grad_voice--lead blockquote p{
        font-size: clamp(1.2rem, 2.2vw, 1.8rem);
    }

    .grad_highlight_value{
        font-size:1.8rem;
    }

    .grad_voices {
        margin-top: 70px;
        padding: 60px 0 70px;
    }

    .grad_voices::before {
        font-size: 300px;
        top: -60px;
    }

    .grad_voice,
    .grad_voice--lead {
        padding: 34px 24px 28px;
    }
    .grad_voice--lead .grad_voice_avatar{
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .grad_voice--a,
    .grad_voice--b {
        transform: none;
    }

    .grad_closing_wrap {
        padding-top: 60px;
        padding-bottom: 70px;
    }
    .grad_intro_media {
        padding: 0 0 14px 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .grad_objective,
    .grad_voice {
        transition: none;
    }
}