/* Diploma: school card, certification card, diploma scan. */

.diploma-layout {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 50px;
    align-items: start;
}


/* School */

.school-name-wrap { margin-bottom: 28px; }

.school-name {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1;
}

.school-city {
    font-size: 2.3rem;
    color: var(--red);
    margin-left: 8px;
}

.school-link {
    display: block;
    width: 100%;
    height: 100%;
}

.school-photo .media-frame-inner { aspect-ratio: 4/3; }

.school-facts {
    list-style: none;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    font-size: 0.95rem;
    line-height: 1.6;
}

.school-facts strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.15rem;
    text-transform: uppercase;
    margin-bottom: 3px;
}


/* Certification card */

/* An A4 sheet. The body is also a .media-frame-inner, whose line-height of 0 it restores. */
.diploma-card-body {
    aspect-ratio: 1 / var(--a4);
    background: rgb(255 255 255 / 1.5%);
    border: 1px solid rgb(255 255 255 / 8%);
    padding: 36px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    line-height: 1.4;
}

@supports (min-height: 1cqw) {
    /* With container units the A4 ratio becomes a floor instead of a lock: the card keeps its
       proportions when the content fits and grows just enough otherwise, so nothing is cropped
       in any language. Browsers without container units keep the fixed ratio. */
    .diploma-card { container-type: inline-size; }

    .diploma-card-body {
        aspect-ratio: auto;
        min-height: 141.4cqw;
    }
}

.diploma-cert-header {
    border-bottom: 1px solid rgb(var(--red-rgb) / 20%);
    padding-bottom: 18px;
    position: relative;
}

.diploma-cert-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    color: var(--white);
    margin-bottom: 6px;
    line-height: 1.2;
}

.diploma-cert-subtitle {
    font-size: 0.95rem;
    color: var(--red);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.3;
}

.diploma-cert-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 18px;
    flex-grow: 1;
}

.diploma-cert-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.diploma-cert-label {
    font-family: var(--font-display);
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    color: rgb(255 255 255 / 35%);
    text-transform: uppercase;
}

.diploma-cert-text {
    font-size: 0.92rem;
    line-height: 1.5;
    color: rgb(255 255 255 / 65%);
    font-weight: 300;
}

.diploma-skills-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.diploma-skills-list li {
    font-size: 0.9rem;
    line-height: 1.45;
    color: rgb(255 255 255 / 65%);
    padding-left: 14px;
    position: relative;
    font-weight: 300;
}

.diploma-skills-list li::before {
    content: '▪';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--red);
    font-size: 0.6rem;
}

.diploma-cert-footer {
    border-top: 1px solid rgb(255 255 255 / 6%);
    padding-top: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: rgb(255 255 255 / 35%);
}

.diploma-cert-code {
    font-weight: 600;
    color: rgb(255 255 255 / 50%);
}

/* Rubber stamp across the corner of the card. */
.diploma-cert-stamp {
    position: absolute;
    top: -15px;
    right: -25px;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: var(--red);
    border: 3.5px solid var(--red);
    padding: 8px 20px;
    border-radius: 6px;
    transform: rotate(-12deg);
    opacity: 0.95;
    z-index: 20;
    background: var(--bg);
    animation: sketch-wobble var(--sketch-timing);
}


/* Scan */

.diploma-scan {
    margin-top: 60px;
    position: relative;
    padding-top: 40px;
    text-align: center;
}

.diploma-scan-title {
    font-size: 2.2rem;
    color: var(--white);
    margin-bottom: 24px;
    text-transform: uppercase;
}

.diploma-scan-years {
    color: var(--red);
    font-weight: 600;
    margin-left: 15px;
    font-size: 1.8rem;
    vertical-align: middle;
}

.diploma-scan-wrap {
    max-width: 850px;
    margin: 0 auto;
    width: 100%;
}

/* A4 landscape. */
.diploma-scan-frame {
    width: 100%;
    aspect-ratio: var(--a4) / 1;
    background: rgb(255 255 255 / 1.5%);
    border: 1px solid rgb(255 255 255 / 8%);
}

.diploma-scan-inner {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 768px) {
    .diploma-layout { grid-template-columns: 1fr; }
    .diploma-card-body { aspect-ratio: auto; }

    .diploma-cert-code,
    .diploma-cert-authority {
        font-size: 0.875rem;
    }

    /* Phones: the stamp is pulled inside the card and its width reserved from the title, which
       wraps instead of running under it. The overlap with the card border is kept. */
    .diploma-cert-stamp {
        top: -10px;
        right: -8px;
        font-size: 0.9rem;
        padding: 6px 12px;
        border-width: 2.5px;
    }

    /* Width of the tilted stamp plus a guard. */
    .diploma-cert-title { padding-right: 96px; }

    .diploma-scan {
        margin-top: 40px;
        padding-top: 30px;
    }

    .diploma-scan-title {
        font-size: 1.8rem;
        margin-bottom: 16px;
    }
}

@media (max-width: 480px) {
    .diploma-card-body { padding: 22px 18px; }
    .diploma-cert-body { gap: 15px; }
}