/* ============================================================
   SAISHI.CSS v3.0 - 赛事/文章/APP 页面专属样式
   ============================================================
   匹配 Section 模板:
   - ArticleSection (单文章详情)
   - AppHeroSection / AppQrSection / AppInstallSection / AppShowcaseSection
   - ContactChannelsSection / ContactFormSection / ContactQuickSection / ContactCommitmentsSection
   - LoginFormSection / SignupFormSection
   - SearchBoxSection (extends)
   - 滚动条 / 打印样式 / 图标
   ============================================================ */

/* ============================================
   1. Single Post (ArticleSection)
   ============================================ */
.single-post {
    overflow: hidden;
}

.single-post .post-meta {
    font-size: 0.9rem;
}

.single-post .post-meta i {
    color: var(--color-primary);
}

/* Post content typography */
.post-content {
    line-height: 1.8;
    font-size: 1.05rem;
    color: var(--color-text);
}

.post-content :is(h2, h3, h4) {
    margin-block: 2rem 1rem;
    font-weight: 700;
    color: var(--color-primary-darker);
    line-height: 1.4;
}

.post-content h2 {
    font-size: 1.75rem;
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--color-border);
}

.post-content h3 {
    font-size: 1.35rem;
}

.post-content :is(p, li) {
    margin-bottom: var(--space-sm);
}

.post-content blockquote {
    border-inline-start: 4px solid var(--color-primary);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-block: var(--space-md);
    color: var(--color-text-muted);
    font-style: italic;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin-block: var(--space-sm);
    box-shadow: var(--shadow-sm);
}

.post-content a {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.post-content a:hover {
    color: var(--color-primary-dark);
}

.post-content ul,
.post-content ol {
    padding-inline-start: 1.5rem;
}

.post-content code {
    background: var(--color-bg-muted);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--color-danger);
}

.post-content pre {
    background: var(--color-primary-darker);
    color: #fff;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-block: var(--space-md);
}

.post-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--space-md);
}

.post-content table th,
.post-content table td {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    text-align: start;
}

.post-content table th {
    background: var(--color-bg-muted);
    font-weight: 600;
}

/* TOC */
.toc-box {
    border-inline-start: 3px solid var(--color-primary);
}

.toc-box ol {
    padding-inline-start: 1.2rem;
}

.toc-box ol li {
    margin: 0.4rem 0;
}

.toc-box ol li a {
    transition: all var(--transition-fast);
}

.toc-box ol li a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline !important;
    padding-inline-start: 4px;
}

/* Tags */
.post-tags .badge {
    background: var(--color-bg-muted) !important;
    color: #475569 !important;
    padding: 6px 12px;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.post-tags .badge:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Post nav */
.post-nav {
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.post-nav .btn {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   2. App Hero (AppHeroSection)
   ============================================ */
.app-hero-section {
    background: var(--gradient-hero);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.app-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
}

.app-hero-section > .container {
    position: relative;
    z-index: 1;
}

.app-hero-section h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
}

.app-hero-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

.app-hero-section img:hover {
    transform: translateY(-10px);
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* ============================================
   3. App QR (AppQrSection)
   ============================================ */
.app-qr-section {
    background: var(--color-bg-soft);
}

.qr-card {
    transition: all var(--transition-base);
    border: 2px solid transparent;
}

.qr-card:hover {
    transform: scale(1.03);
    border-color: var(--color-accent);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.qr-card img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* ============================================
   4. App Install Steps (AppInstallSection)
   ============================================ */
.app-install-section {
    background: var(--color-bg-soft);
}

.app-install-section .badge.rounded-circle {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
}

.app-install-section .bg-white {
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.app-install-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.app-install-section .bg-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-icon);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--transition-base);
}

.app-install-section .bg-white:hover::before {
    transform: scaleY(1);
}

/* ============================================
   5. App Showcase (AppShowcaseSection)
   ============================================ */
.app-showcase-section {
    background: var(--color-bg);
}

.app-showcase-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.15));
}

.app-showcase-section img:hover {
    transform: translateY(-5px) rotate(-1deg);
}

.app-showcase-section .bg-white {
    transition: all var(--transition-base);
    border-inline-start: 3px solid transparent;
}

