/* Rešenje — EPM powered by Oracle. Page-specific styles for the bespoke
   sections between the shared hero and CTA. */

/* "The problem" — standard .solution-intro header (stat headline + two
   context paragraphs), then the "bez EPM sistema vs. sa Oracle EPM" table,
   on a soft ground. */
.epm-context{background:var(--soft)}

/* Comparison table — ported from the -GO family's compare-cards block
   (resenje-go.css), which doesn't load on this page. hardcoded --red swapped
   for --page-accent, and the abstract brand mark replaced by the Oracle EPM
   wordmark in the "with" column. The row hover reveal and the right
   column's accent tint/border were removed from both versions 2026-09-16.
   Real table-cell layout throughout (columns side by side from >700px,
   stacked below that) — the "card" look comes from colouring the cells
   themselves, not from touching display/table-layout. The arrow is its own
   narrow middle column rather than an overlay, so it centres on the row for
   free and just display:none's away on mobile. See resenje-go.css's
   .compare-scenario-copy comment for the full rationale. */
.epm-compare{margin-top:var(--space-7)}
.epm-compare-wrap{max-width:1000px;margin:0 auto}
.epm-compare-table{width:100%;border-spacing:0;border-collapse:separate;table-layout:fixed}
.epm-compare-col-arrow{width:56px}

.epm-compare-title th{
  padding:var(--space-5) clamp(var(--space-4),2.2vw,var(--space-6)) var(--space-4);
  color:var(--blue);font-size:clamp(18px,1.8vw,23px);font-weight:780;line-height:1.25;
  letter-spacing:var(--tracking-title);text-wrap:balance;
}
.epm-compare-table tbody:not(:first-child) .epm-compare-title th{border-top:var(--space-7) solid transparent}

.epm-compare-copy td{padding:0;vertical-align:top;background:var(--soft-2)}
.epm-compare-current{color:var(--text-secondary);border-top-left-radius:var(--radius-md);border-bottom-left-radius:var(--radius-md)}
.epm-compare-outcome{color:var(--blue);border-top-right-radius:var(--radius-md);border-bottom-right-radius:var(--radius-md)}
.epm-compare-copy .epm-compare-arrow{vertical-align:middle;background:var(--soft-2) url("../../images/aigo-arrow-right-icon.webp") center/36px auto no-repeat}

.epm-compare-cell-label{
  display:flex;align-items:center;gap:8px;
  padding:9px clamp(var(--space-4),2.2vw,var(--space-6));
  border-bottom:1px solid var(--line);
  font-size:10px;font-weight:850;line-height:1.3;letter-spacing:.075em;text-transform:uppercase;
  color:var(--muted);
}
.epm-compare-outcome .epm-compare-cell-label{color:var(--blue)}
.epm-compare-cell-text{
  display:block;padding:clamp(var(--space-4),2.2vw,var(--space-6));
  font-size:var(--fs-body);font-weight:450;line-height:1.55;text-wrap:pretty;
}
.epm-compare-outcome .epm-compare-cell-text{font-weight:620}
.epm-compare-logo{display:block;width:auto;height:12px;max-width:100px;object-fit:contain;object-position:left center}

@media (max-width:700px){
  .epm-compare{margin-top:var(--space-6)}
  .epm-compare-table,.epm-compare-table tr,.epm-compare-table th,.epm-compare-table td{display:block;width:100%}
  .epm-compare-arrow{display:none}
  .epm-compare-current{border-top-right-radius:var(--radius-md);border-bottom-left-radius:0}
  .epm-compare-outcome{border-top-right-radius:0;border-bottom-left-radius:var(--radius-md)}
  .epm-compare-current::after{display:none}
}

