/*
 Theme Name: jcilinc Conversion Child
 Theme URI: https://jcilinc.com
 Description: Child theme focado em conversão: Home estilo Automatable + Blog estilo Medium + Form Apply
 Author: Danilo Candido (JCIL INC)
 Version: 0.1.1
 Template: kadence
 Text Domain: jcilinc
*/

/* ---------------- TOKENS ---------------- */
:root{
  --maxw: 1160px;
  --gap: 24px;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --bg: #ffffff;
  --ink: #0f0f12;
  --muted: #6b7280;
  --accent: #5b5ce2; /* roxo-azulado */
  --accent-2: #7b5cf6; /* gradiente */
  --gridline: rgba(0,0,0,.05);
  --card: #ffffff;
  --border: rgba(0,0,0,.08);
}

html,body{background:var(--bg);color:var(--ink);scroll-behavior:smooth}
a{color:var(--accent);text-decoration:none}
a:hover{opacity:.9}
img{max-width:100%;height:auto;display:block}

/* ---------------- LAYOUT ---------------- */
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;border-radius:12px;font-weight:600;border:1px solid var(--border);transition:transform .08s ease, box-shadow .2s ease;text-decoration:none}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;box-shadow:var(--shadow)}
.btn.link{border:none;padding:0;font-weight:600}

/* ---------------- HERO AUTOMATABLE ---------------- */
.hero{
  position:relative;padding:96px 0 64px;isolation:isolate;overflow:hidden
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:
    linear-gradient(0deg, transparent 24px, var(--gridline) 25px),
    linear-gradient(90deg, transparent 24px, var(--gridline) 25px);
  background-size: 96px 96px, 96px 96px;
  opacity:.7
}
.hero .kicker{display:flex;gap:14px;justify-content:center;color:var(--muted);font-size:14px;margin-bottom:12px;flex-wrap:wrap}
.hero h1{font-size: clamp(34px,5vw,64px);line-height:1.05;text-align:center;margin:0 0 14px}
.hero p.sub{max-width:760px;margin:0 auto 18px;text-align:center;color:var(--muted);font-size:clamp(16px,2.1vw,18px)}
.hero .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.badges{display:flex;gap:10px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.badge{font-size:12px;color:var(--muted)}

/* ---------------- FEATURES ---------------- */
.features{padding:36px 0}
.feature{padding:20px}
.feature h3{margin:0 0 6px}
.feature p{margin:0;color:var(--muted)}

/* ---------------- BLOG (Medium-like) ---------------- */
.section-title{font-size:22px;margin:0 0 12px}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
@media (max-width:960px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.blog-grid{grid-template-columns:1fr}}

.post-card{display:flex;flex-direction:column;height:100%;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow)}
.post-card .thumb img{width:100%;height:220px;object-fit:cover}
.post-card .body{padding:16px}
.post-card .meta{font-size:12px;color:var(--muted);margin-bottom:8px}
.post-card h3{font-size:18px;margin:0 0 8px}
.post-card p{font-size:14px;color:#111}

/* Staff Picks destaque */
.staff-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--gap)}
@media (max-width:960px){.staff-grid{grid-template-columns:1fr}}
.staff-large .thumb img{height:360px;object-fit:cover}
.staff-large h3{font-size:24px}

/* ---------------- SINGLE ---------------- */
.single-wrap{padding:40px 0}
.single-wrap .title{font-size:clamp(28px,4vw,44px);line-height:1.1;margin:0 0 8px}
.single-wrap .meta{color:var(--muted);margin-bottom:16px}
.single-wrap .featured{margin:20px 0}
.single-wrap .content{max-width:760px;margin:0 auto}
.single-wrap .content p{margin:14px 0;line-height:1.7;color:#1f2937}

/* ---------------- FORM (Apply) ---------------- */
.apply{padding:24px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.apply h2{margin:0 0 6px}
.apply p.note{margin:0 0 18px;color:var(--muted)}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (max-width:720px){.form-grid{grid-template-columns:1fr}}
.input, .textarea, .select{
  width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:#fff
}
.textarea{min-height:120px}
.help{font-size:12px;color:var(--muted)}
.notice{margin-top:12px;padding:10px;border-radius:10px;border:1px solid var(--border)}
.notice.ok{border-color:#c8ead7}
.notice.err{border-color:#f5c2c7}