.app-showcase-section .bg-white:hover {
    border-inline-start-color: var(--color-primary);
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

/* ============================================
   6. Contact Sections
   ============================================ */
.contact-channels-section {
    background: var(--color-bg);
}

.contact-channels-section article {
    transition: all var(--transition-base);
    border: 1px solid var(--color-border-soft);
}

.contact-channels-section article:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.contact-channels-section article ul li {
    transition: padding var(--transition-fast);
}

.contact-channels-section article ul li:hover {
    padding-inline-start: 4px;
}

/* Contact Quick */
.contact-quick-section {
    background: var(--color-bg-soft);
}

.contact-quick-section .contact-card {
    transition: all var(--transition-base);
}

.contact-quick-section .contact-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-quick-section .contact-card i {
    transition: transform var(--transition-base);
}

.contact-quick-section .contact-card:hover i {
    transform: scale(1.1) rotate(-5deg);
}

/* Contact Form */
.contact-form-section {
    background: var(--color-bg-soft);
}

.contact-form-section .form-control,
.contact-form-section .form-select {
    border: 2px solid var(--color-border);
    transition: all var(--transition-fast);
}

.contact-form-section .form-control:focus,
.contact-form-section .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.1);
}

.contact-form-section button[type="submit"] {
    transition: all var(--transition-base);
}

.contact-form-section button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* Contact Commitments */
.contact-commitments-section {
    background: var(--color-bg-soft);
}

.contact-commitments-section .bg-white {
    transition: all var(--transition-base);
    text-align: center;
}

.contact-commitments-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-commitments-section .bg-white i {
    transition: transform var(--transition-base);
}

.contact-commitments-section .bg-white:hover i {
    transform: scale(1.15);
}

/* ============================================
   7. Login / Signup Forms
   ============================================ */
main:has(> .container > .bg-white > form) .input-group-text {
    background-color: var(--color-bg-muted);
    border-color: var(--color-border);
    border-inline-end: none;
}

main:has(> .container > .bg-white > form) .input-group .form-control {
    border-inline-start: none;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .input-group-text {
    border-color: var(--color-primary);
    background-color: #eff6ff;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .form-control {
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) button[type="submit"] {
    transition: all var(--transition-base);
    font-weight: 600;
}

main:has(> .container > .bg-white > form) button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* ============================================
   8. Icons
   ============================================ */
.icon-img {
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
}

.icon-emoji {
    display: inline-block;
    line-height: 1;
}

/* ============================================
   9. Hero Buttons (đã có ở theme.css nhưng bổ sung thêm)
   ============================================ */
.hero-buttons .btn {
    transition: all var(--transition-base);
}

.hero-buttons .btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.hero-buttons .btn-warning {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary-darker);
    font-weight: 600;
}

.hero-buttons .btn-warning:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.hero-buttons .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* ============================================
   10. 自定义滚动条
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-muted);
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text
-muted);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 var(--color-bg-muted);
}

/* ============================================
   11. Print Styles
   ============================================ */
