/* ========================================
   VTX Global Components CSS

   Purpose:
   Reusable components across Varytex website.

   Components:
   - Hero
   - Future CTA
   - Future Cards
   - Future Trust Blocks

   Dependencies:
   - vtx-tokens.css
   - Blocksy Global Styles

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


/* ========================================
   VTX Hero Component
======================================== */


/* ----------------------------------------
   Hero Base
---------------------------------------- */

.vtx-hero {

    position:relative;

    overflow:hidden;

}



/* ========================================
   Hero Variants
======================================== */


/*
   Homepage Full Hero

*/

.vtx-hero--full {

    min-height:100vh;

}



/*
   Compact Hero

*/

.vtx-hero--compact {

    min-height:520px;

}



/* ========================================
   Hero Background Animation
======================================== */


/*
   Slow Documentary Zoom

*/

.vtx-hero--full .wp-block-cover__image-background {

    transform-origin:60% center;

    will-change:transform;

    animation:
        vtxHeroZoom
        var(--vtx-motion-slow)
        ease-out
        forwards;

}


@keyframes vtxHeroZoom {

    from {
        transform:scale(1);
    }

    to {
        transform:scale(1.2);
    }

}



/* ========================================
   Hero Content
======================================== */


/*
   Desktop Layout:

   Controlled by Gutenberg Group

   Content Width:
   65%

   CSS does not override width.

*/


.vtx-cover__content {

    width:auto;

}

/* ========================================
   Mosaic Cover Vertical Alignment
======================================== */


.vtx-mosaic-grid__item
.wp-block-cover__inner-container {

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

}



.vtx-mosaic-cover__content {

    width:100%;

    max-width:none;

    padding-bottom:48px;

}



@media(max-width:999px){

    .vtx-mosaic-cover__content {

        padding-bottom:40px;

    }

}



@media(max-width:767px){

    .vtx-mosaic-cover__content {

        padding-bottom:32px;

    }

}


/*
   Gutenberg constrained layout adjustment

   Tablet & Mobile only

*/


@media (max-width:999px) {


    .vtx-cover__content.is-layout-constrained
    > :where(
        :not(.alignleft):not(.alignright):not(.alignfull)
    ) {


        max-width:100%;

        width:100%;


    }


}



/* ========================================
   Transparent Header Compensation
======================================== */


/*
   Homepage Full Hero

   Header:
   Desktop 80px
   Tablet 72px
   Mobile 64px

*/


.vtx-hero--full
.wp-block-cover__inner-container {


    padding-top:

        calc(
            var(--vtx-header-height-desktop)
            *0.5
        );


}



/* ----------------------------------------
   Tablet

---------------------------------------- */

@media (max-width:999px) {


    .vtx-hero--full
    .wp-block-cover__inner-container {


        padding-top:

            calc(
                var(--vtx-header-height-tablet)
                *0.5
            );


    }


}



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

---------------------------------------- */

@media (max-width:767px) {


    .vtx-hero--full
    .wp-block-cover__inner-container {


        padding-top:

            calc(
                var(--vtx-header-height-mobile)
                *0.5
            );


    }


}



/* ========================================
   Hero Typography
======================================== */


/*
   Eyebrow

*/

/* Cover Eyebrow */

.vtx-eyebrow.vtx-eyebrow--light {

    color:
        var(--vtx-text-light);

}

/* ========================================
   Dark Theme
======================================== */


.vtx-section--dark:not(.vtx-cover__content) {

    background-color:
        var(--vtx-color-dark-section);

}


/* ========================================
   Dark Section Typography
======================================== */


.vtx-section--dark h1,
.vtx-section--dark h2,
.vtx-section--dark h3 {

    color:
        var(--vtx-white);

}


.vtx-section--dark p:not(.vtx-eyebrow) {

    color:
        var(--vtx-text-light);

}

/* ========================================
   Cover Typography Variant
======================================== */

.vtx-cover__content--light h1,
.vtx-cover__content--light h2,
.vtx-cover__content--light h3 {

    color:var(--vtx-white);

}


