/* ==========================================================================
   MathB Events Theme
   Cards
   ========================================================================== */

/* ==========================================================================
   Base Card
   ========================================================================== */

.mathb-card {

    position: relative;

    display: flex;

    flex-direction: column;

    height: 100%;

    overflow: hidden;

    background: var(--mathb-white);

    border-radius: var(--mathb-radius-xl);

    box-shadow: var(--mathb-shadow-sm);

    transition:
        transform var(--mathb-transition),
        box-shadow var(--mathb-transition);

}

.mathb-card:hover {

    transform: translateY(-8px);

    box-shadow: var(--mathb-shadow-lg);

}

/* ==========================================================================
   Card Image
   ========================================================================== */

.mathb-card-image {

    position: relative;

    overflow: hidden;

    aspect-ratio: 16 / 10;

}

.mathb-card-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .6s ease;

}

.mathb-card:hover .mathb-card-image img {

    transform: scale(1.08);

}

/* ==========================================================================
   Card Body
   ========================================================================== */

.mathb-card-body {

    display: flex;

    flex-direction: column;

    flex: 1;

    padding: 2rem;

}

.mathb-card-title {

    margin-bottom: 1rem;

}

.mathb-card-title a {

    color: var(--mathb-heading);

}

.mathb-card-title a:hover {

    color: var(--mathb-primary);

}

.mathb-card-text {

    flex: 1;

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

}

.mathb-card-footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 2rem;

}

/* ==========================================================================
   Card Badge
   ========================================================================== */

.mathb-card-badge {

    position: absolute;

    top: 1rem;
    left: 1rem;

    z-index: 5;

    padding: .5rem 1rem;

    color: var(--mathb-white);

    background: var(--mathb-primary);

    border-radius: var(--mathb-radius-pill);

    font-size: .8rem;

    font-weight: var(--mathb-fw-semibold);

}

/* ==========================================================================
   Service Cards
   ========================================================================== */

.mathb-service-card {

    text-align: center;

}

.mathb-service-card .mathb-card-body {

    align-items: center;

}

.mathb-service-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 82px;
    height: 82px;

    margin-bottom: 2rem;

    color: var(--mathb-primary);

    background: rgba(214,177,106,.12);

    border-radius: 50%;

    transition:
        background var(--mathb-transition),
        color var(--mathb-transition);

}

.mathb-service-card:hover .mathb-service-icon {

    color: var(--mathb-white);

    background: var(--mathb-primary);

}

/* ==========================================================================
   Project Cards
   ========================================================================== */

.mathb-project-card {

    overflow: hidden;

}

.mathb-project-meta {

    display: flex;

    gap: 1rem;

    margin-bottom: 1rem;

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

    font-size: .9rem;

}

.mathb-project-category {

    color: var(--mathb-primary);

    font-weight: var(--mathb-fw-semibold);

}

/* ==========================================================================
   Blog Cards
   ========================================================================== */

.mathb-post-card {

    display: flex;

    flex-direction: column;

}

.mathb-post-date {

    margin-bottom: .75rem;

    color: var(--mathb-primary);

    font-size: .9rem;

    font-weight: var(--mathb-fw-semibold);

}

.mathb-post-author {

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

}

/* ==========================================================================
   Team Cards
   ========================================================================== */

.mathb-team-card {

    text-align: center;

}

.mathb-team-photo {

    aspect-ratio: 1;

    overflow: hidden;

}

.mathb-team-photo img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}

.mathb-team-role {

    margin-top: .5rem;

    color: var(--mathb-primary);

    font-size: .95rem;

}

/* ==========================================================================
   Portfolio Cards
   ========================================================================== */

.mathb-portfolio-card {

    position: relative;

    overflow: hidden;

}

.mathb-portfolio-card .mathb-card-image {

    aspect-ratio: 4 / 3;

}

.mathb-portfolio-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 2rem;

    background: linear-gradient(
        180deg,
        rgba(17,24,39,0) 0%,
        rgba(17,24,39,.85) 100%
    );

    opacity: 0;

    transition: opacity var(--mathb-transition);

}

.mathb-portfolio-card:hover .mathb-portfolio-overlay {

    opacity: 1;

}

