/* ============================================
   Sternal.IT - podstrona /microsoft-365-dla-firm
   Ładowana PO style.css, cyber.css i opieka.css
   ============================================ */

/* --- Karta pozioma: ikona + treść --------------------------------------
   Wzorzec zapożyczony z .about-value ze strony głównej (ikona 44px obok
   tekstu), nie z .care-card. Powód: opisy w tej sekcji mają bardzo różną
   długość - od jednego zdania po sześć. W pionowej karcie (.care-card)
   rząd rozciąga się do najwyższej i przy sąsiadach zostają puste dziury
   (widoczne na renderze 2026-08-08). W układzie poziomym dłuższy tekst
   płynie w szerokim pasku zamiast rozpychać rząd w górę.
   ---------------------------------------------------------------------- */
.feat {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition), transform var(--transition);
}

.feat:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.feat__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  color: var(--color-accent);
  background-color: var(--color-accent-glow);
  border-radius: var(--radius-sm);
}

.feat__title {
  font-size: var(--fs-md);
  color: var(--color-heading);
  margin-bottom: var(--spacing-xs);
  text-wrap: balance;
}

/* Justowanie jak w kartach .model (opieka.css) - hyphens:auto OBOWIĄZKOWE,
   bez dzielenia wyrazów polskie długie słowa rozpychają odstępy (CLAUDE.md §11.4).
   Wyłączane poniżej 560px, gdzie kolumna schodzi do ~32 znaków. */
.feat__text {
  color: var(--color-text-muted);
  line-height: 1.7;
  text-align: justify;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}

/* --- Siatka kart -------------------------------------------------------
   Jedna kolumna na mobile, dwie od 860px. Karta z modyfikatorem --wide
   zajmuje pełny wiersz - dostaje go pozycja z najdłuższym opisem, żeby
   nie wymuszała wysokiego rzędu na sąsiadce.
   ---------------------------------------------------------------------- */
.feat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
  margin: var(--spacing-lg) 0;
}

@media (min-width: 860px) {
  .feat-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* --wide dostaje pozycja z NAJDŁUŻSZYM opisem, nie „najważniejsza”.
     Audyt zewnętrzny 2026-08-08 (punkt 12) sugerował przeniesienie na
     „Porządek w dostępach” jako najmocniejszą sprzedażowo — odrzucone przez
     właściciela: ta sekcja odpowiada na pytanie „co masz w pakiecie, czego
     nie używasz”, a nie jest sekcją o bezpieczeństwie (od tego jest podstrona
     cyber). Do tego karta o dostępach ma 150 zn. tekstu wobec 340 w karcie
     o plikach — na pełnej szerokości zostawiłaby pustkę, a pliki wróciłyby
     do rozpychania rzędu, czyli do problemu, który --wide rozwiązuje. */
  .feat-grid > .feat--wide {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feat {
    transition: border-color var(--transition);
  }

  .feat:hover {
    transform: none;
  }
}

/* --- Lista wyliczeniowa bez pudełek ------------------------------------
   Sekcja „Który plan naprawdę potrzebujesz” celowo NIE używa .feat-grid:
   dwie sąsiednie sekcje z identycznymi kartami czytają się jak powtórzenie
   i druga przestaje rejestrować się jako nowa myśl (wychwycone na renderze
   2026-08-08). Forma pasuje też do treści: sekcja 1 to katalog RÓWNORZĘDNYCH
   możliwości (karty z ikonami), sekcja 2 to wyliczenie typowych POMYŁEK -
   numerowana lista niesie to lepiej niż kafelki.
   ---------------------------------------------------------------------- */
.spec-list {
  display: grid;
  grid-template-columns: 1fr;
  margin: var(--spacing-lg) 0;
  border-top: 1px solid var(--color-border);
}

.spec-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--spacing-sm) var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-sm);
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--transition);
}

.spec-item:hover {
  background-color: var(--color-bg-alt);
}

/* Numer w foncie monospace - odróżnia wyliczenie od treści, bez ikon */
.spec-item__num {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--color-accent);
  padding-top: 0.2em;
}

.spec-item__title {
  font-size: var(--fs-md);
  color: var(--color-heading);
  text-wrap: balance;
}

.spec-item__text {
  color: var(--color-text-muted);
  line-height: 1.7;
  text-align: justify;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}

/* Wąska kolumna na małych ekranach - justowanie robi rzeki między słowami */
@media (max-width: 560px) {
  .feat__text,
  .spec-item__text {
    text-align: left;
    hyphens: manual;
  }
}

/* Mobile: numer w pierwszej kolumnie, tytuł i opis pod nim w drugiej */
@media (max-width: 899px) {
  .spec-item__title,
  .spec-item__text {
    grid-column: 2;
  }

  .spec-item__text {
    margin-top: calc(var(--spacing-xs) * -1);
  }
}

/* Od 900px trzy tory: numer | tytuł | opis. Tytuł w stałej kolumnie daje
   pionową linię, po której oko skacze między pozycjami. */
@media (min-width: 900px) {
  .spec-item {
    grid-template-columns: 2.5rem 16rem 1fr;
    align-items: baseline;
  }
}