/* ===== Top kategóriák szekció ===== */

.pp-topcats-section {
  padding: 0px 0px 80px;
}

/* Belső „kártya” – ezt igazítsd nyugodtan (max-width, háttér stb.) */
.pp-topcats-inner {
  max-width: 80%;          /* vagy 80%, ha úgy jobban tetszik */
  margin: 0 auto;
  background: transparent;    /* ha akarsz egy világos szürke kártyát köré: #e5e7eb */
  border-radius: 32px;
  padding: 32px 24px 36px;
}

.pp-topcats-title {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 600;
  margin: 0 0 28px;
}

/* === GRIDEZÉS – desktopon 4 oszlop, dribbble layout === */

.pp-topcats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 egyforma oszlop */
  grid-auto-rows: 230px;                             /* egységes sor magasság */
  gap: 18px;
}

/* közös kártya-stílus */

.pp-topcats-card {
  position: relative;
  display: block;
  border-radius: 24px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  text-decoration: none;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.8);
}

/* ha nincs kép, kapjon háttérszínt */

.pp-topcats-card--noimg {
  background: #d1d5db;
}

/* 1. gyerek: nagy kártya (bal oldal, 2×2) */

.pp-topcats-grid > a:nth-child(1) {
  grid-column: 1 / span 2; /* 1–2. oszlop */
  grid-row: 1 / span 2;    /* 1–2. sor */
}

/* 2. gyerek: jobb felső bal */

.pp-topcats-grid > a:nth-child(2) {
  grid-column: 3;          /* 3. oszlop */
  grid-row: 1;             /* 1. sor */
}

/* 3. gyerek: jobb felső jobb */

.pp-topcats-grid > a:nth-child(3) {
  grid-column: 4;          /* 4. oszlop */
  grid-row: 1;             /* 1. sor */
}

/* 4. gyerek: jobb alsó bal */

.pp-topcats-grid > a:nth-child(4) {
  grid-column: 3;          /* 3. oszlop */
  grid-row: 2;             /* 2. sor */
}

/* 5. gyerek: jobb alsó jobb */

.pp-topcats-grid > a:nth-child(5) {
  grid-column: 4;          /* 4. oszlop */
  grid-row: 2;             /* 2. sor */
}

/* árnyék + overlay a képen, hogy olvasható legyen a cím */

.pp-topcats-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.35),
    rgba(0,0,0,0.05)
  );
}

.pp-topcats-pill {
  position: absolute;
  left: 20px;
  bottom: 20px;
  padding: 10px 22px;
  border-radius: 999px;
  background: #ffffff;
  color: #111827;
  font-weight: 500;
  font-size: 0.95rem;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.25);
}

/* ==== Mobil reszponzív ==== */

/* ==== Mobil / tablet – ugyanaz a "1 nagy + 4 kicsi" csak keskenyebben ==== */
@media (max-width: 900px) {
  .pp-topcats-inner {
    max-width: 95vw;           /* NEW: 95% a bodyhoz képest */
    padding: 22px 12px 28px;
  }

  .pp-topcats-title{
    font-size: 1.35rem;
    padding: 10px 22px;
    margin: 0 0 18px;
  }

  .pp-topcats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* marad 2 oszlop */
    grid-auto-rows: 180px;
    gap: 14px;
  }

  /* 1. kártya: nagy – 2 oszlop széles, 2 sor magas */
  .pp-topcats-grid > a:nth-child(1) {
    grid-column: 1 / -1;
    grid-row: 1 / span 2;
  }

  /* 2–5: alatta 2×2-ben */
  .pp-topcats-grid > a:nth-child(2) { grid-column: 1; grid-row: 3; }
  .pp-topcats-grid > a:nth-child(3) { grid-column: 2; grid-row: 3; }
  .pp-topcats-grid > a:nth-child(4) { grid-column: 1; grid-row: 4; }
  .pp-topcats-grid > a:nth-child(5) { grid-column: 2; grid-row: 4; }

  .pp-topcats-pill{
    left: 14px;
    bottom: 14px;
    padding: 9px 16px;
    font-size: 0.9rem;
  }
}

/* Extra kicsi mobil – még mindig 2 oszlop, csak alacsonyabb sorok */
@media (max-width: 520px) {
  .pp-topcats-grid { grid-auto-rows: 160px; gap: 12px; }
  .pp-topcats-title { font-size: 1.2rem; }
}

/* belső wrapper kap középre rendezést */
.pp-topcats-inner {
  text-align: center;              /* NEW: minden belső elem középre */
}

/* cím – fehér keretes, fehér overlay-es badge */
.pp-topcats-title {
  display: inline-block;           /* ne vegye fel a teljes sort */
  font-size: 1.8rem;
  font-weight: 600;
  margin: 0 0 28px;
  padding: 10px 32px;              /* belső tér */
  background: rgba(255, 255, 255, 0.52);  /* fehér overlay */
  border-radius: 999px;            /* teljesen kerek „pill” */
  border: 2px solid #ffffff;       /* fehér keret */
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.18); /* finom árnyék */
}