/* ============================
   Mobile-first CSS (2025-09-29)
   Оптимізовано для телефонів
   ============================ */

/* Reset */
* { margin:0; padding:0; box-sizing:border-box; }

/* A11y helpers */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:16px; top:12px; width:auto; height:auto; padding:8px 12px; z-index:1000;
  background:#fff; border:2px solid #005c96; border-radius:10px;
}

/* Design tokens */
:root{
  --bg-primary:#d9ddd2;
  --bg-secondary:#e8ebe4;
  --bg-white:#fff;
  --color-primary:#005c96;
  --color-accent:#ffd300;
  --color-dark:#2a2a2a;
  --color-muted:#6b6b6b;

  --radius:12px; --radius-sm:8px;

  --shadow-sm:0 1px 6px rgba(0,92,150,.08);
  --shadow-md:0 2px 12px rgba(0,92,150,.12);
  --shadow-lg:0 4px 20px rgba(0,92,150,.16);

  --fz-12: clamp(11px, 2.6vw, 12px);
  --fz-13: clamp(12px, 2.9vw, 13px);
  --fz-14: clamp(13px, 3.2vw, 14px);
  --fz-15: clamp(14px, 3.6vw, 15px);
  --fz-16: clamp(15px, 3.9vw, 16px);
  --fz-18: clamp(16px, 4.4vw, 18px);
  --fz-20: clamp(17px, 4.9vw, 20px);
  --fz-22: clamp(18px, 5.4vw, 22px);

  --sticky-offset: 84px; /* будет обновлено JS по факту */
}

/* Base */
html{ scroll-behavior:smooth; }
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Inter','Roboto',sans-serif;
  font-size:var(--fz-16);
  line-height:1.6;
  color:var(--color-dark);
  background:linear-gradient(135deg,var(--bg-primary) 0%,var(--bg-secondary) 100%);
  min-height:100vh;
  background-attachment:scroll;
  -webkit-tap-highlight-color:transparent;
}
.wrap{ max-width:1200px; margin:0 auto; padding:0 16px; }

/* ---------- Header ---------- */
header{
  background:var(--bg-white);
  border-bottom:3px solid var(--color-accent);
  position:sticky; top:0; z-index:100;
  box-shadow:var(--shadow-sm);
  padding-top:env(safe-area-inset-top);
}
header .wrap{ padding:12px 16px; }
header .row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
}
header h1{
  font-size:var(--fz-20);
  color:var(--color-primary);
  font-weight:700; margin:0;
  display:flex; align-items:center; gap:8px;
}
header h1::before{ content:"📸"; font-size:24px; }

/* ---------- Navigation ---------- */
.nav-wrap{ display:flex; align-items:center; gap:8px; width:100%; }
.nav-viewport{ position:relative; flex:1 1 auto; min-width:0; }

nav{
  display:flex; gap:8px;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  scroll-snap-type:x proximity;
  padding-bottom:4px;
  scroll-behavior:smooth; /* ← добавлено для плавной горизонтальной прокрутки */
}
nav::-webkit-scrollbar{ display:none; }
nav a{
  flex:0 0 auto; white-space:nowrap; scroll-snap-align:center;
  color:var(--color-dark); text-decoration:none; font-weight:600;
  font-size:var(--fz-13); padding:9px 12px; border-radius:999px;
  border:1px solid rgba(0,92,150,.15); background:#fff;
  transition:transform .15s ease, box-shadow .15s ease, background-color .2s ease;
  min-height:44px; display:inline-flex; align-items:center;
}
nav a:hover{ transform:translateY(-1px); box-shadow:var(--shadow-sm); background:var(--color-accent); }
nav a:focus-visible{ outline:3px solid var(--color-accent); outline-offset:2px; }
nav a.active{ background:var(--color-accent); box-shadow:var(--shadow-sm); }

/* Нав-стрелки */
.nav-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(0,92,150,.2);
  background:#fff; box-shadow:var(--shadow-sm); font-size:22px; font-weight:800;
  display:grid; place-items:center; opacity:.98; z-index:2;
}
.nav-arrow.left{ left:6px; }
.nav-arrow.right{ right:6px; }

