/* =============================================================
   SCBIS 2026 – Component Stylesheet
   Complements Tailwind CDN. Define semantic component classes
   here so templates don't have to repeat long utility strings.
   ============================================================= */

/* ----------------------------------------------------------
   Design tokens
   ---------------------------------------------------------- */
:root {
  /* Brand accent (yellow-300 / yellow-200 on hover) */
  --clr-accent:        #fde047;
  --clr-accent-hover:  #fef08a;

  /* Surface layers (neutral-950 → 900/40 → 900) */
  --clr-surface:       #0a0a0a;
  --clr-card:          rgba(23, 23, 23, 0.40);
  --clr-card-hover:    #171717;

  /* Borders & text */
  --clr-border:        #262626; /* neutral-800  */
  --clr-border-subtle: #404040; /* neutral-700  */
  --clr-text-body:     #d4d4d4; /* neutral-300  */
  --clr-text-muted:    #a3a3a3; /* neutral-400  */

  /* Layout */
  --max-w-page:   72rem;   /* max-w-6xl */
  --max-w-narrow: 36rem;   /* short forms — see .card-narrow */
  --px-page:      1rem;    /* px-4      */
  --py-section:   2.5rem;  /* py-10     */

  /* Radii */
  --radius-card:  1rem;    /* rounded-2xl */
  --radius-btn:   0.75rem; /* rounded-xl  */
  --radius-badge: 9999px;

  /* Transitions */
  --transition: 150ms ease;
}

/* ----------------------------------------------------------
   Flash messages  —  rendered by $this->Flash->render() in layout
   ---------------------------------------------------------- */
.message {
  max-width: var(--max-w-page);
  margin-inline: auto;
  margin-top: 1.5rem;
  padding: 0.875rem var(--px-page);
  padding-right: 2.5rem; /* space for the × */
  border-radius: 0.75rem;
  border: 1px solid;
  font-size: 0.875rem;
  line-height: 1.5;
  position: relative;
  cursor: pointer;
}
.message::after {
  content: '×';
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  font-size: 1.25rem;
  line-height: 1;
  opacity: 0.6;
}
.message.error {
  background-color: rgba(239, 68, 68, 0.12);
  border-color:     rgba(239, 68, 68, 0.35);
  color: #fca5a5;
}
.message.success {
  background-color: rgba(34, 197, 94, 0.12);
  border-color:     rgba(34, 197, 94, 0.35);
  color: #86efac;
}
.message.warning {
  background-color: rgba(253, 224, 71, 0.12);
  border-color:     rgba(253, 224, 71, 0.35);
  color: #fef08a;
}

/* ----------------------------------------------------------
   Page section wrapper  →  mx-auto max-w-6xl px-4 py-10
   ---------------------------------------------------------- */
.page-section {
  margin-inline: auto;
  max-width: var(--max-w-page);
  padding-inline: var(--px-page);
  padding-block: var(--py-section);
}

/* ----------------------------------------------------------
   Section header row  →  flex items-center justify-between
   Use:  <div class="section-header"> <h2>…</h2> <a>…</a> </div>
   ---------------------------------------------------------- */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* margin-bottom intentionally omitted — use Tailwind mb-* per page */
}

/* ----------------------------------------------------------
   Hero section  →  bg-gradient-to-b from-neutral-950 to-neutral-900
   ---------------------------------------------------------- */
.hero {
  background-image: linear-gradient(to bottom, #0a0a0a, #171717);
}

.hero > .page-section {
  /* override vertical padding for hero if needed */
  padding-block: var(--py-section);
}

/* Fanclub-Wappen in der linken Hero-Spalte. Breite in rem, damit es mit der
   Typografie skaliert, und gedeckelt, damit es die Highlight-Kachel daneben
   nicht verdrängt. */
.hero-logo {
  display: block;
  width: 100%;
  max-width: 14rem;
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.55));
}

@media (min-width: 640px) {
  .hero-logo { max-width: 18rem; }
}

/* ----------------------------------------------------------
   Cards  →  rounded-2xl border border-neutral-800 bg-neutral-900/40
   .card             — p-5  (news preview, trip link rows)
   .card.card-lg     — p-6  (article, trip highlight box)
   .card.card-narrow — caps width for short standalone forms
                       (login, password, contact, bet). Never use on a
                       card that sits above/below a full-width card —
                       the edges would not line up.
   ---------------------------------------------------------- */
.card {
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border, var(--clr-border));
  background-color: var(--clr-card);
  padding: 1.25rem;
  transition: background-color var(--transition);
}

.card.card-lg { padding: 1.5rem; }

.card.card-narrow { max-width: var(--max-w-narrow); }

