/* استایل عمومی صفحه مجزای طبس - تم کویری اختصاصی */
@import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css');

:root {
    --color-primary: #7a3b12;
    --color-primary-light: #c9772e;
    --color-secondary: #e8a95e;
    --color-accent: #d9534f;
    --color-dark: #1a1410;
    --color-bg: #fbf6ef;
    --color-card: #ffffff;
    --color-text: #2a1d12;
    --color-text-muted: #7a6a5a;
    --color-border: #ecdfd0;
    --radius-lg: 18px;
    --radius-md: 12px;
    --radius-sm: 8px;
    --shadow-soft: 0 4px 20px rgba(122, 59, 18, 0.1);
    --shadow-strong: 0 10px 40px rgba(122, 59, 18, 0.2);
    --transition: all .25s ease;
}
* { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100%; }
body { margin:0; font-family:'Vazirmatn',Tahoma,sans-serif; background:var(--color-bg); color:var(--color-text); direction:rtl; text-align:right; line-height:1.8; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

.site-header { background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light)); color: #fff; position: sticky; top: 0; z-index: 100; }
.site-header .top-bar { display:flex; align-items:center; justify-content:space-between; flex-wrap: wrap; gap: 10px; padding:14px 0; }
.brand { display:flex; align-items:center; gap:12px; font-weight:700; font-size:1.2rem; min-width: 0; }
.brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand img { width:48px; height:48px; border-radius:50%; background:#fff; flex-shrink: 0; }
.main-nav ul { display:flex; flex-wrap: wrap; gap:6px; list-style:none; margin:0; padding:0; }
.main-nav a { padding:10px 16px; border-radius:8px; font-weight:500; }
.main-nav a:hover { background: rgba(255,255,255,.15); }

.hero-banner {
    background: linear-gradient(rgba(26,20,16,.6), rgba(26,20,16,.85)), url('https://images.unsplash.com/photo-1509316785289-025f5b846b35?q=80&w=1600') center/cover;
    color: #fff; padding: 80px 0; text-align: center;
}
.hero-banner h1 { font-size: 2.4rem; margin-bottom: 12px; }
.badge-tabas { display:inline-block; background: var(--color-secondary); color:#2a1d12; padding:6px 18px; border-radius:30px; font-weight:700; font-size:.85rem; margin-bottom:16px; }

.section { padding: 50px 0; }
.section-title h2 { font-size:1.5rem; border-right:5px solid var(--color-secondary); padding-right:14px; margin-bottom:26px; }

.clubs-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:20px; }
.club-card { background:var(--color-card); border-radius:var(--radius-md); text-align:center; padding:24px 16px; box-shadow:var(--shadow-soft); border-top:4px solid var(--color-secondary); transition:var(--transition); }
.club-card:hover { transform: translateY(-6px); }
.club-card img.club-logo { width:80px; height:80px; border-radius:50%; margin:0 auto 14px; object-fit:cover; }

.news-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:24px; }
.news-card { background:var(--color-card); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-soft); }
.news-card .thumb { height:170px; background-size:cover; background-position:center; }
.news-card .body { padding:18px; }

.btn { display:inline-block; padding:12px 26px; border-radius:var(--radius-sm); font-weight:700; background:var(--color-secondary); color:var(--color-dark); }

.site-footer { background: var(--color-dark); color:#cbb9a6; padding:40px 0 20px; margin-top:50px; text-align:center; }

/* واکنش‌گرا */
@media (max-width: 768px) {
    .hero-banner { padding: 50px 0; }
    .hero-banner h1 { font-size: 1.7rem; }
}
@media (max-width: 600px) {
    .container { padding: 0 14px; }
    .section { padding: 32px 0; }
    .brand { font-size: 1rem; }
    .brand img { width: 38px; height: 38px; }
    .main-nav ul { gap: 4px; }
    .main-nav a { padding: 8px 10px; font-size: .85rem; }
    .hero-banner { padding: 36px 0; }
    .hero-banner h1 { font-size: 1.4rem; }
    .clubs-grid, .news-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media (max-width: 400px) {
    .clubs-grid, .news-grid { grid-template-columns: 1fr; }
}