/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* ── Croator: usporedba WordPress rješenja ─────────────────────────── */
.cro-cmp{
  --acc:#c93a2e; --tx:#0E1116; --tx2:#4A5461; --tx3:#8A94A0;
  --bd:#EAEDF1; --bd2:#EEF1F4; --card:#fff; --s1:#FBFCFD; --tint:#FBECEA;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--tx); max-width:1200px; margin:0 auto; padding:48px 24px; box-sizing:border-box;
}
.cro-cmp *{box-sizing:border-box;}

/* Naslov */
.cro-cmp__head{text-align:center; max-width:640px; margin:0 auto 44px;}
.cro-cmp__eyebrow{font-size:14px; font-weight:700; color:var(--acc); letter-spacing:.5px; text-transform:uppercase; margin-bottom:12px;}
.cro-cmp h2{font-family:"Space Grotesk",Inter,sans-serif; font-weight:700; font-size:clamp(28px,3.6vw,44px); letter-spacing:-1px; line-height:1.1; margin:0 0 16px; color:var(--tx);}
.cro-cmp__sub{color:var(--tx2); font-size:17px; line-height:1.6; font-weight:500; margin:0;}

/* Tablica */
.cro-cmp__scroll{overflow-x:auto; border-radius:20px; border:1px solid var(--bd); -webkit-overflow-scrolling:touch;}
.cro-cmp__grid{display:grid; grid-template-columns:1.5fr 1.15fr 1fr 1fr; min-width:760px; background:var(--card);}

/* Zaglavlje stupaca */
.cro-cmp__th{padding:22px 20px; background:var(--s1);}
.cro-cmp__th--main{background:#0E1116; color:#fff;}
.cro-cmp__badge{display:inline-block; background:#db4437; color:#fff; font-size:11px; font-weight:800; letter-spacing:.3px; padding:4px 10px; border-radius:999px; margin-bottom:8px;}
.cro-cmp__thname{font-family:"Space Grotesk",Inter,sans-serif; font-weight:700; font-size:17px; color:var(--tx2);}
.cro-cmp__th--main .cro-cmp__thname{font-size:18px; color:#fff;}
.cro-cmp__thsub{font-size:12.5px; color:var(--tx3); font-weight:600; margin-top:2px;}
.cro-cmp__th--main .cro-cmp__thsub{color:#9AA4B0;}

/* Redci */
.cro-cmp__f,.cro-cmp__c{padding:15px 20px; border-top:1px solid var(--bd2); font-size:14px; display:flex; align-items:center;}
.cro-cmp__f{font-weight:700; color:var(--tx); gap:0;}
.cro-cmp__c{font-weight:500; color:var(--tx2); gap:9px;}
.cro-cmp__c--main{background:var(--tint); font-weight:600; color:var(--tx);}

/* Ikone */
.cro-cmp__i{font-weight:800; font-size:15px; width:16px; display:inline-block; text-align:center; flex:none;}
.cro-cmp__i--y{color:#db4437;}   /* da */
.cro-cmp__i--n{color:#9AA4B0;}   /* ne */
.cro-cmp__i--m{color:#C98A00;}   /* djelomično */

/* Fusnota */
.cro-cmp__star{color:var(--acc); font-weight:800; margin-left:2px;}
.cro-cmp__note{margin:14px 2px 0; font-size:13.5px; font-weight:500; color:var(--tx3); line-height:1.5;}
.cro-cmp__note .cro-cmp__star{margin-left:0;}

@media(max-width:640px){
  .cro-cmp{padding:36px 16px;}
  .cro-cmp__grid{min-width:680px;}
}

/* ---- CARD HOVER (service / blog / feature cards) ---- */
.croator-card {
  color: inherit;
  transition:
    transform .28s cubic-bezier(.22,.8,.34,1),
    box-shadow .28s cubic-bezier(.22,.8,.34,1),
    border-color .28s ease;
  will-change: transform;
}

.croator-card:hover {
  border-color: #db4437;
  transform: translateY(-4px);
  box-shadow: 0 26px 46px -26px rgba(219,68,55,.4);
}

/* image-topped variant (blog cards) — slightly bigger lift, neutral shadow */
.croator-card--media:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 50px -28px rgba(14,17,22,.35);
}

/* arrow nudge inside a card */
.croator-card .card-arrow { transition: transform .28s cubic-bezier(.22,.8,.34,1); }
.croator-card:hover .card-arrow { transform: translateX(4px); }

.croator-card-static {
  transition:
    transform .3s cubic-bezier(.22,.8,.34,1),
    box-shadow .3s cubic-bezier(.22,.8,.34,1),
    border-color .3s ease;
}

.croator-card-static:hover {
  transform: translateY(-2px);
  border-color: #DDE2E8;
  box-shadow: 0 18px 34px -22px rgba(14,17,22,.25);
}

@media (prefers-reduced-motion: reduce) {
  .croator-card-static { transition: none; }
}