/* ==========================================================
   KORNET EXPRESS — CREDENTIALS & CERTIFICATIONS
   FINAL RED + BLUE BRAND VERSION

   FILE LOCATION:
   css/Credentials.css

   IMPORTANT:
   The comments in this file are intentionally detailed.
   In editors such as VS Code, these comments normally appear
   as grey text so each editable area is easy to find later.

   QUICK EDIT MAP:
   01 — BRAND COLOURS
   02 — PAGE SPACING
   03 — MAIN HEADING
   04 — CREDENTIAL GRID
   05 — FLIP CARD SIZE AND SPEED
   06 — CARD FRONT
   07 — CARD BACK + CREDENTIAL IMAGE
   08 — TRUSTED PARTNERS
   09 — IMAGE VIEWER
   10 — MOBILE / TABLET BREAKPOINTS
========================================================== */


/* ==========================================================
   01 — EDIT HERE: KORNET BRAND COLOURS
   ----------------------------------------------------------
   Keep the page visually consistent by editing colours here
   rather than searching through the entire stylesheet.

   Red  : Kornet corporate red
   Blue : Kornet corporate navy / logistics blue

   White and grey are used only as neutral support colours.
========================================================== */

.credentials-page {
    --credentials-red: #c1121f;
    --credentials-red-dark: #940d17;
    --credentials-red-soft: rgba(193, 18, 31, 0.10);

    --credentials-blue: #071d49;
    --credentials-blue-mid: #123d78;
    --credentials-blue-soft: rgba(7, 29, 73, 0.10);

    --credentials-white: #ffffff;
    --credentials-page-bg: #f6f8fb;
    --credentials-surface: #ffffff;

    --credentials-heading: #111827;
    --credentials-text: #374151;
    --credentials-muted: #667085;

    --credentials-line: rgba(7, 29, 73, 0.11);
    --credentials-shadow: rgba(7, 29, 73, 0.11);

    background: var(--credentials-page-bg);
}


/* ==========================================================
   PAGE RESET
========================================================== */

.credentials-document {
    scroll-snap-type: none;
}

.credentials-page.modal-open {
    overflow: hidden;
}

.credentials-page .credentials-wrapper {
    margin-bottom: 0;
}

.credentials-main {
    width: 100%;
    overflow: hidden;
}


/* ==========================================================
   02 — EDIT HERE: GENERAL PAGE SPACING
   ----------------------------------------------------------
   Change these values when the page feels too tall, too tight,
   or too far below the fixed navigation header.
========================================================== */

.credentials-standards {
    position: relative;

    /* EDIT HERE — normal top/bottom spacing */
    padding:
        clamp(85px, 9vw, 130px)
        0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 7% 15%,
            rgba(193, 18, 31, 0.075),
            transparent 26%
        ),
        radial-gradient(
            circle at 93% 84%,
            rgba(7, 29, 73, 0.075),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #f7f9fc 0%,
            #f2f5f9 100%
        );
}

.credentials-standards--first {
    /* EDIT HERE — space below the fixed header */
    padding-top:
        clamp(150px, 15vh, 185px);
}


/* ==========================================================
   SMALL RED SECTION LABEL
========================================================== */

