/* =============================================================================
   KurdiCode 2.0 — one project's page (/projects/<slug>) and the picture viewer.
   Loaded after site.css and projects.css (covers, tones). Every rule is scoped
   to its own classes, so this sheet can also be loaded by a CMS page that uses
   the store badges or the gallery (gallery.js adds it when it is missing).

   CLASSES (printed by app/view_projects.php)
     .project-page .crumbs     breadcrumb spacing; its links (and .fact dd .inline-link)
                               use ::after as an invisible 44px touch target on screen
     .app-hero [.has-image]    two columns: .app-hero-text | .app-hero-art (the cover)
       .app-id                 app icon tile (.app-icon) + status badge
       .app-title .app-lead    name and opening line (on .page-title / .page-intro)
       .app-actions            the primary actions: .store-badges + .app-visit button
       .app-note               the owner's short note (.proj-note)
     .store-badges > a.store-badge.store-ios|.store-android
                               App Store / Google Play badge: store logo + .store-badge-text
                               (small line + strong line); always black, like the stores' own
     .app-body [.has-writeup]  write-up beside a side column of cards; stacks on phones
       .app-card               frosted panel; .app-card-title
       .app-facts > dl.facts > .fact[.fact-wide] > dt + dd
       .app-writeup            "About this project": h2 + .prose
       .app-policies > ul.policy-list > li > a.policy-link (.icon-tile + .policy-body + .policy-go)
     .app-gallery              .app-section-head + ul.shots[.is-wide-set][data-gallery] > li.shot
                               (.is-portrait | .is-landscape | .is-square, + .is-solo when
                               a tall picture has no partner in its phone row) > figure >
                               a.shot-link[data-gallery-item] > img + .shot-zoom, figcaption
     .app-related              .related-grid > li > article.card.related-card
                               (.related-cover + .related-body)
     .app-back                 back link
     .lb …                     the viewer built by gallery.js (see the end of this file)
   ============================================================================= */

/* ---------- Breadcrumb ---------- */
.project-page .crumbs { padding-top: clamp(20px, 1rem + 1.6vw, 36px); }
/* One line: a long project name is shortened with an ellipsis rather than wrapping. */
.project-page .crumbs ol { flex-wrap: nowrap; min-width: 0; }
.project-page .crumbs li { flex-shrink: 0; white-space: nowrap; }
/* The current page: a row of the separator and the name, where the name (its
   own span, which may carry lang/dir of its own on a page in another language)
   shrinks and is cut with an ellipsis inside its own box, so it never runs
   wider than the trail and the separator stays beside it. */
.project-page .crumbs li:last-child { display: flex; align-items: center; flex-shrink: 1; min-width: 0; }
.project-page .crumbs li:last-child > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* 44px touch targets that do not change the look: an invisible hit area
   above and below each trail link (screen only, so print keeps its own ::after). */
@media screen {
  .project-page .crumbs a { position: relative; }
  .project-page .crumbs a::after { content: ""; position: absolute; inset: -11px -5px; border-radius: 8px; }
}

/* ---------- Hero ---------- */
.app-hero {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: center; gap: clamp(28px, 4vw, 64px);
  padding-block: clamp(24px, 1rem + 2.4vw, 48px) clamp(28px, 1rem + 3vw, 56px);
}
.app-hero-text { display: grid; gap: 18px; justify-items: start; min-width: 0; }
.app-id { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.app-icon {
  width: 64px; height: 64px; border-radius: 20px; font-size: 1.6rem;
  color: #7FE6FF;
  background: linear-gradient(150deg, var(--brand-navy-700), var(--brand-navy-900));
  box-shadow: 0 14px 30px -14px rgba(3, 16, 30, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(127, 230, 255, 0.14);
}
.app-id .badge { font-size: 0.8rem; padding-block: 6px; }
.app-title { max-width: 18ch; }
:root:lang(ckb) .app-title, :root:lang(ar) .app-title { max-width: 22ch; }
.app-lead { max-width: 58ch; }
.app-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; }
.app-visit { --h: 54px; }
.app-note { font-size: 0.9rem; max-width: 60ch; }
.app-note i { color: var(--accent); }

/* The cover beside the text: the project's picture, or its colour wash with a large icon. */
.app-hero-art { min-width: 0; }
.app-cover.proj-cover {
  aspect-ratio: 4 / 3; min-height: 0; border-radius: var(--r-2xl);
  align-items: center; justify-content: center; padding: 24px;
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-lg);
}
.app-cover.proj-cover.has-image { padding: 0; aspect-ratio: 4 / 3; }
.app-cover .icon-tile { width: 112px; height: 112px; border-radius: 32px; font-size: 2.8rem; }
.app-cover .watermark { font-size: 13rem; bottom: -40px; inset-inline-end: -12px; opacity: 0.06; }

