/**
 * 221Buddy Marketing Components
 * Reusable component library for marketing pages
 *
 * This file contains all reusable marketing components:
 * - Hero sections
 * - Section containers
 * - Cards (feature, testimonial, pricing)
 * - Buttons (primary, secondary, with various sizes)
 * - Icons and icon circles
 * - Feature rows
 * - Typography components
 * - Trust signals and social proof
 *
 * Dependencies: marketing-tokens.css (must be imported first)
 * Usage: Add .mkt-* classes to elements for marketing styling
 */

/* ===== Section Containers ===== */

.mkt-section {
    padding: var(--mkt-space-section) 0;
    position: relative;
}

.mkt-section-large {
    padding: var(--mkt-space-section-large) 0;
}

.mkt-section-medium {
    padding: var(--mkt-space-section-medium) 0;
}

.mkt-section-small {
    padding: var(--mkt-space-section-small) 0;
}

.mkt-section-light {
    background-color: var(--mkt-gray-light);
}

.mkt-section-dark {
    background: var(--mkt-gradient-dark);
    color: var(--mkt-text-white);
}

.mkt-section-gradient {
    background: var(--mkt-gradient-hero-subtle);
    position: relative;
    overflow: hidden;
}

/* Gradient overlay effect for sections */
.mkt-section-gradient::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -10%;
    width: 120%;
    height: 200%;
    background: radial-gradient(
        circle at 30% 50%,
        rgba(169, 96, 238, 0.12) 0%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
}

.mkt-section-gradient > * {
    position: relative;
    z-index: 1;
}

/* Primary brand colored section */
.mkt-section-primary {
    background: var(--mkt-primary);
    color: var(--mkt-text-white);
}

/* ===== Hero Components ===== */

.mkt-hero {
    background: var(--mkt-gradient-hero-subtle);
    border-radius: var(--mkt-radius-xlarge);
    padding: calc(var(--mkt-space-section-small) / 1.5);
    position: relative;
    overflow: hidden;
}

.mkt-hero::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 60%;
    height: 160%;
    background: radial-gradient(
        circle at 70% 50%,
        rgba(255, 107, 157, 0.1) 0%,
        transparent 60%
    );
    pointer-events: none;
}

.mkt-hero-content {
    max-width: var(--mkt-max-width-content);
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ===== Typography Components ===== */

.mkt-eyebrow {
    font-size: var(--mkt-fs-eyebrow);
    font-weight: var(--mkt-fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--mkt-ls-wider);
    color: var(--mkt-text-light);
    margin-bottom: calc(var(--mkt-unit) * 2);
    display: block;
}

.mkt-section-dark .mkt-eyebrow,
.mkt-section-primary .mkt-eyebrow {
    color: var(--mkt-text-navy);
}

.mkt-display {
    font-size: var(--mkt-fs-display);
    font-weight: var(--mkt-fw-bold);
    line-height: var(--mkt-lh-tight);
    letter-spacing: var(--mkt-ls-tight);
    color: var(--mkt-text-dark);
    margin-bottom: var(--mkt-space-icon-margin);
}

.mkt-section-dark .mkt-display,
.mkt-section-primary .mkt-display {
    color: var(--mkt-text-white);
}

.mkt-heading-1 {
    font-size: var(--mkt-fs-h1);
    font-weight: var(--mkt-fw-bold);
    line-height: var(--mkt-lh-tight);
    color: var(--mkt-text-dark);
    margin-bottom: var(--mkt-space-icon-margin);
}

.mkt-heading-2 {
    font-size: var(--mkt-fs-h2);
    font-weight: var(--mkt-fw-bold);
    line-height: var(--mkt-lh-normal);
    color: var(--mkt-text-dark);
    margin-bottom: calc(var(--mkt-unit) * 3);
}

.mkt-heading-3 {
    font-size: var(--mkt-fs-h3);
    font-weight: var(--mkt-fw-semibold);
    line-height: var(--mkt-lh-normal);
    color: var(--mkt-text-dark);
    margin-bottom: calc(var(--mkt-unit) * 2);
}

.mkt-subheadline {
    font-size: var(--mkt-fs-body-large);
    line-height: var(--mkt-lh-relaxed);
    color: var(--mkt-text-medium);
    margin-bottom: var(--mkt-space-icon-margin);
}

.mkt-section-dark .mkt-subheadline,
.mkt-section-primary .mkt-subheadline {
    color: var(--mkt-text-navy);
}

.mkt-body-large {
    font-size: var(--mkt-fs-body-large);
    line-height: var(--mkt-lh-relaxed);
    color: var(--mkt-text-medium);
}

.mkt-body {
    font-size: var(--mkt-fs-body);
    line-height: var(--mkt-lh-relaxed);
    color: var(--mkt-text-medium);
}

/* ===== Button Components ===== */

.mkt-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--mkt-btn-height-large);
    padding: 0 var(--mkt-space-button-padding-x);
    font-size: var(--mkt-fs-body);
    font-weight: var(--mkt-fw-semibold);
    background: var(--mkt-primary);
    color: var(--mkt-text-white);
    border: none;
    border-radius: var(--mkt-radius-small);
    box-shadow: var(--mkt-shadow-button);
    transition: all var(--mkt-timing-normal) var(--mkt-easing-standard);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.mkt-btn-primary:hover {
    background: var(--mkt-primary-hover);
    box-shadow: var(--mkt-shadow-button-hover);
    transform: translateY(-2px);
    color: var(--mkt-text-white);
}

