/* Funkbereich v3.2.2 – scoped responsive layout
   Loaded after app.css on Funk pages so legacy rules cannot pull cards apart. */

.funk-page,
.funk-page *,
.funk-page *::before,
.funk-page *::after {
  box-sizing: border-box;
}

.funk-page {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-inline: auto;
  overflow-x: clip;
}

.funk-page-hub { max-width: 980px; }
.funk-page-texts { max-width: 920px; }
.funk-page-practice { max-width: 1080px; }
.funk-page-videos { max-width: 1040px; }

.funk-page > *,
.funk-page .panel,
.funk-page section,
.funk-page article,
.funk-page div,
.funk-page label {
  min-width: 0;
  max-width: 100%;
}

.funk-page .panel {
  width: 100%;
}

.funk-page h1,
.funk-page h2,
.funk-page h3,
.funk-page p,
.funk-page span,
.funk-page strong,
.funk-page small {
  max-width: 100%;
}

.funk-page p,
.funk-page small,
.funk-page .muted,
.funk-page .recording-status,
.funk-page .speech-preview,
.funk-page .nato-feedback,
.funk-page .nato-solution {
  overflow-wrap: anywhere;
}

.funk-page input,
.funk-page select,
.funk-page textarea,
.funk-page audio,
.funk-page .recording-player,
.funk-page input[type="range"] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.funk-page .button {
  max-width: 100%;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}

/* ---------- Funk overview ---------- */
.funk-page-hub .radio-quick-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.funk-page-hub .funk-module-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---------- Official SRC text card ---------- */
.funk-page-texts .radio-text-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px;
  width: 100%;
}

.funk-page-texts .src-official-text-card {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

/* Critical fix: old .src-text-trainer used "auto 1fr". All official trainer
   sections must always stack vertically, on desktop and mobile. */
.funk-page-texts .src-text-trainer-layout,
.funk-page-texts #srcTextTrainer {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 14px !important;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-top: 14px;
  padding: 0 !important;
  background: transparent !important;
}

.funk-page-texts #srcTextTrainer > * {
  grid-column: 1 / -1 !important;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.funk-page-texts .src-text-topline {
  display: flex !important;
  align-items: center;
  gap: 12px;
}

.funk-page-texts .src-text-topline > div:last-child {
  flex: 1 1 auto;
  min-width: 0;
}

.funk-page-texts .src-text-number {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  margin: 0;
  font-size: 1.55rem;
}

/* Text, direction and loop mode stay aligned on wide screens. */
.funk-page-texts .src-text-selection-toolbar {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px;
  align-items: end;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 12px;
}

.funk-page-texts .src-text-selection-toolbar > .small,
.funk-page-texts .src-text-selection-toolbar > span {
  grid-column: 1 / -1;
}

.funk-page-texts .src-listen-toolbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
  gap: 10px;
  width: 100%;
  margin: 0;
}

.funk-page-texts .speech-rate-label {
  width: 100%;
  min-width: 0 !important;
}

.funk-page-texts .src-audio-provider-status {
  margin: 2px 0 0;
  padding: 9px 11px;
  border: 1px solid var(--border, #d9e2e8);
  border-radius: 10px;
  background: var(--surface-soft, rgba(127, 127, 127, 0.06));
}

.funk-page-texts #srcWakeLockToggle[aria-pressed="true"],
.funk-page-texts #srcLoopToggle[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px currentColor;
  font-weight: 700;
}

/* The official text box is a vertical block, never a grid column partner. */
.funk-page-texts .src-official-text-box {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 6px !important;
  width: 100%;
  min-width: 0;
  margin: 0;
}

.funk-page-texts .src-covered-text-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
}

