/* static/css/landing/featured.css */

:root {
    --hexaco-light: #F9FF9F;
    --hexaco-dark: #CED561;
    --eq-light: #FFD5C4;
    --eq-dark: #f79080;
    --enneagram-light: #C2E5E5;
    --enneagram-dark: #64B5B5;
    --sq-light: #D1E6F9;
    --sq-dark: #A8CEF2;
    --aq-light: #FFCB9B;
    --aq-dark: #F3AC6A;
    --btn-color: #274285;
}

.test-list {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, 1fr);
    margin: 30px 0;
}

.test-thumbnail {
    width: 100%;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.test-thumbnail .test-thumbnail-info{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    z-index: 100;
}

.test-name-bg {
    font-family: "Libre Baskerville", serif;
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 2em;
    font-weight: bold;
    opacity: 0.6;
    z-index: 1; /* Behind the icon */
    text-transform: uppercase;
    white-space: nowrap;
    color: white; /* Ensures visibility */
    pointer-events: none;
}

/* Dynamic Background Text Based on t.slug */
.test-name-bg.hexaco-personality-test::before { content: "HEXACO"; }
.test-name-bg.emotional-intelligence-test::before { content: "EQ"; }
.test-name-bg.enneagram-test::before { content: "ENNEAGRAM"; }
.test-name-bg.social-quotient-test::before { content: "SOCIAL QUOTIENT"; }
.test-name-bg.adversity-quotient-test::before { content: "ADAPTIVE IQ"; }

.test-thumbnail h3 {
    font-size: 1.2em;
    font-weight: bold;
    position: relative;
    z-index: 2;
    margin-bottom: 0;
}

.test-thumbnail p {
    text-align: left;
    flex-grow: 1;
    position: relative;
    z-index: 2;
    margin-bottom: 0;
}

.test-thumbnail .test-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0.05;
    z-index: 1;
}

.test-thumbnail .test-thumbnail-icon{
    width: auto;
    height: 70px;
    margin-left: auto;
}

/* Specific Test Gradients */
.test-thumbnail.hexaco-personality-test { background: linear-gradient(135deg, var(--hexaco-light), var(--hexaco-dark)); }
.test-thumbnail.emotional-intelligence-test { background: linear-gradient(135deg, var(--eq-light), var(--eq-dark)); }
.test-thumbnail.enneagram-test { background: linear-gradient(135deg, var(--enneagram-light), var(--enneagram-dark)); }
.test-thumbnail.social-quotient-test { background: linear-gradient(135deg, var(--sq-light), var(--sq-dark)); }
.test-thumbnail.adversity-quotient-test { background: linear-gradient(135deg, var(--aq-light), var(--aq-dark)); }

/* Responsive Design */
@media (max-width: 768px) {

    .test-list{
        grid-template-columns: repeat(1, 1fr);
    }

}