/* Sertifikati - reuses Home's tokens/hero/.about-grid/.testi-grid/.btn,
   O nama's .accred-grid and shared .cert-facts/.cert-steps/.cert-apply
   (see academia-shared.css) - wrapper carries "home-page" + "sertifikati-page",
   this file only adds what's unique to this page. */

.sertifikati-page .cert-about{padding-block:64px;}

/* KEY FACTS strip - same orange tint used for the inset cards further down
   the page (see .onama-accred below), overriding the shared gray default
   only on this page - Časovi/IELTS reuse .cert-facts too and stay gray. */
.sertifikati-page .cert-facts{background:#FBEADA; border-bottom:none;}

/* PRICE - real bank-transfer/QR data via academia_payment_button(), in a
   card matching the London price-card's visual weight (replaces what used
   to be a screenshot of the payment slip in this same grid slot). */
.sertifikati-page .cert-price{padding-block:64px;}
.sertifikati-page .cert-price-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;}
@media (max-width:860px){.sertifikati-page .cert-price-grid{grid-template-columns:1fr; gap:28px;}}
.sertifikati-page .cert-price p{color:var(--ink-soft); line-height:1.65; margin:0 0 14px;}
.sertifikati-page .cert-price-pay{
  background:var(--card-bg); border:1px solid var(--line); border-radius:18px;
  padding:36px 30px; box-shadow:var(--shadow); text-align:center;
}
.sertifikati-page .cert-price-pay h3{font-size:1.35rem; margin-top:6px;}
.sertifikati-page .cert-price-pay p{margin:10px 0 22px; text-align:left;}
.sertifikati-page .cert-price-pay .pay-info-btn{width:100%; justify-content:center;}

/* ACCRED photo - real signing-ceremony photo above the accred-grid */
.sertifikati-page .cert-accred-photo{position:relative; border-radius:18px; overflow:hidden; box-shadow:var(--shadow); margin-bottom:36px; max-height:600px;}
.sertifikati-page .cert-accred-photo img{width:100%; height:100%; object-fit:cover; display:block; max-height:600px;}
.sertifikati-page .cert-accred-caption{position:absolute; left:0; right:0; bottom:0; padding:14px 18px; background:linear-gradient(0deg, rgba(7,15,23,.85), transparent); color:#fff; font-size:0.966rem;}

/* AKREDITACIJE ("Naše iskustvo / Tvoja garancija kvaliteta") - same orange
   inset-card pattern as London's .faq-section/.crosssell-section: card sits
   40px from the real viewport edge on desktop, content stays pinned to its
   normal 1120px column via .accred-inner, and a 40px margin-bottom keeps it
   separated from the testimonials section below. Scoped to this page only -
   .onama-accred is shared with O nama/Časovi/IELTS, which keep the plain look. */
.sertifikati-page .onama-accred{padding-block:64px;}
.sertifikati-page .onama-accred .wrap{background:#FBEADA; border-radius:28px; padding:56px 40px;}
.sertifikati-page .accred-inner{max-width:1250px; margin-inline:auto;}
@media (min-width:701px){
  .sertifikati-page .onama-accred{margin-bottom:40px;}
  .sertifikati-page .onama-accred .wrap{
    max-width:none; width:calc(100vw - 80px);
    margin-left:calc(50% - 50vw + 40px); margin-right:calc(50% - 50vw + 40px);
    box-sizing:border-box;
  }
}
@media (max-width:700px){
  .sertifikati-page .onama-accred .wrap{padding:40px 22px; border-radius:20px;}
}

.sertifikati-page .cert-testi-cta{text-align:center; margin-top:36px;}

/* PRIJAVA - same orange tint as the other tinted sections on this page.
   .cert-apply is shared with Časovi (dark-navy CTA band there), so the
   recolor + text-contrast flip is scoped to this page only. */
.sertifikati-page .cert-apply{background:#FBEADA;}
.sertifikati-page .cert-apply .eyebrow{color:var(--teal-deep);}
.sertifikati-page .cert-apply h2{color:var(--ink);}