/* Hover only on clickable cards. A container card (form, table, panel) that
   lights up under the cursor reads as if the whole panel were a link — and it
   swallows the hover of any smaller link row nested inside it. */
a.card:hover,
button.card:hover { background-color: var(--clr-card-hover); }

/* ----------------------------------------------------------
   Buttons
   ---------------------------------------------------------- */
.btn {
  display: inline-block;
  border-radius: var(--radius-btn);
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition);
}

/* Primary  →  bg-yellow-300 text-neutral-950 hover:bg-yellow-200 */
.btn-primary {
  background-color: var(--clr-accent);
  color: #0a0a0a;
}
.btn-primary:hover { background-color: var(--clr-accent-hover); }

/* Secondary  →  border border-neutral-700 hover:border-neutral-500 */
.btn-secondary {
  border: 1px solid var(--clr-border-subtle);
  color: inherit;
}
.btn-secondary:hover { border-color: #737373; }

/* Danger  —  destructive actions (delete). Outlined, not filled, so it
   never competes with the primary CTA for attention. */
.btn-danger {
  border: 1px solid rgba(239, 68, 68, 0.35);
  background-color: rgba(239, 68, 68, 0.10);
  color: #fca5a5;
}
.btn-danger:hover {
  border-color: rgba(239, 68, 68, 0.60);
  background-color: rgba(239, 68, 68, 0.18);
}

/* ----------------------------------------------------------
   Accent link  →  text-sm text-yellow-300 hover:underline
   ---------------------------------------------------------- */
.link-accent {
  color: var(--clr-accent);
  font-size: 0.875rem;
  text-decoration: none;
}
.link-accent:hover { text-decoration: underline; }

/* ----------------------------------------------------------
   Status badges / pills  →  inline-flex rounded-full px-2.5 py-1 text-xs
   ---------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-badge);
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  line-height: 1;
}

.badge-default  { background-color: #262626; color: #e5e5e5; }

.badge-warning  {
  background-color: rgba(253, 224, 71, 0.15);
  color: #fef08a;
  border: 1px solid rgba(253, 224, 71, 0.25);
}

.badge-danger   {
  background-color: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.badge-success  {
  background-color: rgba(34, 197, 94, 0.15);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.25);
}

/* ----------------------------------------------------------
   Pagination row  →  flex items-center justify-between mt-8 text-sm
   ---------------------------------------------------------- */
.pagination-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2rem;
  font-size: 0.875rem;
}
.pagination-row .page-counter { color: var(--clr-text-muted); }

/* ----------------------------------------------------------
   Data table  —  use inside a .card or .card-lg wrapper
   ---------------------------------------------------------- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.data-table thead th {
  padding: 0 0.75rem 0.75rem;
  text-align: left;
  color: var(--clr-text-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--clr-border);
}
.data-table tbody td {
  padding: 0.75rem;
  color: var(--clr-text-body);
  border-bottom: 1px solid var(--clr-border);
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background-color: rgba(255,255,255,0.03); }
.data-table td:first-child { color: #e5e5e5; font-weight: 500; }
.data-table tfoot td {
  padding: 0.75rem;
  border-top: 1px solid var(--clr-border-subtle);
    border-top-color: yellow;
    border-bottom: none;
  color: #e5e5e5;
  font-weight: 500;
}

/* ----------------------------------------------------------
   Data table — mobile behaviour

   Two ways to keep a wide table usable on a phone. Pick one per
   table; never both:

   .table-scroll  — wrapper element around the table. Below 640px it
                    cancels the card padding so the table can scroll
                    all the way to the screen edge — a table that stops
                    short of the edge does not look scrollable. Use for
                    compact numeric grids (timetables) where the column
                    layout itself carries meaning.

   .table-stack   — on the <table>, next to .data-table. Below 640px
                    each row collapses into its own block: first cell
                    becomes the headline, every other cell renders as
                    "label  value". Every <td> except the first needs a
                    data-label="…" attribute (keep those labels short —
                    the <thead> text is hidden, not reused). Use for
                    record-style tables (schedules, prices).
   ---------------------------------------------------------- */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll > .data-table { min-width: max-content; }

/* Content that only exists in stacked mode — e.g. folding a second column
   into the headline instead of giving it its own labelled row. */
.data-table .stack-only { display: none; }

