@import 'index.css';

.club-hero { background-size: cover; background-position: center; height: 60vh; color: var(--rc-white); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.club-hero h1 { font-size: 3.5rem; }
.story-section { padding: 80px 20px; background: var(--rc-white); }
.story-block { display: flex; align-items: center; gap: 50px; margin-bottom: 80px; }
.story-block:last-child { margin-bottom: 0; }
.story-block.reverse { flex-direction: row-reverse; }
.story-image { flex: 1; }
.story-image img { width: 100%; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.story-text { flex: 1; }
.story-text h2 { font-size: 2.5rem; margin-bottom: 20px; color: var(--rc-blue); }
.story-text p { font-size: 1.1rem; line-height: 1.8; margin-bottom: 15px; }

@media (max-width: 768px) {
    .club-hero h1 { font-size: 2.5rem; }
    .story-block, .story-block.reverse { flex-direction: column; gap: 30px; }
}