.vtx-cover__content--light p {

    color:var(--vtx-text-light);

}



/* ========================================
   Hero Buttons
======================================== */


/*
   Button Group Spacing

*/

.vtx-cover__actions
{
    gap:24px;
}



/*
   Shared Button Style

*/

.vtx-section--dark
.wp-block-button__link {


    border-width:

        2px;


    border-style:

        solid;


    font-weight:

        600;


    transition:

        background-color .25s ease,

        border-color .25s ease,

        color .25s ease;


}



/* ----------------------------------------
   Primary Button

---------------------------------------- */


.vtx-section--dark
.wp-block-button:first-child
.wp-block-button__link {


    background-color:

        var(--vtx-brand-yellow);


    border-color:

        var(--vtx-brand-yellow);


    color:

        var(--vtx-primary-navy);


}



.vtx-section--dark
.wp-block-button:first-child
.wp-block-button__link:hover {


    background-color:

        var(--vtx-yellow-hover);


    border-color:

        var(--vtx-yellow-hover);


    color:

        var(--vtx-primary-navy);


}



/* ----------------------------------------
   Secondary Button

---------------------------------------- */


.vtx-section--dark
.wp-block-button:nth-child(2)
.wp-block-button__link {


    background-color:

        transparent;


    border-color:

        var(--vtx-white);


    color:

        var(--vtx-white);


}



.vtx-section--dark
.wp-block-button:nth-child(2)
.wp-block-button__link:hover {


    background-color:

        var(--vtx-white);


    border-color:

        var(--vtx-white);


    color:

        var(--vtx-primary-navy);


}


/* ========================================
   Cover Actions
   Mobile Full Width Variant
======================================== */


@media(max-width:767px){


    .vtx-cover__actions--stack-mobile.wp-block-buttons {


        width:100%;


        flex-direction:column;


        align-items:stretch;


        gap:12px;


    }



    .vtx-cover__actions--stack-mobile
    .wp-block-button {


        width:100%;


    }



    .vtx-cover__actions--stack-mobile
    .wp-block-button__link {


        width:100%;


        text-align:center;


    }


}


/* =========================================
   Section Spacing System
   ========================================= */

.vtx-section {
    padding-top: 64px;
    padding-bottom: 64px;
}

.vtx-section--top-large {
    padding-top: 96px;
}

.vtx-section--bottom-large {
    padding-bottom: 96px;
}

.vtx-section--vertical-large {
    padding-top:96px;
    padding-bottom:96px;
}

.vtx-section--compact {
    padding-top:48px;
    padding-bottom:48px;
}

@media (max-width:999px){

    .vtx-section {
        padding-top:48px;
        padding-bottom:48px;
    }


    .vtx-section--top-large {
        padding-top:72px;
    }


    .vtx-section--bottom-large {
        padding-bottom:72px;
    }


    .vtx-section--vertical-large {
        padding-top:72px;
        padding-bottom:72px;
    }


    .vtx-section--compact {
        padding-top:36px;
        padding-bottom:36px;
    }

}

@media (max-width:767px){

    .vtx-section {
        padding-top:40px;
        padding-bottom:40px;
    }


    .vtx-section--top-large {
        padding-top:56px;
    }


    .vtx-section--bottom-large {
        padding-bottom:56px;
    }


    .vtx-section--vertical-large {
        padding-top:56px;
        padding-bottom:56px;
    }


    .vtx-section--compact {
        padding-top:32px;
        padding-bottom:32px;
    }

}


/* ========================================
   Two Column Layout
======================================== */


/*
   Desktop:

   Gutenberg controls:
   - Column Width
   - Horizontal Gap

*/


.vtx-two-column {

    align-items:center;

}


@media (max-width:999px){

    .vtx-two-column.wp-block-columns{

        gap:40px;

    }

}


@media (max-width:767px){

    .vtx-two-column.wp-block-columns{

        gap:32px;

    }

}

/* ========================================
   Editorial Two Column Layout
   Responsive Override
======================================== */


@media (max-width:999px){


    .vtx-two-column--editorial.wp-block-columns {

        gap:48px;

    }


}


