/* Klubist-leht. Kasutab olemasolevaid ds-* klasse; siin ainult paigutus.
   Mobiil (360px) on vaikimisi — ühe veeru kuju, meediapäring laiendab. */

.kl-page { padding-bottom: 3rem; }

.kl-hero { padding: 2rem 0 1.5rem; }
.kl-hero h1 { margin: .25rem 0 .75rem; line-height: 1.15; }
.kl-lead { font-size: 1.05rem; line-height: 1.6; max-width: 46rem; }
.kl-cta { margin-top: 1.25rem; display: inline-flex; align-items: center; gap: .5rem; }

.kl-section { padding: 1.75rem 0; border-top: 1px solid var(--gray-300); }
.kl-section > h2 { margin: 0 0 1rem; }

.kl-grid { display: grid; grid-template-columns: 1fr; gap: .75rem; }
.kl-card { padding: 1rem; }
.kl-card h3 { margin: 0 0 .4rem; font-size: 1rem; }
.kl-card p { margin: 0; line-height: 1.55; }

.kl-steps { margin: 0; padding-left: 1.25rem; line-height: 1.7; }
.kl-steps li { margin-bottom: .4rem; }

.kl-faq { display: grid; gap: .5rem; }
.kl-faq-item { padding: .75rem 1rem; }
.kl-faq-item summary { cursor: pointer; list-style: none; }
.kl-faq-item summary::-webkit-details-marker { display: none; }
.kl-faq-item summary h3 { display: inline; margin: 0; font-size: 1rem; }
.kl-faq-item p { margin: .6rem 0 0; line-height: 1.6; }

.kl-numbers {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem;
    margin-bottom: 1.25rem;
}

.kl-members-note { font-size: .85rem; color: var(--gray-500); margin: 0 0 .5rem; }
.kl-members {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: .3rem .75rem;
    font-size: .9rem;
}

@media (min-width: 640px) {
    .kl-grid { grid-template-columns: repeat(2, 1fr); }
    .kl-numbers { grid-template-columns: repeat(4, 1fr); }
    .kl-members { grid-template-columns: repeat(3, 1fr); }
}