/*!
 * Global Hosting: about.php page styles (also loaded by contact.php for the shared bits:
 * copy buttons, hero float cards). Builds on gh-core.css + site.css tokens.
 * All selectors are gh-ab-* or scoped to .gh-page-about.
 */

/* ==========================================================================
   Hero + illustration
   ========================================================================== */
.gh-ab-hero { padding-bottom: clamp(64px, 7vw, 96px); }
.gh-ab-hero .gh-page-hero__inner { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
.gh-ab-hero .gh-page-hero__bullets { gap: 12px 24px; }
@media (max-width: 1080px) {
  .gh-ab-hero .gh-page-hero__inner { grid-template-columns: 1fr; }
  .gh-ab-hero .gh-page-hero__aside { display: none; }
}
@media (max-width: 640px) {
  .gh-ab-hero .gh-page-hero__bullets { flex-direction: column; gap: 12px; }
}

.gh-ab-art { position: relative; width: 100%; max-width: 540px; margin-left: auto; aspect-ratio: 560 / 520; }
.gh-ab-art__bg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gh-ab-float { z-index: 2; }
.gh-ab-float--hq { top: 10%; left: -2%; }
.gh-ab-float--hq .gh-float__icon { background: var(--gh-red-50); color: var(--gh-red); }
.gh-ab-float--dc { top: 40%; right: -4%; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px; }
.gh-ab-float__label { color: var(--gh-muted); font-weight: 600; }
.gh-ab-float__status { display: inline-flex; align-items: center; gap: 8px; color: var(--gh-ink); font-size: 1.0625rem; font-weight: 800; letter-spacing: -.02em; }
.gh-ab-float__dot { width: 9px; height: 9px; border-radius: 50%; background: #22C58B; box-shadow: 0 0 0 4px rgba(34, 197, 139, .18); }
.gh-ab-float__meta { color: var(--gh-muted); font-size: .75rem; font-weight: 600; }
.gh-ab-float--sla {
  bottom: 6%; left: 2%;
  background: rgba(21, 28, 64, .92); color: var(--gh-on-dark-muted);
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.gh-ab-float--sla strong { color: #fff; }
.gh-ab-float--sla .gh-float__icon { background: rgba(74, 222, 155, .14); color: var(--gh-success-on-dark); }

@media (prefers-reduced-motion: no-preference) {
  .gh-ab-flow { animation: gh-dash 2.4s linear infinite; }
  .gh-ab-led { animation: gh-blink 2.8s ease-in-out infinite; }
  .gh-ab-led--2 { animation-delay: -.9s; }
  .gh-ab-led--3 { animation-delay: -1.8s; }
  .gh-ab-pin { animation: gh-ab-bob 5s ease-in-out infinite; transform-box: fill-box; }
  .gh-ab-float--dc { animation-delay: -2.5s; }
  .gh-ab-float--sla { animation-delay: -4.5s; }
}
@keyframes gh-ab-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ==========================================================================
   Shared typography for split sections
   ========================================================================== */
.gh-ab-h2 { margin: 0; color: var(--gh-ink); font-size: var(--gh-fs-2xl); font-weight: 800; line-height: 1.12; letter-spacing: -.028em; text-wrap: balance; }
.gh-ab-lead { margin: 20px 0 0; color: var(--gh-text); font-size: var(--gh-fs-md); line-height: 1.75; text-wrap: pretty; }
.gh-ab-p { margin: 14px 0 0; color: var(--gh-muted); font-size: var(--gh-fs-md); line-height: 1.75; text-wrap: pretty; }

/* ==========================================================================
   Ko smo mi + "Ukratko" card
   ========================================================================== */
.gh-ab-intro__grid { align-items: start; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
@media (max-width: 960px) { .gh-ab-intro__grid { grid-template-columns: 1fr; } }

.gh-ab-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 32px 0 0; padding: 0; list-style: none; }
.gh-ab-values li { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid var(--gh-line); border-radius: 16px; background: var(--gh-bg-alt); color: var(--gh-muted); font-size: var(--gh-fs-sm); line-height: 1.4; }
.gh-ab-values strong { display: block; margin-bottom: 2px; color: var(--gh-ink); font-weight: 800; }
.gh-ab-values__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: #fff; color: var(--gh-red); box-shadow: var(--gh-shadow-xs); }
@media (max-width: 1100px) and (min-width: 961px) { .gh-ab-values { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .gh-ab-values { grid-template-columns: 1fr; gap: 10px; } }

.gh-ab-facts {
  position: relative; padding: 30px 30px 26px; background: #fff; border: 1px solid var(--gh-line); border-radius: var(--gh-radius-xl);
  box-shadow: 0 2px 6px rgba(14, 19, 48, .04), 0 40px 80px -36px rgba(14, 19, 48, .35);
}
.gh-ab-facts::before {
  content: ""; position: absolute; left: 30px; right: 30px; top: -1px; height: 3px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--gh-red), #E0474B 60%, var(--gh-indigo));
}
.gh-ab-facts__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--gh-line); }
.gh-ab-facts__logo { display: block; width: auto; height: 34px; }
.gh-ab-facts__title { margin: 0; padding: 6px 12px; border-radius: 999px; background: var(--gh-bg-soft); color: var(--gh-ink); font-size: var(--gh-fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.gh-ab-facts__list { margin: 0; }
.gh-ab-facts__row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 4px 16px; padding: 16px 0; border-bottom: 1px dashed var(--gh-line); }
.gh-ab-facts__row dt { display: flex; align-items: center; gap: 10px; align-self: start; color: var(--gh-muted); font-size: var(--gh-fs-sm); font-weight: 700; line-height: 1.5; }
.gh-ab-facts__row dt .gh-icon { color: var(--gh-red); }
.gh-ab-facts__row dd { margin: 0; color: var(--gh-ink); font-size: .9375rem; font-weight: 700; line-height: 1.6; }
.gh-ab-facts__row dd a { color: var(--gh-ink); text-decoration: underline; text-decoration-color: var(--gh-line-strong); }
.gh-ab-facts__row dd a:hover { color: var(--gh-red); text-decoration-color: currentColor; }
.gh-ab-facts__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--gh-red); font-size: var(--gh-fs-sm); font-weight: 800; text-decoration: none; }
.gh-ab-facts__more:hover { color: var(--gh-red-600); }
.gh-ab-facts__more:hover .gh-icon { transform: translateX(3px); }
.gh-ab-facts__more .gh-icon { transition: transform var(--gh-dur); }
.gh-ab-facts__more:focus-visible { outline: 3px solid var(--gh-focus); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 640px) {
  .gh-ab-facts { padding: 24px 20px 20px; border-radius: 20px; }
  .gh-ab-facts::before { left: 20px; right: 20px; }
  .gh-ab-facts__logo { height: 28px; }
  .gh-ab-facts__row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Datacentar (dark band)
   ========================================================================== */
.gh-ab-dc { overflow: hidden; }
.gh-ab-dc__stats { margin-bottom: 40px; }
.gh-ab-dc__cta {
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 22px; padding: 28px;
  border-radius: var(--gh-radius-lg); color: #FCE9E9;
  background: radial-gradient(80% 90% at 100% 0%, rgba(255, 255, 255, .14), transparent 60%), linear-gradient(140deg, #B33134 0%, #9A282B 60%, #7E1F21 100%);
  box-shadow: 0 30px 60px -30px rgba(187, 52, 55, .6);
}
.gh-ab-dc__cta-icon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; margin-bottom: 20px; border-radius: 14px; background: rgba(255, 255, 255, .14); color: #fff; }
.gh-ab-dc__cta-title { margin: 0 0 8px; color: #fff; font-size: var(--gh-fs-lg); font-weight: 800; line-height: 1.3; letter-spacing: -.012em; }
.gh-ab-dc__cta-text { margin: 0; color: #FCE9E9; font-size: .9375rem; line-height: 1.6; }
.gh-ab-dc__cta .gh-btn { white-space: normal; }
.gh-ab-dc__note {
  display: flex; align-items: flex-start; gap: 10px; max-width: 880px; margin: 36px auto 0; padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; background: rgba(255, 255, 255, .03);
  color: var(--gh-on-dark-muted); font-size: var(--gh-fs-sm); line-height: 1.55;
}
.gh-ab-dc__note .gh-icon { flex: none; margin-top: 1px; color: var(--gh-on-dark-subtle); }
.gh-ab-dc__note a { color: #fff; font-weight: 700; }
.gh-ab-dc__note a:hover { color: var(--gh-red-soft); }
.gh-ab-dc__note a:focus-visible { outline: 3px solid var(--gh-focus); outline-offset: 2px; border-radius: 3px; }
.gh-ab-dc .gh-stats__value { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); }

/* ==========================================================================
   Tehnologije
   ========================================================================== */
.gh-ab-tech__item {
  display: flex; align-items: flex-start; gap: 18px; padding: 24px; background: #fff; border: 1px solid var(--gh-line); border-radius: var(--gh-radius-lg);
  box-shadow: var(--gh-shadow-sm); transition: border-color .25s var(--gh-ease), box-shadow .25s var(--gh-ease);
}
.gh-ab-tech__item:hover { border-color: var(--gh-line-strong); box-shadow: var(--gh-shadow); }
.gh-ab-tech__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 52px; height: 52px; border-radius: 15px; background: var(--gh-ink); color: #fff; }
.gh-ab-tech__item:hover .gh-ab-tech__icon { background: var(--gh-red); }
.gh-ab-tech__name { margin: 2px 0 6px; color: var(--gh-ink); font-size: var(--gh-fs-md); font-weight: 800; line-height: 1.3; letter-spacing: -.012em; }
.gh-ab-tech__text { margin: 0; color: var(--gh-muted); font-size: .9375rem; line-height: 1.6; }
@media (max-width: 640px) { .gh-ab-tech__item { padding: 20px; gap: 14px; } .gh-ab-tech__icon { width: 46px; height: 46px; } }
@media (prefers-reduced-motion: reduce) { .gh-ab-tech__item { transition: none; } }

/* ==========================================================================
   Službeni podaci (cards + copy buttons) — also used on contact.php
   ========================================================================== */
.gh-ab-data__card {
  display: flex; flex-direction: column; padding: 26px; background: #fff; border: 1px solid var(--gh-line); border-radius: var(--gh-radius-lg); box-shadow: var(--gh-shadow-sm);
}
.gh-ab-data__head { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; margin-bottom: 4px; border-bottom: 1px solid var(--gh-line); }
.gh-ab-data__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 46px; height: 46px; border-radius: 13px; background: var(--gh-red-50); color: var(--gh-red); }
.gh-ab-data__title { margin: 0; color: var(--gh-ink); font-size: var(--gh-fs-lg); font-weight: 800; line-height: 1.25; letter-spacing: -.015em; }
.gh-ab-data__list { margin: 0; }
.gh-ab-data__row { padding: 14px 0; border-bottom: 1px dashed var(--gh-line); }
.gh-ab-data__row:last-child { border-bottom: 0; padding-bottom: 4px; }
.gh-ab-data__row dt { margin: 0 0 4px; color: var(--gh-muted); font-size: var(--gh-fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.gh-ab-data__row dd { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin: 0; color: var(--gh-ink); font-size: var(--gh-fs-md); font-weight: 700; line-height: 1.5; }
.gh-ab-data__addr { font-style: normal; }
.gh-ab-data__value { min-width: 0; overflow-wrap: anywhere; }
.gh-ab-data__value--mono { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.gh-ab-data__hint { display: flex; align-items: flex-start; gap: 8px; margin: auto 0 0; padding-top: 14px; color: var(--gh-muted); font-size: var(--gh-fs-xs); line-height: 1.5; }
.gh-ab-data__hint .gh-icon { flex: none; margin-top: 1px; color: var(--gh-subtle); }

.gh-ab-copy {
  display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 34px; padding: 6px 12px; margin: 0;
  border: 1px solid var(--gh-line-strong); border-radius: 10px; background: #fff; color: var(--gh-ink);
  font: 700 .8125rem/1 var(--gh-font); cursor: pointer; transition: border-color var(--gh-dur), background-color var(--gh-dur), color var(--gh-dur);
}
.gh-ab-copy:hover { border-color: var(--gh-ink); }
.gh-ab-copy:focus-visible { outline: 3px solid var(--gh-focus); outline-offset: 2px; }
.gh-ab-copy .gh-icon { color: var(--gh-muted); }
.gh-ab-copy__ok { display: none; }
.gh-ab-copy.is-copied { border-color: var(--gh-success); background: var(--gh-success-bg); color: var(--gh-success); }
.gh-ab-copy.is-copied .gh-icon--copy { display: none; }
.gh-ab-copy.is-copied .gh-ab-copy__ok { display: inline-block; color: var(--gh-success); }

/* Documents strip */
.gh-ab-docs {
  display: flex; align-items: center; gap: 20px 24px; flex-wrap: wrap; margin-top: 28px; padding: 22px 26px;
  border: 1px dashed var(--gh-line-strong); border-radius: 18px; background: #fff;
}
.gh-ab-docs__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 52px; height: 52px; border-radius: 15px; background: var(--gh-bg-soft); color: var(--gh-ink); }
.gh-ab-docs__body { flex: 1 1 420px; min-width: 0; }
.gh-ab-docs__title { margin: 0 0 8px; color: var(--gh-ink); font-size: var(--gh-fs-md); font-weight: 800; letter-spacing: -.01em; }
.gh-ab-docs__list { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; color: var(--gh-muted); font-size: var(--gh-fs-sm); font-weight: 600; }
.gh-ab-docs__list li { display: inline-flex; align-items: center; gap: 6px; }
.gh-ab-docs__list .gh-icon { color: var(--gh-success); }
.gh-ab-docs .gh-btn { flex: none; }
@media (max-width: 640px) {
  .gh-ab-docs { padding: 20px; }
  .gh-ab-docs .gh-btn { flex: 1 1 100%; white-space: normal; }
}

/* ==========================================================================
   Partner card (under social proof)
   ========================================================================== */
.gh-ab-partner {
  display: flex; align-items: center; gap: 18px 22px; flex-wrap: wrap; margin-top: 24px; padding: 22px 26px;
  border: 1px solid var(--gh-line); border-radius: 20px; background: linear-gradient(120deg, var(--gh-bg-alt), #fff 70%);
}
.gh-ab-partner__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 52px; height: 52px; border-radius: 15px; background: linear-gradient(135deg, var(--gh-indigo), #5B6BE8); color: #fff; }
.gh-ab-partner__body { flex: 1 1 380px; min-width: 0; }
.gh-ab-partner__title { margin: 0 0 4px; color: var(--gh-ink); font-size: var(--gh-fs-lg); font-weight: 800; letter-spacing: -.015em; }
.gh-ab-partner__text { margin: 0; color: var(--gh-muted); font-size: .9375rem; line-height: 1.6; }
@media (max-width: 640px) {
  .gh-ab-partner { padding: 20px; }
  .gh-ab-partner .gh-btn { flex: 1 1 100%; }
}

/* Data rows: keep value + copy button on one line; icon-only copy button where cards get narrow */
.gh-ab-data__row dd { flex-wrap: nowrap; }
.gh-ab-data__hint a { color: var(--gh-ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--gh-line-strong); text-underline-offset: 3px; }
.gh-ab-data__hint a:hover { color: var(--gh-red); text-decoration-color: currentColor; }
.gh-ab-data__hint a:focus-visible { outline: 3px solid var(--gh-focus); outline-offset: 2px; border-radius: 3px; }
@media (max-width: 1240px) {
  .gh-ab-copy { width: 36px; min-height: 36px; padding: 0; justify-content: center; }
  .gh-ab-copy__text { display: none; }
}

/* Phones: compact feature cards (icon beside the title) so the 11 "Zašto mi" + datacentar cards need less scrolling. */
@media (max-width: 640px) {
  .gh-page-about .gh-features .gh-feature { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; column-gap: 14px; padding: 20px; }
  .gh-page-about .gh-features .gh-feature__icon { width: 44px; height: 44px; margin: 0; border-radius: 12px; }
  .gh-page-about .gh-features .gh-feature__title { margin: 0; font-size: 1.125rem; }
  .gh-page-about .gh-features .gh-feature__text,
  .gh-page-about .gh-features .gh-feature__link { grid-column: 1 / -1; justify-self: start; }
  .gh-page-about .gh-features .gh-feature__text { margin-top: 12px; }
}