/* Small-screen and accessibility guardrails for the Shera portfolio. */
:root {
  color-scheme: dark;
  text-rendering: optimizeLegibility;
  --page-gutter: clamp(1rem, 5vw, 4.5rem);
  --section-space: clamp(4rem, 8vw, 7.5rem);
  --content-max: 90rem;
  --touch-size: 2.75rem;
}

html { scroll-behavior: smooth; }
body { min-width: 320px; overflow-x: hidden; }
body > * { max-width: 100%; }
img, svg, video { max-width: 100%; }
img { height: auto; }
a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:where(a, button, input, select, textarea) { min-height: var(--touch-size); }
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid #ff5878;
  outline-offset: 4px;
}

/* KPI strip: keep the four figures aligned and give the animated values a clear entrance. */
section:has([data-count]) { text-align: center; }
section:has([data-count]) > div { display: grid; place-items: center; }
section:has([data-count]) [data-count] { display: inline-block; min-width: 2ch; }
@keyframes kpi-number-in {
  from { opacity: 0; transform: translateY(10px) scale(.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
section:has([data-count]) [data-count] { animation: kpi-number-in .7s cubic-bezier(.2,.8,.2,1) both; }

/* Fluid container rhythm shared by every section, including the inline Shera layout. */
section > div { width: min(100%, var(--content-max)); margin-inline: auto; }
section { scroll-margin-top: 5rem; }
footer { padding-inline: var(--page-gutter) !important; }

@media (max-width: 760px) {
  * { min-width: 0; }
  html, body { width: 100%; max-width: 100vw; }
  body { font-size: 12px; }
  header { gap: 12px !important; padding: 14px 18px !important; overflow: hidden; justify-content: flex-start !important; }
  header nav { flex: 0 0 auto; width: auto !important; min-width: 0 !important; margin-left: auto; justify-content: flex-end; gap: 8px 14px !important; }
  header nav a:not(:last-child) { display: none; }
  header nav a:last-child { position: absolute; top: 14px; right: 18px; display: grid !important; place-items: center; width: 40px; height: 40px; padding: 0 !important; overflow: hidden; font-size: 0 !important; white-space: nowrap; }
  header nav a:last-child::after { content: '→'; font-size: 16px; line-height: 1; }
  section { padding-block: var(--section-space) !important; padding-inline: var(--page-gutter) !important; }
  section, section > div { max-width: 100vw !important; overflow-x: clip; }
  section > div { width: calc(100vw - (var(--page-gutter) * 2)) !important; max-width: calc(100vw - (var(--page-gutter) * 2)) !important; min-width: 0; }
  section p { width: 100% !important; max-width: 100% !important; min-width: 0; }
  p { display: block; white-space: normal !important; overflow-wrap: anywhere; word-break: normal; }
  h1, h2 { width: 100% !important; max-width: 100% !important; overflow-wrap: anywhere; word-break: normal; }
  h1 { font-size: clamp(25.6px, 7.6vw, 36.8px) !important; line-height: 1 !important; }
  h2 { font-size: clamp(27.2px, 8vw, 44.8px) !important; }
  [style*="grid-template-columns"] { width: 100% !important; grid-template-columns: minmax(0, 1fr) !important; }
  [style*="minmax(320px"] { grid-template-columns: minmax(0, 1fr) !important; }
  section:has([data-count]) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  section:has([data-count]) > div { min-height: 142px; padding-inline: 12px !important; border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,.07); }
  section:has([data-count]) > div:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.07) !important; }
  section:has([data-count]) > div:nth-last-child(-n+2) { border-bottom: 0; }
  form { border-radius: 16px !important; }
  input, select, textarea, form button { min-height: 48px; font-size: 12.8px !important; }
  [style*="position: fixed"][style*="bottom"] { max-width: calc(100vw - 32px); }
  a[href*="wa.me"] { right: 16px !important; max-width: calc(100vw - 32px) !important; padding-inline: 16px !important; }
}

@media (min-width: 761px) and (max-width: 1023px) {
  section { padding-inline: clamp(1.5rem, 4vw, 3rem) !important; }
  section:has([data-count]) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  section:has([data-count]) > div { text-align: center; border-bottom: 1px solid rgba(255,255,255,.07); }
  section:has([data-count]) > div:nth-child(even) { border-right: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}