/* Градиенты переполнения */
.nav-fade{
  position:absolute; top:0; bottom:0; width:28px; pointer-events:none; z-index:1; opacity:0;
  transition:opacity .15s ease;
}
.nav-fade.left{ left:0; background:linear-gradient(90deg, #fff 0%, rgba(255,255,255,0) 100%); }
.nav-fade.right{ right:0; background:linear-gradient(270deg, #fff 0%, rgba(255,255,255,0) 100%); }

/* Хинт «Проведіть →» */
.nav-hint{
  position:absolute; bottom:-10px; right:8px; font-size:var(--fz-12);
  background:#fff; border:1px dashed rgba(0,92,150,.35); padding:4px 8px; border-radius:999px;
  box-shadow:var(--shadow-sm); animation:hint-nudge 2s ease infinite;
}
@keyframes hint-nudge{ 0%,100%{ transform:translateX(0) } 50%{ transform:translateX(6px) } }
@media (prefers-reduced-motion:reduce){ .nav-hint{ animation:none } }

.nav-more{
  flex:0 0 auto; white-space:nowrap; font-weight:700; font-size:var(--fz-13);
  padding:9px 12px; border-radius:999px; border:2px solid var(--color-primary);
  background:#fff; color:var(--color-primary); min-height:44px; box-shadow:var(--shadow-sm);
}
.nav-more:active{ transform:scale(.98); }

/* ---------- Bottom-sheet (СТИЛИ ДИАЛОГА) ---------- */
.sheet::backdrop{ background:rgba(0,0,0,.4); }
.sheet{
  width:100%; max-width:600px; margin:0; padding:0; border:none; border-radius:16px 16px 0 0;
  position:fixed; left:50%; transform:translateX(-50%); bottom:0; background:#fff;
}
.sheet[open]{ animation:sheet-in .2s ease; }
@keyframes sheet-in{ from{ transform:translate(-50%, 20px); opacity:.9 } to{ transform:translate(-50%,0); opacity:1 } }
.sheet-head{
  display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 16px;
  border-bottom:1px solid rgba(0,92,150,.12); background:#fff; border-radius:16px 16px 0 0;
}
.sheet-close{
  border:none; background:#fff; font-size:18px; width:36px; height:36px; border-radius:50%;
  cursor:pointer;
}
.sheet-body{
  background:#fff; padding:12px 16px 16px; display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.sheet-body a{
  display:block; padding:10px 12px; border:1px solid rgba(0,92,150,.15); border-radius:12px; text-decoration:none;
  color:var(--color-dark); font-weight:600;
}

/* ---------- Hero ---------- */
.hero{ padding:32px 0; text-align:center; }
.badge{
  display:inline-block; background:var(--color-accent); color:var(--color-dark);
  padding:6px 12px; border-radius:999px; font-size:var(--fz-12); font-weight:700;
  margin-bottom:12px; box-shadow:var(--shadow-md);
  animation:pulse 2s infinite;
}
.hero p{ font-size:var(--fz-15); max-width:42ch; margin:0 auto 16px; line-height:1.7; }
.actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn{
  padding:12px 18px; border-radius:var(--radius-sm);
  font-size:var(--fz-14); font-weight:700; border:2px solid var(--color-primary);
  background:#fff; color:var(--color-primary); cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background-color .2s ease;
  min-height:44px; box-shadow:var(--shadow-sm);
  touch-action:manipulation;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn:focus-visible{ outline:3px solid var(--color-accent); outline-offset:2px; }
.btn.primary{ background:var(--color-primary); color:#fff; }
.btn.primary:hover{ background:#004775; border-color:#004775; }

/* ---------- Main ---------- */
main{ padding:20px 0 32px; }
section{ scroll-margin-top:var(--sticky-offset); }

/* ---------- Cards ---------- */
.card{
  background:var(--bg-white); border-radius:var(--radius);
  margin-bottom:20px; overflow:hidden; box-shadow:var(--shadow-md);
  transition:transform .15s ease, box-shadow .15s ease;
  border:1px solid rgba(0,92,150,.1);
}
.card:hover{ box-shadow:var(--shadow-lg); transform:translateY(-1px); }
.card .head{
  padding:16px;
  background:linear-gradient(135deg, var(--color-primary), #0074b3);
  color:#fff; position:relative; overflow:hidden;
}
.card .head::after{
  content:''; position:absolute; top:-50%; right:-50%; width:200%; height:200%;
  background:radial-gradient(circle, rgba(255,211,0,.1) 0%, transparent 70%);
  animation:rotate 20s linear infinite;
}
.card h2{ font-size:var(--fz-18); margin-bottom:2px; position:relative; z-index:1; }
.hint{ font-size:var(--fz-12); opacity:.95; font-weight:400; position:relative; z-index:1; }

/* ---------- Tables ---------- */
table{ width:100%; border-collapse:separate; border-spacing:0; }
thead{ background:var(--bg-secondary); }
thead th{
  padding:14px 16px; text-align:left; font-weight:700; color:var(--color-primary);
  font-size:var(--fz-12); text-transform:uppercase; letter-spacing:.5px;
  border-bottom:2px solid var(--color-accent);
}
tbody tr{ transition:background-color .15s ease; position:relative; }
tbody tr:hover{ background:linear-gradient(90deg, rgba(255,211,0,.08) 0%, rgba(255,211,0,.04) 100%); }
tbody tr::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:linear-gradient(90deg, transparent, var(--bg-primary), transparent);
}
td{ padding:14px 16px; font-size:var(--fz-14); color:var(--color-dark); }
tbody td:first-child{ font-weight:600; color:var(--color-primary); }

.price{
  font-weight:800; color:var(--color-primary); font-size:var(--fz-15);
  white-space:nowrap; position:relative;
}
.price::before{
  content:''; position:absolute; left:-8px; top:50%; width:4px; height:60%;
  background:var(--color-accent); transform:translateY(-50%); border-radius:2px;
}

/* ---------- Grid ---------- */
.grid{ display:grid; grid-template-columns:1fr; gap:16px; }
.in-card{ padding:12px 12px 0; }
.subcard{ border:none; }

/* ---------- Footers in cards ---------- */
.card .foot{
  padding:14px 16px;
  background:linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
  border-top:1px solid rgba(0,92,150,.1);
}
.note{ font-size:var(--fz-12); color:var(--color-muted); font-style:italic; }

/* Контакты */
.contacts{ display:block; line-height:1.8; }

/* ---------- Page footer ---------- */
footer{
  background:var(--color-primary); color:#fff; padding:20px 0; margin-top:40px;
}
footer .cols{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
}
footer small{ font-size:var(--fz-12); opacity:.9; }
.muted{ color:var(--color-muted); font-weight:400; }

/* ---------- Mobile table → cards (≤600px) ---------- */
@media (max-width:600px){
  thead{ display:none; }
  table, tbody, tr, td{ display:block; width:100%; }
  tbody tr{
    background:#fff; border:1px solid rgba(0,92,150,.12);
    border-radius:12px; box-shadow:var(--shadow-sm);
    padding:10px 12px; margin:10px 12px;
  }
  tbody tr::after{ display:none; }
  td{
    padding:8px 0; border:none; position:relative;
    display:grid; grid-template-columns:1fr; gap:4px;
  }
  td::before{
    content:attr(data-label);
    font-size:var(--fz-12); color:var(--color-muted);
    text-transform:uppercase; letter-spacing:.04em;
    order:-1;
  }
  .price{ justify-self:end; }
  .price::before{ left:auto; right:-6px; width:3px; }
}

/* Секційні підписи колонок для mobile (без зміни HTML) */
@media (max-width:600px){
  #docs td:nth-child(1)::before{ content:"Послуга"; }
  #docs td:nth-child(2)::before{ content:"Що входить"; }
  #docs td:nth-child(3)::before{ content:"Ціна"; }

  #print td:nth-child(1)::before{ content:"Формат"; }
  #print td:nth-child(2)::before{ content:"Опис"; }
  #print td:nth-child(3)::before{ content:"Ціна"; }

  #scan td:nth-child(1)::before{ content:"Послуга"; }
  #scan td:nth-child(2)::before{ content:"Деталі"; }
  #scan td:nth-child(3)::before{ content:"Ціна"; }

  #retouch td:nth-child(1)::before,
  #studio  td:nth-child(1)::before,
  #product td:nth-child(1)::before,
  #biz     td:nth-child(1)::before{ content:"Послуга"; }
  #retouch td:nth-child(2)::before,
  #studio  td:nth-child(2)::before,
  #product td:nth-child(2)::before,
  #biz     td:nth-child(2)::before{ content:"Що входить"; }
  #retouch td:nth-child(3)::before,
  #studio  td:nth-child(3)::before,
  #product td:nth-child(3)::before,
  #biz     td:nth-child(3)::before{ content:"Ціна"; }

  #bundles td:nth-child(1)::before{ content:"Пакет"; }
  #bundles td:nth-child(2)::before{ content:"Склад"; }
  #bundles td:nth-child(3)::before{ content:"Ціна"; }

  #extra td:nth-child(1)::before{ content:"Опція"; }
  #extra td:nth-child(2)::before{ content:"Опис"; }
  #extra td:nth-child(3)::before{ content:"Умови"; }
}

/* ---------- Medium+ (≥768px) ---------- */
@media (min-width:768px){
  header .wrap{ padding:20px; }
  header h1{ font-size:24px; }

  nav{ gap:12px; overflow:visible; flex-wrap:wrap; }
  nav a{ border-radius:var(--radius-sm); font-size:14px; padding:10px 14px; }

  .hero{ padding:60px 20px; }
  .badge{ font-size:14px; padding:8px 16px; }
  .hero p{ font-size:18px; margin-bottom:24px; max-width:60ch; }

  main{ padding:40px 20px; }
  .card{ margin-bottom:24px; }

  table{ display:table; width:100%; border-collapse:separate; border-spacing:0; }
  thead{ display:table-header-group; }
  tbody{ display:table-row-group; }
  tr{ display:table-row; }
  th, td{ display:table-cell; }

  tbody tr{ background:none; border:none; box-shadow:none; padding:0; margin:0; }
  td{ padding:14px 16px; }
  td::before{ content:none !important; }

  .grid{ grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:20px; }

  thead th:nth-child(3),
  tbody td:nth-child(3){ text-align:right; }

  /* На десктопе стрелки/градиенты/хинт скрываем,
     кнопка «Усі розділи» остаётся */
  .nav-arrow,.nav-fade,.nav-hint{ display:none !important; }
}

/* ---------- Large (≥1024px) ---------- */
@media (min-width:1024px){
  .wrap{ padding:0 24px; }
  .card h2{ font-size:22px; }
  .card .head{ padding:24px; }
  thead th{ padding:16px 20px; }
  td{ padding:16px 20px; }
  nav a{ padding:10px 16px; }
}

/* ---------- Print ---------- */
@media print{
  header{ position:static; padding-top:0; }
  .btn,.actions,.badge,.nav-wrap{ display:none !important; }
  .card{ box-shadow:none; border:1px solid #ddd; page-break-inside:avoid; }
  body{ background:#fff; }
  .card .head{
    background:var(--color-primary) !important;
    print-color-adjust:exact; -webkit-print-color-adjust:exact;
  }
}

/* ---------- A11y, motion, selection ---------- */
a:focus-visible, button:focus-visible{ outline:3px solid var(--color-accent); outline-offset:2px; }
::selection{ background:var(--color-accent); color:var(--color-dark); }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition:none !important; }
}

/* Animations */
@keyframes pulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
@keyframes rotate{ from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* Hover target section highlight */
section:target .head{ animation:highlight .5s ease; }
@keyframes highlight{
  0%{ background:linear-gradient(135deg,var(--color-primary),#0074b3); }
  50%{ background:linear-gradient(135deg,var(--color-accent),#ffdd33); }
  100%{ background:linear-gradient(135deg,var(--color-primary),#0074b3); }
}