@media print {
    :is(.header,
        .footer,
        .sidebar-widgets,
        .social-share,
        #back-to-top,
        .breadcrumb-nav,
        .notice-bar,
        .cta-banner-section,
        .post-nav,
        .related-posts,
        .author-box,
        .pagination,
        .navbar-toggler,
        .nav-item) {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
    }

    .single-post {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    .post-content {
        font-size: 11pt;
        line-height: 1.6;
    }

    a {
        text-decoration: underline;
        color: #000 !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }

    a[href^="#"]::after,
    a[href^="javascript:"]::after,
    a[href^="mailto:"]::after,
    a[href^="tel:"]::after {
        content: "";
    }

    .post-content img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    :is(h1, h2, h3, h4) {
        page-break-after: avoid;
        color: #000 !important;
    }

    p, li {
        orphans: 3;
        widows: 3;
    }
}

/* ============================================
   12. Animations bổ sung
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.6s ease-out;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

/* ============================================
   13. Responsive
   ============================================ */
@media (max-width: 991.98px) {
    .post-content {
        font-size: 1rem;
    }

    .post-content h2 {
        font-size: 1.5rem;
    }

    .post-content h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 767.98px) {
    .single-post {
        padding: var(--space-md) !important;
    }

    .post-content {
        font-size: 0.95rem;
    }

    .post-content h2 {
        font-size: 1.35rem;
    }

    .post-nav {
        flex-direction: column;
    }

    .post-nav .btn {
        width: 100%;
    }

    .post-tags .badge {
        font-size: 0.8rem;
        padding: 4px 8px;
    }

    .app-hero-section h1 {
        font-size: 1.75rem;
    }

    .app-install-section .badge.rounded-circle {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .toc-box {
        padding: var(--space-sm) !important;
    }

    .qr-card img {
        max-width: 140px !important;
    }
}

We need to rewrite the CSS with only visual changes. The original CSS is small. It's a media query with three rules. We need to refresh visual identity without changing selectors, layout. Colors, shadows, radius, transitions, gradients can change. But here there are no colors, shadows, radius etc. only padding, text-align, font-size. Those are layout/typography, we cannot change. But we can add visual properties? We must preserve selectors exactly, and not change layout properties. We can add new visual declarations maybe? The task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." But there are no existing visual properties. So we can add visual properties? Likely yes, but we need to output the rewritten CSS preserving all original declarations? We cannot change padding, text-align, font-size, but we can add colors, borders, background, etc. But careful: within media query, adding background-color to elements might be a visual change, okay. But the layout is fixed. The instruction says "Only change colors, shadows, radius, transitions, gradients." Adding is changing? Probably yes, we can insert new visual properties because the target style wants flat solid, no shadows. But we must not change the selectors or existing properties. Let's examine.

Original:
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
    }
}

We can add color, background-color, border, border-radius, etc. But "card-mosaic" target style is aggressive? Actually this is a small snippet. We need to refresh visual identity. Since the original is only a media query for mobile, maybe we can add colors for these elements consistent with a flat-solid mosaic. But keep layout.

We must avoid changing font-size, text-align, padding. So we keep those exact. We can add background-color, color, border, border-radius perhaps. But must consider the classes: badge.bg-warning is a Bootstrap badge with warning background. If we set background-color, we might override? We can set a new background-color and color. But bootstrap bg-warning sets background-color: #ffc107; We can override with a new color. That's fine.

For the contact card, we can add background, border, etc. But it's within a media query, so adding background might affect mobile only. That's okay.

Need to ensure "flat-solid" effect: box-shadow none everywhere. But original doesn't set box-shadow, so we can explicitly set box-shadow: none for these elements, to enforce no shadows. However, rule says "box-shadow: none everywhere" as part of effect variant. So we should add box-shadow: none; to the selectors, or some universal? We can add to these selectors. But we cannot add a universal selector that wasn't in original? We should only output the same selectors and add declarations. So each rule can include box-shadow: none, but not changing layout.

Also "Vibrant card colors on neutral background" and "Each card type a different accent." For these three selectors:
- .app-hero-section .row .col-lg-7: possibly a column, we can add color? Maybe add a background? But it's a column, could be large. We can add maybe a subtle background or text color. But in mobile, text-align center. We can add color, maybe a neutral dark text on light background? Better to add background-color to the column? Might be weird. Since target is card mosaic, each item could have accent. We can add background-color with a neutral background maybe, but that could affect the hero layout. We should be cautious: visual changes only, but not breaking. Adding background to .col-lg-7 could create a block color behind hero content. That might be undesired. But it's a visual refresh. Maybe better to add a bottom border or outline to visually differentiate. We need to decide.

We can change the badge color. The badge.bg-warning is likely a pill badge. We can set background to a vibrant accent (flat). For example: background-color: #f4a261; color: #1a1a2e; border-radius: 4px; box-shadow: none; font-size remains 0.85rem.

For the contact cards, they probably are cards with padding. We can set background-color: #ffffff; border: 2px solid #2a9d8f; border-radius: 6px; box-shadow: none;. But original padding is var(--space-md)!important. That's layout. Keep.

For the hero column, maybe set color: #2b2d42; maybe background-color: transparent? But no. Could set border-bottom: 3px solid #e76f51; maybe? But that changes layout? Border adds to box size, but box-sizing border-box typically; but still could shift. The instruction says border-color and border-style can change, but border-width cannot change? It says "border-color and border-style (NOT border-width)" meaning we shouldn't change any border-width from original? Actually we can add border? It says "You MUST change border-color and border-style" but never change border-width. Adding a border-width from 0 to 1px is changing border-width. That's disallowed if we interpret strictly. "border-color and border-style (NOT border-width)" in the allowed list, and never change border-width in the forbidden list under layout? Actually border-width is not explicitly in forbidden list, but "border-color and border-style (NOT border-width)" suggests we shouldn't touch border-width. So to be safe, we should not add any border with a width. But we can use outline? Outline width also not. Hmm.

We can use background-color, color, border-radius, box-shadow. But box-shadow none is fine, no width. Border-radius no problem. Maybe use background with linear-gradient? But flat-solid says no gradients, so solid colors only. We can use outline? outline is visual, but outline-width is not listed. Better to avoid adding borders entirely.

So visual changes we can add:
- background-color
- color
- border-radius
- box-shadow: none
- maybe text-shadow? No, flat solid.

But adding background-color to elements may be aggressive. For .app-hero-section .row .col-lg-7, we can set background-color: #ffffff; perhaps but might obscure. The hero section likely already has a background. In mobile, maybe not. Let's keep it subtle: set color to #2b2d42 and maybe background-color: transparent (no change). But that's not a refresh.

Maybe we can set background-color: #f8f9fa; for the column to create a neutral panel, with border-radius. But block background on a column might look like a card. Since target is card-mosaic, maybe the hero column is one of the mosaic cards. Let's think: The media query only affects mobile. In mobile, stacking columns. We can make the hero column a card with a neutral light background and accent color text. But could conflict with existing background image? We don't know. However, the task is to rewrite only the given CSS, not the whole file. So we only modify these declarations. If adding background to the hero column, it will apply on mobile only, over the existing hero. Might be fine.

Let's craft with colors from flat-solid vibrant palette:
- Neutral background: #f5f0e6 (warm off-white) or #faf3e0? But we shouldn't set background on body. For these cards, backgrounds:
  - .col-lg-7: #fff3e0 (light orange tint) with color #7b2c2c? Hmm.
Better use a cohesive palette:
- Primary accent: #2a9d8f (teal)
- Secondary accent: #e9c46a (yellow)
- Tertiary accent: #e76f51 (coral)
- Neutral background: #f4f1ea
- Text dark: #264653

Let's assign:
1. .app-hero-section .row .col-lg-7 => text color #264653, background-color #f4f1ea, border-radius: 0 0 6px 6px? But border-radius with no border might not show unless background. Adding border-radius to a column with background will show rounded corners. But layout? It's okay.
2. .app-hero-section .badge.bg-warning => override Bootstrap warning color to a vibrant coral: background-color: #e76f51; color: #ffffff; border-radius: 4px; box-shadow: none;
But the badge already has bg-warning class, which sets background. Override with our own. Could also set font-weight? No, typography forbidden.
3. .contact-channels-section article, .contact-quick-section .contact-card => background-color: #ffffff; color: #264653; border-radius: 6px; box-shadow: none; maybe add a left border? Not allowed. Could use outline? no. Use background-color: #ffffff; border-radius: 6px; and maybe border-top: none? no.

But the instructions say "box-shadow: none everywhere". We can explicitly add box-shadow: none to each of these selectors. That is allowed because we are changing shadow to none.

Also "Minimal radius (0-6px)" so border-radius must be 0-6px. We can set 6px, 4px.

"Vibrant card colors on neutral background": Our backgrounds are off-white and white, not very vibrant. We can set the contact card background to a vibrant accent, maybe #e9c46a (yellow) or #a8dadc (light teal). Let's define:
- Hero column: background-color: #a8dadc (light teal) with color #1d3557. But if the hero has text, it might be readable. Use background #f1faee (light mint) maybe neutral.
- Badge: background #e63946 (red) maybe vibrant.
- Contact cards: background #f4a261 (orange) with dark text.

But "each card type a different accent" yes:
- Hero column accent: #a8dadc
- Badge accent: #e63946
- Contact cards accent: #f4a261

But the contact card contains text, so dark text #264653.

However, these are within a mobile media query. It may be okay.

We should ensure that we don't change font-size or padding. We keep them exactly.

Let's write the new CSS:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1d3557;
        background-color: #a8dadc;
        border-radius: 6px;
        box-shadow: none;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #e63946;
        color: #ffffff;
        border-radius: 4px;
        box-shadow: none;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #f4a261;
        color: #264653;
        border-radius: 6px;
        box-shadow: none;
    }
}

