/* ============================================================
   Vindex Studio — "Web dizajn & UI/UX" premium redizajn
   Sve pravilo u ovoj datoteci ide POD .page-service-web-design (klasa na
   <main>, postavlja je service-detail.php SAMO za ovu jednu uslugu) — bez
   ikakvog utjecaja na ostalih 7 usluga ili druge stranice. Prati assets/js/
   service-web-design.js (scroll-reveal, animacija linije procesa, FAQ).

   Sadržaj:
   1. Scroll-reveal osnova (.reveal-up/-left/-right/-stagger/-process)
   2. Uvodna sekcija (ikona, širina teksta, dekorativna pozadina)
   3. Naizmjenične pozadine sekcija (.service-section--alt)
   4. "Probleme koje rješavamo" — kartice
   5. "Što dobivate" — kartice
   6. "Kako radimo" — veliki brojevi, animirana linija, pulse točkica
   7. "Tehnologije i alati" — premium pill tagovi
   8. "Povezani projekti" — premium portfolio kartice
   9. FAQ — glatki accordion
   10. "Povezane usluge" — premium service kartice
   11. Završni CTA — premium varijanta
   ============================================================ */

/* ============================================================
   1. Scroll-reveal osnova
   Progresivno poboljšanje: sadržaj je VIDLJIV bez JS-a (default stanje).
   Tek kad JS potvrđeno radi, doda .js-reveal na <main> i ELEMENTI se sakriju
   prije animiranog otkrivanja — ako JS ikad zakaže, ništa ne ostaje
   nevidljivo. prefers-reduced-motion dodatno gasi transform/transition.
   ============================================================ */
.page-service-web-design.js-reveal .reveal-up,
.page-service-web-design.js-reveal .reveal-left,
.page-service-web-design.js-reveal .reveal-right {
  opacity: 0;
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.page-service-web-design.js-reveal .reveal-up {
  transform: translateY(24px);
}

.page-service-web-design.js-reveal .reveal-left {
  transform: translateX(-24px);
}

.page-service-web-design.js-reveal .reveal-right {
  transform: translateX(24px);
}

.page-service-web-design .reveal-up.is-visible,
.page-service-web-design .reveal-left.is-visible,
.page-service-web-design .reveal-right.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* Grupe kartica: djeca animiraju stagger kad roditelj (.reveal-stagger)
   dobije .is-visible — jedan promatrač po grupi, ne po kartici. */
.page-service-web-design.js-reveal .reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.page-service-web-design .reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

.page-service-web-design .reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.page-service-web-design .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 90ms; }
.page-service-web-design .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 180ms; }
.page-service-web-design .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 270ms; }
.page-service-web-design .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 360ms; }
.page-service-web-design .reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 450ms; }

@media (prefers-reduced-motion: reduce) {
  .page-service-web-design .reveal-up,
  .page-service-web-design .reveal-left,
  .page-service-web-design .reveal-right,
  .page-service-web-design .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   2. Uvodna sekcija
   ============================================================ */
/* Sam <main> siječe horizontalni bleed dekorativnih elemenata (krug ispod,
   CTA glow je već zasebno zatvoren u components.css) — bez ovoga bi
   apsolutno pozicionirani krug na uvodu znao stvoriti horizontalni scroll
   na uskim širinama. */
.page-service-web-design {
  overflow-x: hidden;
}

.page-service-web-design .service-detail__intro {
  position: relative;
  gap: var(--space-6);
  max-width: 780px;
  padding-block: var(--space-6);
}

/* Vrlo suptilna dekoracija: blago blurani zeleni krug + tanka linija —
   position:relative na roditelju gore, ovo se ne dodiruje bez novog markupa. */
.page-service-web-design .service-detail__intro::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -60px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, var(--color-accent-glow), transparent 70%);
  filter: blur(40px);
  opacity: 0.35;
  z-index: -1;
  pointer-events: none;
}

.page-service-web-design .service-detail__intro::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--color-border-strong), transparent 70%);
  pointer-events: none;
}

.page-service-web-design .service-detail__icon {
  position: relative;
  width: 72px;
  height: 72px;
  padding: var(--space-3);
  background-color: var(--color-accent-soft);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 20px rgba(5, 150, 105, 0.12);
  transition: transform var(--transition-base);
}