@media (max-width:767px){


    .vtx-two-column--editorial.wp-block-columns {

        gap:32px;

    }


}


/* ========================================
   Content Spacing
======================================== */


/*
   Left Column:

   Eyebrow
   Heading
   Paragraph
   Buttons

*/


.vtx-content > * + * {

    margin-top:24px;

}



/*
   Eyebrow → Heading

*/


.vtx-content
.vtx-eyebrow + h2 {


    margin-top:16px;


}



/*
   Heading → Paragraph

*/


.vtx-content
h2 + p {


    margin-top:24px;


}



/*
   Paragraph → Buttons

*/


.vtx-content
p + .wp-block-buttons {


    margin-top:40px;


}



/* ========================================
   Eyebrow Component
======================================== */


/*
   Shared Component:

   Hero
   Section Eyebrow
   Future Pages

*/


.vtx-eyebrow {


    font-size:14px;


    line-height:1.5;


    font-weight:600;


    letter-spacing:0.08em;


    text-transform:uppercase;

    color: var(--vtx-color-eyebrow);


}



@media(max-width:767px){


    .vtx-eyebrow {


        font-size:13px;


    }


}

/* =========================================
   Section Header
========================================= */

.vtx-section-header {

    max-width:900px;
    margin-left:auto;
    margin-right:auto;

}


@media (max-width:999px) {

    .vtx-section-header {

        max-width:720px;

    }

}


@media (max-width:767px) {

    .vtx-section-header {

        max-width:100%;

    }

}

/* =========================================
   VTX Grid Component
========================================= */


.vtx-grid {

    display:grid;

    row-gap:32px;

    column-gap:64px;

}

@media(max-width:999px){

    .vtx-grid {

        row-gap:28px;

        column-gap:40px;

    }

}


@media(max-width:767px){

    .vtx-grid {

        row-gap:24px;

         column-gap:0;

    }

}


/* -----------------------------------------
   Grid Columns
----------------------------------------- */


.vtx-grid--3 {

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

}



@media (max-width:999px){

    .vtx-grid--3 {

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

    }

}



@media (max-width:767px){

    .vtx-grid--3 {

        grid-template-columns:1fr;

    }

}

/* ========================================
   Grid Header Spacing
   Section Header → Grid spacing
======================================== */


@media (max-width:999px){

    .vtx-section-body {
        margin-top:40px !important;
    }

}


@media (max-width:767px){

    .vtx-section-body {
        margin-top:32px !important;
    }

}

/* ===================================
   VTX Section Spacing Governance
   Remove Gutenberg default block spacing
=================================== */

.is-layout-flow > .vtx-section,
.is-layout-constrained > .vtx-section {
    margin-block-end:0;
}

/* Full Width Cover Sections */
.is-layout-constrained > .vtx-section-cover {
    margin-block-end:0;
}


/* =========================================
   VTX Card Component
========================================= */


.vtx-card {

    display:flex;

    flex-direction:column;

}

.vtx-card--center {

    text-align:center;

}

.vtx-card--editorial {

    text-align:left;

}



/* -----------------------------------------
   Card Icon
----------------------------------------- */


.vtx-card-icon {

    margin:0;

    display:flex;

}

.vtx-card--center .vtx-card-icon {

    justify-content:center;

}


.vtx-card-icon img {

    display:block;

    width:40px;

    height:40px;

}



/* -----------------------------------------
   Card Typography
----------------------------------------- */


.vtx-card h3 {

    margin-top:0;

    font-size:28px;

}


.vtx-card p {

    margin-bottom:0;

}

@media(max-width:999px){

    .vtx-card h3 {

        font-size:24px;

    }

}

@media(max-width:767px){

    .vtx-card h3 {

        font-size:22px;

    }

}

/* -----------------------------------------
   Section CTA
----------------------------------------- */

@media (max-width:999px){

    .vtx-section-cta {
        margin-top:40px;
    }

}


@media (max-width:767px){

    .vtx-section-cta {
        margin-top:32px;
        justify-content:center;
    }

}

