/* ========================================
   PLIK: assets/css/mce-community.css
   Sekcja Społeczności (Unikalne Klasy)
======================================== */

.mce-comm-section-lunaria-product-layout-section {
    width: 100%;
    background-color: #ffffff;
    padding: 80px 20px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    background-image: radial-gradient(#f0f0f5 1px, transparent 1px);
    background-size: 30px 30px;
}

.mce-comm-container-lunaria-product-layout-section {
    max-width: 1100px;
    margin: 0 auto;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(94, 42, 132, 0.08);
    display: flex;
    overflow: hidden;
    border: 1px solid rgba(142, 68, 173, 0.1);
}

/* --- LEWA STRONA (LUNARIA) --- */
.mce-comm-sidebar-lunaria-product-layout-section {
    flex: 0 0 35%;
    background: var(--lunaria-bg-off-white);
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-right: 1px solid rgba(142, 68, 173, 0.1);
    position: relative;
    z-index: 2;
}

.mce-comm-avatar-lunaria-product-layout-section {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
    border: 4px solid #fff;
    box-shadow: 0 8px 20px rgba(94, 42, 132, 0.15);
}

.mce-comm-name-lunaria-product-layout-section {
    font-size: 22px;
    color: var(--lunaria-primary);
    margin: 0 0 5px 0;
    font-weight: 800;
    font-family: serif;
}

.mce-comm-role-lunaria-product-layout-section {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--lunaria-highlight);
    font-weight: 700;
    margin-bottom: 20px;
}

.mce-comm-quote-lunaria-product-layout-section {
    font-size: 14px;
    font-style: italic;
    color: var(--lunaria-text-secondary);
    line-height: 1.6;
    position: relative;
}

.mce-comm-quote-lunaria-product-layout-section::before {
    content: '“';
    font-size: 60px;
    color: rgba(142, 68, 173, 0.1);
    position: absolute;
    top: -20px; left: -10px;
}

/* --- PRAWA STRONA --- */
.mce-comm-content-lunaria-product-layout-section {
    flex: 1;
    padding: 50px;
}

.mce-comm-headline-lunaria-product-layout-section {
    font-size: 28px;
    color: var(--lunaria-text-main);
    font-weight: 800;
    margin: 0 0 15px 0;
    line-height: 1.2;
}

.mce-comm-headline-lunaria-product-layout-section span {
    color: var(--lunaria-primary);
    background: linear-gradient(120deg, rgba(142, 68, 173, 0.1) 0%, rgba(142, 68, 173, 0) 100%);
}

.mce-comm-subhead-lunaria-product-layout-section {
    font-size: 16px;
    color: var(--lunaria-text-secondary);
    margin-bottom: 40px;
    line-height: 1.6;
}

/* --- GRID KART --- */
.mce-comm-cards-lunaria-product-layout-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Podstawowa Karta (Jasna) */
.mce-path-card-lunaria-product-layout-section {
    background: #fff;
    border: 1px solid var(--lunaria-border-light);
    border-radius: 16px;
    padding: 25px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

.mce-path-card-lunaria-product-layout-section:hover {
    border-color: var(--lunaria-secondary);
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(94, 42, 132, 0.1);
}

.mce-card-icon-lunaria-product-layout-section { font-size: 32px; margin-bottom: 15px; display: block; }

.mce-card-title-lunaria-product-layout-section {
    font-size: 16px;
    font-weight: 800;
    color: var(--lunaria-primary-dark);
    margin-bottom: 10px;
    display: block;
}

.mce-card-desc-lunaria-product-layout-section {
    font-size: 13px;
    color: var(--lunaria-text-muted);
    line-height: 1.5;
    margin-bottom: 20px;
    flex-grow: 1;
    display: block;
}

.mce-card-link-lunaria-product-layout-section {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--lunaria-primary);
    display: flex; align-items: center; gap: 5px;
}

.mce-path-card-lunaria-product-layout-section:hover .mce-card-link-lunaria-product-layout-section { color: var(--lunaria-highlight); }

/* --- KARTA SPECJALNA: RYTUAŁY (Dark Magic Animation) --- */
.mce-ritual-card-lunaria-product-layout-section {
    grid-column: 1 / -1; /* Rozciągnij na całą szerokość */
    
    /* Magiczny, płynący gradient */
    background: linear-gradient(-45deg, #1a0b2e, #4b2c68, #2c0e45, #000000);
    background-size: 400% 400%;
    animation: magicFlow 10s ease infinite;
    
    border: 1px solid rgba(142, 68, 173, 0.4);
    color: #fff; /* Biały tekst */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

@keyframes magicFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.mce-ritual-card-lunaria-product-layout-section:hover {
    box-shadow: 0 15px 40px rgba(94, 42, 132, 0.4); /* Fioletowa poświata */
    transform: translateY(-3px);
    border-color: var(--lunaria-highlight);
}

/* Zmiana kolorów wewnątrz ciemnej karty */
.mce-ritual-card-lunaria-product-layout-section .mce-card-title-lunaria-product-layout-section { color: #fff; font-size: 18px; }
.mce-ritual-card-lunaria-product-layout-section .mce-card-desc-lunaria-product-layout-section { color: rgba(255,255,255,0.8); }
.mce-ritual-card-lunaria-product-layout-section .mce-card-link-lunaria-product-layout-section { color: var(--lunaria-highlight); }
.mce-ritual-card-lunaria-product-layout-section:hover .mce-card-link-lunaria-product-layout-section { color: #fff; }

/* Subtelny błysk gwiazd na karcie rytuałów */
.mce-ritual-card-lunaria-product-layout-section::before {
    content: '✨';
    position: absolute;
    top: 15px; right: 15px;
    font-size: 20px;
    opacity: 0.5;
    animation: twinkle 3s infinite;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* Responsywność */
@media (max-width: 900px) {
    .mce-comm-container-lunaria-product-layout-section { flex-direction: column; }
    .mce-comm-sidebar-lunaria-product-layout-section { padding: 30px; border-right: none; border-bottom: 1px solid rgba(142, 68, 173, 0.1); }
    .mce-comm-content-lunaria-product-layout-section { padding: 30px 20px; }
    .mce-comm-cards-lunaria-product-layout-section { grid-template-columns: 1fr; }
}