.credentials-kicker {
    margin: 0 0 12px;

    color: var(--credentials-red);

    font-size: 12px;
    font-weight: 900;

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


/* ==========================================================
   03 — EDIT HERE: MAIN HEADING AREA
   ----------------------------------------------------------
   This controls:
   - Accreditations & Certifications title
   - right-side description
   - small hover/tap instruction
========================================================== */

.credentials-heading {
    display: grid;

    /* EDIT HERE — left title width / right text width */
    grid-template-columns:
        minmax(0, 1fr)
        minmax(290px, 440px);

    align-items: end;

    /* EDIT HERE — spacing between title and description */
    gap: clamp(28px, 6vw, 90px);

    margin-bottom: 40px;
}

.credentials-heading h1,
.credentials-heading h2 {
    max-width: 780px;
    margin: 0;

    color: var(--credentials-heading);

    /* EDIT HERE — desktop title size */
    font-size:
        clamp(38px, 5vw, 61px);

    line-height: 1.04;
    letter-spacing: -0.045em;
}

.credentials-heading > p,
.credentials-heading__support > p {
    margin: 0;

    color: var(--credentials-muted);

    font-size: 16px;
    line-height: 1.8;
}

.credentials-heading__support {
    display: grid;
    gap: 15px;
}

.credentials-heading__support > span {
    display: inline-flex;
    width: fit-content;

    align-items: center;

    min-height: 34px;
    padding: 7px 12px;

    color: var(--credentials-blue);

    background:
        linear-gradient(
            90deg,
            rgba(193, 18, 31, 0.07),
            rgba(7, 29, 73, 0.07)
        );

    border:
        1px solid
        rgba(7, 29, 73, 0.09);

    border-radius: 999px;

    font-size: 11px;
    font-weight: 850;
}


/* ==========================================================
   04 — EDIT HERE: CREDENTIAL GRID
   ----------------------------------------------------------
   Desktop uses four cards.
   Tablet and mobile changes are near the bottom of this file.
========================================================== */

.credentials-grid {
    display: grid;

    /* EDIT HERE — desktop number of columns */
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    /* EDIT HERE — gap between cards */
    gap: 22px;
}


/* ==========================================================
   05 — EDIT HERE: FLIP CARD SIZE AND SPEED
   ----------------------------------------------------------
   The original flip behaviour is preserved:
   - Desktop hover
   - Click / tap
   - Keyboard activation through Credentials.js
========================================================== */

.credential-card {
    /* ------------------------------------------------------
       EDIT HERE — default credential image settings

       The actual image path and opacity are controlled from
       credentials.html using:

       data-credential-image=""
       data-credential-image-opacity="0.30"
       data-credential-image-position="center"
    ------------------------------------------------------ */

    --credential-back-image: none;
    --credential-image-opacity: 0.30;
    --credential-image-position: center;

    position: relative;

    /* EDIT HERE — card height */
    height: 305px;

    min-width: 0;

    /* EDIT HERE — 3D depth */
    perspective: 1300px;

    border-radius: 22px;
    outline: none;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}

.credential-inner {
    position: relative;

    width: 100%;
    height: 100%;

    transform-style: preserve-3d;

    /* EDIT HERE — flip animation speed */
    transition:
        transform
        700ms
        cubic-bezier(.2, .75, .2, 1);
}

.credential-card.is-flipped .credential-inner {
    transform: rotateY(180deg);
}


/* ==========================================================
   DESKTOP HOVER FLIP
========================================================== */

@media (hover: hover) and (pointer: fine) {

    .credential-card:hover .credential-inner {
        transform: rotateY(180deg);
    }

    .credential-card:hover {
        z-index: 2;
    }

}


/* ==========================================================
   KEYBOARD FOCUS
========================================================== */

.credential-card:focus-visible {
    border-radius: 22px;

    box-shadow:
        0 0 0 4px
        rgba(193, 18, 31, 0.18);
}


/* ==========================================================
   SHARED FRONT / BACK CARD FACE
========================================================== */

.credential-face {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    /* EDIT HERE — card inner spacing */
    padding: 26px;

    border:
        1px solid
        var(--credentials-line);

    border-radius: 22px;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    box-shadow:
        0 15px 42px
        var(--credentials-shadow);
}


/* ==========================================================
   RED + BLUE TOP ACCENT
========================================================== */

.credential-face::before {
    content: "";

    position: absolute;

    top: 0;
    left: 25px;
    right: 25px;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--credentials-red),
            var(--credentials-blue-mid)
        );

    border-radius:
        0 0 999px 999px;
}


/* ==========================================================
   06 — EDIT HERE: CARD FRONT
   ----------------------------------------------------------
   All cards now use only Kornet red and blue accents.
   No teal, purple, orange, green or other colour families.
========================================================== */

.credential-front {
    color: var(--credentials-heading);

    background:

        linear-gradient(
            145deg,
            #ffffff 0%,
            #f8f9fc 100%
        );
}

.credential-front::after {
    content: "";

    position: absolute;

    right: -55px;
    bottom: -66px;

    width: 160px;
    height: 160px;

    border:
        28px solid
        rgba(7, 29, 73, 0.025);

    border-radius: 50%;

    pointer-events: none;
}


/* ==========================================================
   CARD FRONT — TOP BADGE AND NUMBER
========================================================== */

.credential-card__top {
    position: relative;
    z-index: 1;

    display: flex;

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

    gap: 15px;
}