/* ========================================
   VTX Cover Component
======================================== */


.vtx-cover {

    position:relative;

    overflow:hidden;

}



/* ----------------------------------------
   Medium Cover

---------------------------------------- */


.vtx-cover--medium {

    min-height:560px;

}



@media(max-width:999px){


    .vtx-cover--medium {

        min-height:480px;

    }


}



@media(max-width:767px){


    .vtx-cover--medium {

        min-height:420px;

    }
}


/* ========================================
   Metrics Container
======================================== */


.vtx-metrics {

    width:100%;

}



/* ========================================
   Single Metric
======================================== */


.vtx-metric {

    width:100%;

    align-items:center;

}


/*
   Metric Number Column Alignment

*/

.vtx-metric__number {

    flex:0 0 120px;

}



.vtx-metric + .vtx-metric {

    border-top:1px solid var(--vtx-border);

    padding-top:20px;

}



/* ========================================
   Metric Number
======================================== */


.vtx-metric__number {

    margin:0;

    flex:0 0 120px;

    font-size:40px;

    font-weight:700;

    line-height:1.1;

    letter-spacing:-0.02em;

    color:var(--vtx-primary-navy);

}


/* ========================================
   Metric Label
======================================== */


.vtx-metric__label {

    margin:0;

    color:var(--vtx-muted);

}



/* ========================================
   Responsive
======================================== */


@media (max-width:999px){


    /*
       Tablet:

       Stack number and label vertically

    */


    .vtx-metric {

        flex-direction:column;

        align-items:flex-start;

        gap:8px;

    }


    .vtx-metric__number {

        flex:auto;

        font-size:32px;

    }


}



@media (max-width:767px){


    .vtx-metric {

        gap:6px;

    }


    .vtx-metric__number {

        font-size:30px;

    }


    .vtx-metric + .vtx-metric {

        padding-top:16px;

    }


}

/* ========================================
   Editorial List Component
======================================== */


.vtx-editorial-list {

    display:flex;

    flex-direction:column;

    gap:56px;

}



.vtx-editorial-item {

    display:flex;

    align-items:flex-start;

    gap:32px;

}


.vtx-editorial-number {

    flex:0 0 44px;

    margin:0;

    padding-top:6px;

    font-size:20px;

    font-weight:600;

    line-height:1;

}


.vtx-editorial-content {

    flex:1;

}



.vtx-editorial-content > * + * {

    margin-top:16px;

}



.vtx-editorial-content h3 {

    margin-top:0;

    margin-bottom:0;

}



.vtx-editorial-content p {

    margin-bottom:0;

}



@media (max-width:999px){


    .vtx-editorial-item {

        gap:24px;

    }


}



@media (max-width:767px){


    .vtx-editorial-list {

        gap:40px;

    }


    .vtx-editorial-item {

        flex-direction:column;

        flex-wrap:nowrap;

        gap:12px;

    }

    .vtx-editorial-number {
        flex:0 0 auto;
    }


}

/* ========================================
   Certification Framework List
======================================== */


.vtx-framework-list {

    display:flex;

    flex-direction:column;

}


/* ========================================
   Certification Framework List
======================================== */


.vtx-framework-list {

    display:flex;

    flex-direction:column;

}


/* ----------------------------------------
   Framework Item
---------------------------------------- */


.vtx-framework-item {

    position:relative;

    width:100%;

    max-width:none;

}


.vtx-framework-item + .vtx-framework-item {

    padding-top:32px;

}


.vtx-framework-item + .vtx-framework-item::before {

    content:"";

    position:absolute;

    top:0;

    left:0;

    right:0;

    border-top:1px solid var(--vtx-border);

}



/* ----------------------------------------
   Category Label

---------------------------------------- */


.vtx-category-label {

    margin:0 0 12px !important;

    font-size:14px;

    line-height:1.5;

    font-weight:600;

    letter-spacing:0.08em;

    text-transform:uppercase;

    color:var(--vtx-color-eyebrow);

}



/* ----------------------------------------
   Certification Name

---------------------------------------- */


