/* ========================================
   PHASE 3: CARDS SYSTEM
   ======================================== 
   
   Architecture:
   - Base .card class with modifiers
   - Shapes: --sharp, --rounded, --pill
   - Elevations: --flat, --raised, --floating
   - Borders: --bordered, --border-accent, --border-left, --border-top
   - Sizes: --sm, --md, --lg
   - Hover effects: lift, scale, glow, border, shadow, bg
   - Image hovers: zoom, overlay, grayscale, shine
   
   Card Types:
   - Service cards (svc-01 to svc-12)
   - Testimonial cards (tst-01 to tst-08)
   - Team cards (tm-01 to tm-06)
   - Blog cards (blg-01 to blg-06)
   
   Total: 32 card variants + unlimited combinations
   ======================================== */

/* ----------------------------------------
   CARD BASE
   ---------------------------------------- */

.card {
    --card-padding: var(--space-6);
    --card-gap: var(--space-4);
    --card-radius: var(--radius-lg);

    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--card-bg, var(--bg-surface));
    border-radius: var(--card-radius);
    overflow: hidden;
    transition: all var(--duration-normal) var(--ease-in-out);
}

/* Card with border */
.card--bordered {
    border: 1px solid var(--card-border);
}

/* Card with shadow */
.card--raised {
    box-shadow: var(--card-shadow);
}

.card--floating {
    box-shadow: var(--shadow-lg);
}

/* Flat card (no shadow, no border by default) */
.card--flat {
    box-shadow: none;
}


/* ----------------------------------------
   CARD SHAPES
   ---------------------------------------- */

.card--sharp {
    --card-radius: 0;
}

.card--rounded {
    --card-radius: var(--radius-lg);
}

.card--rounded-lg {
    --card-radius: var(--radius-xl);
}

.card--rounded-xl {
    --card-radius: var(--radius-2xl);
}

.card--pill {
    --card-radius: 9999px;
}


/* ----------------------------------------
   CARD SIZES
   ---------------------------------------- */

.card--sm {
    --card-padding: var(--space-4);
    --card-gap: var(--space-3);
}

.card--md {
    --card-padding: var(--space-6);
    --card-gap: var(--space-4);
}

.card--lg {
    --card-padding: var(--space-8);
    --card-gap: var(--space-5);
}

.card--xl {
    --card-padding: var(--space-10);
    --card-gap: var(--space-6);
}


/* ----------------------------------------
   CARD BORDERS
   ---------------------------------------- */

/* Accent border on hover */
.card--border-accent {
    border: 1px solid var(--card-border);
}

.card--border-accent:hover {
    border-color: var(--primary);
}

/* Left accent border */
.card--border-left {
    border-left: 4px solid var(--primary);
}

.card--border-left-thick {
    border-left: 6px solid var(--primary);
}

/* Top accent border */
.card--border-top {
    border-top: 4px solid var(--primary);
}

/* Bottom accent border */
.card--border-bottom {
    border-bottom: 4px solid var(--primary);
}

/* Gradient border (uses pseudo-element) */
.card--border-gradient {
    position: relative;
    border: none;
    background: var(--card-bg);
}

.card--border-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}


/* ----------------------------------------
   CARD HOVER EFFECTS
   ---------------------------------------- */

/* Lift - rises up with shadow */
.card--hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.card--hover-lift-sm:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.card--hover-lift-lg:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

/* Scale - grows slightly */
.card--hover-scale:hover {
    transform: scale(1.02);
}

.card--hover-scale-sm:hover {
    transform: scale(1.01);
}

.card--hover-scale-lg:hover {
    transform: scale(1.05);
}

/* Glow - primary color glow */
.card--hover-glow:hover {
    box-shadow: 0 0 0 4px var(--primary-soft), var(--shadow-md);
}

.card--hover-glow-lg:hover {
    box-shadow: 0 0 0 6px var(--primary-soft), 0 0 30px var(--primary-soft);
}

/* Border - border changes to primary */
.card--hover-border:hover {
    border-color: var(--primary);
}

/* Shadow - shadow increases */
.card--hover-shadow:hover {
    box-shadow: var(--shadow-lg);
}

.card--hover-shadow-xl:hover {
    box-shadow: var(--shadow-xl);
}

/* Background change */
.card--hover-bg:hover {
    background: var(--bg-surface-alt);
}

.card--hover-bg-accent:hover {
    background: var(--primary-soft);
}

/* Combined hover effects */
.card--hover-pop:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: var(--shadow-lg);
}


/* ----------------------------------------
   CARD IMAGE
   ---------------------------------------- */

.card__image {
    position: relative;
    width: 100%;
    overflow: hidden;
    flex-shrink: 0;
}

.card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-in-out), filter var(--duration-normal) var(--ease-in-out);
}

/* Image aspect ratios */
.card__image--aspect-video {
    aspect-ratio: 16 / 9;
}

.card__image--aspect-wide {
    aspect-ratio: 2 / 1;
}

.card__image--aspect-standard {
    aspect-ratio: 4 / 3;
}

.card__image--aspect-square {
    aspect-ratio: 1;
}

.card__image--aspect-portrait {
    aspect-ratio: 3 / 4;
}

/* Fixed height images */
.card__image--sm {
    height: 10rem;
}

.card__image--md {
    height: 12.5rem;
}

.card__image--lg {
    height: 15rem;
}

.card__image--xl {
    height: 18.75rem;
}

/* Image hovers - zoom */
.card--hover-zoom .card__image img,
.card__image--hover-zoom img {
    transition: transform var(--duration-slow) var(--ease-in-out);
}

.card--hover-zoom:hover .card__image img,
.card__image--hover-zoom:hover img {
    transform: scale(1.08);
}

.card--hover-zoom-lg:hover .card__image img {
    transform: scale(1.15);
}

/* Image hovers - grayscale */
.card--hover-grayscale .card__image img {
    filter: grayscale(100%);
}

.card--hover-grayscale:hover .card__image img {
    filter: grayscale(0%);
}

/* Reverse - starts color, goes grayscale */
.card--hover-grayscale-reverse:hover .card__image img {
    filter: grayscale(100%);
}

