/* SiteOS 1.4.6 — Compact recommended articles, above the service directory.
   Kept isolated from the full-width premium blog and site-wide article styles. */
.siteos-ai-articles,
.siteos-ai-articles *,
.siteos-ai-articles *::before,
.siteos-ai-articles *::after {box-sizing:border-box}

.siteos-ai-articles {
  position:relative;
  isolation:isolate;
  width:min(calc(100% - 2 * var(--siteos-gap, clamp(14px, 3vw, 28px))), var(--siteos-width, 1180px));
  max-width:var(--siteos-width, 1180px);
  scroll-margin-top:92px;
  margin:26px auto 22px;
  padding:20px;
  background:linear-gradient(145deg,rgba(10,29,18,.96),rgba(4,13,8,.98));
  border:1px solid rgba(65,222,114,.26);
  border-radius:26px;
  box-shadow:0 18px 48px rgba(0,0,0,.3),inset 0 1px rgba(161,255,190,.04);
  overflow:hidden;
  color:#effbf2;
  font-family:inherit;
}
.siteos-ai-articles::before {
  content:"";position:absolute;top:0;left:20px;right:20px;height:2px;
  background:linear-gradient(90deg,transparent,#48f18c 18%,#166638 75%,transparent);
  opacity:.8;pointer-events:none;
}
.siteos-ai-articles-head {
  display:flex;align-items:center;justify-content:space-between;
  gap:12px 20px;
  padding:0 2px 15px;
  margin:0 0 15px;
  border-bottom:1px solid rgba(116,233,153,.13);
}
.siteos-ai-articles-head > div {min-width:0}
.siteos-ai-articles-head h2 {
  display:flex;align-items:center;gap:11px;
  margin:0 0 3px !important;
  color:#f4fff6;
  font-size:clamp(21px,2.2vw,28px);
  font-weight:850;
  line-height:1.3;
  letter-spacing:-.015em;
}
.siteos-ai-articles-head h2::before {
  content:"";display:block;flex:0 0 5px;height:27px;border-radius:7px;
  background:linear-gradient(#6dffab,#12b15b);
  box-shadow:0 0 12px rgba(61,238,115,.26);
}
.siteos-ai-articles-head p {
  margin:0 !important;
  color:#9fb7a9;
  font-size:12px;
  line-height:1.5;
}
.siteos-ai-articles .siteos-section-kicker {display:none}
.siteos-ai-articles .siteos-ai-all {
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  padding:9px 13px;border:1px solid rgba(90,224,131,.29);
  border-radius:12px;background:rgba(29,95,52,.29);
  color:#c5f9d7 !important;
  font-size:12px;font-weight:800;white-space:nowrap;text-decoration:none;
  box-shadow:none;
  transition:background-color .2s,border-color .2s,transform .2s;
}
.siteos-ai-articles .siteos-ai-all:hover {background:rgba(38,119,68,.47);border-color:#63e99b;transform:translateY(-1px)}
.siteos-ai-articles .siteos-ai-all span {font-size:15px;line-height:1}
.siteos-ai-articles .siteos-ai-grid {
  display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:12px !important;
  margin:0;padding:0;
}
.siteos-ai-articles .siteos-ai-card {
  display:flex;flex-direction:column;min-width:0;
  border:1px solid rgba(87,203,121,.18);
  border-radius:16px;overflow:hidden;
  background:linear-gradient(170deg,#13241a,#09160f);
  box-shadow:0 6px 19px rgba(0,0,0,.17);
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
.siteos-ai-articles .siteos-ai-card:hover {
  transform:translateY(-3px);
  border-color:rgba(106,241,149,.48);
  box-shadow:0 13px 27px rgba(0,0,0,.28);
}
.siteos-ai-articles .siteos-ai-thumb {
  display:block;position:relative;
  aspect-ratio:2.2 / 1;
  height:auto;flex:0 0 auto;
  overflow:hidden;background:#102519;
}
.siteos-ai-articles .siteos-ai-thumb img {
  display:block;width:100%;height:100%;max-width:100%;
  object-fit:cover;object-position:center;
  transition:transform .35s ease;
}
.siteos-ai-articles .siteos-ai-card:hover .siteos-ai-thumb img {transform:scale(1.035)}
.siteos-ai-articles .siteos-ai-card-body {
  display:flex;flex:1;flex-direction:column;align-items:flex-start;
  gap:7px;padding:12px 13px 13px;min-height:0;
}
.siteos-ai-articles .siteos-ai-meta {
  display:block;max-width:100%;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  width:max-content;padding:4px 8px;border-radius:7px;
  border:1px solid rgba(76,200,119,.17);
  background:rgba(52,129,73,.16);color:#91e4ad;
  font-size:10px;font-weight:800;line-height:1.4;
}
.siteos-ai-articles .siteos-ai-card h3 {
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;min-height:2.95em;max-width:100%;
  margin:0 !important;padding:0 !important;
  font-size:15px;line-height:1.47;font-weight:800;letter-spacing:0;
}
.siteos-ai-articles .siteos-ai-card h3 a {
  color:#effbf2 !important;text-decoration:none;
  overflow-wrap:anywhere;
}
.siteos-ai-articles .siteos-ai-card h3 a:hover {color:#73f6a4 !important}
/* Excerpt remains in the full article, but hiding it here keeps 12 cards compact. */
.siteos-ai-articles .siteos-ai-card-body > p {display:none !important}
.siteos-ai-articles .siteos-ai-read {
  display:inline-flex;align-items:center;gap:4px;margin-top:auto;
  color:#75e9a1 !important;
  font-size:11px;font-weight:850;text-decoration:none;
}
.siteos-ai-articles .siteos-ai-read::after {content:"→";font-size:14px;line-height:1}
.siteos-ai-articles .siteos-ai-read:hover {color:#b9ffd0 !important}

@media (max-width:900px) {
  .siteos-ai-articles .siteos-ai-grid {grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media (max-width:600px) {
  .siteos-ai-articles {margin:17px auto 18px;padding:13px;border-radius:20px}
  .siteos-ai-articles-head {gap:9px;padding:1px 0 12px;margin-bottom:12px}
  .siteos-ai-articles-head h2 {font-size:21px}
  .siteos-ai-articles-head h2::before {height:23px;flex-basis:4px}
  .siteos-ai-articles-head p {font-size:11px}
  .siteos-ai-articles .siteos-ai-all {padding:8px 9px;font-size:11px}
  .siteos-ai-articles .siteos-ai-grid {gap:9px !important}
  .siteos-ai-articles .siteos-ai-card {border-radius:12px}
  .siteos-ai-articles .siteos-ai-thumb {aspect-ratio:2/1}
  .siteos-ai-articles .siteos-ai-card-body {gap:6px;padding:9px 10px 11px}
  .siteos-ai-articles .siteos-ai-meta {font-size:9px;padding:3px 6px}
  .siteos-ai-articles .siteos-ai-card h3 {font-size:12.5px;line-height:1.46;min-height:2.9em}
  .siteos-ai-articles .siteos-ai-read {font-size:10px}
}
@media (max-width:350px) {
  .siteos-ai-articles-head p {display:none}
  .siteos-ai-articles .siteos-ai-card-body {padding:8px}
  .siteos-ai-articles .siteos-ai-card h3 {font-size:12px}
}
@media (prefers-reduced-motion:reduce) {
  .siteos-ai-articles .siteos-ai-card,
  .siteos-ai-articles .siteos-ai-thumb img,
  .siteos-ai-articles .siteos-ai-all {transition:none}
}