/* ==========================================================================
   "5 supermoći Oracle EPM-a" — the shared modules-explorer block
   (template-parts/blocks/modules-explorer.php + css/blocks/modules-explorer.css,
   also used on Business Intelligence and F.A.C.A.:GO): a horizontal tab strip
   over a two-pane panel: a 3:2 image on the left, the capability copy on the
   right (the block's .has-image layout). Replaces the earlier single-column
   fit-faq accordion, which sat thin and centered on a wide section.

   Page-level changes: the ground (the block defaults to --soft; this section
   needs --white to keep the context --soft / powers --white / func --soft
   rhythm), and a fallback for the image column if an asset is unavailable.
   ========================================================================== */
.page-template-template-resenje-epm-powered-by-oracle .modules-section{background:var(--white)}
.page-template-template-resenje-epm-powered-by-oracle .module-panel-visual{border:1px solid var(--line)}
.page-template-template-resenje-epm-powered-by-oracle .module-panel-visual img{position:relative;aspect-ratio:3/2}
.page-template-template-resenje-epm-powered-by-oracle .module-panel-visual img::before{
  content:"";position:absolute;inset:0;background:var(--soft-2);
}
.page-template-template-resenje-epm-powered-by-oracle .module-panel-visual img::after{
  content:"";position:absolute;left:50%;top:50%;width:26px;height:26px;transform:translate(-50%,-50%);
  background:var(--brand-dots);color:var(--muted);opacity:.5;
}

/* ==========================================================================
   "Oracle EPM funkcionalnosti" — the Business Intelligence "Poslovni benefiti"
   card (resenje-business-intelligence.css .bi-benefit*), ported here: copy
   left, an icon panel right, in a bordered two-column grid. No number badge
   (removed from the BI original too). Icon panels show a placeholder mark
   until an image is set on the data item.
   ========================================================================== */
.epm-func{background:var(--soft)}
.epm-func-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5);
  margin-top:var(--space-7);
}
.epm-func-item{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,34%);
  border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--white);overflow:hidden;
}
.epm-func-content{display:flex;flex-direction:column;padding:var(--space-6)}
.epm-func-content h3{color:var(--text)}
.epm-func-content p{max-width:48ch;margin-top:var(--space-5);color:var(--text-secondary)}
.epm-func-visual{
  position:relative;display:flex;align-items:center;justify-content:center;min-width:0;
  padding:var(--space-5);overflow:hidden;border-left:1px solid var(--line);background:var(--soft);
}
.epm-func-visual img{width:100%;height:100%;display:block;object-fit:contain}
.epm-func-icon:empty{
  width:48px;height:48px;display:grid;place-items:center;
  border-radius:var(--radius-md);background:var(--soft-2);border:1px solid var(--line);
}
.epm-func-icon:empty::after{
  content:"";width:18px;height:18px;background:var(--brand-dots);color:var(--muted);opacity:.5;
}

/* Scroll reveal off the global section .reveal (main.js), staggered per card.
   .reveal only exists when the observer runs, so no-JS keeps cards visible. */
.epm-func.reveal .epm-func-item{
  opacity:0;transform:translateY(24px);
  transition:opacity .5s ease,transform .5s ease;transition-delay:calc(var(--i,0) * 80ms);
}
.epm-func.reveal.is-visible .epm-func-item{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .epm-func.reveal .epm-func-item{opacity:1;transform:none;transition:none}
}

@media (max-width:1024px){
  .epm-func-item{grid-template-columns:minmax(0,1fr) 150px}
}
@media (max-width:760px){
  .epm-func-grid{grid-template-columns:1fr;gap:var(--space-3);margin-top:var(--space-7)}
  .epm-func-item{grid-template-columns:minmax(0,1fr) 120px}
  .epm-func-content{padding:var(--space-5)}
  .epm-func-visual{padding:var(--space-3)}
}
@media (max-width:480px){
  .epm-func-item{grid-template-columns:1fr}
  .epm-func-visual{min-height:104px;border-top:1px solid var(--line);border-left:0}
}

/* "Planiranje i budžetiranje" — editorial Oracle EPM planning session below
   the section intro. White ground alternates against .epm-func. */
