/* ===================================================================== * Karuzela Stenos — style front-end. Obszary (główny i miniatury) * mają stałe wymiary wyznaczane na

; obrazek wypełnia figurę. * Wartości pochodzą ze zmiennych CSS (ustawienia globalne), a pojedyncze * zdjęcia nadpisują object-fit/position przez JS (osobno gł./miniatura). * ===================================================================== */ /* --- Typografia --- */ h1, h2, h3, h4, h5, h6, .wp-block-heading { font-family: 'Playfair Display', Georgia, serif !important; } body, p, li, .wp-block-paragraph, span { font-family: 'Lato', Arial, sans-serif !important; } /* --- Miniatury: równy rząd; OBSZAR wyznacza figura --- */ .stenos-thumb-gallery .wp-block-gallery { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 4px !important; margin-top: 4px !important; } .stenos-thumb-gallery .wp-block-gallery figure.wp-block-image { flex: 1 1 0 !important; min-width: 0 !important; width: 0 !important; margin: 0 !important; height: var(--stenos-thumb-h, 90px) !important; aspect-ratio: var(--stenos-thumb-ratio, auto); background: var(--stenos-thumb-bg, #f5f5f5); overflow: hidden; } .stenos-thumb-gallery .wp-block-gallery figure.wp-block-image img { width: 100% !important; height: 100% !important; object-fit: var(--stenos-thumb-fit, contain) !important; object-position: center; background: var(--stenos-thumb-bg, #f5f5f5); display: block !important; cursor: pointer; transition: outline 0.15s ease; } .stenos-thumb-gallery .wp-block-image.stenos-thumb-active img { outline: 2px solid #333333; outline-offset: 0px; } /* --- Panele tekstowe --- */ .stenos-panel { display: none !important; } .stenos-panel-active { display: block !important; } /* --- Strzałki --- */ .stenos-carousel-controls { display: flex; justify-content: space-between; margin-bottom: 4px; } .stenos-carousel-controls button { background: transparent; border: 1px solid #eeeeee; color: #777777; cursor: pointer; padding: 2px 12px; font-size: 24px; font-weight: 300; line-height: 1; transition: all 0.2s ease; } .stenos-carousel-controls button:hover { background: #f9f9f9; color: #333333; border-color: #cccccc; } /* ===================================================================== * Obszar głównego zdjęcia — stały rozmiar; obrazek wypełnia figurę. * Szerokość = kolumna (opcjonalnie ograniczona max-width), * wysokość = szerokość ÷ proporcje. * ===================================================================== */ .stenos-main-image { aspect-ratio: var(--stenos-main-ratio, 4 / 3); width: 100%; max-width: var(--stenos-main-maxw, none); margin: 0 auto; display: block; background: var(--stenos-main-bg, #f5f5f5); overflow: hidden; } .stenos-main-image img { width: 100% !important; height: 100% !important; object-fit: var(--stenos-main-fit, contain); object-position: center; display: block; } /* ===================================================================== * Zachowanie miniatur poniżej desktopu (klasa z wtyczki) * ===================================================================== */ @media (max-width: 781px) { body.stenos-thumbs--row .stenos-thumb-gallery .wp-block-gallery.has-nested-images { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 4px !important; } body.stenos-thumbs--row .stenos-thumb-gallery .wp-block-gallery.has-nested-images > figure.wp-block-image { flex: 1 1 0 !important; width: 0 !important; min-width: 0 !important; margin: 0 !important; } body.stenos-thumbs--hide .stenos-thumb-gallery { display: none !important; } }