/**
 * Pure Planning - UI Components
 */

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 14px 32px;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-out);
    text-decoration: none;
    line-height: 1;
}

.btn--primary { background: var(--accent); color: var(--text-light); border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); transform: translateY(-2px); }

.btn--accent { background: var(--accent); color: var(--text-light); border-color: var(--accent); }
.btn--accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); transform: translateY(-2px); box-shadow: var(--shadow-glow); }

.btn--outline { background: transparent; color: var(--text-light); border-color: rgba(255,255,255,0.3); }
.btn--outline:hover { background: rgba(255,255,255,0.1); color: var(--text-light); border-color: rgba(255,255,255,0.6); transform: translateY(-2px); }

.btn--outline-dark { background: transparent; color: var(--text-light); border-color: rgba(255,255,255,0.25); }
.btn--outline-dark:hover { background: rgba(255,255,255,0.08); color: var(--warm); border-color: var(--warm); transform: translateY(-2px); }

.btn--warm { background: var(--warm); color: var(--primary-dark); border-color: var(--warm); }
.btn--warm:hover { background: var(--warm-dark); border-color: var(--warm-dark); color: var(--text-light); transform: translateY(-2px); }

.btn--large { padding: 18px 42px; font-size: var(--text-base); }
.btn--small { padding: 10px 20px; font-size: var(--text-xs); }

/* Cards */
.card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--duration-normal) var(--ease-out);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.card__image { width: 100%; aspect-ratio: 16/10; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); }
.card:hover .card__image { transform: scale(1.05); }
.card__image-wrapper { overflow: hidden; }
.card__body { padding: var(--space-xl); }
.card__tagline { font-family: var(--font-sans); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--accent); margin-bottom: var(--space-sm); }
.card__title { font-family: var(--font-serif); font-size: var(--text-xl); color: var(--text-dark); margin-bottom: var(--space-sm); }
.card__text { font-size: var(--text-sm); color: var(--text-body); line-height: var(--leading-relaxed); }

.card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--accent);
    transition: gap var(--duration-fast) var(--ease-out);
}
.card__link:hover { gap: var(--space-md); color: var(--accent-dark); }

/* Service Card */
.service-card {
    padding: var(--space-2xl);
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: all var(--duration-normal) var(--ease-out);
    border: 1px solid var(--border-light);
}
.service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg), 0 0 30px rgba(153,1,0,0.1); border-color: var(--accent); }
.service-card__icon { width: 64px; height: 64px; margin: 0 auto var(--space-lg); color: var(--accent); }
.service-card__title { font-family: var(--font-serif); font-size: var(--text-lg); color: var(--text-dark); margin-bottom: var(--space-sm); }
.service-card__text { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-relaxed); }

/* Stats */
.stat { text-align: center; }
.stat__number { font-family: var(--font-serif); font-size: var(--text-4xl); font-weight: 700; color: var(--accent); line-height: 1; margin-bottom: var(--space-sm); }
.stat__label { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--text-muted); }
.stat--light .stat__number { color: var(--warm); }
.stat--light .stat__label { color: rgba(254,253,251,0.7); }

/* Pillars */
.pillar {
    padding: var(--space-3xl) var(--space-xl);
    text-align: center;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-lg);
    transition: all var(--duration-normal) var(--ease-out);
}
.pillar:hover { background: rgba(255,255,255,0.05); border-color: var(--warm); }
.pillar__word { font-family: var(--font-serif); font-size: var(--text-3xl); color: var(--text-light); font-style: italic; }
.pillar__word::after { content: '.'; color: var(--warm); }
.pillar__text { margin-top: var(--space-lg); font-size: var(--text-sm); color: rgba(254,253,251,0.7); line-height: var(--leading-relaxed); }

/* Timeline */
.timeline { position: relative; padding-left: var(--space-3xl); }
.timeline::before { content: ''; position: absolute; left: 15px; top: 0; bottom: 0; width: 2px; background: var(--border-medium); }
.timeline__item { position: relative; padding-bottom: var(--space-2xl); }
.timeline__item::before { content: ''; position: absolute; left: calc(-1 * var(--space-3xl) + 8px); top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg-cream); }
.timeline__year { font-family: var(--font-serif); font-size: var(--text-2xl); color: var(--accent); margin-bottom: var(--space-sm); }
.timeline__text { font-size: var(--text-base); color: var(--text-body); line-height: var(--leading-relaxed); }

/* Forms */
.form-group { margin-bottom: var(--space-lg); }
.form-label { display: block; margin-bottom: var(--space-sm); font-size: var(--text-sm); font-weight: 500; color: var(--text-dark); }
.form-input, .form-textarea {
    width: 100%; padding: 14px 18px;
    font-family: var(--font-sans); font-size: var(--text-base); color: var(--text-dark);
    background: var(--bg-white); border: 1px solid var(--border-medium); border-radius: var(--radius-md);
    transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.form-input:focus, .form-textarea:focus, select.form-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(153,1,0,0.25); }
select.form-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23B5B0A8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.form-textarea { min-height: 140px; resize: vertical; }

/* Alerts */
.alert { padding: var(--space-lg) var(--space-xl); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; margin-bottom: var(--space-xl); }
.alert--success { background: rgba(52, 208, 88, 0.1); color: var(--success); border: 1px solid rgba(52, 208, 88, 0.2); }
.alert--error { background: rgba(248, 81, 73, 0.1); color: var(--error); border: 1px solid rgba(248, 81, 73, 0.2); }

