/* ==========================================================================
   Responsive system (loaded last).
   1. Stacking cards component ([data-stack])
   2. Mobile: image first, then content (< 768px)
   3. Touch targets ≥ 44px
   4. Overflow guards
   Tested at 360, 390, 768, 1024, 1280 and 1440px.
   ========================================================================== */

/* ---- Spacing scale (used by new rules; design tokens stay in tokens.css) */
:root {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --stack-top: calc(env(safe-area-inset-top, 0px) + 92px);
  --stack-step: 14px;
}

/* ==========================================================================
   1. Stacking cards
   Default (no JS, small screens, short screens, cards taller than the screen):
   clean vertical flow. stack.js adds .is-stacked only when it works well.
   ========================================================================== */
[data-stack] {
  display: grid;
  gap: clamp(16px, 2.5vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}
[data-stack] > .stack__item {
  position: relative;      /* overrides the design's always-sticky rule */
  top: auto;
  margin: 0;
}
[data-stack] > .stack__item > * { transform-origin: 50% 0; }

[data-stack].is-stacked {
  display: block;
  padding-bottom: clamp(24px, 6vh, 64px);
}
[data-stack].is-stacked > .stack__item {
  position: sticky;
  top: calc(var(--stack-top) + var(--i, 0) * var(--stack-step));
  z-index: calc(var(--i, 0) + 1);
  margin-bottom: clamp(24px, 5vh, 56px);
}
[data-stack].is-stacked > .stack__item:last-child { margin-bottom: 0; }

/* Compact cards so every card fits under its sticky offset (button always reachable) */
[data-stack].is-stacked .svc { min-height: 0; }
@media (min-width: 900px) and (max-height: 860px) {
  [data-stack].is-stacked .svc { padding: clamp(18px, 2.4vw, 32px); gap: 32px; }
  [data-stack].is-stacked .svc__title { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); }
  [data-stack].is-stacked .svc__body { gap: 12px; }
  [data-stack].is-stacked .svc__media { aspect-ratio: auto; height: min(42vh, 360px); }
  [data-stack].is-stacked .tags { display: none; }
}
@media (max-width: 899px) {
  :root { --stack-top: calc(env(safe-area-inset-top, 0px) + 78px); --stack-step: 10px; }
  [data-stack].is-stacked .svc { gap: 14px; padding: 14px 14px 18px; border-radius: 18px; }
  [data-stack].is-stacked .svc__media { aspect-ratio: auto; height: clamp(120px, 24vh, 260px); }
  [data-stack].is-stacked .svc__body { gap: 10px; }
  [data-stack].is-stacked .svc__num { height: 24px; min-width: 38px; font-size: 11px; }
  [data-stack].is-stacked .svc__title { font-size: clamp(1.35rem, 1.1rem + 1.4vw, 1.9rem); }
  [data-stack].is-stacked .svc__desc { font-size: 0.9375rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  [data-stack].is-stacked .tags { display: none; }
  [data-stack].is-stacked .svc__stack li { padding: 4px 10px 4px 4px; }
  [data-stack].is-stacked .svc__stack .ticon { width: 22px; height: 22px; padding: 4px; }
  [data-stack].is-stacked .svc__link { min-height: 44px; padding: 10px 16px; }
}
/* Short screens (small phones, 600–700px tall laptops): tighter still */
@media (max-width: 899px) and (max-height: 720px) {
  [data-stack].is-stacked .svc__media { height: 17vh; }
  [data-stack].is-stacked .svc__desc { -webkit-line-clamp: 2; }
  [data-stack].is-stacked .svc__stack { display: none; }
}
@media (min-width: 900px) and (max-height: 700px) {
  [data-stack].is-stacked .svc { padding: 18px 22px; gap: 24px; }
  [data-stack].is-stacked .svc__media { height: min(34vh, 260px); }
  [data-stack].is-stacked .svc__title { font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem); }
  [data-stack].is-stacked .svc__desc { font-size: 0.9375rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}
.admin-bar [data-stack].is-stacked > .stack__item { top: calc(var(--stack-top) + 32px + var(--i, 0) * var(--stack-step)); }

/* Buttons and links inside cards are always on top and clickable */
.svc__shade { pointer-events: none; z-index: 1; }
.svc__body, .svc__media { position: relative; z-index: 2; }
.svc__link { position: relative; z-index: 3; }
@media (hover: hover) and (pointer: fine) {
  .svc__arrow { opacity: 1; transform: none; } /* never hide the arrow cue */
}

/* ==========================================================================
   2. Mobile: image first, then content
   ========================================================================== */
@media (max-width: 767px) {
  /* Service cards */
  .svc { grid-template-columns: 1fr; }
  .svc__media { order: -1; }

  /* About hero: portrait above the text */
  .about-hero__grid { display: flex; flex-direction: column; }
  .about-hero__photo { order: -1; width: min(100%, 320px); align-self: center; }

  /* Case study: hero screenshot above the title block */
  .case { display: flex; flex-direction: column; }
  .case__hero-wrap { order: -1; padding-top: calc(env(safe-area-inset-top, 0px) + 92px); }
  .case > .case__head { padding-top: var(--space-5); }

  /* Featured blog card: image first (already in DOM order), keep full width */
  .bcard--featured { display: flex; flex-direction: column; }

  /* Process steps: illustration above the text */
  .step__card { grid-template-columns: 1fr; }
  .step__vis { order: -1; }

  /* Why tabs: picture above the explanation */
  .why__stage { display: flex; flex-direction: column; }
  .why__media { order: -1; }

  /* Any split layout opted in with data-image-first */
  [data-image-first] { display: flex; flex-direction: column; }
  [data-image-first] > [data-image] { order: -1; }
}

/* Images keep their box (no layout shift) and crop cleanly */
.svc__media, .why__media, .pcard__img, .work-card__img, .bcard__img, .about-hero__photo { overflow: hidden; }
.svc__media img, .why__media img, .pcard__img img, .work-card__img img, .bcard__img img, .about-hero__photo img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   3. Touch targets ≥ 44px
   ========================================================================== */
.nav-links a { min-height: 44px; display: flex; align-items: center; }
.menu-toggle { width: 44px; height: 44px; }
.btn--sm { --btn-h: 44px; }
.pfilter a { min-height: 44px; }
.faq__tabs [role="tab"] { min-height: 44px; }
.why__tab { min-height: 44px; }
.carousel__dots button { width: 44px; height: 44px; }
.socials a { width: 44px; height: 44px; }
.search__btn { width: 44px; height: 44px; top: 4px; }
.search__input { min-height: 52px; }
.toc__box a { min-height: 44px; display: flex; align-items: center; }
.footer__col a, .crumbs a, .mobile-menu__contact a { display: inline-flex; align-items: center; min-height: 44px; }
.footer__col ul { gap: 0; }
.link-arrow { min-height: 44px; }
.qa__q span { min-height: 44px; }
.cmp__opt { min-height: 44px; }
.bcard__cat, .post__meta a, .post__head .label a, .cta__contact a, .link-underline, .carousel__source a {
  display: inline-flex; align-items: center; min-height: 44px;
}
.bcard__meta { align-items: center; }
.toc__box summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; }
.toc__box summary::after { float: none; }
.comment-form-cookies-consent { display: flex; align-items: center; gap: 10px; }
.comment-form-cookies-consent input[type="checkbox"] { width: 22px; height: 22px; margin: 11px 0; flex: none; }

/* ==========================================================================
   4. Overflow guards (no horizontal scroll at any width)
   ========================================================================== */
html, body { max-width: 100%; }
main { overflow-x: clip; }
.container, .section, .page-hero { min-width: 0; }
pre, table, .prose .wp-block-table { max-width: 100%; overflow-x: auto; }
.prose img, .prose iframe, .prose video, .prose embed { max-width: 100%; height: auto; }
.footer__word { max-width: 100%; overflow: hidden; }
@media (max-width: 400px) {
  .hero__countries li { min-width: 30px; padding-inline: 6px; }
  .cmp__switch { display: flex; width: 100%; }
  .cmp__opt { flex: 1; padding-inline: 10px; white-space: normal; }
}