.credential-badge {
    display: inline-flex;
    align-items: center;

    min-height: 31px;
    padding: 7px 12px;

    color: var(--credentials-red);

    background:
        linear-gradient(
            90deg,
            rgba(193, 18, 31, 0.095),
            rgba(7, 29, 73, 0.075)
        );

    border:
        1px solid
        rgba(193, 18, 31, 0.16);

    border-radius: 999px;

    font-size: 10px;
    font-weight: 900;

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

.credential-number {
    color:
        rgba(7, 29, 73, 0.09);

    font-size: 38px;
    font-weight: 900;

    line-height: 1;
}


/* ==========================================================
   CARD FRONT — TITLE AND ORGANISATION
========================================================== */

.credential-front__copy {
    position: relative;
    z-index: 1;

    display: grid;
    align-content: center;

    flex: 1;

    padding:
        20px 0 16px;
}

.credential-front h2 {
    margin: 0;

    color: var(--credentials-red);

    /* EDIT HERE — credential acronym/title size */
    font-size:
        clamp(25px, 2.25vw, 35px);

    line-height: 1.04;
    letter-spacing: -0.03em;
}

.credential-front p {
    margin: 11px 0 0;

    color: var(--credentials-heading);

    font-size: 14px;
    font-weight: 800;

    line-height: 1.6;
}


/* ==========================================================
   CARD FRONT / BACK — BOTTOM ACTION
========================================================== */

.credential-action {
    position: relative;
    z-index: 2;

    display: flex;

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

    gap: 14px;

    padding-top: 16px;

    color: var(--credentials-muted);

    border-top:
        1px solid
        var(--credentials-line);

    font-size: 11px;
    font-weight: 850;
}

.credential-action b {
    display: grid;
    place-items: center;

    width: 30px;
    height: 30px;

    color: var(--credentials-white);

    background:
        linear-gradient(
            135deg,
            var(--credentials-red),
            var(--credentials-blue-mid)
        );

    border-radius: 50%;

    font-size: 15px;
}


/* ==========================================================
   07 — EDIT HERE: CARD BACK + CREDENTIAL IMAGE
   ----------------------------------------------------------
   The credential image appears underneath this red/blue layer.

   HTML controls:
   data-credential-image="../../assets/credentials/file.jpg"
   data-credential-image-opacity="0.30"
   data-credential-image-position="center"
========================================================== */

.credential-back {
    transform:
        rotateY(180deg);

    justify-content: center;

    color: var(--credentials-white);

    background:
        linear-gradient(
            135deg,
            var(--credentials-red-dark) 0%,
            var(--credentials-red) 28%,
            var(--credentials-blue-mid) 66%,
            var(--credentials-blue) 100%
        );

    border-color:
        rgba(255, 255, 255, 0.15);

    box-shadow:
        0 22px 55px
        rgba(7, 29, 73, 0.25);
}


/* ==========================================================
   EDITABLE CREDENTIAL IMAGE
   ----------------------------------------------------------
   EDIT HERE only when changing image behaviour globally.

   Individual file paths and opacity remain in credentials.html.
========================================================== */

.credential-back::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    opacity:
        var(--credential-image-opacity);

    background-image:
        var(--credential-back-image);

    background-repeat: no-repeat;

    background-position:
        var(--credential-image-position);

    /* EDIT HERE — cover or contain */
    background-size: cover;

    /* EDIT HERE — image treatment */
    filter:
        saturate(0.85)
        contrast(1.05);

    pointer-events: none;
}


/* ==========================================================
   RED + BLUE READABILITY OVERLAY
   ----------------------------------------------------------
   Increase the opacity values when text is difficult to read.
   Reduce them when the credential image should be more visible.
========================================================== */

.credential-back::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    background:
        linear-gradient(
            135deg,
            rgba(193, 18, 31, 0.66) 0%,
            rgba(193, 18, 31, 0.48) 32%,
            rgba(18, 61, 120, 0.63) 68%,
            rgba(7, 29, 73, 0.82) 100%
        ),
        linear-gradient(
            rgba(255, 255, 255, 0.13) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.13) 1px,
            transparent 1px
        );

    background-size:
        auto,
        28px 28px,
        28px 28px;

    pointer-events: none;
}


/* ==========================================================
   BACK FACE TEXT
========================================================== */

.credential-back__label,
.credential-back h3,
.credential-back p,
.credential-action--back {
    position: relative;
    z-index: 2;
}