/* Image hovers - brightness */
.card--hover-brighten:hover .card__image img {
    filter: brightness(1.1);
}

.card--hover-darken:hover .card__image img {
    filter: brightness(0.9);
}

/* Image hover - shine effect */
.card__image--hover-shine {
    position: relative;
}

.card__image--hover-shine::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent);
    transition: left var(--duration-slow) var(--ease-in-out);
}

.card:hover .card__image--hover-shine::after,
.card__image--hover-shine:hover::after {
    left: 100%;
}


/* ----------------------------------------
   CARD IMAGE OVERLAY
   ---------------------------------------- */

.card__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--card-padding);
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.8) 0%,
            rgba(0, 0, 0, 0.4) 50%,
            transparent 100%);
    color: white;
    opacity: 1;
    transition: opacity var(--duration-normal) var(--ease-in-out);
}

/* Overlay that appears on hover */
.card__overlay--hover {
    opacity: 0;
}

.card:hover .card__overlay--hover {
    opacity: 1;
}

/* Full overlay (solid) */
.card__overlay--full {
    background: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Accent overlay */
.card__overlay--accent {
    background: linear-gradient(to top,
            rgba(var(--primary-rgb, 13, 148, 136), 0.9) 0%,
            rgba(var(--primary-rgb, 13, 148, 136), 0.6) 50%,
            transparent 100%);
}

/* Light overlay */
.card__overlay--light {
    background: linear-gradient(to top,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.7) 50%,
            transparent 100%);
    color: var(--text-primary);
}

/* Blur overlay */
.card__overlay--blur {
    backdrop-filter: blur(8px);
    background: rgba(0, 0, 0, 0.3);
}


/* ----------------------------------------
   CARD ICON
   ---------------------------------------- */

.card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 24px;
    color: var(--primary);
    transition: all var(--duration-normal) var(--ease-in-out);
}

/* Icon sizes */
.card__icon--sm {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.125rem;
}

.card__icon--md {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.5rem;
}

.card__icon--lg {
    width: 4.5rem;
    height: 4.5rem;
    font-size: 2rem;
}

.card__icon--xl {
    width: 6rem;
    height: 6rem;
    font-size: 2.5rem;
}

/* Icon shapes */
.card__icon--circle {
    border-radius: 50%;
    background: var(--primary-soft);
}

.card__icon--rounded {
    border-radius: var(--radius-lg);
    background: var(--primary-soft);
}

.card__icon--square {
    border-radius: var(--radius-sm);
    background: var(--primary-soft);
}

/* Icon without background */
.card__icon--plain {
    background: transparent;
}

/* Icon with border */
.card__icon--outlined {
    background: transparent;
    border: 2px solid var(--primary);
}

/* Solid icon (filled background) */
.card__icon--solid {
    background: var(--primary);
    color: var(--on-primary);
}

/* Icon hover effects */
.card:hover .card__icon--hover-scale {
    transform: scale(1.1);
}

.card:hover .card__icon--hover-rotate {
    transform: rotate(10deg);
}

.card:hover .card__icon--hover-bounce {
    animation: icon-bounce 0.5s ease;
}

@keyframes icon-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

.card:hover .card__icon--hover-fill {
    background: var(--primary);
    color: var(--on-primary);
}


/* ----------------------------------------
   CARD BODY
   ---------------------------------------- */

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

/* No top padding when after image */
.card__image+.card__body {
    padding-top: var(--card-padding);
}

/* Centered body */
.card__body--centered {
    text-align: center;
    align-items: center;
}


/* ----------------------------------------
   CARD CONTENT ELEMENTS
   ---------------------------------------- */

.card__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
}

.card__title--sm {
    font-size: var(--text-base);
}

.card__title--lg {
    font-size: var(--text-xl);
}

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

/* Title as link */
.card__title a {
    color: inherit;
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-in-out);
}

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

.card__subtitle {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-weight: 500;
}

.card__text {
    margin: 0;
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--text-secondary);
}

.card__text--sm {
    font-size: var(--text-sm);
}

/* Line clamp for text */
.card__text--clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card__text--clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card__text--clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ----------------------------------------
   CARD META (date, author, category)
   ---------------------------------------- */

.card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

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

.card__meta-item i {
    font-size: 14px;
    opacity: 0.7;
}

.card__meta-divider {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-muted);
    opacity: 0.5;
}

/* Meta as tags */
.card__meta--tags {
    gap: var(--space-2);
}

.card__tag {
    padding: var(--space-1) 0.625rem;
    font-size: var(--text-xs);
    font-weight: 500;
    background: var(--primary-soft);
    color: var(--primary);
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: all var(--duration-fast) var(--ease-in-out);
}

.card__tag:hover {
    background: var(--primary);
    color: var(--on-primary);
}


/* ----------------------------------------
   CARD FOOTER
   ---------------------------------------- */

.card__footer {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--card-padding);
    padding-top: 0;
    margin-top: auto;
}

/* Footer with border top */
.card__footer--bordered {
    padding-top: var(--card-padding);
    margin-top: var(--card-gap);
    border-top: 1px solid var(--border);
}

/* Footer alignment */
.card__footer--between {
    justify-content: space-between;
}

.card__footer--end {
    justify-content: flex-end;
}

.card__footer--center {
    justify-content: center;
}


/* ----------------------------------------
   CARD BADGE (corner badges)
   ---------------------------------------- */

.card__badge {
    position: absolute;
    z-index: 10;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 600;
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: var(--on-primary);
}

/* Badge positions */
.card__badge--top-left {
    top: var(--space-3);
    left: var(--space-3);
}

.card__badge--top-right {
    top: var(--space-3);
    right: var(--space-3);
}

.card__badge--bottom-left {
    bottom: var(--space-3);
    left: var(--space-3);
}

.card__badge--bottom-right {
    bottom: var(--space-3);
    right: var(--space-3);
}

/* Badge variants */
.card__badge--success {
    background: var(--success);
    color: var(--on-success);
}

.card__badge--warning {
    background: var(--warning);
    color: var(--on-warning);
}

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