.mathb-portfolio-overlay h3 {

    margin-bottom: .5rem;

    color: var(--mathb-white);

}

.mathb-portfolio-overlay p {

    margin: 0;

    color: rgba(255,255,255,.80);

}

/* ==========================================================================
   Testimonial Cards
   ========================================================================== */

.mathb-testimonial-card {

    position: relative;

}

.mathb-testimonial-card::before {

    content: "“";

    position: absolute;

    top: 1.25rem;
    right: 1.5rem;

    font-size: 5rem;

    line-height: 1;

    color: rgba(214,177,106,.15);

}

.mathb-testimonial-rating {

    display: flex;

    gap: .35rem;

    margin-bottom: 1.5rem;

    color: var(--mathb-primary);

}

.mathb-testimonial-avatar {

    display: flex;

    align-items: center;

    gap: 1rem;

    margin-top: 2rem;

}

.mathb-testimonial-avatar img {

    width: 58px;
    height: 58px;

    border-radius: 50%;

    object-fit: cover;

}

/* ==========================================================================
   Pricing Cards
   ========================================================================== */

.mathb-pricing-card {

    position: relative;

    text-align: center;

}

.mathb-pricing-featured {

    transform: scale(1.04);

    border: 2px solid var(--mathb-primary);

}

.mathb-pricing-price {

    margin: 2rem 0;

    color: var(--mathb-primary);

    font-size: 3rem;

    font-weight: var(--mathb-fw-bold);

}

.mathb-pricing-price small {

    font-size: 1rem;

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

}

.mathb-pricing-features {

    margin: 2rem 0;

    padding: 0;

    list-style: none;

}

.mathb-pricing-features li {

    margin-bottom: .9rem;

}

/* ==========================================================================
   Event Cards
   ========================================================================== */

.mathb-event-card {

    display: grid;

    grid-template-columns: 110px 1fr;

    gap: 2rem;

    align-items: center;

}

.mathb-event-date {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    aspect-ratio: 1;

    color: var(--mathb-white);

    background: var(--mathb-primary);

    border-radius: var(--mathb-radius-lg);

}

.mathb-event-day {

    font-size: 2rem;

    font-weight: var(--mathb-fw-bold);

}

.mathb-event-month {

    text-transform: uppercase;

    letter-spacing: .08em;

    font-size: .85rem;

}

/* ==========================================================================
   WooCommerce Product Cards
   ========================================================================== */

.mathb-product-card {

    position: relative;

    overflow: hidden;

    background: var(--mathb-white);

    border-radius: var(--mathb-radius-xl);

    box-shadow: var(--mathb-shadow-sm);

    transition:
        transform var(--mathb-transition),
        box-shadow var(--mathb-transition);

}

.mathb-product-card:hover {

    transform: translateY(-8px);

    box-shadow: var(--mathb-shadow-lg);

}

.mathb-product-image {

    overflow: hidden;

    aspect-ratio: 1;

}

.mathb-product-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .6s ease;

}

.mathb-product-card:hover .mathb-product-image img {

    transform: scale(1.08);

}

.mathb-product-content {

    padding: 2rem;

}

.mathb-product-category {

    margin-bottom: .5rem;

    color: var(--mathb-primary);

    font-size: .85rem;

    text-transform: uppercase;

    letter-spacing: .08em;

}

.mathb-product-title {

    margin-bottom: .75rem;

}

.mathb-product-price {

    margin-top: 1.5rem;

    color: var(--mathb-heading);

    font-size: 1.35rem;

    font-weight: var(--mathb-fw-bold);

}

/* ==========================================================================
   Card Actions
   ========================================================================== */

.mathb-card-actions {

    display: flex;

    align-items: center;

    gap: 1rem;

    margin-top: 2rem;

}

.mathb-card-actions .mathb-button {

    flex: 1;

}

/* ==========================================================================
   Card Hover Overlay
   ========================================================================== */

.mathb-card-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 1rem;

    background: rgba(17,24,39,.72);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity var(--mathb-transition),
        visibility var(--mathb-transition);

}

.mathb-card:hover .mathb-card-overlay {

    opacity: 1;

    visibility: visible;

}

/* ==========================================================================
   Overlay Buttons
   ========================================================================== */

