/* --- Reset and Base Styles --- */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



body {

  font-family: 'Open Sans', sans-serif;

  background: linear-gradient(to bottom right, #f7f4ef, #eae4dc);

  color: #333;

}



/* --- Header --- */

header {

  background: url('../images/carousel.jpg?ixlib=rb-4.0.3&auto=format&fit=crop&w=1950&q=80') no-repeat center center/cover;

  height: 100vh;

  color: white;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

  position: relative;

}

header::after {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.2);

  z-index: 0;

}

header h1 {

  font-family: 'Playfair Display', serif;

  font-size: 3rem;

  z-index: 1;

}

header p {

  font-size: 1.2rem;

  margin-top: 1rem;

  z-index: 1;

}



/* --- Navigation --- */

nav {

  position: fixed;

  width: 100%;

  top: 0;

  left: 0;

  background-color: rgba(255, 255, 255, 0.95);

  padding: 1rem 2rem;

  display: flex;

  justify-content: space-between;

  align-items: center;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  z-index: 100;

  perspective: 1000px;

}

nav .logo {

  font-weight: bold;

  font-size: 1.5rem;

  color: #333;

}

nav ul {

  display: flex;

  gap: 1.5rem;

  list-style: none;

  transition: transform 0.6s ease, opacity 0.6s ease, border-radius 0.6s ease;

  transform-style: preserve-3d;

}

nav ul li a {

  text-decoration: none;

  color: #333;

  transition: color 0.3s;

}

nav ul li a:hover {

  color: #8c5e58;

}

.menu-toggle {

  display: none;

  cursor: pointer;

  font-size: 1.8rem;

  color: #333;

}



/* --- Sections --- */

section {

  padding: 2rem 2rem;

  text-align: center;

}

.uvod, .onas, .spoluprace, .projekty, .kontakt {

  max-width: 900px;

  margin: 0 auto;

}

.uvod h2, .onas h2, .spoluprace h2, .projekty h2, .kontakt h2 {

  font-family: 'Playfair Display', serif;

  font-size: 2.5rem;

  margin-bottom: 1rem;

}

.uvod p, .onas p .spoluprace p, .projekty p, .kontakt p {

  font-size: 1.1rem;

  line-height: 1.8;

}



/* --- Card Containers --- */

.spoluprace .card-container,

.projekty .card-container {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

  gap: 2rem;

  margin-top: 2rem;

}

.card {

  background: white;

  padding: 1rem;

  border-radius: 12px;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.card:hover {

  transform: translateY(-10px);

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);

}



/* --- Gallery --- */

.gallery {

  max-width: 1000px;

  margin: 4rem auto;

  padding: 0 2rem;

}

.gallery h2 {

  font-family: 'Playfair Display', serif;

  font-size: 2.5rem;

  margin-bottom: 1.5rem;

}

.gallery-container {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  gap: 1rem;

}

.gallery-container img {

  width: 100%;

  height: auto;

  border-radius: 8px;

  cursor: pointer;

  transition: transform 0.3s;

}

.gallery-container img:hover {

  transform: scale(1.05);

}



/* --- Lightbox --- */

.lightbox {

  position: fixed;

  top: 0;

  left: 0;

  width: 100vw;

  height: 100vh;

  background: rgba(0, 0, 0, 0.8);

  display: flex;

  justify-content: center;

  align-items: center;

  z-index: 999;

  display: none;

}

.lightbox img {

  max-width: 90%;

  max-height: 90%;

  border-radius: 8px;

}

.lightbox.active {

  display: flex;

}



/* --- Projekty Cards --- */

.projekty-cards {

  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

  gap: 2rem;

}

.projekty-card {

  aspect-ratio: 1/1;

  display: flex;

  align-items: stretch;

  justify-content: stretch;

  padding: 0;

  min-width: 0;

  min-height: 0;

}

.projekty-card .card-content {

  width: 100%;

  height: 100%;

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  align-items: center;

  padding: 1rem;

  box-sizing: border-box;

  overflow: hidden;

}

.projekty-card h3 {

  font-size: 1.1rem;

  margin-bottom: 0.5rem;

  text-align: center;

  flex-shrink: 0;

}

