/* ============================================================
   Mannschaftsseiten: Heimspiele und Spielberichte  ([scm_team])

   Nur der Rahmen steht hier. Die Karten (.scm-cards/.scm-card),
   die Berichtszeilen (.scm-reports/.scm-report) und die
   Abschnittskoepfe (.scm-section-head) kommen aus der custom.css
   des Themes und sind auf Startseite und Beitragsseite dieselben.

   Eigene Datei statt custom.css: Avadas CSS-Compiler hat von dort
   wiederholt einzelne Regeln nicht ausgeliefert, ohne Fehler. Das
   Plugin laedt diese Datei direkt - dadurch ist auch :has()
   erlaubt, was Avadas Compiler nicht lesen kann.
   ============================================================ */

/* Der Innenabstand liegt hier, nicht am Avada-Container: Gibt der
   Shortcode nichts aus, soll an der Stelle auch kein leerer Block
   mit Abstand stehenbleiben. Der Container selbst bekommt im
   Builder deshalb 0 px oben und unten. */
.scm-tm {
  padding-block: 56px;
}

.scm-tm__band + .scm-tm__band {
  margin-top: 56px;
}

/* ------------------------------------------------------------
   Reiter, wenn eine Seite mehrere Mannschaften zeigt

   Die C-Junioren-Seite steht fuer zwei Mannschaften. Beide
   untereinander zu stellen hiesse zweimal "Naechste Heimspiele"
   direkt hintereinander - das liest sich wie ein Fehler.

   Ohne JavaScript geloest: je Mannschaft ein Radio-Knopf, seine
   Beschriftung das Label, sein Inhalt die Flaeche direkt dahinter.
   Sichtbar ist die Flaeche hinter dem angehakten Knopf. Rein
   ueber die Nachbarschaft, ohne Nummern - damit beliebig viele
   Mannschaften moeglich sind.

   flex + order hebt alle Beschriftungen ueber alle Flaechen,
   obwohl sie im Quelltext paarweise stehen. Das Paar muss
   beieinander bleiben, sonst greift der Nachbar-Selektor nicht.
   ------------------------------------------------------------ */

.scm-tm--tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
}

/* Der Knopf selbst bleibt bedienbar, nur unsichtbar: display:none
   naehme ihn aus der Tastaturreihenfolge, und damit funktionierten
   auch die Pfeiltasten nicht mehr. */
.scm-tm--tabs .scm-tm__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.scm-tm--tabs .scm-tm__tab {
  order: 1;
  margin: 0;
  padding: 9px 20px;
  border-radius: 999px;
  background-color: var(--color-surface-container-high);
  cursor: pointer;
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  transition: background-color 0.18s ease, color 0.18s ease;
  user-select: none;
}

.scm-tm--tabs .scm-tm__tab:hover {
  color: var(--color-primary);
}

.scm-tm--tabs .scm-tm__radio:checked + .scm-tm__tab {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

/* Tastaturfokus liegt auf dem unsichtbaren Knopf - sichtbar machen
   muss ihn die Beschriftung daneben. */
.scm-tm--tabs .scm-tm__radio:focus-visible + .scm-tm__tab {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.scm-tm--tabs .scm-tm__panel {
  order: 2;
  display: none;
  width: 100%;
}

.scm-tm--tabs .scm-tm__radio:checked + .scm-tm__tab + .scm-tm__panel {
  display: block;
}

/* Die Reiterzeile sitzt oben in der Bahn, der Innenabstand liegt
   am Rahmen - deshalb hier nur der Abstand nach unten. */
.scm-tm--tabs .scm-tm__panel {
  margin-top: 22px;
}

@media (prefers-reduced-motion: reduce) {
  .scm-tm--tabs .scm-tm__tab {
    transition: none;
  }
}

@media (max-width: 639px) {
  .scm-tm--tabs .scm-tm__tab {
    flex: 1 1 auto;
    padding-inline: 12px;
    text-align: center;
  }
}

/* ---- Weniger als drei Karten ----
   .scm-cards steht im Theme fest auf drei gleiche Spalten. Hat eine
   Mannschaft nur ein oder zwei Heimspiele vor sich, schrumpfte die
   Karte sonst auf ein Drittel und die Zeile wirkte abgeschnitten.
   Ab der dritten Karte gilt wieder das Drittel-Raster. */
.scm-tm .scm-cards {
  grid-template-columns: repeat(auto-fit, minmax(260px, 420px)) !important;
  justify-content: start !important;
}

.scm-tm .scm-cards:has(.scm-card:nth-child(3)) {
  grid-template-columns: repeat(3, 1fr) !important;
}

/* ------------------------------------------------------------
   Weiterfuehrender Link ("Alle Termine", "Alle Berichte")

   Nicht an .scm-tm gebunden: Dieselbe Form steht auch unter den
   Spielberichten der Startseite, die aus [scm_reports] kommen.
   Deshalb laedt diese Datei auch dort.
   ------------------------------------------------------------ */

.scm-more,
.post-content .scm-more {
  margin: 22px 0 0 !important;
  text-align: right;
}

.scm-more a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-primary) !important;
}

.scm-more a:hover {
  text-decoration: underline;
}

/* Der Pfeil wandert beim Zeigen mit, wie an den Kartenfuessen. */
.scm-more svg {
  transition: transform 0.2s ease;
}

.scm-more a:hover svg {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .scm-more svg {
    transition: none;
  }
}

/* ---- Schmale Schirme ---- */
@media (max-width: 860px) {
  .scm-tm {
    padding-block: 40px;
  }
  .scm-tm__band + .scm-tm__band {
    margin-top: 40px;
  }
}

@media (max-width: 639px) {
  .scm-tm .scm-cards,
  .scm-tm .scm-cards:has(.scm-card:nth-child(3)) {
    grid-template-columns: 1fr !important;
  }
  .scm-more {
    text-align: left;
  }
}