.mathb-card-overlay a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 52px;

    height: 52px;

    color: var(--mathb-white);

    background: var(--mathb-primary);

    border-radius: 50%;

    transition:
        background var(--mathb-transition),
        transform var(--mathb-transition);

}

.mathb-card-overlay a:hover {

    background: var(--mathb-primary-dark);

    transform: scale(1.08);

}

/* ==========================================================================
   Card Ribbon
   ========================================================================== */

.mathb-card-ribbon {

    position: absolute;

    top: 1.5rem;

    right: -3rem;

    z-index: 5;

    width: 160px;

    padding: .55rem 0;

    text-align: center;

    color: var(--mathb-white);

    background: var(--mathb-primary);

    font-size: .8rem;

    font-weight: var(--mathb-fw-semibold);

    transform: rotate(45deg);

}

/* ==========================================================================
   Card Meta
   ========================================================================== */

.mathb-card-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 1rem;

    margin-bottom: 1rem;

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

    font-size: .9rem;

}

.mathb-card-meta span {

    display: inline-flex;

    align-items: center;

    gap: .35rem;

}

/* ==========================================================================
   Card Tags
   ========================================================================== */

.mathb-card-tags {

    display: flex;

    flex-wrap: wrap;

    gap: .5rem;

    margin-top: 1.5rem;

}

.mathb-card-tags a {

    display: inline-flex;

    align-items: center;

    padding: .45rem .85rem;

    color: var(--mathb-text);

    background: var(--mathb-light);

    border-radius: var(--mathb-radius-pill);

    font-size: .8rem;

    transition:
        background var(--mathb-transition),
        color var(--mathb-transition);

}

.mathb-card-tags a:hover {

    color: var(--mathb-white);

    background: var(--mathb-primary);

}

/* ==========================================================================
   WooCommerce Badges
   ========================================================================== */

.mathb-product-card .onsale {

    position: absolute;

    top: 1rem;

    left: 1rem;

    z-index: 5;

    padding: .45rem .9rem;

    color: var(--mathb-white);

    background: var(--mathb-primary);

    border-radius: var(--mathb-radius-pill);

    font-size: .8rem;

    font-weight: var(--mathb-fw-semibold);

}

.mathb-product-card.outofstock {

    opacity: .75;

}

.mathb-product-card.outofstock::after {

    content: "Out of stock";

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--mathb-white);

    background: rgba(17,24,39,.72);

    font-size: 1.2rem;

    font-weight: var(--mathb-fw-bold);

}

.mathb-product-card.featured {

    border: 2px solid var(--mathb-primary);

}

/* ==========================================================================
   Card Footer Variants
   ========================================================================== */

.mathb-card-footer-between {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

}

.mathb-card-footer-center {

    display: flex;

    justify-content: center;

}

.mathb-card-footer-end {

    display: flex;

    justify-content: flex-end;

}

/* ==========================================================================
   Equal Height Cards
   ========================================================================== */

.mathb-card-grid {

    display: grid;

    gap: var(--mathb-grid-gap);

}

.mathb-card-grid > * {

    display: flex;

}

.mathb-card-grid .mathb-card {

    width: 100%;

}

/* ==========================================================================
   Card Utilities
   ========================================================================== */

.mathb-card-shadow-none {

    box-shadow: none;

}

.mathb-card-shadow-sm {

    box-shadow: var(--mathb-shadow-sm);

}

.mathb-card-shadow-md {

    box-shadow: var(--mathb-shadow-md);

}

.mathb-card-shadow-lg {

    box-shadow: var(--mathb-shadow-lg);

}

.mathb-card-rounded {

    border-radius: var(--mathb-radius-xl);

}

.mathb-card-border {

    border: 1px solid var(--mathb-border);

}

.mathb-card-dark {

    color: var(--mathb-white);

    background: var(--mathb-dark);

}

.mathb-card-dark h1,
.mathb-card-dark h2,
.mathb-card-dark h3,
.mathb-card-dark h4,
.mathb-card-dark h5,
.mathb-card-dark h6 {

    color: var(--mathb-white);

}

.mathb-card-dark p {

    color: rgba(255,255,255,.82);

}

/* ==========================================================================
   End
   ========================================================================== */