/* =========================================================
   HERO – ONLY HERE (NO DUPLICATES IN 01-base.css)
   background image ON .heroCard
   ========================================================= */

.hero{
  padding: clamp(18px, 4vw, 44px) 0;
}

.heroCard{
  position: relative;
  overflow: hidden;
  border-radius: 22px;

  padding: clamp(18px, 4.5vw, 46px);

  background-image: url("/assets/images/hero-kitchenv3.webp");
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;

  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 42px rgba(0,0,0,.12);
}

/* overlay dla czytelności */
.heroCard::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.94) 0%,
    rgba(255,255,255,.82) 44%,
    rgba(255,255,255,.38) 74%,
    rgba(255,255,255,.12) 100%
  );
  pointer-events:none;
}

.heroCard > *{
  position: relative;
  z-index: 1;
}

/* jeśli gdzieś jeszcze jest stary blok obrazka */
.heroCard_media{ display:none; }

/* typografia hero (jeśli używasz tych klas) */
.heroTitle{
  margin: 0 0 10px;
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1.05;
  font-size: clamp(28px, 4vw, 56px);
}

.heroSub{
  margin: 0;
  color: var(--muted);
  max-width: 46ch;
  line-height: 1.35;
  font-size: clamp(13px, 1.4vw, 16px);
}

.heroCard_actions{
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* desktop: dajemy “premium” wysokość i miejsce na tło po prawej */
@media (min-width: 900px){
  .heroCard{
    min-height: 360px;
    display: grid;
    grid-template-columns: minmax(280px, 1fr);
    align-content: center;
  }
  .heroCard_actions{ margin-top: 18px; }
}

/* mobile */
@media (max-width: 520px){
  .heroCard{
    border-radius: 20px;
    background-position: 65% 40%;
  }
  .btn{ width: 100%; }
}


/* =========================================================
   HERO LAYOUT: tekst + przyciski zawsze razem w lewym górnym rogu
   ========================================================= */

/* Ustawiamy siatkę: lewa kolumna na content, prawa “pusta” na tło */
.heroCard{
  display: grid;
  grid-template-columns: minmax(260px, 520px) 1fr;
  grid-template-rows: auto auto;
  align-content: start;
  justify-content: start;
  align-items: start;
}

/* Tekst zawsze w lewym górnym */
.heroCard_top{
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  justify-self: start;
}

/* Przyciski zawsze pod tekstem, nadal w lewym górnym rejonie */
.heroCard_actions{
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  justify-self: start;
  margin-top: 14px;
}

/* Mobile: jedna kolumna, przyciski pod tekstem, bez 100% szerokości jeśli nie chcesz */
@media (max-width: 520px){
  .heroCard{
    grid-template-columns: 1fr;
  }

  .heroCard_actions{
    margin-top: 12px;
  }

  /* Jeśli chcesz przyciski obok siebie na mobile -> usuń width:100% z hero.css / base */
  .btn{ width: auto; }
}


/* =========================
   HERO – MOBILE FIX
   ========================= */

@media (max-width: 600px) {

  .hero {
    padding: 40px 0;
    background-position: 65% center;
  }

  .heroCard {
    padding: 24px;
    border-radius: 18px;
  }

  .heroTitle {
    font-size: 26px;
    line-height: 1.2;
  }

  .heroSub {
    font-size: 14px;
    margin-bottom: 18px;
  }

  .heroCard_actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .heroCard_actions .btn {
    width: 100%;
    font-size: 14px;
    padding: 10px 14px;
  }

}
.heroSub .line {
  display: block;
}