/* ============================================================
   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 given CSS snippet. The original is a small media query block with three rules. We need to apply the editorial-magazine style with sharp edges. But the original CSS only contains layout-ish properties (text-align, font-size, padding). However, font-size and padding are in the "never change" list? Actually font-size is typography, should keep unchanged. Padding is allowed ±20%, but here padding is using var(--space-md) !important. We should not change that? Actually padding is a layout property, "keep similar values, ±20% maximum". Since it's a CSS variable, we can leave it as is. The task says "Only change colors, shadows, radius, transitions, gradients." But the snippet has none of those. So we need to add visual properties without changing the existing ones? We are allowed to add new declarations as long as we don't break layout. However, the output should be a rewritten CSS that preserves all selectors and layout exactly. We can add color, background, border, box-shadow etc. to these existing rules. But we must be careful: adding background or color might change the visual identity as desired.

The target style is editorial-magazine with sharp edges. We should apply that to these elements. However, these are hero section, badge, contact cards. We can add color, background, border, box-shadow, border-radius, transition etc.

Since the original CSS only has these rules, we need to produce a rewritten version of this media query block. We should keep the same selectors, media query, and the existing declarations (text-align, font-size, padding). Then add new visual declarations that fit the style.

But note: The instruction says "Only change colors, shadows, radius, transitions, gradients." But it also says "Refresh the visual identity WITHOUT changing layout structure or class names." So we can modify existing color values if any, and add new color/shadow properties. In this case, there are no colors to change, so we add them.

We should also consider the "sharp-edges" effect variant: hard offset shadows: 4px 4px 0px solid color; small or zero border-radius (0-4px); strong borders (2-3px solid); snappy transitions (0.15s). Editorial palette: cream/beige backgrounds (#f5f1e8), ink black text (#1a1a1a), single accent color (deep red #c44536 or olive #6b705c).

We need to apply this to the existing selectors.

Let's examine each rule:

1. `.app-hero-section .row .col-lg-7 { text-align: center; }` - This is inside a media query for small screens. We could add color, maybe a background? But this is a column; adding a background might be okay, but careful. Editorial style maybe no background. But we could add a color to text? Already text color inherited. We could add a border? Maybe not. We need to add something to each rule to fulfill the task? Actually the task is to refresh the entire CSS file, but we only have this snippet. The output should include the same selectors with visual changes. Since the original had no colors, we should add some visual properties to these selectors in a way that doesn't break layout.

But adding box-shadow to a column might create weird effect. Better to be minimal: maybe add a transition, or a background color? Hmm.

Let's think: The media query is for small screens (max-width 575.98px). The editorial style might have a background color on the body, but we don't control body here. We can only control these specific elements.

For the hero section column, we can add a color, maybe a text-shadow? Not necessary. But to show a refresh, we can add a background color? But that might affect layout if it adds padding? Background doesn't affect layout. But could look odd on a column. Alternatively, we can add a border-left accent, like a vertical bar? That would be an editorial touch. But adding border affects layout? border-width can change dimensions unless box-sizing border-box. We cannot change border-width? Actually border-width is allowed? The instructions say "border-color and border-style (NOT border-width)" cannot change? Wait, "border-color and border-style (NOT border-width)" are in the "must change" list? Let's check: ✅ You MUST CHANGE includes "border-color and border-style (NOT border-width)"? Actually it says "All color values: background, color, border-color, fill, stroke, outline-color" and "border-color and border-style (NOT border-width)" is in the "must change" list? Let's re-read:

List of must change:
- All color values: background, color, border-color, fill, stroke, outline-color
- box-shadow (offsets, blur, spread, color — fully redesign with multi-layer effects)
- text-shadow
- border-radius (visual rounding only)
- gradient colors and stops in linear/radial/conic-gradient
- transition timing, easing, duration
- filter, backdrop-filter
- opacity
- outline styles (color, type)
- border-color and border-style (NOT border-width)
- caret-color, accent-color
- CSS custom properties (--color-*, --shadow-*) values

So border-color and border-style can change, but NOT border-width. So we can add a border if not already present, but we can't change width? Actually we can add border-style and border-color, but if we add border-width we'd be violating? We could add border with 0 width? No, to show a border, we need a width. But the rule says "border-color and border-style (NOT border-width)" - meaning you may change those properties but not border-width. But adding a border-width when there was none is technically changing border-width. If we want to add a strong border (2-3px solid), that would be adding a border-width. That might be considered a layout change if box-sizing isn't border-box, but often it is. However, the instruction specifically says "NOT border-width" in the must change list, meaning we must NOT change border-width. But the target style says "Strong borders (2-3px solid)" which requires border-width. However, the instruction might mean "do not change border width from original" but original had none. This is ambiguous.

Given that the target style explicitly calls for strong borders, we probably need to add borders. But the safe interpretation is: do not alter existing border widths; adding border width to an element that had none could be considered changing border-width, but maybe it's okay if it doesn't affect layout because border-box is common? But we don't know. The instruction says "NEVER CHANGE ... border-width" under "Layout (HTML cannot adapt to changes)"? Actually, under "NEVER CHANGE" there is no explicit "border-width" listed. The only border-related in never change is not there. In the "must change" list, it says "border-color and border-style (NOT border-width)" - that suggests we should not change border-width, but we can change color/style. So if there is no border, we should not add one with a width. Hmm.

But then how to achieve "sharp edges" with "strong borders (2-3px solid)"? Maybe we can use box-shadow to simulate a border: `box-shadow: 0 0 0 2px #1a1a1a` which uses spread and no blur as a border. That doesn't change border-width. And hard offset shadows: `4px 4px 0px 0px color`. So we can use box-shadow to create the "sharp edges" effect without changing border-width. Good.

So for each element, we can add a box-shadow offset, maybe a background color, text color, border-radius, transition.

But we need to be careful not to break layout. Adding box-shadow doesn't affect layout. Adding background color doesn't affect. Adding color doesn't. Adding border-radius doesn't. Adding transition doesn't. So we can add those.

Let's design:

- Use editorial palette: background maybe transparent? But we can set a background color to cream (#f5f1e8) on the hero section column? That might be too much. Better to add a subtle background to the contact cards and badge.

3. `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }` - For contact cards, we can add background cream, border (via box-shadow), border-radius 0, transition, maybe a hard offset shadow.

2. `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` - The badge has class `bg-warning` which is a Bootstrap warning color. We can override background-color to the accent deep red or olive? The target says single accent color. But the badge already has `bg-warning` which is yellow. We can change the background-color to the accent, and maybe text color to cream, add box-shadow, border-radius 0, etc. That would create a strong visual refresh.

For the hero column, we can add color: ink black, perhaps a background? Maybe a left border accent using box-shadow? Like `box-shadow: inset 4px 0 0 #c44536;` to create a vertical accent line. But inset shadow doesn't affect layout. Or we could add a text-shadow? Not necessary. We could add `color: #1a1a1a;` but that's default. Maybe add `transition: color 0.15s ease;` but no interaction. Hmm.

Given the rule is just text-align, maybe adding a background to the entire column is too heavy. But we can add a `background-color: rgba(196, 69, 54, 0.05);` for a subtle tint, plus a border-left via box-shadow. But that might not be necessary.

Alternatively, we can simply preserve the original declarations and add visual properties only where they make sense. But the task explicitly says "Only change colors, shadows, radius, transitions, gradients." So we must introduce those. Since the original has none, we need to add some to each rule or at least to the overall file. But because we are outputting just this snippet, we should add visual properties to these rules.

Maybe we can add a `background` to the body? But we cannot add new selectors. So we must stick to these three rules.

Let's craft:

Media query stays same. For each rule:

1. `.app-hero-section .row .col-lg-7 { 
    text-align: center;
    color: #1a1a1a;
    transition: color 0.15s ease;
    box-shadow: inset 0 0 0 2px rgba(196, 69, 54, 0); /* same as no border but changes on hover? Not needed */
}`
But adding an invisible box-shadow is pointless. Maybe we can add a `background`? Let's think of editorial-magazine: The hero section on mobile centered. We might add a top border? Since it's a column, maybe not.

Better approach: Add a `border-left` using box-shadow: `box-shadow: -4px 0 0 var(--accent, #c44536);` but this would draw a line on the left of the column. In a centered column, that might look like a vertical accent. But could be odd. Maybe we can add `padding-left` but we cannot change padding much. Already no padding. Not good.

Maybe we can add a `background` to the column: `background: #f5f1e8;` and `border-radius: 0;`? But that would make a large cream block behind the column. On mobile, it might be full width. That could look editorial. But without padding, the text might touch edges. We could add padding via box-shadow? No.

This is tricky.

Alternatively, we can simply not add anything to the first rule, but add to the others. The instruction says "Refresh this CSS visually" but if a rule has nothing visual, we can leave it. But the self-check says "Colors throughout the file replaced with fresh palette?" Since the file has no colors, not applicable. We should add visual properties to at least some rules.

Let's focus on the badge and the cards.

For the badge:
```
.app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
    background-color: #c44536;
    color: #f5f1e8;
    border-radius: 2px;
    box-shadow: 4px 4px 0 0 #1a1a1a;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
```
This changes the badge from Bootstraps warning (yellow) to deep red accent with hard offset shadow. That is a strong visual change.

For the contact cards:
```
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    background-color: #f5f1e8;
    border-radius: 0;
    box-shadow: 4px 4px 0 0 #1a1a1a;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
```
But adding transform may be a transition of property not in original; allowed? We can apply transitions for visual effects. But if we add transform, it might be considered a property change? Transition is allowed. But adding `transform` itself would be a layout/visual change? We can add `transform` but the target style might involve hover effects, but there is no hover. We can add `transition` even if no state changes. Better not add `transform` because it's a visual property but not in the allowed list? Actually allowed to change opacity, transitions, etc. Transform is not mentioned. We should not add transform to avoid breaking layout. So just transition box-shadow and background-color.

But adding `background-color: #f5f1e8` to contact cards might affect appearance only. Good.

For the hero column, maybe we add a subtle bottom border using box-shadow:
```
.app-hero-section .row .col-lg-7 {
    text-align: center;
    box-shadow: inset 0 -4px 0 0 #c44536;
}
```
That would add a 4px line at the bottom of the column. But the column might be tall, and the line would be at the bottom of the column, not necessarily under text. Could be okay. However, if the column contains other elements, maybe it's okay.

Alternatively, add `color: #1a1a1a;` and `border-bottom: 3px solid #c44536;` but border-width is not allowed? Actually border-width change not allowed. So use box-shadow: `box-shadow: inset 0 -3px 0 0 #c44536;` which creates a line at the bottom inside the element. That might be a nice editorial accent. Also add `transition: box-shadow 0.15s ease;` but no hover.

Let's do that.

Also, we need to consider the palette: cream background, ink text, deep red accent. The original CSS has no colors. We'll set text to ink, backgrounds to cream, accents to deep red.

We should also ensure that the media query itself remains exactly. We'll output with the same indentation and formatting maybe.

Let's write the new CSS:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1a1a1a;
        box-shadow: inset 0 -3px 0 0 #c44536;
        transition: box-shadow 0.15s ease;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #c44536;
        color: #f5f1e8;
        border-radius: 2px;
        box-shadow: 4px 4px 0 0 #1a1a1a;
        transition: background-color 0.15s ease, box-shadow 0.15s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #f5f1e8;
        border-radius: 0;
        box-shadow: 6px 6px 0 0 #1a1a1a;
        transition: box-shadow 0.15s ease;
    }
}

