/* css/style.css */

/* ========================
   1. Zmienne globalne
   ======================== */
:root {
  --clr-bg:      #d3b89d;  /* główne tło: piaskowy beż */
  --clr-card:    #e8d7c9;  /* jaśniejszy beż dla sekcji */
  --clr-text:    #4a3827;  /* ciemny brąz dla tekstu */
  --clr-primary: #b89d8b;  /* przyciemniony beż dla przycisków */
  --clr-accent:  #8b6e53;  /* subtelny brąz jako akcent */
  --fs-base:     1rem;
  --transition:  0.3s ease;
}

/* ========================
   2. Reset i podstawy
   ======================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins', sans-serif;
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--clr-text);
  background: var(--clr-bg);
  padding: 1rem;
}

/* ========================
   3. Sekcja HERO
   ======================== */
header {
  background: none;
  height: auto;
  margin-bottom: 2rem;
  padding: 0;
}

.hero-banner {
  display: block;
  width: 90%;         /* zajmuje 90% szerokości ekranu */
  max-width: 600px;   /* nigdy nie będzie szerszy niż 600px */
  height: auto;
  margin: 0 auto;     /* wyśrodkowanie */
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  object-fit: cover;
}

/* 2. Breakpoint dla dużych ekranów */
@media (min-width: 992px) {
  .hero-banner {
    max-width: 800px;
  }
}

/* ========================
   4. Sekcje — O nas, Usługi, Galeria, Kontakt
   ======================== */
section {
  background: var(--clr-card);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  margin-bottom: 2.5rem;
  padding: 3rem 2rem;
}

section h2 {
  font-size: 1.75rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

section p {
  margin-bottom: 1rem;
}

/* Usługi */
.services {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.service-box {
  background: var(--clr-bg);
  padding: 1.5rem;
  border-radius: 8px;
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition);
}

.service-box:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transform: translateY(-4px);
}

.service-box:focus-within {
  outline: 2px dashed var(--clr-accent);
}

/* Galeria */
.gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Formularz kontaktowy */
form {
  display: grid;
  gap: 1.5rem;
  max-width: 500px;
  margin: 0 auto;
}

input,
textarea {
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-family: inherit;
  font-size: inherit;
  transition: border-color var(--transition);
}

input:focus,
textarea:focus {
  outline: none;
  border-color: var(--clr-accent);
}

button {
  background: var(--clr-primary);
  color: var(--clr-card);
  border: none;
  padding: 1rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}

button:hover {
  background: var(--clr-accent);
  transform: translateY(-2px);
}

button:focus {
  outline: 2px dashed var(--clr-accent);
  outline-offset: 4px;
}

/* ========================
   5. Back to Top
   ======================== */
#backToTop {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--clr-primary);
  color: var(--clr-card);
  border: none;
  padding: 0.75rem 1rem;
  border-radius: 50%;
  font-size: 1.25rem;
  display: none;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
  z-index: 100;
}

#backToTop:hover {
  background: var(--clr-accent);
  transform: translateY(-2px);
}

#backToTop:focus {
  outline: 2px dashed var(--clr-card);
  outline-offset: 4px;
}

/* ========================
   6. Stopka
   ======================== */
footer {
  text-align: center;
  padding: 2rem 1rem;
  background: var(--clr-card);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  font-size: 0.9rem;
}

/* ========================
   7. Breakpoints
   ======================== */
@media (max-width: 600px) {
  header p {
    font-size: 1rem;
  }
}

/* ========================
   8. Mobile — wyśrodkowanie logo/banneru
   ======================== */
@media (max-width: 600px) {
  .hero-banner {
    margin: 0 auto;
    position: static;
    left: auto;
    right: auto;
  }
  
/* Kontener utrzymujący proporcje 16:9 */
/* domyślnie (telefon/tablet) – 16:9 proporcje */
.map-responsive {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  overflow: hidden;
  margin: 2rem 0;
}

/* iframe wypełnia kontener */
.map-responsive iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* powyżej 768px – ustalona wysokość 400px */
@media (min-width: 768px) {
  .map-responsive {
    padding-bottom: 0;
    height: 400px;
  }
}

/* powyżej 1200px – jeszcze większa, 600px */
@media (min-width: 1200px) {
  .map-responsive {
    height: 600px;
  }
}

}