.vtx-framework-item__name {

    margin:0 !important;

    font-size:18px;

    font-weight:600;

}



/* ----------------------------------------
   Certification Description

---------------------------------------- */


.vtx-framework-item__description {

    margin:8px 0 0 !important;

    color:var(--vtx-muted);

}

/* ========================================
   Mosaic Grid
======================================== */


.vtx-mosaic-grid {

    display:grid;

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

    grid-template-rows:repeat(2, 1fr);

    gap:24px;

    align-items:stretch;

}


.vtx-mosaic-grid__item {

    min-height:0;

    height:100%;

}


.vtx-mosaic-grid__item > .wp-block-cover {

    height:100%;

}


.vtx-mosaic-grid__item--large {

    grid-row:span 2;

}



@media (max-width:999px) {


    .vtx-mosaic-grid {

        grid-template-columns:1fr;

        grid-template-rows:auto;

        gap:24px;

    }

    .vtx-mosaic-grid__item {

         height:320px;
    }


    .vtx-mosaic-grid__item > .wp-block-cover {

        height:100%;

        min-height:0;

    }

    .vtx-mosaic-grid__item > .wp-block-cover
    .wp-block-cover__image-background {

        height:100%;

        object-fit:cover;

    }


    .vtx-mosaic-grid__item--large {

        grid-row:auto;

    }


}


@media (max-width:767px) {


    .vtx-mosaic-grid {

        gap:20px;

    }

    .vtx-mosaic-grid__item {

        height:360px;

    }

    .vtx-mosaic-grid__item > .wp-block-cover {

        min-height:360px;

    }


}

/* ========================================
   Clickable Cover Component
======================================== */


.vtx-clickable-cover {

    display:block;

    position:relative;

    cursor:pointer;

}



/*
   Full Area Link Overlay

*/

.vtx-clickable-cover__link {

    position:absolute;

    inset:0;

    z-index:10;

}



/*
   Image Hover Effect

*/

.vtx-clickable-cover
.wp-block-cover__image-background {

    transition:
        transform .6s ease;

}


.vtx-clickable-cover:hover
.wp-block-cover__image-background {

    transform:scale(1.05);

}

/* =========================================
   Customer Quote Component
========================================= */


.vtx-quote-section {
    width:100%;
    max-width:none;
    background-color:var(--vtx-color-muted-section);
    padding-block:80px;
}

/* ===================================
   Quote Section Spacing Governance
   Remove Gutenberg default block spacing
=================================== */


.is-layout-flow > .vtx-quote-section,
.is-layout-constrained > .vtx-quote-section {

    margin-block-end:0;

}


/* Quote Content */
.vtx-quote {
    max-width:880px;
    margin-inline:auto;
}


/* Quote Mark */
.vtx-quote__mark {
    margin:0 !important;
    color:var(--vtx-brand-yellow);
    font-size:64px;
    line-height:0.7;
}


/* Quote Text */
.vtx-quote__text {
    margin:16px 0 0 !important;
    font-size:24px;
    line-height:1.5;
    font-style:italic;
}


/* Author */
.vtx-quote__author {
    margin-top:32px !important;
    text-align:right;
}


/* Name */
.vtx-quote__name {
    margin:0 !important;
    font-weight:600;
}


/* Meta */
.vtx-quote__meta {
    margin:6px 0 0 !important;
    color:var(--vtx-color-muted);
}

/* =========================================
   Customer Quote Responsive
========================================= */


/* Tablet */
@media (max-width:999px) {

    .vtx-quote-section {
        padding-block:64px;
    }

    .vtx-quote {
        max-width:100%;
    }

    .vtx-quote__mark {
        font-size:56px;
    }

    .vtx-quote__text {
        font-size:22px;
    }

}


/* Mobile */
@media (max-width:767px) {

    .vtx-quote-section {
        padding-block:48px;
    }


    .vtx-quote__mark {
        font-size:48px;
    }


    .vtx-quote__text {
        font-size:20px;
        line-height:1.6;
    }


    .vtx-quote__author {
        margin-top:24px !important;
    }

}