/* About Us (/about/, page-about.php) – redizajn u stilu strana lokacija i servisa, 2026-10-26.
   Sve je pod main.md-about. Ucitava se posle visual-fixes.css (functions.php, $md_page_css). */

main.md-about { --lx-sun: #FFF8DB; --ab-tint: #FFF4C2; --ab-shadow: 0 6px 24px rgba(29, 29, 29, .08); }
main.md-about > section { padding: 80px 0; clear: both; }
main.md-about .ab-head { max-width: 760px; }
main.md-about .ab-sub, main.md-about .ab-sub p { font-size: 17px; color: var(--bp-text); }
main.md-about .ab-prose { display: flex; flex-direction: column; gap: 14px; }
main.md-about .ab-prose p, main.md-about .ab-lead p, main.md-about .ab-sub p { margin: 0; }
/* linkovi u tekstu: zuti, kao na ostalim novim stranama (visual-fixes.css); na zutoj traci tamni */
main.md-about span { font-size: inherit !important; } /* inner.css: span { font-size: 15px !important } */

/* fotografije */
main.md-about .ab-photo { margin: 0; display: flex; flex-direction: column; gap: 10px; }
main.md-about .ab-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; box-shadow: var(--ab-shadow); }
main.md-about .ab-photo figcaption { font-size: 14px; line-height: 1.5; color: var(--bp-muted); padding: 0 4px; }