.projekty-img-wrap {

  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  flex: 1 1 auto;

  margin-bottom: 0.5rem;

}

.projekty-img-wrap img {

  max-width: 120px;

  max-height: 120px;

  width: 100%;

  height: auto;

  border-radius: 50%;

  object-fit: cover;

  display: block;

}

.projekty-info {

  font-size: 0.95rem;

  text-align: left;

  width: 100%;

  flex: 1 1 auto;

  overflow: auto;

}



/* --- Timeline Zig-Zag Node-Centered --- */

.timeline {

  position: relative;

  margin: 3rem auto;

  padding: 2rem 0;

  width: 100%;

  max-width: 900px;

}

.timeline::before {

  content: '';

  position: absolute;

  left: 50%;

  top: 0;

  width: 4px;

  height: 100%;

  background: #1976d2; /* blue */

  transform: translateX(-50%);

  border-radius: 2px;

  z-index: 0;

}

.timeline-item {

  position: relative;

  width: 50%;

  padding: 2rem 2rem 2rem 2rem;

  box-sizing: border-box;

}

.timeline-item.left {

  left: 0;

  text-align: right;

  display: flex;

  justify-content: flex-end;

}

.timeline-item.right {

  left: 50%;

  text-align: left;

  display: flex;

  justify-content: flex-start;

}

.timeline-item .timeline-content {

  position: relative;

  background: #fff;

  border-radius: 12px;

  box-shadow: 0 4px 20px rgba(0,0,0,0.08);

  padding: 1.5rem;

  display: inline-block;

  min-width: 0;

  max-width: 340px;

  width: 100%;

  margin: 0 auto;

  box-sizing: border-box;

  text-align: left;

}

.timeline-item::before {

  content: '';

  position: absolute;

  top: 50%;

  left: 100%;

  transform: translate(-50%, -50%);

  width: 20px;

  height: 20px;

  background: #fff;

  border: 4px solid #1976d2; /* blue */

  border-radius: 50%;

  z-index: 2;

}

.timeline-item.right::before {

  left: 0;

  transform: translate(-50%, -50%);

}

.timeline-item.left::before {

  left: 100%;

  transform: translate(-50%, -50%);

}

.timeline-item.left .timeline-content:hover {

  transform: translateX(24px); /* Move right towards the timeline */

  transition: transform 0.3s;

}



.timeline-item.right .timeline-content:hover {

  transform: translateX(-24px); /* Move left towards the timeline */

  transition: transform 0.3s;

}



.timeline-item.left .timeline-content:hover,

.timeline-item.right .timeline-content:hover {

  transform: none;

  transition: none;

}



/* --- Responsive: vertical timeline on small screens --- */

@media (max-width: 900px) {

  .timeline {

    padding-left: 0;

    max-width: 100%;

  }

  .timeline::before {

    left: 50%;

    transform: translateX(-50%);

    width: 4px;

    height: 100%;

    top: 0;

    background: #1976d2; /* blue */

  }

  .timeline-item,

  .timeline-item.left,

  .timeline-item.right {

    left: 0 !important;

    width: 100%;

    text-align: center;

    padding: 0 0 2rem 0;

    display: flex;

    justify-content: center;

    align-items: flex-start;

    position: relative;

  }

  .timeline-item .timeline-content {

    min-width: 0;

    max-width: 340px;

    width: 100%;

    margin: 0 auto;

    display: block;

    position: relative;

    text-align: left;

    margin-top: 10px; /* Half of node height to let node overlap card */

  }

  .timeline-item::before {

    left: 50% !important;

    right: auto !important;

    top: 0;

    transform: translate(-50%, -50%);

    width: 20px;

    height: 20px;

    background: #fff;

    border: 4px solid #1976d2; /* blue */

    border-radius: 50%;

    z-index: 2;

    position: absolute;

  }

  .onas-columns {

    flex-direction: column;

    flex-wrap: wrap;

    gap: 1.5rem;

    align-items: stretch;

    max-width: 100%;

  }

  .onas-column {

    max-width: 100%;

    width: 100%;

    padding: 1.2rem 1rem;

    margin: 0 auto;

    align-items: flex-start;

  }

}

