/* ======================================================
   eGRAL - Przyczepy Kempingowe | Warmia i Mazury
   Stylesheet v1.0
   ====================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --black:   #000000;
  --white:   #ffffff;
  --dark:    #1a1a1a;
  --gray:    #555555;
  --light:   #f2f2f2;
  --border:  #d0d0d0;
  --font-head: "Oswald", sans-serif;
  --font-body: "Montserrat", sans-serif;
  --nav-h: 72px;
  --section-pad: 80px 0;
  --radius: 4px;
  --shadow: 0 4px 24px rgba(0,0,0,.12);
}

html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--font-body); color: var(--dark); background: var(--white); line-height: 1.7; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

h1,h2,h3,h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.2; letter-spacing: .5px; }
h1 { font-size: clamp(2rem,5vw,3.5rem); }
h2 { font-size: clamp(1.6rem,3vw,2.4rem); }
h3 { font-size: 1.25rem; }

.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.section-title { text-align: center; margin-bottom: 48px; position: relative; }
.section-title::after { content:""; display:block; width:56px; height:3px; background:var(--black); margin:16px auto 0; }

.btn { display:inline-block; padding:14px 36px; font-family:var(--font-head); font-size:1rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; border:2px solid var(--black); background:var(--black); color:var(--white); cursor:pointer; border-radius:var(--radius); transition:background .25s,color .25s; }
.btn:hover { background:var(--white); color:var(--black); }
.btn-outline { background:transparent; color:var(--black); }
.btn-outline:hover { background:var(--black); color:var(--white); }
.btn-white { background:var(--white); color:var(--black); border-color:var(--white); }
.btn-white:hover { background:transparent; color:var(--white); border-color:var(--white); }

/* NAV */
#navbar { position:fixed; top:0; left:0; right:0; height:var(--nav-h); background:var(--white); border-bottom:1px solid var(--border); z-index:1000; display:flex; align-items:center; transition:box-shadow .3s; }
#navbar.scrolled { box-shadow:var(--shadow); }
.nav-inner { max-width:1160px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; width:100%; }
.nav-logo img { height:48px; width:auto; }
.nav-links { display:flex; gap:8px; align-items:center; }
.nav-links a { font-family:var(--font-head); font-size:.85rem; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; padding:8px 14px; border-radius:var(--radius); transition:background .2s,color .2s; }
.nav-links a:hover,.nav-links a.active { background:var(--black); color:var(--white); }
.nav-toggle { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; background:none; border:none; }
.nav-toggle span { display:block; width:26px; height:2px; background:var(--black); transition:transform .3s,opacity .3s; }
.nav-toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity:0; }
.nav-toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* HERO */
#hero { margin-top:var(--nav-h); position:relative; min-height:calc(100vh - var(--nav-h)); display:flex; align-items:center; overflow:hidden; background:var(--dark); }
.hero-bg { position:absolute; inset:0; background-image:url("../images/photo-01.jpg"); background-size:cover; background-position:center; filter:brightness(.42); transform:scale(1.04); transition:transform 8s ease; }
.hero-bg::after {
    content: "";
    position: absolute;

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

    width: min(65vw, 850px);
    aspect-ratio: 1;

    background: linear-gradient(
        135deg,
        rgba(20, 22, 24, 0.75),
        rgba(45, 48, 52, 0.35)
    );

    -webkit-mask:
        url("https://egral.com.pl/wp-content/themes/egral-kalendarz/assets/images/logo-egral-back2.png")
        center / contain no-repeat;

    mask:
        url("https://egral.com.pl/wp-content/themes/egral-kalendarz/assets/images/logo-egral-back2.png")
        center / contain no-repeat;

    opacity: 0.75;
    pointer-events: none;
}

