/* assets/css/v2/pages-app-detail.css — Application page (A1 v2): hero, summary, chips, features, gallery, FAQ, changelog, facts, links
   keywords: app detail, hero, gallery scroll snap, faq details, facts, links, logical properties
   Static layout: no sticky or fixed element, no transform or opacity here. Ad slots sit between these sections with their own 48px margin. */

.a1-app-hero { background: linear-gradient(180deg, var(--c-brand-soft), var(--c-bg)); padding-block: var(--sp-7); }
.a1-app-hero-grid { display: grid; gap: var(--sp-6); grid-template-columns: 112px minmax(0, 1fr); align-items: start; }
.a1-app-icon img { width: 112px; height: 112px; border-radius: var(--radius-lg); object-fit: cover; box-shadow: var(--shadow); }
.a1-crumbs { font-size: var(--fs-sm); color: var(--c-muted); margin-block-end: var(--sp-3); }
.a1-crumbs a { color: var(--c-brand); }
.a1-app-head h1 { font-size: var(--fs-h1); margin-block-end: var(--sp-2); }
.a1-name-ar { font-size: var(--fs-lg); color: var(--c-muted); margin-block-end: var(--sp-3); }
.a1-summary { font-size: var(--fs-lg); color: var(--c-muted); max-width: 68ch; }
.a1-also { margin-block-start: var(--sp-4); color: var(--c-muted); font-size: var(--fs-sm); }
.a1-also a { margin-inline-start: var(--sp-3); font-weight: var(--fw-strong); }
@media (max-width: 599px) { .a1-app-hero-grid { grid-template-columns: 1fr; } .a1-app-icon img, .a1-plate-lg { width: 88px; height: 88px; } }

.a1-prose { max-width: 75ch; }
.a1-prose p + p, .a1-prose ul, .a1-prose ol { margin-block-start: var(--sp-3); }
.a1-grid-features { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.a1-feature-ic { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius); background: var(--c-brand-soft); color: var(--c-brand); }

/* screenshots: native scrolling with snap; buttons only move the strip */
.a1-gallery { display: flex; gap: var(--sp-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-block-end: var(--sp-3); }
.a1-gallery figure { flex: 0 0 min(240px, 62vw); scroll-snap-align: start; }
.a1-gallery img { width: 100%; height: auto; aspect-ratio: 390 / 844; object-fit: cover; border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-surface); }
.a1-gallery-nav { display: flex; gap: var(--sp-2); margin-block-start: var(--sp-3); }
.a1-gallery-nav button { width: 44px; height: 44px; border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-bg); color: var(--c-brand); font-size: 1.4rem; cursor: pointer; }
.a1-gallery-nav button:hover { border-color: var(--c-brand); }
[dir="rtl"] .a1-gallery-nav { flex-direction: row-reverse; justify-content: flex-end; }

.a1-faq { display: grid; gap: var(--sp-3); max-width: 80ch; }
.a1-faq details { border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-bg); }
.a1-faq summary { padding: var(--sp-4); font-weight: var(--fw-strong); cursor: pointer; }
.a1-faq details[open] summary { color: var(--c-brand); }
.a1-faq details p { padding: 0 var(--sp-4) var(--sp-4); color: var(--c-muted); }

.a1-changelog { list-style: none; display: grid; gap: var(--sp-4); max-width: 80ch; }
.a1-changelog li { padding-inline-start: var(--sp-4); border-inline-start: 3px solid var(--c-brand-soft); }
.a1-changelog div { color: var(--c-muted); }

.a1-facts { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-block-end: var(--sp-4); }
.a1-facts div { padding: var(--sp-4); background: var(--c-surface); border-radius: var(--radius); }
.a1-facts dt { color: var(--c-muted); font-size: var(--fs-sm); }
.a1-facts dd { font-weight: var(--fw-strong); }

.a1-links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.a1-links a { display: inline-block; padding: var(--sp-2) var(--sp-4); border: 1px solid var(--c-line); border-radius: 999px; font-weight: var(--fw-strong); text-decoration: none; }
.a1-links a:hover { border-color: var(--c-brand); background: var(--c-brand-soft); }