@media (max-width: 768px) {

  nav ul {

    display: none;

    flex-direction: column;

    background: #fff;

    position: absolute;

    top: 60px;

    left: 10px;

    right: 10px;

    padding: 2rem;

    margin: 0 auto;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    transform: rotateX(-90deg) scale(0.8);

    transform-origin: top;

    opacity: 0;

    border-radius: 30px;

    overflow: hidden;

    gap: 1.5rem;

  }

  nav ul.show {

    display: flex;

    transform: rotateX(0deg) scale(1);

    opacity: 1;

    border-radius: 30px;

  }

  nav ul li {

    padding: 0.5rem 1rem;

  }

  .menu-toggle {

    display: block;

  }

}

@media (max-width: 600px) {

  .projekty-cards {

    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));

    gap: 1rem;

  }

  .projekty-card {

    aspect-ratio: 1/1;

  }

  .projekty-img-wrap img {

    max-width: 200px;

    max-height: 200px;

  }

  .projekty-card h3 {

    font-size: 1rem;

  }

}



/* --- O nás section layout --- */

.onas {

  max-width: 1400px;

  margin: 0 auto 3rem auto;

  padding: 2rem 1rem;

  text-align: center;

}



.onas-list {

  list-style: disc inside;

  margin: 1rem auto 2rem auto;

  padding: 0;

  text-align: left;

  max-width: 600px;

}



.onas-columns {

  display: flex;

  flex-wrap: nowrap;

  gap: 2rem;

  justify-content: space-between;

  align-items: stretch;

  margin-top: 2rem;

  max-width: 1400px;

  margin-left: auto;

  margin-right: auto;

}



.onas-column {

  flex: 1 1 340px;

  max-width: 360px;

  /*background: #f7f4ef; Match page background, no gradient */

  border-radius: 12px;

  box-shadow: none;

  padding: 2rem 1.5rem;

  margin: 0;

  box-sizing: border-box;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  min-width: 0;

}



.onas-column h3 {

  margin-bottom: 1rem;

  font-size: 1.3rem;

  color: #1976d2;

  text-align: center;

}



.onas-column p {

  font-size: 1.08rem;

  line-height: 1.8;

  color: #333;

  text-align: left;      

  word-break: break-word;

  hyphens: auto;

  max-width: 100%;

}





.onas-fade-overlay {

  position: absolute;

  top: 0; left: 0; right: 0; bottom: 0;

  background: #f7f4ef; /* solid, or use transparent if you want to see header bg */

  display: flex;

  justify-content: center;

  align-items: center;

  z-index: 2;

  opacity: 1;

  transition: opacity 1s ease;

  pointer-events: all;

}



.onas-fade-overlay.hide {

  opacity: 0;

  pointer-events: none;

  transition: opacity 1s ease;

}



.onas-fade-overlay span {

  /*font-family: 'Playfair Display', serif;*/

  font-size: 2.2rem;

  color: #1976d2;

  text-align: center;

  background: none;

  padding: 2rem 1.5rem;

  border-radius: 16px;

}



.onas-fade-message {

  background: rgba(40, 44, 52, 0.88); /* dark gray with slight transparency */

  border-radius: 22px;

  box-shadow: 0 8px 32px rgba(41, 118, 210, 0.10), 0 1.5px 8px rgba(41, 118, 210, 0.07);

  padding: 2.5em 2.5em 2em 2.5em;

  margin: 3em auto 2em auto;

  max-width: 540px;

  text-align: center;

  /*font-family: 'Playfair Display', serif;*/

  position: relative;

  z-index: 2;

  border: 1.5px solid #444;

  color: #fff;

  opacity: 1;

  pointer-events: auto;

  backdrop-filter: blur(2px);

}



.onas-fade-icon {

  font-size: 2.5rem;

  display: block;

  margin-bottom: 0.7em;

  color: #fff;

  opacity: 0.85;

}



.onas-fade-line {

  display: block;

  font-size: 1.25rem;

  color: #fff;

  margin-bottom: 0.5em;

  letter-spacing: 0.01em;

  text-shadow: 0 1px 0 #222, 0 2px 8px #000;

  font-weight: 500;

}



.onas-fade-line:last-child {

  margin-bottom: 0;

}