#hero.loaded .hero-bg { transform:scale(1); }
.hero-content { position:relative; z-index:2; color:var(--white); max-width:740px; padding:60px 24px; margin:0 auto; text-align:center; }
.hero-eyebrow { font-family:var(--font-head); font-size:.85rem; letter-spacing:4px; text-transform:uppercase; opacity:.8; margin-bottom:16px; }
.hero-content h1 { margin-bottom:24px; }
.hero-content p { font-size:1.15rem; opacity:.85; margin-bottom:40px; max-width:560px; margin-left:auto; margin-right:auto; }
.hero-cta { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.hero-scroll { position:absolute; bottom:32px; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; color:rgba(255,255,255,.5); font-size:.7rem; letter-spacing:2px; text-transform:uppercase; animation:bounce 2s infinite; }
.hero-scroll svg { width:20px; height:20px; }
@keyframes bounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(8px)} }

/* STATS BAR */
#stats { background:var(--black); color:var(--white); padding:40px 0; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.stat-item { text-align:center; padding:24px 16px; border-right:1px solid rgba(255,255,255,.12); }
.stat-item:last-child { border-right:none; }
.stat-number { font-family:var(--font-head); font-size:2.4rem; font-weight:700; display:block; }
.stat-label { font-size:.8rem; letter-spacing:1.5px; text-transform:uppercase; opacity:.65; margin-top:4px; }

/* HOME */
#home { padding:var(--section-pad); }
.home-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.home-image-wrap { position:relative; }
.home-image-wrap img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow); }
.home-badge { position:absolute; bottom:-20px; right:-20px; background:var(--black); color:var(--white); padding:20px 24px; text-align:center; border-radius:var(--radius); }
.home-badge strong { display:block; font-family:var(--font-head); font-size:1.6rem; }
.home-badge span { font-size:.75rem; letter-spacing:1px; text-transform:uppercase; opacity:.7; }
.home-text .eyebrow { font-family:var(--font-head); font-size:.8rem; letter-spacing:3px; text-transform:uppercase; color:var(--gray); margin-bottom:12px; }
.home-text h2 { margin-bottom:20px; }
.home-text p { color:var(--gray); margin-bottom:16px; }
.home-features { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:28px 0 32px; }
.feature-item { display:flex; align-items:flex-start; gap:10px; font-size:.9rem; }
.feature-icon { width:20px; height:20px; flex-shrink:0; margin-top:2px; }

