/* ======================================================
   STYLES FINALNE – SCALONE Z POPRAWKAMI MINIATUR + VIEWER
   ====================================================== */

/* -------------------------
   ZMIENNE I PODSTAWY
   ------------------------- */
:root {
  --font-main: Arial, Helvetica, sans-serif;
  --font-head: "Segoe UI", Tahoma, sans-serif;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --shadow-sm: 0 2px 6px rgba(0,0,0,0.12);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.18);

  --trans-fast: 0.18s;
  --trans-med: 0.28s;
  --trans-slow: 0.4s;

  --max-content-width: 1200px;
  --max-text-width: 900px;

  --bg-page: #ffffff;
  --bg-element: rgba(255,255,255,0.85);
  --text-main: #111;
  --text-muted: #666;
  --accent: #333;
  --card-bg: rgba(255,255,255,0.85);
}

/* Motywy */
body.light {
  --bg-page: #fbfbfb;
  --bg-element: rgba(255,255,255,0.85);
  --text-main: #222;
  --text-muted: #666;
  --accent: #1a0dab;
  --card-bg: rgba(255,255,255,0.85);
}

body.dark {
  --bg-page: #0f0f10;
  --bg-element: rgba(22,22,22,0.85);
  --text-main: #eaeaea;
  --text-muted: #999;
  --accent: #8ab4f8;
  --card-bg: rgba(30,30,30,0.85);
}

*{box-sizing:border-box;}
html, body{height:100%;}

body {
  margin:0;
  font-family:var(--font-main);
  background:var(--bg-page) url('../img/bg-light.jpg') no-repeat center center fixed;
  background-size: cover;
  color:var(--text-main);
  display:flex;
  flex-direction:column;
  align-items:center;
  transition: background var(--trans-med), color var(--trans-med);
  overflow-x:hidden;
}

body.dark { background-image: url('../img/bg-dark.jpg'); }
body.light { background-image: url('../img/bg-light.jpg'); }

/* -------------------------
   HEADER I MENU
   ------------------------- */
header.header {
  width: 100%;
  padding: 1rem;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-main);
}
/* ==========================================
   TŁA HEADERA – LIGHT / DARK + DESKTOP / MOBILE
   ========================================== */

/* ---------- DESKTOP (≥ 768px) ---------- */
@media (min-width: 768px) {

  body.light header.header {
    background: url('../img/header-desktop-light.jpg') center/cover no-repeat;
  }

  body.dark header.header {
    background: url('../img/header-desktop-dark.jpg') center/cover no-repeat;
  }
}

/* ---------- MOBILE (< 768px) ---------- */
@media (max-width: 767px) {

  body.light header.header {
    background: url('../img/header-mobile-light.jpg') center/cover no-repeat;
  }

  body.dark header.header {
    background: url('../img/header-mobile-dark.jpg') center/cover no-repeat;
  }
}
.header-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 1rem;
}

header h1, header h2 {
  margin:0;
  font-family:var(--font-head);
  font-weight:600;
}

header h1 { font-size:1.8rem; text-align:center; }
header h2 { font-size:1.3rem; text-align:center; }

/* --------------------------
   HAMBURGER
   -------------------------- */
.hamburger {
  font-size: 2rem;
  background: none;
  border: none;
  cursor: pointer;
  display: none; /* ukryty na PC */
  color: var(--text-main);
}

/* --------------------------
   MENU NA PC
   -------------------------- */
nav.main-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  align-items: center;
}

nav.main-nav a {
  display: inline-block;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  max-width: 7em;
  line-height: 1.2em;
  font-weight: bold;
  color: var(--accent);
  text-decoration: none;
  transition: color 0.3s;
}

nav.main-nav a:hover { color: var(--accent); text-decoration: underline; }

/* --------------------------
   MOBILE (<768px)
   -------------------------- */
@media (max-width: 768px) {
  .hamburger { display: block; }

  nav.main-nav {
    display: none;
    flex-direction: column;
    padding: 1rem 0;
    width: 100%;
    background: var(--bg-page);
    border-top: 1px solid rgba(0,0,0,0.1);
    text-align: center;
  }

  nav.main-nav.active { display: flex; }

  nav.main-nav a {
    max-width: 100%;
    padding: 0.5rem 0;
  }
}

