/* ============================================================
   /clan — Community-Clan-Landingpage (14.09.2026)
   Baut auf dem Kampagnen-Layout von creator.css auf; hier nur die
   clan-spezifischen Bausteine (Showcase-Bild, Klassenreihe, CTA-Art).
   ============================================================ */

.clan-page .cr-hero__eyebrow { color: var(--cr-gold); }
.clan-page .cr-pillars { margin-top: 0; }
.clan-page > .cr-kicker { margin-bottom: 1rem; }
.clan-page .cr-hero__ctas .btn svg { width: 18px; height: 18px; }

/* --- Pillars: art brightens and zooms on hover ------------------ */
.clan-page .cr-pillar { transition: border-color 0.25s, transform 0.25s; }
.clan-page .cr-pillar__art { transition: opacity 0.35s ease, filter 0.35s ease, transform 0.6s ease; will-change: transform; }
.clan-page .cr-pillar:hover, .clan-page .cr-pillar:focus-within { border-color: rgba(196, 162, 78, 0.6); transform: translateY(-3px); }
.clan-page .cr-pillar__art { filter: brightness(1); }
.clan-page .cr-pillar__veil { transition: opacity 0.35s ease; }
.clan-page .cr-pillar:hover .cr-pillar__art, .clan-page .cr-pillar:focus-within .cr-pillar__art { opacity: 1; filter: brightness(1.35); transform: scale(1.06); }
.clan-page .cr-pillar:hover .cr-pillar__veil, .clan-page .cr-pillar:focus-within .cr-pillar__veil { opacity: 0.7; }
@media (prefers-reduced-motion: reduce) {
    .clan-page .cr-pillar, .clan-page .cr-pillar__art, .clan-class, .clan-class img { transition: none; }
    .clan-page .cr-pillar:hover .cr-pillar__art, .clan-class:hover img { transform: none; }
}

/* --- Showcase figure (single image, caption inside) ------------- */
.clan-show { padding-bottom: 0; }
.clan-fig { position: relative; min-height: 340px; border: 1px solid rgba(196, 162, 78, 0.28); border-radius: var(--border-radius-lg, 8px); background: #0f1015; overflow: hidden; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); }
.clan-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
.clan-fig::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15, 16, 21, 0.85) 0%, transparent 45%); pointer-events: none; }
.clan-fig__cap { position: absolute; left: 16px; right: 16px; bottom: 14px; top: auto; margin: 0; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; font-size: 0.95rem; color: var(--text-primary); font-weight: 700; }
.clan-fig__cap .cr-gal__label { position: static; }

/* --- Steps: no background motif here ---------------------------- */
.clan-page .cr-step__link { word-break: break-all; }

/* --- Class strip ------------------------------------------------ */
.clan-classes__grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0.75rem; }
.clan-classes__grid--7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.clan-class { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--border-radius-lg, 8px); overflow: hidden; border: 1px solid rgba(196, 162, 78, 0.25); background: #0f1015; transition: border-color 0.18s, transform 0.18s; }
.clan-class img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.clan-class__veil { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15, 16, 21, 0.95) 0%, transparent 55%); }
.clan-class__name { position: absolute; left: 0; right: 0; bottom: 12px; padding: 0 4px; text-align: center; font-family: var(--font-heading); font-size: 0.7rem; letter-spacing: 0; text-transform: uppercase; color: var(--text-primary); }
.clan-class:hover { border-color: rgba(196, 162, 78, 0.6); transform: translateY(-3px); }
.clan-class:hover img { transform: scale(1.04); }
.clan-class:focus-visible { outline: 2px solid var(--cr-gold); outline-offset: 3px; }

/* --- CTA band with art ----------------------------------------- */
.clan-band { position: relative; overflow: hidden; }
.clan-band__art { position: absolute; inset: 0; background: url('/assets/img/seasons/season12-hero.webp') center 30% / cover no-repeat; opacity: 0.35; }
.clan-band__art::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 120% at 50% 100%, rgba(165, 9, 5, 0.45) 0%, transparent 70%), linear-gradient(0deg, rgba(15, 16, 21, 0.6), rgba(15, 16, 21, 0.85)); }
.clan-band__inner { position: relative; }
.clan-band .btn svg { width: 18px; height: 18px; }

/* --- Responsive ------------------------------------------------- */
@media (max-width: 1023px) {
    .clan-classes__grid, .clan-classes__grid--7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .clan-fig { min-height: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 767px) {
    .clan-classes__grid, .clan-classes__grid--7 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .clan-page .cr-hero__ctas .btn { flex: 1 1 100%; }
    .clan-class__name { font-size: 0.9rem; }
}