{"id":141,"date":"2026-09-17T12:21:23","date_gmt":"2026-09-17T10:21:23","guid":{"rendered":"https:\/\/bosko-media.pl\/?page_id=141"},"modified":"2026-09-18T17:09:19","modified_gmt":"2026-09-18T15:09:19","slug":"141-2","status":"publish","type":"page","link":"https:\/\/bosko-media.pl\/index.php\/141-2\/","title":{"rendered":""},"content":{"rendered":"\n<meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Portfolio &#8211; Bosko Media<\/title>\n  <style>\n    \/* Reset i style bazowe sekcji *\/\n    .bosko-portfolio-page * {\n      box-sizing: border-box;\n      margin: 0;\n      padding: 0;\n    }\n\n    .bosko-portfolio-page {\n      width: 100%;\n      max-width: 1240px;\n      margin: 0 auto;\n      padding: 40px 20px 60px 20px;\n      color: #222222;\n    }\n\n    \/* Nag\u0142\u00f3wek *\/\n    .bosko-portfolio-header {\n      text-align: center;\n      margin-bottom: 40px;\n    }\n\n    .bosko-portfolio-title {\n      color: #08300A !important;\n      text-transform: uppercase;\n      letter-spacing: 2px;\n      font-size: 2.5rem !important;\n      margin-bottom: 10px;\n      text-align: center;\n    }\n\n    .bosko-portfolio-subtitle {\n      font-size: 1.1rem !important;\n      color: #444444 !important;\n      font-style: italic;\n      margin-bottom: 20px;\n    }\n\n    .bosko-portfolio-divider {\n      width: 60px;\n      height: 1px;\n      background-color: #08300A;\n      margin: 0 auto 35px auto;\n      opacity: 0.6;\n    }\n\n    \/* Przyciski Filtrowania (Tabs) *\/\n    .bosko-portfolio-tabs {\n      display: flex;\n      justify-content: center;\n      gap: 12px;\n      margin-bottom: 50px;\n      flex-wrap: wrap;\n    }\n\n    .bosko-tab-btn {\n      padding: 10px 22px;\n      border: 1px solid #08300A;\n      background: transparent;\n      color: #08300A !important;\n      text-transform: uppercase;\n      letter-spacing: 1.5px;\n      font-size: 0.8rem !important;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.3s ease;\n      text-decoration: none;\n    }\n\n    .bosko-tab-btn:hover,\n    .bosko-tab-btn.active {\n      background-color: #08300A;\n      color: #FFFFFF !important;\n    }\n\n    \/* Nag\u0142\u00f3wki poszczeg\u00f3lnych sekcji *\/\n    .bosko-section-head-title {\n      color: #08300A !important;\n      font-size: 1.5rem !important;\n      text-transform: uppercase;\n      letter-spacing: 1.5px;\n      margin: 40px 0 20px 0;\n      padding-bottom: 8px;\n      border-bottom: 1px solid rgba(8, 48, 10, 0.15);\n    }\n\n    \/* 1. FOTOGRAFIA (3 Kolumny) *\/\n    .bosko-photo-grid {\n      display: grid;\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n      gap: 20px;\n      margin-bottom: 50px;\n    }\n\n    .bosko-photo-card {\n      position: relative;\n      border: 1px solid #08300A;\n      aspect-ratio: 4 \/ 3;\n      background-color: #f4f4f4;\n      overflow: hidden;\n      cursor: pointer;\n    }\n\n    .bosko-photo-card img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      transition: transform 0.5s ease;\n      display: block;\n    }\n\n    .bosko-photo-card:hover img {\n      transform: scale(1.05);\n    }\n\n    \/* LIGHTBOX (Powi\u0119kszanie zdj\u0119\u0107) *\/\n    .bosko-lightbox {\n      display: none;\n      position: fixed;\n      inset: 0;\n      z-index: 99999;\n      background-color: rgba(8, 48, 10, 0.92);\n      backdrop-filter: blur(5px);\n      align-items: center;\n      justify-content: center;\n      padding: 20px;\n    }\n\n    .bosko-lightbox.active {\n      display: flex;\n    }\n\n    .bosko-lightbox-img {\n      max-width: 90vw;\n      max-height: 85vh;\n      border: 1px solid #FFFFFF;\n      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);\n      object-fit: contain;\n    }\n\n    .bosko-lightbox-close {\n      position: absolute;\n      top: 25px;\n      right: 30px;\n      color: #FFFFFF;\n      font-size: 2.5rem;\n      cursor: pointer;\n      font-family: sans-serif;\n      line-height: 1;\n      transition: transform 0.2s ease;\n    }\n\n    .bosko-lightbox-close:hover {\n      transform: scale(1.2);\n    }\n\n    \/* 2. ROLKI \/ SHORTS (4 Kolumny Pionowe 9:16) *\/\n    .bosko-reels-grid {\n      display: grid;\n      grid-template-columns: repeat(4, minmax(0, 1fr));\n      gap: 20px;\n      margin-bottom: 50px;\n    }\n\n    .bosko-reel-card {\n      position: relative;\n      border: 1px solid #08300A;\n      aspect-ratio: 9 \/ 16;\n      background-color: #000000;\n      overflow: hidden;\n      box-shadow: 0 6px 20px rgba(8, 48, 10, 0.08);\n      cursor: pointer;\n      text-decoration: none;\n      display: block;\n    }\n\n    .bosko-reel-card img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      opacity: 0.85;\n      transition: transform 0.5s ease, opacity 0.3s ease;\n    }\n\n    .bosko-reel-card:hover img {\n      transform: scale(1.05);\n      opacity: 1;\n    }\n\n    .bosko-reel-overlay {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      padding: 20px;\n      background: linear-gradient(to top, rgba(8, 48, 10, 0.85) 0%, transparent 60%);\n      color: #FFFFFF;\n    }\n\n    .bosko-play-circle {\n      align-self: center;\n      margin: auto;\n      width: 48px;\n      height: 48px;\n      border-radius: 50%;\n      background: rgba(255, 255, 255, 0.2);\n      backdrop-filter: blur(4px);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border: 1px solid #FFFFFF;\n      transition: transform 0.3s ease, background-color 0.3s ease;\n    }\n\n    .bosko-reel-card:hover .bosko-play-circle {\n      transform: scale(1.15);\n      background-color: #FFFFFF;\n    }\n\n    .bosko-reel-card:hover .bosko-play-circle svg {\n      fill: #08300A;\n    }\n\n    .bosko-reel-caption {\n      font-size: 0.95rem;\n      font-weight: 600;\n      color: #FFFFFF;\n      text-transform: uppercase;\n      letter-spacing: 1px;\n    }\n\n    \/* 3. FORMY FILMOWE (2 Kolumny Poziome 16:9) *\/\n    .bosko-films-grid {\n      display: grid;\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      gap: 30px;\n      margin-bottom: 40px;\n    }\n\n    .bosko-film-card {\n      border: 1px solid #08300A;\n      background-color: #FFFFFF;\n      padding: 15px;\n      box-shadow: 0 8px 25px rgba(8, 48, 10, 0.05);\n    }\n\n    .bosko-film-embed {\n      position: relative;\n      width: 100%;\n      aspect-ratio: 16 \/ 9;\n      background-color: #000000;\n      margin-bottom: 15px;\n    }\n\n    .bosko-film-embed iframe {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      border: 0;\n    }\n\n    .bosko-film-desc {\n      text-align: center;\n      padding: 10px 0 5px 0;\n    }\n\n    .bosko-film-desc h4 {\n      color: #08300A !important;\n      font-size: 1.1rem !important;\n      text-transform: uppercase;\n      letter-spacing: 1px;\n      margin-bottom: 4px;\n    }\n\n    .bosko-film-desc p {\n      font-size: 0.85rem !important;\n      color: #444444 !important;\n      margin: 0;\n    }\n\n    \/* Wersja Mobilna *\/\n    @media (max-width: 900px) {\n      .bosko-photo-grid,\n      .bosko-films-grid {\n        grid-template-columns: 1fr;\n      }\n\n      .bosko-reels-grid {\n        grid-template-columns: repeat(2, 1fr);\n      }\n    }\n  <\/style>\n\n  <div class=\"bosko-portfolio-page\">\n\n    <!-- NAG\u0141\u00d3WEK PODSTRONY -->\n    <div class=\"bosko-portfolio-header\">\n      <h1 class=\"bosko-portfolio-title\">PORTFOLIO<\/h1>\n      <p class=\"bosko-portfolio-subtitle\">Uchwycone chwile, emocje i prawdziwe historie.<\/p>\n      <div class=\"bosko-portfolio-divider\"><\/div>\n    <\/div>\n\n    <!-- PRZYCISKI FILTROWANIA (TABS) -->\n    <div class=\"bosko-portfolio-tabs\">\n      <button class=\"bosko-tab-btn active\" onclick=\"filterBoskoPortfolio('all', this)\">Wszystkie<\/button>\n      <button class=\"bosko-tab-btn\" onclick=\"filterBoskoPortfolio('fotografia', this)\">Fotografia<\/button>\n      <button class=\"bosko-tab-btn\" onclick=\"filterBoskoPortfolio('rolki', this)\">Rolki &amp; Shorts<\/button>\n      <button class=\"bosko-tab-btn\" onclick=\"filterBoskoPortfolio('filmy', this)\">Formy Filmowe<\/button>\n    <\/div>\n\n    <!-- SEKCJA 1: FOTOGRAFIA -->\n    <div class=\"bosko-group-block\" id=\"group-fotografia\">\n      <h3 class=\"bosko-section-head-title\">Fotografia<\/h3>\n      <div class=\"bosko-photo-grid\">\n\n        <div class=\"bosko-photo-card\" onclick=\"openLightbox(this)\">\n          <img decoding=\"async\" src=\"http:\/\/bosko-media.pl\/wp-content\/uploads\/2026\/08\/00000103-scaled.jpg\" alt=\"Fotografia Bosko Media 1\">\n        <\/div>\n\n        <div class=\"bosko-photo-card\" onclick=\"openLightbox(this)\">\n          <img decoding=\"async\" src=\"http:\/\/bosko-media.pl\/wp-content\/uploads\/2026\/09\/WhatsApp-Image-2026-09-15-at-19.06.38.jpeg\" alt=\"Fotografia Bosko Media 2\">\n        <\/div>\n\n        <div class=\"bosko-photo-card\" onclick=\"openLightbox(this)\">\n          <img decoding=\"async\" src=\"http:\/\/bosko-media.pl\/wp-content\/uploads\/2026\/09\/00000078.jpg\" alt=\"Fotografia Bosko Media 3\">\n        <\/div>\n\n        <div class=\"bosko-photo-card\" onclick=\"openLightbox(this)\">\n          <img decoding=\"async\" src=\"http:\/\/bosko-media.pl\/wp-content\/uploads\/2026\/09\/00000572.jpg\" alt=\"Fotografia Bosko Media 4\">\n        <\/div>\n\n        <div class=\"bosko-photo-card\" onclick=\"openLightbox(this)\">\n          <img decoding=\"async\" src=\"http:\/\/bosko-media.pl\/wp-content\/uploads\/2026\/09\/00000333.jpg\" alt=\"Fotografia Bosko Media 5\">\n        <\/div>\n\n        <div class=\"bosko-photo-card\" onclick=\"openLightbox(this)\">\n          <img decoding=\"async\" src=\"http:\/\/bosko-media.pl\/wp-content\/uploads\/2026\/09\/00000296-scaled.jpg\" alt=\"Fotografia Bosko Media 6\">\n        <\/div>\n\n        <div class=\"bosko-photo-card\" onclick=\"openLightbox(this)\">\n          <img decoding=\"async\" src=\"http:\/\/bosko-media.pl\/wp-content\/uploads\/2026\/09\/00000148-1.jpg\" alt=\"Fotografia Bosko Media 7\">\n        <\/div>\n\n        <!-- DODANE 8. ZDJ\u0118CIE -->\n        <div class=\"bosko-photo-card\" onclick=\"openLightbox(this)\">\n          <img decoding=\"async\" src=\"http:\/\/bosko-media.pl\/wp-content\/uploads\/2026\/09\/00000935-scaled.jpg\" alt=\"Fotografia Bosko Media 8\">\n        <\/div>\n\n        <!-- DODANE 9. ZDJ\u0118CIE -->\n        <div class=\"bosko-photo-card\" onclick=\"openLightbox(this)\">\n          <img decoding=\"async\" src=\"http:\/\/bosko-media.pl\/wp-content\/uploads\/2026\/09\/728503543_1320465459682073_9102154997724020306_n.jpeg\" alt=\"Fotografia Bosko Media 9\">\n        <\/div>\n\n      <\/div>\n    <\/div>\n\n    <!-- SEKCJA 2: ROLKI \/ SHORTS (9:16) -->\n    <div class=\"bosko-group-block\" id=\"group-rolki\">\n      <h3 class=\"bosko-section-head-title\">Rolki &amp; Shorty (Pionowe Wideo)<\/h3>\n      <div class=\"bosko-reels-grid\">\n        \n        <!-- Rolka 1 -->\n        <a href=\"https:\/\/drive.google.com\/file\/d\/1v7me16l9_b6mmzm9yasZej7b-IyW7alj\/view?usp=drive_link\" target=\"_blank\" class=\"bosko-reel-card\">\n          <img decoding=\"async\" src=\"http:\/\/bosko-media.pl\/wp-content\/uploads\/2026\/09\/wzgorze-okl.jpg\" alt=\"Events &amp; Lifestyle\">\n          <div class=\"bosko-reel-overlay\">\n            <div><\/div>\n            <div class=\"bosko-play-circle\">\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"#FFFFFF\"><polygon points=\"5 3 19 12 5 21 5 3\"><\/polygon><\/svg>\n            <\/div>\n            <div class=\"bosko-reel-caption\">Events &amp; Lifestyle<\/div>\n          <\/div>\n        <\/a>\n\n        <!-- Rolka 2 -->\n        <a href=\"https:\/\/drive.google.com\/file\/d\/1jDJvWLIoqyW4pB7cfm0z0eOZof_R8Mz8\/view?usp=drive_link\" target=\"_blank\" class=\"bosko-reel-card\">\n          <img decoding=\"async\" src=\"http:\/\/bosko-media.pl\/wp-content\/uploads\/2026\/09\/bizes-okladka.jpg\" alt=\"Business &amp; B2B\">\n          <div class=\"bosko-reel-overlay\">\n            <div><\/div>\n            <div class=\"bosko-play-circle\">\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"#FFFFFF\"><polygon points=\"5 3 19 12 5 21 5 3\"><\/polygon><\/svg>\n            <\/div>\n            <div class=\"bosko-reel-caption\">Business &amp; B2B<\/div>\n          <\/div>\n        <\/a>\n\n        <!-- Rolka 3 -->\n        <a href=\"https:\/\/drive.google.com\/file\/d\/1kGJFFTiP6ZnhJWxmAvcEUAyin2G6medV\/view?usp=sharing\" target=\"_blank\" class=\"bosko-reel-card\">\n          <img decoding=\"async\" src=\"http:\/\/bosko-media.pl\/wp-content\/uploads\/2026\/09\/w-niebie.jpg\" alt=\"Festival\">\n          <div class=\"bosko-reel-overlay\">\n            <div><\/div>\n            <div class=\"bosko-play-circle\">\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"#FFFFFF\"><polygon points=\"5 3 19 12 5 21 5 3\"><\/polygon><\/svg>\n            <\/div>\n            <div class=\"bosko-reel-caption\">Festival<\/div>\n          <\/div>\n        <\/a>\n\n      <\/div>\n    <\/div>\n\n    <!-- SEKCJA 3: FORMY FILMOWE (16:9) -->\n    <div class=\"bosko-group-block\" id=\"group-filmy\">\n      <h3 class=\"bosko-section-head-title\">Filmy &amp; Aftermovies<\/h3>\n      <div class=\"bosko-films-grid\">\n        \n        <div class=\"bosko-film-card\">\n          <div class=\"bosko-film-embed\">\n            <iframe src=\"https:\/\/www.youtube.com\/embed\/dQw4w9WgXcQ\" title=\"Filmowe Aftermovie\" allowfullscreen=\"\"><\/iframe>\n          <\/div>\n          <div class=\"bosko-film-desc\">\n            <h4>Oficjalne Aftermovie z Festiwalu<\/h4>\n            <p>Realizacja wideo + pe\u0142ny monta\u017c i autorska koloryzacja.<\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"bosko-film-card\">\n          <div class=\"bosko-film-embed\">\n            <iframe src=\"https:\/\/www.youtube.com\/embed\/dQw4w9WgXcQ\" title=\"Video Promocyjne\" allowfullscreen=\"\"><\/iframe>\n          <\/div>\n          <div class=\"bosko-film-desc\">\n            <h4>Osobowo\u015b\u0107 Marki &#8211; Reporta\u017c<\/h4>\n            <p>Kr\u00f3tka forma dokumentalna pokazuj\u0105ca kulisy tw\u00f3rcy.<\/p>\n          <\/div>\n        <\/div>\n\n      <\/div>\n    <\/div>\n\n  <\/div>\n\n  <!-- LIGHTBOX CONTAINER -->\n  <div class=\"bosko-lightbox\" id=\"boskoLightbox\" onclick=\"closeLightbox()\">\n    <span class=\"bosko-lightbox-close\">\u00d7<\/span>\n    <img decoding=\"async\" class=\"bosko-lightbox-img\" id=\"boskoLightboxImg\" src=\"\" alt=\"Powi\u0119kszone zdj\u0119cie\">\n  <\/div>\n\n  <!-- SKRYPTY (FILTERING + LIGHTBOX) -->\n  <script>\n    function filterBoskoPortfolio(category, buttonElement) {\n      const buttons = document.querySelectorAll('.bosko-tab-btn');\n      buttons.forEach(btn => btn.classList.remove('active'));\n      buttonElement.classList.add('active');\n\n      const groups = document.querySelectorAll('.bosko-group-block');\n      groups.forEach(group => {\n        if (category === 'all') {\n          group.style.display = 'block';\n        } else {\n          if (group.id === 'group-' + category) {\n            group.style.display = 'block';\n          } else {\n            group.style.display = 'none';\n          }\n        }\n      });\n    }\n\n    function openLightbox(cardElement) {\n      const img = cardElement.querySelector('img');\n      const lightbox = document.getElementById('boskoLightbox');\n      const lightboxImg = document.getElementById('boskoLightboxImg');\n      \n      lightboxImg.src = img.src;\n      lightbox.classList.add('active');\n    }\n\n    function closeLightbox() {\n      const lightbox = document.getElementById('boskoLightbox');\n      lightbox.classList.remove('active');\n    }\n  <\/script>\n","protected":false},"excerpt":{"rendered":"<p>Portfolio &#8211; Bosko Media PORTFOLIO Uchwycone chwile, emocje i prawdziwe historie. Wszystkie Fotografia Rolki &amp; Shorts Formy Filmowe Fotografia Rolki &amp; Shorty (Pionowe Wideo) Events &amp; Lifestyle Business &amp; B2B Festival Filmy &amp; Aftermovies Oficjalne Aftermovie z Festiwalu Realizacja wideo + pe\u0142ny monta\u017c i autorska koloryzacja. Osobowo\u015b\u0107 Marki &#8211; Reporta\u017c Kr\u00f3tka forma dokumentalna pokazuj\u0105ca kulisy [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-141","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bosko-media.pl\/index.php\/wp-json\/wp\/v2\/pages\/141","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bosko-media.pl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bosko-media.pl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bosko-media.pl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bosko-media.pl\/index.php\/wp-json\/wp\/v2\/comments?post=141"}],"version-history":[{"count":26,"href":"https:\/\/bosko-media.pl\/index.php\/wp-json\/wp\/v2\/pages\/141\/revisions"}],"predecessor-version":[{"id":226,"href":"https:\/\/bosko-media.pl\/index.php\/wp-json\/wp\/v2\/pages\/141\/revisions\/226"}],"wp:attachment":[{"href":"https:\/\/bosko-media.pl\/index.php\/wp-json\/wp\/v2\/media?parent=141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}