.mkt-btn-primary:active {
    transform: translateY(0);
    box-shadow: var(--mkt-shadow-button);
}

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

.mkt-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--mkt-btn-height-large);
    padding: 0 var(--mkt-space-button-padding-x);
    font-size: var(--mkt-fs-body);
    font-weight: var(--mkt-fw-semibold);
    background: transparent;
    color: var(--mkt-text-dark);
    border: 2px solid var(--mkt-gray-medium);
    border-radius: var(--mkt-radius-small);
    transition: all var(--mkt-timing-normal) var(--mkt-easing-standard);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.mkt-btn-secondary:hover {
    border-color: var(--mkt-primary);
    color: var(--mkt-primary);
    transform: translateY(-2px);
    box-shadow: var(--mkt-shadow-small);
}

.mkt-btn-secondary:active {
    transform: translateY(0);
}

.mkt-btn-secondary:focus-visible {
    outline: 2px solid var(--mkt-primary);
    outline-offset: 2px;
}

/* Button on dark backgrounds */
.mkt-section-dark .mkt-btn-secondary,
.mkt-section-primary .mkt-btn-secondary {
    color: var(--mkt-text-white);
    border-color: rgba(255, 255, 255, 0.3);
}

.mkt-section-dark .mkt-btn-secondary:hover,
.mkt-section-primary .mkt-btn-secondary:hover {
    border-color: var(--mkt-text-white);
    color: var(--mkt-text-white);
}

/* Button sizes */
.mkt-btn-medium {
    height: var(--mkt-btn-height-medium);
    padding: 0 calc(var(--mkt-space-button-padding-x) * 0.75);
    font-size: var(--mkt-fs-body-small);
}

.mkt-btn-small {
    height: var(--mkt-btn-height-small);
    padding: 0 calc(var(--mkt-space-button-padding-x) * 0.625);
    font-size: var(--mkt-fs-body-small);
}

/* ===== Icon Components ===== */

.mkt-icon-circle {
    width: var(--mkt-icon-circle-medium);
    height: var(--mkt-icon-circle-medium);
    border-radius: 50%;
    background: var(--mkt-gradient-purple-pink);
    color: var(--mkt-text-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--mkt-icon-size-medium);
    margin-bottom: var(--mkt-space-icon-margin);
    flex-shrink: 0;
}

.mkt-icon-circle-large {
    width: var(--mkt-icon-circle-large);
    height: var(--mkt-icon-circle-large);
    font-size: var(--mkt-icon-size-large);
}

.mkt-icon-circle-small {
    width: var(--mkt-icon-circle-small);
    height: var(--mkt-icon-circle-small);
    font-size: var(--mkt-icon-size-small);
}

.mkt-icon-circle-gradient {
    background: var(--mkt-gradient-hero);
}

.mkt-icon-circle-blue {
    background: var(--mkt-gradient-blue-cyan);
}

.mkt-icon-circle-light {
    background: rgba(255, 255, 255, 0.15);
}

.mkt-icon-circle-outline {
    background: transparent;
    border: 2px solid var(--mkt-primary);
    color: var(--mkt-primary);
}

.mkt-section-dark .mkt-icon-circle-outline {
    border-color: var(--mkt-text-white);
    color: var(--mkt-text-white);
}

/* ===== Card Components ===== */

.mkt-card {
    background: var(--mkt-text-white);
    border-radius: var(--mkt-radius-large);
    padding: var(--mkt-space-card-padding);
    box-shadow: var(--mkt-shadow-card);
    height: 100%;
    transition: transform var(--mkt-timing-normal) var(--mkt-easing-standard),
                box-shadow var(--mkt-timing-normal) var(--mkt-easing-standard);
}

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

/* Feature Card */
.mkt-card-feature {
    background: var(--mkt-text-white);
    border-radius: var(--mkt-radius-large);
    padding: var(--mkt-space-card-padding);
    text-align: center;
    box-shadow: var(--mkt-shadow-card);
    height: 100%;
    transition: transform var(--mkt-timing-normal) var(--mkt-easing-standard),
                box-shadow var(--mkt-timing-normal) var(--mkt-easing-standard);
}

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