.epm-planning{background:var(--white)}
.epm-planning-visual{
  max-width:1120px;margin:var(--space-8) auto 0;
  aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius-xl);background:var(--soft);
}
.epm-planning-visual img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:center;
}

@media (max-width:700px){
  .epm-planning-visual{margin-top:var(--space-7);border-radius:var(--radius-lg)}
}

/* ==========================================================================
   "Finansijsko zatvaranje i konsolidacija" — the BC page's scope-panel design
   (framed soft-grey panel + two-column dash list), minus the outcome line and
   partner logos. Ported from resenje-obezbedjivanje-kontinuiteta-poslovanja.css.
   ========================================================================== */
.epm-close{background:var(--soft)}
.epm-close-scope{
  max-width:720px;margin:var(--space-8) auto 0;
  padding:clamp(var(--space-6),4vw,var(--space-8));
  background:var(--soft-2);border:1px solid var(--line);border-radius:var(--radius-lg);
}
.epm-close-scope-label{
  margin-bottom:var(--space-6);color:var(--text);
  font-size:var(--fs-body-lg);font-weight:550;line-height:var(--lh-body);
}
.epm-close-steps{
  margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:1fr 1fr;
  column-gap:var(--space-9);row-gap:var(--space-4);
}
.epm-close-steps li{
  display:grid;grid-template-columns:16px 1fr;align-items:start;gap:var(--space-4);
  color:var(--text-secondary);font-size:var(--fs-body);line-height:var(--lh-body);
}
.epm-close-steps li::before{
  content:"";margin-top:.3em;width:16px;height:16px;
  color:var(--page-accent);background:var(--brand-dots);
}
@media (max-width:600px){
  .epm-close-steps{grid-template-columns:1fr;row-gap:var(--space-3)}
}

/* "ESG u Oracle EPM-u" — a simple header-only text section, white ground
   (alternates against .epm-close). */
.epm-esg{background:var(--white)}

/* ==========================================================================
   "AI kao deo EPM procesa" — the datacenter infrastructure-overview row
   (copy left, square image right, centered cluster, hairline dividers;
   ported from resenje-datacenter.css), each row with a subheading + two
   paragraphs, then a closing line. Image slots are placeholders for now.
   ========================================================================== */
.epm-ai{background:var(--soft)}
.epm-ai-items{max-width:1000px;margin:var(--space-9) auto 0;border-top:1px solid var(--line)}
.epm-ai-item{
  display:grid;grid-template-columns:minmax(0,58ch) 210px;
  justify-content:center;align-items:start;
  gap:clamp(var(--space-6),4vw,var(--space-8));padding:var(--space-8) 0;
  border-bottom:1px solid var(--line);
}
.epm-ai-copy{grid-column:1;grid-row:1;display:grid;gap:var(--space-4)}
.epm-ai-copy h3{color:var(--blue)}
.epm-ai-copy p{color:var(--text-secondary);font-size:var(--fs-body);line-height:var(--lh-body)}
.epm-ai-visual{grid-column:2;grid-row:1;justify-self:end}
.epm-ai-icon{
  display:block;width:210px;max-width:100%;aspect-ratio:1;
  border-radius:var(--radius-md);overflow:hidden;background:var(--soft-2);border:1px solid var(--line);
}
.epm-ai-icon img{width:100%;height:100%;object-fit:contain}
.epm-ai-icon:empty{display:grid;place-items:center}
.epm-ai-icon:empty::after{content:"";width:26px;height:26px;background:var(--brand-dots);color:var(--muted);opacity:.5}

.epm-ai-outcome{
  max-width:60ch;margin-top:var(--space-8);text-align:center;
  color:var(--text);font-size:var(--fs-body-lg);line-height:var(--lh-body);
}

@media (max-width:820px){
  .epm-ai-items{margin-top:var(--space-7)}
  .epm-ai-item{grid-template-columns:1fr;gap:var(--space-5);padding:var(--space-7) 0}
  .epm-ai-visual{grid-column:1;grid-row:1;justify-self:start}
  .epm-ai-icon{width:150px}
  .epm-ai-copy{grid-column:1;grid-row:2}
  .epm-ai-outcome{margin-top:var(--space-7)}
}

