:root {
  /* colors */
  --united-nations-blue: hsl(214, 56%, 58%);
  --bright-navy-blue: hsl(214, 57%, 51%);
  --spanish-gray: hsl(0, 0%, 60%);
  --black-coral: hsl(225, 8%, 42%);
  --oxford-blue: hsl(208, 97%, 12%);
  --yale-blue: hsl(214, 72%, 33%);
  --blue-ncs: hsl(197, 100%, 36%);
  --gunmetal: hsl(206, 34%, 20%);
  --gainsboro: hsl(0, 0%, 88%);
  --cultured: hsl(0, 0%, 98%);
  --white: hsl(0, 0%, 100%);
  --black: hsl(0, 0%, 0%);
  --onyx: hsl(0, 0%, 25%);
  --jet: hsl(0, 0%, 20%);

  /* typography */
  --ff-poppins: "Poppins", sans-serif;
  --ff-montserrat: "Montserrat", sans-serif;

  --fs-1: calc(20px + 3.5vw);
  --fs-2: calc(18px + 1.6vw);
  --fs-3: calc(16px + 0.45vw);
  --fs-4: 15px;
  --fs-5: 14px;
  --fs-6: 13px;
  --fs-7: 12px;
  --fs-8: 11px;

  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;

  --transition: 0.25s ease-in-out;

  --section-padding: 60px;

  --radius-15: 15px;
  --radius-25: 25px;
}

/* RESET */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
li { list-style:none; }
a { text-decoration:none; }
a, img, span, input, label, button, ion-icon { display:block; }
input, button { background:none; border:none; font:inherit; }
button { cursor:pointer; }
input { width:100%; }
ion-icon { pointer-events:none; }
html { font-family:var(--ff-poppins); scroll-behavior:smooth; }
body { background:var(--white); }

/* REUSED */
.container { padding-inline:15px; }
.btn {
  color:var(--white);
  text-transform:uppercase;
  font-size:var(--fs-5);
  border-radius:100px;
  padding:var(--padding, 8px 18px);
  border:var(--border-width, 2px) solid transparent;
  transition:var(--transition);
}
.btn-primary { background:var(--bright-navy-blue); border-color:var(--bright-navy-blue); }
.btn-primary:is(:hover,:focus) { background:var(--yale-blue); border-color:var(--yale-blue); }
.btn-secondary { border-color:var(--white); }
.btn-secondary:is(:hover,:focus) { background:hsla(0,0%,100%,0.1); }

.h1,.h2,.h3 { font-weight:var(--fw-800); font-family:var(--ff-montserrat); text-transform:uppercase; }
.h1 { color:var(--white); font-size:var(--fs-1); }
.h2,.h3 { color:var(--gunmetal); }
.h2 { font-size:var(--fs-2); }
.h3 { font-size:var(--fs-3); font-weight:var(--fw-700); }

.section-subtitle {
  color:var(--bright-navy-blue);
  font-size:var(--fs-5);
  text-transform:uppercase;
  font-family:var(--ff-montserrat);
  margin-bottom:8px;
}
.section-title { margin-bottom:15px; }
.section-text { color:var(--black-coral); margin-bottom:30px; }
.card-text { color:var(--black-coral); font-size:var(--fs-5); }

/* HEADER */
.header {
  position:absolute; top:0; left:0; width:100%;
  padding-top:61px; z-index:4;
}
.header-top {
  position:absolute; top:0; left:0; width:100%;
  transition:var(--transition);
  border-bottom:1px solid hsla(0,0%,100%,0.1);
  padding-block:15px; z-index:1;
}
.header.active .header-top { position:static; background:transparent; } /* fix */

.header-top .container {
  display:grid; grid-template-columns:repeat(3,1fr);
  justify-items:flex-start; align-items:center;
}
.helpline-box .wrapper { display:none; }
.helpline-box .icon-box { background:var(--bright-navy-blue); padding:6px; border-radius:50%; color:var(--white); }
.helpline-box .icon-box ion-icon { --ionicon-stroke-width:40px; }
.header-top .logo { margin-inline:auto; }
.header-top .logo img { max-width:100px; }

.header-btn-group { justify-self:flex-end; display:flex; align-items:center; gap:10px; color:var(--white); }
.search-btn, .nav-open-btn { font-size:30px; color:inherit; }
.search-btn { font-size:20px; }