.page-service-web-design .service-detail__intro:hover .service-detail__icon {
  transform: translateY(-2px);
}

.page-service-web-design .service-detail__intro p {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--color-text-secondary);
}

@media (min-width: 600px) {
  .page-service-web-design .service-detail__intro {
    align-items: center;
    gap: var(--space-7);
  }
}

/* ============================================================
   3. Naizmjenične pozadine sekcija
   "Break-out" trik — pozadina puca do ruba viewporta iako je sadržaj i
   dalje unutar .container, bez diranja HTML strukture stranice.
   ============================================================ */
.page-service-web-design .service-section {
  position: relative;
  /* Smanjeno s naslijeđenih --space-10 (128px) — na ovoj stranici sekcije
     inače dobivaju i dodatni padding (ispod), pa bi zbroj bio predebeo. */
  margin-top: var(--space-8);
}

.page-service-web-design .service-section--alt {
  padding-block: var(--space-6);
}

.page-service-web-design .service-section--alt::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #fbfcfb, #f2f7f4);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  z-index: -1;
}

/* ============================================================
   4. "Probleme koje rješavamo"
   ============================================================ */
.page-service-web-design .problem-grid {
  gap: var(--space-5);
}

.page-service-web-design .problem-item {
  padding: var(--space-6);
  gap: var(--space-5);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.page-service-web-design .problem-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-accent);
}

.page-service-web-design .problem-item__icon {
  width: 36px;
  height: 36px;
  background-color: rgba(217, 119, 6, 0.1);
  transition: transform var(--transition-base);
}

.page-service-web-design .problem-item:hover .problem-item__icon {
  transform: scale(1.05);
}

.page-service-web-design .problem-item p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* ============================================================
   5. "Što dobivate"
   ============================================================ */
.page-service-web-design .benefit-grid {
  gap: var(--space-5);
}

.page-service-web-design .benefit-item {
  align-items: center;
  padding: var(--space-6);
  gap: var(--space-5);
  background-color: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

.page-service-web-design .benefit-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md), 0 0 0 1px var(--color-border-accent);
}

.page-service-web-design .benefit-item__icon {
  width: 36px;
  height: 36px;
  font-size: 1.05rem;
  transition: transform var(--transition-base);
}

.page-service-web-design .benefit-item:hover .benefit-item__icon {
  transform: scale(1.08) rotate(-6deg);
}

.page-service-web-design .benefit-item p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* ============================================================
   6. "Kako radimo" — najizraženija sekcija stranice
   ============================================================ */
.page-service-web-design .process__steps {
  margin-top: var(--space-9);
}

.page-service-web-design .process-step__number {
  font-size: 3rem;
  font-weight: var(--fw-bold);
  color: var(--color-border-strong);
  transition: color 500ms ease;
}

.page-service-web-design .reveal-process.is-visible .process-step__number {
  color: var(--color-text-muted);
}

.page-service-web-design .process-step:hover .process-step__number {
  color: var(--color-text-secondary);
}

/* Zelena "ispunjena" linija preko postojeće neutralne (::before) — počinje
   nepopunjena (scale 0) i puni se od ruba prema van kad korak uđe u prikaz. */
.page-service-web-design .process-step__rail::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--color-accent-500);
  transform: translateX(-50%) scaleY(0);
  transform-origin: top;
  transition: transform 550ms cubic-bezier(0.65, 0, 0.35, 1);
}

.page-service-web-design .process-step:last-child .process-step__rail::after {
  bottom: 50%;
}

.page-service-web-design .reveal-process.is-visible .process-step__rail::after {
  transform: translateX(-50%) scaleY(1);
}

.page-service-web-design .process-step__dot {
  transition: transform var(--transition-base);
}

.page-service-web-design .process-step:hover .process-step__dot {
  transform: translate(-50%, -50%) scale(1.25);
}

.page-service-web-design .reveal-process.is-visible .process-step__dot {
  animation: serviceProcessPulse 900ms ease-out 1;
}