/* -------------------------
   NAWIGACJA – ISTNIEJĄCE
   ------------------------- */
.theme-toggle {
  margin-left:auto;
  font-size:1.4rem;
  background:transparent;
  border:none;
  cursor:pointer;
  color:inherit;
  padding:0.25em 0.5em;
  transition: transform 0.3s, color 0.3s;
}
.theme-toggle:hover { transform: scale(1.2); }

/* -------------------------
   MAIN / TREŚĆ
   ------------------------- */
main {
  width:100%;
  max-width: var(--max-content-width);
  padding:2rem;
}

.page-content {
  max-width: var(--max-text-width);
  margin:0 auto;
  padding:1rem;
}

/* -------------------------
   BLOKI INFORMACYJNE – CONTENT-CARD
   ------------------------- */
.content-card {
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin: 1rem auto;
  max-width: 750px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background-color 0.3s, color 0.3s;
  text-align: center;
  background-color: var(--card-bg);
  color: var(--text-color, var(--text-main));
}

body.light .content-card { --card-bg: rgba(255, 255, 255, 0.7); --text-color:#222; }
body.dark .content-card { --card-bg: rgba(30,30,30,0.8); --text-color:#ddd; }

.content-card h3 { margin-top:0; color: var(--text-color); }
.content-card a { color: var(--accent); text-decoration:none; font-weight:bold; transition: color 0.3s; }
.content-card a:hover { text-decoration: underline; }

/* -------------------------
   GALERIE I MINIATURY
   ------------------------- */

.gallery,
.gallery-grid,
.thumb-grid,
.card-grid,
.mini-gallery {
  display: grid;
  gap:20px;
  padding:20px;
  max-width:1200px;
  margin:0 auto;
}

/* miniatury */
.gallery img,
.gallery-item img,
.gallery-card img,
.thumb-item img,
.mini-item img,
.card-grid img,
.gallery-thumbs .card img {
  width:150px;
  height:auto;
  border-radius:6px;
  box-shadow:0 2px 5px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}

.gallery img:hover,
.gallery-item:hover,
.gallery-card:hover,
.thumb-item:hover img,
.mini-item img:hover,
.card-grid img:hover,
.gallery-thumbs .card img:hover {
  transform: scale(1.03);
}

/* podpisy pod miniaturami */
.gallery-thumbs .card,
.card-grid .card,
.thumb-item,
.mini-item {
  text-align:center;
  color: var(--text-main);
  font-size:0.9rem;
  word-wrap: break-word;
}

.gallery-thumbs .card span,
.card-grid .card span,
.thumb-item span,
.mini-item span {
  display:block;
  margin-top:0.4rem;
  line-height:1.2em;
  color: var(--text-main);
}

/* siatka */
.thumb-grid { grid-template-columns: repeat(7, 1fr); }
.gallery-thumbs { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.card-grid     { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

@media (max-width:1024px){
  .thumb-grid { grid-template-columns:repeat(4,1fr); }
  .gallery-thumbs { grid-template-columns: repeat(2,1fr); }
  .card-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width:768px){
  .thumb-grid { grid-template-columns:repeat(2,1fr); }
  .gallery-thumbs { grid-template-columns: repeat(2,1fr); }
  .card-grid { grid-template-columns: repeat(1,1fr); }
}

/* -------------------------
   GALERIE 3D / R3D
   ------------------------- */

#gallery-r3d { width:100%; }
#gallery-r3d .r3d-grid { display:grid; gap:16px; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); padding:18px; justify-items:center; }
#gallery-r3d .card--r3d { width:100%; max-width:280px; }
#gallery-r3d .viewer-wrapper { width:100%; max-width:100%; margin:12px auto; text-align:center; position:relative; }
#gallery-r3d .canvas-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 70vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
#gallery-r3d canvas { display:block; margin:0; padding:0; }

body.r3d-fullscreen { background:#000 !important; overflow:hidden !important; margin:0 !important; padding:0 !important; }
.r3d-fs-wrapper { width:100vw !important; height:100vh !important; margin:0 !important; padding:0 !important; display:flex !important; justify-content:center !important; align-items:center !important; background:#000 !important; position:fixed !important; top:0; left:0; z-index:9999 !important; }
.r3d-fs-canvas { display:block !important; margin:0 auto !important; width:960px !important; max-width:960px !important; height:auto !important; }
@media (max-width:1024px) { .r3d-fs-canvas { width:100% !important; max-width:100% !important; height:auto !important; } }

body.r3d-fullscreen header,
body.r3d-fullscreen nav,
body.r3d-fullscreen footer,
body.r3d-fullscreen .description,
body.r3d-fullscreen h1,
body.r3d-fullscreen .scene-description,
body.r3d-fullscreen .controls { display:none !important; }

/* -------------------------
   VIEWER STEREOPAR
   ------------------------- */

.viewer-container {
  width:100%;
  max-width:900px;
  margin:1.5rem auto;
  padding:1rem;
  text-align:center;
}

.viewer-container canvas {
  width:100%;
  max-width:100%;
  height:auto;
  display:block;
  margin:auto;
}

.controls {
  margin-top:1rem;
}

/* -------------------------
   PRZYCISKI / KONTROLKI
   ------------------------- */
.controls, .mode-buttons, .nav-buttons, .mobile-controls {
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:1rem;
}

.controls select,
.controls button,
button,
.mode-buttons button,
.nav-buttons a {
  font-size:1rem;
  padding:0.5rem 1rem;
  background:#333;
  color:#eee;
  border:none;
  border-radius:4px;
  cursor:pointer;
  text-decoration:none;
  transition: background 0.3s;
}
.controls button:hover,
.controls select:hover,
button:hover,
.mode-buttons button:hover,
.nav-buttons a:hover { background:#555; }

/* -------------------------
   FORMY
   ------------------------- */
form { max-width:600px; margin:auto; display:flex; flex-direction:column; gap:1rem; }
input, textarea { padding:0.5rem; border:1px solid #aaa; border-radius:4px; font-size:1rem; }
body.dark input, body.dark textarea { background:#222; color:#eee; border-color:#444; }
body.light input, body.light textarea { background:#fff; color:#000; border-color:#aaa; }

input[type="submit"] {
  padding:0.5em 1em;
  border-radius:8px;
  font-weight:bold;
  transition: background 0.3s, color 0.3s;
}
body.dark input[type="submit"] { background-color:#333; color:#f0f0f0; border:1px solid #555; }
body.light input[type="submit"] { background-color:#ddd; color:#000; border:1px solid #aaa; }
input[type="submit"]:hover { opacity:0.85; cursor:pointer; }

/* -------------------------
   STOPKA
   ------------------------- */
footer {
  width:100%;
  padding:1rem;
  text-align:center;
  transition: background 0.3s, color 0.3s;
}
body.dark footer { background:#333; color:#ddd; }
body.light footer { background:#f2f2f2; color:#222; }

/* -------------------------
   RESPONSYWNOŚĆ
   ------------------------- */
@media (max-width:1024px){ main{padding:1.2rem} }
@media (max-width:768px){
  .card{padding:10px;}
  .card-title{font-size:0.95rem;}
  .description{padding:14px;font-size:1rem;}
}

/* -------------------------
   WYŚRODKOWANIE NAGŁÓWKÓW
   ------------------------- */
h1, h2, h3 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.share-section{ text-align:center; margin-top:1rem }
.share-button{ background:#4267B2; color:#fff; padding:0.6rem 1.1rem; border-radius:6px; text-decoration:none; display:inline-block }
.share-button:hover{ background:#365899 }
/* ==========================================
   LINKI W STOPCE
   ========================================== */

footer a {
  color: var(--accent);
  text-decoration: none;
  font-weight: bold;
  margin: 0 0.3rem;
  transition: color 0.25s ease, opacity 0.25s ease;
}

footer a:hover {
  text-decoration: underline;
  opacity: 0.85;
}

/* Kolory tekstu w ciemnym/jasnym motywie */
body.dark footer a {
  color: #8ab4f8;
}

body.light footer a {
  color: #1a0dab;
}

/* Social links – dodatkowe odstępy */
footer .social-links a {
  display: inline-block;
  margin: 0.4rem 0.6rem;
  font-size: 1rem;
}
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  height: 0;
  overflow: hidden;
}
.nav-btn {
    padding: 0.5rem 1.2rem;
    margin: 0 0.5rem;
    background: var(--accent);
    color: white;
    border-radius: 6px;
    text-decoration: none;
}

.nav-btn:hover {
    opacity: 0.8;
}
.blog-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.2rem auto;
    border-radius: 10px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

.blog-cover-image {
    display: block;
    max-width: 100%;
    width: 100%;
    height: auto;
    margin: 1rem auto 2rem;
    border-radius: 10px;
}
.blog-thumbnail {
    width: 100%;
    max-width: 420px;
    height: auto;
    display: block;
    margin: 1rem auto;
    border-radius: 10px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.18);
}
.blog-list-item h3 a {
    color: var(--text-dark);
    text-decoration: none;
}

.blog-list-item h3 a:hover {
    text-decoration: underline;
}

.blog-date {
    margin-top: -0.5rem;
    margin-bottom: 0.8rem;
    color: #666;
}
.blog-readmore {
    font-weight: bold;
    color: var(--accent-color);
}
.pagination {
    text-align: center;
    margin-top: 2rem;
}

.page-link {
    display: inline-block;
    padding: 6px 12px;
    margin: 0 4px;
    border-radius: 6px;
    text-decoration: none;
    background: #eee;
    color: #333;
}

.page-link:hover {
    background: #ddd;
}

.page-link.active {
    background: var(--accent-color);
    color: white;
    font-weight: bold;
}
.post-nav-button {
    display: inline-block;
    padding: 10px 16px;
    margin: 0 10px;
    background: #1976d2;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.2s;
}
.post-nav-button:hover {
    background: #0d47a1;
}
.back-button {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: 1rem;
    text-decoration: none;
    color: #1976d2;      /* jeden z Twoich niebieskich */
    font-weight: 500;
}

.back-button:hover {
    text-decoration: underline;
}
.post-nav {
    margin-top: 2rem;
    text-align: center;
}

.post-nav-link {
    margin: 0 15px;
    font-size: 1.05rem;
    text-decoration: none;
    color: #1976d2;
    font-weight: 500;
}

.post-nav-link:hover {
    text-decoration: underline;
}
/* Sekcja zawierająca obrazki i tekst */
.img-text {
  display: flex;
  flex-wrap: wrap; /* Dopuszcza zawijanie na małych ekranach */
  justify-content: center;
  align-items: center;
  gap: 1rem; /* Odstęp między obrazkiem a tekstem */
}

.img-text img {
  max-width: 100%; /* Obrazek nie może wyjść poza szerokość kontenera */
  height: auto; /* Zabezpiecza proporcje */
  border-radius: 0.75rem; /* Lekka zaokrąglona ramka */
  object-fit: contain; /* Zapewnia, że obrazek będzie odpowiednio wyświetlony w kontenerze */
}

/* Opcjonalnie: stylujemy tekst w divie, żeby wyglądał lepiej na różnych urządzeniach */
.img-text p {
  flex: 1 1 100%; /* Zapewnia, że tekst zajmuje pełną szerokość na małych ekranach */
  text-align: justify; /* Ułatwia czytanie na szerokich ekranach */
  font-size: 1rem;
  line-height: 1.5;
}

@media screen and (max-width: 768px) {
  /* Dostosowanie tekstu, jeśli jest za mały na urządzeniach mobilnych */
  .img-text p {
    font-size: 0.9rem;
    margin-top: 1rem; /* Większa przestrzeń między obrazkiem a tekstem */
  }

  .img-text img {
    max-width: 90%; /* Mniejszy obrazek na małych ekranach */
  }
}
.viewer-wrapper {
    perspective: 900px;
}

.canvas-container {
    transform: translateY(var(--scrollY, 0px)) rotateX(var(--tiltX, 0deg));
    transition: transform 0.1s ease-out;
    will-change: transform;
}
@media (orientation: landscape) and (max-width: 900px) {
  #gallery-r3d .canvas-container {
    height: 100vh;
    max-height: 100vh;
    aspect-ratio: auto;
  }
}