/* =========================================================
   03 – Karty i kafelki
   ========================================================= */

/* Kafelek ze strzałką (Info Box: ss-arrow-card) – ramka widoczna na każdym tle */
.ss-arrow-card {
  position: relative;
}
.ss-arrow-card .kt-blocks-info-box-link-wrap {
  border: 1px solid var(--ss-line) !important;
  transition: border-color var(--ss-ease);
}
.ss-arrow-card .kt-blocks-info-box-title {
  padding-right: 28px;
  transition: color var(--ss-ease);
}
.ss-arrow-card::after {
  content: "";
  position: absolute;
  top: 24px;
  right: 20px;
  width: 16px;
  height: 16px;
  background-color: var(--ss-accent-dark);
  -webkit-mask: var(--ss-arrow) no-repeat center / contain;
          mask: var(--ss-arrow) no-repeat center / contain;
  transition: transform var(--ss-ease);
  pointer-events: none;
}
.ss-arrow-card:hover .kt-blocks-info-box-link-wrap { border-color: var(--ss-accent-dark) !important; }
.ss-arrow-card:hover .kt-blocks-info-box-title     { color: var(--ss-accent-dark) !important; }
.ss-arrow-card:hover::after                        { transform: translateX(4px); }

/* Kafelek branży na ciemnym tle (kolumna Kadence: ss-dark-tile, nagłówek H2: ss-dark-tile)
   Tło, zaokrąglenie i hover są na samej kolumnie, nie na jej wnętrzu
   (.kt-inside-inner-col). Wnętrze dostaje style z panelu Kadence (padding,
   promień), które mogą wygrywać z motywem, dlatego tu je zerujemy.
   Strzałka stoi w jednej linii z nazwą branży, po prawej stronie.
   Selektor .wp-block-kadence-column pomija nagłówki, które mają tę samą klasę. */
.wp-block-kadence-column.ss-dark-tile {
  position: relative !important;
  min-height: 140px;
  border-radius: var(--ss-radius) !important;
  background-color: var(--ss-dark-card) !important;
  cursor: pointer;
  transition: background-color var(--ss-ease);
}
.wp-block-kadence-column.ss-dark-tile > .kt-inside-inner-col {
  position: static !important;
  height: 100%;
  padding: 20px !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-sizing: border-box;
}
.wp-block-kadence-column.ss-dark-tile .wp-block-kadence-advancedheading,
.wp-block-kadence-column.ss-dark-tile .wp-block-kadence-image {
  position: static !important;
  transform: none !important;
}

/* nazwa branży i strzałka w jednym wierszu: tekst po lewej, strzałka po prawej */
.wp-block-kadence-column.ss-dark-tile h2.ss-dark-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.wp-block-kadence-column.ss-dark-tile h2.ss-dark-tile::after {
  content: "";
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background-color: var(--ss-on-dark-accent);
  -webkit-mask: var(--ss-arrow) no-repeat center / 16px 16px;
          mask: var(--ss-arrow) no-repeat center / 16px 16px;
  transition: transform var(--ss-ease);
  pointer-events: none;
}

/* hover i fokus klawiatury */
.wp-block-kadence-column.ss-dark-tile:hover,
.wp-block-kadence-column.ss-dark-tile:focus-within { background-color: var(--ss-dark-hover) !important; }
.wp-block-kadence-column.ss-dark-tile:hover h2.ss-dark-tile::after,
.wp-block-kadence-column.ss-dark-tile:focus-within h2.ss-dark-tile::after { transform: translateX(4px); }

/* nazwa branży: zawsze biała (globalny hover motywu to ciemny fiolet) */
.wp-block-kadence-column.ss-dark-tile .wp-block-kadence-advancedheading a,
.wp-block-kadence-column.ss-dark-tile .wp-block-kadence-advancedheading a:hover,
.wp-block-kadence-column.ss-dark-tile .wp-block-kadence-advancedheading a:focus,
.wp-block-kadence-column.ss-dark-tile .wp-block-kadence-advancedheading a:visited {
  color: var(--ss-white) !important;
  text-decoration: none !important;
}

/* niewidoczna warstwa linku z nagłówka na cały kafelek */
.wp-block-kadence-column.ss-dark-tile .wp-block-kadence-advancedheading a::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2;
  border-radius: var(--ss-radius);
}

/* obrys przy nawigacji klawiaturą – na całym kafelku */
.wp-block-kadence-column.ss-dark-tile .wp-block-kadence-advancedheading a:focus-visible { outline: none; }
.wp-block-kadence-column.ss-dark-tile .wp-block-kadence-advancedheading a:focus-visible::after {
  outline: 2px solid var(--ss-on-dark-accent);
  outline-offset: 2px;
}

/* Siatka zawsze 3 w rzędzie (Row Layout: ss-tiles-3).
   Kadence nie ma takiego ustawienia; odstępy ustawiasz w panelu (Gutter). */
.kb-row-layout-wrap.ss-tiles-3 > .kt-row-column-wrap {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
.kb-row-layout-wrap.ss-tiles-3 .kt-inside-inner-col {
  height: 100%;
}