@keyframes serviceProcessPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.45);
  }
  100% {
    box-shadow: 0 0 0 16px rgba(5, 150, 105, 0);
  }
}

.page-service-web-design .process-step__title {
  transition: color var(--transition-base);
}

.page-service-web-design .process-step:hover .process-step__title {
  color: var(--color-accent-700);
}

/* Stagger otkrivanje sadržaja svakog koraka + pomak linije/točkice */
.page-service-web-design.js-reveal .process-step__content,
.page-service-web-design.js-reveal .process-step__number {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 550ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 550ms cubic-bezier(0.22, 1, 0.36, 1);
}

.page-service-web-design .reveal-process.is-visible .process-step__content,
.page-service-web-design .reveal-process.is-visible .process-step__number {
  opacity: 1;
  transform: translateY(0);
}

.page-service-web-design .process-step:nth-child(1) .process-step__content,
.page-service-web-design .process-step:nth-child(1) .process-step__number,
.page-service-web-design .process-step:nth-child(1) .process-step__rail::after,
.page-service-web-design .process-step:nth-child(1) .process-step__dot {
  transition-delay: 0ms;
}

.page-service-web-design .process-step:nth-child(2) .process-step__content,
.page-service-web-design .process-step:nth-child(2) .process-step__number,
.page-service-web-design .process-step:nth-child(2) .process-step__rail::after,
.page-service-web-design .process-step:nth-child(2) .process-step__dot {
  transition-delay: 150ms;
  animation-delay: 150ms;
}

.page-service-web-design .process-step:nth-child(3) .process-step__content,
.page-service-web-design .process-step:nth-child(3) .process-step__number,
.page-service-web-design .process-step:nth-child(3) .process-step__rail::after,
.page-service-web-design .process-step:nth-child(3) .process-step__dot {
  transition-delay: 300ms;
  animation-delay: 300ms;
}

.page-service-web-design .process-step:nth-child(4) .process-step__content,
.page-service-web-design .process-step:nth-child(4) .process-step__number,
.page-service-web-design .process-step:nth-child(4) .process-step__rail::after,
.page-service-web-design .process-step:nth-child(4) .process-step__dot {
  transition-delay: 450ms;
  animation-delay: 450ms;
}

@media (prefers-reduced-motion: reduce) {
  .page-service-web-design .process-step__rail::after {
    transition: none;
    transform: translateX(-50%) scaleY(1);
  }

  .page-service-web-design .process-step__content,
  .page-service-web-design .process-step__number {
    opacity: 1 !important;
    transform: none !important;
  }

  .page-service-web-design .reveal-process.is-visible .process-step__dot {
    animation: none;
  }
}

/* ============================================================
   7. "Tehnologije i alati"
   ============================================================ */
.page-service-web-design .tools-grid {
  gap: var(--space-4);
}

.page-service-web-design .tool-pill {
  position: relative;
  padding: var(--space-3) var(--space-6) var(--space-3) var(--space-5);
  font-size: var(--fs-body);
  border-color: var(--color-border);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--transition-base),
    color var(--transition-base),
    transform var(--transition-base);
}

.page-service-web-design .tool-pill::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: var(--space-3);
  border-radius: var(--radius-full);
  background-color: var(--color-accent-500);
  vertical-align: middle;
}

.page-service-web-design .tool-pill:hover {
  border-color: var(--color-accent-500);
  color: var(--color-accent-700);
  transform: translateY(-2px);
}

/* ============================================================
   8. "Povezani projekti"
   ============================================================ */
.page-service-web-design .service-section .portfolio-grid {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-6);
}

.page-service-web-design .service-section .portfolio-card {
  border-radius: var(--radius-xl);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

.page-service-web-design .service-section .portfolio-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.page-service-web-design .service-section .portfolio-card__image {
  height: 220px;
  transition: transform 500ms ease;
}

.page-service-web-design .service-section .portfolio-card:hover .portfolio-card__image {
  transform: scale(1.04);
}

.page-service-web-design .service-section .portfolio-card__body {
  position: relative;
  padding-bottom: var(--space-8);
}

/* Diskretan "Pogledaj projekt" hint bez diranja project-card.php markupa —
   generiran preko :lang() da ostane dvojezičan. */
.page-service-web-design .service-section .portfolio-card__body::after {
  position: absolute;
  left: var(--space-6);
  bottom: var(--space-5);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--color-accent-600);
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity var(--transition-base),
    transform var(--transition-base);
}