.mkt-card-feature h4,
.mkt-card-feature h3 {
    font-weight: var(--mkt-fw-semibold);
    color: var(--mkt-text-dark);
    margin-bottom: calc(var(--mkt-unit) * 2);
}

.mkt-card-feature p {
    color: var(--mkt-text-medium);
    line-height: var(--mkt-lh-relaxed);
    margin-bottom: 0;
}

/* Testimonial Card */
.mkt-card-testimonial {
    background: var(--mkt-text-white);
    border-radius: var(--mkt-radius-large);
    padding: var(--mkt-space-card-padding);
    box-shadow: var(--mkt-shadow-card);
    height: 100%;
    position: relative;
}

.mkt-testimonial-quote {
    position: absolute;
    top: calc(var(--mkt-space-card-padding) / 2);
    left: calc(var(--mkt-space-card-padding) / 2);
    font-size: 48px;
    color: var(--mkt-primary);
    opacity: 0.15;
    line-height: 1;
    font-family: Georgia, serif;
}

.mkt-testimonial-text {
    color: var(--mkt-text-dark);
    line-height: var(--mkt-lh-relaxed);
    font-size: var(--mkt-fs-body);
    margin-bottom: var(--mkt-space-icon-margin);
    padding-top: calc(var(--mkt-unit) * 2);
    font-style: italic;
}

.mkt-testimonial-author {
    display: flex;
    align-items: center;
    gap: calc(var(--mkt-unit) * 2);
}

.mkt-testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mkt-gray-medium) 0%, var(--mkt-gray-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mkt-text-white);
    font-weight: var(--mkt-fw-semibold);
    flex-shrink: 0;
}

.mkt-testimonial-info {
    flex: 1;
}

.mkt-testimonial-name {
    font-weight: var(--mkt-fw-semibold);
    color: var(--mkt-text-dark);
    margin-bottom: 2px;
}

.mkt-testimonial-role {
    font-size: var(--mkt-fs-caption);
    color: var(--mkt-text-light);
}

/* Pricing Card */
.mkt-card-pricing {
    background: var(--mkt-text-white);
    border-radius: var(--mkt-radius-xlarge);
    padding: calc(var(--mkt-space-card-padding) * 1.25);
    box-shadow: var(--mkt-shadow-card);
    max-width: 420px;
    margin: 0 auto;
    text-align: center;
}

.mkt-pricing-plan {
    font-size: var(--mkt-fs-caption);
    font-weight: var(--mkt-fw-semibold);
    color: var(--mkt-primary);
    text-transform: uppercase;
    letter-spacing: var(--mkt-ls-wide);
    margin-bottom: calc(var(--mkt-unit) * 2);
}

.mkt-pricing-price {
    font-size: var(--mkt-fs-display);
    font-weight: var(--mkt-fw-bold);
    color: var(--mkt-text-dark);
    line-height: var(--mkt-lh-tight);
    margin-bottom: calc(var(--mkt-unit));
}

.mkt-pricing-period {
    font-size: var(--mkt-fs-body);
    color: var(--mkt-text-light);
    margin-bottom: calc(var(--mkt-unit) * 2);
}

.mkt-pricing-trial {
    display: inline-block;
    background: var(--mkt-success-light);
    color: var(--mkt-success);
    padding: calc(var(--mkt-unit)) calc(var(--mkt-unit) * 2);
    border-radius: var(--mkt-radius-pill);
    font-weight: var(--mkt-fw-semibold);
    font-size: var(--mkt-fs-caption);
    margin-bottom: var(--mkt-space-icon-margin);
}

.mkt-pricing-features {
    text-align: left;
    list-style: none;
    padding: 0;
    margin-bottom: var(--mkt-space-icon-margin);
}

.mkt-pricing-features li {
    padding: calc(var(--mkt-unit) * 1.5) 0;
    color: var(--mkt-text-dark);
    display: flex;
    align-items: center;
    gap: calc(var(--mkt-unit) * 2);
    font-size: var(--mkt-fs-body-small);
}

.mkt-pricing-features li i {
    color: var(--mkt-success);
    font-size: var(--mkt-fs-body);
    flex-shrink: 0;
}

/* ===== Feature Rows ===== */

.mkt-feature-row {
    display: flex;
    align-items: center;
    gap: var(--mkt-gap-feature);
    padding: var(--mkt-space-content-small) 0;
}

.mkt-feature-row-reverse {
    flex-direction: row-reverse;
}

.mkt-feature-content {
    flex: 1;
}

.mkt-feature-visual {
    flex: 1;
}

