/* ─────────────────────────────────────────────────────────────
   صفحهٔ نخست (hp-*) — فایل مستقل، بدون نیاز به بیلدِ Tailwind.
   موبایل  : کاروسلِ پوسترِ بزرگ با دکمهٔ خرید روی پوستر + تب‌های متنی + بنر (الهام: سینماتیکت)
   دسکتاپ : بنرِ عریضِ تک‌اسلایدی + تب‌های قرصی + ردیف‌های کارت (الهام: فیدیبو آرت)
   نقطهٔ شکست: ۷۶۸px. رنگ‌ها از توکن‌های تم (--surface-bg/--surface-fg/--accent-rgb) می‌آیند تا Light/Dark هر دو درست باشند.
   ───────────────────────────────────────────────────────────── */

/* ترتیبِ بخش‌ها فقط از «صفحه‌ساز نخست» می‌آید (بدونِ جابه‌جاییِ CSS). */
.hp-flow { display: flex; flex-direction: column; }
.hp-flow > * { width: 100%; }


/* ═══════════ تب‌های دسته (همه | کنسرت | تئاتر | …) ═══════════ */
.hp-tabs { display: flex; gap: .35rem; margin: 0 0 1rem; padding: .35rem; border-radius: 999px; background: color-mix(in srgb, var(--surface-fg) 6%, transparent); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hp-tabs::-webkit-scrollbar { display: none; }
.hp-tab { flex: none; display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.15rem; border-radius: 999px; font-weight: 700; font-size: .92rem; line-height: 1.4; color: color-mix(in srgb, var(--surface-fg) 78%, transparent); text-decoration: none; white-space: nowrap; transition: background-color .18s, color .18s; }
.hp-tab svg, .hp-tab .hp-tab__ic { width: 1.15rem; height: 1.15rem; flex: none; }
.hp-tab:hover { background: color-mix(in srgb, var(--surface-fg) 9%, transparent); color: var(--surface-fg); }
.hp-tab.is-active { background: var(--surface-fg); color: var(--surface-bg); }
.hp-tab:focus-visible { outline: 2px solid rgb(var(--accent-rgb)); outline-offset: 2px; }
/* دسکتاپ: نوارِ قرصیِ وسط‌چین */
@media (min-width: 768px) {
    .hp-tabs { justify-content: center; max-width: max-content; margin: 1.5rem auto 0; }
}
.hp-banner-wrap { display: flex; flex-direction: column; }
/* موبایل: شبکهٔ آیکونیِ «دسته‌بندی‌ها» همان کار را می‌کند؛ تب‌ها فقط در دسکتاپ */
@media (max-width: 767.98px) {
    .hp-tabs { display: none; }
}
@media (max-width: 0px) {
    .hp-tabs { order: -1; background: none; padding: 0; gap: 0; border-radius: 0; margin: 0 -1.25rem 1rem; padding-inline: 1.25rem; border-bottom: 1px solid color-mix(in srgb, var(--surface-fg) 10%, transparent); }
    .hp-tab { padding: .7rem .9rem; border-radius: 0; font-size: .95rem; color: color-mix(in srgb, var(--surface-fg) 62%, transparent); border-bottom: 2.5px solid transparent; margin-bottom: -1px; }
    .hp-tab:hover { background: none; }
    .hp-tab.is-active { background: none; color: var(--surface-fg); border-bottom-color: rgb(var(--accent-rgb)); }
    .hp-tab svg, .hp-tab .hp-tab__ic { display: none; }
}

/* ═══════════ بنر ═══════════ */
.hp-banner-carousel { border-radius: 1.5rem; }
/* بدونِ این، در والدِ flex عرضِ کاروسل از محتوای خودش (اسلایدها) حساب می‌شد و بی‌نهایت می‌شد */
.hp-banner-wrap > .hp-banner-carousel { width: 100%; min-width: 0; max-width: 100%; }
.hp-banner-carousel .swiper-slide > a { aspect-ratio: 2 / 1; border-radius: 1.5rem; }
.hp-banner-carousel .swiper-slide img { height: 100% !important; width: 100%; object-fit: cover; }
@media (min-width: 768px) {
    .hp-banner-carousel .swiper-slide > a { aspect-ratio: 3 / 1; }
}
.hp-banner-carousel .swiper-button-prev,
.hp-banner-carousel .swiper-button-next { width: 2.7rem; height: 2.7rem; margin-top: -1.35rem; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #1b1830; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.hp-banner-carousel .swiper-button-prev::after,
.hp-banner-carousel .swiper-button-next::after { font-size: 1rem; font-weight: 800; }
.hp-banner-carousel .swiper-button-prev:hover,
.hp-banner-carousel .swiper-button-next:hover,
.hp-banner-carousel .swiper-button-prev:focus-visible,
.hp-banner-carousel .swiper-button-next:focus-visible { transform: scale(1.1); background: #fff; color: #5b3fd8; box-shadow: 0 0 0 4px rgba(91, 63, 216, .25), 0 6px 18px rgba(0, 0, 0, .3); }
.hp-banner-carousel .swiper-pagination { bottom: .75rem !important; }
.hp-banner-carousel .swiper-pagination-bullet { width: .5rem; height: .5rem; background: rgba(255, 255, 255, .7); opacity: 1; transition: width .2s, background-color .2s; }
.hp-banner-carousel .swiper-pagination-bullet-active { width: 1.4rem; border-radius: 999px; background: #fff; }

/* ═══════════ موبایل: کاروسلِ پوسترِ بزرگ ═══════════ */
.hpm { display: block; margin: -.25rem -1.25rem 0; }
.hpm__track { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .25rem 8vw .5rem; scroll-padding-inline: 8vw; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.hpm__track::-webkit-scrollbar { display: none; }
.hpm__slide { position: relative; flex: 0 0 84vw; max-width: 26rem; aspect-ratio: 4 / 5; scroll-snap-align: center; border-radius: 1.5rem; overflow: hidden; background: #18152a; isolation: isolate; box-shadow: 0 18px 36px -22px rgba(30, 20, 80, .7); }
.hpm__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hpm__media img { max-width: none; }
.hpm__link { position: absolute; inset: 0; z-index: 1; }
.hpm__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(10, 8, 24, .96) 0%, rgba(10, 8, 24, .78) 30%, rgba(10, 8, 24, 0) 62%); pointer-events: none; }
.hpm__tags { position: absolute; top: .75rem; inset-inline: .75rem; z-index: 2; display: flex; justify-content: space-between; gap: .5rem; pointer-events: none; }
.hpm__tag { padding: .22rem .7rem; border-radius: 999px; background: rgba(20, 16, 40, .66); backdrop-filter: blur(8px); color: #fff; font-size: .74rem; font-weight: 700; }
.hpm__tag--special { margin-inline-start: auto; background: #c8a45c; color: #2b2208; display: inline-flex; align-items: center; gap: .25rem; }
.hpm__tag--special svg { width: .78rem; height: .78rem; }
.hpm__body { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding: 0 1rem 1rem; display: flex; flex-direction: column; gap: .3rem; pointer-events: none; }
.hpm__title { margin: 0; font-family: 'Vazirmatn', system-ui, sans-serif; font-weight: 800; font-size: 1.28rem; line-height: 1.55; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .7); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hpm__meta { margin: 0; font-size: .86rem; color: #e6e2fb; }
.hpm__price { margin: 0 0 .35rem; font-size: .86rem; color: #cfc9ee; }
.hpm__price b { color: #fff; font-weight: 800; }
.hpm__cta { pointer-events: auto; display: flex; align-items: center; justify-content: center; gap: .4rem; width: 100%; padding: .75rem 1rem; font-size: 1rem; }
.hpm__dots { display: flex; justify-content: center; gap: .35rem; margin-top: .55rem; }
.hpm__dot { width: .45rem; height: .45rem; border-radius: 999px; background: color-mix(in srgb, var(--surface-fg) 22%, transparent); transition: width .2s, background-color .2s; }
.hpm__dot.is-on { width: 1.3rem; background: rgb(var(--accent-rgb)); }

/* جابه‌جاییِ موبایل/دسکتاپ داخلِ بخشِ «ویژه‌ها» */
.hp-fd { display: block; }
@media (max-width: 767.98px) {
    .hp-fd { display: none; }
    [data-home-row="featured"] { padding-block: 1rem .5rem; }
}
@media (min-width: 768px) {
    .hpm { display: none; }
}

/* ═══════════ بازطراحیِ صفحهٔ نخست (سندِ UX ۱۴۰۵/۰۷) ═══════════ */
.hp-flow { --hp-brand: #5b3fd8; --hp-teal: #00c2a8; --hp-pink: #ff4d8d; }

/* دکمه‌ها: سبزآبی = اقدامِ اصلی، شیشه‌ای/خط‌دار = ثانویه */
.hp-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .8rem 1.5rem; border-radius: .9rem; font-weight: 700; font-size: .95rem; line-height: 1.4; text-decoration: none; transition: transform .2s, filter .2s, background-color .2s; min-height: 2.9rem; }
.hp-btn--teal { background: linear-gradient(180deg, #1ec9ae, #04a68f); color: #fff; box-shadow: 0 10px 28px -12px rgba(0, 194, 168, .7), inset 0 1px 0 rgba(255, 255, 255, .35); }
.hp-btn--teal:hover { filter: brightness(1.06); transform: translateY(-1px); }
.hp-btn--ghost { border: 1px solid rgba(255, 255, 255, .38); color: #fff; background: rgba(255, 255, 255, .08); }
.hp-btn--ghost:hover { background: rgba(255, 255, 255, .16); }
.hp-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ── هیرو + جست‌وجو (همیشه تیره؛ رنگِ برند هویت می‌دهد) ── */
.hp-hero { position: relative; overflow: hidden; isolation: isolate; border-radius: 1.75rem; padding: 2.25rem 1.25rem 1.75rem; text-align: center; color: #fff; background: #0e0b1f; }
.hp-hero__glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(40rem 22rem at 85% -15%, rgba(91, 63, 216, .65), transparent 62%), radial-gradient(30rem 20rem at 0% 115%, rgba(255, 77, 141, .24), transparent 60%), linear-gradient(180deg, #17123a, #0e0b1f); }
.hp-hero__title { margin: 0; font-family: 'Vazirmatn', system-ui, sans-serif; font-weight: 800; font-size: 1.85rem; line-height: 1.5; color: #fff; text-wrap: balance; }
.hp-hero__sub { max-width: 40rem; margin: .6rem auto 0; font-size: .98rem; line-height: 1.9; color: #d9d4f5; }
.hp-search { position: relative; display: flex; align-items: center; gap: .5rem; max-width: 40rem; margin: 1.4rem auto 0; padding: .35rem; border-radius: 1.1rem; background: #fff; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6); color: #1b1830; }
.hp-search > svg { flex: none; width: 1.35rem; height: 1.35rem; margin-inline-start: .75rem; color: #6b6a85; }
.hp-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: #1b1830; font: inherit; font-size: 1rem; padding: .7rem .25rem; }
.hp-search input::placeholder { color: #85839c; }
.hp-search input:focus { outline: none; }
.hp-search:focus-within { box-shadow: 0 0 0 3px rgba(0, 194, 168, .55), 0 18px 40px -18px rgba(0, 0, 0, .6); }
.hp-search__btn { flex: none; border: 0; cursor: pointer; padding: .75rem 1.4rem; border-radius: .8rem; background: linear-gradient(180deg, #1ec9ae, #04a68f); color: #fff; font: inherit; font-weight: 700; font-size: .95rem; }
.hp-hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.1rem; }
@media (min-width: 768px) {
    .hp-hero { padding: 3.25rem 2rem 2.5rem; }
    .hp-hero__title { font-size: 2.7rem; }
    .hp-hero__sub { font-size: 1.1rem; }
}
@media (max-width: 480px) {
    .hp-hero { padding: 1.6rem 1rem 1.25rem; border-radius: 1.5rem; }
    .hp-hero__title { font-size: 1.6rem; }
    .hp-hero__sub { font-size: .9rem; line-height: 1.8; }
    .hp-search { margin-top: 1.1rem; }
    .hp-search input { font-size: .95rem; }
    .hp-search__btn { padding-inline: 1rem; }
    .hp-hero__cta { gap: .5rem; margin-top: .9rem; }
    .hp-hero__cta .hp-btn { flex: 1 1 calc(50% - .25rem); padding: .65rem .6rem; font-size: .88rem; min-height: 2.6rem; }
}

/* ── شهرها ── */
.hp-cities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; list-style: none; margin: 0; padding: 0; }
.hp-city { display: flex; align-items: center; gap: .7rem; padding: .75rem .85rem; border-radius: 1rem; border: 1px solid var(--panel-border); background: linear-gradient(180deg, var(--panel-bg-1), var(--panel-bg-2)); text-decoration: none; color: var(--surface-fg); transition: border-color .2s, transform .2s; }
.hp-city:hover { border-color: rgba(var(--accent-rgb), .5); transform: translateY(-2px); }
.hp-city__mark { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .8rem; color: #fff; background: linear-gradient(135deg, #5b3fd8, #8a70f5); }
.hp-city__mark svg { width: 1.25rem; height: 1.25rem; }
.hp-city__txt { display: flex; flex-direction: column; min-width: 0; }
.hp-city__txt b { font-weight: 800; font-size: .98rem; }
.hp-city__txt small { font-size: .78rem; color: color-mix(in srgb, var(--surface-fg) 62%, transparent); }
@media (min-width: 640px) { .hp-cities { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .hp-cities { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; } }

/* ── برگزارکنندگان ── */
.hp-orgs { display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; list-style: none; margin: 0; padding: 0; }
.hp-org { display: flex; align-items: center; gap: .85rem; padding: .9rem; height: 100%; border-radius: 1.1rem; border: 1px solid var(--panel-border); background: linear-gradient(180deg, var(--panel-bg-1), var(--panel-bg-2)); text-decoration: none; color: var(--surface-fg); transition: border-color .2s, transform .2s; }
.hp-org:hover { border-color: rgba(var(--accent-rgb), .5); transform: translateY(-2px); }
.hp-org__txt { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.hp-org__txt b { display: flex; align-items: center; gap: .3rem; font-weight: 800; font-size: .98rem; }
.hp-org__txt small { font-size: .8rem; line-height: 1.7; color: color-mix(in srgb, var(--surface-fg) 62%, transparent); }
.hp-org__txt em { font-style: normal; font-size: .8rem; font-weight: 700; color: rgb(var(--accent-rgb)); }
@media (min-width: 640px) { .hp-orgs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .hp-orgs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; } .hp-org { align-items: flex-start; flex-direction: column; } }

/* ── مسیرِ ویژهٔ برگزارکنندگان ── */
.hp-orgcta { display: grid; gap: 1.25rem; padding: 1.4rem; border-radius: 1.75rem; color: #fff; background: radial-gradient(34rem 18rem at 90% -20%, rgba(255, 77, 141, .28), transparent 60%), linear-gradient(135deg, #4a30c0, #5b3fd8 55%, #7a5fe8); }
.hp-orgcta h2 { margin: 0; font-family: 'Vazirmatn', system-ui, sans-serif; font-weight: 800; font-size: 1.6rem; line-height: 1.5; color: #fff; }
.hp-orgcta p { margin: .45rem 0 0; font-size: .95rem; line-height: 1.9; color: #e5e0ff; }
.hp-orgcta__benefits { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1rem 0 1.1rem; padding: 0; list-style: none; }
.hp-orgcta__benefits li { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .75rem; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: .82rem; font-weight: 600; }
.hp-orgcta__benefits svg { width: .9rem; height: .9rem; color: #7ff3e2; }
.hp-orgcta__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; align-content: start; }
.hp-orgcta__cards a { display: flex; flex-direction: column; gap: .2rem; padding: .8rem .9rem; border-radius: 1rem; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); color: #fff; text-decoration: none; transition: background-color .2s; }
.hp-orgcta__cards a:hover { background: rgba(255, 255, 255, .18); }
.hp-orgcta__cards b { font-size: .9rem; font-weight: 700; }
.hp-orgcta__cards small { font-size: .74rem; line-height: 1.7; color: #d9d4f5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 900px) { .hp-orgcta { grid-template-columns: 1.15fr 1fr; align-items: center; padding: 2.25rem; } .hp-orgcta h2 { font-size: 2.1rem; } }

/* ── راهنمای استفاده ── */
.hp-how { display: grid; gap: .9rem; }
.hp-how__col { padding: 1.1rem; border-radius: 1.25rem; border: 1px solid var(--panel-border); background: linear-gradient(180deg, var(--panel-bg-1), var(--panel-bg-2)); }
.hp-how__col h3 { margin: 0 0 .8rem; font-weight: 800; font-size: 1.05rem; color: rgb(var(--accent-rgb)); }
.hp-how__col ol { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.hp-how__col li { display: flex; align-items: flex-start; gap: .75rem; }
.hp-how__n { flex: none; display: grid; place-items: center; width: 1.85rem; height: 1.85rem; border-radius: 999px; background: rgba(var(--accent-rgb), .12); color: rgb(var(--accent-rgb)); font-weight: 800; font-size: .85rem; }
.hp-how__col b { display: block; font-size: .95rem; }
.hp-how__col small { display: block; font-size: .8rem; line-height: 1.7; color: color-mix(in srgb, var(--surface-fg) 62%, transparent); }
@media (min-width: 768px) { .hp-how { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; } .hp-how__col { padding: 1.4rem; } }

/* ── تحریریه ── */
.hp-edit { display: flex; gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; scrollbar-width: none; }
.hp-edit::-webkit-scrollbar { display: none; }
.hp-post { flex: 0 0 74%; scroll-snap-align: start; display: flex; flex-direction: column; gap: .35rem; padding: .6rem .6rem .9rem; border-radius: 1.1rem; border: 1px solid var(--panel-border); background: linear-gradient(180deg, var(--panel-bg-1), var(--panel-bg-2)); text-decoration: none; color: var(--surface-fg); transition: border-color .2s; }
.hp-post:hover { border-color: rgba(var(--accent-rgb), .5); }
.hp-post__img { display: block; aspect-ratio: 16 / 10; border-radius: .8rem; overflow: hidden; background: color-mix(in srgb, var(--surface-fg) 8%, transparent); }
.hp-post b { padding-inline: .35rem; font-weight: 800; font-size: .98rem; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hp-post small { padding-inline: .35rem; font-size: .8rem; line-height: 1.8; color: color-mix(in srgb, var(--surface-fg) 62%, transparent); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hp-post em { padding-inline: .35rem; margin-top: auto; font-style: normal; font-size: .8rem; font-weight: 700; color: rgb(var(--accent-rgb)); }
@media (min-width: 768px) { .hp-edit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; gap: 1rem; } .hp-post { flex: none; } }

/* ── فراخوانِ نهایی ── */
.hp-final { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; padding: 1.5rem; border-radius: 1.5rem; border: 1px solid var(--panel-border); background: linear-gradient(180deg, var(--panel-bg-1), var(--panel-bg-2)); }
.hp-final h2 { margin: 0; font-family: 'Vazirmatn', system-ui, sans-serif; font-weight: 800; font-size: 1.4rem; line-height: 1.6; }
.hp-final p { margin: .3rem 0 0; font-size: .92rem; color: color-mix(in srgb, var(--surface-fg) 65%, transparent); }
.hp-final__btns { display: flex; flex-wrap: wrap; gap: .6rem; }
.hp-final .hp-btn--ghost { border-color: rgba(var(--accent-rgb), .4); color: rgb(var(--accent-rgb)); background: transparent; }
.hp-final .hp-btn--ghost:hover { background: rgba(var(--accent-rgb), .08); }
@media (min-width: 768px) { .hp-final { flex-direction: row; align-items: center; justify-content: space-between; padding: 2rem 2.25rem; } .hp-final h2 { font-size: 1.7rem; } }

/* ═══════════ هم‌اندازه‌سازیِ کارت‌ها در همهٔ ردیف‌های صفحهٔ نخست ═══════════
   پیش‌تر ردیف‌های «اسلایدر» ۴ کارت در هر نما می‌گرفتند ولی ردیف‌های «گرید» ۳ ستون
   (و در تبلت ۲ ستون در برابر ۳) بودند؛ پس بنرِ هر ایونت بسته به ردیف بزرگ/کوچک
   دیده می‌شد. این‌جا همه یک الگو دارند: موبایل ۲، ≥۶۴۰px سه، ≥۱۰۲۴px چهار کارت. */
@media (min-width: 640px) {
    .hp-flow [data-event-grid],
    .hp-flow .ev-strip[data-event-slider="auto"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
}
@media (min-width: 1024px) {
    .hp-flow [data-event-grid],
    .hp-flow .ev-strip[data-event-slider="auto"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* نوارِ افقی (slider) دقیقاً هم‌عرضِ ستونِ گرید: ۳ کارت در نما از ۶۴۰px، ۴ کارت از ۱۰۲۴px (فاصلهٔ ۱rem). */
@media (min-width: 640px) {
    .hp-flow .ev-strip[data-event-slider="slider"] > .ev-slide { flex-basis: calc((100% - 2rem) / 3); }
}
@media (min-width: 1024px) {
    .hp-flow .ev-strip[data-event-slider="slider"] > .ev-slide { flex-basis: calc((100% - 3rem) / 4); }
}