.card__badge--dark {
    background: rgba(0, 0, 0, 0.7);
    color: white;
}

.card__badge--light {
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-primary);
}

/* Badge shapes */
.card__badge--pill {
    border-radius: var(--radius-full);
}

.card__badge--ribbon {
    padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3);
    border-radius: 0;
    right: 0;
    clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%);
}


/* ----------------------------------------
   CARD PRICE
   ---------------------------------------- */

.card__price {
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
    font-family: var(--font-heading);
}

.card__price-currency {
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--text-secondary);
}

.card__price-value {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--text-primary);
}

.card__price-value--lg {
    font-size: var(--text-3xl);
}

.card__price-period {
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--text-muted);
}

/* Price with "from" */
.card__price-from {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-right: var(--space-1);
}

/* Old price (strikethrough) */
.card__price-old {
    font-size: var(--text-base);
    color: var(--text-muted);
    text-decoration: line-through;
}


/* ----------------------------------------
   CARD LINK / CLICKABLE
   ---------------------------------------- */

/* Full card clickable */
.card--clickable {
    cursor: pointer;
}

.card--clickable:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Stretch link - makes entire card clickable via title link */
.card__link-stretched::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Arrow that appears on hover */
.card__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-8);
    height: var(--space-8);
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.card:hover .card__arrow {
    background: var(--primary);
    color: var(--on-primary);
    transform: translateX(4px);
}

/* Arrow variations */
.card__arrow--outline {
    background: transparent;
    border: 2px solid var(--primary);
}

.card:hover .card__arrow--outline {
    background: var(--primary);
    border-color: var(--primary);
}


/* ========================================
   SERVICE CARDS (svc-01 to svc-12)
   ======================================== */

/* ----------------------------------------
   svc-01: Icon Top Centered
   ---------------------------------------- */

.svc-01 {
    text-align: center;
}

.svc-01 .card__icon {
    margin: 0 auto var(--card-gap);
}

.svc-01 .card__body {
    align-items: center;
}


/* ----------------------------------------
   svc-02: Icon Top Left
   ---------------------------------------- */

.svc-02 .card__icon {
    margin-bottom: var(--card-gap);
}


/* ----------------------------------------
   svc-03: Icon Inline (left of title)
   ---------------------------------------- */

.svc-03 .card__header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.svc-03 .card__icon {
    flex-shrink: 0;
}

.svc-03 .card__header-content {
    flex-grow: 1;
}


/* ----------------------------------------
   svc-04: Image Top
   ---------------------------------------- */

.svc-04 .card__image {
    aspect-ratio: 16 / 10;
}


/* ----------------------------------------
   svc-05: Image Background (overlay)
   ---------------------------------------- */

.svc-05 {
    min-height: 280px;
    color: white;
}

.svc-05 .card__image {
    position: absolute;
    inset: 0;
    height: 100%;
}

.svc-05 .card__body {
    position: relative;
    z-index: 1;
    justify-content: flex-end;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.8) 0%,
            rgba(0, 0, 0, 0.3) 60%,
            transparent 100%);
    height: 100%;
}

.svc-05 .card__title,
.svc-05 .card__text {
    color: white;
}

.svc-05 .card__text {
    opacity: 0.9;
}


/* ----------------------------------------
   svc-06: Horizontal (image left)
   ---------------------------------------- */

.svc-06 {
    flex-direction: row;
}

.svc-06 .card__image {
    width: 40%;
    max-width: 200px;
    aspect-ratio: auto;
    height: auto;
}

.svc-06 .card__body {
    flex: 1;
}

/* Responsive: stack on mobile */
@media (max-width: 639px) {
    .svc-06 {
        flex-direction: column;
    }

    .svc-06 .card__image {
        width: 100%;
        max-width: none;
        aspect-ratio: 16 / 9;
    }
}


/* ----------------------------------------
   svc-07: Horizontal Icon Left
   ---------------------------------------- */

.svc-07 {
    flex-direction: row;
    align-items: flex-start;
}

.svc-07 .card__icon {
    margin: var(--card-padding);
    margin-right: 0;
}

.svc-07 .card__body {
    flex: 1;
}


/* ----------------------------------------
   svc-08: Minimal (title + arrow)
   ---------------------------------------- */

.svc-08 {
    flex-direction: row;
    align-items: center;
    padding: var(--card-padding);
}

.svc-08 .card__body {
    flex: 1;
    padding: 0;
    gap: var(--space-1);
}

.svc-08 .card__arrow {
    flex-shrink: 0;
}


/* ----------------------------------------
   svc-09: With Price
   ---------------------------------------- */

.svc-09 .card__footer {
    justify-content: space-between;
    align-items: center;
}


/* ----------------------------------------
   svc-10: Numbered (01, 02, 03)
   ---------------------------------------- */

.svc-10 .card__number {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: 700;
    color: var(--primary-soft);
    line-height: 1;
    margin-bottom: var(--card-gap);
}

.svc-10--large-number .card__number {
    font-size: var(--text-6xl);
    position: absolute;
    top: var(--card-padding);
    right: var(--card-padding);
    opacity: 0.3;
}


/* ----------------------------------------
   svc-11: Featured / Highlighted
   ---------------------------------------- */

.svc-11 {
    border: 2px solid var(--primary);
    position: relative;
    overflow: visible;
}

/* Badge centered at the top edge */
.svc-11 .card__badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--primary);
    color: var(--on-primary);
    z-index: 2;
}


/* ----------------------------------------
   svc-12: Expandable (accordion-style)
   ---------------------------------------- */

.svc-12 {
    cursor: pointer;
}

.svc-12 .card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--card-padding);
}

.svc-12 .card__expand-icon {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--duration-normal) var(--ease-in-out);
}

.svc-12[aria-expanded="true"] .card__expand-icon {
    transform: rotate(180deg);
}

.svc-12 .card__content {
    padding: 0 var(--card-padding) var(--card-padding);
    display: none;
}

.svc-12[aria-expanded="true"] .card__content {
    display: block;
}


/* ========================================
   TESTIMONIAL CARDS (tst-01 to tst-08)
   ======================================== */