@media (max-width: 600px) {

  .onas-fade-message {

    padding: 1.2em 0.7em 1em 0.7em;

    max-width: 98vw;

    font-size: 1rem;

  }

  .onas-fade-icon {

    font-size: 2rem;

  }

  .onas-fade-line {

    font-size: 1.05rem;

  }

}



/* --- Responsive: stack columns vertically on small screens */

@media (max-width: 1100px) {

  .onas-columns {

    gap: 1rem;

  }

  .onas-column {

    padding: 1.2rem 1rem;

    font-size: 1rem;

    max-width: 100%;

  }

}



.timeline-content,

.timeline-content h5,

.timeline-content p {

  text-align: left;

}



#fotogalerie .gallery-container {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

  gap: 1.2rem;

  justify-items: center;

  align-items: center;

  margin-top: 2rem;

}



#fotogalerie .gallery-container img {

  width: 100%;

  max-width: 220px;

  aspect-ratio: 1/1;

  height: auto;

  object-fit: cover;

  border-radius: 14px;

  box-shadow: 0 2px 12px rgba(0,0,0,0.10);

  transition: transform 0.2s, box-shadow 0.2s;

  background: #eaeaea;

  cursor: pointer;

  display: block;

}



#fotogalerie .gallery-container img:hover {

  transform: scale(1.04);

  box-shadow: 0 4px 24px rgba(0,0,0,0.18);

}



/* Add at the end of your CSS file */

#krestanska_historie {

  background: #f7f4ef;

  border-radius: 18px;

  box-shadow: 0 2px 16px rgba(0,0,0,0.06);

  padding: 2.2em 2em 2em 2em;

  max-width: 900px;

  margin: 3em auto 2em auto;

  font-size: 1.12rem;

  line-height: 1.85;

  text-align: center;         /* Center all content */

  position: relative;

}



#krestanska_historie h2 {

  font-family: 'Playfair Display', serif;

  font-size: 2.2rem;

  color: #1976d2;

  margin-bottom: 1.2em;

  text-align: center;

  letter-spacing: 0.01em;

}



#krestanska_historie p {

  margin-bottom: 1.2em;

  text-align: center;         /* Center paragraphs */

  text-indent: 0;            /* Remove indent for center alignment */

  color: #222;

  background: rgba(227,240,251,0.18);

  border-radius: 10px;

  padding: 1.1em 1.3em;

  box-shadow: 0 1px 6px rgba(25,118,210,0.03);

  transition: background 0.2s;

  display: inline-block;      /* Prevents full width background */

  max-width: 700px;           /* Keeps paragraphs readable */

}



@media (max-width: 700px) {

  #krestanska_historie {

    padding: 1em 0.5em 1em 0.5em;

    font-size: 1em;

  }

  #krestanska_historie p {

    padding: 0.7em 0.5em;

    font-size: 1em;

    max-width: 98vw;

  }

}



.historie-enhanced {

  background: #f7f4ef;

  border-radius: 18px;

  box-shadow: 0 2px 16px rgba(0,0,0,0.06);

  padding: 2.2em 2em 2em 2em;

  max-width: 900px;

  margin: 3em auto 2em auto;

  text-align: center;

}



.historie-link {

  display: inline-block;

  text-decoration: none;

  color: inherit;

  transition: box-shadow 0.2s, background 0.2s;

  border-radius: 14px;

  padding: 0.5em 1em 1.2em 1em;

}



.historie-link:hover,

.historie-link:focus {

  background: none;      /* Remove background color on hover */

  box-shadow: none;      /* Remove box shadow on hover */

  text-decoration: none;

}

.historie-link:hover h2,

.historie-link:focus h2 {

  color: #1253a2;        /* You can keep or remove this line if you want the color to stay unchanged */

}



.historie-img {

  width: 100%;

  max-width: 520px;

  height: auto;

  display: block;

  margin: 0 auto 2em auto;

  border-radius: 14px;

  box-shadow: 0 2px 12px rgba(41, 118, 210, 0.10);

  transition: transform 0.2s, box-shadow 0.2s;

}



.historie-link:hover .historie-img,

.historie-link:focus .historie-img {

  transform: scale(1.03);

  box-shadow: 0 6px 32px rgba(41, 118, 210, 0.18);

}