/* No cover picture, but screenshots: the first one, framed, on the wash. */
.app-cover.has-shot { padding: clamp(20px, 2.4vw, 32px); overflow: hidden; }
.app-shot { position: relative; z-index: 1; display: block; flex-shrink: 0; }
.app-shot img { display: block; max-width: none; }
.app-shot.is-portrait {
  height: 100%; padding: 7px; border-radius: 30px;
  background: linear-gradient(160deg, var(--brand-navy-700), var(--brand-navy-900));
  box-shadow: 0 30px 60px -24px rgba(3, 16, 30, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.app-shot.is-portrait img { height: 100%; width: auto; border-radius: 23px; }
.app-shot.is-landscape {
  width: 100%; padding-top: 26px; border-radius: 14px; overflow: hidden;
  background: var(--surface);
  box-shadow: 0 30px 60px -24px rgba(3, 16, 30, 0.45), inset 0 0 0 1px var(--line);
}
.app-shot.is-landscape::before { /* the window bar's three dots */
  content: ""; position: absolute; top: 9px; inset-inline-start: 12px; width: 8px; height: 8px; border-radius: 50%;
  background: #FF6159; box-shadow: 14px 0 0 #FFBD2E, 28px 0 0 #28C941;
}
[dir="rtl"] .app-shot.is-landscape::before { box-shadow: -14px 0 0 #FFBD2E, -28px 0 0 #28C941; }
.app-shot.is-landscape img { width: 100%; height: auto; }

/* ---------- Store badges ---------- */
.store-badges { display: flex; flex-wrap: wrap; gap: 12px; }
.store-badge {
  position: relative;
  display: inline-flex; align-items: center; gap: 11px;
  min-height: 56px; padding-block: 8px; padding-inline: 16px 20px; border-radius: 13px;
  background: #000; color: #FFF;
  box-shadow: inset 0 0 0 1px #A6A6A6, 0 10px 24px -14px rgba(0, 0, 0, 0.7);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.store-badge:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px #FFF, 0 14px 30px -14px rgba(0, 0, 0, 0.75); }
.store-badge > i { font-size: 1.75rem; width: 28px; text-align: center; flex-shrink: 0; }
.store-android > i { font-size: 1.5rem; }
.store-badge-text { display: grid; text-align: start; }
.store-badge-text small { font: 500 0.72rem/1.25 var(--font-body); color: rgba(255, 255, 255, 0.88); }
.store-badge-text strong { font: 600 1.18rem/1.15 var(--font-latin-display); color: #FFF; letter-spacing: -0.01em; white-space: nowrap; }
:root:lang(ckb) .store-badge-text small, :root:lang(ar) .store-badge-text small { font-size: 0.78rem; line-height: 1.4; }
:root[data-theme="dark"] .store-badge { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 10px 24px -14px rgba(0, 0, 0, 0.8); }
:root[data-theme="dark"] .store-badge:hover { box-shadow: inset 0 0 0 1px #FFF, 0 14px 30px -14px rgba(0, 0, 0, 0.8); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .store-badge { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 10px 24px -14px rgba(0, 0, 0, 0.8); }
}

/* ---------- Sections shared by the page ---------- */
.app-section-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 8px 24px; margin-bottom: 20px;
}
.app-section-head h2, .app-writeup h2 { font-size: clamp(1.45rem, 1.1rem + 1.1vw, 2rem); font-weight: 700; }
:root:lang(ckb) .app-section-head h2, :root:lang(ckb) .app-writeup h2,
:root:lang(ar) .app-section-head h2, :root:lang(ar) .app-writeup h2 { line-height: 1.4; }
.app-section-hint { font-size: 0.92rem; color: var(--muted); }
.app-gallery .app-section-head { display: grid; justify-content: start; gap: 6px; }

.app-card {
  padding: clamp(20px, 2.2vw, 28px); border-radius: var(--r-xl);
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--glass-highlight), inset 0 0 0 1px var(--line), var(--shadow-sm);
  min-width: 0;
}
.app-card-title { font-size: 1.06rem; font-weight: 700; line-height: 1.3; margin-bottom: 16px; }
:root:lang(ckb) .app-card-title, :root:lang(ar) .app-card-title { line-height: 1.6; }

/* ---------- Write-up, facts and links ---------- */
.app-body {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start;
  margin-block: clamp(28px, 1rem + 3vw, 56px);
}
@media (min-width: 961px) {
  .app-body.has-writeup {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    grid-template-areas: "about facts" "about links";
    grid-template-rows: auto 1fr;
    column-gap: clamp(32px, 4vw, 64px);
  }
  .app-body.has-writeup .app-writeup { grid-area: about; }
  .app-body.has-writeup .app-facts { grid-area: facts; }
  .app-body.has-writeup .app-policies { grid-area: links; }
  .app-body:not(.has-writeup) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-body:not(.has-writeup) > :only-child { grid-column: 1 / -1; }
}
.app-writeup { min-width: 0; }
.app-writeup h2 { margin-bottom: 18px; }
.app-writeup .prose { max-width: 72ch; }
/* Headings typed into the write-up sit under the section's own heading. */
.app-writeup .prose h2 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem); margin-top: 1.8em; }
.app-writeup .prose h3 { font-size: 1.1rem; }

.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 18px 22px; }
.fact { display: grid; gap: 5px; align-content: start; min-width: 0; }
.fact-wide { grid-column: 1 / -1; }
.fact dt {
  display: flex; align-items: center; gap: 8px;
  font: 600 0.8rem/1.3 var(--font-body); color: var(--muted); letter-spacing: var(--tracking-label);
}
.fact dt i { color: var(--accent); width: 15px; text-align: center; font-size: 0.8rem; flex-shrink: 0; }
.fact dd { color: var(--ink); font-weight: 600; font-size: 0.97rem; line-height: 1.5; overflow-wrap: anywhere; }
.fact dd .tags { margin-top: 3px; }
.fact dd .inline-link { font-weight: 600; }
@media screen { /* 44px touch target without changing the look (print adds the address in its own ::after) */
  .fact dd .inline-link { position: relative; }
  .fact dd .inline-link::after { content: ""; position: absolute; inset: -13px -6px; border-radius: 8px; }
}
.fact + .fact-wide, .fact-wide + .fact { padding-top: 16px; border-top: 1px solid var(--line); }

