.magazines-container {
    padding-top: 135px;
}

.breadcrumbs__list {
    color: var(--color-primary);
}

.breadcrumbs__current,
.breadcrumbs__separator {
    color: var(--color-shades-tertiary);
}

.breadcrumbs__link {
    color: var(--color-primary);
}

.magazines-header {
    margin-top: 32px;
    margin-bottom: 32px;
}



.magazines-grid {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 40px;
    gap: 32px;
}

/* --- Card --------------------------------------------------------------- */
.magazines-grid .magazines-card {
    width: 300px;
    display: flex;
    flex-direction: column;
    background-color: var(--color-secondary-variant);
    text-decoration: none;
    color: inherit;
    padding: 24px;
    align-items: center;
    justify-content: center;
}


.magazines-card .cover-box {
    width: 100%;
    max-width: 252px;
    height: auto;
    aspect-ratio: 252 / 354;
    position: relative;
}

/* Base for all image layers */
.magazines-card .cover-box .image-wrapper {
    position: absolute;
    top: 0;
    right: 50%;
    width: 92%;
    height: 98%;
    transform: translate(50%);
    display: block;
}

.cover-box .image-wrapper:last-child {
    width: 100%;
    height: 100%;
}

.magazines-card .cover-box .image-wrapper img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Layer 1 = top-most, Layer 6 = back-most.
   Each layer gets its own size + position + z-index. */
.magazines-card .cover-box .image-1 {
    z-index: 6;
}

.magazines-card .cover-box .image-2 {
    z-index: 5;
    mix-blend-mode: multiply;
}

.magazines-card .cover-box .image-3 {
    z-index: 4;
    mix-blend-mode: color-dodge;
}

.magazines-card .cover-box .image-4 {
    z-index: 3;
}

.magazines-card .cover-box .image-5 {
    z-index: 2;
}

.magazines-card .cover-box .image-6 {
    z-index: 1;
}



.union-shape-w {
    width: 24px;
    height: auto;
    aspect-ratio: 24 / 40;
    background-color: var(--color-surface);

    -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 40'><path d='M-1.37091e-06 0V40H2.61774C5.05415 40 7.02923 37.9871 7.02923 35.5042C9.46563 35.5042 11.4407 33.4917 11.4407 31.0088C11.4407 30.9528 11.4345 30.8983 11.4323 30.8431C19.3947 30.6802 19.4391 21.8091 23.75 20C19.4391 18.1909 19.3947 9.31976 11.4323 9.1569C11.4341 9.10132 11.4407 9.04721 11.4407 8.99125C11.4407 6.50831 9.46564 4.4958 7.02923 4.4958C7.02923 2.01286 5.05415 1.05461e-07 2.61774 0H-1.37091e-06Z'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 40'><path d='M-1.37091e-06 0V40H2.61774C5.05415 40 7.02923 37.9871 7.02923 35.5042C9.46563 35.5042 11.4407 33.4917 11.4407 31.0088C11.4407 30.9528 11.4345 30.8983 11.4323 30.8431C19.3947 30.6802 19.4391 21.8091 23.75 20C19.4391 18.1909 19.3947 9.31976 11.4323 9.1569C11.4341 9.10132 11.4407 9.04721 11.4407 8.99125C11.4407 6.50831 9.46564 4.4958 7.02923 4.4958C7.02923 2.01286 5.05415 1.05461e-07 2.61774 0H-1.37091e-06Z'/></svg>") center / contain no-repeat;

}

.union-shape-w.flipped {
    transform: scaleX(-1);
}


.magazines-grid .magazines-card .magazine-card-title {
    width: 100%;
    margin-top: 8px;
    display: flex;
    align-items: stretch;
    direction: ltr;
}

.magazines-grid .magazines-card .magazine-card-title .title-text {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    direction: rtl;
    background-color: var(--color-surface);
    color: var(--color-shades-primary);
    font-size: 14px;
    font-weight: var(--weight-medium);
    text-align: center;
    padding-inline: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}

@media (max-width: 1030px) {
    .magazines-grid {
        gap: 24px;

    }

    .magazines-grid .magazines-card {
        width: 30%;
    }
}


@media (max-width: 768px) {
    .magazines-grid .magazines-card {
        width: 45%;
    }
}

@media (max-width: 560px) {
    .magazines-grid {
        gap: 20px;
        justify-content: center;
    }

    .magazines-grid .magazines-card {
        width: 100%;
        max-width: 300px;

    }
}


/* ==========================================================================
   Hover & Active
   ========================================================================== */

.magazines-grid .magazines-card {
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.magazines-grid .magazines-card .magazine-card-title .title-text {
    transition: color 0.25s ease;
}

/* Lift + slight scale on hover */
.magazines-grid .magazines-card:hover {
    transform: translateY(-6px) scale(1.02);
}

/* Title shifts to primary color on hover */
.magazines-grid .magazines-card:hover .magazine-card-title .title-text {
    color: var(--color-primary);
}

/* Active press feedback — smaller lift, slight pressed scale */
.magazines-grid .magazines-card:active {
    transform: translateY(-2px) scale(1.01);
}

/* ==========================================================================
   Animations — Magazines listing page
   ========================================================================== */

/* --- Breadcrumbs / header ----------------------------------------------- */
.magazines-container .breadcrumbs,
.magazines-container .magazines-header {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.magazines-container.is-visible .breadcrumbs {
    opacity: 1;
    transform: translateY(0);
}

.magazines-container.is-visible .magazines-header {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 150ms;
}

/* Decorative stick grows in */
.magazines-container .magazines-header .stick {
    transform: scaleY(0);
    transform-origin: bottom center;
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1) 300ms;
}

.magazines-container.is-visible .magazines-header .stick {
    transform: scaleY(1);
}


/* --- Cards stagger fade-up --------------------------------------------- */
.magazines-container .magazines-grid .magazines-card {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 600ms ease,
        transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.3s ease;
    transition-delay: calc(var(--card-index, 0) * 70ms + 400ms);
}

.magazines-container.is-visible .magazines-grid .magazines-card {
    opacity: 1;
    transform: translateY(0);
}


/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

    .magazines-container .breadcrumbs,
    .magazines-container .magazines-header,
    .magazines-container .magazines-header .stick,
    .magazines-container .magazines-grid .magazines-card {
        transition: none;
        transform: none;
        opacity: 1;
    }
}