@media (max-width: 700px) {

  .historie-enhanced {

    padding: 1em 0.5em 1em 0.5em;

  }

  .historie-img {

    max-width: 98vw;

  }

}



.historie-paragraphs p {

  margin-bottom: 1.2em;

  text-align: center;

  text-indent: 0;

  color: #222;

  background: none;           /* Remove background color */

  border-radius: 0;           /* Remove border radius */

  padding: 0;                 /* Remove padding */

  box-shadow: none;           /* Remove box shadow */

  transition: none;

  display: inline-block;

  max-width: 700px;

  font-size: 1.08em;

  line-height: 1.8;

}



.historie-paragraphs p strong {

  color: #1976d2;

}



.historie-img {

  width: 100%;

  max-width: 520px;

  height: auto;

  display: block;

  margin: 0 auto 2em auto;

  border-radius: 14px;

  box-shadow: 0 2px 12px rgba(41, 118, 210, 0.10);

  transition: transform 0.2s, box-shadow 0.2s;

}



@media (max-width: 700px) {

  .historie-paragraphs p {

    padding: 0.7em 0.5em;

    font-size: 1em;

    max-width: 98vw;

  }

  .historie-img {

    max-width: 98vw;

  }

}



/* Add to your web.css */

.btn-zpet {

  display: inline-block;

  margin: 2em auto 0 auto;

  padding: 0.7em 2.2em;

  background: #1976d2;

  color: #fff;

  font-size: 1.08em;

  border: none;

  border-radius: 8px;

  text-decoration: none;

  font-family: 'Open Sans', sans-serif;

  font-weight: 600;

  box-shadow: 0 2px 8px rgba(25,118,210,0.08);

  transition: background 0.18s, box-shadow 0.18s, color 0.18s;

  cursor: pointer;

}



.btn-zpet:hover,

.btn-zpet:focus {

  background: #1253a2;

  color: #e3f0fb;

  box-shadow: 0 4px 18px rgba(25,118,210,0.13);

}



/* Add to your web.css */

.main-footer {

  background: #262a32;

  color: #fff;

  padding: 2em 0 1.2em 0;

  text-align: center;

  margin-top: 3em;

  border-top-left-radius: 18px;

  border-top-right-radius: 18px;

  box-shadow: 0 -2px 16px rgba(41, 118, 210, 0.07);

}



.footer-content {

  max-width: 900px;

  margin: 0 auto;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 0.7em;

}



.footer-logo img {

  max-width: 70px;

  margin-bottom: 0.5em;

  border-radius: 10px;

  box-shadow: 0 1px 6px rgba(25,118,210,0.08);

}



.footer-info p {

  margin: 0.2em 0;

  font-size: 1em;

  color: #e3f0fb;

}



.footer-info a {

  color: #e3f0fb;

  text-decoration: underline dotted;

  transition: color 0.2s;

}



.footer-info a:hover {

  color: #1976d2;

}



.kontakt-facebook-wrap {

  display: flex;

  justify-content: center;

  align-items: center;

  width: 100%;

  margin-top: 20px;

  margin-bottom: 20px;

}



.kontakt-facebook-iframe {

  display: block;

  border: none;

  border-radius: 12px;

  box-shadow: 0 4px 24px rgba(25,118,210,0.10);

  background: #fff;

  width: 500px;

  height: 700px;

  max-width: 100vw;

  max-height: 80vh;

  margin: 0 auto;

  transition: width 0.3s, height 0.3s;

}



/* Tablet */

@media (max-width: 700px) {

  .kontakt-facebook-iframe {

    width: 340px;

    height: 600px;

  }

}



/* Mobile */

@media (max-width: 400px) {

  .kontakt-facebook-iframe {

    width: 260px;

    height: 500px;

  }

}



/* Make #akce image smaller and centered on screens wider than 770px */

@media (min-width: 770px) {

  #akce .gallery-container {

    display: flex;

    justify-content: center;

    align-items: center;

  }

  #akce .gallery-container img {

    max-width: 350px;

    width: 100%;

    height: auto;

    display: block;

    margin: 0 auto;

    box-shadow: 0 2px 12px rgba(0,0,0,0.08);

    border-radius: 10px;

  }

}