/*
 * Gruppens kort, kortkoden [kbk_grupp] (docs/verksamheter.md).
 *
 * Björns Köks kort på alla sajter (Björn 2026-09-26): rubrik, en eller två
 * meningar och sist loggan centrerad bakom en tunn linje. Korten har ljus
 * yta, så att loggorna i original syns också på mörka sajter. Hela kortet är
 * länken, och korten står i två kolumner i mobilen och tre på surfplatta och
 * dator (Björn 2026-09-27).
 *
 * Formen bor här och är likadan överallt. Temat sätter bara färger och
 * typsnitt, med variablerna nedan, ur sajtens egen profil. Standardvärdena
 * är rent vitt och svart med genomskinlighet, som får användas på alla
 * sajter. Ingen annan regel i temat ska röra korten.
 *
 *   --kbk-grupp-yta              kortens yta, ljus (#ffffff)
 *   --kbk-grupp-text             brödtexten (#000000)
 *   --kbk-grupp-rubrik           rubriken (samma som texten)
 *   --kbk-grupp-kant             kanten runt kortet
 *   --kbk-grupp-linje            linjen ovanför loggan
 *   --kbk-grupp-typsnitt         brödtextens typsnitt (sidans)
 *   --kbk-grupp-rubrik-typsnitt  rubrikens typsnitt (sidans rubriker)
 *   --kbk-grupp-rubrik-storlek   rubrikens storlek (1.7rem)
 *   --kbk-grupp-rubrik-storlek-mobil  rubrikens storlek i mobilen (1.15rem)
 *   --kbk-grupp-radie            hörnen (12px)
 *   --kbk-grupp-knapp-yta        knappens färg, med knapp="" (#000000)
 *   --kbk-grupp-knapp-text       knappens text (#ffffff)
 */
.kbkGrupp {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
  margin: 2em 0 0;
}

.kbkGruppKort {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  background: var(--kbk-grupp-yta, #ffffff);
  color: var(--kbk-grupp-text, #000000);
  font-family: var(--kbk-grupp-typsnitt, inherit);
  border: 1px solid var(--kbk-grupp-kant, rgba(0, 0, 0, .12));
  border-radius: var(--kbk-grupp-radie, 12px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.kbkGruppKort:hover,
.kbkGruppKort:focus-visible {
  color: var(--kbk-grupp-text, #000000);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
}
.kbkGruppKort .kbkGruppNamn {
  margin: 0;
  font-family: var(--kbk-grupp-rubrik-typsnitt, inherit);
  font-size: var(--kbk-grupp-rubrik-storlek, 1.7rem);
  line-height: 1.15;
  color: var(--kbk-grupp-rubrik, var(--kbk-grupp-text, #000000));
}
.kbkGruppKort .kbkGruppText {
  flex: 1;
  margin: 0;
  font-size: .98rem;
  line-height: 1.5;
}
/* Kort med två längder: datorns text från 768 px, mobilens under. */
.kbkGruppKort .kbkGruppMobil { display: none; }
.kbkGruppKort .kbkGruppLogga {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--kbk-grupp-linje, rgba(0, 0, 0, .1));
}
.kbkGruppKort .kbkGruppLogga img {
  display: block;
  width: auto;
  height: auto;
  max-width: 180px;
  max-height: 72px;
  object-fit: contain;
}

/* Knappen, med knapp="Boka %s". Hela kortet är länken, knappen visar vart. */
.kbkGruppKort .kbkGruppKnapp {
  display: block;
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--kbk-grupp-knapp-yta, #000000);
  color: var(--kbk-grupp-knapp-text, #ffffff);
  border-radius: var(--kbk-grupp-radie, 12px);
  font-weight: 700;
  text-align: center;
}

/* Mobilen: två kolumner, så att kortet blir smalare och allt krymper med. */
@media (max-width: 767px) {
  .kbkGrupp { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kbkGruppKort { padding: 14px; gap: 6px; }
  .kbkGruppKort .kbkGruppNamn { font-size: var(--kbk-grupp-rubrik-storlek-mobil, 1.15rem); }
  .kbkGruppKort .kbkGruppText { font-size: .88rem; line-height: 1.45; }
  .kbkGruppKort .kbkGruppMobil { display: block; }
  .kbkGruppKort .kbkGruppDator { display: none; }
  .kbkGruppKort .kbkGruppLogga { height: 64px; margin-top: 10px; padding-top: 12px; }
  .kbkGruppKort .kbkGruppLogga img { max-width: 100%; max-height: 48px; }
}