/* ----------------------------------------
   Testimonial Base Elements
   ---------------------------------------- */

.card__quote {
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--text-secondary);
    font-style: italic;
}

.card__quote--lg {
    font-size: var(--text-lg);
}

.card__quote--xl {
    font-size: var(--text-xl);
    line-height: 1.5;
}

/* Quote marks */
.card__quote-mark {
    font-size: var(--text-4xl);
    font-family: Georgia, serif;
    line-height: 1;
    color: var(--primary-soft);
}

.card__quote-mark--lg {
    font-size: var(--text-6xl);
}

/* Author info */
.card__author {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.card__author-image {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.card__author-image--sm {
    width: 2.5rem;
    height: 2.5rem;
}

.card__author-image--lg {
    width: 4rem;
    height: 4rem;
}

.card__author-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.card__author-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--text-base);
}

.card__author-role {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* Rating stars */
.card__rating {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--rating-filled, #FBBF24);
}

.card__rating--sm {
    font-size: 14px;
}

.card__rating--lg {
    font-size: 20px;
}


/* ----------------------------------------
   tst-01: Classic (photo + quote + author)
   ---------------------------------------- */

.tst-01 .card__body {
    gap: var(--space-5);
}

.tst-01 .card__author {
    margin-top: auto;
}


/* ----------------------------------------
   tst-02: Large Quote (quote first, big)
   ---------------------------------------- */

.tst-02 {
    text-align: center;
}

.tst-02 .card__body {
    align-items: center;
}

.tst-02 .card__quote-mark {
    font-size: var(--text-6xl);
}

.tst-02 .card__quote {
    font-size: var(--text-xl);
    max-width: 600px;
}

.tst-02 .card__author {
    flex-direction: column;
    text-align: center;
    gap: var(--space-2);
}


/* ----------------------------------------
   tst-03: Minimal (quote only, no photo)
   ---------------------------------------- */

.tst-03 .card__body {
    gap: var(--space-4);
}

.tst-03 .card__author-info {
    flex-direction: row;
    gap: var(--space-2);
    align-items: center;
}

.tst-03 .card__author-name::after {
    content: '•';
    margin-left: var(--space-2);
    color: var(--text-muted);
}


/* ----------------------------------------
   tst-04: With Service Badge
   ---------------------------------------- */

.tst-04 .card__service {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 500;
    background: var(--bg-surface-alt);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.tst-04 .card__service i {
    color: var(--primary);
}


/* ----------------------------------------
   tst-05: Verified Badge
   ---------------------------------------- */

.tst-05 .card__verified {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--success);
}

.tst-05 .card__verified i {
    font-size: 14px;
}

.tst-05 .card__author-name {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}


/* ----------------------------------------
   tst-06: Video Testimonial (thumbnail)
   ---------------------------------------- */

.tst-06 .card__video {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--card-gap);
}

.tst-06 .card__video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tst-06 .card__video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: var(--on-primary);
    border-radius: 50%;
    font-size: 24px;
    transition: all var(--duration-normal) var(--ease-in-out);
    cursor: pointer;
}

.tst-06 .card__video:hover .card__video-play {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 0 0 8px rgba(var(--primary-rgb), 0.2);
}


/* ----------------------------------------
   tst-07: Social Style (like a tweet/post)
   ---------------------------------------- */

.tst-07 {
    border: 1px solid var(--border);
}

.tst-07 .card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--card-gap);
}

.tst-07 .card__social-icon {
    font-size: 20px;
    color: var(--text-muted);
}

.tst-07 .card__social-icon.bi-google {
    color: #4285F4;
}

.tst-07 .card__social-icon.bi-facebook {
    color: #1877F2;
}

.tst-07 .card__date {
    font-size: var(--text-xs);
    color: var(--text-muted);
}


/* ----------------------------------------
   tst-08: Before/After with Quote
   ---------------------------------------- */

.tst-08 .card__before-after {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-bottom: var(--card-gap);
}

.tst-08 .card__ba-image {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.tst-08 .card__ba-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tst-08 .card__ba-label {
    position: absolute;
    bottom: var(--space-2);
    left: var(--space-2);
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border-radius: var(--radius-sm);
}


/* ========================================
   TEAM CARDS (tm-01 to tm-06)
   ======================================== */

/* ----------------------------------------
   Team Base Elements
   ---------------------------------------- */

.card__avatar {
    width: 7.5rem;
    height: 7.5rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.card__avatar--sm {
    width: 5rem;
    height: 5rem;
}

.card__avatar--lg {
    width: 10rem;
    height: 10rem;
}

.card__avatar--square {
    border-radius: var(--radius-lg);
}

/* Social links */
.card__social {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.card__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--bg-surface-alt);
    color: var(--text-muted);
    text-decoration: none;
    transition: all var(--duration-fast) var(--ease-in-out);
}

.card__social-link:hover {
    background: var(--primary);
    color: var(--on-primary);
}

.card__social-link--sm {
    width: 2rem;
    height: 2rem;
    font-size: var(--text-sm);
}


/* ----------------------------------------
   tm-01: Photo Top + Info
   ---------------------------------------- */

.tm-01 {
    text-align: center;
}

.tm-01 .card__image {
    aspect-ratio: 1;
}

.tm-01 .card__body {
    align-items: center;
}


/* ----------------------------------------
   tm-02: Circular Photo Centered
   ---------------------------------------- */

.tm-02 {
    text-align: center;
}

.tm-02 .card__body {
    align-items: center;
    padding-top: 0;
}

.tm-02 .card__avatar {
    margin-top: calc(var(--card-padding) * -1 - 60px);
    border: 4px solid var(--bg-surface);
    box-shadow: var(--shadow-md);
}

/* Needs a spacer at top */
.tm-02::before {
    content: '';
    display: block;
    height: 60px;
    background: var(--primary-soft);
}


/* ----------------------------------------
   tm-03: Hover Reveal Social
   ---------------------------------------- */

.tm-03 {
    text-align: center;
}

.tm-03 .card__image {
    position: relative;
    aspect-ratio: 3 / 4;
}

.tm-03 .card__social {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-4);
    justify-content: center;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    opacity: 0;
    transform: translateY(10px);
    transition: all var(--duration-normal) var(--ease-in-out);
}