.policy-list { list-style: none; margin-inline: -10px; }
.policy-list li + li { border-top: 1px solid var(--line); }
.policy-link {
  display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px;
  border-radius: var(--r-md); color: var(--ink);
  transition: background-color var(--dur) var(--ease);
}
.policy-link:hover { background: var(--hover-bg); }
.policy-body { display: grid; gap: 1px; min-width: 0; flex: 1; }
.policy-body strong { font-size: 0.97rem; font-weight: 600; }
.policy-body small { font-size: 0.8rem; color: var(--muted); overflow-wrap: anywhere; }
.policy-go { color: var(--accent); font-size: 0.78rem; flex-shrink: 0; transition: transform var(--dur) var(--ease); }
.policy-link:hover .policy-go.arrow { transform: translateX(3px); }
[dir="rtl"] .policy-link:hover .policy-go.arrow { transform: scaleX(-1) translateX(3px); }
.policy-privacy .icon-tile { --tile-fg: var(--success);   --tile-bg: rgba(15, 160, 100, 0.12); --tile-line: rgba(15, 140, 90, 0.24); }
.policy-terms .icon-tile   { --tile-fg: var(--lav-ink);   --tile-bg: rgba(130, 110, 255, 0.13); --tile-line: rgba(130, 110, 255, 0.26); }
.policy-delete .icon-tile  { --tile-fg: var(--danger);    --tile-bg: rgba(220, 90, 40, 0.11);  --tile-line: rgba(200, 80, 30, 0.24); }
.policy-support .icon-tile { --tile-fg: var(--amber-ink); --tile-bg: rgba(254, 170, 6, 0.15);  --tile-line: rgba(254, 154, 6, 0.26); }

/* ---------- Gallery ----------
   Every picture keeps its own shape: on wide screens each is shown at one
   shared height (its width follows from the width/height it carries), so a
   row of phone screenshots and a wide website screenshot sit side by side;
   on phones, two columns, with wide pictures across both. */
