/* =============================================================================
   Iktató — CSOMAGOK a termék-nyitólapon: világoskék szekció, három fehér kártya, ár nélkül
   (az árat ajánlatban adjuk meg). A szekció formaszín: fölötte sötét szöveg áll (--f-on-shape).
   A kártyán a gomb az „Ajánlatkérés” űrlapra visz, előválasztott csomaggal.
   ============================================================================= */
.f-csomagok {
  background: var(--f-sky);
  color: var(--f-on-shape);
}
.f-csomagok .f-szekcio__fejlec h2,
.f-csomagok .f-szekcio__fejlec p { color: var(--f-on-shape); }

.f-csomagok__racs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.f-csomag {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  border-radius: var(--r-tile);
  background: var(--f-card);
  color: var(--f-ink);
}
.f-csomag--kiemelt { box-shadow: 0 0 0 3px var(--f-primary); }

.f-csomag h3 {
  margin: 0;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  letter-spacing: -0.03em;
}
.f-csomag > p {
  margin: 0;
  line-height: 1.5;
  color: var(--f-ink-soft);
}

.f-csomag__lista {
  display: grid;
  gap: 0.6rem;
  margin: 0 0 0.5rem;
  padding: 1rem 0 0;
  border-top: 1px solid var(--f-line);
  list-style: none;
  font-size: 0.95rem;
  line-height: 1.45;
}
.f-csomag__lista li {
  position: relative;
  padding-left: 1.1rem;
  color: var(--f-ink-soft);
}
.f-csomag__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  background: var(--f-primary);
}

/* A gomb a kártya alján, a kártyák magassága egyenlő. */
.f-csomag .btn-f,
.f-csomag .btn-f-outline {
  margin-top: auto;
  align-self: flex-start;
}

@media (max-width: 900px) {
  .f-csomagok__racs { grid-template-columns: minmax(0, 1fr); }
}