.tm-03:hover .card__social {
    opacity: 1;
    transform: translateY(0);
}

.tm-03 .card__social-link {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.tm-03 .card__social-link:hover {
    background: white;
    color: var(--primary);
}


/* ----------------------------------------
   tm-04: Minimal (photo + name only)
   ---------------------------------------- */

.tm-04 {
    text-align: center;
}

.tm-04 .card__body {
    padding: var(--space-4);
    gap: var(--space-1);
    align-items: center;
}

.tm-04 .card__image {
    aspect-ratio: 1;
}


/* ----------------------------------------
   tm-05: With Bio (more content)
   ---------------------------------------- */

.tm-05 .card__image {
    aspect-ratio: 4 / 3;
}

.tm-05 .card__bio {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.6;
}


/* ----------------------------------------
   tm-06: Horizontal Layout
   ---------------------------------------- */

.tm-06 {
    flex-direction: row;
    align-items: center;
}

.tm-06 .card__avatar {
    margin: var(--card-padding);
    margin-right: 0;
}

.tm-06 .card__body {
    flex: 1;
}

@media (max-width: 639px) {
    .tm-06 {
        flex-direction: column;
        text-align: center;
    }

    .tm-06 .card__avatar {
        margin: var(--card-padding);
        margin-bottom: 0;
    }

    .tm-06 .card__body {
        align-items: center;
    }
}


/* ========================================
   BLOG CARDS (blg-01 to blg-06)
   ======================================== */

/* ----------------------------------------
   Blog Base Elements
   ---------------------------------------- */

.card__category {
    display: inline-block;
    padding: var(--space-1) 0.625rem;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--primary-soft);
    color: var(--primary);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all var(--duration-fast) var(--ease-in-out);
}

.card__category:hover {
    background: var(--primary);
    color: var(--on-primary);
}

.card__date {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.card__read-time {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.card__excerpt {
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--text-secondary);
}


/* ----------------------------------------
   blg-01: Vertical Classic
   ---------------------------------------- */

.blg-01 .card__image {
    aspect-ratio: 16 / 9;
}

.blg-01 .card__meta {
    margin-bottom: var(--space-2);
}


/* ----------------------------------------
   blg-02: Horizontal
   ---------------------------------------- */

.blg-02 {
    flex-direction: row;
}

.blg-02 .card__image {
    width: 40%;
    max-width: 300px;
    aspect-ratio: auto;
}

.blg-02 .card__body {
    flex: 1;
    justify-content: center;
}

@media (max-width: 767px) {
    .blg-02 {
        flex-direction: column;
    }

    .blg-02 .card__image {
        width: 100%;
        max-width: none;
        aspect-ratio: 16 / 9;
    }
}


/* ----------------------------------------
   blg-03: Overlay (text on image)
   ---------------------------------------- */

.blg-03 {
    min-height: 320px;
    color: white;
}

.blg-03 .card__image {
    position: absolute;
    inset: 0;
    height: 100%;
}

.blg-03 .card__body {
    position: relative;
    z-index: 1;
    justify-content: flex-end;
    height: 100%;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.85) 0%,
            rgba(0, 0, 0, 0.4) 50%,
            transparent 100%);
}

.blg-03 .card__title,
.blg-03 .card__excerpt,
.blg-03 .card__meta {
    color: white;
}

.blg-03 .card__meta {
    opacity: 0.8;
}

.blg-03 .card__category {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}


/* ----------------------------------------
   blg-04: Minimal (no image)
   ---------------------------------------- */

.blg-04 {
    border-left: 4px solid var(--primary);
}

.blg-04 .card__body {
    gap: var(--space-3);
}


/* ----------------------------------------
   blg-05: Featured Large
   ---------------------------------------- */

.blg-05 {
    flex-direction: row;
    min-height: 400px;
}

.blg-05 .card__image {
    width: 55%;
}

.blg-05 .card__body {
    flex: 1;
    justify-content: center;
    padding: var(--space-10);
}

.blg-05 .card__title {
    font-size: var(--text-2xl);
}

@media (max-width: 991px) {
    .blg-05 {
        flex-direction: column;
        min-height: auto;
    }

    .blg-05 .card__image {
        width: 100%;
        aspect-ratio: 16 / 9;
    }

    .blg-05 .card__body {
        padding: var(--card-padding);
    }
}


/* ----------------------------------------
   blg-06: With Author (full author info)
   ---------------------------------------- */

.blg-06 .card__image {
    aspect-ratio: 16 / 9;
}

.blg-06 .card__footer {
    border-top: 1px solid var(--border);
    padding-top: var(--card-padding);
}


/* ========================================
   CARD LAYOUTS (for grids of cards)
   ======================================== */

.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);
}