/* ==========================================================================
   "Za koga je EPM powered by Oracle" — the ict-managed-servisi "services"
   list: shared .illus-rows / .illus-row primitive + the same .managed-service*
   overrides (copy left, square image right, centered, hairline dividers).
   Image slots are placeholders for now.
   ========================================================================== */
.epm-audience{background:var(--white)}
.epm-audience-list{max-width:none;border-block:0;border-top:1px solid var(--line);margin-top:var(--space-7)}
.epm-audience-item{
  grid-template-columns:minmax(0,62ch) 210px;justify-content:center;align-items:center;
  min-height:0;gap:clamp(var(--space-5),4vw,var(--space-7));padding:var(--space-6) 0;
}
.epm-audience-item + .epm-audience-item{border-top:1px solid var(--line)}
.epm-audience-visual{grid-column:2;grid-row:1;width:100%;max-width:210px;justify-self:end}
.epm-audience-visual img{aspect-ratio:1;object-fit:contain}
.epm-audience-visual:empty{
  aspect-ratio:1;display:grid;place-items:center;
  border-radius:var(--radius-md);background:var(--soft-2);border:1px solid var(--line);
}
.epm-audience-visual:empty::after{content:"";width:26px;height:26px;background:var(--brand-dots);color:var(--muted);opacity:.5}
.epm-audience-copy{grid-column:1;grid-row:1;max-width:62ch}
.epm-audience-item h3{max-width:24ch;color:var(--blue);text-wrap:balance}
.epm-audience-copy p{max-width:62ch;color:var(--text-secondary);font-size:var(--fs-body-lg);line-height:var(--lh-body);text-wrap:pretty}

@media (max-width:820px){
  .epm-audience-item{grid-template-columns:1fr;gap:var(--space-4);padding:var(--space-6) 0}
  .epm-audience-visual{grid-column:1;grid-row:1;width:150px;max-width:150px;justify-self:center}
  .epm-audience-copy{grid-column:1;grid-row:2;max-width:none}
}
@media (max-width:520px){
  .epm-audience-visual{width:120px;max-width:120px}
}

/* Three plain text sections — standard .solution-intro. 'approach' carries a
   centered mid-page CTA button. Alternating soft / white grounds. */
.epm-why{background:var(--soft)}
.epm-approach{background:var(--white)}
.epm-practice{background:var(--soft)}
.epm-approach-cta{margin-top:var(--space-10);text-align:center}

/* ==========================================================================
   'approach' — the copy's point is that EPM is shaped around your existing
   process, not the other way round. So it's drawn as an adapting route: a
   generic dotted guide, and a solid accent path that bends to fit and draws
   itself in on scroll (assets/js/pages/resenje-epm-powered-by-oracle.js,
   mirroring the o-nama timeline). Three numbered stops sit beneath the route,
   the CTA is the destination. No JS / reduced motion: fully drawn and lit.
   ========================================================================== */
.epm-approach-journey{max-width:1120px;margin:var(--space-9) auto 0}