.header-bottom { border-bottom:1px solid hsla(0,0%,100%,0.1); }
.header-bottom .container {
  display:flex; justify-content:space-between; align-items:center; padding-block:15px;
}
.social-list { display:flex; align-items:center; gap:5px; }
.social-link {
  color:var(--white); padding:8px;
  border:1px solid hsla(0,0%,100%,0.3); border-radius:50%;
  font-size:15px; transition:var(--transition);
}
.social-link:is(:hover,:focus){ background:hsla(0,0%,100%,0.2); }
.header .btn { --padding:4px 20px; --fs-5:14px; line-height:1; } /* fix: stabilny rozmiar */

.header .navbar {
  position:fixed; top:0; right:-300px; width:100%; max-width:300px; height:100%;
  background:var(--white); visibility:hidden; pointer-events:none; transition:.15s ease-in; z-index:3;
}
.navbar.active { right:0; visibility:visible; pointer-events:all; transition:.25s ease-out; }
.navbar-top { display:flex; justify-content:space-between; align-items:center; padding:40px 15px; }
.navbar-top .logo img { width:150px; }
.nav-close-btn { font-size:20px; color:var(--bright-navy-blue); }
.nav-close-btn ion-icon { --ionicon-stroke-width:80px; }
.navbar-list { border-top:1px solid hsla(0,0%,0%,0.1); }
.navbar-list li { border-bottom:1px solid hsla(0,0%,0%,0.1); }
.navbar-link {
  padding:15px 20px; color:var(--jet); font-weight:var(--fw-500);
  font-size:var(--fs-4); transition:var(--transition); text-transform:capitalize;
}
.navbar-link:is(:hover,:focus){ color:var(--bright-navy-blue); }

.overlay {
  position:fixed; inset:0; background:var(--black);
  opacity:0; pointer-events:none; z-index:2; transition:var(--transition);
}
.overlay.active { opacity:.7; pointer-events:all; }

/* HERO */
.hero {
  /* brak domyślnego background-image — ustawiamy inline w HTML */
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  background-color:hsla(0,0%,0%,0.7);
  background-blend-mode:overlay;
  display:grid; place-items:center;
  min-height:600px; text-align:center; padding-top:125px;
}
.hero-title { margin-bottom:20px; }
.hero-text { color:var(--white); font-size:var(--fs-5); margin-bottom:40px; }
.btn-group { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; }

/* TOUR SEARCH */
.tour-search { background:var(--bright-navy-blue); padding-block:var(--section-padding); }
.tour-search-form .input-label { color:var(--white); font-size:var(--fs-4); margin-left:20px; margin-bottom:10px; }
.tour-search-form .input-field { background:var(--white); padding:10px 15px; font-size:var(--fs-5); border-radius:50px; }
.tour-search-form .input-field::placeholder { color:var(--spanish-gray); }
.tour-search-form .input-field::-webkit-datetime-edit { color:var(--spanish-gray); text-transform:uppercase; }
.tour-search-form .input-wrapper { margin-bottom:15px; }
.tour-search .btn { width:100%; --border-width:1px; font-weight:var(--fw-600); margin-top:35px; }

/* POPULAR */
.popular { padding-block:var(--section-padding); }
.popular-list, .popular-list>li:not(:last-child) { margin-bottom:30px; }

.popular-card { position:relative; overflow:hidden; border-radius:var(--radius-25); height:430px; display:block; transition:transform .25s var(--transition), box-shadow .25s var(--transition); }
.popular-card .card-img { height:100%; overflow:hidden; border-radius:var(--radius-25); }
.popular-card .card-img img { width:100%; height:100%; object-fit:cover; transform:scale(1); transform-origin:50% 50%; transition:transform .6s cubic-bezier(.2,.6,.2,1); will-change:transform; }
.popular-card:hover .card-img img, .popular-card:focus-visible .card-img img { transform:scale(1.08); }
.popular-card:hover, .popular-card:focus-visible { transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.12); }