/* Auto-fit responsive */
.cards-grid--auto-sm {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.cards-grid--auto-md {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.cards-grid--auto-lg {
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

/* Masonry-like (CSS columns) */
.cards-masonry {
    columns: 3;
    column-gap: var(--space-6);
}

.cards-masonry .card {
    break-inside: avoid;
    margin-bottom: var(--space-6);
}

.cards-masonry--2 {
    columns: 2;
}

.cards-masonry--4 {
    columns: 4;
}

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

    .cards-masonry--4 {
        columns: 3;
    }
}

@media (max-width: 991px) {

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

    .cards-masonry,
    .cards-masonry--3,
    .cards-masonry--4 {
        columns: 2;
    }
}

@media (max-width: 639px) {

    .cards-grid--2,
    .cards-grid--3,
    .cards-grid--4 {
        grid-template-columns: 1fr;
    }

    .cards-masonry,
    .cards-masonry--2,
    .cards-masonry--3,
    .cards-masonry--4 {
        columns: 1;
    }
}


/* ========================================
   CARD UTILITIES
   ======================================== */

/* Make card horizontal at any breakpoint */
@media (min-width: 640px) {
    .card--horizontal-sm {
        flex-direction: row;
    }

    .card--horizontal-sm .card__image {
        width: 40%;
        max-width: 200px;
    }
}

@media (min-width: 768px) {
    .card--horizontal-md {
        flex-direction: row;
    }

    .card--horizontal-md .card__image {
        width: 40%;
        max-width: 240px;
    }
}

@media (min-width: 1024px) {
    .card--horizontal-lg {
        flex-direction: row;
    }

    .card--horizontal-lg .card__image {
        width: 40%;
        max-width: 280px;
    }
}

/* Equal height cards (for flex parents) */
.card--equal-height {
    height: 100%;
}

/* Card without body padding */
.card--no-padding .card__body {
    padding: 0;
}


/* ========================================
   ACCESSIBILITY
   ======================================== */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    .card,
    .card__image img,
    .card__icon,
    .card__overlay,
    .card__arrow,
    .card__social,
    .card__video-play {
        transition: none;
    }

    .card--hover-lift:hover,
    .card--hover-lift-sm:hover,
    .card--hover-lift-lg:hover,
    .card--hover-scale:hover,
    .card--hover-scale-sm:hover,
    .card--hover-scale-lg:hover,
    .card--hover-pop:hover {
        transform: none;
    }

    .card--hover-zoom:hover .card__image img,
    .card--hover-zoom-lg:hover .card__image img {
        transform: none;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {

    .card--bordered,
    .card--border-accent,
    .card {
        border: 2px solid var(--text-primary);
    }

    .card__title a:hover {
        text-decoration: underline;
    }
}

/* Focus states for clickable cards */
.card--clickable:focus-visible,
.card:focus-within:has(.card__link-stretched) {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ========================================
   CARD FEATURES LIST
   ======================================== 
   
   Universal feature list for any card type.
   Works with service cards, pricing cards, etc.
   ======================================== */

/* ----------------------------------------
   Features List Container
   ---------------------------------------- */

.card__features {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

.card__features--compact {
    gap: var(--space-2);
}

.card__features--spacious {
    gap: var(--space-4);
}

/* With dividers between items */
.card__features--divided .card__feature {
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
}

.card__features--divided .card__feature:last-child {
    padding-bottom: 0;
    border-bottom: none;
}


/* ----------------------------------------
   Feature Item
   ---------------------------------------- */

.card__feature {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--text-secondary);
}

.card__feature--sm {
    gap: 0.625rem;
    font-size: var(--text-sm);
}

.card__feature--lg {
    gap: 0.875rem;
    font-size: var(--text-lg);
}

/* Centered alignment */
.card__feature--centered {
    align-items: center;
}


/* ----------------------------------------
   Feature Icon
   ---------------------------------------- */

.card__feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    font-size: 14px;
    color: var(--success);
}

.card__feature--sm .card__feature-icon {
    width: 18px;
    height: 18px;
    font-size: 12px;
}

.card__feature--lg .card__feature-icon {
    width: 24px;
    height: 24px;
    font-size: 16px;
}

/* Icon with background circle */
.card__feature-icon--circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--success-soft);
    color: var(--success);
    font-size: 12px;
}

.card__feature--sm .card__feature-icon--circle {
    width: 20px;
    height: 20px;
    font-size: 10px;
}

.card__feature--lg .card__feature-icon--circle {
    width: 28px;
    height: 28px;
    font-size: 14px;
}

/* Icon with square background */
.card__feature-icon--square {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    background: var(--success-soft);
    color: var(--success);
    font-size: 12px;
}

/* Icon styles by state */
.card__feature--included .card__feature-icon {
    color: var(--success);
}

.card__feature--included .card__feature-icon--circle,
.card__feature--included .card__feature-icon--square {
    background: var(--success-soft);
    color: var(--success);
}

.card__feature--excluded .card__feature-icon {
    color: var(--text-muted);
}

.card__feature--excluded .card__feature-icon--circle,
.card__feature--excluded .card__feature-icon--square {
    background: var(--bg-surface-alt);
    color: var(--text-muted);
}

/* Excluded feature text style */
.card__feature--excluded .card__feature-text {
    color: var(--text-muted);
    text-decoration: line-through;
}

/* Highlighted feature */
.card__feature--highlighted {
    font-weight: 500;
    color: var(--text-primary);
}

.card__feature--highlighted .card__feature-icon {
    color: var(--primary);
}

.card__feature--highlighted .card__feature-icon--circle,
.card__feature--highlighted .card__feature-icon--square {
    background: var(--primary-soft);
    color: var(--primary);
}

/* New/badge on feature */
.card__feature--new::after {
    content: 'NEW';
    margin-left: var(--space-2);
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--primary);
    color: var(--on-primary);
    border-radius: var(--radius-sm);
}


/* ----------------------------------------
   Feature Text
   ---------------------------------------- */

.card__feature-text {
    flex: 1;
}

/* Feature with description */
.card__feature-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.card__feature-title {
    font-weight: 500;
    color: var(--text-primary);
}

.card__feature-desc {
    font-size: var(--text-sm);
    color: var(--text-muted);
}


/* ----------------------------------------
   Feature Icon Variations (using Bootstrap Icons)
   ---------------------------------------- */

/* Check mark (default for included) */
.card__feature-icon--check::before {
    content: '\F272';
    /* bi-check */
    font-family: 'bootstrap-icons';
}

/* Check circle */
.card__feature-icon--check-circle::before {
    content: '\F26B';
    /* bi-check-circle-fill */
    font-family: 'bootstrap-icons';
}

/* X mark (for excluded) */
.card__feature-icon--x::before {
    content: '\F62A';
    /* bi-x */
    font-family: 'bootstrap-icons';
}

/* X circle */
.card__feature-icon--x-circle::before {
    content: '\F623';
    /* bi-x-circle */
    font-family: 'bootstrap-icons';
}

/* Dot/bullet */
.card__feature-icon--dot::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Dash */
.card__feature-icon--dash::before {
    content: '\F286';
    /* bi-dash */
    font-family: 'bootstrap-icons';
}

