/**
 * Cards Component
 *
 * @package CloveTheme
 * @since 1.0.0
 */

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--color-surface-primary);
    border-radius: var(--card-radius);
    overflow: hidden;
    transition:
        transform var(--duration-300) var(--ease-out),
        box-shadow var(--duration-300) var(--ease-out);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow-hover);
}

.card__media {
    position: relative;
    aspect-ratio: 16 / 10; /* Default product card ratio */
    overflow: hidden;
    background-color: var(--color-surface-secondary);
}

.card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-500) var(--ease-out);
}

.card:hover .card__media img {
    transform: scale(1.05);
}

.card__badge {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    padding: var(--space-1) var(--space-2-5);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text-inverse);
    background: var(--gradient-brand);
    border-radius: var(--radius-md);
    z-index: 1;
}

.card__badge--sale {
    background: var(--color-error);
}

.card__badge--new {
    background: var(--color-success);
}

.card__content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--card-padding);
}

.card__category {
    margin-block-end: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-brand-primary);
}

.card__title {
    margin: 0 0 var(--space-2);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    color: var(--color-text-primary);
}

.card__title a {
    color: inherit;
    transition: color var(--duration-150) var(--ease-out);
}

.card__title a:hover {
    color: var(--color-brand-primary);
}

.card__excerpt {
    margin-block-end: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-block-start: auto;
    padding-block-start: var(--space-4);
    border-top: 1px solid var(--color-border-subtle);
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
}

.card__meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
}

.card__meta-item i {
    font-size: 1rem;
}

/* Read More Link */
.card__read-more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-block-start: var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-brand-primary);
    text-decoration: none;
    transition: gap var(--duration-200) var(--ease-out);
}

.card__read-more:hover {
    gap: var(--space-2);
}

.card__read-more i {
    font-size: 0.875rem;
    transition: transform var(--duration-200) var(--ease-out);
}

.card__read-more:hover i {
    transform: translateX(2px);
}

.card__price {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-block-start: auto;
    padding-block-start: var(--space-4);
}

.card__price-current {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
}

.card__price-original {
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
    text-decoration: line-through;
}

.card__actions {
    display: flex;
    gap: var(--space-2);
    margin-block-start: var(--space-4);
}

.card__actions .btn {
    flex: 1;
}

.card--product {
    border: 1px solid rgba(139, 92, 246, 0.15);
    box-shadow: var(--shadow-brand);
    transition:
        transform var(--duration-300) var(--ease-out),
        box-shadow var(--duration-300) var(--ease-out),
        border-color var(--duration-300) var(--ease-out);
}

.card--product:hover {
    box-shadow: var(--shadow-brand-hover);
    border-color: rgba(139, 92, 246, 0.2);
}

.card--product .card__content {
    padding: var(--space-6);
}

.card--product .card__media {
    aspect-ratio: 16 / 10; /* Premium modern aspect ratio */
}

.card--post {
    background-color: transparent;
}

.card--post .card__media {
    aspect-ratio: 16 / 9; /* Standard content aspect ratio */
    border-radius: var(--radius-xl);
}

.card--post .card__content {
    padding: var(--space-4) 0 0;
}

.card--featured {
    grid-column: span 2;
}

.card--featured .card__media {
    aspect-ratio: 16 / 9;
}

.card--featured .card__title {
    font-size: var(--text-2xl);
}

@media (max-width: 767px) {
    .card--featured {
        grid-column: span 1;
    }
}

.card--horizontal {
    flex-direction: row;
}

.card--horizontal .card__media {
    flex-shrink: 0;
    width: 40%;
    aspect-ratio: auto;
}

.card--horizontal .card__content {
    justify-content: center;
}

@media (max-width: 639px) {
    .card--horizontal {
        flex-direction: column;
    }

    .card--horizontal .card__media {
        width: 100%;
        aspect-ratio: 16 / 9;
    }
}

.cards-grid {
    display: grid;
    gap: var(--space-6);
}

.cards-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.cards-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.cards-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1023px) {
    .cards-grid--4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .cards-grid--3,
    .cards-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 479px) {
   .cards-grid--2,
    .cards-grid--3,
    .cards-grid--4 {
        grid-template-columns: 1fr;
    }
}

/* Posts Grid - For blog post listings */
.posts-grid {
    display: grid;
    gap: var(--space-6);
}

.posts-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.posts-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 767px) {
    .posts-grid--3 {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-5);
    }
}

@media (max-width: 479px) {
    .posts-grid--2,
    .posts-grid--3 {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
}
/* ==========================================================================
   FEATURED PRODUCTS GRID & CARDS
   Unified design for Home, Archive, and Related sections
   ========================================================================== */

.featured__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
}

@media (max-width: 991px) {
    .featured__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }
}

@media (max-width: 767px) {
    .featured__grid {
        grid-template-columns: 1fr;
    }
}

.featured-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-surface-primary);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-brand);
    overflow: hidden;
    transition:
        transform var(--duration-300) var(--ease-out),
        box-shadow var(--duration-300) var(--ease-out),
        border-color var(--duration-300) var(--ease-out);
}

.featured-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-2xl);
    padding: 2px;
    background: linear-gradient(135deg, transparent 40%, rgba(99, 102, 241, 0.4) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--duration-300) var(--ease-out);
    pointer-events: none;
    z-index: 1;
}

.featured-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-brand-hover);
    border-color: rgba(139, 92, 246, 0.2);
}

.featured-card:hover::before {
    opacity: 1;
}

.featured-card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-surface-secondary) 0%, var(--color-surface-tertiary) 100%);
}

.featured-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-500) var(--ease-out);
}

.featured-card:hover .featured-card__media img {
    transform: scale(1.08);
}

.featured-card__badge {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-1-5) var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text-inverse);
    background: var(--gradient-brand);
    border-radius: var(--radius-full);
    box-shadow: 0 4px 12px -2px rgba(99, 102, 241, 0.4);
    z-index: 2;
}

.featured-card__badge::before {
    content: '★';
    font-size: 0.625rem;
}

.featured-card__content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-6);
}

.featured-card__title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
}

.featured-card__title a {
    color: var(--color-text-primary);
    text-decoration: none;
    transition: color var(--duration-200) var(--ease-out);
}

.featured-card__title a:hover {
    color: var(--color-brand-primary);
}

.featured-card__excerpt {
    margin: 0 0 var(--space-5);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.featured-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-end: var(--space-5);
}

.featured-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-1) var(--space-2-5);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
    background: var(--color-surface-secondary);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-full);
}

.featured-card__meta i {
    color: var(--color-brand-primary);
}

.featured-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-block-start: auto;
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--color-border-subtle);
}

.featured-card__price {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-secondary) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.featured-card__price small {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-success);
    background: none;
    -webkit-text-fill-color: var(--color-success);
}

.featured-card__details-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-block-start: var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-brand-primary);
    text-decoration: none;
}

.featured-card__details-link:hover {
    color: var(--color-brand-secondary);
}