.popular-card .card-content {
  position:absolute; bottom:20px; left:20px; right:20px;
  background:var(--white); border-radius:var(--radius-25); padding:20px;
}
.popular-card .card-rating {
  background:var(--bright-navy-blue); color:var(--white);
  position:absolute; top:0; right:25px; display:flex; align-items:center; gap:1px;
  transform:translateY(-50%); padding:6px 10px; border-radius:20px; font-size:14px;
}
.popular-card .card-subtitle { color:var(--blue-ncs); font-size:var(--fs-6); text-transform:uppercase; margin-bottom:8px; }
.popular-card .card-title { margin-bottom:5px; }
.popular-card :is(.card-subtitle,.card-title)>a { color:inherit; }
.popular .btn { margin-inline:auto; }

/* PACKAGE */
.package { padding-block:var(--section-padding); }
.package-list { margin-bottom:40px; }
.package-list>li:not(:last-child){ margin-bottom:30px; }
.package-card { background:var(--cultured); overflow:hidden; border-radius:15px; }
.package-card .card-banner { height:250px; }
.package-card .card-banner img { width:100%; height:100%; object-fit:cover; }
.package-card .card-content { padding:30px 20px; }
.package-card .card-title { margin-bottom:15px; }
.package-card .card-text { line-height:1.6; margin-bottom:20px; }
.card-meta-list {
  background:var(--white); max-width:max-content; display:flex; flex-wrap:wrap;
  justify-content:center; align-items:center; padding:8px; box-shadow:0 0 5px hsla(0,0%,0%,0.15); border-radius:50px;
}
.card-meta-item { position:relative; }
.card-meta-item:not(:last-child)::after {
  content:""; position:absolute; top:4px; right:-1px; bottom:4px; width:1px; background:hsla(0,0%,0%,0.3);
}
.meta-box { display:flex; justify-content:center; align-items:center; gap:5px; padding-inline:9px; color:var(--black-coral); font-size:var(--fs-8); }
.meta-box>ion-icon { color:var(--bright-navy-blue); font-size:13px; }

.package-card .card-price { background:var(--united-nations-blue); color:var(--white); padding:25px 20px; text-align:center; }
.package-card .card-price .wrapper { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:5px 15px; margin-bottom:10px; }
.package-card .card-price .reviews { font-size:var(--fs-5); }
.package-card .card-rating { display:flex; justify-content:center; align-items:center; gap:1px; font-size:14px; }
.package-card .card-rating ion-icon:last-child { color:hsl(0,0%,80%); }
.package-card .price { font-size:var(--fs-2); font-family:var(--ff-montserrat); font-weight:var(--fw-800); margin-bottom:20px; }
.package-card .price span { font-size:var(--fs-7); font-weight:initial; }
.package .btn { margin-inline:auto; }