.mkt-feature-number {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--mkt-gradient-purple-pink);
    color: var(--mkt-text-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--mkt-fw-bold);
    font-size: var(--mkt-fs-h4);
    margin-bottom: var(--mkt-space-icon-margin);
}

.mkt-feature-title {
    font-size: var(--mkt-fs-h2);
    font-weight: var(--mkt-fw-semibold);
    color: var(--mkt-text-dark);
    margin-bottom: calc(var(--mkt-unit) * 2);
    line-height: var(--mkt-lh-normal);
}

.mkt-feature-description {
    font-size: var(--mkt-fs-body);
    color: var(--mkt-text-medium);
    line-height: var(--mkt-lh-relaxed);
}

.mkt-section-dark .mkt-feature-title {
    color: var(--mkt-text-white);
}

.mkt-section-dark .mkt-feature-description {
    color: var(--mkt-text-navy);
}

/* ===== Trust Signals & Social Proof ===== */

.mkt-trust-item {
    text-align: center;
    padding: calc(var(--mkt-unit) * 3);
}

.mkt-trust-item i {
    font-size: calc(var(--mkt-icon-size-medium) * 1.25);
    color: var(--mkt-primary);
    margin-bottom: calc(var(--mkt-unit) * 2);
}

.mkt-section-dark .mkt-trust-item i,
.mkt-section-primary .mkt-trust-item i {
    color: var(--mkt-text-white);
}

.mkt-trust-item h5 {
    font-size: var(--mkt-fs-h4);
    font-weight: var(--mkt-fw-semibold);
    color: var(--mkt-text-dark);
    margin-bottom: calc(var(--mkt-unit));
}

.mkt-section-dark .mkt-trust-item h5,
.mkt-section-primary .mkt-trust-item h5 {
    color: var(--mkt-text-white);
}

.mkt-trust-item p {
    font-size: var(--mkt-fs-body-small);
    color: var(--mkt-text-light);
    margin-bottom: 0;
    line-height: var(--mkt-lh-relaxed);
}

.mkt-section-dark .mkt-trust-item p,
.mkt-section-primary .mkt-trust-item p {
    color: var(--mkt-text-navy);
}

/* Trust Badge */
.mkt-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--mkt-unit) * 1.5);
    padding: calc(var(--mkt-unit) * 1.5) calc(var(--mkt-unit) * 3);
    background: var(--mkt-text-white);
    border-radius: var(--mkt-radius-pill);
    font-weight: var(--mkt-fw-semibold);
    font-size: var(--mkt-fs-caption);
    color: var(--mkt-text-dark);
    box-shadow: var(--mkt-shadow-small);
}

/* Logo Grid for customer logos */
.mkt-logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: calc(var(--mkt-unit) * 4);
    align-items: center;
    justify-items: center;
}

.mkt-logo-grid img {
    max-width: 100%;
    height: auto;
    opacity: 0.6;
    filter: grayscale(100%);
    transition: all var(--mkt-timing-normal);
}

.mkt-logo-grid img:hover {
    opacity: 1;
    filter: grayscale(0%);
}

/* ===== Utility Components ===== */

/* Platform Section */
.mkt-platform-icon {
    font-size: calc(var(--mkt-icon-size-large) * 1.5);
    color: var(--mkt-text-dark);
    margin-bottom: var(--mkt-space-icon-margin);
}

.mkt-section-dark .mkt-platform-icon {
    color: var(--mkt-text-white);
}

/* App Store Badge Placeholder */
.mkt-app-store-badge {
    display: inline-block;
    background: #000000;
    color: #ffffff;
    padding: calc(var(--mkt-unit) * 2) calc(var(--mkt-unit) * 3);
    border-radius: var(--mkt-radius-small);
    font-weight: var(--mkt-fw-semibold);
    text-decoration: none;
    transition: transform var(--mkt-timing-fast);
}

.mkt-app-store-badge:hover {
    transform: scale(1.05);
    color: #ffffff;
}

/* Placeholder elements */
.mkt-placeholder {
    background: linear-gradient(135deg, var(--mkt-gray-medium) 0%, var(--mkt-gray-light) 100%);
    border-radius: var(--mkt-radius-large);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mkt-gray-dark);
    text-align: center;
    padding: var(--mkt-space-card-padding);
}

/* ===== Responsive Adjustments ===== */

@media (max-width: 991px) {
    .mkt-feature-row,
    .mkt-feature-row-reverse {
        flex-direction: column;
        gap: var(--mkt-space-content-small);
    }

    .mkt-feature-visual {
        order: -1;
    }
}

@media (max-width: 768px) {
    .mkt-hero {
        padding: var(--mkt-space-content-small);
        text-align: center;
    }

    .mkt-card-pricing {
        padding: var(--mkt-space-card-padding);
    }

    .mkt-logo-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: calc(var(--mkt-unit) * 3);
    }
}