/* =========================================================================
   AI Club + terms pages — page-scoped styles on top of prompt.css + shell.
   White/glass panels only (matches the home hero); no gradient hero; SVG icons.
   Logical properties only (RTL-first).
   ========================================================================= */

/* skip link (same recipe as index.html) */
.skip-link {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    transform: translateY(-200%);
    transition: transform .2s ease;
    background: #066ac9;
    color: #fff;
    padding: 12px 18px;
    border-end-end-radius: 8px;
    font-weight: 700;
    z-index: 9999;
}
.skip-link:focus { transform: translateY(0); }

/* inline SVG icon */
.club-ico {
    width: 1.1em;
    height: 1.1em;
    flex: 0 0 auto;
    color: var(--primary-blue, #066ac9);
    vertical-align: -0.15em;
}
.meta-item .club-ico, .category-badge .club-ico { width: 1em; height: 1em; }

/* H1 kicker (Latin name under the Persian title) */
.club-kicker {
    display: block;
    margin-top: 10px;
    font-size: .55em;
    font-weight: 600;
    color: var(--text-secondary, #565a60);
    letter-spacing: .01em;
}

/* answer capsule sits right under the H1, same width as the article */
.club-capsule { max-width: 800px; margin: 0 auto 28px; }
.club-capsule .info-box { margin: 0; line-height: 2; }
.club-capsule .info-box strong { color: inherit; }

/* hero: image + white price panel */
.club-hero {
    display: grid;
    grid-template-columns: 1.25fr .9fr;
    gap: 24px;
    align-items: stretch;
    margin: 0 0 40px;
}
.club-hero-media {
    border-radius: var(--radius-lg, 28px);
    overflow: hidden;
    border: 1px solid #e6eaf0;
    box-shadow: 0 22px 50px -34px rgba(6, 106, 201, .5);
    background: #fff;
    min-width: 0;
}
.club-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.club-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 26px 24px;
    border-radius: var(--radius-lg, 28px);
    background: #fff;
    border: 1px solid #e6eaf0;
    box-shadow: 0 22px 50px -34px rgba(6, 106, 201, .5);
    min-width: 0;
}
.club-panel-label {
    margin: 0;
    font-size: .85rem;
    font-weight: 700;
    color: var(--text-secondary, #565a60);
}
.club-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin: 0;
}
.club-amount {
    font-size: 2.1rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--text-main, #1a1d21);
    line-height: 1.2;
}
.club-unit { font-size: 1rem; font-weight: 700; color: var(--text-secondary, #565a60); }
.club-deal {
    margin: 0;
    padding: 10px 14px;
    border-radius: var(--radius-sm, 14px);
    background: rgba(6, 106, 201, .07);
    border: 1px solid rgba(6, 106, 201, .22);
    color: #0555a1;
    font-size: .92rem;
    line-height: 1.9;
}
.club-deal s { color: #8a8f96; font-weight: 500; }
.club-deal strong { color: #0555a1; font-weight: 800; font-variant-numeric: tabular-nums; }
.club-deal code {
    font-family: inherit;
    font-weight: 800;
    background: #fff;
    border: 1px solid rgba(6, 106, 201, .3);
    border-radius: 6px;
    padding: 0 6px;
    direction: ltr;
    unicode-bidi: isolate;
}
.club-panel .btn { width: 100%; white-space: normal; text-align: center; }
.club-panel .btn .club-ico { color: #fff; }

.club-chips {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.club-chips li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: .9rem;
    line-height: 1.85;
    color: var(--text-secondary, #565a60);
}
.club-chips .club-ico { margin-top: 7px; }
.club-chips strong { color: var(--text-main, #1a1d21); font-weight: 800; }
.club-chips a { color: var(--primary-blue, #066ac9); text-decoration: underline; text-underline-offset: 3px; }
.club-note { margin: 0; font-size: .8rem; color: var(--muted, #8a8f96); text-align: center; }

/* feature / process lists inside the article (prompt.css paints a dot before
   every .article-content li — switch it off for these card-style lists) */
.article-content .club-feats,
.article-content .club-chips,
.article-content .club-steps { list-style: none; margin: 20px 0; padding: 0; }
.article-content .club-feats li::before,
.article-content .club-chips li::before,
.article-content .club-steps li::before { display: none; }
.article-content .club-feats li,
.article-content .club-steps li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin: 0 0 10px;
    border-radius: var(--radius-sm, 14px);
    background: rgba(255, 255, 255, .85);
    border: 1px solid #e6eaf0;
    line-height: 1.9;
}
.article-content .club-feats .club-ico,
.article-content .club-steps .club-ico { margin-top: 6px; width: 1.25em; height: 1.25em; }
.article-content .club-feats strong { display: block; }
.club-steps .club-step-n {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin-top: 4px;
    border-radius: 8px;
    background: rgba(6, 106, 201, .1);
    color: var(--primary-blue, #066ac9);
    font-weight: 800;
    font-size: .85rem;
    display: grid;
    place-items: center;
    font-variant-numeric: tabular-nums;
}

/* price panel reused inside the article (#price) */
.article-content .club-panel { margin: 24px 0; }
.article-content .club-panel p { margin: 0; }

/* terms page */
.club-terms h2 { font-size: 1.35rem; }
.club-terms .glass-table-wrapper td:first-child { font-weight: 700; white-space: nowrap; }

@media (max-width: 860px) {
    .club-hero { grid-template-columns: 1fr; gap: 18px; }
    .club-hero-media img { height: auto; }
}
@media (max-width: 768px) {
    .club-panel { padding: 22px 18px; }
    .club-amount { font-size: 1.8rem; }
    .club-terms .glass-table-wrapper td:first-child { white-space: normal; }
}