/* ============================================================
   MICHLOR — Galeria "Zdjęcia z montażu"
   Klasy: .mgal (wrapper) | dark-mode override dla FooGallery
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   Sekcja galerii
   ══════════════════════════════════════════════════════════ */

.mgal {
    padding-top:    clamp(3rem, 5vw, 5rem);
    padding-bottom: clamp(4rem, 7vw, 7rem);
}

/* Wprowadzenie tekstowe */
.mgal__intro {
    max-width:     720px;
    margin:        0 auto clamp(2.5rem, 4vw, 4rem);
    text-align:    center;
}

.mgal__intro-text {
    color:       var(--color-muted);
    font-size:   clamp(0.9rem, 1.5vw, 1rem);
    line-height: 1.7;
    margin:      0;
}

.mgal__intro-link {
    color:           var(--color-accent);
    text-decoration: none;
    font-weight:     500;
    white-space:     nowrap;
    transition:      color var(--transition-fast);
}

.mgal__intro-link:hover {
    color: var(--color-accent-glow);
}

/* Wrapper na treść FooGallery (the_content) */
.mgal__content {
    min-height: 200px;
}

/* ══════════════════════════════════════════════════════════
   Dark Mode Override — FooGallery
   Nadpisujemy domyślne jasne style pluginu
   ══════════════════════════════════════════════════════════ */

/* Kontener galerii */
.mgal__content .foogallery-container,
.mgal__content .fg-gallery-container {
    background: transparent !important;
}

/* Każdy element galerii */
.mgal__content .fg-item,
.mgal__content .foogallery-item {
    border-radius: var(--radius-md) !important;
    overflow:      hidden !important;
    transition:    transform var(--transition-base),
                   box-shadow var(--transition-base) !important;
}

.mgal__content .fg-item:hover,
.mgal__content .foogallery-item:hover {
    transform:  translateY(-4px) !important;
    box-shadow: 0 8px 32px rgba(0, 180, 166, 0.25) !important;
}

/* Overlay nad zdjęciem (caption) */
.mgal__content .fg-item-overlay,
.mgal__content .foogallery-item-overlay {
    background: linear-gradient(
        to top,
        rgba(4, 16, 30, 0.85) 0%,
        transparent           60%
    ) !important;
}

/* Tekst caption */
.mgal__content .fg-item-caption,
.mgal__content .fg-caption,
.mgal__content .foogallery-caption {
    color:       var(--color-text) !important;
    font-family: var(--font-body) !important;
    font-size:   0.85rem !important;
}

/* Paginacja FooGallery */
.mgal__content .fg-pager-container .fg-pager-link,
.mgal__content .foogallery-paging-container a {
    background:    var(--glass-bg) !important;
    border:        1px solid var(--glass-border) !important;
    color:         var(--color-text) !important;
    border-radius: var(--radius-sm) !important;
    transition:    background var(--transition-fast) !important;
}

.mgal__content .fg-pager-container .fg-pager-link:hover,
.mgal__content .fg-pager-container .fg-pager-link.fg-pager-active,
.mgal__content .foogallery-paging-container a:hover {
    background: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color:       #04101E !important;
}

/* Lightbox FooGallery — ciemne tło */
.foobox,
.foobox-overlay {
    background: rgba(4, 16, 30, 0.97) !important;
}

.foobox .foobox-close,
.foobox .foobox-next,
.foobox .foobox-prev {
    color:      var(--color-text) !important;
    background: var(--glass-bg) !important;
    border:     1px solid var(--glass-border) !important;
}

.foobox .foobox-close:hover,
.foobox .foobox-next:hover,
.foobox .foobox-prev:hover {
    background:  var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color:       #04101E !important;
}

/* ══════════════════════════════════════════════════════════
   CTA Box pod galerią
   ══════════════════════════════════════════════════════════ */

.mgal__cta-box {
    margin-top:    clamp(3rem, 5vw, 5rem);
    padding:       clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem);
    background:    var(--glass-bg);
    border:        1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    text-align:    center;
    backdrop-filter: blur(12px);
}

.mgal__cta-title {
    font-family: var(--font-heading);
    font-size:   clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 700;
    color:       var(--color-text);
    margin:      0 0 0.5rem;
    letter-spacing: -0.02em;
}

.mgal__cta-sub {
    color:       var(--color-muted);
    font-size:   clamp(0.875rem, 1.5vw, 1rem);
    margin:      0 0 1.75rem;
}

.mgal__cta-btns {
    display:         flex;
    gap:             1rem;
    justify-content: center;
    flex-wrap:       wrap;
}

/* ══════════════════════════════════════════════════════════
   Sidebar Blog — widget "Zdjęcia z montażu"
   ══════════════════════════════════════════════════════════ */

.mgal-widget {
    background:    var(--glass-bg);
    border:        1px solid var(--glass-border);
    border-radius: var(--radius-md);
    overflow:      hidden;
    text-decoration: none;
    display:       block;
    transition:    border-color var(--transition-fast),
                   box-shadow   var(--transition-fast);
}

.mgal-widget:hover {
    border-color: var(--color-accent);
    box-shadow:   0 4px 24px rgba(0, 180, 166, 0.15);
}

.mgal-widget__inner {
    padding: 1.25rem 1.5rem 1.5rem;
}

.mgal-widget__overline {
    display:      flex;
    align-items:  center;
    gap:          0.375rem;
    font-size:    0.7rem;
    font-weight:  600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:        var(--color-accent);
    margin-bottom: 0.5rem;
}

.mgal-widget__title {
    font-family:  var(--font-heading);
    font-size:    1rem;
    font-weight:  700;
    color:        var(--color-text);
    margin:       0 0 0.5rem;
    letter-spacing: -0.01em;
}

.mgal-widget__sub {
    font-size:   0.83rem;
    color:       var(--color-muted);
    line-height: 1.5;
    margin:      0 0 1rem;
}

.mgal-widget__link {
    display:     inline-flex;
    align-items: center;
    gap:         0.375rem;
    font-size:   0.83rem;
    font-weight: 600;
    color:       var(--color-accent);
    transition:  gap var(--transition-fast);
}

.mgal-widget:hover .mgal-widget__link {
    gap: 0.625rem;
}

/* ══════════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
    .mgal__cta-btns {
        flex-direction: column;
        align-items:    stretch;
    }

    .mgal__cta-btns .mpage-btn {
        justify-content: center;
    }
}