/* Arrow right */
.card__feature-icon--arrow::before {
    content: '\F138';
    /* bi-arrow-right */
    font-family: 'bootstrap-icons';
}

/* Star */
.card__feature-icon--star::before {
    content: '\F586';
    /* bi-star-fill */
    font-family: 'bootstrap-icons';
}


/* ========================================
   PRICING CARDS (prc-01 to prc-05)
   ======================================== 
   
   Card variants specifically for pricing/packages.
   Combines: header, price, features, CTA.
   ======================================== */

/* ----------------------------------------
   Pricing Card Base
   ---------------------------------------- */

.card--pricing {
    text-align: center;
}

.card--pricing .card__body {
    gap: var(--space-6);
}


/* ----------------------------------------
   Pricing Header
   ---------------------------------------- */

.card__pricing-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.card__pricing-name {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.card__pricing-name--lg {
    font-size: var(--text-2xl);
}

.card__pricing-desc {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0;
}


/* ----------------------------------------
   Pricing Price Block
   ---------------------------------------- */

.card__pricing-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
}

.card__pricing-amount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--space-1);
}

.card__pricing-currency {
    font-size: var(--text-xl);
    font-weight: 500;
    color: var(--text-secondary);
    align-self: flex-start;
    margin-top: var(--space-2);
}

.card__pricing-value {
    font-family: var(--font-heading);
    font-size: var(--text-5xl);
    font-weight: 700;
    line-height: 1;
    color: var(--text-primary);
}

.card__pricing-value--sm {
    font-size: var(--text-4xl);
}

.card__pricing-value--lg {
    font-size: var(--text-6xl);
}

.card__pricing-period {
    font-size: var(--text-base);
    color: var(--text-muted);
}

/* Old/crossed price */
.card__pricing-old {
    font-size: var(--text-lg);
    color: var(--text-muted);
    text-decoration: line-through;
}

/* Price note (e.g., "billed annually") */
.card__pricing-note {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* Starting from price */
.card__pricing-from {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-bottom: 4px;
}


/* ----------------------------------------
   Pricing Features
   ---------------------------------------- */

.card--pricing .card__features {
    text-align: left;
    padding-top: var(--space-6);
    border-top: 1px solid var(--border);
}

/* No border variant */
.card--pricing .card__features--no-border {
    padding-top: 0;
    border-top: none;
}


/* ----------------------------------------
   Pricing CTA
   ---------------------------------------- */

.card__pricing-cta {
    margin-top: auto;
    padding-top: var(--space-6);
}

.card__pricing-cta .btn {
    width: 100%;
}


/* ----------------------------------------
   Pricing Card: Featured/Popular State
   ---------------------------------------- */

.card--pricing.card--featured {
    border: 2px solid var(--primary);
    position: relative;
    overflow: visible;
    transform: scale(1.02);
    z-index: 1;
}

/* Badge at top */
.card--pricing.card--featured .card__badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Full-width top banner style badge */
.card--pricing .card__pricing-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    margin: calc(var(--card-padding) * -1);
    margin-bottom: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--primary);
    color: var(--on-primary);
}

.card__pricing-badge i {
    font-size: 14px;
}

/* Accent header background */
.card--pricing.card--featured .card__pricing-header {
    padding: var(--space-6);
    margin: calc(var(--card-padding) * -1);
    margin-bottom: 0;
    background: var(--primary-soft);
}


/* ----------------------------------------
   prc-01: Standard Centered
   ---------------------------------------- */

.prc-01 {
    /* Uses base .card--pricing styles */
}


/* ----------------------------------------
   prc-02: With Icon/Image Header
   ---------------------------------------- */

.prc-02 .card__pricing-icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--primary);
    background: var(--primary-soft);
    border-radius: 50%;
}

.prc-02.card--featured .card__pricing-icon {
    background: var(--primary);
    color: var(--on-primary);
}


/* ----------------------------------------
   prc-03: Horizontal Layout
   ---------------------------------------- */

.prc-03 {
    text-align: left;
}

.prc-03 .card__body {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}

.prc-03 .card__pricing-header {
    flex: 1;
    min-width: 200px;
}

.prc-03 .card__pricing-price {
    align-items: flex-end;
}

.prc-03 .card__features {
    width: 100%;
    border-top: 1px solid var(--border);
    padding-top: var(--space-6);
    margin-top: var(--space-2);
}

.prc-03 .card__pricing-cta {
    width: 100%;
}

@media (min-width: 768px) {
    .prc-03 .card__body {
        flex-wrap: nowrap;
        gap: var(--space-8);
    }

    .prc-03 .card__features {
        width: auto;
        flex: 1;
        border-top: none;
        border-left: 1px solid var(--border);
        padding-top: 0;
        padding-left: var(--space-8);
        margin-top: 0;
    }

    .prc-03 .card__pricing-cta {
        width: auto;
        padding-top: 0;
        align-self: center;
    }
}


/* ----------------------------------------
   prc-04: Compact/Mini
   ---------------------------------------- */

.prc-04 {
    --card-padding: var(--space-5);
}

.prc-04 .card__body {
    gap: var(--space-4);
}

.prc-04 .card__pricing-value {
    font-size: var(--text-3xl);
}

.prc-04 .card__features {
    padding-top: var(--space-4);
}

.prc-04 .card__features--compact {
    gap: 0.375rem;
}

.prc-04 .card__pricing-cta {
    padding-top: var(--space-4);
}


/* ----------------------------------------
   prc-05: Enterprise/Contact Style
   ---------------------------------------- */

.prc-05 .card__pricing-price {
    padding: var(--space-6);
    background: var(--bg-surface-alt);
    border-radius: var(--radius-md);
}

.prc-05 .card__pricing-custom {
    font-size: var(--text-2xl);
    font-weight: 600;
    color: var(--text-primary);
}

.prc-05 .card__pricing-custom-desc {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-top: var(--space-1);
}


/* ========================================
   PRICING TABLE/COMPARISON
   ======================================== */

/* Container for pricing cards */
.pricing-cards {
    display: grid;
    gap: var(--space-6);
    align-items: stretch;
}

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

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

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

