/* ============================================================
   REDESIGN — Navy Trust palette + Cormorant Garamond / Karla
   Loaded AFTER the original stylesheet to override tokens site-wide.
   ============================================================ */

:root {
  --forest-deep: #0f1b3d;
  --forest: #16294f;
  --forest-2: #1e3a5f;
  --moss: #3b6fa0;
  --sage: #8fb3d6;
  --sage-soft: #d5e2ef;
  --cream: #f4f7fb;
  --cream-2: #e8edf3;
  --ink: #0f1b3d;
  --ink-soft: #3a4a63;
  --line: rgba(15, 27, 61, 0.14);
  --shadow-elegant: 0 20px 45px -25px rgba(15, 27, 61, 0.35);
  --shadow-soft: 0 8px 24px -14px rgba(15, 27, 61, 0.25);
  --radius: 14px;
  --radius-lg: 22px;
}

/* ---------- Typography ---------- */
html, body {
  background-color: var(--cream) !important;
  color: var(--ink) !important;
  font-family: 'Karla', 'Segoe UI', system-ui, sans-serif !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  letter-spacing: 0.005em;
}

h1, h2, h3, h4, h5, h6,
.logo, .watermark {
  font-family: 'Cormorant Garamond', 'Georgia', serif !important;
  color: var(--forest-deep) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-top: 1.4em;
  margin-bottom: 0.5em;
}

h1 { font-size: clamp(2.1rem, 4.2vw, 3.2rem) !important; font-weight: 500 !important; }
h2 { font-size: clamp(1.7rem, 2.8vw, 2.25rem) !important; }
h3 { font-size: clamp(1.3rem, 2vw, 1.55rem) !important; }

p, li {
  color: var(--ink-soft);
  font-size: 1.02rem;
}

strong, b { color: var(--forest-deep); font-weight: 700; }

a {
  color: var(--forest-2) !important;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
a:hover {
  color: var(--forest-deep) !important;
  text-decoration: none !important;
  border-bottom-color: var(--moss);
}

/* ---------- Header / Nav ---------- */
header .navbar {
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%) !important;
  border-bottom: 1px solid var(--line);
  padding: 18px 32px !important;
  box-shadow: 0 1px 0 rgba(20,48,31,0.04);
}

.logo {
  color: var(--forest-deep) !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em;
  margin: 0 !important;
}
.logo::before {
  content: "❦ ";
  color: var(--moss);
  margin-right: 4px;
}

.menu ul { gap: 28px !important; }
.menu ul li a {
  color: var(--forest-deep) !important;
  font-family: 'Karla', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 6px 2px;
  border-bottom: 2px solid transparent !important;
  text-shadow: none !important;
}
.menu ul li a:hover,
.menu ul li a.active {
  color: var(--forest-deep) !important;
  border-bottom-color: var(--moss) !important;
  text-shadow: none !important;
}

.hamburger { color: var(--forest-deep) !important; }

/* ---------- Split-screen hero ---------- */
.banner {
  position: relative;
  height: auto !important;
  min-height: 480px;
  background: var(--cream) !important;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  overflow: hidden;
}
.banner::before {
  content: "";
  grid-column: 1;
  background:
    linear-gradient(135deg, rgba(20,48,31,0.35), rgba(20,48,31,0.15)),
    url('img/baner.webp') center/cover no-repeat;
  min-height: 480px;
}
.banner::after {
  content: "Profesjonalna opieka nad grobami w Warszawie od 1998 roku. Sprzątanie, mycie nagrobków, składanie kwiatów i zapalanie zniczy — z szacunkiem i troską.";
  grid-column: 2;
  display: flex;
  align-items: center;
  padding: 56px clamp(28px, 5vw, 72px);
  font-family: 'Karla', sans-serif;
  font-size: 1.08rem;
  color: var(--ink-soft);
  line-height: 1.75;
  background: var(--cream);
  border-left: 1px solid var(--line);
}
.banner .watermark {
  position: absolute;
  top: 48px;
  left: clamp(28px, 4vw, 56px);
  bottom: auto;
  right: auto;
  color: var(--cream) !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(2.2rem, 4vw, 3.4rem) !important;
  font-weight: 500 !important;
  text-shadow: 0 2px 24px rgba(0,0,0,0.35) !important;
  max-width: 46%;
  line-height: 1.05;
}