@media (max-width: 640px) {
  /* Tighter cells buy roughly one extra column before scrolling starts. */
  .data-table { font-size: 0.8125rem; }
  .data-table thead th,
  .data-table tbody td,
  .data-table tfoot td {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .data-table th:first-child,
  .data-table td:first-child { padding-left: 0; }

  /* Bleed the scroll area out over the card padding. .card-lg must come
     second — same specificity as .card, so source order decides. */
  .card .table-scroll    { margin-left: -1.25rem; margin-right: -1.25rem; padding-left: 1.25rem; padding-right: 1.25rem; }
  .card-lg .table-scroll { margin-left: -1.5rem;  margin-right: -1.5rem;  padding-left: 1.5rem;  padding-right: 1.5rem; }

  /* --- stacked mode --- */
  .data-table.table-stack thead { display: none; }
  .data-table.table-stack,
  .data-table.table-stack tbody,
  .data-table.table-stack tfoot,
  .data-table.table-stack tr,
  .data-table.table-stack td {
    display: block;
    width: 100%;
  }
  /* Dividers sit on top of each row, not below it — that way a row can opt
     out of its own divider (see .stack-attach) without the row above having
     to know about it. */
  .data-table.table-stack tr {
    padding: 0.75rem 0;
    border-top: 1px solid var(--clr-border);
    border-bottom: none;
  }
  .data-table.table-stack tbody tr:first-child {
    padding-top: 0;
    border-top: none;
  }
  .data-table.table-stack tfoot tr { border-top-color: yellow; }
  /* A row that belongs to the row above it — e.g. the memo line under a
     participant. No divider, no gap, and it keeps its small muted styling
     instead of being promoted to a headline. */
  .data-table.table-stack tr.stack-attach {
    padding-top: 0;
    border-top: none;
  }
  .data-table.table-stack tr.stack-attach td { font-size: 0.8125rem; }
  .data-table.table-stack td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.125rem 0;
    border: none;
    text-align: right;
  }
  .data-table.table-stack td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--clr-text-muted);
    font-weight: 600;
    text-align: left;
  }
  /* First cell is the row headline: full width, no label. */
  .data-table.table-stack td:first-child {
    display: block;
    margin-bottom: 0.25rem;
    color: #e5e5e5;
    font-size: 0.9375rem;
    font-weight: 700;
    text-align: left;
  }
  .data-table.table-stack td:first-child::before { display: none; }
  /* Per-cell opt-outs: .stack-hide drops a column whose value was folded
     into the headline, .stack-only reveals the mobile-only counterpart. */
  .data-table.table-stack td.stack-hide { display: none; }
  .data-table.table-stack .stack-only { display: inline; }
  /* Row hover is a pointer affordance for real table rows — meaningless
     once a row is a stacked block. */
  .data-table.table-stack tbody tr:hover td { background-color: transparent; }
  /* The display rules above outrank normalize's [hidden] { display: none },
     so a row/cell hidden by a JS filter would reappear on mobile without
     this. Keep it last in the block. */
  .data-table.table-stack tr[hidden],
  .data-table.table-stack td[hidden] { display: none; }
}

/* ----------------------------------------------------------
   Photo gallery — album index thumbnails
   ---------------------------------------------------------- */
.gallery-thumb-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: opacity var(--transition);
}
a:hover .gallery-thumb-img { opacity: 0.75; }

/* Photo grid inside an album */
.gallery-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  cursor: pointer;
  border-radius: 0.5rem;
  transition: opacity var(--transition);
}
.gallery-img:hover { opacity: 0.65; }

/* Lightbox modal */
.lightbox {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.92);
  z-index: 9999;
  display: none;
  justify-content: center;
  align-items: center;
}
.lightbox-close {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  font-size: 2rem;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--transition);
}
.lightbox-close:hover { opacity: 1; }
.lightbox-img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 0.5rem;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.8);
}

/* ----------------------------------------------------------
   Participate registration cards  (state radio buttons)
   ---------------------------------------------------------- */
.participate-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 0.75rem;
  border-radius: 0.75rem;
  border: 2px solid var(--clr-border);
  background-color: var(--clr-card);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--transition), background-color var(--transition), color var(--transition);
}

.participate-card:hover {
  border-color: var(--clr-border-subtle);
  background-color: var(--clr-card-hover);
}

.participate-card--active {
  border-color: var(--clr-accent);
  background-color: rgba(253, 224, 71, 0.08);
}

.participate-card__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--clr-text-body);
}

.participate-card--active .participate-card__label {
  color: var(--clr-accent);
}

.participate-card--sm {
  padding: 0.5rem 0.875rem;
  flex-direction: row;
  gap: 0.5rem;
}

/* ----------------------------------------------------------
   Forms — dark theme inputs, labels, field wrappers
   ---------------------------------------------------------- */
.form-field { margin-bottom: 1.25rem; }

.form-field label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--clr-text-muted);
}

/* Spam-Schutz-Rechenaufgabe — the question is the label, so lift it out of the
   muted label styling to read as the task rather than a field caption */
