/* Magazine catalog purchases */
.catalog-actions-with-patreon { flex-direction: column; }
.catalog-purchase-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.catalog-actions .button { min-width: 0; padding: 12px 10px; font-size: .72rem; text-align: center; }
.catalog-purchase-actions .button { flex-direction: column; gap: 6px; overflow-wrap: anywhere; }
.catalog-actions:not(.catalog-actions-with-patreon) .catalog-details-button { order: -1; }
.catalog-actions-with-patreon .catalog-details-button { width: 100%; }

/* Portrait photo ribbon immediately below the hero */
.magazine-gallery-section { padding: 32px 0; background: #eef1f2; }
.magazine-gallery { position: relative; padding: 16px; border: 1px solid #2a3c44; border-radius: 24px; background: linear-gradient(135deg, #172026, #2a3c44); box-shadow: 0 16px 36px rgba(23,32,38,.12); }
.magazine-gallery-viewport { overflow-x: auto; border-radius: 14px; scrollbar-width: thin; scrollbar-color: var(--yellow) #172026; }
.magazine-gallery-track { display: flex; gap: 18px; width: max-content; }
.magazine-gallery-slide { flex: 0 0 auto; width: clamp(190px, 23vw, 280px); aspect-ratio: 2 / 3; overflow: hidden; border-radius: 12px; background: #111a20; }
.magazine-gallery-slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; user-select: none; }
.magazine-gallery-slide { display: block; cursor: zoom-in; }
.magazine-gallery-slide:focus-visible { outline: 3px solid var(--yellow); outline-offset: -4px; }
.magazine-gallery.is-dragging .magazine-gallery-slide { cursor: grabbing; }


.page-hero-magazines {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 82% 22%,
            rgba(255, 201, 40, .16),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            var(--ink),
            var(--ink-2)
        );
}


/* Фоновое изображение */
.magazine-catalog-background {
    position: absolute;
    z-index: 0;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center center;

    opacity: .13;

    filter:
        saturate(.8)
        contrast(.9);

    pointer-events: none;
}


/* Весь существующий контент остается поверх фона */
.page-hero-magazines .page-hero-grid {
    position: relative;
    z-index: 2;
}

.page-hero-magazines h1 { text-transform: uppercase; }
.magazine-catalog-description { white-space: pre-line; }
.page-hero-magazines-image { width: 100%; height: 360px; display: block; object-fit: cover; border-radius: 26px; }


.page-hero-magazines .magazine-catalog-text-only { grid-template-columns: 1fr; }
.magazine-section-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.magazine-section-nav .filter-chip { display: inline-flex; text-align: center; }
@media (max-width: 560px) { 
.magazine-section-nav {margin-top: 28px; }

.page-hero-magazines-image { height: 260px; } }
.magazine-gallery.is-enhanced .magazine-gallery-viewport { overflow: hidden; touch-action: pan-y; cursor: grab; }
.magazine-gallery.is-dragging .magazine-gallery-viewport { cursor: grabbing; }
.magazine-gallery.is-enhanced .magazine-gallery-track { will-change: transform; }
.magazine-gallery.is-static .magazine-gallery-track { margin: auto; }
.magazine-gallery-arrow, .magazine-gallery-pause { position: absolute; z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: var(--yellow); color: var(--ink); box-shadow: 0 4px 18px rgba(0,0,0,.25); cursor: pointer; }
.magazine-gallery-arrow { top: 50%; transform: translateY(-50%); font-size: 24px; }
.magazine-gallery-prev { left: -7px; }
.magazine-gallery-next { right: -7px; }
.magazine-gallery-pause { right: 25px; bottom: 25px; width: 36px; height: 36px; background: rgba(23,32,38,.9); color: #fff; font-size: 15px; }
.magazine-gallery [hidden] { display: none; }
.magazine-gallery button:hover { filter: brightness(1.08); }
.magazine-gallery button:focus-visible, .magazine-gallery-viewport:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }

/* Other issues: reuse the home shelf with flexible cover sizing. */
.magazine-related-section { background: #f5f6f6; padding-top: 32px; }
.magazine-related-section .latest-magazines-box { padding: 32px; border-radius: 24px; background: radial-gradient(ellipse at top, rgba(255,201,40,.08), transparent 65%), linear-gradient(145deg, #172026, #121b21); box-shadow: 0 16px 36px rgba(23,32,38,.12); }
.magazine-related-section .latest-magazines-heading { margin-bottom: 24px; }
.magazine-related-section .latest-magazines-heading h2 { text-align: center; text-transform: uppercase; }
.magazine-related-section .latest-magazines-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.magazine-related-section .latest-magazine-cover { width: calc((100% - 90px) / 6); margin: 0; padding: 4px; border-radius: 10px; background: rgba(255,255,255,.12); transition: transform .2s, box-shadow .2s; }
.magazine-related-section .latest-magazine-cover img, .magazine-related-section .latest-magazine-placeholder { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: contain; border-radius: 6px; }
.magazine-related-section .latest-magazines-actions { margin-top: 28px; }
@media (max-width: 900px) {
    .magazine-related-section .latest-magazine-cover { width: calc((100% - 36px) / 3); }
}
@media (max-width: 560px) {
    .magazine-gallery-section { padding: 20px 0; }
    .magazine-gallery { padding: 10px; border-radius: 18px; }
    .magazine-gallery-track { gap: 12px; }
    .magazine-gallery-slide { width: 68vw; max-width: 280px; }
    .magazine-gallery-arrow { width: 40px; height: 40px; }
    .magazine-related-section .latest-magazines-box { padding: 24px 16px; border-radius: 18px; }
    .magazine-related-section .latest-magazines-strip { gap: 14px; }
    .magazine-related-section .latest-magazine-cover { width: calc((100% - 14px) / 2); }
}
@media (prefers-reduced-motion: reduce) {
    .magazine-related-section .latest-magazine-cover { transition: none; }
}