/* ============================================================
   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 based on the target style "editorial-magazine" with "sharp-edges" variant. But the original CSS is a small media query block. It contains only a few rules. We need to refresh visual identity without changing layout. The target style suggests using cream/beige backgrounds, ink black text, deep red accent, hard offset shadows, small border radius, strong borders, snappy transitions.

The original CSS only has:
- .app-hero-section .row .col-lg-7 text-align center (this is typography/layout, but we cannot change text-align? Actually it's allowed? It says text-align is typographic and not to change. So we keep it as is.)
- .app-hero-section .badge.bg-warning font-size (font-size not allowed to change, so keep)
- .contact-channels-section article, .contact-quick-section .contact-card padding (padding can change within ±20%? The original has padding: var(--space-md) !important; We might keep it same or adjust within 20%? But we don't know the value of --space-md. Better keep as is to avoid layout changes? Actually we are allowed to change colors, shadows, radius, transitions, gradients. Padding is layout, we should keep. The instruction says "padding, margin (keep similar values, ±20% maximum)". So we can adjust slightly, but we need to be careful because it's using a CSS variable. We can leave padding unchanged.

We need to add visual identity changes. Since the original CSS only has these three rules, we can add new properties within those rules? We can add color, background, border, box-shadow, etc. to those selectors. But we must preserve all selectors exactly. We can also add new rules? The instruction says "Keep ALL selectors and layout exactly as-is." That likely means we shouldn't add new selectors? It says "Only change colors, shadows, radius, transitions, gradients." So we cannot add new properties like display etc. But we can add new declarations to existing rules.

However, the original CSS has specific selectors that are for layout adjustments on small screens. We need to visually refresh them. We can add things like background-color, color, border-radius, box-shadow, transition to those elements. But we must be careful: Some of those elements may be expected to have their own styling elsewhere; we're only modifying this media query.

The target style: editorial-magazine with sharp edges. We can add a red accent to the badge, maybe cream background to hero section? But we don't have the full context. We need to rewrite the CSS we are given. Since the original is a media query, we can enrich it with visual properties that apply only within the media query. But we must not change the selectors.

Let's examine each selector:

1. `.app-hero-section .row .col-lg-7` - currently text-align: center. We can add color, background, maybe box-shadow? But that would affect the column. In an editorial style, maybe we set the hero text to ink black, add an accent underline? But we cannot change text-decoration? We can add border-bottom maybe. But not sure.

2. `.app-hero-section .badge.bg-warning` - currently font-size. We can add background-color, color, border, box-shadow, border-radius to make it a sharp-edge badge. The class `bg-warning` is a Bootstrap utility class that typically sets background yellow. We can override it. Use deep red accent, cream background? Actually editorial palette: cream/beige backgrounds, ink black text, single accent deep red or olive. For a badge, we could make it deep red background, cream text, hard offset shadow, small radius, strong border.

3. `.contact-channels-section article, .contact-quick-section .contact-card` - currently padding. We can add background, border, box-shadow to make cards editorial.

But we must keep all selectors exactly. We can also add new declarations to these existing selectors. However, the instruction says "Only change colors, shadows, radius, transitions, gradients." That means we can add properties like color, background, border-color, border-radius, box-shadow, transition, etc. We cannot add properties like font-size, padding, etc. Actually padding is layout but we are allowed to keep similar values. We already have padding in that rule, we can keep it.

We need to use the CSS variables? The original uses `var(--space-md)` for padding. We can also define custom properties? But we need to output the rewritten CSS. Since it's a media query, we can't add root variables inside a media query? We could but it's weird. Better to use direct values.

Let's think about the target style. "Editorial-magazine" with "sharp-edges": hard offset shadows 4px 4px 0px solid color, small or zero border-radius (0-4px), strong borders (2-3px solid), snappy transitions (0.15s). Color palette: cream/beige backgrounds #f5f1e8, ink black #1a1a1a, accent deep red #c44536 or olive #6b705c.

We should apply these to the selectors. But note the original CSS is within a `@media (max-width: 575.98px)` query. We need to preserve the media query exactly.

We can rewrite the CSS like:

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

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

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

But wait, we need to ensure we don't break the existing layout. Adding background-color to `.col-lg-7` might create a block background that could affect layout? It might. But we can keep it minimal. The target style maybe expects the hero section to have cream background? But since it's only the col, not the whole section, setting background could be undesirable. Maybe we can set color only.

The instruction says "Refresh the visual identity WITHOUT changing layout structure or class names." Adding background-color could change the visual layout? It doesn't change structure, but it may change appearance of the column. That's fine; it's a visual change.

However, there's a nuance: The original CSS only has these three rules. We are not obligated to add every visual property; we can adjust existing values if they are color/shadow/radius/transition/gradients. But there are no existing colors/shadows in the original. So we can add them. But we must ensure we don't add new properties that are not allowed? The allowed categories include colors, shadows, radius, transitions, gradients. So adding background-color, color, border-color, border-style, box-shadow, text-shadow, border-radius, transition, filter, backdrop-filter, opacity, outline, caret-color, accent-color is allowed. But we must not change layout properties. We should avoid adding border-width? Actually border-width is a layout? It says "border-color and border-style (NOT border-width)" can change. So if we add a border, we must not change border-width from any existing specified width. But there was no border before, so adding a border with a specific width might be considered changing layout? Since it's a new property, it could affect box-sizing. But border-width is not in the never-change list? Wait, the list says "border-color and border-style (NOT border-width)" under "✅ YOU MUST CHANGE". It says you must change border-color and border-style, but NOT border-width. So border-width should remain as in the original. If there was no border-width originally, we should be careful about adding a border because it introduces a border-width that could alter layout. However, adding a border within the media query changes the dimensions of the element (if box-sizing is content-box). But we could replace it with box-shadow that simulates a border. Alternatively, we can add `box-shadow: inset 0 0 0 2px #1a1a1a` to simulate a border without affecting layout. That might be safer.

But the target variant explicitly says "Strong borders (2-3px solid)" and "Hard offset shadows: 4px 4px 0px solid color". So we are encouraged to use strong borders. We need to consider how the original CSS is structured. Since these are components likely using Bootstrap, they may have box-sizing: border-box, so adding a border won't affect overall layout as much. But in a media query, it could cause wrapping issues. However, we are to preserve layout exactly. To be safe, we can use box-shadow for the border effect: `box-shadow: 0 0 0 2px #1a1a1a, 4px 4px 0px 0px #1a1a1a;` This simulates a 2px border and an offset hard shadow, without changing box dimensions. But note the "hard offset shadows: 4px 4px 0px solid color" is typically `box-shadow: 4px 4px 0px 0px color`. If we also want a border, we can combine. But using box-shadow for border is a common technique.

Alternatively, we can set `border: 2px solid #1a1a1a;` and if box-sizing is border-box, it's fine. But if not, it might change width. Since the original CSS does not specify box-sizing, it might inherit from root. Most modern frameworks set border-box globally. We don't know.

To strictly comply with "NOT border-width" and avoid layout change, we should not change border-width if it's not already set. Since it's not set, adding a border-width is technically a change. But the instruction says "border-color and border-style (NOT border-width)" means we must change those if present, but we are not allowed to change them. It's ambiguous: it says "✅ YOU MUST CHANGE: border-color and border-style (NOT border-width)" meaning we must change border-color and border-style, but not border-width. Since there is no border-color or border-style currently, we could add them. But adding a border-width is new. However, the example target style says "Strong borders (2-3px solid)" so perhaps we are allowed to add borders? The "NEVER CHANGE" list does not include border-width, but the "MUST CHANGE" list excludes border-width. That suggests border-width should stay exactly as in the original; if it's not specified, we shouldn't specify it. But the target style wants strong borders. We can achieve strong borders using box-shadow, which doesn't affect layout.

Thus, I'll use box-shadow to create the illusion of a 2-3px border plus offset shadow. For example: `box-shadow: 0 0 0 2px #1a1a1a, 4px 4px 0px 0px #1a1a1a;` This creates a 2px "border" and a 4px offset hard shadow. That preserves layout.

But wait, the target style says "Hard offset shadows: 4px 4px 0px solid color" - that's a bit weird because box-shadow doesn't have "solid". They mean no blur, no spread: `box-shadow: 4px 4px 0px 0px color`. We can do that.

Also, "Small or zero border-radius (0-4px)" - we can set `border-radius: 0` to sharp edges.

"Snappy transitions (0.15s)" - we can add `transition: all 0.15s ease;`.

Now, the editorial palette: cream backgrounds, ink black text, deep red accent. For the badge, we can use deep red background with cream text. For the cards, we can use cream background with ink border shadow. For the hero column, we can set color to ink black.

We also need to consider the existing `!important` on padding. We should keep it.

Now, let's rewrite the CSS with these values. But we need to ensure we preserve the exact selectors and the media query.

We also have the option to add custom properties? Not necessary.

Let's produce:

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

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

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

But note: The `!important` on padding might override some inline styles, and we are not adding `!important` to other properties. That's fine.

However, the `contact-channels-section article, .contact-quick-section .contact-card` selector is a group; we need to preserve the comma and newline as in the original. The original has:

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

We'll preserve that.

One issue: Adding `color: #1a1a1a;` to `.app-hero-section .row .col-lg-7` might override inherited colors. That's fine.

But is it appropriate to set background-color on the cards? The cards might already have a background from elsewhere. We can override it in the media query. That could be a visual change for small screens only, which is fine.

We also need to consider if the `badge.bg-warning` has a background image or gradient from Bootstrap; we are overriding it.

Now, should we use `box-shadow: 0 0 0 2px #1a1a1a, 4px 4px 0px 0px #1a1a1a;` or `box-shadow: 4px 4px 0px 0px #1a1a1a;`? The latter is simpler and matches the variant. The strong border can be simulated with a separate `border: 1px solid #1a1a1a;` but that may alter layout. Maybe we can use `outline: 2px solid #1a1a1a;` because outline doesn't affect layout. The instruction says "outline styles (color, type)" can change. So we can add `outline: 2px solid #1a1a1a;` to create a strong border without layout impact. That's a good idea. Since the original didn't have an outline, adding it is allowed because outline styles are in the "MUST CHANGE" category? Actually it says "outline styles (color, type)" - we must change them, but if they don't exist, we can add. Using outline preserves layout. However, outline may not follow border-radius in some browsers? But we set border-radius to 0, so it's fine.

Let's use outline for the strong border and box-shadow for the hard offset. Then `box-shadow: 4px 4px 0px 0px #1a1a1a;`. This gives a clean editorial sharp edge.

We can also add `border: 0`? Not necessary.

What about the hero col? We may add a bottom border or box-shadow? The target style wants editorial-magazine with asymmetric grids, but we can't change layout. We'll keep it simple.

Let's craft the final CSS:

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

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

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

But note: We added `color: #1a1a1a` to the cards. That's fine.

We need to ensure the original selectors are exactly preserved. The original has `.app-hero-section .bad