/* ============================================================
   PilsFree Layout Grid Utilities
   Nahrazuje Webflow page-specific #w-node-* ID selektory
   reusable CSS třídami pro PHP CMS
   ============================================================ */

/* --- Hero layouty (obrázek + text vedle sebe) --- */
.pf-grid-hero         { grid-template-rows: auto; grid-template-columns: 1.25fr 1fr; }
.pf-grid-hero-wide    { grid-template-rows: auto; grid-template-columns: 1.5fr 1fr; }
.pf-grid-hero-narrow  { grid-template-rows: auto; grid-template-columns: .75fr 1fr; }

/* --- 1 sloupec (full width content) --- */
.pf-grid-1col         { grid-template-rows: auto; grid-template-columns: 1fr; }

/* --- 2 sloupce --- */
.pf-grid-2col         { grid-template-rows: auto; grid-template-columns: 1fr 1fr; }
.pf-grid-2col-text-btn{ grid-template-rows: auto; grid-template-columns: 1fr .5fr; }

/* --- Kontakty (mapa + detaily) --- */
.pf-grid-contact      { grid-template-rows: auto; grid-template-columns: 1fr 1.5fr; }

/* --- CTA sekce (velký nadpis + tlačítko) --- */
.pf-grid-cta          { grid-template-rows: auto; grid-template-columns: 1.5fr .75fr; }

/* --- Footer --- */
.pf-grid-footer-top   { grid-template-rows: auto; grid-template-columns: 1fr 1.5fr 1fr 1fr; }
.pf-grid-footer-bottom{ grid-template-rows: auto; grid-template-columns: 1fr 1fr; }

/* --- 2 sloupce, 2 řádky (org struktura, karty) --- */
.pf-grid-2col-2row    { grid-template-rows: auto auto; grid-template-columns: 1fr 1fr; }

/* --- 3+ sloupce --- */
.pf-grid-3col         { grid-template-rows: auto; grid-template-columns: 1fr 1fr 1fr; }
.pf-grid-4col         { grid-template-rows: auto; grid-template-columns: 1fr 1fr 1fr 1fr; }


/* ============================================================
   Offers Cards - "Co ještě máme v rukávu?" (3 karty vedle sebe)
   ============================================================ */
.w-layout-grid.offers-cards-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
}

/* Karty uvnitř - ikona vlevo, text vpravo */
.offers-cards-wrapper .card.vertical {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 20px;
  padding: 25px 30px;
}

/* Velikost ikony - větší jako v šabloně */
.offers-cards-wrapper .card.vertical .image-wrapper.round._60 {
  width: 100px !important;
  height: 100px !important;
  min-width: 100px;
  flex-shrink: 0;
}

.offers-cards-wrapper .card.vertical .text-wrapper {
  text-align: left;
}

.offers-cards-wrapper .card.vertical .card-small-wrapper {
  font-weight: 700 !important;
  font-size: 1.25rem !important;
  color: #000 !important;
}
/* ============================================================
   Navbar – omezení šířky obsahu na max-width containeru
   .navbar zůstává width:100% pro pozadí a border-bottom,
   .div-block se centruje a omezuje stejně jako .container
   ============================================================ */
.navbar {
  border-bottom: 2px solid var(--primary);
  background-color: var(--white);
}
.navbar .div-block {
  border-bottom: none;
  background-color: transparent;
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}

/* Dokumenty stránka - sticky levá část */
@media screen and (min-width: 992px) {
  .cell-docs-sticky {
    align-self: start;
    position: sticky;
    top: 100px;
  }
}


/* ============================================================
   Doplňkové utility pro hero obrázek
   ============================================================ */
.landing-image {
  max-width: 100%;
  height: auto;
}


/* ============================================================
   Fix pro kroky 01, 02, 03 s žlutou linkou
   (oprava height: 100% na .line)
   ============================================================ */
.point-content {
  align-items: stretch;
}

.point-content .line {
  min-height: 100%;
  align-self: stretch;
}


/* ============================================================
   RESPONSIVE: min-width 1280px
   ============================================================ */
@media screen and (min-width: 1280px) {
  .navbar .div-block {
    max-width: 1280px;
  }
}


/* ============================================================
   RESPONSIVE: min-width 1920px (extra velké monitory)
   ============================================================ */
@media screen and (min-width: 1920px) {
  .pf-grid-footer-top { grid-template-columns: 1fr 1.25fr 1fr 1fr; }

  .navbar .div-block {
    max-width: 1280px;
  }
}


/* ============================================================
   RESPONSIVE: max-width 991px (tablet)
   ============================================================ */
@media screen and (max-width: 991px) {
  .pf-grid-hero,
  .pf-grid-hero-wide     { grid-template-columns: .75fr 1fr; }

  .pf-grid-hero-narrow   { grid-template-columns: .75fr 1fr; }

  .pf-grid-2col-text-btn { grid-template-columns: 1fr .75fr; }

  .pf-grid-cta           { grid-template-columns: 1fr 1fr; }

  .pf-grid-contact       { grid-template-columns: 1fr; }

  .pf-grid-footer-top    { grid-template-columns: 1fr; }

  /* Offers cards: 2 sloupce na tabletu */
  .w-layout-grid.offers-cards-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Na tabletu a menším navbar na plnou šířku */
  .navbar .div-block {
    max-width: none;
  }
}


/* ============================================================
   RESPONSIVE: max-width 767px (mobil na šířku)
   ============================================================ */
@media screen and (max-width: 767px) {
  .pf-grid-hero,
  .pf-grid-hero-wide,
  .pf-grid-hero-narrow,
  .pf-grid-2col,
  .pf-grid-2col-2row,
  .pf-grid-2col-text-btn,
  .pf-grid-cta,
  .pf-grid-3col,
  .pf-grid-footer-top {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   RESPONSIVE: max-width 479px (mobil na výšku)
   ============================================================ */
@media screen and (max-width: 479px) {
  .pf-grid-footer-bottom,
  .pf-grid-4col {
    grid-template-columns: 1fr;
  }

  /* Offers cards: 1 sloupec na mobilu */
  .w-layout-grid.offers-cards-wrapper {
    grid-template-columns: 1fr;
  }
}