/* ==========================================================================
   podkarkonoszami.pl - wspólny arkusz stylów
   Design system: kolory marki, typografia, komponenty (nawigacja, karty,
   przyciski) oraz stany :hover (zastępują dawne atrybuty style-hover z DivCloud).
   ========================================================================== */

:root {
  --green:        #2E6B33;  /* podstawowy zielony marki */
  --green-dark:   #1E4A2A;  /* hover / ciemne tło */
  --green-soft:   #9FCF98;  /* akcent na ciemnym tle */
  --green-tint:   #EAF1E7;  /* jasne wypełnienie ikon */
  --ink:          #17251C;  /* podstawowy tekst */
  --ink-2:        #3A473F;
  --ink-3:        #4A5850;
  --ink-muted:    #6A786D;
  --ink-faint:    #8A968C;
  --cream:        #EFEBE1;  /* tło strony */
  --card:         #FBF9F3;  /* tło kart */
  --navy:         #0E2A45;  /* sekcja "co zbudujesz" */
  --footer:       #0B120D;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -.01em;
}

a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-dark); }

img { display: block; max-width: 100%; }

::selection { background: var(--green); color: #fff; }

input, textarea, button, select { font-family: inherit; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--green) !important;
  box-shadow: 0 0 0 3px rgba(46, 107, 51, .14);
}

/* Utilities -------------------------------------------------------------- */
.serif {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  letter-spacing: 0;
}

.lift {
  transition: transform .4s cubic-bezier(.16, 1, .3, 1),
              box-shadow .4s cubic-bezier(.16, 1, .3, 1),
              border-color .4s;
}
.lift:hover { transform: translateY(-5px); }

.lift-sm {
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), border-color .4s;
}
.lift-sm:hover { transform: translateY(-3px); }

.under {
  background-image: linear-gradient(var(--green), var(--green));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .35s;
}
.under:hover { background-size: 100% 2px; }

.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Stany :hover (zamiast dawnych atrybutów style-hover) -------------------- */
.h-green:hover        { background: var(--green-dark) !important; color: #fff !important; }
.h-green:hover svg    { stroke: #fff; }
.h-navlink:hover      { background: rgba(23, 37, 28, .05) !important; color: var(--ink) !important; }
.h-outline:hover      { border-color: var(--ink) !important; color: var(--ink) !important; }
.h-white:hover        { background: #fff !important; color: var(--ink) !important; }
.h-tile:hover         { border-color: var(--green) !important; color: var(--ink) !important; }
.h-tile-dark:hover    { background: rgba(255, 255, 255, .10) !important; color: #fff !important; }
.h-card-dark:hover    { background: rgba(255, 255, 255, .09) !important; border-color: rgba(159, 207, 152, .4) !important; }
.h-footlink:hover     { color: var(--green-soft) !important; }
.h-dark-btn:hover     { background: #232f26 !important; }
.h-save:hover         { border-color: var(--green) !important; }
.h-settings:hover     { background: rgba(23, 37, 28, .05) !important; color: var(--ink) !important; }

/* Marquee / floaty ------------------------------------------------------- */
@keyframes marq  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
      transition-duration: .001ms !important; }
}

/* ==========================================================================
   Responsywność - reguły przeniesione z poszczególnych stron.
   Nazwy klas są unikalne dla sekcji, więc można je trzymać w jednym pliku.
   ========================================================================== */
@media (max-width: 960px) {
  .navlinks   { display: none !important; }
  .nav-cta    { display: none !important; }
  .burger     { display: flex !important; }
  .mobbar     { display: flex !important; }
  .offers-grid  { grid-template-columns: 1fr !important; }
  .why-grid     { grid-template-columns: 1fr !important; }
  .contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .hero-bento   { grid-template-columns: 1fr !important; }
  .two          { grid-template-columns: 1fr !important; gap: 36px !important; }
  .display      { font-size: clamp(46px, 12vw, 72px) !important; }
  .sectionpad   { padding: 64px 20px !important; }
  .bento-keys   { grid-template-columns: 1fr 1fr !important; }
  .sticky-col   { position: static !important; }
  .gallery      { grid-template-columns: 1fr 1fr !important; grid-auto-rows: 170px !important; }
  .gallery .span-3 { grid-column: span 2 !important; }
  .transcard    { padding: 40px 28px !important; }
  .footer-pad   { padding-bottom: 150px !important; }
  .maptile      { min-height: 320px !important; }
}

@media (max-width: 700px) {
  .legalpad { padding: 36px 20px 60px !important; }
}

@media (max-width: 600px) {
  .sectionpad  { padding: 52px 16px !important; }
  .strip-side  { display: none !important; }
  .formcard    { padding: 26px 18px !important; }
  .offercard-pad { padding: 22px 20px 24px !important; }
  .brandrow    { gap: 14px !important; }
  .brandbadge  { width: 64px !important; height: 64px !important; border-radius: 16px !important; }
  .bento-keys  { grid-template-columns: 1fr !important; }
  .span-2      { grid-column: auto !important; }
  .gallery .span-2 { grid-column: span 2 !important; }
  .gallery     { grid-auto-rows: 150px !important; }
  .reason-row  { grid-template-columns: 1fr !important; gap: 10px !important; }
  .justify     { text-align: left !important; }
  .heroctas    { flex-direction: column !important; align-items: stretch !important; }
  .heroctas a  { justify-content: center !important; }
  .transcard   { padding: 32px 20px !important; }
  .locmap      { min-height: 340px !important; }
}