.funk-page-texts .src-sync-text-view {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 180px;
  max-height: min(44vh, 360px);
  margin: 0;
  padding: 14px;
  overflow-x: hidden;
  overflow-y: auto;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.75;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.funk-page-texts .src-sync-word {
  white-space: normal;
}

.funk-page-texts .src-text-cover {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* Seekbar is physically nested directly below the text, so no grid/margin trick can move it. */
.funk-page-texts .src-official-text-box .src-playback-seek {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0 !important;
  padding: 12px;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.funk-page-texts .src-seek-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.funk-page-texts .src-seek-header > * {
  min-width: 0;
}

.funk-page-texts .src-text-seek {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0;
}

.funk-page-texts .src-seek-actions {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.funk-page-texts .src-seek-actions .small {
  min-width: 0;
  text-align: center;
  overflow-wrap: anywhere;
}

/* Main action buttons never widen their parent. */
.funk-page-texts .src-play-main-buttons {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.funk-page-texts .src-play-main-buttons .button,
.funk-page-texts .src-text-progress-buttons .button,
.funk-page-texts .src-vocab-card .button-row .button,
.funk-page-texts .funk-bottom-nav .button-row .button {
  width: 100%;
  min-width: 0;
}

.funk-page-texts .local-recording-box,
.funk-page-texts .src-text-solution {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.funk-page-texts .src-text-solution p {
  overflow-wrap: anywhere;
}

.funk-page-texts .src-text-progress-buttons {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

/* ---------- Vocabulary trainer ---------- */
.funk-page-texts .src-vocab-trainer {
  width: 100%;
  min-width: 0;
  margin-top: 4px;
}

.funk-page-texts .src-vocab-toolbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  width: 100%;
}

.funk-page-texts .src-vocab-toolbar label {
  min-width: 0;
}

.funk-page-texts .src-vocab-card {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.funk-page-texts .src-vocab-card .button-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.funk-page-texts .src-vocab-front > strong,
.funk-page-texts .src-vocab-back > strong {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* ---------- Free speech trainer ---------- */
.funk-page-texts .speech-preset-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.funk-page-texts .speech-preset-row .button {
  width: 100%;
}

.funk-page-texts .radio-speech-text {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  resize: vertical;
}

.funk-page-texts .radio-text-grid > .panel > .button-row,
.funk-page-texts .nato-card > .button-row,
.funk-page-texts .funk-bottom-nav .button-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

/* ---------- NATO ---------- */
.funk-page-texts .nato-trainer-panel {
  width: 100%;
  margin-top: 16px;
  overflow: hidden;
}

.funk-page-texts .nato-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px;
  width: 100%;
}

.funk-page-texts .nato-card {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.funk-page-texts .nato-mode-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
}

.funk-page-texts .nato-mini-table {
  width: 100%;
  min-width: 0;
}

/* ---------- Practice radio ---------- */
.funk-page-practice .radio-practice-grid {
  display: grid !important;
  grid-template-columns: minmax(210px, 270px) minmax(0, 1fr) !important;
  gap: 14px;
  width: 100%;
}

.funk-page-practice .radio-device-panel,
.funk-page-practice .radio-device-shell,
.funk-page-practice .radio-center-stack,
.funk-page-practice .radio-right-cluster,
.funk-page-practice .radio-bottom-controls,
.funk-page-practice .radio-controller-grid {
  min-width: 0;
  max-width: 100%;
}

.funk-page-practice .radio-device-panel {
  width: 100%;
  overflow: hidden;
}

/* ---------- Videos ---------- */
.funk-page-videos .individual-video-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.funk-page-videos .individual-video-card,
.funk-page-videos .individual-video-body,
.funk-page-videos .video-thumb-button,
.funk-page-videos .individual-player-wrap {
  min-width: 0;
  max-width: 100%;
}

/* ---------- Tablet / phone ---------- */
@media (max-width: 900px) {
  .funk-page-hub .radio-quick-grid,
  .funk-page-hub .funk-module-grid,
  .funk-page-texts .nato-grid,
  .funk-page-videos .individual-video-grid,
  .funk-page-practice .radio-practice-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .funk-page-practice .radio-practice-settings {
    position: static !important;
  }
}

@media (max-width: 700px) {
  .funk-page .panel {
    padding: 13px !important;
    border-radius: 14px;
  }

  .funk-page .page-heading {
    margin: 0 2px 12px;
  }

  .funk-page .page-heading h1 {
    font-size: 27px;
    overflow-wrap: anywhere;
  }

  .funk-page .page-heading p {
    font-size: 14px;
    line-height: 1.45;
  }

  .funk-page-texts .src-text-topline {
    align-items: flex-start;
  }

  .funk-page-texts .src-text-number {
    flex-basis: 54px;
    width: 54px;
    height: 54px;
    font-size: 1.35rem;
  }

  .funk-page-texts .src-text-selection-toolbar,
  .funk-page-texts .src-listen-toolbar,
  .funk-page-texts .src-vocab-toolbar,
  .funk-page-texts .nato-mode-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .funk-page-texts .src-sync-text-view {
    min-height: 145px;
    max-height: 42vh;
    padding: 11px;
    font-size: 15px;
    line-height: 1.68;
  }

  .funk-page-texts .src-official-text-box .src-playback-seek {
    margin: 0 !important;
    padding: 10px;
  }

  .funk-page-texts .src-seek-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }

  .funk-page-texts .src-seek-actions .small {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .funk-page-texts .src-seek-actions .button,
  .funk-page-texts .src-listen-toolbar .button {
    width: 100%;
  }

  .funk-page-texts .src-play-main-buttons,
  .funk-page-texts .src-text-progress-buttons,
  .funk-page-texts .src-vocab-card .button-row,
  .funk-page-texts .radio-text-grid > .panel > .button-row,
  .funk-page-texts .nato-card > .button-row,
  .funk-page-texts .funk-bottom-nav .button-row,
  .funk-page-texts .speech-preset-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .funk-page-texts .nato-mini-table {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .funk-page-practice .radio-device-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .funk-page-practice .radio-speaker-grill,
  .funk-page-practice .radio-mic-visual {
    display: none !important;
  }

  .funk-page-practice .radio-display {
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }

  .funk-page-practice .radio-display-status {
    text-align: left;
    white-space: normal;
  }

  .funk-page-practice .radio-bottom-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .funk-page-practice .radio-right-cluster,
  .funk-page-practice .radio-distress-area,
  .funk-page-practice .radio-controller-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .funk-page-practice .radio-distress-area {
    position: static !important;
    width: auto !important;
    margin: 0 !important;
  }

  .funk-page-practice .radio-key,
  .funk-page-practice .radio-key.small,
  .funk-page-practice .radio-key.dial-key {
    min-width: 0 !important;
    width: 100%;
    border-radius: 10px;
  }
}

@media (max-width: 430px) {
  .funk-page .panel {
    padding: 11px !important;
  }

  .funk-page-texts .src-play-main-buttons,
  .funk-page-texts .src-text-progress-buttons,
  .funk-page-texts .src-vocab-card .button-row,
  .funk-page-texts .radio-text-grid > .panel > .button-row,
  .funk-page-texts .nato-card > .button-row,
  .funk-page-texts .funk-bottom-nav .button-row,
  .funk-page-texts .speech-preset-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .funk-page-texts .nato-mini-table {
    grid-template-columns: minmax(0, 1fr);
  }

  .funk-page-practice .radio-bottom-controls,
  .funk-page-practice .radio-right-cluster,
  .funk-page-practice .radio-distress-area,
  .funk-page-practice .radio-controller-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}