/* style.css - prosta, responsywna szata graficzna */
:root{
    --bg:#000000;
    --accent:#a01313; /* czerwony akcent */
    --muted:#b33a3a;
    --text:#ddd;
    --max-width:1200px;
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family: 'Montserrat', sans-serif;
    background:var(--bg);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }
  .about-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9rem;
  margin: 4rem auto;
  flex-wrap: wrap;
}

.about-preview .about-left,
.about-preview .about-right {
  flex: 1 1 45%;
}

.about-preview .about-right img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

/* 🔁 Naprzemienne ułożenie sekcji */
.about-preview:nth-child(even) {
  flex-direction: row-reverse;
}

/* 📱 Responsywność na telefonach */
@media (max-width: 768px) {
  .about-preview {
    flex-direction: column;
    text-align: center;
  }
  .about-preview:nth-child(even) {
    flex-direction: column;
  }
  .about-preview .about-left,
  .about-preview .about-right {
    flex: 1 1 100%;
  }
}

  /* container */
  .container{max-width:var(--max-width);margin:0 auto;padding:30px;}
  
  /* header */
  .site-header{background:#000;padding:18px 0;border-bottom:1px solid rgba(255,255,255,0.02)}
  .header-inner{display:flex;align-items:center;justify-content:space-between;}
  .logo{color:var(--accent);text-decoration:none;text-align:center}
  .logo-top{font-family:'Playfair Display', serif;font-weight:900;font-size:28px;letter-spacing:2px}
  .logo-sub{font-size:12px;margin-top:2px;color:var(--muted)}
  .main-nav a{color:var(--muted);text-decoration:none;margin:0 18px;font-weight:500}
  .main-nav a:hover{color:var(--accent)}
  .nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:6px}
  .nav-toggle span{display:block;width:26px;height:2px;background:var(--text);margin:5px 0;transition:all .2s}
  
  /* HERO */
  .hero{height:60vh;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;position:relative;z-index: 1}
  .hero-overlay{width:100%;height:100%;background:rgba(0,0,0,0.45);display:flex;align-items:center;justify-content:center}
  .hero-title{font-family:'Playfair Display', serif;color:var(--accent);font-size:8vw;margin:0;padding:20px;text-align:center;line-height:1}
  
  /* about preview */
  .about-preview{display:flex;align-items:center;gap:30px;padding:60px 0}
  .about-left{flex:1}
  .about-left h2{font-size:48px;color:var(--accent);margin:0 0 16px}
  .about-left h3{font-size:30px;color:var(--accent);margin:0 0 16px}
  .about-left p{font-size:19px;color:var(--muted);line-height:1.6}
  .about-right{flex:1;text-align:right}
  .about-right img{max-width:80%;border-radius:4px}
  
  
  /* services */
  .services-intro{text-align:center;padding:40px 0}
  .services-intro h2{font-size:48px;color:var(--accent);margin:0 0 16px}
  .services-intro p{font-size:30px;color:var(--muted);line-height:1.6}
  .services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-bottom:60px}
  .service-card{background:transparent;border:1px solid rgba(255,255,255,0.03);padding:12px;border-radius:6px;cursor:pointer;overflow:hidden}
  .service-thumb img{width:100%;height:300px;object-fit:cover;display:block}
  .service-title{font-size:20px;color:var(--accent);margin:10px 0}
  .service-desc{max-height:0;overflow:hidden;transition:max-height .35s ease, padding .25s ease;padding:0 6px}
  .service-desc.open{max-height:none;padding:12px 6px}
  
  /* about page */
  .about-page .about-full{display:flex;gap:30px;align-items:flex-start;padding:40px 0}
  .about-image img{width:100%;max-width:480px;border-radius:6px}
  .about-content{flex:1}
  .about-content h2{font-size:48px;color:var(--accent);margin:0 0 16px}
  .about-content p{font-size:20px;color:var(--muted);line-height:1.6}
  .map-frame iframe{border:2px solid rgba(255,255,255,0.03);border-radius:6px}
.map {
  position: relative;
  z-index: 0;
  margin-bottom: 100px; /* oddech nad stopką */
}

.map-frame {
  position: relative;
  overflow: hidden;
}


  /* contact */
  .contact-page .contact-info{display:flex;gap:30px;align-items:center;padding:40px 0}
  .contact-left{flex:1}
  .contact-right img{max-width:400px;border-radius:6px}
  
  /* footer */
  .site-footer{background:var(--accent);color:#111;padding:26px 0;margin-top:60px}
  .footer-inner{display:flex;justify-content:space-between;align-items:center;gap:20px}
  .footer-left h3{margin:0;font-family:'Playfair Display', serif}
  .footer-center p{margin:4px 0}
  .socials .social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;         
    height: 48px;
    margin-left: 10px;
    border-radius: 50%;
    background: #a01313; 
    color: #000 !important;
    text-decoration: none;
    font-size: 26px;     
    transition: all 0.3s ease;
    border: 2px solid #000; 
  }

  .sociallink {
    color: var(--text);        /* jasnoszary tekst z motywu */
    text-decoration: none;     /* brak podkreślenia */
    font-weight: 900;        
    transition: color 0.3s ease;
    font-size: 23px; 
  }
  
  .sociallink:hover {
    color: var(--accent);      /* czerwony po najechaniu */
    text-decoration: none;     /* dalej bez podkreślenia */
  }
  
  
  
  /* small */
  .btn-outline{display:inline-block;margin-top:18px;padding:12px 22px;border:2px solid var(--muted);color:var(--muted);text-decoration:none;border-radius:10px}
  .btn-outline:hover{border-color:var(--accent);color:var(--accent)}
  
  /* footer bottom */
  .footer-bottom{text-align:center;padding:12px 0;background:rgba(0,0,0,0.1);color:#000;font-size:13px}
  
  /* responsive */
  @media (max-width:900px){
    .about-preview{flex-direction:column;text-align:center}
    .about-right img{max-width:100%}
    .services-grid{grid-template-columns:repeat(2,1fr)}
    .hero-title{font-size:12vw}
    .header-inner{padding:0 12px}
  }
  
  /* mobile */
  @media (max-width:600px){
    .container{padding:18px}
    .header-inner{align-items:center}
    .main-nav{position:fixed;top:0;right:0;height:100vh;background:rgba(0,0,0,0.95);width:240px;padding-top:80px;transform:translateX(100%);transition:transform .25s}
    .main-nav.open{transform:translateX(0); z-index: 1000;}
    .main-nav a{display:block;padding:14px 22px;border-bottom:1px solid rgba(255,255,255,0.02)}
    .nav-toggle{display:block}
    .about-left h2{font-size:36px}
    .services-grid{grid-template-columns:1fr}
  }
  
  @media (max-width: 600px) {
  /* Zmień kolejność i układ na kolumnowy */
  .contact-page .contact-info {
    display: flex;
    flex-direction: column; /* kolumna zamiast wiersza */
    align-items: center;
    text-align: center;
    gap: 20px; /* mniejszy odstęp między elementami */
  }

  /* Tekst i obrazek zajmują 100% szerokości */
  .contact-left,
  .contact-right {
    flex: 1 1 100%;
  }

  /* Obrazek mniejszy w mobilnej wersji */
  .contact-right img {
    width: 70%; /* zmniejszamy obrazek do 80% szerokości kontenera */
    height: auto;
    max-width: 250px; /* maksymalny rozmiar, żeby nie był za duży */
  }
}