/* MR1-005 services (uslugi.html) + about (za-nas.html): page-specific layout only. Components and effects live in main.css. */

/* ---------- Services: three large cards ---------- */
.service-card{display:flex;flex-direction:column;padding:32px}
.service-card .card__icon{width:56px;height:56px;border-radius:14px}
.service-card .card__text{max-width:none;margin-bottom:16px}
.link-more{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-block:12px 4px;font-weight:600;color:var(--c-blue-600);text-decoration:none}
.link-more:hover{color:var(--c-blue-700);text-decoration:underline}
.link-more .icon{transition:transform var(--dur-1) var(--ease-out)}
.link-more:hover .icon{transform:translateX(4px)}
/* Responsive grid: 1 col mobile, 2 col tablet, 3 col desktop */
.services{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:480px){.services{grid-template-columns:repeat(2,1fr);gap:24px}}
@media (min-width:768px){.services{grid-template-columns:repeat(3,1fr);gap:24px}.service-card{padding:36px 32px}}
@media (min-width:1024px){.services{gap:28px}.service-card{padding:40px 36px}}

/* ---------- Compliance note: one wide card ---------- */
.about-note{display:flex;align-items:flex-start;gap:20px;padding:28px}
.about-note .card__icon{flex:none;margin:0}
.about-note__text{margin:0;max-width:none;font-size:1.125rem;line-height:1.6;color:var(--c-navy-900)}
@media (min-width:768px){.about-note{align-items:center;gap:28px;padding:40px 44px}.about-note__text{font-size:1.25rem}}
@media (max-width:479.98px){.about-note{flex-direction:column;gap:16px}}

/* ---------- About: story + photo ---------- */
.about-story .grid-2{align-items:center}
.about-story .prose{display:grid;gap:20px;max-width:60ch}
.about-story .prose p{margin:0;text-align:left;font-weight:400;font-style:normal}
.about-story__media{display:flex;justify-content:center}
.about-story__frame{width:100%;max-width:400px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 30px 80px -24px rgb(21 89 199/.4),var(--shadow-card);background:var(--c-gray-50)}
.about-story__frame picture,.about-story__frame img{display:block;width:100%;height:auto}
.about-story__frame img{aspect-ratio:960/1706;object-fit:cover}

/* ---------- About: vertical timeline ---------- */
.timeline-wrap{max-width:760px}
.timeline{--dot:18px;--line-x:calc(var(--dot) / 2 - 1px);position:relative;list-style:none;margin:0;padding:0}
/* gray base line + blue-600 overlay line (drawn downward on scroll) */
.timeline::before,.timeline::after{content:"";position:absolute;left:var(--line-x);top:12px;bottom:12px;width:2px;border-radius:2px}
.timeline::before{background:var(--c-gray-200)}
.timeline::after{background:var(--c-blue-600);transform-origin:top center}
.timeline__item{position:relative;display:grid;gap:4px;padding:0 0 40px 44px}
.timeline__item:last-child{padding-bottom:0}
/* base dot (hollow ring) + lit dot (blue with glow) fading in over it */
.timeline__item::before,.timeline__item::after{content:"";position:absolute;left:0;top:6px;width:var(--dot);height:var(--dot);border-radius:50%}
.timeline__item::before{background:#fff;border:2px solid var(--c-gray-200)}
.timeline__item::after{background:var(--c-blue-600);box-shadow:0 0 0 4px rgb(59 130 246/.2),0 0 18px 2px rgb(59 130 246/.55)}
.timeline__year{font:800 clamp(1.75rem,1.4rem + 1.4vw,2.5rem)/1.1 var(--f-head);color:var(--c-blue-600);font-variant-numeric:tabular-nums}
.timeline__text{margin:0;max-width:52ch;font-size:1.0625rem;line-height:1.55;color:var(--c-navy-900)}
@media (min-width:768px){
  .timeline__item{grid-template-columns:132px 1fr;align-items:baseline;gap:24px;padding-left:56px;padding-bottom:48px}
  .timeline__item::before,.timeline__item::after{top:12px}
}
/* Scroll-driven line + dots: CSS only (no ScrollTrigger scrub). Without support the full line and lit dots simply show. */
@supports (animation-timeline:view()){
  .timeline::after{transform:scaleY(0);animation:tl-draw linear both;animation-timeline:view();animation-range:cover 33% cover 66%}
  .timeline__item::after{opacity:0;transform:scale(.4);animation:tl-dot linear both;animation-timeline:view();animation-range:cover 38% cover 48%}
}
@keyframes tl-draw{to{transform:scaleY(1)}}
@keyframes tl-dot{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .timeline::after{transform:none}
  .timeline__item::after{opacity:1;transform:none}
}

/* ---------- About: certificates ---------- */
.cert-card .card__title{margin-bottom:4px}
.cert-card__sub{margin:0 0 10px;font-weight:600;color:var(--c-blue-700)}
.cert-card .card__text{margin:0}
@media (min-width:1024px){#sertifikati .cards{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- About: company details ---------- */
.company{padding:28px}
.company .card__icon{margin-bottom:16px}
.company__title{font-size:1.5rem;margin-bottom:20px}
.company__list dl{display:grid;margin:0}
.company__list dl>div{display:grid;gap:2px;padding:14px 0;border-top:1px solid var(--c-gray-200)}
.company__list dt{font:600 .8125rem/1.3 var(--f-body);text-transform:uppercase;letter-spacing:.08em;color:var(--c-slate-500)}
.company__list dd{margin:0;color:var(--c-navy-900);font-weight:500}
.company__list a{display:inline-block;padding-block:4px;font-weight:600;color:var(--c-blue-600);text-decoration:none}
.company__list a:hover{color:var(--c-blue-700);text-decoration:underline}
@media (min-width:768px){
  .company{padding:40px 44px}
  .company__list dl>div{grid-template-columns:140px 1fr;align-items:baseline;gap:24px}
}

/* ---------- CTA band: keep the button label on one line next to a long heading ---------- */
@media (min-width:768px){.cta-band .btn{flex:none;white-space:nowrap}}