/*
File: swClasses.css
Date: 2026-02-14
Author: klp
Workspace: SketchWaveTNT2026-02-12-Stg1
Purpose: Reusable card-based layout styles for SketchWaveJS class listing pages

*/

/* ========================================
   CARD STYLES
   ======================================== */

.card{
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}

.card:hover{
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.card-img-top{
    height: 180px;
    object-fit: cover;
    background-color: #f8f9fa;
}

#colorWheel{
    object-fit: contain;
    height: 110%;
}

.imgCardAdjustment{
    object-fit: contain;
    height: 90%;
}

.card-title{
    color: #C18335;
    font-family: 'Oswald', sans-serif;
    font-size: 1.25rem; /* Size h2 elements like h5 */
}

/* ========================================
   BUTTON STYLES
   ======================================== */

.btn-custom{
    background-color: #C18335;
    border-color: #C18335;
    color: white;
}

.btn-custom:hover{
    background-color: #a16d2a;
    border-color: #a16d2a;
    color: white;
}

/* ========================================
   BADGE STYLES
   ======================================== */

.badge-custom{
    background-color: #C18335;
}