/* ==========================================================================
   Testimonials ([thermal_testimonials] / [thermal_testimonial])
   Extracted from style.css (was inline). Enqueued conditionally via
   thermal_enqueue_shortcode_styles() in functions.php.
   ========================================================================== */

/* ==========================================================================
   Careers — Testimonials ([thermal_testimonials] / [thermal_testimonial])
   Slick (variableWidth) so the next card peeks. Init: wpk_testimonials_carousel
   in child-main.js (ready + mutated).
   ========================================================================== */
.thermal-testimonials {
    display: flex;
    flex-direction: column;
    margin: 64px 0;
}

.thermal-testimonials__head {
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
}

.thermal-testimonials__eyebrow {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.43;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #249e80;
}

.thermal-testimonials__title {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 1.3;
    color: #ffffff;
}

/* Card */
.thermal-testimonial-slide { margin-right: 32px; }

.thermal-testimonial {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 337px;
    height: 310px;
    padding: 20px 24px;
    border-radius: 2px;
    overflow: hidden;
}

.thermal-testimonial__quote {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.thermal-testimonial__mark {
    display: block;
    margin-bottom: 20px;
    color: #249e80;
}

/* The quote-mark SVG ships with fill="#33FFCC", but a parent-theme rule forces
   content SVGs white. #content scope + !important restores the brand teal. */
#content .thermal-testimonial__mark path {
    fill: #33ffcc !important;
    stroke: #33ffcc !important;

}

.thermal-testimonial__text {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: 14px;
    line-height: 1.6;
    color: #d4d4d4;
}

.thermal-testimonial__author {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    padding-top: 8px;
    border-top: 1px solid #5c5c5c;
}

.thermal-testimonial__name {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.2;
    color: #ffeded;
}

.thermal-testimonial__role {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.33;
    color: #fff;
}

/* Slick dots — rectangular bars, active one green (matches /work/igi/) */
.thermal-testimonials__track .slick-dots {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 34px 0 0;
    padding: 0;
    list-style: none;
    line-height: 0;
}

.thermal-testimonials__track .slick-dots li {
    width: 40px;
    height: 5px;
    margin: 0;
}

.thermal-testimonials__track .slick-dots li button {
    box-sizing: content-box;
    display: block;
    width: 100%;
    height: 5px;
    /* Enlarge the keyboard/click target without widening the visible bar:
       padding grows the button, negative margins absorb it so the row height
       and 10px gaps are unchanged, and background-clip paints only the bar. */
    padding: 14px 5px;
    margin: -14px -5px;
    border: 0;
    border-radius: 0;
    background-color: rgba(55, 55, 55, 0.43);
    background-clip: content-box;
    font-size: 0;
    line-height: 0;
    color: transparent;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.thermal-testimonials__track .slick-dots li button:before { content: none; }

.thermal-testimonials__track .slick-dots li.slick-active button { background-color: #14fed7; }

@media (min-width: 992px) {
    .thermal-testimonial-slide { margin-right: 52px; }
    .thermal-testimonial { width: 472px; }
}

/* Testimonials — fade overflowing quote text and shadow the peeking card
   (matches the comp's clipped/faded last card). Blends to page bg #131313. */
.thermal-testimonial__quote { position: relative; }


.thermal-testimonials__track { position: relative; }

.thermal-testimonials__track::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 310px;
    width: 260px;
    background: linear-gradient(to right, rgba(19, 19, 19, 0), #131313);
    pointer-events: none;
    z-index: 2;
}

/* Testimonials — cards grow to the full quote (no clip); equal-height to the
   tallest card via a flex slick-track; author pinned to the bottom. */
.thermal-testimonial { height: auto; overflow: visible; }
.thermal-testimonial__quote { flex: 0 1 auto; overflow: visible; }
.thermal-testimonial__quote::after { display: none; }
.thermal-testimonial__author { margin-top: auto; }

.thermal-testimonials__track .slick-track { display: flex; }
.thermal-testimonials__track .slick-slide { height: auto; flex: 0 0 auto; }
.thermal-testimonial-slide { display: flex; height: auto; }
.thermal-testimonial-slide > .thermal-testimonial { flex: 1 1 auto; }

/* Peek shadow spans the full (now variable) card height */
.thermal-testimonials__track::after { height: auto; top: 0; bottom: 0; }

/* Revert flex equal-height attempt — equal heights are handled in JS
   (wpk_testimonials_carousel → equalize) which is reliable with variableWidth. */
.thermal-testimonials__track .slick-track { display: block; }
.thermal-testimonial-slide > .thermal-testimonial { flex: 1 1 auto; }

/* Peek fade via opacity (computed in JS markPeek) instead of a colored gradient,
   so it blends over any background and never paints a dark box. */
.thermal-testimonials__track::after { display: none; }
.thermal-testimonials .slick-slide { transition: opacity 0.3s ease; }
.thermal-testimonials .slick-slide.is-peek { opacity: 0.6; }

/* Author sits right under the quote (gap stays at the card bottom on short quotes). */
.thermal-testimonial__author { margin-top: 0; }

/* Author at the end of the card block (bottom-aligned across cards) — as in the
   design. Overrides the earlier "right under the quote" rule. */
.thermal-testimonial__author { margin-top: auto; }