@media (max-width: 900px) {
  .banner { grid-template-columns: 1fr; min-height: auto; }
  .banner::before { min-height: 300px; }
  .banner::after { border-left: none; border-top: 1px solid var(--line); padding: 36px 24px; }
  .banner .watermark { font-size: 2rem !important; max-width: 80%; }
}

/* ---------- Main content card ---------- */
main {
  background: #ffffff !important;
  max-width: 1100px !important;
  margin: -40px auto 60px !important;
  padding: clamp(28px, 4vw, 64px) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-elegant) !important;
  position: relative;
  z-index: 2;
  border: 1px solid var(--line);
}

section { margin-bottom: 56px !important; }

section h2 {
  position: relative;
  padding-bottom: 14px;
}
section h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 56px; height: 2px;
  background: var(--moss);
  border-radius: 2px;
}

/* ---------- Action buttons row ---------- */
.buttony-wrapper {
  max-width: 1100px;
  margin: 32px auto !important;
  padding: 0 20px;
  gap: 16px !important;
}
.custom-button {
  background: #ffffff !important;
  color: var(--forest-deep) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 20px 24px !important;
  font-family: 'Karla', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.custom-button:hover {
  transform: translateY(-2px);
  border-color: var(--moss) !important;
  background: var(--sage-soft) !important;
  color: var(--forest-deep) !important;
}
.custom-button svg,
.custom-button i,
.custom-button img { color: var(--moss); }

/* Give the first button (phone) forest treatment */
.buttony-wrapper .custom-button:first-child {
  background: var(--forest-deep) !important;
  color: var(--cream) !important;
  border-color: var(--forest-deep) !important;
}
.buttony-wrapper .custom-button:first-child:hover {
  background: var(--forest) !important;
  color: var(--cream) !important;
}

/* ---------- Generic button ---------- */
button, .btn {
  background: var(--forest-deep) !important;
  color: var(--cream) !important;
  border-radius: var(--radius) !important;
  padding: 0.8em 1.6em !important;
  font-family: 'Karla', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  transition: background .2s ease, transform .2s ease;
}
button:hover, .btn:hover {
  background: var(--forest) !important;
  transform: translateY(-1px);
}

/* ---------- Lists ---------- */
ul li::marker { color: var(--moss); }

/* ---------- Gallery figures ---------- */
.gallery figure, figure.fade-in {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--line);
  background: #fff;
}
.gallery figure img, figure.fade-in img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .5s ease;
}
.gallery figure:hover img, figure.fade-in:hover img { transform: scale(1.04); }

figcaption {
  font-family: 'Karla', sans-serif;
  font-size: 0.9rem;
  color: var(--ink-soft);
  padding: 12px 16px;
  background: var(--cream-2);
}

/* ---------- Cookie banner ---------- */
.cookie-banner {
  background: var(--forest-deep) !important;
  color: var(--cream) !important;
  border-radius: var(--radius);
  border: 1px solid var(--forest-2);
  box-shadow: var(--shadow-elegant);
  font-family: 'Karla', sans-serif;
}
.cookie-banner button.accept {
  background: var(--sage) !important;
  color: var(--forest-deep) !important;
  border-radius: 8px !important;
}
.cookie-banner button.decline {
  background: transparent !important;
  color: var(--cream) !important;
  border: 1px solid var(--sage) !important;
  border-radius: 8px !important;
}

/* ---------- Footer ---------- */
footer {
  background: var(--forest-deep) !important;
  color: var(--sage-soft) !important;
  padding: 40px 20px !important;
  margin-top: 60px !important;
  font-family: 'Karla', sans-serif;
  border-top: 4px solid var(--moss);
}
footer a { color: var(--sage-soft) !important; }
footer a:hover { color: #fff !important; border-bottom-color: var(--sage); }

/* ---------- Tables (cennik) ---------- */
table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  font-family: 'Karla', sans-serif;
}
th {
  background: var(--forest-deep);
  color: var(--cream);
  font-weight: 600;
  text-align: left;
  padding: 14px 18px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  letter-spacing: 0.01em;
}
td {
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
}
tr:nth-child(even) td { background: var(--cream); }