/* dugmad */
main.md-about .bp-btn { border-radius: 8px; gap: 8px; }
main.md-about .ab-btn-outline { background: #fff; color: var(--bp-ink); border: 2px solid var(--bp-ink); }
main.md-about .ab-btn-outline:hover { background: var(--bp-ink); color: #fff; }
main.md-about .ab-btn-lg { padding: 0 34px; font-size: 16px; } /* 29.10: glavna velicina 48 px / 16 px (bilo 56 px / 17 px) */

/* kartice: bela, zuta gornja ivica 4 px, radijus 14 px, blaga senka */
main.md-about .ab-card { background: #fff; border: 0; border-top: 4px solid var(--bp-yellow); border-radius: 14px; box-shadow: var(--ab-shadow); }

/* mreza sa 6 kolona: 3 = 3, 4 = 2+2, 5 = 3+2, bez praznih mesta; kartice iste visine */
main.md-about .ab-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
main.md-about .ab-grid > * { grid-column: span 2; }
main.md-about .ab-grid--2 > *, main.md-about .ab-grid--4 > * { grid-column: span 3; }
main.md-about .ab-grid--5 > :nth-child(n+4) { grid-column: span 3; }
main.md-about .ab-grid--1 > * { grid-column: 1 / -1; }

/* 1. uvod */
main.md-about section.ab-intro { background: #fff; }
main.md-about .ab-intro-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
main.md-about .ab-intro-text { gap: 22px; }
main.md-about .ab-lead p { font-size: 19px; line-height: 1.65; color: var(--bp-ink); }
main.md-about .ab-facts { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; }
main.md-about .ab-facts li { background: var(--lx-sun); border-left: 4px solid var(--bp-yellow); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
main.md-about .ab-facts strong { font-size: 30px; font-weight: 900; line-height: 1.1; color: var(--bp-ink); }
main.md-about .ab-facts span { font-size: 14px !important; line-height: 1.35; color: var(--bp-text); }
main.md-about .ab-intro-photo img { aspect-ratio: 4 / 3.1; object-position: center 70%; }

/* 2. kancelarije */
main.md-about section.ab-offices { background: var(--lx-sun); }
main.md-about .ab-office { padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 12px; }
main.md-about .ab-office-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 26px; }
main.md-about .ab-hq { background: var(--bp-yellow); color: var(--bp-ink); font-size: 12px !important; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; border-radius: 999px; padding: 4px 10px; }
main.md-about .ab-office h3 { font-size: 22px; }
main.md-about .ab-office h3 a { color: var(--bp-ink); text-decoration: none; }
main.md-about .ab-office h3 a:hover { text-decoration: underline; text-decoration-color: var(--bp-yellow); text-decoration-thickness: 3px; text-underline-offset: 4px; }
main.md-about .ab-addr { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
main.md-about .ab-addr svg { flex: none; margin-top: 2px; color: var(--bp-gold); }
main.md-about .ab-office-acts { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
main.md-about .ab-call { width: 100%; }
main.md-about .ab-call svg { width: 16px; height: 16px; }
main.md-about .ab-office-links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0 14px; }
main.md-about .ab-office-links a { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; font-size: 15px; font-weight: 800; color: var(--bp-ink); text-decoration: underline; text-decoration-color: var(--bp-yellow); text-decoration-thickness: 2px; text-underline-offset: 4px; }
main.md-about .ab-office-links a:hover { color: #000; text-decoration-color: var(--bp-ink); }

/* 3. zasto Spyder */
main.md-about section.ab-why { background: #fff; }
main.md-about .ab-why-card { padding: 26px; display: flex; flex-direction: column; gap: 12px; }
main.md-about .ab-ico { width: 56px; height: 56px; border-radius: 50%; background: var(--bp-yellow); color: var(--bp-ink); display: flex; align-items: center; justify-content: center; flex: none; }
main.md-about .ab-why-card h3 { font-size: 20px; }
main.md-about .ab-why-card p { font-size: 16px; }

/* 4. porodica + osnivac */
main.md-about section.ab-story { background: var(--lx-sun); }
main.md-about .ab-story-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
main.md-about .ab-story-row > :only-child { grid-column: 1 / -1; }
main.md-about .ab-story-text { gap: 16px; }
main.md-about .ab-story-text .ab-prose p { font-size: 17px; }
main.md-about .ab-founder { padding: 30px; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 26px; align-items: start; }
main.md-about .ab-founder-photo img { width: 150px; height: 150px; object-fit: cover; border-radius: 50%; border: 5px solid var(--bp-yellow); }
main.md-about section .ab-founder h2.ab-founder-h { font-size: 13px !important; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--bp-gold); line-height: 1.4 !important; }
main.md-about .ab-founder p.ab-founder-name { font-size: 28px; font-weight: 900; line-height: 1.15; color: var(--bp-ink); }
main.md-about .ab-founder p.ab-founder-name a { color: var(--bp-ink) !important; text-decoration: none; }
main.md-about .ab-founder-name a:hover { text-decoration: underline; text-decoration-color: var(--bp-yellow); text-decoration-thickness: 3px; }
main.md-about .ab-founder-pos { font-weight: 800; color: var(--bp-gold); margin-top: -4px !important; }
main.md-about .ab-founder-body p { font-size: 16px; }
main.md-about .ab-founder .bp-btns { margin-top: 6px; }

/* 5. Move for Hunger: zuta traka */
main.md-about section.ab-hunger { background: var(--bp-yellow); color: var(--bp-ink); }
main.md-about .ab-hunger .bp-label { color: var(--bp-ink); }
main.md-about .ab-hunger-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: center; }
main.md-about .ab-hunger-text { gap: 16px; }
main.md-about .ab-hunger .ab-prose p { font-size: 17px; color: var(--bp-ink); }
main.md-about section.ab-hunger .ab-prose p a:not([class]) { color: var(--bp-ink) !important; font-weight: 800; text-decoration: underline !important; text-decoration-color: var(--bp-ink) !important; text-decoration-thickness: 2px; text-underline-offset: 3px; }
main.md-about section.ab-hunger .ab-prose p a:not([class]):hover { background: #fff; }
main.md-about .ab-stats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
main.md-about .ab-stats li { background: #fff; border-radius: 14px; padding: 18px 22px; box-shadow: 0 8px 22px rgba(29, 29, 29, .12); display: flex; flex-direction: column; gap: 2px; }
main.md-about .ab-stats strong { font-size: 32px; font-weight: 900; line-height: 1.1; color: var(--bp-ink); }
main.md-about .ab-stats span { font-size: 15px !important; color: var(--bp-text); }

/* 6. usluge: mreza dugmadi */
main.md-about section.ab-services { background: #fff; }
main.md-about .ab-svc-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: center; }
main.md-about .ab-svc-intro { gap: 14px; }
main.md-about .ab-svc-intro .ab-prose p { font-size: 17px; }
main.md-about .ab-svc-photo img { aspect-ratio: 3 / 2; }
main.md-about .ab-svc-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
main.md-about .ab-svc-grid li { margin: 0; display: flex; }
main.md-about a.ab-svc { flex: 1; display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 12px 14px; background: #fff; border-radius: 12px; border-bottom: 3px solid var(--bp-yellow); box-shadow: 0 4px 16px rgba(29, 29, 29, .07); color: var(--bp-ink); text-decoration: none; font-weight: 800; font-size: 16px; line-height: 1.25; transition: background .15s; }
main.md-about a.ab-svc:hover { background: var(--ab-tint); color: var(--bp-ink); }
main.md-about .ab-svc-ico { width: 44px; height: 44px; flex: none; border-radius: 10px; background: var(--ab-tint); display: flex; align-items: center; justify-content: center; }
main.md-about .ab-svc-ico img { width: 26px; height: 26px; object-fit: contain; filter: brightness(0); }
main.md-about .ab-svc-t { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 16px !important; }
main.md-about .ab-svc-t small { font-size: 13px; font-weight: 600; color: var(--bp-muted); line-height: 1.3; }
main.md-about .ab-arr { flex: none; width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: var(--bp-yellow); color: var(--bp-ink); box-sizing: border-box; }
main.md-about a.ab-svc:hover .ab-arr { background: var(--bp-ink); color: #fff; }

/* 7. gde radimo */
main.md-about section.ab-operate { background: var(--lx-sun); }
main.md-about .ab-state { overflow: hidden; display: flex; flex-direction: column; }
main.md-about .ab-state-photo img { width: 100%; height: 200px; object-fit: cover; border-radius: 0; }
main.md-about .ab-state-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
main.md-about .ab-state h3 { font-size: 22px; }
main.md-about .ab-state p { font-size: 16px; }
main.md-about .ab-state .bp-btn { margin-top: auto; align-self: flex-start; }

/* 8. FAQ (komponente .bp-faq iz branch-page.css / visual-fixes.css) */
main.md-about section.ab-faq { background: #fff; }
main.md-about .ab-faq-photo { margin-top: 10px; }
main.md-about .ab-faq-photo img { aspect-ratio: 16 / 9; }

/* 9. zavrsni CTA (zuti, visual-fixes.css) */
main.md-about .ab-final-photo { flex: 1 1 360px; min-width: 0; max-width: 460px; }
main.md-about .ab-final-photo img { aspect-ratio: 3 / 2; box-shadow: 0 14px 34px rgba(29, 29, 29, .18); }

/* genericki deo teksta (rezerva) */
main.md-about section.ab-generic { background: #fff; }
main.md-about .ab-generic .ab-prose { max-width: 820px; }

/* tablet */
@media (max-width: 1100px) {
	main.md-about .ab-svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	main.md-about .ab-founder { grid-template-columns: 1fr; }
	main.md-about .ab-founder-photo img { width: 150px; height: 150px; }
}
@media (max-width: 991px) {
	main.md-about .ab-intro-row, main.md-about .ab-story-row, main.md-about .ab-hunger-row, main.md-about .ab-svc-head { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	main.md-about .ab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	main.md-about .ab-grid > *, main.md-about .ab-grid--2 > *, main.md-about .ab-grid--4 > *, main.md-about .ab-grid--5 > :nth-child(n+4) { grid-column: span 1; }
	main.md-about .ab-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
	main.md-about .ab-founder { grid-template-columns: 150px minmax(0, 1fr); }
	main.md-about .ab-stats { flex-direction: row; }
	main.md-about .ab-stats li { flex: 1 1 0; }
	main.md-about .ab-final-photo { max-width: none; }
}
/* telefon */
@media (max-width: 767px) {
	main.md-about > section { padding: 48px 0; }
	main.md-about .ab-lead p { font-size: 17px; }
	main.md-about .ab-facts { gap: 8px; }
	main.md-about .ab-facts li { padding: 12px 10px; }
	main.md-about .ab-facts strong { font-size: 24px; }
	main.md-about .ab-facts span { font-size: 13px !important; }
	main.md-about .ab-intro .bp-btns .bp-btn { flex: 1 1 100%; }
	main.md-about .ab-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	main.md-about .ab-grid > *, main.md-about .ab-grid > :last-child:nth-child(odd) { grid-column: auto; }
	main.md-about .ab-founder { grid-template-columns: minmax(0, 1fr); padding: 24px; gap: 18px; }
	main.md-about .ab-founder-photo img { width: 120px; height: 120px; }
	main.md-about .ab-founder .bp-btns .bp-btn { flex: 1 1 auto; }
	main.md-about .ab-stats { flex-direction: column; gap: 10px; }
	main.md-about .ab-stats li { padding: 14px 18px; }
	main.md-about .ab-stats strong { font-size: 26px; }
	main.md-about .ab-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	main.md-about a.ab-svc { min-height: 64px; gap: 8px; padding: 10px 10px 10px 12px; font-size: 14px; }
	main.md-about .ab-svc-t { font-size: 14px !important; }
	main.md-about .ab-svc-t small { font-size: 12px; }
	main.md-about .ab-svc-ico { display: none; }
	main.md-about .ab-arr { width: 26px; height: 26px; padding: 6px; }
	main.md-about .ab-faq-photo { display: none; }
	main.md-about .ab-final .bp-final-main { flex: 0 0 auto; } /* kolona na telefonu: osnova 560px iz branch-page.css bi postala visina */
	main.md-about .ab-state-photo img { height: 180px; }
	main.md-about .ab-btn-lg { width: 100%; }
	main.md-about .ab-final-photo { display: none; }
}