/**
 * File: public/stylesheets/yuriOffice.css
 * Styles for views/yuriOffice.ejs — the "Yuri in Microsoft Office" feature page.
 * All classes are prefixed .yo- so nothing collides with about.css / security
 * styles loaded elsewhere in the boilerplate.
 */

/* ------------------------------ Hero ---------------------------------- */
.yo-hero {
    position: relative;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 60%, #1f3a5f 100%);
    color: #fff;
    border-radius: 12px;
    padding: 4rem 2rem;
    margin-bottom: 3rem;
    overflow: hidden;
}

.yo-hero-content {
    position: relative;
    z-index: 2;
}

.yo-hero-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: rgba(126, 158, 210, 0.18);
    border: 2px solid rgba(126, 158, 210, 0.45);
    font-size: 2.2rem;
    color: #9fc2ec;
}

.yo-hero .lead {
    color: #c7d4e6;
    max-width: 720px;
    margin: 0 auto;
}

.yo-hero-badges .badge {
    font-size: 0.85rem;
    padding: 0.5em 0.9em;
}

/* ------------------------------ Cards ---------------------------------- */
.yo-card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(20, 30, 55, 0.08);
}

.yo-section-title {
    font-size: 1.5rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.yo-section-title i {
    color: #3f6088;
}

.yo-lead-copy {
    font-size: 1.05rem;
    color: #4a5568;
    max-width: 62rem;
}

/* --------------------------- How-it-works steps ------------------------ */
.yo-step {
    text-align: center;
    padding: 1.25rem 1rem;
    height: 100%;
}

.yo-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #3f6088;
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 0.9rem;
}

/* ---------------------------- Use-case cards --------------------------- */
.yo-usecase-card {
    border: none;
    border-radius: 10px;
    height: 100%;
    box-shadow: 0 4px 14px rgba(20, 30, 55, 0.08);
    border-top: 4px solid #3f6088;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.yo-usecase-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 22px rgba(20, 30, 55, 0.14);
}

.yo-usecase-card.yo-word    { border-top-color: #2b579a; }  /* Word blue      */
.yo-usecase-card.yo-excel   { border-top-color: #217346; }  /* Excel green    */
.yo-usecase-card.yo-outlook { border-top-color: #0f6cbd; }  /* Outlook blue   */
.yo-usecase-card.yo-ppt     { border-top-color: #b7472a; }  /* PowerPoint red */

.yo-app-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

.yo-word    .yo-app-icon { color: #2b579a; }
.yo-excel   .yo-app-icon { color: #217346; }
.yo-outlook .yo-app-icon { color: #0f6cbd; }
.yo-ppt     .yo-app-icon { color: #b7472a; }

/* ----------------------------- Feature lists --------------------------- */
.yo-feature-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.yo-feature-list li {
    padding: 0.45rem 0;
    line-height: 1.5;
}

.yo-feature-list li i {
    margin-right: 0.5rem;
}

/* --------------------------- Comparison table --------------------------- */
.yo-compare-table th[scope="row"] {
    width: 220px;
    color: #4a5568;
    font-weight: 600;
}

.yo-compare-table thead th {
    border-bottom: 2px solid #3f6088;
}

.yo-compare-table td.yo-good {
    background: rgba(33, 115, 70, 0.07);
    font-weight: 500;
}

/* -------------------------------- CTA ---------------------------------- */
.yo-cta {
    background: linear-gradient(135deg, #3f6088 0%, #1a1a2e 100%);
    color: #fff;
    border-radius: 12px;
    padding: 3rem 2rem;
}

.yo-cta h3 {
    font-weight: 700;
}

.yo-cta p {
    color: #c7d4e6;
}

/* ----------------------------- Responsive ------------------------------ */
@media (max-width: 767.98px) {
    .yo-hero {
        padding: 2.5rem 1.25rem;
    }
    .yo-compare-table th[scope="row"] {
        width: auto;
    }
}