/* =========================================================
   Meteon – Cikkek (magazin/hír-stílusú listaoldal)
   Csak a /cikkek hub-on hat: minden szabály body.mag alatt.
   ========================================================= */
body.mag{
  /* Azonos háttér a MA-oldallal (ma_modern.css) – egységes az egész site. */
  background:linear-gradient(180deg,#a5d3f2 0%,#c2e2f7 42%,#e8f4fd 100%) no-repeat;
  background-color:#dceefb;
}
body.mag .mag-wrap{ max-width:1120px; margin:0 auto; padding:10px 18px 52px; text-align:left; }

/* Fejléc */
body.mag .mag-head{ margin:20px 2px 26px; }
body.mag .mag-kicker{
  display:inline-block; text-transform:uppercase; letter-spacing:.14em; font-size:12px;
  font-weight:800; color:#1d73eb; margin:0 0 8px;
}
body.mag .mag-head h1{
  font-size:clamp(27px,4.2vw,40px); line-height:1.12; margin:0 0 10px;
  color:#0e2138; font-weight:800; letter-spacing:-.02em;
}
body.mag .mag-lead{ font-size:15.5px; color:#46586e; max-width:660px; line-height:1.55; margin:0; }

/* Közös kártya */
body.mag a.mag-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid #e3ecf6;
  border-radius:18px; overflow:hidden; text-decoration:none;
  box-shadow:0 10px 30px rgba(20,50,110,.08);
  transition:transform .16s ease, box-shadow .16s ease;
}
body.mag a.mag-card:hover{ transform:translateY(-4px); box-shadow:0 22px 48px rgba(20,50,110,.16); }

/* Borító (gradiens + ikon + kategória) */
body.mag .mag-cover{
  position:relative; display:flex; align-items:center; justify-content:center;
  color:#fff; overflow:hidden; background:linear-gradient(135deg,#7c8aa0,#55617a);
}
body.mag .mag-cover::after{
  content:""; position:absolute; width:200px; height:200px; border-radius:50%;
  right:-60px; top:-70px; background:rgba(255,255,255,.14);
}
body.mag .mag-cover::before{
  content:""; position:absolute; width:120px; height:120px; border-radius:50%;
  left:-40px; bottom:-50px; background:rgba(255,255,255,.10);
}
body.mag .mag-ico{ position:relative; z-index:2; display:flex; }
body.mag .mag-ico svg{ width:46px; height:46px; filter:drop-shadow(0 8px 16px rgba(0,0,0,.18)); }
body.mag .mag-cat{
  position:absolute; z-index:3; top:14px; left:14px;
  background:rgba(255,255,255,.92); color:#16294a; font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:.05em; padding:5px 11px; border-radius:999px;
}

/* Borító-színek hangulat szerint */
body.mag .mag-cover--sun{  background:linear-gradient(135deg,#ffb43d 0%,#ff8a3d 55%,#f7681c 100%); }
body.mag .mag-cover--warm{ background:linear-gradient(135deg,#ff7a6b 0%,#f3475f 60%,#d6285a 100%); }
body.mag .mag-cover--air{  background:linear-gradient(135deg,#4fb0c6 0%,#3f7fa6 60%,#3a5e8c 100%); }
body.mag .mag-cover--tech{ background:linear-gradient(135deg,#5b86e5 0%,#5566d6 55%,#6a3fbf 100%); }

/* Kártya-törzs */
body.mag .mag-body{ padding:18px 20px 20px; display:flex; flex-direction:column; flex:1; }
body.mag .mag-title{ font-size:18px; font-weight:800; color:#0f2238; line-height:1.26; margin:0 0 8px; letter-spacing:-.01em; }
body.mag .mag-excerpt{ font-size:14px; color:#54657a; line-height:1.55; margin:0 0 16px; flex:1; }
body.mag .mag-meta{ display:flex; align-items:center; justify-content:space-between; font-size:12.5px; color:#8a99ab; font-weight:600; }
body.mag .mag-readmore{ color:#1d73eb; font-weight:800; }

/* Vezércikk (nagy, kétoszlopos) */
body.mag .mag-featured{ margin-bottom:26px; }
body.mag .mag-featured{ display:grid; grid-template-columns:1.05fr .95fr; }
body.mag .mag-featured .mag-cover{ min-height:300px; }
body.mag .mag-featured .mag-ico svg{ width:72px; height:72px; }
body.mag .mag-featured .mag-body{ padding:32px 34px; justify-content:center; }
body.mag .mag-featured .mag-title{ font-size:27px; line-height:1.18; }
body.mag .mag-featured .mag-excerpt{ font-size:15.5px; }
body.mag .mag-featured .mag-cat{ top:18px; left:18px; }

/* Rács a többi cikknek */
body.mag .mag-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
body.mag .mag-grid .mag-cover{ height:152px; }

/* Reszponzív */
@media (max-width:880px){
  body.mag .mag-featured{ grid-template-columns:1fr; }
  body.mag .mag-featured .mag-cover{ min-height:190px; }
  body.mag .mag-featured .mag-body{ padding:24px 22px; }
  body.mag .mag-featured .mag-title{ font-size:23px; }
  body.mag .mag-grid{ grid-template-columns:repeat(2,1fr); gap:16px; }
}
@media (max-width:560px){
  body.mag .mag-grid{ grid-template-columns:1fr; }
  body.mag .mag-head{ margin:14px 2px 20px; }
}