/* ============================================================
   AIC News Grid
   Warna memakai CSS variable agar bisa diatur dari panel Elementor
   dan tidak dikalahkan aturan warna dari theme.
   ============================================================ */
.aicn{
  --aicn-cols:3;
  --aicn-navy:#0A1830; --aicn-accent:#4FC3F7;
  --aicn-c-title:#0A1830;
  --aicn-c-exc:#5b6b7c;
  --aicn-c-date:#8a99a8;
  --aicn-c-more:#1c8fb0;
  --aicn-c-cat:#ffffff;
  --aicn-c-cat-bg:rgba(10,24,48,.72);
  --aicn-card-bg:#ffffff;
  --aicn-radius:16px;
  --aicn-ratio:16/10;
  --aicn-ease:cubic-bezier(.22,.8,.24,1);
  font-family:inherit;
}
.aicn *{ box-sizing:border-box; }

.aicn-grid{
  display:grid; grid-template-columns:repeat(var(--aicn-cols),1fr);
  gap:30px 26px; align-items:stretch;
}

/* ---------- card ---------- */
.aicn-card{
  display:flex; flex-direction:column; height:100%;
  background:var(--aicn-card-bg); border-radius:var(--aicn-radius); overflow:hidden;
  box-shadow:0 1px 2px rgba(10,24,48,.06), 0 18px 34px -22px rgba(10,24,48,.42);
  transition:transform .3s var(--aicn-ease), box-shadow .3s var(--aicn-ease);
}
.aicn-card:hover{
  transform:translateY(-6px);
  box-shadow:0 2px 4px rgba(10,24,48,.08), 0 30px 50px -24px rgba(10,24,48,.5);
}

/* ---------- thumbnail ---------- */
.aicn-thumb{
  position:relative; display:block; aspect-ratio:var(--aicn-ratio);
  overflow:hidden; background:#e9eef3;
}
.aicn-img{
  position:absolute; inset:0; display:block;
  background-size:cover; background-position:center;
  transition:transform .6s var(--aicn-ease);
}
.aicn-card:hover .aicn-img{ transform:scale(1.06); }
.aicn-img--empty{ background:linear-gradient(140deg,#0A1830,#12386f 55%,#1c7c8c); }

.aicn-cat{
  position:absolute; left:12px; top:12px; z-index:2;
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px; backdrop-filter:blur(4px);
}

/* ---------- body ---------- */
.aicn-body{ display:flex; flex-direction:column; flex:1; padding:22px 22px 24px; }

.aicn-date{
  font-size:12.5px; font-weight:600; letter-spacing:.04em; margin-bottom:9px;
}
.aicn-title{
  margin:0; font-size:19px; line-height:1.32; font-weight:700; letter-spacing:-.3px;
}
.aicn-title a{ text-decoration:none; color:inherit; }
.aicn-exc{
  margin:11px 0 0; font-size:14.5px; line-height:1.65;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.aicn-more{
  display:inline-flex; align-items:center; gap:7px; margin-top:auto; padding-top:18px;
  font-size:13.5px; font-weight:700; text-decoration:none;
}
.aicn-more svg{
  width:15px; height:15px; fill:none; stroke:currentColor;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .25s var(--aicn-ease);
}
.aicn-card:hover .aicn-more svg{ transform:translateX(4px); }

/* ---------- warna (selector kuat + variabel) ---------- */
.aicn .aicn-title, .aicn .aicn-title a{ color:var(--aicn-c-title) !important; }
.aicn .aicn-exc{ color:var(--aicn-c-exc) !important; }
.aicn .aicn-date{ color:var(--aicn-c-date) !important; }
.aicn .aicn-more{ color:var(--aicn-c-more) !important; }
.aicn .aicn-cat{
  color:var(--aicn-c-cat) !important;
  background:var(--aicn-c-cat-bg) !important;
}

/* ---------- load more ---------- */
.aicn-foot{ display:flex; justify-content:center; margin-top:34px; }
.aicn-load{
  position:relative; display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  padding:13px 30px; border-radius:999px; border:1px solid rgba(10,24,48,.18);
  background:transparent; color:var(--aicn-navy);
  font-size:14px; font-weight:700; font-family:inherit;
  transition:background .25s, color .25s, border-color .25s, transform .2s;
}
.aicn-load:hover{ background:var(--aicn-navy); color:#fff; border-color:var(--aicn-navy); }
.aicn-load:active{ transform:scale(.97); }
.aicn-load[disabled]{ opacity:.6; cursor:default; }
.aicn-spin{
  display:none; width:15px; height:15px; border-radius:50%;
  border:2px solid currentColor; border-right-color:transparent;
  animation:aicn-rot .7s linear infinite;
}
.aicn-load.is-loading .aicn-spin{ display:block; }
@keyframes aicn-rot{ to{ transform:rotate(360deg) } }

.aicn-empty{ color:var(--aicn-c-exc); font-size:15px; margin:0; }

/* animasi masuk untuk kartu baru */
.aicn-card.aicn-in{ animation:aicn-fade .5s var(--aicn-ease) both; }
@keyframes aicn-fade{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

/* ---------- dark mode (mengikuti toggle tema situs) ---------- */
[data-theme="dark"] .aicn{
  --aicn-card-bg:rgba(255,255,255,.05);
  --aicn-c-title:#ffffff;
  --aicn-c-exc:#aebccb;
  --aicn-c-date:#8fa3b6;
}
[data-theme="dark"] .aicn-load{ color:#fff; border-color:rgba(255,255,255,.25); }
[data-theme="dark"] .aicn-load:hover{ background:#fff; color:var(--aicn-navy); border-color:#fff; }

/* ---------- responsive ---------- */
@media (max-width:1024px){ .aicn-grid{ gap:26px 22px; } }
@media (max-width:820px) { .aicn{ --aicn-cols:2; } }
@media (max-width:560px) { .aicn{ --aicn-cols:1; } .aicn-grid{ gap:22px; } }

@media (prefers-reduced-motion:reduce){
  .aicn-card,.aicn-img,.aicn-more svg{ transition:none !important; }
  .aicn-card:hover{ transform:none; }
  .aicn-card.aicn-in{ animation:none; }
}