.epm-approach-route{position:relative;height:clamp(120px,14vw,164px)}
.epm-approach-route-svg{
  position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.epm-approach-route-base,.epm-approach-route-line{fill:none;stroke-linecap:round;stroke-linejoin:round}
/* the rigid "predefined model" guide */
.epm-approach-route-base{stroke:var(--muted);stroke-width:2;stroke-dasharray:.1 11;opacity:.6}
/* the route that bends to fit — drawn on scroll */
.epm-approach-route-line{stroke:var(--page-accent);stroke-width:3}
.epm-approach-journey.is-armed .epm-approach-route-line{
  transition:stroke-dashoffset 1.5s cubic-bezier(.65,0,.35,1);
}

.epm-approach-node{
  position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  width:clamp(38px,3.8vw,46px);height:clamp(38px,3.8vw,46px);
  display:grid;place-items:center;border-radius:50%;
  background:var(--page-accent);border:2px solid var(--page-accent);color:var(--white);
  box-shadow:0 0 0 6px var(--white);
  font-size:var(--fs-body-sm);font-weight:820;font-variant-numeric:tabular-nums;
  transition:background .35s ease,border-color .35s ease,color .35s ease,
             transform .35s cubic-bezier(.34,1.56,.64,1);
}
.epm-approach-journey.is-armed .epm-approach-node{
  background:var(--white);border-color:var(--line);color:var(--muted);
  transform:translate(-50%,-50%) scale(1);
}
.epm-approach-journey.is-armed .epm-approach-node.is-lit{
  background:var(--page-accent);border-color:var(--page-accent);color:var(--white);
  transform:translate(-50%,-50%) scale(1.07);
}

.epm-approach-stops{
  list-style:none;margin:var(--space-6) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(var(--space-6),4vw,var(--space-8));
}
.epm-approach-stop{display:grid;gap:var(--space-3);align-content:start}
/* The route nodes already carry 01/02/03 on desktop; the per-column numeral
   only comes back on mobile, where the route is hidden. */
.epm-approach-stop-num{
  display:none;
  color:var(--page-accent);font-size:var(--fs-subhead);font-weight:820;line-height:1;
  letter-spacing:var(--tracking-title);font-variant-numeric:tabular-nums;
}
.epm-approach-stop p{color:var(--text-secondary);font-size:var(--fs-body);line-height:var(--lh-body);text-wrap:pretty}
.epm-approach-journey.is-armed .epm-approach-stop{
  opacity:0;transform:translateY(16px);
  transition:opacity .5s ease,transform .5s ease;transition-delay:calc(.35s + var(--i,0) * .16s);
}
.epm-approach-journey.is-armed.is-visible .epm-approach-stop{opacity:1;transform:none}

@media (max-width:820px){
  .epm-approach-journey{margin-top:var(--space-7);max-width:62ch}
  .epm-approach-route{display:none}
  .epm-approach-stops{
    grid-template-columns:1fr;gap:0;position:relative;margin-top:0;padding-left:var(--space-8);
  }
  .epm-approach-stops::before{
    content:"";position:absolute;top:8px;bottom:8px;left:9px;width:2px;
    background:repeating-linear-gradient(var(--muted) 0 2px,transparent 2px 13px);opacity:.5;
  }
  .epm-approach-stop{position:relative;padding-bottom:var(--space-7)}
  .epm-approach-stop:last-child{padding-bottom:0}
  .epm-approach-stop-num{
    position:absolute;left:calc(-1 * var(--space-8));top:-2px;
    display:grid;place-items:center;width:20px;height:20px;font-size:var(--fs-body-sm);
    background:var(--white);
  }
}
@media (prefers-reduced-motion:reduce){
  .epm-approach-journey.is-armed .epm-approach-route-line{transition:none}
  .epm-approach-journey.is-armed .epm-approach-stop{opacity:1;transform:none;transition:none}
}

/* 'why' lays its three paragraphs side by side (three columns, not a stack),
   each opened by a short accent rule. Collapses to one column below 820px. */
.epm-why-cols{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(var(--space-6),4vw,var(--space-8));
  max-width:1040px;margin:var(--space-8) auto 0;
}
.epm-why-cols p{
  position:relative;padding-top:var(--space-5);
  color:var(--text-secondary);font-size:var(--fs-body);line-height:var(--lh-body);text-wrap:pretty;
}
.epm-why-cols p::before{
  content:"";position:absolute;top:0;left:0;width:28px;height:2px;border-radius:1px;background:var(--page-accent);
}
@media (max-width:820px){
  .epm-why-cols{grid-template-columns:1fr;gap:var(--space-6);margin-top:var(--space-7);max-width:62ch}
}