.app-gallery { margin-block: clamp(24px, 1rem + 2.4vw, 48px); }
.shots {
  --shot-h: clamp(300px, 12rem + 14vw, 440px);
  list-style: none; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px;
}
.shot { flex: 0 0 auto; max-width: 100%; min-width: 0; }
/* The figure is exactly as wide as its picture: the caption (width 0, then
   stretched to 100%) adds nothing to that width and wraps under the picture. */
.shot figure { display: flex; flex-direction: column; gap: 10px; width: max-content; max-width: 100%; }
.shot figcaption { width: 0; min-width: 100%; }
.shot-link {
  position: relative; display: block; overflow: hidden; border-radius: var(--r-lg);
  background: var(--bg-tint);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-md);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* The width follows from the height and the picture's own width/height. */
.shot-link img {
  height: var(--shot-h); width: auto; max-width: 100%; object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.shot-link img:not([width]) { min-width: 180px; }
.shot-link::after { /* the frame line above the picture */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--line);
}
.shot-link:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-lg); }
.shot-link:hover img { transform: scale(1.02); }
.shot-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: var(--r-lg); }
.shot-zoom {
  position: absolute; bottom: 12px; inset-inline-end: 12px;
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(3, 16, 30, 0.62); color: #FFF; font-size: 0.85rem;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transform: scale(0.9); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.shot-link:hover .shot-zoom, .shot-link:focus-visible .shot-zoom { opacity: 1; transform: none; }
@media (hover: none) { .shot-zoom { opacity: 1; transform: none; } }
.shot figcaption { font-size: 0.86rem; line-height: 1.5; color: var(--muted); }
:root:lang(ckb) .shot figcaption, :root:lang(ar) .shot figcaption { line-height: 1.8; }

/* Mostly wide pictures (a website's screenshots): two to a row, each half the
   width, so a row is never one picture beside an empty half. A tall or
   square picture among them keeps the shared height above. */
@media screen and (min-width: 721px) {
  .shots.is-wide-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .is-wide-set .shot:not(.is-portrait):not(.is-square) figure { width: 100%; }
  .is-wide-set .shot:not(.is-portrait):not(.is-square) .shot-link img { width: 100%; height: auto; }
  .is-wide-set .shot-link img:not([width]) { min-width: 0; }
}

/* ---------- More from the studio ---------- */
.app-related { margin-top: clamp(40px, 2rem + 3vw, 80px); }
.related-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.related-grid > li { display: flex; min-width: 0; }
.related-card {
  flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 16px; padding: 12px;
  background: var(--glass-strong);
}
.related-cover.proj-cover {
  flex: 0 0 92px; width: 92px; min-height: 0; aspect-ratio: 1; padding: 0;
  align-items: center; justify-content: center; border-radius: 16px;
}
.related-cover.proj-cover.has-image { aspect-ratio: 1; }
.related-cover .icon-tile { width: 44px; height: 44px; border-radius: 13px; font-size: 1rem; }
.related-cover .watermark { display: none; }
.related-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding-block: 4px; }
.related-body h3 { font-size: 1.04rem; font-weight: 700; line-height: 1.35; }
:root:lang(ckb) .related-body h3, :root:lang(ar) .related-body h3 { line-height: 1.6; }
.related-body h3 a:hover { color: var(--accent); }
.related-body p {
  font-size: 0.86rem; line-height: 1.55; color: var(--muted);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
:root:lang(ckb) .related-body p, :root:lang(ar) .related-body p { line-height: 1.8; }

.app-back { margin-block: clamp(28px, 3vw, 44px) clamp(56px, 3rem + 4vw, 104px); }
/* A "back" arrow nudges the way it points. */
.app-back .link-arrow:hover .arrow { transform: translateX(-3px); }
[dir="rtl"] .app-back .link-arrow:hover .arrow { transform: scaleX(-1) translateX(-3px); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related-grid > li:nth-child(3) { display: none; }
}
@media (max-width: 860px) {
  .app-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  /* Without its own picture the cover only repeats the icon above: keep the page short. */
  .app-hero:not(.has-image) .app-hero-art { display: none; }
  .app-cover.proj-cover.has-image { aspect-ratio: 16 / 10; border-radius: var(--r-xl); }
}
@media (max-width: 720px) {
  .app-icon { width: 56px; height: 56px; border-radius: 17px; font-size: 1.4rem; }
  .app-actions { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .store-badges { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .store-badge { justify-content: center; }
  .app-visit { width: 100%; }
  .shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .shot figure { width: auto; }
  .shot-link img { width: 100%; height: auto; max-height: 75vh; }
  .shot.is-landscape, .shot:not(.is-portrait):not(.is-square) { grid-column: 1 / -1; }
  /* A tall picture with no partner in its row: same size, centred. */
  .shot.is-solo { grid-column: 1 / -1; justify-self: center; width: calc(50% - 7px); }
  .related-grid { grid-template-columns: minmax(0, 1fr); }
  .related-grid > li:nth-child(3) { display: flex; }
  .related-cover.proj-cover { flex-basis: 76px; width: 76px; }
}

/* =============================================================================
   The picture viewer (gallery.js). Always dark, like any photo viewer, in
   both themes. Laid out with logical properties, so "previous" sits on the
   right in Kurdish; the arrows are mirrored with .icon-flip.
   ============================================================================= */
html.lb-open { overflow: hidden; }
.lb {
  position: fixed; inset: 0; z-index: var(--z-overlay, 200);
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  background: rgba(2, 9, 17, 0.94); color: #EEF4FA;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  animation: kc-lb-in 0.22s var(--ease, ease);
}
@keyframes kc-lb-in { from { opacity: 0; } }
.lb-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) 16px 8px;
}
.lb-count {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  font: 600 0.9rem/1 var(--font-body, system-ui); color: #EEF4FA; margin: 0;
}
.lb-count:empty { visibility: hidden; }
.lb-btn {
  width: 48px; height: 48px; flex-shrink: 0; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, 0.1); color: #FFF; font-size: 1.05rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.lb-btn:hover { background: rgba(255, 255, 255, 0.2); }
.lb-btn:active { transform: scale(0.96); }
.lb-btn:focus-visible { outline: 2px solid #7FDBFF; outline-offset: 3px; }
.lb-stage {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "prev fig next";
  align-items: center; gap: 16px; min-height: 0;
  padding: 0 16px max(20px, env(safe-area-inset-bottom));
}
.lb-prev { grid-area: prev; }
.lb-next { grid-area: next; }
.lb-figure {
  grid-area: fig; position: relative; margin: 0; height: 100%; min-height: 0; min-width: 0;
  display: grid; grid-template-rows: auto auto; align-content: center; justify-items: center; gap: 12px; overflow: hidden;
  touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none;
}
.lb-img {
  max-width: 100%; max-height: calc(100vh - 200px); max-height: calc(100dvh - 200px); width: auto; height: auto;
  object-fit: contain; border-radius: 12px; background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.8);
  transition: opacity 0.2s ease;
}
.lb.is-loading .lb-img { opacity: 0.25; }
.lb-spin {
  position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px;
  border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.85); border-inline-end-color: transparent;
  animation: kc-lb-spin 0.8s linear infinite; display: none;
}
.lb.is-loading .lb-spin { display: block; }
@keyframes kc-lb-spin { to { transform: rotate(360deg); } }
.lb-caption {
  max-width: 70ch; text-align: center; font-size: 0.95rem; line-height: 1.6; color: rgba(238, 244, 250, 0.88);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.lb-caption:empty { display: none; }
.lb.is-single .lb-prev, .lb.is-single .lb-next { display: none; }
@media (max-width: 720px) {
  .lb-stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "fig fig" "prev next"; gap: 12px; padding-inline: 12px;
  }
  .lb-prev { justify-self: start; }
  .lb-next { justify-self: end; }
  .lb-img { max-height: calc(100vh - 230px); max-height: calc(100dvh - 230px); border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .lb, .lb-img, .lb-btn { animation: none; transition: none; }
  .lb-spin { animation-duration: 1.6s; }
  .shot-link, .shot-link img, .shot-zoom, .store-badge, .policy-go { transition: none; }
  .shot-link:hover, .shot-link:hover img, .store-badge:hover { transform: none; }
}

/* ---------- Print ---------- */
@media print {
  .lb, .shot-zoom, .app-hero-art, .app-related, .app-back { display: none !important; }
  .app-hero { grid-template-columns: minmax(0, 1fr); padding-block: 12px; }
  .store-badge { background: #fff !important; color: #000 !important; box-shadow: inset 0 0 0 1px #000 !important; }
  .store-badge-text small, .store-badge-text strong { color: #000 !important; }
  .shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shot figure { width: auto; }
  .shot-link img { width: 100%; height: auto; }
  .app-card { box-shadow: none !important; border: 1px solid #ccc; background: #fff !important; backdrop-filter: none !important; }
}