/* CALENDAR */
#rezerwacja { padding:var(--section-pad); background:var(--light); }
.rezerwacja-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.calendar-wrap { background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.cal-header { background:var(--black); color:var(--white); display:flex; align-items:center; justify-content:space-between; padding:16px 20px; }
.cal-header h3 { font-size:1rem; letter-spacing:1px; }
.cal-nav-btn { background:none; border:none; color:var(--white); cursor:pointer; font-size:1.2rem; padding:4px 8px; border-radius:var(--radius); transition:background .2s; }
.cal-nav-btn:hover { background:rgba(255,255,255,.15); }
.cal-body { padding:20px; }
.cal-weekdays { display:grid; grid-template-columns:repeat(7,1fr); text-align:center; margin-bottom:8px; }
.cal-weekdays span { font-family:var(--font-head); font-size:.7rem; letter-spacing:1px; color:var(--gray); text-transform:uppercase; padding:4px 0; }
.cal-days { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-day { aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:.88rem; border-radius:var(--radius); cursor:default; font-weight:500; }
.cal-day.empty { background:none; }
.cal-day.available { background:var(--light); color:var(--dark); }
.cal-day.reserved { background:var(--black); color:var(--white); font-weight:700; }
.cal-day.today { outline:2px solid var(--black); outline-offset:-2px; }
.cal-day.past { opacity:.3; }
.cal-legend { display:flex; gap:20px; padding:14px 20px; border-top:1px solid var(--border); flex-wrap:wrap; }
.legend-item { display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--gray); }
.legend-dot { width:14px; height:14px; border-radius:2px; flex-shrink:0; }
.legend-dot.available { background:var(--light); border:1px solid var(--border); }
.legend-dot.reserved { background:var(--black); }

/* FORM */
.form-wrap { background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:36px; }
.form-wrap h3 { margin-bottom:24px; font-size:1.3rem; border-bottom:2px solid var(--black); padding-bottom:12px; }
.form-group { margin-bottom:18px; }
.form-group label { display:block; font-size:.8rem; letter-spacing:1px; text-transform:uppercase; color:var(--gray); margin-bottom:6px; font-weight:600; }
.form-group input,.form-group textarea,.form-group select { width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius); font-family:var(--font-body); font-size:.95rem; color:var(--dark); background:var(--white); transition:border-color .2s; outline:none; }
.form-group input:focus,.form-group textarea:focus,.form-group select:focus { border-color:var(--black); }
.form-group textarea { resize:vertical; min-height:90px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-note { font-size:.78rem; color:var(--gray); margin-top:12px; }
.form-success { display:none; text-align:center; padding:32px; color:var(--dark); }

/* GALLERY */
#galeria { padding:var(--section-pad); }
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.gallery-item { position:relative; overflow:hidden; border-radius:var(--radius); cursor:pointer; aspect-ratio:4/3; background:var(--light); }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gallery-item:hover img { transform:scale(1.06); }
.gallery-overlay { position:absolute; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s; }
.gallery-item:hover .gallery-overlay { opacity:1; }
.gallery-overlay svg { color:var(--white); width:40px; height:40px; }
.gallery-item.span-2 { grid-column:span 2; aspect-ratio:16/7; }

.lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,.95); z-index:2000; align-items:center; justify-content:center; flex-direction:column; }
.lightbox.active { display:flex; }
.lightbox-img { max-width:90vw; max-height:80vh; object-fit:contain; border-radius:var(--radius); }
.lightbox-close { position:absolute; top:24px; right:32px; color:var(--white); font-size:2rem; cursor:pointer; background:none; border:none; line-height:1; }
.lightbox-prev,.lightbox-next { position:absolute; top:50%; transform:translateY(-50%); color:var(--white); font-size:2.5rem; cursor:pointer; background:rgba(255,255,255,.08); border:none; padding:12px 18px; border-radius:var(--radius); transition:background .2s; }
.lightbox-prev:hover,.lightbox-next:hover { background:rgba(255,255,255,.2); }
.lightbox-prev { left:24px; }
.lightbox-next { right:24px; }
.lightbox-counter { color:rgba(255,255,255,.5); font-size:.85rem; margin-top:14px; letter-spacing:2px; }

.trailer-desc { margin-top:64px; background:var(--light); border-radius:var(--radius); padding:48px; }
.trailer-desc-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.specs-table { width:100%; border-collapse:collapse; }
.specs-table tr { border-bottom:1px solid var(--border); }
.specs-table tr:last-child { border-bottom:none; }
.specs-table td { padding:10px 8px; font-size:.9rem; }
.specs-table td:first-child { color:var(--gray); width:52%; }
.specs-table td:last-child { font-weight:600; }
.equipment-list { columns:2; column-gap:24px; }
.equipment-list li { padding:5px 0; font-size:.9rem; break-inside:avoid; display:flex; align-items:flex-start; gap:8px; }
.equipment-list li::before { content:"✓"; font-weight:700; flex-shrink:0; margin-top:1px; }

/* PRICING */
#cennik { padding:var(--section-pad); background:var(--black); color:var(--white); }
#cennik .section-title::after { background:var(--white); }
.pricing-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; max-width:800px; margin:0 auto 48px; }
.price-card { border:1px solid rgba(255,255,255,.2); border-radius:var(--radius); padding:40px 32px; text-align:center; transition:border-color .3s,transform .3s; }
.price-card:hover { border-color:var(--white); transform:translateY(-4px); }
.price-season { font-family:var(--font-head); font-size:.8rem; letter-spacing:3px; text-transform:uppercase; opacity:.6; margin-bottom:12px; }
.price-months { font-size:.85rem; opacity:.6; margin-bottom:24px; }
.price-amount { font-family:var(--font-head); font-size:3.2rem; font-weight:700; line-height:1; }
.price-amount sup { font-size:1.2rem; vertical-align:top; margin-top:.3em; }
.price-amount sub { font-size:.9rem; opacity:.6; }
hr.price-divider { border-color:rgba(255,255,255,.15); margin:24px 0; }
.pricing-extras { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:800px; margin:0 auto; text-align:center; }
.extra-item { background:rgba(255,255,255,.06); border-radius:var(--radius); padding:24px 16px; }
.extra-label { font-size:.78rem; letter-spacing:1.5px; text-transform:uppercase; opacity:.55; margin-bottom:8px; }
.extra-value { font-family:var(--font-head); font-size:1.2rem; font-weight:700; }