/* GALLERY */
.gallery { padding-block:var(--section-padding); }
.gallery-list { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.gallery-image { width:100%; height:100%; border-radius:var(--radius-15); overflow:hidden; }
.gallery-item:nth-child(3){ grid-area:1/2/3/3; }
.gallery-image img { width:100%; height:100%; object-fit:cover; }

/* CTA */
.cta { background:var(--bright-navy-blue); padding-block:var(--section-padding); }
.cta :is(.section-subtitle,.section-title,.section-text){ color:var(--white); }
.cta .section-text { font-size:var(--fs-5); }

/* FOOTER */
.footer-top { background:var(--gunmetal); padding-block:var(--section-padding); color:var(--gainsboro); }
.footer-brand { margin-bottom:30px; }
.footer-brand img { width:180px; }
.footer-brand .logo { margin-bottom:20px; }
.footer-text { font-size:var(--fs-5); line-height:1.7; }
.footer-contact { margin-bottom:30px; }
.contact-title { position:relative; font-family:var(--ff-montserrat); font-weight:var(--fw-500); margin-bottom:30px; }
.contact-title::after { content:""; position:absolute; bottom:-10px; left:0; width:50px; height:2px; background:var(--bright-navy-blue); }
.contact-text { font-size:var(--fs-5); margin-bottom:15px; max-width:200px; }
.contact-item { display:flex; justify-content:flex-start; align-items:center; gap:10px; margin-bottom:10px; }
.contact-item ion-icon { --ionicon-stroke-width:40px; }
.contact-link, address { font-style:normal; color:var(--gainsboro); font-size:var(--fs-5); }
.contact-link:is(:hover,:focus){ color:var(--white); }
.form-text { font-size:var(--fs-5); margin-bottom:20px; }
.footer-form .input-field { background:var(--white); font-size:var(--fs-5); padding:15px 20px; border-radius:100px; margin-bottom:10px; }
.footer-form .btn { width:100%; }
.footer-bottom { --gunmetal:hsl(205,36%,17%); background:var(--gunmetal); padding-block:20px; text-align:center; }
.copyright { color:var(--gainsboro); font-size:var(--fs-5); margin-bottom:10px; }
.copyright a { color:inherit; display:inline-block; }
.copyright a:is(:hover,:focus){ color:var(--white); }
.footer-bottom-list { display:flex; align-items:center; justify-content:center; gap:21px; }
.footer-bottom-list>li { position:relative; }
.footer-bottom-list>li:not(:last-child)::after {
  content:""; position:absolute; top:3px; right:-10px; bottom:3px; width:1px; background:hsla(0,0%,100%,0.2);
}
.footer-bottom-link { color:var(--gainsboro); font-size:var(--fs-7); transition:var(--transition); }
.footer-bottom-link:is(:hover,:focus){ color:var(--white); }

/* GO TO TOP */
.go-top {
  position:fixed; bottom:15px; right:15px; width:35px; height:35px;
  background:var(--bright-navy-blue); color:var(--white); display:grid; place-items:center;
  font-size:18px; border-radius:6px; box-shadow:0 1px 3px hsla(0,0%,0%,0.5);
  opacity:0; transform:translateY(10px); visibility:hidden; transition:var(--transition);
}
.go-top.active { opacity:.8; transform:translateY(0); visibility:visible; }
.go-top:is(:hover,:focus){ opacity:1; }

/* ELEMENTY DODATKOWE */
.date-badge{
  position:absolute; top:12px; right:12px; background:var(--bright-navy-blue); color:var(--white);
  font-size:var(--fs-7); font-family:var(--ff-montserrat); padding:6px 10px; border-radius:999px; letter-spacing:.4px; opacity:.95;
}
.date-badge:focus, .date-badge:hover { opacity:1; }

.footer-brand .logo-text{
  display:inline-block; font-family:var(--ff-montserrat); font-weight:var(--fw-800);
  text-transform:uppercase; letter-spacing:.5px; font-size:22px; line-height:1.1; color:var(--gainsboro);
}
.footer-brand .logo-text:hover, .footer-brand .logo-text:focus{ color:var(--white); }
.footer-brand img{ display:none; }

/* Anchor offset – sekcje nie chowają się pod sticky headerem */
#home, #about, #posts, #gallery, #contact { scroll-margin-top: 90px; }

/* MEDIA QUERIES */
@media (min-width:580px){
  .container{ max-width:580px; margin-inline:auto; }
  .btn{ --fs-5:16px; --padding:12px 30px; }
  section:not(.cta) :is(.section-subtitle,.section-title,.section-text){ text-align:center; }
  .section-text{ margin-bottom:40px; }
  .card-text{ --fs-5:15px; }

  .header{ padding-top:83px; }
  .helpline-box .icon-box{ padding:14px; }
  .header-top .logo img{ max-width:unset; }
  .search-btn{ font-size:30px; }
  .nav-open-btn{ font-size:40px; }

  .hero{ min-height:800px; padding-top:85px; }
  .hero-text{ --fs-5:15px; }
  .btn-group{ gap:20px; }

  .tour-search-form{ display:grid; grid-template-columns:1fr 1fr; align-items:flex-end; gap:15px; }
  .tour-search-form .input-wrapper{ margin-bottom:0; }
  .tour-search-form .input-field{ padding:16px 20px; }
  .tour-search .btn{ grid-column:span 2; margin-top:20px; }

  .popular-card .card-content{ right:auto; }

  .footer .container{ display:grid; grid-template-columns:1fr 1fr; gap:30px; }
  .footer-form{ grid-column:span 2; }
  .footer-bottom{ text-align:left; }
  .copyright{ margin-bottom:0; }
  .footer-bottom-list{ justify-content:flex-end; }
}

@media (min-width:768px){
  :root{ --fs-5:15px; }
  .container{ max-width:800px; }
  .section-text{ max-width:60ch; margin-inline:auto; }

  .helpline-box{ display:flex; justify-content:flex-start; align-items:center; gap:10px; }
  .helpline-box .wrapper{ display:block; color:var(--white); font-size:var(--fs-6); }
  .social-list{ gap:10px; }

  .popular-list{ display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-bottom:50px; }
  .popular-list>li:not(:last-child){ margin-bottom:0; }
  .popular-card .card-content{ right:20px; }

  .package-list{ margin-bottom:50px; }
  .package-list>li:not(:last-child){ margin-bottom:40px; }
  .package-card{ display:grid; grid-template-columns:1.3fr 1.5fr 1fr; }
  .package-card .card-banner{ height:100%; }
  .package-card .card-content{ padding:40px; }
  .package-card .card-price{ display:grid; place-content:center; }
  .package-card .card-price .wrapper{ margin-bottom:15px; }

  .gallery{ padding-bottom:calc(var(--section-padding * 2)); }
  .gallery-list{ grid-template-columns:repeat(3,1fr); gap:20px; }
  .gallery-image{ border-radius:var(--radius-25); }

  .cta .container{ display:flex; justify-content:space-between; align-items:center; }
  .cta-content{ width:calc(100% - 225px); }
  .cta .section-text{ margin-inline:0; }

  .form-wrapper{ display:flex; justify-content:flex-start; align-items:center; gap:20px; }
  .footer-form .input-field{ margin-bottom:0; }
  .footer-form .btn{ width:max-content; }
}

@media (min-width:992px){
  .container{ max-width:1050px; }

  .header.active .header-top{ position:unset; background:unset; } /* dla porządku */
  .nav-open-btn, .navbar-top{ display:none; }
  .header-bottom{ border-bottom:none; }
  .header.active .header-bottom{
    position:fixed; top:0; left:0; width:100%;
    background:var(--white); color:var(--onyx);
    box-shadow:0 2px 5px hsla(0,0%,0%,0.08); transition:var(--transition);
  }
  .header-bottom .container{ padding-block:0; }
  .header .navbar{ all:unset; }
  .navbar-list{ border-top:none; display:flex; justify-content:center; align-items:center; }
  .navbar-list li{ border-bottom:none; }
  .navbar-link{ color:var(--white); --fs-4:16px; font-weight:unset; text-transform:uppercase; padding:20px 15px; }
  .header.active .navbar-link{ color:var(--onyx); }
  .header.active .navbar-link:is(:hover,:focus){ color:var(--bright-navy-blue); }
  .header.active .social-link{ color:var(--onyx); border-color:hsla(0,0%,0%,0.15); }
  .overlay{ display:none; }

  .hero .container{ max-width:740px; }

  .tour-search-form{ grid-template-columns:repeat(5,1fr); }
  .tour-search .btn{ --padding:15px; grid-column:unset; margin-top:0; }

  .popular-list{ grid-template-columns:repeat(3,1fr); }

  .meta-box{ --fs-8:13px; }
  .meta-box>ion-icon{ font-size:15px; }

  .cta .section-title{ max-width:25ch; }

  .footer-top .container{ grid-template-columns:repeat(3,1fr); gap:50px; }
  .footer-form{ grid-column:unset; }
  .form-wrapper{ flex-direction:column; }
  .footer-form .btn{ width:100%; }

  /* Desktop: ukryj mobilną CTA w bottom; zostaje topbar */
  .cta-mobile{ display:none !important; }
}

@media (min-width:1200px){
  :root{ --section-padding:100px; }
  .container{ max-width:1180px; }
}

/* MOBILE layout i kolejność w dolnym pasku */
@media (max-width:991px){
  .header-top{ display:none !important; }
  .header{ padding-top:0 !important; }
  .header-bottom{ border-bottom:none; }

  .header-bottom .container{ display:flex; align-items:center; gap:10px; }
  .header-bottom .social-list{ order:1; }
  .header-bottom .navbar{ order:2; }
  .header-bottom .btn.btn-primary{ order:3; margin-left:auto; --padding:6px 14px; }
  .header-bottom .header-btn-group{ order:4; margin-left:8px; display:flex; align-items:center; }
  .nav-open-btn{ font-size:30px; line-height:1; }

  .social-mail-mobile{ display:list-item; }
  .cta-mobile{ order:3; margin-left:auto; --padding:6px 14px; }
}

/* HOVER opt-out dla prefer-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .popular-card, .popular-card .card-img img{ transition:none !important; }
}