But we need to be careful: The original first rule only had text-align. We added color, box-shadow, transition. Are these allowed? Yes, they are visual properties. We preserved text-align. The second rule preserved font-size. The third rule preserved padding. So good.

Should we use 4px offset or 6px? Sharp edges says 4px 4px 0px solid color. So use 4px 4px. For larger cards, maybe 6px? But target says 4px 4px 0px. Let's stick to 4px 4px 0 0.

Also, maybe use `box-shadow: 4px 4px 0 0 #1a1a1a;` for all. For the badge, the offset shadow might overlap with adjacent elements? It might, but it's small.

Also border-radius: sharp edges say 0-4px. We used 2px for badge, 0 for cards, 0 for hero column? Actually no border-radius for hero column.

We could also add `caret-color`? Not relevant.

Let's check self-check:
- Selectors preserved? Yes.
- display, position, grid etc unchanged? Yes.
- width, height, padding, margin within ±20%? We didn't change padding.
- font-family, font-size, font-weight, line-height unchanged? We didn't change font-size except it remains same. We added color and others.
- Colors replaced? We introduced new colors.
- Shadows redesigned? Yes.
- Border-radius adjusted? Yes.
- No AI comments.

We should output only the CSS, no markdown.

One thing: The instructions say "Only change colors, shadows, radius, transitions, gradients." We added box-shadow, background-color, color, border-radius, transition. Good.

But for the hero column, box-shadow inset might be considered a shadow. Fine.

However, adding `box-shadow: inset 0 -3px 0 0 #c44536;`