.page-service-web-design .service-section .portfolio-card:hover .portfolio-card__body::after {
  opacity: 1;
  transform: translateX(0);
}

:lang(hr) .page-service-web-design .service-section .portfolio-card__body::after {
  content: "Pogledaj projekt →";
}

:lang(en) .page-service-web-design .service-section .portfolio-card__body::after {
  content: "View project →";
}

/* Ako ima samo dva povezana projekta, grid ih prirodno drži u jednom redu
   na desktopu (auto-fill minmax 320px već to radi za 2 kartice na širem
   containeru) — bez dodatnog pravila. */

/* ============================================================
   9. FAQ
   ============================================================ */
.page-service-web-design .faq-accordion {
  max-width: 780px;
}

.page-service-web-design .faq-accordion__item {
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.page-service-web-design .faq-accordion__item[open] {
  border-color: var(--color-border-accent);
  box-shadow: var(--shadow-sm);
}

.page-service-web-design .faq-accordion__question {
  padding: var(--space-5) var(--space-6);
  transition: color var(--transition-base);
}

.page-service-web-design .faq-accordion__item[open] .faq-accordion__question {
  color: var(--color-accent-700);
}

.page-service-web-design .faq-accordion__icon::before,
.page-service-web-design .faq-accordion__icon::after {
  transition: transform var(--transition-base);
}

.page-service-web-design .faq-accordion__answer {
  height: 0;
  margin-top: 0;
  padding: 0 var(--space-6);
  overflow: hidden;
  transition: height 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.page-service-web-design .faq-accordion__item[open] .faq-accordion__answer {
  padding-bottom: var(--space-5);
}

@media (prefers-reduced-motion: reduce) {
  .page-service-web-design .faq-accordion__answer {
    transition: none;
  }
}

/* ============================================================
   10. "Povezane usluge"
   ============================================================ */
.page-service-web-design .service-section .services-page__grid .service-card {
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.page-service-web-design .service-section .services-page__grid .service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--color-border-accent);
}

.page-service-web-design .service-section .services-page__grid .service-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  padding: var(--space-3);
  background-color: var(--color-accent-soft);
  border-radius: var(--radius-lg);
  transition: transform var(--transition-base);
}

.page-service-web-design .service-section .services-page__grid .service-card:hover .service-card__icon {
  transform: rotate(-6deg) scale(1.05);
}

.page-service-web-design .service-section .services-page__grid .service-card__link span {
  transition: transform var(--transition-base);
}

.page-service-web-design .service-section .services-page__grid .service-card:hover .service-card__link span {
  transform: translateX(4px);
}

/* ============================================================
   11. Završni CTA — premium varijanta
   ============================================================ */
.cta-banner--premium {
  padding-block: var(--space-10) var(--space-10);
}

.cta-banner--premium .cta-banner__inner {
  max-width: 680px;
}

.cta-banner--premium .cta-banner__title {
  font-size: var(--fs-h2);
}

.cta-banner--premium .cta-banner__glow {
  animation: ctaPremiumGlow 10s ease-in-out infinite;
}

@keyframes ctaPremiumGlow {
  0%,
  100% {
    opacity: 0.35;
    transform: translate(0, 0);
  }
  50% {
    opacity: 0.5;
    transform: translate(-18px, 12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta-banner--premium .cta-banner__glow {
    animation: none;
  }
}

/* ============================================================
   Responsive dorade
   ============================================================ */
@media (max-width: 767px) {
  .page-service-web-design .service-detail__intro {
    padding-block: var(--space-4);
  }

  .page-service-web-design .service-detail__intro::before {
    width: 180px;
    height: 180px;
    top: -20px;
    right: -40px;
  }

  .page-service-web-design .service-section {
    margin-top: var(--space-6);
  }

  .page-service-web-design .service-section--alt {
    padding-block: var(--space-5);
  }

  .page-service-web-design .process-step__number {
    font-size: 2.25rem;
  }
}