/* ========================================
   VTX Certifications & Compliance Page

   Purpose:
   Page-specific certification evidence
   presentation.

   Dependencies:
   - vtx-tokens.css
   - vtx-components.css

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


/* ========================================
   Certificate Evidence Grid
======================================== */


/*
   Used inside the right column of
   Management Systems section.

   Desktop / Tablet:
   Two certificate previews.

   Mobile:
   Single column.
*/


.vtx-certificate-grid {

    display:grid;

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

    gap:32px;

    align-items:start;

}


/* ========================================
   Certificate Item
======================================== */


.vtx-certificate-item {

    min-width:0;

}


/* ----------------------------------------
   Certificate Title
---------------------------------------- */


.vtx-certificate-item h3 {

    margin:0 !important;

    font-size:20px;

    line-height:1.35;

}


/* ----------------------------------------
   Certificate Descriptor
---------------------------------------- */


.vtx-certificate-item h3 + p {

    margin:
        8px 0 0 !important;

    color:
        var(--vtx-muted);

}


/* ----------------------------------------
   Certificate Preview
---------------------------------------- */


.vtx-certificate-item figure {

    margin:
        24px 0 0 !important;

}


/*
   Preserve original certificate ratio.
   Never crop or stretch certification files.
*/


.vtx-certificate-item img {

    display:block;

    width:100%;

    height:auto;

}


/* ----------------------------------------
   Certificate Link
---------------------------------------- */


.vtx-certificate-item figure a {

    display:block;

}

.vtx-certificate-item h3 + p {

    line-height:1.5;

    min-height:3em;

}

/* ========================================
   Textile Certification Evidence Grid

   Purpose:
   Section 05 certification presentation.

   Structure:
   Row 1:
   GRS | OEKO-TEX STeP

   Row 2:
   OEKO-TEX STANDARD 100
   spanning both columns, with two
   certificate scopes displayed inside.

   Base styles inherited from:
   .vtx-certificate-grid
   .vtx-certificate-item
======================================== */


/* ----------------------------------------
   Wide Certification Group
---------------------------------------- */

.vtx-certificate-grid--textile
.vtx-certificate-item--wide {

    grid-column:1 / -1;

}


/* ========================================
   STANDARD 100 Scope Grid
======================================== */

.vtx-certificate-scope-grid {

    display:grid;

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

    gap:32px;

}


/* ----------------------------------------
   Scope Item
---------------------------------------- */

.vtx-certificate-scope-item {

    min-width:0;

}


/* ----------------------------------------
   Scope Label
---------------------------------------- */

.vtx-certificate-scope-label {

    font-size:14px;

    line-height:1.5;

    font-weight:500;

    color:
        var(--vtx-muted);

}


/* ----------------------------------------
   Scope Certificate Image
---------------------------------------- */

.vtx-certificate-scope-item figure {

    margin:0 !important;

}


.vtx-certificate-scope-item img {

    display:block;

    width:100%;

    height:auto;

}


/* ----------------------------------------
   Scope Certificate Interaction
---------------------------------------- */

.vtx-certificate-scope-item figure a {

    display:block;

    cursor:pointer;

}


.vtx-certificate-scope-item figure img {

    transition:
        filter 250ms ease;

}


.vtx-certificate-scope-item figure a:hover img {

    filter:
        brightness(0.90);

}


.vtx-certificate-scope-item
figure a:focus-visible {

    outline:
        2px solid
        var(--vtx-primary-navy);

    outline-offset:4px;

}


/* ========================================
   Tablet
======================================== */


@media(max-width:999px){


    .vtx-certificate-grid {

        gap:24px;

    }

    .vtx-certificate-scope-grid {

        gap:24px;

    }

}


/* ========================================
   Mobile
======================================== */


@media(max-width:767px){


    .vtx-certificate-grid {

        grid-template-columns:1fr;

        gap:40px;

    }


    .vtx-certificate-item h3 {

        font-size:18px;

    }


    .vtx-certificate-item figure {

        margin-top:20px !important;

    }

    .vtx-certificate-grid--textile
    .vtx-certificate-item--wide {

        grid-column:auto;

    }


    .vtx-certificate-scope-grid {

        grid-template-columns:1fr;

        gap:32px;

        margin-top:20px !important;

    }


    .vtx-certificate-scope-label {

        font-size:13px;

        margin-bottom:10px !important;

    }


}


/* ----------------------------------------
   Certificate Interaction
---------------------------------------- */

.vtx-certificate-item figure a {
    display: block;
    cursor: pointer;
}

.vtx-certificate-item figure img {
    transition: filter 250ms ease;
}

.vtx-certificate-item figure a:hover img {
    filter: brightness(0.90);
}

.vtx-certificate-item figure a:focus-visible {
    outline: 2px solid var(--vtx-primary-navy);
    outline-offset: 4px;
}


/* ========================================
   Social Compliance Evidence Items
======================================== */


/* ----------------------------------------
   Item Base
---------------------------------------- */

.vtx-certificate-compliance-item {

    min-width:0;

}


/* ----------------------------------------
   Title
---------------------------------------- */

.vtx-certificate-compliance-item h3 {

    margin:0 !important;

    font-size:24px;

    line-height:1.3;

}


/* ----------------------------------------
   Subtitle
   First paragraph after H3
---------------------------------------- */

.vtx-certificate-compliance-item
h3 + p {

    margin-top:12px !important;

    margin-bottom:0;

}


/* ----------------------------------------
   Description
   Second paragraph
---------------------------------------- */

.vtx-certificate-compliance-item
h3 + p + p {

    margin-top:24px !important;

    margin-bottom:0;

}


/* ----------------------------------------
   Evidence Link
---------------------------------------- */

.vtx-certificate-compliance-item
.vtx-card-cta {

    margin-top:24px !important;

    margin-bottom:0;

}


/* ========================================
   Tablet
======================================== */

@media(max-width:999px){

    .vtx-certificate-compliance-item h3 {

        font-size:22px;

    }

}


/* ========================================
   Mobile
======================================== */

@media(max-width:767px){

    .vtx-certificate-compliance-item h3 {

        font-size:20px;

    }

}