/* Filter Tabs */
.filter-tabs { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-2xl); justify-content: center; }
.filter-tab {
    padding: 10px 20px; font-size: var(--text-sm); font-weight: 500; color: var(--text-body);
    background: var(--bg-white); border: 1px solid var(--border-medium); border-radius: var(--radius-full);
    cursor: pointer; transition: all var(--duration-fast) var(--ease-out);
}
.filter-tab:hover, .filter-tab.active { background: var(--accent); color: var(--text-light); border-color: var(--accent); }

/* Process Steps */
.process { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-xl); counter-reset: process; }
.process__step { text-align: center; counter-increment: process; }
.process__step::before {
    content: counter(process, decimal-leading-zero);
    font-family: var(--font-serif); font-size: var(--text-4xl); font-weight: 700;
    color: var(--accent); opacity: 0.2; display: block; margin-bottom: var(--space-md); line-height: 1;
}
.process__title { font-family: var(--font-serif); font-size: var(--text-lg); color: var(--text-dark); margin-bottom: var(--space-sm); }
.process__text { font-size: var(--text-sm); color: var(--text-muted); }

/* Benefit List */
.benefit-list { display: grid; gap: var(--space-lg); }
.benefit-item { display: flex; align-items: flex-start; gap: var(--space-lg); }
.benefit-item__icon {
    flex-shrink: 0; width: 48px; height: 48px;
    background: rgba(153,1,0,0.15); border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center; color: var(--accent);
}
.benefit-item__content h4 { font-size: var(--text-lg); margin-bottom: var(--space-xs); }
.benefit-item__content p { font-size: var(--text-sm); color: var(--text-muted); margin: 0; }

/* CTA Banner */
.cta-banner {
    background: linear-gradient(135deg, var(--accent-dark), var(--accent));
    padding: var(--space-4xl) var(--space-2xl); border-radius: var(--radius-xl); text-align: center; color: var(--text-light);
}
.cta-banner h2 { color: var(--text-light); margin-bottom: var(--space-md); }
.cta-banner p { color: rgba(254,253,251,0.8); max-width: 500px; margin: 0 auto var(--space-xl); }

/* Service Detail List */
.service-list { columns: 2; column-gap: var(--space-2xl); }
.service-list li {
    padding: var(--space-sm) 0;
    padding-left: var(--space-xl);
    position: relative;
    font-size: var(--text-base);
    color: var(--text-body);
    break-inside: avoid;
}
.service-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    transform: translateY(-50%);
}

@media (max-width: 768px) {
    .service-list { columns: 1; }

    /* Buttons */
    .btn {
        padding: 12px 24px;
        font-size: var(--text-xs);
    }
    .btn--large {
        padding: 14px 28px;
        font-size: var(--text-sm);
    }

    /* Cards */
    .card__body {
        padding: var(--space-lg);
    }
    .card__title {
        font-size: var(--text-lg);
    }

    /* Service Cards */
    .service-card {
        padding: var(--space-xl);
    }
    .service-card__icon {
        width: 48px;
        height: 48px;
    }
    .service-card__title {
        font-size: var(--text-base);
    }

    /* Stats */
    .stat__number {
        font-size: var(--text-3xl);
    }
    .stat__label {
        font-size: var(--text-xs);
    }

    /* Pillars */
    .pillar {
        padding: var(--space-xl) var(--space-lg);
    }
    .pillar__word {
        font-size: var(--text-2xl);
    }
    .pillar__text {
        font-size: var(--text-sm);
        margin-top: var(--space-md);
    }

    /* Timeline */
    .timeline {
        padding-left: var(--space-2xl);
    }
    .timeline__year {
        font-size: var(--text-xl);
    }
    .timeline__text {
        font-size: var(--text-sm);
    }

    /* Forms */
    .form-input, .form-textarea {
        padding: 12px 14px;
        font-size: var(--text-base);
    }

    /* Filter Tabs */
    .filter-tabs {
        gap: var(--space-xs);
    }
    .filter-tab {
        padding: 8px 14px;
        font-size: var(--text-xs);
    }

    /* Process Steps */
    .process {
        grid-template-columns: 1fr 1fr;
    }
    .process__step::before {
        font-size: var(--text-3xl);
    }
    .process__title {
        font-size: var(--text-base);
    }

    /* CTA Banner */
    .cta-banner {
        padding: var(--space-2xl) var(--space-lg);
        border-radius: var(--radius-lg);
    }
    .cta-banner h2 {
        font-size: var(--text-2xl);
    }
    .cta-banner p {
        font-size: var(--text-sm);
    }

    /* Benefit Items */
    .benefit-item {
        gap: var(--space-md);
    }
    .benefit-item__icon {
        width: 40px;
        height: 40px;
    }
    .benefit-item__content h4 {
        font-size: var(--text-base);
    }
}

@media (max-width: 480px) {
    /* Buttons full-width on very small screens */
    .btn--large {
        padding: 12px 20px;
        width: 100%;
        justify-content: center;
    }

    /* Service Cards compact */
    .service-card {
        padding: var(--space-lg);
    }
    .service-card__icon {
        width: 40px;
        height: 40px;
        margin-bottom: var(--space-md);
    }

    /* Process single column */
    .process {
        grid-template-columns: 1fr;
    }

    /* Stats 2x2 grid */
    .stat__number {
        font-size: var(--text-2xl);
    }

    /* Pillars compact */
    .pillar {
        padding: var(--space-lg);
    }
    .pillar__word {
        font-size: var(--text-xl);
    }

    /* CTA compact */
    .cta-banner {
        padding: var(--space-xl) var(--space-md);
    }
    .cta-banner h2 {
        font-size: var(--text-xl);
    }

    /* Alerts */
    .alert {
        padding: var(--space-md) var(--space-lg);
        font-size: var(--text-xs);
    }
}