/* CONTACT */
#kontakt { padding:var(--section-pad); }
.kontakt-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.contact-info h2 { margin-bottom:24px; }
.contact-item { display:flex; align-items:flex-start; gap:16px; margin-bottom:28px; }
.contact-icon { width:44px; height:44px; background:var(--black); color:var(--white); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-icon svg { width:20px; height:20px; }
.contact-label { font-size:.75rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--gray); margin-bottom:4px; }
.contact-value { font-size:1rem; font-weight:600; }
.contact-form-wrap { background:var(--light); border-radius:var(--radius); padding:40px; }
.contact-form-wrap h3 { margin-bottom:24px; }

/* DOCUMENTS */
#dokumenty { padding:var(--section-pad); background:var(--light); }
.docs-placeholder { text-align:center; max-width:500px; margin:0 auto; padding:48px 0; color:var(--gray); }
.docs-placeholder svg { width:64px; height:64px; margin:0 auto 24px; opacity:.4; }

/* EU FUNDS */
#eu-funds { padding:48px 0; background:var(--white); border-top:1px solid var(--border); }
.eu-inner { display:grid; grid-template-columns:auto 1fr; gap:40px; align-items:center; }
.eu-logos img { height:80px; width:auto; }
.eu-text h4 { font-size:1rem; margin-bottom:12px; }
.eu-text p { font-size:.85rem; color:var(--gray); line-height:1.6; margin-bottom:6px; }
.eu-highlight { font-weight:700; color:var(--dark); font-size:.9rem; }

/* FOOTER */
footer { background:var(--dark); color:rgba(255,255,255,.5); text-align:center; padding:28px 24px; font-size:.8rem; }
footer strong { color:var(--white); }

/* BACK TO TOP */
#back-top { position:fixed; bottom:28px; right:28px; width:44px; height:44px; background:var(--black); color:var(--white); border-radius:var(--radius); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s; z-index:500; }
#back-top.visible { opacity:1; pointer-events:auto; }
#back-top svg { width:20px; height:20px; }

/* RESPONSIVE */
@media (max-width:900px) {
  .home-grid,.rezerwacja-grid,.kontakt-grid,.trailer-desc-grid { grid-template-columns:1fr; gap:32px; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .stat-item:nth-child(2) { border-right:none; }
  .pricing-grid { grid-template-columns:1fr; max-width:360px; }
  .pricing-extras { grid-template-columns:1fr; }
  .gallery-grid { grid-template-columns:repeat(2,1fr); }
  .gallery-item.span-2 { grid-column:span 2; }
  .eu-inner { grid-template-columns:1fr; gap:24px; }
  .home-badge { bottom:-12px; right:-12px; }
}
@media (max-width:640px) {
  :root { --section-pad:56px 0; }
  .nav-links { display:none; position:fixed; top:var(--nav-h); left:0; right:0; background:var(--white); border-bottom:1px solid var(--border); flex-direction:column; padding:16px 0; gap:0; }
  .nav-links.open { display:flex; }
  .nav-links a { display:block; width:100%; text-align:center; padding:14px 24px; border-radius:0; }
  .nav-toggle { display:flex; }
  .gallery-grid { grid-template-columns:1fr; }
  .gallery-item.span-2 { grid-column:span 1; aspect-ratio:4/3; }
  .form-row { grid-template-columns:1fr; }
  .equipment-list { columns:1; }
  .trailer-desc { padding:32px 20px; }
  .form-wrap { padding:24px; }
  .contact-form-wrap { padding:28px 20px; }
  .hero-cta { flex-direction:column; align-items:center; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
}