/**
 * 221Buddy Landing Page Styles
 *
 * This file composes the marketing component library into the landing page.
 * It imports the marketing foundation and adds landing-specific customizations.
 *
 * Architecture:
 * 1. Import marketing tokens, components, and animations (foundation)
 * 2. Landing-specific compositions and overrides
 * 3. Landing-unique elements (device mockups, etc.)
 *
 * Most styling is now handled by the marketing component library.
 * This file contains only landing page-specific additions.
 */

/* ===== Import Marketing Foundation ===== */
/* These must be loaded in this order */
@import url('../marketing/marketing-tokens.css');
@import url('../marketing/marketing-components.css');
@import url('../marketing/marketing-animations.css');

/* ===== Landing Page Compositions ===== */

/**
 * Hero Section
 * Uses .mkt-hero as base, adds landing-specific gradient enhancements
 */
.landing-hero {
    /* The base .mkt-hero provides the structure */
    /* Additional landing-specific styling below */
    box-shadow: var(--mkt-shadow-card);
    border: 1px solid rgba(169, 96, 238, 0.1);
}

/**
 * Device Mockup Placeholder
 * Landing-specific element for showcasing app mockup
 */
.device-mockup-placeholder {
    background: linear-gradient(135deg, #E2E8F0 0%, #CBD5E1 100%);
    border-radius: var(--mkt-radius-xlarge);
    aspect-ratio: 9/16;
    max-width: 280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mkt-gray-dark);
    font-size: var(--mkt-fs-caption);
    text-align: center;
    padding: var(--mkt-space-card-padding);
    box-shadow: var(--mkt-shadow-medium);
}

/**
 * Feature Image Placeholder
 * Used for feature section visuals
 */
.feature-image-placeholder {
    background: linear-gradient(135deg, #E2E8F0 0%, #CBD5E1 100%);
    border-radius: var(--mkt-radius-large);
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mkt-gray-dark);
    font-size: var(--mkt-fs-caption);
    box-shadow: var(--mkt-shadow-small);
}

/**
 * App Store Badge Placeholder
 * Platform-specific styling
 */
.app-store-placeholder {
    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);
    margin-top: var(--mkt-space-icon-margin);
    transition: transform var(--mkt-timing-fast) var(--mkt-easing-standard);
    text-decoration: none;
}

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

/* ===== Landing-Specific Overrides ===== */

/**
 * Problem Section (Dark Navy)
 * Enhanced dark section with specific gradient
 */
.landing-problem {
    background: linear-gradient(180deg, #0A2540 0%, #051124 100%);
    color: var(--mkt-text-white);
}

.landing-problem h2,
.landing-problem h3 {
    color: var(--mkt-text-white);
}

.landing-problem p {
    color: var(--mkt-text-navy);
}

/**
 * Solution Section
 * Light background for contrast
 */
.landing-solution {
    background-color: var(--mkt-gray-light);
}

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

/**
 * Final CTA Section
 * Primary brand colored background
 */
.landing-final-cta {
    background: var(--mkt-primary);
    color: var(--mkt-text-white);
}

.landing-final-cta h2 {
    color: var(--mkt-text-white);
    margin-bottom: var(--mkt-space-content-small);
}

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

/**
 * Tablet and below
 * Adjust device mockup and layout
 */
@media (max-width: 768px) {
    .landing-hero {
        text-align: center;
    }

    .landing-hero .row {
        flex-direction: column-reverse;
    }

    .device-mockup-placeholder {
        max-width: 200px;
        margin-bottom: calc(var(--mkt-space-content-small));
    }
}

/**
 * Small mobile
 * Further reduce device mockup size
 */
@media (max-width: 576px) {
    .device-mockup-placeholder {
        max-width: 180px;
        padding: calc(var(--mkt-unit) * 3);
    }
}

/* ===== Legacy Class Compatibility ===== */

/**
 * These legacy classes map to new marketing components
 * Keeping them temporarily for graceful migration
 * TODO: Remove after templates are fully updated
 */

.landing-section {
    /* Maps to .mkt-section */
    padding: var(--mkt-space-section) 0;
}

.landing-section-light {
    /* Maps to .mkt-section-light */
    background-color: var(--mkt-gray-light);
}

.landing-section-dark {
    /* Maps to .mkt-section-dark */
    background: var(--mkt-gradient-dark);
    color: var(--mkt-text-white);
}

.landing-section-primary {
    /* Maps to .mkt-section-primary */
    background-color: var(--mkt-primary);
    color: var(--mkt-text-white);
}

.landing-eyebrow {
    /* Maps to .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);
}

.landing-headline {
    /* Maps to .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);
}

.landing-subheadline {
    /* Maps to .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);
}

.landing-trust-badge {
    /* Maps to .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);
}

.landing-icon-circle {
    /* Maps to .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);
}

.landing-icon-circle-light {
    /* Maps to .mkt-icon-circle-light */
    background: rgba(255, 255, 255, 0.15);
}

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

.landing-solution-card {
    /* Maps to .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);
}

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

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

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

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

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

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

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

.landing-feature-number {
    /* Maps to .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);
}

.landing-feature-title {
    /* Maps to .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);
}

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

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

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

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

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

.landing-testimonial-card {
    /* Maps to .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;
}

.landing-testimonial-quote {
    /* Maps to .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;
}

.landing-testimonial-text {
    /* Maps to .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;
}

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

.landing-testimonial-avatar {
    /* Maps to .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);
}

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

.landing-testimonial-role {
    /* Maps to .mkt-testimonial-role */
    font-size: var(--mkt-fs-caption);
    color: var(--mkt-text-light);
}

.landing-pricing-card {
    /* Maps to .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;
}

.landing-pricing-plan {
    /* Maps to .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);
}

.landing-pricing-price {
    /* Maps to .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));
}

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

.landing-pricing-trial {
    /* Maps to .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);
}

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

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

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

/* Fade-in-up animation (legacy) - Maps to .mkt-fade-in-up */
.fade-in-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity var(--mkt-timing-slow) var(--mkt-easing-entrance),
                transform var(--mkt-timing-slow) var(--mkt-easing-entrance);
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

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

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