But we need to be careful with the first selector: adding background-color to the entire col-lg-7 on mobile. Could be a large block with light teal. That's a visual identity. Fine.

But perhaps the hero section already has a background image or color, and adding a background color could make it look like a card with square corners. That is the card-mosaic style. Good.

Need to consider that .app-hero-section .row .col-lg-7 might contain a badge inside. The badge is a separate element, so its background will contrast.

Now, check the "never change" list: padding, margin keep similar; we didn't change. font-size unchanged. text-align unchanged. Selectors unchanged. Good.

Should we add a transition? The allowed list includes transition timing, easing, duration. But adding a transition might be a visual property. For flat-solid, it might not be needed. We can add transition: background-color 0.2s ease-in-out; but it's inside media query, only mobile. Could be fine. But not necessary. The task says "Only change colors, shadows, radius, transitions, gradients." We didn't change transitions. That's okay.

We also need to "Change all color values" but there were none. So we added.

Let's ensure no markdown fences and no explanations. Output only CSS.

But before finalizing, think about whether adding box-shadow: none is necessary. Since flat-solid says no shadows everywhere, we explicitly set. That's good.

Maybe the badge.bg-warning should keep the Bootstrap warning color? But we need a new palette. Use vibrant accent. For warning, maybe yellow but a more saturated gold: #f4a261? But we used #f4a261 for contact cards. Use #e9c46a for badge and #e76f51 for contact cards. Let's use:
- Hero column background: #f1faee (mint white) with color #1d3557
- Badge background: #e76f51 (coral) white text
- Contact cards: #2a9d8f (teal) with white/dark? Use #ffffff text? But contrast: #2a9d8f with white text is okay. But text inside contact card may contain dark text. We can set color: #ffffff? That might make all text white. But the card may have links etc. Better keep text dark #264653 on light bg. To have vibrant, use background #ffd166 (yellow) and dark text. Contact cards are often white; making them yellow can be striking. Let's decide.