.credential-back__label {
    color:
        rgba(255, 255, 255, 0.72);

    font-size: 10px;
    font-weight: 900;

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

.credential-back h3 {
    margin:
        10px 0 15px;

    color: var(--credentials-white);

    /* EDIT HERE — date size */
    font-size:
        clamp(25px, 2.25vw, 34px);

    line-height: 1.06;
    letter-spacing: -0.025em;
}

.credential-back p {
    margin: 0;

    color:
        rgba(255, 255, 255, 0.86);

    font-size: 14px;
    line-height: 1.72;
}

.credential-action--back {
    margin-top: auto;

    color:
        rgba(255, 255, 255, 0.73);

    border-top-color:
        rgba(255, 255, 255, 0.16);
}

.credential-action--back b {
    color: var(--credentials-red);

    background: var(--credentials-white);
}


/* ==========================================================
   08 — EDIT HERE: TRUSTED PARTNERS SECTION
   ----------------------------------------------------------
   Only Kornet red and blue are used in the section gradient.
========================================================== */

.credentials-network {
    position: relative;

    padding:
        clamp(85px, 9vw, 130px)
        0;

    background:
        radial-gradient(
            circle at 90% 14%,
            rgba(193, 18, 31, 0.42),
            transparent 31%
        ),
        radial-gradient(
            circle at 8% 90%,
            rgba(193, 18, 31, 0.22),
            transparent 26%
        ),
        linear-gradient(
            130deg,
            var(--credentials-blue) 0%,
            var(--credentials-blue-mid) 58%,
            var(--credentials-red-dark) 100%
        );
}

.credentials-heading--light h2 {
    color: var(--credentials-white);
}

.credentials-heading--light > p {
    color:
        rgba(255, 255, 255, 0.72);
}

.credentials-heading--light .credentials-kicker {
    color:
        rgba(255, 255, 255, 0.84);
}


/* ==========================================================
   PARTNER CARD GRID
========================================================== */

.credentials-partner-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 22px;
}


/* ==========================================================
   PARTNER CARD
========================================================== */

.credentials-partner-card {
    min-width: 0;

    display: block;

    overflow: hidden;

    padding: 0;

    color: inherit;

    background:
        rgba(255, 255, 255, 0.98);

    border:
        1px solid
        rgba(255, 255, 255, 0.25);

    border-radius: 23px;

    box-shadow:
        0 24px 65px
        rgba(7, 29, 73, 0.34);

    text-align: left;

    cursor: pointer;

    transition:
        transform 240ms ease,
        box-shadow 240ms ease;
}

.credentials-partner-card:hover,
.credentials-partner-card:focus-visible {
    transform:
        translateY(-8px);

    box-shadow:
        0 34px 80px
        rgba(7, 29, 73, 0.44);

    outline: none;
}

.credentials-partner-card:focus-visible {
    box-shadow:
        0 0 0 4px
        rgba(193, 18, 31, 0.32),
        0 34px 80px
        rgba(7, 29, 73, 0.44);
}


/* ==========================================================
   PARTNER IMAGE
========================================================== */

.credentials-partner-card__image {
    position: relative;

    height: 230px;

    display: block;

    overflow: hidden;

    background:
        rgba(7, 29, 73, 0.10);
}

.credentials-partner-card__image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 38%,
            rgba(7, 29, 73, 0.65)
        );
}

.credentials-partner-card__image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 450ms ease;
}

.credentials-partner-card:hover
.credentials-partner-card__image img,
.credentials-partner-card:focus-visible
.credentials-partner-card__image img {
    transform:
        scale(1.055);
}


/* ==========================================================
   PARTNER CARD TEXT
========================================================== */

.credentials-partner-card__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-height: 235px;

    padding: 26px;
}

