/* === PressMind Home — wersja „żyje na Twoich zmiennych” === */
/* Zakładam, że w :root masz już:
   --pm-primary, --pm-accent, --pm-fg, --pm-muted, --pm-border, --pm-radius, --pm-shadow
   (patrz Twój style.css) */

/* 0) Ogólne dopasowanie do GeneratePress kontenera */
.pressmind-home,
.pm-hero-bleed,
.pm-latest { /* szerokość i centrowanie zgodnie z Twoim grid-container */
  max-width: min(100% - 2rem, 1220px);
  margin-inline: auto;
}
@media (min-width: 1400px){
  .pressmind-home,
  .pm-hero-bleed,
  .pm-latest { max-width: 1360px; }
}

/* 1) Full-bleed hero z miękkim przejściem */
.pm-hero-bleed{
  width: 100%;
  padding: clamp(8px, 2vw, 14px) 0;
}
.pm-hero-bleed .card-hero{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, #11131a, #151827);
  border: 1px solid rgba(155, 92, 255, 0.18); /* fiolet jak related */
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(0, 0, 0, 0.7);
  transition:
    transform 0.22s ease-out,
    box-shadow 0.22s ease-out,
    border-color 0.22s ease-out,
    background 0.22s ease-out;
}
.pm-hero-bleed .card-hero:hover {
  transform: translateY(-3px);
  border-color: rgba(88, 255, 182, 0.45);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.8),
    0 0 25px rgba(88, 255, 182, 0.35);
  background: radial-gradient(circle at top left,
    rgba(88, 255, 182, 0.06),
    rgba(12, 14, 20, 0.95));
}
.card-hero .card-media{ display:block; aspect-ratio: 3/2; background:#0a0a0f; }
.card-hero .card-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.card-hero .card-body{
  position:absolute; inset:auto 0 0 0; padding:20px 20px 22px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(5,6,12,.88) 58%);
}
.card-hero .card-cat{
  display:inline-block; font-size:.78rem; letter-spacing:.02em; text-transform:uppercase;
  background: linear-gradient(90deg, var(--pm-primary), var(--pm-accent));
  -webkit-background-clip:text; background-clip:text; color: transparent;
}
.card-hero .card-title{ margin:.2rem 0 .35rem; }
.card-hero .card-title a{ color:#fff; text-decoration:none; }
.card-hero .card-lead{ color:#cfd3f2; opacity:.95; margin:.35rem 0 0; }
.card-hero .card-meta{ color:#8e93c7; font-size:.86rem; margin-top:.5rem; }

/* 2) Siatka „magazynowa” — bierze rytm z Twoich kart */
.pm-latest{ margin-top: clamp(10px, 2vw, 18px); }
.pm-latest .sec-head h2{
  font-size: 1.05rem; letter-spacing:.08em; text-transform:uppercase;
  color:#c9caee; margin: 6px 0 12px;
}
.pm-latest .grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
@media (min-width:1200px){
  .pm-latest .grid{ gap:20px; grid-template-columns: repeat(12, minmax(0,1fr)); }
  .pm-latest .grid .card:nth-child(1){ grid-column: span 6; } /* szeroka karta na start sekcji */
  .pm-latest .grid .card{ grid-column: span 3; }
}

/* 3) Karty */
.card{
  position: relative;
  background: rgba(12, 14, 20, 0.9);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(155, 92, 255, 0.18); /* fioletowa ramka */
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(0, 0, 0, 0.7);
  transition:
    transform 0.22s ease-out,
    box-shadow 0.22s ease-out,
    border-color 0.22s ease-out,
    background 0.22s ease-out;
}

.card:hover{
  transform: translateY(-3px);
  border-color: rgba(88, 255, 182, 0.45); /* zielony glow jak related */
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.8),
    0 0 25px rgba(88, 255, 182, 0.35);
  background: radial-gradient(
    circle at top left,
    rgba(88, 255, 182, 0.06),
    rgba(12, 14, 20, 0.95)
  );
}

.card-media{ display:block; aspect-ratio:16/9; background:#0a0a0f; position:relative; }
.card-media img{ width:100%; height:100%; object-fit:cover; display:block; }
/* delikatny neonowy after = „Twój” glow */
.card-media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  box-shadow:
    inset 0 0 80px rgba(155, 92, 255, .10),
    inset 0 -90px 140px rgba(88, 255, 182, .18);
  transition: opacity .18s ease;
}

.card:hover .card-media::after{ opacity:0; }
/* topline jak w .pm-related-topline */
.card-topline{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
}
.card-body{ padding:14px 14px 16px; }
.card-cat{
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;

}

.pm-latest .card-cat{
color: rgba(88, 255, 182, 0.88) !important; /* ten sam zielony co .pm-related-cat */
}
.card-title{ font-size: clamp(1rem, .95rem + .4vw, 1.25rem); line-height:1.25; margin:.2rem 0 .35rem; }
.card-title a{ color: var(--pm-fg); text-decoration:none; }
.card-title a:hover{ text-decoration: underline; text-underline-offset: 2px; }
.card-excerpt{ color:#dee2ff; font-size:.95rem; }
.card-meta{
  margin-top: 0.45rem;
  font-size: 0.82rem;
  color: #8e93c7;
}
.card-readtime{
  font-size: 0.7rem;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(88, 255, 182, 0.4);
  background: rgba(18, 26, 33, 0.9);
  color: rgba(230, 232, 245, 0.9);
  white-space: nowrap;
}
/* 4) Paginacja spójna z Twoją */
.pm-pagination{ display:flex; gap:8px; justify-content:center; margin:22px 0 12px; }
.pm-pagination a, .pm-pagination span{
  padding:6px 10px; border:1px solid #262a42; border-radius:10px; color:#dfe3ff;
}
.pm-pagination .current,
.pm-pagination a:hover{
  background: linear-gradient(135deg, var(--pm-primary), #7b34ff 40%, #5d2bff 75%);
  color:#fff; border-color: transparent;
  box-shadow: 0 0 20px rgba(155,92,255,.25);
}

/* 5) Na front page nie chcemy podwójnych paddingów kontenera */
.content-no-padding .inside-article{ padding:0 !important; }

/* 6) A11y: bez zbędnych animacji */
@media (prefers-reduced-motion: reduce){
  .card, .card-media::after { transition: none !important; }
}




/* === Hero: fix mobile overflow === */
@media (max-width: 640px){
  /* 1) Więcej miejsca na tekst – wyższe zdjęcie */
  .pm-hero-bleed .card-hero .card-media { aspect-ratio: 4/3; } /* było 3/2 */

  /* 2) Tytuł zawsze widoczny – max 2 linie */
  .pm-hero-bleed .card-hero .card-title {
    margin: .1rem 0 .2rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* 3) Lead skracamy (albo wyłącz całkiem – patrz linia poniżej) */
  .pm-hero-bleed .card-hero .card-lead {
    margin-top: .25rem;
    opacity: .95;
    display: -webkit-box;
    -webkit-line-clamp: 3;          /* ← zostaw 2 linie */
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }


  /* 5) Subtelniejsze meta, żeby całość się mieściła */
  .pm-hero-bleed .card-hero .card-meta { font-size:.8rem; margin-top:.4rem; }
}

/* === Szerzej i centralnie tylko na szablonie PressMind Home === */
body.page-template-template-pressmind-home .inside-article{
  padding-left: 0 !important;
  padding-right: 0 !important;
}



/* Mobile: jedna szeroka kolumna, realnie wycentrowana */
@media (max-width: 639.98px){
	/* grid-container bez zwężania o 2rem */
body.page-template-template-pressmind-home .hfeed{
  max-width: 100% !important;
}
  body.page-template-template-pressmind-home .pm-hero-bleed.grid-container,
  body.page-template-template-pressmind-home .pm-latest.grid-container{
    padding-left: clamp(8px, 2.8vw, 12px);
    padding-right: clamp(8px, 2.8vw, 12px);
  }
  body.page-template-template-pressmind-home .pm-latest .grid{
    grid-template-columns: minmax(0, 1fr);   /* pełna szerokość kolumny */
    justify-content: center;
  }
  body.page-template-template-pressmind-home .pm-latest .card{
    width: min(620px, 100%);                 /* szeroka karta */
    margin-inline: auto;                      /* wycentrowana */
  }
	.separate-containers.no-sidebar .site-main {
		margin-left: auto;
		margin-right: auto;
	}
}

/* Tablet: 2 kolumny, też wycentrowane */
@media (min-width: 640px) and (max-width: 1199.98px){
  body.page-template-template-pressmind-home .pm-latest .grid{
    grid-template-columns: repeat(2, minmax(320px, 1fr));
    justify-content: center;
    gap: 18px;
  }
  body.page-template-template-pressmind-home .pm-latest .card:nth-child(1){
    grid-column: auto; /* bez "wide" w tym progu */
  }
		.separate-containers.no-sidebar .site-main {
			margin-left: auto;
		margin-right: auto;
	}
}

.card {
  position: relative; /* potrzebne dla hit-area */
}

/* niewidzialny link na całą kartę */
.card-hitarea {
  position: absolute;
  inset: 0;
  z-index: 5;
  text-indent: -9999px;  /* dla starych screenreaderów można zostawić aria-label */
  background: transparent;
}

/* żeby kursor wszędzie był „linkowy” */
.card:hover,
.card-hitarea:hover {
  cursor: pointer;
}