Palette from "card-mosaic" description: Vibrant card colors on neutral background. Each card type a different accent. So:
- Hero col: neutral background maybe #ffffff with left border? But we can't border. Use background #f8f9fa (light gray) and border-radius.
- Badge: #e63946.
- Contact cards: #ffd166.

Maybe the hero col is not a card; it's a text container. Could leave background transparent to not mess. But we need some change. We can set color only, and maybe a text-shadow? But flat-solid says no shadows. We can set color to a vibrant slate. But that's minimal. Let's add a background anyway.

Potential issue: .app-hero-section .row .col-lg-7 might be a full-width column in mobile; setting background-color might create a colored rectangle behind the hero content. If there is already a background on a parent, it might be okay. But if the hero has a background image, the color could block it. But since it's a specific class, perhaps the col contains a hero image? We don't know. To be safe, we might not add background to the column; instead, we can set a color and maybe a text-shadow? No. Alternatively, we can add a border-bottom of 3px? But border-width is forbidden. Could use underline text decoration? text-decoration is not in forbidden? It's a visual property, but it's not in allowed list. Actually "text-align, vertical-align" are forbidden under layout. Typography includes "text-transform, white-space, word-break" but text-decoration is not listed. But adding text-decoration might be okay? It doesn't affect layout, but it's a visual change. The allowed list says "All color values... border-color and border-style... box-shadow... etc." Text-decoration-color is a color value, but text-decoration itself is a property. Probably okay but we should avoid.

Maybe we can add `background-color: transparent;` but that's no change. Better to add a subtle background to the column. Let's do it. The card-mosaic target is "Aggressive only" but the description says "Layout pattern (Aggressive only)" meaning maybe the target style is aggressive? It says "Mode: CONSERVATIVE" so visual only. We should be conservative. So avoid making huge background blocks. Instead, for the first selector, we could set `color: #2b2d42;` to refresh text color. That is safe. But the instruction says "all color values ... replaced with fresh palette" but there are no color values, so adding a color is okay.

Let's maybe add only `color: #264653;` to the hero column, no background. For the badge, override background and border-radius. For contact cards, add light background with a colored bottom bar? Can't border. Add `background-color: #fffaf0;` with `color: #264653;` and `border-radius: 6px;`. That is a subtle neutral. But target says vibrant card colors. Hmm.

Let's interpret "card-mosaic" maybe wants each card type a different accent. The contact cards and hero column could be different colored cards. Since this is a media query, maybe the layout is stacking cards. We can set backgrounds to solid pastel/vibrant colors. Let's be bold but not break.

We can also use a `border-left` with a width? But avoid.

Let's check if adding a `background-color` to the contact cards is likely to break. Contact cards usually have their own background. Overriding with a solid accent changes look but not layout. Good.

Let's craft final with:
- .app-hero-section .row .col-lg-7: color: #1d3557; background-color: #f1faee; border-radius: 6px; box-shadow: none;
- .app-hero-section .badge.bg-warning: background-color: #e63946; color: #ffffff; border-radius: 4px; box-shadow: none; (keep font-size)
- contact cards: background-color: #ffb703; color: #2b2d42; border-radius: 6px; box-shadow: none; (keep padding)

But color #2b2d42 on #ffb703 has good contrast. For contact channel articles, they might have headings etc. Setting color on article will inherit to children unless overridden. Fine.

Need