/* =========================================================
   Meteon – ÓRÁS / HOLNAP / HETI modern dizájn
   Közös a három előrejelzés-oldalon (azonos .slot szerkezet).
   Minden szabály body.fc-modern alatt → más oldalt nem érint.
   A MA-oldal (ma_modern.css) esztétikájához igazítva.
   ========================================================= */
body.fc-modern{
  background:linear-gradient(180deg,#a5d3f2 0%,#c2e2f7 42%,#e8f4fd 100%) no-repeat;
  background-color:#dceefb;
  color:#1b2c44;
}
body.fc-modern .wrap{ max-width:1000px; margin:0 auto; padding:0 16px; }

/* Fejléc */
body.fc-modern .header{ text-align:left; max-width:1000px; margin:16px auto 12px; padding:0 16px; }
body.fc-modern .header h1{ font-size:clamp(24px,4vw,34px); font-weight:800; color:#0e2138; letter-spacing:-.02em; margin:0 0 6px; line-height:1.15; }
body.fc-modern .header h2{ font-size:16px; font-weight:800; color:#10233b; margin:0; }
body.fc-modern .sub{ color:#46586e; font-size:14px; display:flex; align-items:center; gap:8px; }
body.fc-modern .badge{
  display:inline-block; background:rgba(255,255,255,.72); color:#1d73eb; border:1px solid #d9e6f6;
  padding:4px 12px; border-radius:999px; font-size:12.5px; font-weight:700;
}

/* Breadcrumbs */
body.fc-modern .breadcrumbs{ color:#3f5572; }
body.fc-modern .breadcrumbs a{ color:#1d73eb; }
body.fc-modern .breadcrumbs-sep{ color:rgba(63,85,114,.45); }

/* Trend-grafikon kártya */
body.fc-modern .forecast-chart-wrap{ margin-top:8px; }
body.fc-modern .forecast-chart-box{
  background:#fff; border:1px solid #e7eef7; border-radius:18px;
  box-shadow:0 8px 24px rgba(30,64,128,.09); padding:14px 16px; max-width:1000px; margin:0 auto;
}

/* ---------- Idő-szelet kártyák ---------- */
body.fc-modern .slot{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  background:#fff; border:1px solid #e7eef7; border-radius:16px;
  box-shadow:0 6px 18px rgba(30,64,128,.07); padding:14px 18px; margin:0 auto 12px; max-width:1000px;
  text-align:left;
}
body.fc-modern .slot-left{ display:flex; flex-direction:column; gap:7px; min-width:0; }
body.fc-modern .time{ font-size:14px; font-weight:800; color:#1d73eb; letter-spacing:.02em; }
body.fc-modern .bottom-left{ display:flex; align-items:center; gap:13px; }
body.fc-modern .slot .temp{ font-size:25px; font-weight:800; color:#10233b; letter-spacing:-.01em; }
body.fc-modern .slot .emoji{ font-size:28px; line-height:1; }
body.fc-modern .slot .desc{ font-size:13px; color:#64748b; max-width:160px; }

body.fc-modern .slot-right{ display:flex; flex-wrap:wrap; gap:11px 18px; justify-content:flex-end; }
body.fc-modern .metric{ display:flex; flex-direction:column; min-width:62px; }
body.fc-modern .metric .label{ font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:#8a99ab; font-weight:700; }
body.fc-modern .metric .value{ font-size:14px; font-weight:700; color:#1b2c44; margin-top:2px; white-space:nowrap; }

/* SEO szövegblokkok */
body.fc-modern .seo-text-block{
  max-width:1000px; margin:8px auto 4px; padding:14px 18px; font-size:14px; line-height:1.6; color:#3f4c5f;
  background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.7); border-radius:14px; text-align:left;
}
body.fc-modern .seo-text-small{ color:#3f5572; line-height:1.6; }

/* ---------- MOBIL ---------- */
@media (max-width:620px){
  body.fc-modern .slot{ flex-direction:column; align-items:stretch; gap:12px; padding:14px 16px; }
  body.fc-modern .slot-right{ justify-content:space-between; gap:10px 12px; }
  body.fc-modern .metric{ min-width:54px; flex:1 0 28%; }
  body.fc-modern .slot .desc{ max-width:none; }
}