/* ═══════════════════════════════════════════════════════════════ SACKY DESIGN — mobile.css (v15) Wczytać JAKO OSTATNI , w , po style.css. ⚠️ Sekcja "GALERIA — DROPDOWN KATEGORII" wymaga też: 1) zmiany w HTML (gallery-filters-html-snippet.html) 2) pliku js/gallery-filter-toggle.js (v3, position:fixed + przyciemnienie tła) dołączonego PO js/gallery.js ═══════════════════════════════════════════════════════════════ */ html, body { max-width: 100%; overflow-x: hidden; } *, *::before, *::after { -webkit-tap-highlight-color: transparent; } @media (hover: none) { .review-card:hover, .feature-card:hover, .project-placeholder:hover, .projects-track img:hover, .skill-tag:hover, .gallery-item:hover, .gallery-item:hover img, .btn:hover, .btn-ghost:hover, .slider-btn:hover, .filter-btn:hover, .logo-pill:hover img { transform: none !important; } } /* ═══════════════════════════════════════════════════════════════ GALERIA — DROPDOWN KATEGORII Na desktopie (>768px) toggle jest ukryty, a rząd przycisków .gallery-filters wygląda tak jak zawsze (bez zmian). Na mobile toggle jest widoczny, a .gallery-filters staje się rozwijanym panelem — listą kategorii jedna pod drugą. ═══════════════════════════════════════════════════════════════ */ .gallery-filter-toggle { display: none; } @media (max-width: 768px) { .gallery-filters-wrap { position: relative !important; width: 100% !important; } /* Przycisk otwierający ("Wybierz kategorię") */ .gallery-filter-toggle { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; width: 100% !important; padding: 14px 18px !important; border-radius: var(--r) !important; border: 1px solid var(--border-soft) !important; background: var(--card) !important; color: var(--text) !important; font-family: inherit !important; font-size: 14.5px !important; font-weight: 600 !important; cursor: pointer !important; transition: border-color 0.2s var(--ease), background 0.2s var(--ease) !important; } .gallery-filter-toggle i:first-child { color: var(--accent) !important; font-size: 15px !important; flex-shrink: 0 !important; } .gallery-filter-toggle span { flex: 1 !important; text-align: left !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .gallery-filter-toggle-arrow { font-size: 12px !important; color: var(--text-muted) !important; flex-shrink: 0 !important; transition: transform 0.25s var(--ease) !important; } .gallery-filter-toggle.open { border-color: var(--accent) !important; background: var(--accent-subtle) !important; } .gallery-filter-toggle.open .gallery-filter-toggle-arrow { transform: rotate(180deg) !important; } .gallery-filter-toggle:active { transform: scale(0.99) !important; } /* Rozwijany panel kategorii — "fixed" względem EKRANU, nie treści strony (nigdy nie zostanie ucięty przez stopkę), z solidnym szklanym tłem (nie przezroczystym var(--surface), które przepuszczało fioletowe poświaty tła strony i wyglądało "załatane"). Pozycję (--dd-top / --dd-left / --dd-width) liczy JS przy każdym otwarciu i wstrzykuje jako zmienne CSS. */ .gallery-filters { position: fixed !important; top: 0 !important; left: 0 !important; right: auto !important; width: 100% !important; z-index: 9999 !important; display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; gap: 2px !important; padding: 10px !important; margin: 0 !important; background: #0f0d19 !important; backdrop-filter: blur(20px) saturate(160%) !important; -webkit-backdrop-filter: blur(20px) saturate(160%) !important; border: 1px solid rgba(169, 85, 247, 0.35) !important; border-radius: var(--r) !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(168, 85, 247, 0.06) !important; -webkit-mask-image: none !important; mask-image: none !important; overflow-y: auto !important; max-height: 0 !important; opacity: 0 !important; pointer-events: none !important; transform: translateY(-6px) scale(0.98) !important; transition: max-height 0.3s var(--ease), opacity 0.25s var(--ease), transform 0.25s var(--ease) !important; } .gallery-filters::before, .gallery-filters::after { content: none !important; display: none !important; } [data-theme="light"] .gallery-filters { background: rgba(255, 255, 255, 0.92) !important; border-color: rgba(169, 85, 247, 0.3) !important; box-shadow: 0 20px 60px rgba(100, 80, 160, 0.25), 0 0 0 1px rgba(168, 85, 247, 0.08) !important; } .gallery-filters.open { top: var(--dd-top, 80px) !important; left: var(--dd-left, 4%) !important; width: var(--dd-width, 92%) !important; max-height: min(60vh, 400px) !important; opacity: 1 !important; pointer-events: auto !important; transform: translateY(0) scale(1) !important; } /* Każda kategoria — czysta pozycja menu, z delikatnym rozdzielnikiem między pozycjami */ .filter-btn { width: 100% !important; max-width: 100% !important; flex: none !important; justify-content: flex-start !important; align-items: center !important; text-align: left !important; padding: 13px 12px !important; font-size: 14px !important; border-radius: var(--r-sm) !important; border: none !important; background: transparent !important; box-shadow: none !important; gap: 12px !important; white-space: normal !important; transition: background 0.15s ease, color 0.15s ease !important; } .filter-btn::before, .filter-btn::after { content: none !important; display: none !important; } .filter-btn:not(:last-child) { border-bottom: 1px solid rgba(169, 85, 247, 0.08) !important; } .filter-btn i { width: 20px !important; flex-shrink: 0 !important; text-align: center !important; color: var(--text-muted) !important; font-size: 13px !important; } .filter-btn span:not(.count) { flex: 1 !important; color: var(--text) !important; font-weight: 500 !important; } .filter-btn .count { flex-shrink: 0 !important; font-size: 11px !important; background: rgba(255, 255, 255, 0.06) !important; } .filter-btn:active { background: rgba(168, 85, 247, 0.1) !important; } .filter-btn.active { background: var(--accent-subtle) !important; } .filter-btn.active i, .filter-btn.active span:not(.count) { color: var(--accent) !important; } .filter-btn.active .count { background: rgba(168, 85, 247, 0.22) !important; color: var(--accent) !important; } } /* ═══════════════════════════════════════════════════════════════ PRZYCIEMNIENIE TŁA PRZY OTWARTYM PANELU KATEGORII ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { body.gallery-filter-backdrop-open::after { content: ""; position: fixed; inset: 0; background: rgba(5, 3, 10, 0.55); z-index: 9998; animation: galleryFilterFadeIn 0.2s ease; } @keyframes galleryFilterFadeIn { from { opacity: 0; } to { opacity: 1; } } } /* ═══════════════════════════════════════════════════════════════ PODGLĄD PROJEKTU (LIGHTBOX) — wersja mobilna Zastępuje starszą, grid-ową wersję .project-modal-panel/img-wrap (usuniętą z bloku ≤768px niżej). Strzałki prev/next są PRZYKLEJONE NA STAŁE do dołu ekranu (position:fixed), niezależnie od rozmiaru/ proporcji zdjęcia — nigdy nie "skaczą" względem obrazka. ═══════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { .project-modal { padding: 0; } .project-modal-backdrop { /* mocny blur na telefonie potrafi przycinać animację otwarcia — lekko go zmniejszamy, tło i tak jest praktycznie czarne */ backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%); } .project-modal-panel { gap: 0; height: 100%; justify-content: flex-start; } /* Scena ze zdjęciem — miejsce u góry na przycisk zamknięcia, u dołu na strzałki (position:fixed, patrz .project-modal-nav) */ .project-modal-stage { flex: 1; width: 100%; padding: calc(64px + env(safe-area-inset-top)) 16px 0; box-sizing: border-box; } .project-modal-img-wrap img { max-width: 100%; max-height: calc(100vh - 64px - env(safe-area-inset-top) - 96px - env(safe-area-inset-bottom)); border-radius: 14px; } /* Przycisk zamknięcia — pod notch / status bar */ .project-modal-close { top: calc(14px + env(safe-area-inset-top)); right: 14px; width: 40px; height: 40px; font-size: 14px; } .project-modal-nav { display: flex !important; position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); justify-content: center; align-items: center; gap: 20px; padding: 0; z-index: 20; pointer-events: auto; } .project-modal-nav-btn { width: 44px; height: 44px; background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); box-shadow: var(--shadow-md); } .project-modal-nav-btn:disabled { opacity: 0.3; pointer-events: none; } [data-theme="light"] .project-modal-nav-btn { background: rgba(255, 255, 255, 0.65); border-color: rgba(0, 0, 0, 0.08); color: var(--text); } /* Karta informacji (narzędzia / czas / rok) — na telefonie wyłączona całkowicie: jako bottom sheet zasłaniała dolną część zdjęcia. Podgląd na mobile pokazuje tylko grafikę i strzałki nawigacji pod nią. */ .project-modal-info { display: none !important; } } /* ── Bardzo małe ekrany (np. iPhone SE) ───────────────────── */ @media (max-width: 360px) { .project-modal-stage { padding-top: calc(58px + env(safe-area-inset-top)); } .project-modal-img-wrap img { max-height: calc(100vh - 58px - env(safe-area-inset-top) - 88px - env(safe-area-inset-bottom)); } } /* ═══════════════════════════════════════════════════════════════ WSPÓLNY STYL "3 KOLUMNY W RZĘDZIE" — hero-stats i clients-stats-bar ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .hero-stats, .clients-stats-bar { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: flex-start !important; width: 100% !important; padding: 16px 10px !important; gap: 6px !important; } .hero-stats .stat-pill, .clients-stats-bar .stat-pill { flex: 1 1 0 !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; align-items: baseline !important; gap: 2px !important; text-align: center !important; min-width: 0 !important; } .hero-stats .stat-label, .clients-stats-bar .stat-label { width: 100% !important; text-align: center !important; margin-top: 2px !important; } .hero-stats .stat-num { font-size: 22px !important; } .hero-stats .stat-suffix { font-size: 14px !important; } .hero-stats .stat-label { font-size: 9px !important; } .clients-stats-bar .stat-num { font-size: 22px !important; } .clients-stats-bar .stat-suffix { font-size: 14px !important; } .clients-stats-bar .stat-label { font-size: 9px !important; } .stat-divider, .hero-stats .stat-divider, .clients-stats-bar .stat-divider { display: none !important; } } /* ═══════════════════════════════════════════════════════════════ TABLET / DUŻY TELEFON (≤ 900px) ═══════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { .container { width: 92% !important; } .nav-content { height: 64px !important; gap: 10px !important; } .logo-text { font-size: 19px !important; } .nav-logo img { height: 20px !important; } .nav-actions { gap: 10px !important; } .hero-inner { gap: 2.2rem !important; padding: 40px 0 56px !important; } .hero-easel-wrap { min-height: 220px !important; order: -1 !important; } .theme-switch { transform: translateY(0) !important; width: clamp(260px, 58vw, 420px) !important; height: clamp(160px, 36vw, 260px) !important; } .click-hint { display: none !important; } .about-image { max-width: 340px !important; margin: 0 auto 28px !important; } .gallery-section { padding-top: calc(64px + 32px) !important; } .scroll-top { right: 18px !important; left: auto !important; } .review-card:hover { transform: none !important; box-shadow: none !important; border-color: rgba(169, 85, 247, 0.425) !important; } .review-card:hover::after { opacity: 0.5 !important; } } /* ═══════════════════════════════════════════════════════════════ TELEFON (≤ 768px) — GŁÓWNE REGUŁY ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { section { padding: 52px 0 !important; } h1 { letter-spacing: -1px !important; } h2 { font-size: clamp(26px, 7vw, 34px) !important; letter-spacing: -0.5px !important; } .section-header { margin-bottom: 40px !important; } .section-sub { font-size: 14.5px !important; } /* ── NAVBAR ──────────────────────────────────────────────── */ .nav-content { height: 58px !important; gap: 10px !important; } .nav-logo img { height: 18px !important; } .nav-actions { gap: 8px !important; } .btn-ghost, .btn { padding: 10px 16px !important; font-size: 13.5px !important; } .nav-actions > a.btn.btn-sm { padding: 10px 12px !important; gap: 0 !important; font-size: 0 !important; } .nav-actions > a.btn.btn-sm i { font-size: 14px !important; } .nav-actions > a.btn.btn-sm::before { content: "Kontakt"; font-size: 13px; margin-right: 4px; } .gallery-section { padding-top: calc(58px + 28px) !important; } /* ── HERO ────────────────────────────────────────────────── */ .hero { min-height: auto !important; padding-top: 58px !important; } .hero-inner { flex-direction: column !important; text-align: center !important; gap: 28px !important; padding: 40px 0 48px !important; } .hero-text { width: 100% !important; flex: none !important; } .hero-title { max-width: 100% !important; font-size: clamp(36px, 9.5vw, 52px) !important; margin-bottom: 20px !important; } .hero-sub { font-size: 16px !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: 32px !important; } .hero-eyebrow { display: flex !important; justify-content: center !important; } .hero-cta { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; margin-bottom: 40px !important; } .hero-cta .btn, .hero-cta .btn-ghost { width: 100% !important; justify-content: center !important; } .hero-easel-wrap, .click-hint { display: none !important; } .scroll-indicator { display: none !important; } /* ── ABOUT ───────────────────────────────────────────────── */ .about-inner { gap: 8px !important; } .about-image { max-width: 320px !important; margin: 0 auto 32px !important; } .about-content { text-align: left !important; } .about-content h2 { margin-bottom: 18px !important; } .about-content p { font-size: 15px !important; line-height: 1.75 !important; } .about-skills { justify-content: flex-start !important; text-align: left !important; } .psw { max-width: 100% !important; } .psw-bar { padding: 0 14px !important; height: 40px !important; } .psw-canvas { height: 190px !important; } .psw-text { font-size: 24px !important; padding: 6px 12px !important; max-width: 88% !important; } .psw-fname { font-size: 11px !important; } .psw-toolbar { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 12px 14px !important; padding: 16px 14px !important; } .psw-field { flex: 1 1 100% !important; display: flex !important; justify-content: center !important; margin-bottom: 2px !important; } .psw-select { width: 100% !important; max-width: 180px !important; font-size: 12.5px !important; padding: 7px 10px !important; } .psw-sep { display: none !important; } .psw-group { gap: 7px !important; } .psw-btn { width: 34px !important; height: 34px !important; font-size: 14px !important; } .psw-size-wrap { height: 34px !important; } .psw-sz-btn { width: 30px !important; height: 34px !important; font-size: 17px !important; } .psw-sw { width: 26px !important; height: 26px !important; } .psw-sw--picker { width: 26px !important; height: 26px !important; } /* ── FEATURES ────────────────────────────────────────────── */ .features-grid { grid-template-columns: 1fr !important; gap: 14px !important; } .feature-card { padding: 22px 20px !important; } /* ── CLIENTS ─────────────────────────────────────────────── */ .clients-marquee-wrap { margin-bottom: 32px !important; } .logo-pill { min-width: 90px !important; height: 44px !important; padding: 0 14px !important; } /* ── REVIEWS — natywny scroll + snap ─────────────────────── */ .reviews-section .container { display: grid !important; grid-template-columns: 1fr 1fr !important; grid-template-areas: "rv-header rv-header" "rv-card rv-card" "rv-dots rv-dots" "rv-prev rv-next" "rv-submit rv-submit" !important; gap: 18px !important; align-items: center !important; } .reviews-section .section-header { grid-area: rv-header !important; } .reviews-slider { display: contents !important; } .reviews-viewport { grid-area: rv-card !important; width: 94% !important; margin: 0 auto !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; clip-path: none !important; } .reviews-viewport::-webkit-scrollbar { display: none !important; } .reviews-dots { grid-area: rv-dots !important; margin-top: 0 !important; } .slider-btn.prev-review { grid-area: rv-prev !important; justify-self: end !important; } .slider-btn.next-review { grid-area: rv-next !important; justify-self: start !important; } .review-submit-wrap { grid-area: rv-submit !important; margin-top: 0 !important; } .reviews-track { align-items: flex-start !important; transform: none !important; } .review-card { width: 100cqw !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 22px 20px 20px !important; box-sizing: border-box !important; height: auto !important; min-height: 200px !important; scroll-snap-align: center !important; scroll-snap-stop: always !important; } .review-card:hover { transform: none !important; box-shadow: none !important; border-color: rgba(169, 85, 247, 0.425) !important; } .review-card:hover::after { opacity: 0.5 !important; } .review-card::before { font-size: 40px !important; top: 14px !important; right: 14px !important; } .review-header { padding-right: 40px !important; } .review-card p { margin-bottom: 0 !important; } .slider-btn { width: 44px !important; height: 44px !important; font-size: 14px !important; flex-shrink: 0 !important; } /* ── PROJECTS — natywny scroll + snap ────────────────────── */ .projects-viewport { overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; } .projects-viewport::-webkit-scrollbar { display: none !important; } .projects-track { gap: 12px !important; transform: none !important; width: max-content !important; } .project-placeholder, .projects-track img { width: calc(100vw - 56px) !important; min-width: 0 !important; max-width: calc(100vw - 56px) !important; height: 220px !important; scroll-snap-align: center !important; flex-shrink: 0 !important; object-fit: cover !important; overflow: hidden !important; } .projects-dots { margin-top: 24px !important; } /* ── FORMULARZ OPINII (modal) ────────────────────────────── */ .review-form-box { padding: 24px 18px 20px !important; width: 94vw !important; } .pr-field input, .pr-field textarea { font-size: 16px !important; } /* ── CONTACT ─────────────────────────────────────────────── */ .contact-inner { gap: 28px !important; } .contact-form { padding: 20px !important; gap: 14px !important; } .contact-form input, .contact-form textarea, .contact-form select { font-size: 16px !important; } .contact-left p { font-size: 15px !important; } .contact-faq { margin-top: 32px !important; } /* ── FOOTER ─────────────────────────────────────────────────── */ .footer-main { display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; grid-template-columns: unset !important; gap: 36px !important; padding: 44px 0 28px !important; } .footer-brand { grid-column: unset !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; border-bottom: none !important; padding-bottom: 0 !important; margin-bottom: 0 !important; width: 100% !important; } .footer-logo { margin-bottom: 14px !important; } .footer-tagline { max-width: 100% !important; margin: 0 0 20px !important; text-align: left !important; } .footer-social { justify-content: flex-start !important; } .footer-col { align-items: flex-start !important; text-align: left !important; width: 100% !important; padding-top: 0 !important; border-top: none !important; } .footer-col-title { text-align: left !important; margin-bottom: 16px !important; } .footer-col ul { display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; gap: 14px !important; } .footer-col a { font-size: 15px !important; } .newsletter-input { font-size: 16px !important; } .footer-bottom { padding: 18px 0 !important; padding-right: 60px !important; text-align: left !important; } .footer-bottom p { font-size: 12px !important; } /* Wymuszony niski, jednoznaczny z-index na stopce, żeby panel kategorii (z-index:9999, position:fixed) zawsze renderował się NAD nią, bez żadnej wątpliwości co do stackowania. */ .footer { z-index: 0 !important; } .footer::before, .footer::after { z-index: 0 !important; } .footer-main, .footer-bottom { z-index: 0 !important; } /* ── SCROLL TO TOP — zawsze w prawym dolnym rogu ─────────── */ .scroll-top { width: 44px !important; height: 44px !important; bottom: 18px !important; right: 18px !important; left: auto !important; } .scroll-top svg { width: 18px !important; height: 18px !important; } /* ── GALERIA — nagłówek i kontrolki (dropdown kategorii wyżej) ── */ .gallery-header { flex-direction: column !important; align-items: stretch !important; gap: 16px !important; margin-bottom: 24px !important; } .gallery-header-left h2 { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; } .gallery-header-left p { max-width: 100% !important; font-size: 14.5px !important; } .gallery-controls { position: static !important; flex-direction: column !important; align-items: stretch !important; gap: 10px !important; margin-bottom: 24px !important; width: 100% !important; z-index: 1 !important; } .gallery-controls .btn2 { position: static !important; width: 100% !important; justify-content: center !important; } .gallery-grid { columns: 1 !important; column-gap: 0 !important; } .gallery-item { margin-bottom: 10px !important; } .lightbox-panel { grid-template-columns: 1fr !important; grid-template-rows: auto 1fr !important; width: 95vw !important; max-height: 90vh !important; } .lightbox-img-wrap { max-height: 40vh !important; } .lightbox-info { border-left: none !important; border-top: 1px solid var(--border-soft) !important; padding: 22px 18px !important; } .lightbox-close { top: 10px !important; right: 10px !important; width: 32px !important; height: 32px !important; } } /* ═══════════════════════════════════════════════════════════════ MAŁY TELEFON (≤ 480px) ═══════════════════════════════════════════════════════════════ */ @media (max-width: 480px) { .container { width: 92% !important; } section { padding: 40px 0 !important; } .gallery-section { padding-top: calc(58px + 24px) !important; } .hero-title { font-size: clamp(30px, 10vw, 40px) !important; } .hero-stats { padding: 12px 8px !important; gap: 4px !important; } .hero-stats .stat-num, .clients-stats-bar .stat-num { font-size: 18px !important; } .hero-stats .stat-suffix, .clients-stats-bar .stat-suffix { font-size: 12px !important; } .hero-stats .stat-label, .clients-stats-bar .stat-label { font-size: 8px !important; letter-spacing: 0.02em !important; } .about-image { max-width: 260px !important; } .psw-canvas { height: 160px !important; } .psw-text { font-size: 19px !important; } .skill-tag { font-size: 12px !important; padding: 7px 12px !important; } .review-card { padding: 18px 16px 16px !important; } .review-avatar { width: 38px !important; height: 38px !important; font-size: 14px !important; } .review-meta strong { max-width: 130px !important; } .project-placeholder, .projects-track img { width: calc(100vw - 48px) !important; max-width: calc(100vw - 48px) !important; height: 190px !important; } .footer-main { padding: 36px 0 22px !important; gap: 30px !important; } .footer-logo img { height: 26px !important; } .footer-col ul { gap: 12px !important; } .footer-col a { font-size: 14px !important; } .gallery-header-left h2 { font-size: 1.6rem !important; } .gallery-filter-toggle { font-size: 13.5px !important; padding: 12px 16px !important; } .project-modal-title { font-size: 1.15rem !important; } .scroll-top { bottom: 14px !important; right: 14px !important; } } /* ═══════════════════════════════════════════════════════════════ BARDZO MAŁY TELEFON (≤ 380px) ═══════════════════════════════════════════════════════════════ */ @media (max-width: 380px) { .hero-cta { gap: 10px !important; } .review-card::before { display: none !important; } .nav-actions > a.btn.btn-sm::before { content: "" !important; } .nav-actions > a.btn.btn-sm i { margin: 0 auto !important; } } /* ═══════════════════════════════════════════════════════════════ "WYKONANE PROJEKTY" (bento) — mobile: tylko JEDNA ramka Na telefonie sześć kafelków bento by się tłoczyło, więc zamiast siatki zostawiamy jeden kafelek (slot "wide") na pełną szerokość. Nie musi być kwadratowy — ma naturalne proporcje pejzażowe, tak jak wyglądałby na desktopie w miejscu "wide". Reszta slotów jest po prostu ukryta — JS nadal je renderuje i cyklicznie podmienia w nich zdjęcia w tle, ale nic z tego nie jest widoczne, więc nie trzeba nic zmieniać w projects.js. ═══════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { .projects-showcase { grid-template-columns: 1fr !important; grid-template-rows: none !important; grid-auto-rows: auto !important; gap: 0 !important; } .project-tile[data-slot="wide"] { grid-column: auto !important; grid-row: auto !important; aspect-ratio: 4 / 3 !important; } .project-tile[data-slot="square1"], .project-tile[data-slot="tall"], .project-tile[data-slot="square2"], .project-tile[data-slot="square3"], .project-tile[data-slot="square4"] { display: none !important; } } /* ═══════════════════════════════════════════════════════════════ BEZPIECZNY OBSZAR (notch / gesture bar) na iPhone ═══════════════════════════════════════════════════════════════ */ @supports (padding: max(0px)) { @media (max-width: 900px) { .footer-bottom { padding-bottom: max(18px, env(safe-area-inset-bottom)) !important; } .scroll-top { bottom: max(18px, env(safe-area-inset-bottom)) !important; } } } /* ═══════════════════════════════════════════════════════════════ LANDSCAPE — niskie ekrany telefonów w poziomie ═══════════════════════════════════════════════════════════════ */ @media (max-width: 900px) and (max-height: 480px) and (orientation: landscape) { .hero { min-height: auto !important; padding-top: 70px !important; } .hero-inner { padding: 24px 0 32px !important; } section { padding: 36px 0 !important; } .gallery-section { padding-top: calc(58px + 20px) !important; } }