/* ── AppZip · content layer (Fase D) ─────────────────────────────────────────
   The page body and its backend-driven elements, rebuilt on the token system.
   Supersedes the legacy grid in site.css (narrower container, legacy colours):
   loaded after components.css and after site.css so it wins deterministically.
   Elements place themselves on a 12-column grid from their layout fields; each
   variant (card, slider, gallery, article) reads only tokens, so themes/fontsets
   restyle them for free. Dynamic islands carry skeleton / empty / error states. */

/* Page body grid — 12 columns, container-capped, token gutters. */
.page-main {
  flex: 1;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--margin-side);
  padding-block: var(--space-8);
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--space-5);
  align-content: start;
}
.el { min-width: 0; } /* allow columns to shrink instead of overflowing */

/* ── Text ────────────────────────────────────────────────────────────────── */
.el-text p { max-width: var(--measure); }

/* ── Media (image / video) ───────────────────────────────────────────────── */
.media {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--radius-lg); display: block;
}

/* ── Slider ──────────────────────────────────────────────────────────────── */
.slider { position: relative; width: 100%; height: 100%; }
.slider__track { position: relative; }
.slider img { width: 100%; border-radius: var(--radius-lg); display: none; }
.slider img.is-active { display: block; }
.slider__controls { display: flex; gap: var(--space-2); justify-content: center; margin-top: var(--space-2); }
.slider__dot {
  width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: var(--neutral-300);
}
.slider__dot[aria-current="true"] { background: var(--primary); }
.slider__arrow {
  min-width: 44px; min-height: 44px; border: 1px solid var(--border);
  background: var(--bg); border-radius: var(--radius-md); cursor: pointer;
}

/* ── Card ────────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-5); height: 100%;
  display: flex; flex-direction: column; gap: var(--space-3);
  transition: transform var(--motion-fast) var(--easing),
              border-color var(--motion-fast) var(--easing),
              box-shadow var(--motion-fast) var(--easing);
}
.card:hover { border-color: var(--primary); box-shadow: var(--shadow-2); transform: translateY(-2px); }
/* Motion off: keep the border cue, drop the lift. */
@media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } }
.card__media { width: 100%; border-radius: var(--radius-md); aspect-ratio: 16 / 10; object-fit: cover; }
.card__title { font-size: var(--fs-h4); }
.card__body { color: var(--text-muted); }
.card__link { margin-top: auto; color: var(--link); text-decoration: none; font-weight: var(--fw-medium); }
.card__link:hover { color: var(--link-hover); }

/* ── Article ─────────────────────────────────────────────────────────────── */
.article h2 { margin-top: 0; }
.article .media { margin-block: var(--space-4); }

/* ── Catalogue gallery (detail item images) ──────────────────────────────── */
.catalog-gallery {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.catalog-gallery img { width: 100%; border-radius: var(--radius-md); aspect-ratio: 1 / 1; object-fit: cover; }

/* ── Dynamic-island states: skeleton / empty / error ─────────────────────── */
.island { position: relative; }
.island__skeleton {
  border-radius: var(--radius-lg); min-height: 8rem;
  background: linear-gradient(90deg, var(--neutral-100) 25%, var(--neutral-50) 37%, var(--neutral-100) 63%);
  background-size: 400% 100%; animation: island-shimmer 1.4s ease infinite;
}
@media (prefers-reduced-motion: reduce) { .island__skeleton { animation: none; } }
@keyframes island-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.island__empty, .island__error {
  border: 1px dashed var(--border); border-radius: var(--radius-lg);
  padding: var(--space-5); color: var(--text-muted); text-align: center;
}
.island__error { border-style: solid; border-color: var(--error); color: var(--error); }

/* Reviews island: a responsive strip of testimonial cards. */
.reviews-island__list {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.review-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-5);
}
.review-card__quote { margin: 0 0 var(--space-3); }
.review-card__author { margin: 0; color: var(--text-muted); font-weight: var(--fw-medium); }

/* ── Empty-home placeholder ──────────────────────────────────────────────── */
.welcome { grid-column: 1 / -1; text-align: center; padding-block: var(--space-8); }

/* ── 404 ─────────────────────────────────────────────────────────────────── */
.notfound { grid-column: 1 / -1; text-align: center; padding-block: var(--space-8); }
.notfound .code { font-size: var(--fs-h1); font-weight: var(--fw-bold); color: var(--primary); }

/* ── Responsive: stack to one column below md (48em) ─────────────────────── */
@media (max-width: 48em) {
  .page-main { grid-template-columns: 1fr; gap: var(--space-4); }
  .el { grid-column: 1 / -1 !important; }
}

/* ── Per-element share row (fixed18.2bis-C) ──────────────────────────────────
   The share links under a card/article that opts into socialShare. Each button
   is a brand-coloured pill carrying BOTH the brand colour and a text label, so
   meaning never rests on colour alone (WCAG). Brand colours are fixed values,
   not theme tokens, so the white text stays constant across themes — matching
   the WhatsApp-contact FAB, which already uses #25D366. The links are the
   networks' own share endpoints (see share.html), no SDK, no tracking. */
.share {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin-top: var(--space-4);
}
.share-label { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--text); }
.share a {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  font-size: var(--fs-small); font-weight: var(--fw-medium); text-decoration: none;
  color: #fff; transition: opacity var(--motion-fast) var(--easing);
}
.share a:hover { opacity: 0.88; }
/* Brand icon inside each pill: sized to sit beside the label. */
.share a .az-icon svg { width: 18px; height: 18px; }
/* Brand colours: Facebook, X, LinkedIn, WhatsApp. */
.share-fb { background: #1877F2; }
.share-x  { background: #000000; }
.share-in { background: #0A66C2; }
.share-wa { background: #25D366; }