.form-field label.captcha-question {
  color: var(--clr-text-body);
  font-weight: 600;
}

.form-input {
  display: block;
  width: 100%;
  margin-top: 0.375rem;
  background-color: #0a0a0a;
  border: 1px solid var(--clr-border);
  border-radius: 0.5rem;
  padding: 0.625rem 0.75rem;
  color: #e5e5e5;
  font-size: 0.875rem;
  transition: border-color var(--transition);
}

.form-input:focus {
  outline: none;
  border-color: var(--clr-accent);
}

/* Checkbox field  —  <?= $this->Form->control('x', ['containerOptions' => ['class' => 'form-check']]) ?>
   Cake nests the <input> inside the <label>, so the label carries the layout. */
.form-check { margin-bottom: 0.75rem; }

.form-check label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--clr-text-body);
  cursor: pointer;
}

.form-check input[type="checkbox"] {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--clr-accent);
  cursor: pointer;
}

.form-check label:hover { color: #e5e5e5; }

/* ----------------------------------------------------------
   Totomat — correct tip highlight
   ---------------------------------------------------------- */
.data-table tbody td.tip-correct {
  color: #86efac;
  font-weight: 700;
  background-color: rgba(34, 197, 94, 0.10);
}

/* ----------------------------------------------------------
   Post body (News) — float inline images left, text wraps right
   ---------------------------------------------------------- */
.post-body img {
  float: left;
  margin: 0.25rem 1.25rem 1rem 0;
  max-width: 40%;
  height: auto;
  border-radius: 0.5rem;
}

.post-body::after {
  content: '';
  display: table;
  clear: both;
}

/* ----------------------------------------------------------
   Article body (static pages) — right floating
   ---------------------------------------------------------- */
.article-body img {
  float: right;
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 0 0 0 0.5em;
}

.article-body p {
  margin: 0 0 0.85rem;
}

.article-body p:last-child {
  margin-bottom: 0;
}

/* Abschnitt eines mehrteiligen Artikels (h2 + Inhalt) */
.article-section {
  /* Abstand zum nicht mitscrollenden Seitenkopf beim Anspringen */
  scroll-margin-top: 1.5rem;
}

.article-section + .article-section {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--clr-border);
}

/* hebt den Float des Vorstellungsbilds auf, damit er nicht in den
   nächsten Abschnitt läuft */
.article-section::after {
  content: '';
  display: table;
  clear: both;
}

/* wie die h1 der Seite (text-3xl/font-extrabold/tracking-tight), nur eine
   Stufe kleiner */
.article-heading {
  margin: 0 0 1rem;
  font-size: 1.625rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #fafafa;
}

/* ----------------------------------------------------------
   Committee grid (Vorstand) — portrait + contact block per person
   ---------------------------------------------------------- */
.committee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1rem;
}

.committee-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-card);
  background-color: var(--clr-card);
  transition: background-color var(--transition), border-color var(--transition);
}

.committee-card:hover {
  background-color: var(--clr-card-hover);
  border-color: var(--clr-border-subtle);
}

/* overrides the right-floating .article-body img default */
.article-body .committee-card img {
  float: none;
  flex: none;
  width: 5.75rem;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
  margin: 0;
  border-radius: 0.75rem;
  background-color: var(--clr-surface);
}

.committee-info {
  min-width: 0; /* allows long e-mail addresses to wrap */
}

.committee-role {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-accent);
}

.committee-name {
  margin-top: 0.125rem;
  font-size: 1rem;
  font-weight: 700;
  color: #fafafa;
}

.committee-address {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--clr-text-muted);
}

.committee-contact {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: 0.8125rem;
}

.committee-contact a {
  color: var(--clr-accent);
  overflow-wrap: anywhere;
}

.committee-contact a:hover {
  text-decoration: underline;
}

/* ----------------------------------------------------------
   Merchandise (Fanartikel) — Bild links, Beschreibung rechts
   ---------------------------------------------------------- */
.merch-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}

@media (min-width: 640px) {
  .merch-layout {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: 1.5rem;
  }
}

.merch-media {
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: var(--clr-surface);
}

/* hebt den .article-body-Float und den festen 4:3-Zuschnitt von .gallery-img
   auf — Fanartikel haben sehr unterschiedliche Seitenverhältnisse
   (Schal = Banner, Tasse = fast quadratisch) */
.article-body .merch-media .gallery-img {
  float: none;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  margin: 0;
}

.merch-info p {
  margin: 0 0 0.85rem;
}

.merch-price {
  margin: 0;
  font-weight: 700;
  color: var(--clr-accent);
}