/* Category Magazine Layout */

.cmag-magazine {
    width: 100%;
    margin: 1.5rem 0;
}

/* Header */
.cmag-header {
    margin-bottom: 1.25rem;
}

.cmag-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cmag-title-color, #2a3530);
    margin-bottom: 0;
    text-wrap: balance;
}

/* Layout */
.cmag-layout {
    display: flex;
    gap: var(--cmag-gap, 20px);
    align-items: flex-start;
}

.cmag-main {
    flex: 1 1 55%;
    min-width: 0;
}

.cmag-side {
    flex: 1 1 45%;
    min-width: 0;
}

/* Main Card */
.cmag-main-card {
    background: var(--cmag-card-bg, #fff);
    border-radius: var(--cmag-border-radius, 12px);
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

/* Transparent Background Variant */
.cmag-main-card.cmag-transparent,
.cmag-side-item.cmag-transparent {
    background: transparent;
    box-shadow: none;
}

.cmag-main-card.cmag-transparent:hover,
.cmag-side-item.cmag-transparent:hover {
    box-shadow: none;
}

.cmag-main-body.cmag-transparent,
.cmag-side-body.cmag-transparent {
    background: transparent;
}

/* Frameless Variant */
.cmag-main-card.cmag-frameless,
.cmag-side-item.cmag-frameless {
    border: none;
    box-shadow: none;
}

.cmag-main-card.cmag-frameless:hover,
.cmag-side-item.cmag-frameless:hover {
    box-shadow: none;
    border: none;
}

/* Main Image - 16:9 aspect ratio */
.cmag-main-image {
    position: relative;
    display: block;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
}

.cmag-main-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* No Image Placeholder */
.cmag-no-image {
    background-color: var(--surface-sunken);
}

.cmag-no-image i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5rem;
    color: var(--text-muted);
}

/* Main Body */
.cmag-main-body {
    padding: 1.25rem;
}

/* Category */
.cmag-category {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

/* Main Title */
.cmag-main-title {
    font-size: 0.95rem !important;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.75rem;
}

.cmag-main-title a {
    color: var(--cmag-title-color, #2a3530);
    text-decoration: none;
    transition: color 0.2s ease;
}

.cmag-main-title a:hover {
    color: var(--cmag-title-hover-color, #1d6b5e);
    text-decoration: underline;
}

/* Main Introtext */
.cmag-main-intro {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 0;
}

/* Side Items Container */
.cmag-side-items {
    display: flex;
    flex-direction: column;
    gap: var(--cmag-gap, 20px);
}

/* Side Item */
.cmag-side-item {
    background: var(--cmag-card-bg, #fff);
    border-radius: var(--cmag-border-radius, 12px);
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.cmag-side-item-inner {
    display: flex;
}

/* Side Image - Fixed 160px width */
.cmag-side-image {
    position: relative;
    display: block;
    width: 160px;
    min-width: 160px;
    height: 110px;
    overflow: hidden;
    border-radius: var(--cmag-border-radius, 12px) 0 0 var(--cmag-border-radius, 12px);
}

.cmag-side-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* Side Body */
.cmag-side-body {
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: top;
    min-width: 0;
}

/* Side Title */
.cmag-side-title {
    font-size: 0.95rem !important;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0;
}

.cmag-side-title a {
    color: var(--cmag-title-color, #2a3530);
    text-decoration: none;
    transition: color 0.2s ease;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cmag-side-title a:hover {
    color: var(--cmag-title-hover-color, #1d6b5e);
    text-decoration: underline;
}

/* Dark mode */
[data-bs-theme="dark"] .cmag-main-card,
[data-bs-theme="dark"] .cmag-side-item {
    background: #2f3833;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .cmag-main-card.cmag-transparent,
[data-bs-theme="dark"] .cmag-side-item.cmag-transparent {
    background: transparent;
    box-shadow: none;
}

[data-bs-theme="dark"] .cmag-main-card.cmag-transparent:hover,
[data-bs-theme="dark"] .cmag-side-item.cmag-transparent:hover {
    box-shadow: none;
}

[data-bs-theme="dark"] .cmag-main-card.cmag-frameless,
[data-bs-theme="dark"] .cmag-side-item.cmag-frameless {
    box-shadow: none;
}

[data-bs-theme="dark"] .cmag-main-card.cmag-frameless:hover,
[data-bs-theme="dark"] .cmag-side-item.cmag-frameless:hover {
    box-shadow: none;
}

[data-bs-theme="dark"] .cmag-title {
    color: var(--cmag-title-color, #d7dedb);
}

[data-bs-theme="dark"] .cmag-category {
    color: var(--text-muted);
}

[data-bs-theme="dark"] .cmag-main-title a,
[data-bs-theme="dark"] .cmag-side-title a {
    color: var(--cmag-title-color, #d7dedb);
}

[data-bs-theme="dark"] .cmag-main-title a:hover,
[data-bs-theme="dark"] .cmag-side-title a:hover {
    color: var(--cmag-title-hover-color, var(--primary-color));
}

[data-bs-theme="dark"] .cmag-main-intro {
    color: var(--text-muted);
}

[data-bs-theme="dark"] .cmag-no-image {
    background-color: #161c1a;
}

[data-bs-theme="dark"] .cmag-no-image i {
    color: var(--text-muted);
}

/* Responsive */
@media (max-width: 767px) {
    .cmag-layout {
        flex-direction: column;
    }

    .cmag-main,
    .cmag-side {
        flex: 1 1 100%;
    }

    .cmag-main-title {
        font-size: 0.85rem !important;
    }

    .cmag-main-body {
        padding: 1rem;
    }

    .cmag-side-body {
        padding: 0.875rem;
    }

    .cmag-side-title {
        font-size: 0.85rem !important;
    }

    .cmag-category {
        font-size: 0.65rem;
    }

    .cmag-main-intro {
        font-size: 0.875rem;
    }

    .cmag-side-image {
        width: 100%;
        min-width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        border-radius: var(--cmag-border-radius, 12px) var(--cmag-border-radius, 12px) 0 0;
    }

    .cmag-side-item-inner {
        flex-direction: column;
    }
}

/* ============================================
   HOVER-EFFECT VARIANTS (data-hover-effect)
   ============================================ */
/* Card hover is opt-in: the chosen effect is read from the root container's
   data-hover-effect attribute and applies to BOTH the main (hero) card and the
   side items. Mirrors the team module family. Default "none" keeps the cards
   inert until the editor picks an effect. Selectors are scoped to .cmag-magazine
   so the variants never leak into other modules. */

.cmag-magazine[data-hover-effect="none"] .cmag-main-card,
.cmag-magazine[data-hover-effect="none"] .cmag-side-item {
    transition: none;
}

/* HOVER: lift (the card rises with a deeper shadow) */
.cmag-magazine[data-hover-effect="lift"] .cmag-main-card:hover,
.cmag-magazine[data-hover-effect="lift"] .cmag-side-item:hover {
    transform: translateY(-4px);
    border-color: var(--border-strong);
    box-shadow: 0 2px 4px rgba(26, 36, 33, 0.06),
                0 8px 16px rgba(26, 36, 33, 0.12);
}

/* HOVER: overlay (a tonal wash slides over the card body) */
.cmag-magazine[data-hover-effect="overlay"] .cmag-main-card,
.cmag-magazine[data-hover-effect="overlay"] .cmag-side-item {
    position: relative;
    overflow: hidden;
}

.cmag-magazine[data-hover-effect="overlay"] .cmag-main-card::after,
.cmag-magazine[data-hover-effect="overlay"] .cmag-side-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--primary-tint, rgba(29, 107, 94, 0.10));
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 0;
}

.cmag-magazine[data-hover-effect="overlay"] .cmag-main-card > *,
.cmag-magazine[data-hover-effect="overlay"] .cmag-side-item > * {
    position: relative;
    z-index: 1;
}

.cmag-magazine[data-hover-effect="overlay"] .cmag-main-card:hover::after,
.cmag-magazine[data-hover-effect="overlay"] .cmag-side-item:hover::after {
    opacity: 1;
}

.cmag-magazine[data-hover-effect="overlay"] .cmag-main-card:hover,
.cmag-magazine[data-hover-effect="overlay"] .cmag-side-item:hover {
    border-color: var(--primary-color);
}

/* HOVER: zoom (photo crops in, card stays put) */
.cmag-magazine[data-hover-effect="zoom"] .cmag-main-card:hover .cmag-main-image img,
.cmag-magazine[data-hover-effect="zoom"] .cmag-side-item:hover .cmag-side-image img {
    transform: scale(1.08);
}

.cmag-magazine[data-hover-effect="zoom"] .cmag-main-card:hover,
.cmag-magazine[data-hover-effect="zoom"] .cmag-side-item:hover {
    border-color: var(--border-strong);
}

/* HOVER: glow (a teal halo earned with an inset ring + tight outer glow).
   The ring is painted by an ::after layer stacked ABOVE the card content
   (z-index: 2) so the photo does not cover the halo. The outer glow stays
   compact. The ring sits inset so it never clips. Mirrors the pages-carousel
   module family for cross-module consistency. */
.cmag-magazine[data-hover-effect="glow"] .cmag-main-card,
.cmag-magazine[data-hover-effect="glow"] .cmag-side-item {
    position: relative;
    overflow: hidden;
}

.cmag-magazine[data-hover-effect="glow"] .cmag-main-card::after,
.cmag-magazine[data-hover-effect="glow"] .cmag-side-item::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 2px var(--primary-color);
    background: var(--primary-tint, rgba(29, 107, 94, 0.10));
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 2;
}

.cmag-magazine[data-hover-effect="glow"] .cmag-main-card:hover::after,
.cmag-magazine[data-hover-effect="glow"] .cmag-side-item:hover::after {
    opacity: 1;
}

.cmag-magazine[data-hover-effect="glow"] .cmag-main-card:hover,
.cmag-magazine[data-hover-effect="glow"] .cmag-side-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(29, 107, 94, 0.28);
}

/* HOVER: tilt (photo wakes up in full colour) */
.cmag-magazine[data-hover-effect="tilt"] .cmag-main-image img,
.cmag-magazine[data-hover-effect="tilt"] .cmag-side-image img {
    filter: grayscale(1) contrast(0.95) brightness(1.02);
    transition: filter 0.45s ease, transform 0.45s ease;
}

.cmag-magazine[data-hover-effect="tilt"] .cmag-main-card:hover .cmag-main-image img,
.cmag-magazine[data-hover-effect="tilt"] .cmag-side-item:hover .cmag-side-image img {
    filter: grayscale(0) contrast(1) brightness(1);
    transform: scale(1.06);
}

.cmag-magazine[data-hover-effect="tilt"] .cmag-main-card:hover,
.cmag-magazine[data-hover-effect="tilt"] .cmag-side-item:hover {
    border-color: var(--border-strong);
}

/* Dark mode — the shadow-bearing effects read deeper against dark cards. */
[data-bs-theme="dark"] .cmag-magazine[data-hover-effect="lift"] .cmag-main-card:hover,
[data-bs-theme="dark"] .cmag-magazine[data-hover-effect="lift"] .cmag-side-item:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

[data-bs-theme="dark"] .cmag-magazine[data-hover-effect="glow"] .cmag-main-card:hover,
[data-bs-theme="dark"] .cmag-magazine[data-hover-effect="glow"] .cmag-side-item:hover {
    box-shadow: 0 4px 12px rgba(29, 107, 94, 0.4);
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .cmag-main-card,
    .cmag-side-item,
    .cmag-main-image img,
    .cmag-side-image img {
        transition: none;
    }

    .cmag-main-card:hover,
    .cmag-side-item:hover {
        box-shadow: none;
    }

    .cmag-main-card:hover .cmag-main-image img,
    .cmag-side-item:hover .cmag-side-image img {
        transform: none;
    }
}