.credentials-partner-card__content small {
    color: var(--credentials-red);

    font-size: 10px;
    font-weight: 900;

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

.credentials-partner-card__content strong {
    margin-top: 7px;

    color: var(--credentials-blue);

    font-size: 25px;
    line-height: 1.15;
}

.credentials-partner-card__content > span {
    margin-top: 13px;

    color: var(--credentials-muted);

    font-size: 14px;
    line-height: 1.7;
}

.credentials-partner-card__content b {
    margin-top: auto;
    padding-top: 21px;

    color: var(--credentials-red);

    font-size: 12px;
    font-weight: 900;
}


/* ==========================================================
   09 — EDIT HERE: PARTNER IMAGE VIEWER
========================================================== */

.credentials-viewer {
    position: fixed;
    inset: 0;

    z-index: 10050;

    display: grid;
    place-items: center;

    padding:
        clamp(16px, 4vw, 40px);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 200ms ease,
        visibility 200ms ease;
}

.credentials-viewer[hidden] {
    display: none;
}

.credentials-viewer.is-open {
    opacity: 1;
    visibility: visible;
}

.credentials-viewer__backdrop {
    position: absolute;
    inset: 0;

    padding: 0;

    background:
        rgba(7, 29, 73, 0.88);

    border: 0;

    backdrop-filter:
        blur(12px);

    cursor: default;
}

.credentials-viewer__dialog {
    position: relative;
    z-index: 1;

    width:
        min(980px, 100%);

    max-height:
        calc(100vh - 34px);

    display: grid;

    grid-template-rows:
        auto minmax(0, 1fr);

    overflow: hidden;

    background:
        var(--credentials-white);

    border:
        1px solid
        rgba(255, 255, 255, 0.70);

    border-radius: 26px;

    box-shadow:
        0 42px 130px
        rgba(7, 29, 73, 0.48);

    transform:
        translateY(16px)
        scale(0.98);

    transition:
        transform 200ms ease;
}

.credentials-viewer.is-open
.credentials-viewer__dialog {
    transform: none;
}

.credentials-viewer__head {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 24px;

    padding:
        24px 26px 20px;

    border-bottom:
        1px solid
        var(--credentials-line);
}

.credentials-viewer__head h2 {
    margin: 0;

    color:
        var(--credentials-blue);

    font-size:
        clamp(24px, 4vw, 36px);

    line-height: 1.1;
}

.credentials-viewer__close {
    flex:
        0 0 44px;

    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    color:
        var(--credentials-blue);

    background:
        linear-gradient(
            135deg,
            rgba(193, 18, 31, 0.08),
            rgba(7, 29, 73, 0.08)
        );

    border:
        1px solid
        var(--credentials-line);

    border-radius: 14px;

    font-size: 28px;
    line-height: 1;

    cursor: pointer;

    transition:
        180ms ease;
}

.credentials-viewer__close:hover,
.credentials-viewer__close:focus-visible {
    color:
        var(--credentials-white);

    background:
        linear-gradient(
            135deg,
            var(--credentials-red),
            var(--credentials-blue-mid)
        );

    border-color:
        var(--credentials-red);

    outline: none;
}

.credentials-viewer__image {
    min-height: 0;

    overflow: auto;

    padding: 20px;

    background:
        linear-gradient(
            rgba(7, 29, 73, 0.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(193, 18, 31, 0.035) 1px,
            transparent 1px
        ),
        #f1f4f8;

    background-size:
        24px 24px;
}

.credentials-viewer__image img {
    width: 100%;
    height: auto;

    max-height:
        calc(100vh - 170px);

    display: block;

    margin:
        0 auto;

    object-fit: contain;

    background:
        var(--credentials-white);

    border-radius: 14px;

    box-shadow:
        0 18px 45px
        rgba(7, 29, 73, 0.15);
}


/* ==========================================================
   10 — EDIT HERE: RESPONSIVE BREAKPOINTS
========================================================== */


/* ==========================================================
   TABLET / SMALL DESKTOP
========================================================== */

@media (max-width: 1120px) {

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

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

    .credentials-partner-card:last-child {
        grid-column:
            1 / -1;

        width:
            min(100%, calc(50% - 11px));

        justify-self: center;
    }

}


/* ==========================================================
   MOBILE / TABLET PORTRAIT
========================================================== */

@media (max-width: 780px) {

    .credentials-standards--first {
        /* EDIT HERE — mobile top spacing below header */
        padding-top: 125px;
    }

    .credentials-heading {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .credentials-heading h1,
    .credentials-heading h2 {
        /* EDIT HERE — mobile heading size */
        font-size:
            clamp(35px, 10vw, 49px);
    }

    .credentials-grid,
    .credentials-partner-grid {
        grid-template-columns: 1fr;
    }

    .credentials-partner-card:last-child {
        grid-column: auto;
        width: 100%;
    }

    .credential-card {
        /* EDIT HERE — tablet/mobile card height */
        height: 292px;
    }

    .credentials-viewer {
        padding: 10px;
    }

    .credentials-viewer__dialog {
        max-height:
            calc(100vh - 20px);

        border-radius: 20px;
    }

    .credentials-viewer__head {
        padding: 20px;
    }

    .credentials-viewer__image {
        padding: 12px;
    }

    .credentials-viewer__image img {
        max-height:
            calc(100vh - 145px);
    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 540px) {

    .credentials-standards,
    .credentials-network {
        padding-bottom: 72px;
    }

    .credential-face {
        padding: 23px;
    }

    .credential-card {
        /* EDIT HERE — small-phone card height */
        height: 300px;
    }

    .credentials-partner-card__image {
        height: 205px;
    }

    .credentials-partner-card__content {
        min-height: 220px;
        padding: 23px;
    }

}


/* ==========================================================
   ACCESSIBILITY — REDUCED MOTION
========================================================== */

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

    .credential-inner,
    .credentials-partner-card,
    .credentials-partner-card__image img,
    .credentials-viewer,
    .credentials-viewer__dialog {
        transition: none;
    }

}