/* ============================================================
   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 respond with rewritten CSS only, no markdown fences. The input is a media query with two selectors and a property block. We need to preserve all selectors exactly, layout, typography. Only visual properties may change: colors, shadows, border-radius, transitions, gradients, etc. But the given CSS doesn't have any of those except font-size (which is typography, must be unchanged) and padding (layout, must keep similar ±20%, so padding value var(--space-md) can't change because it's a var reference that defines spacing, but we could potentially adjust? Actually padding is layout, must keep similar, so we keep it exactly). Also the media query breakpoint must stay. There's no colors/shadows. We need to "refresh visual identity" meaning we can add visual properties? The instruction says "Refresh this CSS visually" but cannot change layout. We can modify existing selected rules to include new visual properties like border-radius, box-shadow, color, background, etc. But the original CSS only has one font-size and padding. Since we cannot change font-size (typography), and padding must stay (or within 20%), we can add additional declarations to these selectors that are visual-only. Also the media query conditions stay. We need to output only rewritten CSS preserving all selectors and layout exactly. So we can add border-radius, box-shadow, transition, background, color to the existing rules? But careful: The first selector `.app-hero-section .row .col-lg-7` currently has `text-align: center;` which is layout (text-align is in layout list? Actually text-align is listed as "text-align" under typography? Wait, "text-align" is in the not-to-change list: "text-align, vertical-align" under layout? Let's review: The NOT change list includes: display, position, ..., text-align, vertical-align. Yes, text-align should not change. So keep that.

The second selector has font-size (can't change) and padding (can't change). We need to "Refresh visually". Since there is nothing visual to change, we can add properties to the rules to introduce visual identity while keeping all existing declarations. But is adding allowed? The task says "Only change colors, shadows, radius, transitions, gradients" — it doesn't explicitly say we cannot add declarations. However, we must preserve layout exactly. Adding visual-only declarations like background, border-radius, box-shadow is allowed. But note the selectors are inside a media query for small screens. Adding background color to `.app-hero-section .col-lg-7` might change layout? No, background doesn't affect layout. Adding border-radius to `.contact-card` etc. could be visual.

But there is a subtlety: the original CSS does not include any color values, so are we required to output the same set of declarations? The task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." If there are no such properties, we can either leave unchanged or introduce them. The output should be a full rewritten CSS. To satisfy the request, we can add visual properties to those selectors within the media query. But is that "changing" layout? No.

However, the instructions also say "First character = first CSS character" and "No markdown fences." So we should output just the CSS.

Need to preserve the media query exactly: `@media (max-width: 575.98px) { ... }`. The inner selector lists must remain exactly. The existing declarations must remain exactly because they are layout/typography. We can add new declarations after them.

But let's think: Is it acceptable to add declarations? The "Self-check" says "Every selector character-for-character preserved?" If we keep selectors, yes. "display, position, grid-template-*, flex-direction unchanged?" We don't change them. "width, height, padding, margin within ±20%?" We keep padding. "font-family, font-size, font-weight, line-height unchanged?" We keep font-size. "Colors throughout the file replaced with fresh palette?" There are no colors in the input, so we can add colors. "Shadows redesigned?" We can add shadows. "Border-radius adjusted?" We can add. "No AI marker comments?" We won't.

So the output could be:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: rgba(196, 69, 54, 0.04);
        border-radius: 18px;
        box-shadow: 0 8px 30px rgba(26, 26, 26, 0.06);
        transition: background 0.3s ease, box-shadow 0.3s ease;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: rgba(196, 69, 54, 0.12);
        color: #1a1a1a;
        border-radius: 999px;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #fffdf8;
        border: 1px solid rgba(26, 26, 26, 0.08);
        border-radius: 22px;
        box-shadow: 0 12px 32px rgba(26, 26, 26, 0.06);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }
}
```

But wait, changing `background-color` on `.badge.bg-warning` might conflict with Bootstrap? The original only set font-size. Adding background-color/color could be considered a visual refresh. But is it allowed? Yes, colors can change. However, `.badge.bg-warning` is a Bootstrap utility class—the background color would usually be `#ffc107`. Changing it might be a bit odd, but the task is to refresh the visual identity. The target style is editorial-magazine with deep red accent or olive. Since it's a warning badge, perhaps using a muted red/cream? We need to be careful.

But maybe we should not add unnecessary declarations that could affect layout. Background color, border radius, shadows, transition don't affect layout. Adding `color` to badge is visual. But could it break text contrast? It's fine.

However, the instruction "Only change colors, shadows, radius, transitions, gradients" could be interpreted as: you may modify existing values of these properties, but you cannot add new properties that weren't there. Usually in CSS rewriting tasks, you should preserve the structure and only change property values. But if the original has no color to change, you might just leave it as-is, but then you haven't done a visual refresh. The safest is to add visual enhancements while maintaining the original declarations. But "Only change colors, shadows, radius, transitions, gradients" - "change" implies there must be existing. But to be helpful, we can add those properties.

Let's check the file "saishi.css" likely for a sports tournament website. The requested style: editorial-magazine with cream background, ink text, deep red accent. For mobile max-width 575.98, we can adjust the hero section to have a subtle background and radius; the badge to have red accent; contact cards to have cream background, soft shadow, rounded corners.

Need to ensure "border-radius" doesn't make layout weird. The `.app-hero-section .row .col-lg-7` is a column; adding background and border-radius might be okay.

But potentially the media query is just one block. We must output exactly the media query block with selectors.

Let's think about "padding: var(--space-md) !important" — we cannot change that. Add background after.

Also need to consider the "transition" property: it is a "visual" property? The task says "transition timing, easing, duration" can change. We can add transition.

We should use the editorial palette: cream `#f5f1e8`, ink `#1a1a1a`, deep red `#c44536`. Shadows: `0 12px 32px rgba(26, 26, 26, 0.06)`, etc.

Let's craft a clean output. Need to avoid adding any property that could be considered layout. For example, `box-shadow` on `.app-hero-section .row .col-lg-7` could be a large area; maybe use a very subtle one. Also transition requires the property to change; we add `transition: background-color 0.25s ease, box-shadow 0.25s ease;` but there's no hover state in this block. However, transitions can exist for future hovers. That's fine.

But wait: The selector `.app-hero-section .badge.bg-warning` has a font-size only. If we add `background-color`, it will override the Bootstrap `.bg-warning` background. Is that desired? The target style "editorial-magazine" with accent color, maybe we want a deep red background with cream text. But `.badge` may have its own color. We can set `background-color: #c44536; color: #f5f1e8;`. But this is a hero badge; maybe it's a warning "limited time" badge. Using deep red may be fine. But we need to be careful: `.bg-warning` in Bootstrap sets `background-color: #ffc107 !important` maybe? Actually Bootstrap `bg-warning` sets `background-color: #ffc107 !important;` and `badge` sets color. If we include `background-color: #c44536;` without !important, it might be overridden by Bootstrap's `!important`. In the original CSS, they altered `font-size` only, not background. If we want to change the background to deep red, we'd need `!important` to override Bootstrap's `!important`. But adding `!important` to a new declaration is not layout, but is it safe? It changes visual only. Could do `background-color: #c44536 !important;`. However, that might be too aggressive. The target style says "Single accent color (deep red #c44536 or olive #6b705c)". We can use an olive background with cream? Hmm.

Maybe instead of overriding, we can leave the badge as is and only adjust its shadow/radius. But to "refresh", we can add `border-radius: 999px;` and `box-shadow: 0 2px 8px rgba(196, 69, 54, 0.15);` and maybe `background-color` without important. But Bootstrap bg-warning has `!important`, so our declaration without important loses. To ensure visual identity, we should add `!important`. But is that considered changing "background-color"? Yes, it's a color change. The original property didn't exist, so we're adding. The instruction says "All color values" must change, but since there are none, we add. It's fine.

Let's think about the `.contact-channels-section article, .contact-quick-section .contact-card` selector. It's a group; we can add visual properties to both. The original has `padding: var(--space-md) !important;`. We keep it, then add `background-color: #fffaf0;` or `#f5f1e8`. Since the overall site maybe already has a background, adding a cream background to cards could be good. Add `border-radius: 22px; box-shadow: 0 16px 40px rgba(26, 26, 26, 0.05);` and `border: 1px solid rgba(26, 26, 26, 0.06);`. But `border` adds a border, which might alter layout? Border width affects box size; but with `box-sizing: border-box` likely, and the original didn't have a border. Adding a 1px border changes the layout by 2px if box-sizing isn't border-box. The instruction says "border-color and border-style (NOT border-width)" can change. It says "border-color and border-style (NOT border-width)" meaning we can change color and style, but we cannot change width. But adding a border where none existed changes border-width from 0 to 1px, which violates "NOT border-width". So we should NOT add a border. Instead, use box-shadow to simulate a border: `box-shadow: 0 0 0 1px rgba(26,26,26,0.04), 0 16px 40px rgba(26,26,26,0.06);` That is a shadow, allowed. Good.

Similarly, adding `background` or `border-radius` does not affect layout (border-radius doesn't). Adding `transition` is fine.

For the hero col, adding `background` maybe not desired; maybe just `border-radius`? The editorial style often has generous radius. But adding background to a column could look like a panel, maybe okay. But to be conservative, we could add a `border-radius` and `box-shadow` only.

Let's review the constraints: "Only change colors, shadows, radius, transitions, gradients." So adding `background` color is a color change, okay. Adding `border-radius` is okay. Adding `box-shadow` is okay. Adding `transition` is okay.

Let's craft a solution that beautifies all selectors in the media query.

Potential issue: The first selector `.app-hero-section .row .col-lg-7` might be a large column; giving it a background might change the look significantly. But that's the point of visual refresh. Yet on small screens, the column is likely stacked and centered. A background panel might be fine.

Let's decide on palette:
- Cream background: `#f5f1e8`
- Ink: `#1a1a1a`
- Deep red accent: `#c44536`
- Soft shadow: `rgba(26, 26, 26, 0.06)`

For `.app-hero-section .row .col-lg-7`:
```
text-align: center;
background-color: rgba(196, 69, 54, 0.05);
border-radius: 24px;
box-shadow: 0 20px 40px rgba(26, 26, 26, 0.06);
transition: background-color 0.35s ease, box-shadow 0.35s ease;
```
But maybe background with a reddish tint is more editorial? Actually editorial magazines use cream for backgrounds, not red tint. Could use `background-color: rgba(255, 253, 248, 0.6)` or just no background. Hmm.

Maybe instead:
```
background-color: rgba(255, 250, 240, 0.5);
border-radius: 24px;
box-shadow: 0 24px 48px rgba(26, 26, 26, 0.05);
```

For `.badge.bg-warning`:
```
font-size: 0.85rem;
background-color: #c44536 !important;
color: #f5f1e8;
border-radius: 999px;
box-shadow: 0 4px 12px rgba(196, 69, 54, 0.25);
```
Could also add `letter-spacing`? No, typography unchanged.

For contact cards:
```
padding: var(--space-md) !important;
background-color: #fdfaf3;
border-radius: 24px;
box-shadow: 0 12px 32px rgba(26, 26, 26, 0.06), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
transition: box-shadow 0.3s ease, background-color 0.3s ease;
```
But background-color maybe should be lighter than page background; if page background is cream, card can be white-ish `#fdfaf3`. Good.

Need to ensure the "editorial-magazine" target includes "Generous outer padding" and "large gaps", but in mobile media query we shouldn't change padding. We won't.

Now, do we need to include the original `@media` and the exact indentation? We can output with normal indentation.

We need to ensure every selector character-for-character preserved. We'll copy exactly:
- `.app-hero-section .row .col-lg-7`
- `.app-hero-section .badge.bg-warning`
- `.contact-channels-section article,
    .contact-quick-section .contact-card`

The original had the selector list on two lines for the contact block. We'll preserve that formatting maybe.

Let's output:

```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background-color: rgba(255, 250, 240, 0.5);
        border-radius: 24px;
        box-shadow: 0 24px 48px rgba(26, 26, 26, 0.05);
        transition: background-color 0.35s ease, box-shadow 0.35s ease;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #c44536 !important;
        color: #f5f1e8;
        border-radius: 999px;
        box-shadow: 0 4px 12px rgba(196, 69, 54, 0.25);
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #fdfaf3;
        border-radius: 24px;
        box-shadow: 0 12px 32px rgba(26, 26, 26, 0.06);
        transition: box-shadow 0.3s ease, background-color 0.3s ease;
    }
}
```

But wait: We added `color: #f5f1e8` to badge. The original badge might already have a color from `.badge` (white text). Adding cream is okay. But `color` is typography? The constraints list font-size, font-weight, font-style, line-height, letter-spacing, word