/* ---------- Forms ---------- */
input, textarea, select {
  font-family: 'Karla', sans-serif !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  background: #fff !important;
  color: var(--ink) !important;
  transition: border-color .18s ease, box-shadow .18s ease;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--moss) !important;
  box-shadow: 0 0 0 3px rgba(90,138,92,0.18) !important;
}

label { font-weight: 600; color: var(--forest-deep); font-family: 'Karla', sans-serif; }

/* ---------- Mobile refinements ---------- */
@media (max-width: 768px) {
  header .navbar { padding: 14px 20px !important; }
  .menu { background: var(--cream) !important; border-top: 1px solid var(--line); }
  .menu ul li { border-bottom: 1px solid var(--line) !important; }
  .menu ul li a { color: var(--forest-deep) !important; }
  main { margin: 20px 12px 40px !important; padding: 24px !important; border-radius: var(--radius) !important; }
}

/* ============================================================
   BENTO GRID LAYOUT — sections become tiles of varying sizes
   ============================================================ */

main {
  max-width: 1240px !important;
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 20px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 24px clamp(12px, 2vw, 28px) !important;
}

main > section {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 2.4vw, 36px);
  box-shadow: var(--shadow-soft);
  margin-bottom: 0 !important;
  grid-column: span 6;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
main > section:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elegant);
}

/* First section: big hero tile spanning full width */
main > section:nth-of-type(1) {
  grid-column: span 6;
  background: linear-gradient(135deg, var(--forest-deep), var(--forest-2)) !important;
  color: var(--cream) !important;
  border: none;
  padding: clamp(32px, 4vw, 56px);
}
main > section:nth-of-type(1) h2,
main > section:nth-of-type(1) h3 { color: var(--cream) !important; }
main > section:nth-of-type(1) p,
main > section:nth-of-type(1) li { color: var(--sage-soft) !important; }
main > section:nth-of-type(1) h2::after { background: var(--sage) !important; }
main > section:nth-of-type(1) a { color: #fff !important; border-bottom-color: var(--sage); }

/* 2nd & 3rd: half-width tiles side by side */
main > section:nth-of-type(2),
main > section:nth-of-type(3) { grid-column: span 3; }

/* 4th: accented tile spanning 4, then 5th spans 2 */
main > section:nth-of-type(4) {
  grid-column: span 4;
  background: var(--cream-2);
  border-color: transparent;
}
main > section:nth-of-type(5) {
  grid-column: span 2;
  background: var(--forest-deep);
  color: var(--cream);
  border: none;
}
main > section:nth-of-type(5) h2,
main > section:nth-of-type(5) h3 { color: var(--cream) !important; }
main > section:nth-of-type(5) p,
main > section:nth-of-type(5) li { color: var(--sage-soft) !important; }
main > section:nth-of-type(5) h2::after { background: var(--sage) !important; }

/* Gallery — full width, dense grid */
main > section.gallery {
  grid-column: span 6 !important;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
main > section.gallery .gallery,
section.gallery {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
}
section.gallery figure { margin: 0 !important; }
section.gallery figure:nth-child(4n+1) { grid-column: span 2; grid-row: span 2; }

/* Any remaining sections: full width */
main > section:nth-of-type(n+6) { grid-column: span 6; }

/* Buttony wrapper as its own bento row above main */
.buttony-wrapper {
  max-width: 1240px !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  padding: 0 clamp(12px, 2vw, 28px) !important;
}
.buttony-wrapper .custom-button {
  margin: 0 !important;
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Mobile: collapse bento into single column */
@media (max-width: 900px) {
  main { grid-template-columns: 1fr !important; gap: 14px !important; }
  main > section,
  main > section:nth-of-type(1),
  main > section:nth-of-type(2),
  main > section:nth-of-type(3),
  main > section:nth-of-type(4),
  main > section:nth-of-type(5),
  main > section.gallery { grid-column: span 1 !important; }
  section.gallery { grid-template-columns: repeat(2, 1fr) !important; }
  section.gallery figure:nth-child(4n+1) { grid-column: span 2; grid-row: auto; }
  .buttony-wrapper { grid-template-columns: repeat(2, 1fr) !important; }
}