/* Center featured card */
.pricing-cards--featured-center {
    align-items: center;
}

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

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

    .card--pricing.card--featured {
        transform: none;
    }
}

@media (max-width: 639px) {

    .pricing-cards--2,
    .pricing-cards--3,
    .pricing-cards--4 {
        grid-template-columns: 1fr;
    }
}


/* ----------------------------------------
   Pricing Toggle (Monthly/Yearly)
   ---------------------------------------- */

.pricing-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
}

.pricing-toggle__label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-in-out);
}

.pricing-toggle__label--active {
    color: var(--text-primary);
}

.pricing-toggle__switch {
    position: relative;
    width: 3rem;
    height: 1.5rem;
    background: var(--bg-surface-alt);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-in-out);
}

.pricing-toggle__switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.25rem;
    height: 1.25rem;
    background: var(--primary);
    border-radius: 50%;
    transition: transform var(--duration-fast) var(--ease-in-out);
}

.pricing-toggle__switch--yearly::after {
    transform: translateX(1.5rem);
}

/* Savings badge */
.pricing-toggle__savings {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    background: var(--success-soft);
    color: var(--success);
    border-radius: var(--radius-full);
}


/* ========================================
   COMPARISON TABLE
   ======================================== */

.comparison-table {
    width: 100%;
    border-collapse: collapse;
}

.comparison-table th,
.comparison-table td {
    padding: var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.comparison-table th {
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-surface-alt);
}

.comparison-table td {
    color: var(--text-secondary);
}

/* Feature name column */
.comparison-table__feature {
    font-weight: 500;
    color: var(--text-primary);
}

/* Check/X icons in cells */
.comparison-table__check {
    color: var(--success);
    font-size: 18px;
}

.comparison-table__x {
    color: var(--text-muted);
    font-size: 18px;
}

/* Highlight column */
.comparison-table__highlight {
    background: var(--primary-soft);
}

.comparison-table th.comparison-table__highlight {
    background: var(--primary);
    color: var(--on-primary);
}

/* Sticky first column */
@media (max-width: 767px) {
    .comparison-table-wrapper {
        overflow-x: auto;
    }

    .comparison-table {
        min-width: 600px;
    }

    .comparison-table td:first-child,
    .comparison-table th:first-child {
        position: sticky;
        left: 0;
        background: var(--bg-surface);
        z-index: 1;
    }

    .comparison-table th:first-child {
        background: var(--bg-surface-alt);
    }
}

/* ============================================
   END OF PHASE 3: CARDS SYSTEM
   ============================================ */

/* ============================================
   TEMPLATE FACTORY  COMPONENTS: PHASE 3 CARDS
   ============================================ */

/* --------------------------------------------
   3.1 PRICING CARDS
   -------------------------------------------- */
.card-pricing {
    display: flex;
    flex-direction: column;
    padding: var(--space-8);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    transition: all var(--duration-normal) var(--ease-in-out);
    height: 100%;
}

.card-pricing:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-soft);
}

.card-pricing.is-featured {
    border: 2px solid var(--primary);
    background: var(--bg-surface);
    position: relative;
    box-shadow: var(--shadow-lg);
}

.card-pricing__header {
    margin-bottom: var(--space-6);
    text-align: center;
}

.card-pricing__title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-4);
}

.card-pricing__price {
    font-size: var(--text-5xl);
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: var(--space-2);
}

.card-pricing__currency {
    font-size: var(--text-2xl);
    vertical-align: top;
    font-weight: 600;
}

.card-pricing__period {
    font-size: var(--text-base);
    color: var(--text-muted);
    font-weight: 400;
}

.card-pricing__features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-8) 0;
    flex: 1;
}

.card-pricing__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    color: var(--text-secondary);
    font-size: var(--text-base);
}

.card-pricing__item i {
    color: var(--success);
    font-size: 20px;
    flex-shrink: 0;
}

.card-pricing__item.is-disabled {
    color: var(--text-muted);
    text-decoration: line-through;
    opacity: 0.7;
}

.card-pricing__item.is-disabled i {
    color: var(--text-muted);
}

/* --------------------------------------------
   3.2 TESTIMONIAL CARDS
   -------------------------------------------- */
.card-testimonial {
    background: var(--bg-surface);
    padding: var(--space-8);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.card-testimonial__stars {
    color: var(--warning);
    margin-bottom: var(--space-5);
    font-size: var(--text-lg);
    display: flex;
    gap: var(--space-1);
}

.card-testimonial__quote {
    font-size: var(--text-lg);
    line-height: 1.6;
    color: var(--text-primary);
    font-style: italic;
    margin-bottom: var(--space-6);
    flex: 1;
}

.card-testimonial__author {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: auto;
}

.card-testimonial__avatar {
    width: var(--space-12);
    height: var(--space-12);
    border-radius: 50%;
    background: var(--bg-surface-alt);
    object-fit: cover;
}

.card-testimonial__avatar-placeholder {
    width: var(--space-12);
    height: var(--space-12);
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--text-xl);
}

.card-testimonial__info {
    display: flex;
    flex-direction: column;
}

.card-testimonial__name {
    font-weight: 700;
    color: var(--text-primary);
    font-size: var(--text-base);
}

.card-testimonial__role {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* --------------------------------------------
   3.3 FEATURE CARDS
   -------------------------------------------- */
.card-feature {
    padding: var(--space-8);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    transition: all var(--duration-fast) var(--ease-in-out);
    height: 100%;
}

.card-feature:hover {
    border-color: var(--primary-soft);
    box-shadow: var(--shadow-lg);
}

.card-feature__icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-xl);
    background: var(--primary-soft);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: var(--space-6);
    transition: transform var(--duration-fast) var(--ease-in-out);
}

.card-feature:hover .card-feature__icon {
    transform: scale(1.1) rotate(-5deg);
    background: var(--primary);
    color: var(--on-primary);
}

.card-feature__title {
    font-size: var(--text-xl);
    font-weight: 700;
    margin-bottom: var(--space-3);
    color: var(--text-primary);
}

.card-feature__text {
    color: var(--text-secondary);
    line-height: 1.6;
}