/* ========================================
   App Store Browse Pattern
   Shared across all TGN web apps
   Usage: <link rel="stylesheet" href="_content/TheGeekNetwork.Shared.UI/css/patterns/_appstore-browse.css" />
   ======================================== */

/* Theme variables with fallbacks */
:root {
    --browse-accent: #667eea;
    --browse-accent-alt: #764ba2;
}

/* ── Store Page Container ── */
.store-page { padding-bottom: 100px; }

/* ── Section Headers ── */
.section { margin-bottom: 32px; }
.section__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding: 0 20px; }
.section__title { font-family: 'Comfortaa', -apple-system, sans-serif; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary, #f5f7fa); }
.section__link { font-size: 0.9375rem; font-weight: 500; color: var(--browse-accent); text-decoration: none; display: flex; align-items: center; gap: 4px; transition: opacity 0.15s ease; }
.section__link:hover { opacity: 0.8; }
.section__link svg { width: 16px; height: 16px; }

/* ── Hero Carousel ── */
.hero { margin-bottom: 32px; padding: 0 20px; }
.hero__carousel { position: relative; overflow: hidden; border-radius: var(--radius-xl, 20px); }
.hero__track { display: flex; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.hero__slide { min-width: 100%; position: relative; aspect-ratio: 16 / 4; border-radius: var(--radius-xl, 20px); overflow: hidden; }
.hero__slide-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.6s ease; }
.hero__slide:hover .hero__slide-bg { transform: scale(1.03); }
.hero__slide-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 100%); }
.hero__slide-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 32px; color: white; }
.hero__slide-tag { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.8; margin-bottom: 8px; display: block; }
.hero__slide-title { font-family: 'Comfortaa', -apple-system, sans-serif; font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px; line-height: 1.2; }
.hero__slide-desc { font-size: 0.9375rem; opacity: 0.9; max-width: 400px; }
.hero__slide-app { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.hero__slide-icon { width: 48px; height: 48px; border-radius: var(--radius-md, 12px); }
.hero__slide-meta { flex: 1; }
.hero__slide-app-name { font-weight: 600; font-size: 0.9375rem; }
.hero__slide-app-category { font-size: 0.8125rem; opacity: 0.7; }

/* Carousel Dots */
.hero__dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.hero__dot { width: 8px; height: 8px; border-radius: 9999px; background: var(--text-tertiary, #6c7686); border: none; cursor: pointer; transition: all 0.15s ease; opacity: 0.4; }
.hero__dot.active { width: 24px; background: var(--browse-accent); opacity: 1; }

/* ── Category Pills ── */
.categories { margin-bottom: 24px; }
.categories__scroll { display: flex; gap: 10px; padding: 0 20px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x mandatory; }
.categories__scroll::-webkit-scrollbar { display: none; }
.category-pill { flex-shrink: 0; padding: 10px 18px; background: var(--bg-card, rgba(255,255,255,0.06)); border: 1px solid var(--border-color, rgba(255,255,255,0.08)); border-radius: 9999px; font-family: inherit; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary, #a1a8b4); cursor: pointer; transition: all 0.15s ease; scroll-snap-align: start; white-space: nowrap; text-decoration: none; }
.category-pill:hover { border-color: var(--border-color-strong, rgba(255,255,255,0.12)); color: var(--text-primary, #f5f7fa); }
.category-pill.active { background: var(--text-primary, #f5f7fa); border-color: var(--text-primary, #f5f7fa); color: var(--text-inverse, #1a1a24); }

/* ── App Carousel ── */
.app-carousel { position: relative; }
.app-carousel__scroll { display: flex; gap: 16px; padding: 0 20px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x mandatory; scroll-padding: 20px; }
.app-carousel__scroll::-webkit-scrollbar { display: none; }

/* ── App Cards ── */
.app-card { flex-shrink: 0; width: min(320px, calc(50vw - 40px)); display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--bg-card, rgba(255,255,255,0.06)); border: 1px solid var(--border-color, rgba(255,255,255,0.08)); border-radius: var(--radius-lg, 16px); cursor: pointer; transition: all 0.15s ease; scroll-snap-align: start; }
.app-card:hover { background: var(--bg-card-hover, rgba(255,255,255,0.1)); border-color: var(--border-color-strong, rgba(255,255,255,0.12)); transform: translateY(-2px); box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.4)); }
.app-card__icon { width: 64px; height: 64px; border-radius: var(--radius-md, 12px); background: var(--bg-tertiary, #252532); flex-shrink: 0; overflow: hidden; }
.app-card__icon img { width: 100%; height: 100%; object-fit: cover; }
.app-card__info { flex: 1; min-width: 0; }
.app-card__name { font-weight: 600; font-size: 0.9375rem; color: var(--text-primary, #f5f7fa); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.app-card__category { font-size: 0.8125rem; color: var(--text-tertiary, #6c7686); margin-bottom: 6px; }
.app-card__action { flex-shrink: 0; }

/* Get Button */
.btn-get { display: inline-block; padding: 6px 16px; background: var(--bg-tertiary, #252532); border: none; border-radius: 9999px; font-family: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--browse-accent); cursor: pointer; transition: all 0.15s ease; text-decoration: none; text-align: center; }
.btn-get:hover { background: var(--browse-accent); color: white; }

/* Large Feature Card */
.app-card--large { width: min(340px, calc(50vw - 40px)); flex-direction: column; padding: 0; overflow: hidden; }
.app-card--large .app-card__preview { width: 100%; aspect-ratio: 4 / 3; background: var(--bg-tertiary, #252532); overflow: hidden; }
.app-card--large .app-card__preview img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.app-card--large:hover .app-card__preview img { transform: scale(1.05); }
.app-card--large .app-card__body { display: flex; align-items: center; gap: 12px; padding: 14px; }
.app-card--large .app-card__icon { width: 48px; height: 48px; }
.app-card--large .app-card__info { flex: 1; }

/* ── Top Charts ── */
.top-charts { margin-bottom: 32px; }
.app-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; padding: 0 20px; }
.app-list-item { display: flex; align-items: center; gap: 14px; padding: 12px; background: var(--bg-card, rgba(255,255,255,0.06)); border: 1px solid var(--border-color, rgba(255,255,255,0.08)); border-radius: var(--radius-lg, 16px); cursor: pointer; transition: all 0.15s ease; }
.app-list-item:hover { background: var(--bg-card-hover, rgba(255,255,255,0.1)); border-color: var(--border-color-strong, rgba(255,255,255,0.12)); }
.app-list-item__rank { width: 24px; font-family: 'Comfortaa', sans-serif; font-size: 1.125rem; font-weight: 700; color: var(--text-tertiary, #6c7686); text-align: center; }
.app-list-item__icon { width: 56px; height: 56px; border-radius: var(--radius-md, 12px); background: var(--bg-tertiary, #252532); flex-shrink: 0; }
.app-list-item__info { flex: 1; min-width: 0; }
.app-list-item__name { font-weight: 600; font-size: 0.9375rem; color: var(--text-primary, #f5f7fa); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-list-item__category { font-size: 0.8125rem; color: var(--text-tertiary, #6c7686); }

/* ── CTA Section ── */
.cta-section { margin: 20px 16px; }

/* ── Responsive: Desktop 4-card ── */
@media (min-width: 1200px) {
    .app-card--large { width: calc((100vw - 120px) / 4); min-width: 260px; }
    .app-card { width: calc((100vw - 120px) / 4); min-width: 260px; }
    .app-carousel__scroll { gap: 20px; }
    .section__header { padding: 0 24px; }
    .categories__scroll { padding: 0 24px; }
}

@media (min-width: 1600px) {
    .app-card--large { width: calc((1560px - 100px) / 4); }
    .app-card { width: calc((1560px - 100px) / 4); }
    .app-carousel__scroll { max-width: 1560px; margin: 0 auto; }
}

/* ── Responsive: Mobile ── */
@media (max-width: 768px) {
    .hero__slide-content { padding: 20px 16px; }
    .hero__slide-title { font-size: 22px; }
    .hero__slide-desc { font-size: 14px; }
    .hero__slide-app { gap: 10px; }
    .hero__slide-icon { width: 36px; height: 36px; }
    .app-card { width: calc(100vw - 80px); min-width: calc(100vw - 80px); }
    .app-card--large { width: calc(100vw - 80px); min-width: calc(100vw - 80px); }
    .app-carousel__scroll { padding: 0 16px; gap: 12px; }
    .section { padding: 0 0 16px; }
    .section__header { padding: 0 16px; }
    .categories__scroll { padding: 0 16px; gap: 8px; }
    .category-pill { font-size: 13px; padding: 6px 14px; }
    .app-list-item { padding: 10px 16px; }
    .section__title { font-size: 18px; }
    .section__link { font-size: 13px; }
    .cta-section { padding: 32px 16px; margin: 16px 8px; border-radius: 16px; }
}

@media (max-width: 480px) {
    .app-card { width: calc(100vw - 56px); min-width: calc(100vw - 56px); }
    .app-card--large { width: calc(100vw - 56px); min-width: calc(100vw - 56px); }
    .app-carousel__scroll { padding: 0 12px; gap: 10px; }
    .hero__slide-title { font-size: 20px; }
    .hero__slide-desc { font-size: 13px; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
    .categories__scroll { padding: 0 12px; }
    .section__header { padding: 0 12px; }
}