/* ==========================================================================
   BLOCK: ppg-instagram
   ========================================================================== */

.ppg-instagram {
    width: 100%;
    background-color: var(--bg, #F5F5F7);
    background-image: linear-gradient(0deg, var(--bg, #F5F5F7), var(--bg, #F5F5F7));
    padding-top: 4rem;
    padding-bottom: 0;          /* brak — opinie następują bezpośrednio po */
}

@media (min-width: 1024px) {
    .ppg-instagram { padding-top: 6rem; }
}

.ppg-instagram__inner {
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    text-align: center;
}

@media (min-width: 1024px) {
    .ppg-instagram__inner {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

/* Nagłówek: mb-16 */
.ppg-instagram__header {
    margin-bottom: 4rem;
}

.ppg-instagram__label {
    display: block;
    font-family: var(--ppg-font-sans);
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--ppg-pink-accent);
    margin-bottom: 1rem;
}

.ppg-instagram__heading {
    font-family: var(--ppg-font-serif);
    font-size: 2.25rem;
    color: var(--ppg-dark);
    font-weight: 400;
    margin: 0;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .ppg-instagram__heading { font-size: 3rem; }
}

@media (min-width: 1024px) {
    .ppg-instagram__heading { font-size: 3.75rem; }
}

.ppg-instagram__heading-accent {
    color: var(--ppg-pink-accent);
    font-style: italic;
}

/* Feed: szersze kafle (więcej widocznej treści), wyśrodkowany */
.ppg-instagram__feed {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-bottom: 0;
}

/* CTA — przejście na profil Instagram (ostre rogi, jak przycisk Booksy) */
.ppg-instagram__cta {
    margin-top: 3rem;
    text-align: center;
}

.ppg-instagram__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: var(--ppg-dark, #3A2E2E);
    color: var(--ppg-cream, #FCF5EB);
    font-family: var(--ppg-font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 0;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Utrzymaj czytelny tekst we wszystkich stanach — po kliknięciu link zostaje
   w :focus/:active/:visited i motyw potrafi wymusić ciemny kolor (czarny tekst
   na ciemnym tle). Wyższa specyficzność blokuje to. */
.ppg-instagram__cta a.ppg-instagram__btn,
.ppg-instagram__cta a.ppg-instagram__btn:link,
.ppg-instagram__cta a.ppg-instagram__btn:visited,
.ppg-instagram__cta a.ppg-instagram__btn:focus,
.ppg-instagram__cta a.ppg-instagram__btn:active {
    color: var(--ppg-cream, #FCF5EB) !important;
}

.ppg-instagram__btn:hover,
.ppg-instagram__cta a.ppg-instagram__btn:hover {
    background: var(--ppg-pink-accent, #e280b0);
    color: #fff !important;
}

.ppg-instagram__btn-arrow {
    transition: transform 0.3s ease;
}

.ppg-instagram__btn:hover .ppg-instagram__btn-arrow {
    transform: translateX(4px);
}

/* ==========================================================================
   Smash Balloon feed — przesunięte, hairline'owe ramki
   Wrapper: .ppg-ig-wrap  |  markup wtyczki: #sb_instagram #sbi_images .sbi_item
   Grid + gap są natywne (v6.11.3); ramka siada w gutterze, nie na sąsiadie.
   ========================================================================== */

/* Chowamy chrome wtyczki: nagłówek, przycisk obserwowania, "load more" */
.ppg-ig-wrap #sb_instagram .sbi_header,
.ppg-ig-wrap #sb_instagram #sbi_header,
.ppg-ig-wrap #sb_instagram .sbi_follow_btn,
.ppg-ig-wrap #sb_instagram #sbi_load,
.ppg-ig-wrap #sb_instagram .sbi_load_btn {
    display: none !important;
}

/* Kolumny zostają z ustawień kanału (sbi_col_*). Wymuszamy tylko stały gutter,
   w którym mieści się przesunięta ramka — niezależnie od ustawienia "odstęp". */
.ppg-ig-wrap #sb_instagram #sbi_images {
    gap: 24px !important;
    padding: 0 !important;
}

@media (min-width: 768px) {
    .ppg-ig-wrap #sb_instagram #sbi_images {
        gap: 30px !important;
    }
}

/* Komórka: pozwalamy ramce wyjść poza kadr w gutter */
.ppg-ig-wrap #sb_instagram #sbi_images .sbi_item {
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    overflow: visible !important;
}

/* Przesunięta ramka pod zdjęciem */
.ppg-ig-wrap #sb_instagram #sbi_images .sbi_item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid var(--ppg-pink-line, #EACBCB);
    border-radius: var(--ppg-radius-soft, 4px);
    transform: translate(10px, 10px);
    transition: transform 0.5s ease, border-color 0.5s ease;
    z-index: 0;
    pointer-events: none;
}

.ppg-ig-wrap #sb_instagram #sbi_images .sbi_item:hover::before {
    transform: translate(14px, 14px);
    border-color: var(--ppg-pink-accent, #e280b0);
}

/* Zdjęcie nad ramką, przycięte tym samym promieniem */
.ppg-ig-wrap #sb_instagram #sbi_images .sbi_photo_wrap {
    position: relative !important;
    z-index: 1 !important;
    border-radius: var(--ppg-radius-soft, 4px) !important;
    overflow: hidden !important;
    background: var(--ppg-cream, #FCF5EB) !important;
}

.ppg-ig-wrap #sb_instagram #sbi_images .sbi_photo {
    display: block !important;
    opacity: 1 !important;
    transition: transform 1s ease !important;
}

.ppg-ig-wrap #sb_instagram #sbi_images .sbi_item:hover .sbi_photo {
    transform: scale(1.05) !important;
}

/* ==========================================================================
   Tryb "Pełne zdjęcie" (letterbox) — nic nie obcięte, kremowe tło w kadrze.
   Kafel zostaje 4:5 (z ustawień kanału), zmienia się tylko dopasowanie obrazu.
   ========================================================================== */
.ppg-ig--contain #sb_instagram #sbi_images .sbi_photo {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-color: var(--ppg-cream, #FCF5EB) !important;
}

.ppg-ig--contain #sb_instagram #sbi_images .sbi_photo img {
    object-fit: contain !important;
}