/* =========================================================
   ElectricLawnMower.net blocks - shared styles
   Loads in the editor AND on the frontend so both views match.
   Customizable colors/fonts/sizes come from CSS variables that
   each block sets inline from its attributes. Fallbacks keep the
   original design if a value is left unset.
   ========================================================= */

.elm-section{
  padding:74px 0;
  background:var(--elm-section-bg, #FFFFFF);
  font-family:var(--elm-text-font, 'Figtree', system-ui, sans-serif);
  color:var(--elm-text, #55665C);
  box-sizing:border-box;
}
.elm-section *{ box-sizing:border-box; }
.elm-wrap{ max-width:1140px; margin:0 auto; padding:0 22px; }

.elm-eyebrow{
  font-family:var(--elm-heading-font, 'Sora', sans-serif);
  font-weight:700; font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--elm-eyebrow, #1B7A43); margin:0 0 14px;
}
.elm-h{
  font-family:var(--elm-heading-font, 'Sora', sans-serif);
  color:var(--elm-heading, #16241C); line-height:1.15; letter-spacing:-.01em; margin:0;
}
.elm-p{
  font-family:var(--elm-text-font, 'Figtree', sans-serif);
  color:var(--elm-text, #55665C); font-size:var(--elm-text-size, 1.05rem); line-height:1.6; margin:0;
}
.elm-lead{ font-size:var(--elm-text-size, 1.12rem); color:var(--elm-text, #55665C); max-width:60ch; }

.elm-head{ max-width:64ch; margin-bottom:38px; }
.elm-head .elm-h{ font-size:var(--elm-heading-size, clamp(1.7rem,3vw,2.3rem)); font-weight:700; margin-bottom:12px; }

/* Buttons */
.elm-btn{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-family:var(--elm-heading-font, 'Sora', sans-serif); font-weight:600;
  font-size:var(--elm-btn-fs, 16px);
  padding:var(--elm-btn-py, 14px) var(--elm-btn-px, 24px);
  border-radius:10px; border:1.5px solid transparent; cursor:pointer;
  transition:.18s ease;
  background:var(--elm-btn-bg, #1B7A43); color:var(--elm-btn-text, #FFFFFF);
}
.elm-btn:hover{ background:var(--elm-btn-hover, #12592F); color:var(--elm-btn-text, #FFFFFF); transform:translateY(-1px); }
.elm-btn--ghost{
  background:#fff; color:var(--elm-btn-bg, #1B7A43); border-color:#E3EAE5;
}
.elm-btn--ghost:hover{ background:var(--elm-btn-ghost-hover, #E8F4EC); color:var(--elm-btn-bg, #1B7A43); border-color:var(--elm-btn-bg, #1B7A43); transform:translateY(-1px); }
.elm-btn--light{ background:#fff; color:#0E2E1E; }
.elm-btn--light:hover{ background:#E8F4EC; color:#0E2E1E; }

/* ---------- HERO ---------- */
.elm-hero{ overflow:hidden; padding-top:70px; padding-bottom:64px; }
.elm-hero__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:52px; align-items:center; }
.elm-hero__h1{ font-size:var(--elm-heading-size, clamp(2.1rem,4.4vw,3.4rem)); font-weight:800; margin:0 0 18px; }
.elm-hero__h1 .hl{ color:var(--elm-eyebrow, #1B7A43); }
.elm-hero__p{ font-size:var(--elm-text-size, 1.16rem); max-width:52ch; margin:0 0 26px; }
.elm-hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:26px; }
.elm-hero__meta{ display:flex; flex-wrap:wrap; gap:18px 26px; font-size:.92rem; color:var(--elm-text, #55665C); }
.elm-hero__meta span{ display:inline-flex; align-items:center; gap:7px; }
.elm-hero__meta svg{ color:var(--elm-eyebrow, #1B7A43); }

.elm-mowcard{
  position:relative; border-radius:14px; overflow:hidden;
  box-shadow:0 2px 6px rgba(14,46,30,.06),0 16px 40px rgba(14,46,30,.10);
  border:1px solid #E3EAE5; aspect-ratio:4/3.4; background:#0E2E1E; min-height:300px;
}
.elm-mowcard .stripes{ position:absolute; inset:0; width:100%; height:100%; }
.elm-mowcard .glass{
  position:absolute; left:16px; right:16px; bottom:16px; background:rgba(255,255,255,.94);
  border-radius:12px; padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.18); text-decoration:none;
}
.elm-mowcard .glass .title{ font-family:'Sora',sans-serif; font-weight:700; font-size:1rem; color:#16241C; }
.elm-mowcard .glass small{ color:#55665C; font-size:.82rem; }
.elm-mowcard .glass .score{ font-family:'Sora',sans-serif; font-weight:800; font-size:1.6rem; color:#1B7A43; line-height:1; }
.elm-mowcard .badge{
  position:absolute; top:16px; left:16px; background:#F2A900; color:#3a2600;
  font-family:'Sora',sans-serif; font-weight:700; font-size:.8rem; padding:6px 12px; border-radius:999px; z-index:2;
}

/* ---------- TRUST BAR ---------- */
.elm-trust{ padding:0; }
.elm-trust .elm-wrap{ border-top:1px solid #E3EAE5; border-bottom:1px solid #E3EAE5; }
.elm-trust__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; padding:26px 0; }
.elm-trust__item{ display:flex; gap:12px; align-items:flex-start; }
.elm-trust__item .ic{ flex:0 0 auto; width:38px; height:38px; border-radius:9px; background:#E8F4EC; color:var(--elm-eyebrow,#1B7A43); display:grid; place-items:center; }
.elm-trust__item strong{ font-family:var(--elm-heading-font,'Sora',sans-serif); display:block; font-size:.98rem; color:var(--elm-heading,#16241C); }
.elm-trust__item span{ font-size:.86rem; color:var(--elm-text,#55665C); }

/* ---------- QUICK ANSWER ---------- */
.elm-answer{
  background:var(--elm-answer-bg, #E8F4EC); border:1px solid #cfe6d6;
  border-left:5px solid var(--elm-eyebrow,#1B7A43); border-radius:14px; padding:28px 30px;
}
.elm-answer .elm-h{ font-size:var(--elm-heading-size,1.5rem); margin-bottom:10px; }
.elm-answer .elm-p{ color:var(--elm-text,#16241C); max-width:75ch; }
.elm-answer .elm-p + .elm-p{ margin-top:12px; }

/* ---------- TOP PICKS ---------- */
.elm-picks{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.elm-card{
  border:1px solid #E3EAE5; border-radius:14px; background:#fff; padding:22px;
  display:flex; flex-direction:column; box-shadow:0 1px 2px rgba(14,46,30,.04),0 8px 24px rgba(14,46,30,.06);
  transition:.18s ease;
}
.elm-card:hover{ box-shadow:0 2px 6px rgba(14,46,30,.06),0 16px 40px rgba(14,46,30,.10); transform:translateY(-2px); }
.elm-card__top{ display:flex; gap:18px; align-items:center; margin-bottom:16px; }
.elm-card__thumb{
  flex:0 0 auto; width:96px; height:96px; border-radius:12px; border:1px solid #E3EAE5;
  display:grid; place-items:center; background:#F4FAF6; color:var(--elm-eyebrow,#1B7A43); overflow:hidden;
}
.elm-card__thumb img{ width:100%; height:100%; object-fit:cover; }
.elm-tag{
  display:inline-block; font-family:'Sora',sans-serif; font-weight:700; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.06em; color:#12592F; background:#E8F4EC;
  padding:5px 11px; border-radius:999px; margin-bottom:8px;
}
.elm-card__h3{ font-family:var(--elm-heading-font,'Sora',sans-serif); color:var(--elm-heading,#16241C); font-size:1.18rem; margin:0; }
.elm-stars{ display:flex; align-items:center; gap:8px; margin:8px 0 2px; }
.elm-stars .s{ color:#F2A900; letter-spacing:1px; font-size:1rem; }
.elm-stars .num{ font-family:'Sora',sans-serif; font-weight:700; font-size:.9rem; color:var(--elm-heading,#16241C); }
.elm-specs{ list-style:none; margin:6px 0 16px; padding:0; }
.elm-specs li{ display:flex; gap:9px; font-size:.95rem; padding:5px 0; color:var(--elm-text,#55665C); border-bottom:1px dashed #E3EAE5; }
.elm-specs li:last-child{ border-bottom:0; }
.elm-specs b{ color:var(--elm-heading,#16241C); font-weight:600; min-width:96px; }
.elm-card .elm-btn{ width:100%; justify-content:center; margin-top:auto; }

/* ---------- COMPARE TABLE ---------- */
.elm-tablewrap{ overflow-x:auto; border:1px solid #E3EAE5; border-radius:14px; }
.elm-table{ width:100%; border-collapse:collapse; min-width:560px; background:#fff; }
.elm-table th,.elm-table td{ text-align:left; padding:15px 18px; border-bottom:1px solid #E3EAE5; font-size:.98rem; color:var(--elm-text,#55665C); }
.elm-table thead th{ background:var(--elm-table-head, #0E2E1E); color:#fff; font-family:'Sora',sans-serif; font-weight:600; }
.elm-table tbody tr:last-child td{ border-bottom:0; }
.elm-table tbody tr:nth-child(even){ background:#F4FAF6; }
.elm-table td b{ font-weight:600; color:var(--elm-heading,#16241C); }

/* ---------- BUYING GUIDE ---------- */
.elm-guide{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.elm-gcard{ background:#fff; border:1px solid #E3EAE5; border-radius:14px; padding:26px; }
.elm-gcard .ic{ width:44px; height:44px; border-radius:11px; background:#E8F4EC; color:var(--elm-eyebrow,#1B7A43); display:grid; place-items:center; margin-bottom:16px; }
.elm-gcard h3{ font-family:var(--elm-heading-font,'Sora',sans-serif); color:var(--elm-heading,#16241C); font-size:1.2rem; margin:0 0 10px; }
.elm-gcard p{ font-size:.98rem; color:var(--elm-text,#55665C); margin:0; }
.elm-gcard .best{ margin-top:14px; font-size:.9rem; }
.elm-gcard .best b{ color:var(--elm-heading,#16241C); }

/* ---------- BENEFITS ---------- */
.elm-benefits{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.elm-bene .ic{ width:42px; height:42px; border-radius:11px; background:var(--elm-eyebrow,#1B7A43); color:#fff; display:grid; place-items:center; margin-bottom:14px; }
.elm-bene h3{ font-family:var(--elm-heading-font,'Sora',sans-serif); color:var(--elm-heading,#16241C); font-size:1.05rem; margin:0 0 7px; }
.elm-bene p{ font-size:.92rem; color:var(--elm-text,#55665C); margin:0; }

/* ---------- CTA BAND ---------- */
.elm-cta{ background:var(--elm-cta-bg, #0E2E1E); color:#fff; border-radius:14px; padding:46px; text-align:center; position:relative; overflow:hidden; }
.elm-cta .stripes{ position:absolute; inset:0; opacity:.22; width:100%; height:100%; }
.elm-cta .inner{ position:relative; z-index:1; }
.elm-cta h2{ font-family:var(--elm-heading-font,'Sora',sans-serif); color:#fff; font-size:var(--elm-heading-size, clamp(1.6rem,3vw,2.2rem)); margin:0 0 12px; }
.elm-cta p{ color:#cfe0d5; max-width:56ch; margin:0 auto 24px; }

/* ---------- FAQ ---------- */
.elm-faq{ max-width:840px; margin:0 auto; }
.elm-faq details{ border:1px solid #E3EAE5; border-radius:10px; background:#fff; margin-bottom:12px; overflow:hidden; }
.elm-faq summary{
  list-style:none; cursor:pointer; padding:18px 22px; font-family:var(--elm-heading-font,'Sora',sans-serif);
  font-weight:600; font-size:1.05rem; color:var(--elm-heading,#16241C);
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.elm-faq summary::-webkit-details-marker{ display:none; }
.elm-faq summary .plus{ flex:0 0 auto; width:24px; height:24px; border-radius:6px; background:#E8F4EC; color:var(--elm-eyebrow,#1B7A43); display:grid; place-items:center; font-weight:700; transition:.2s; }
.elm-faq details[open] summary .plus{ transform:rotate(45deg); }
.elm-faq .body{ padding:0 22px 20px; color:var(--elm-text,#55665C); }

/* editor: mimic accordion open look since details are static there */
.elm-faq .elm-faq-editrow{ border:1px solid #E3EAE5; border-radius:10px; background:#fff; margin-bottom:12px; padding:16px 20px; }
.elm-faq .elm-faq-editrow .q{ font-family:'Sora',sans-serif; font-weight:600; color:#16241C; }

/* ---------- AUTHOR / EEAT ---------- */
.elm-author{ display:flex; gap:18px; align-items:center; background:#fff; border:1px solid #E3EAE5; border-radius:14px; padding:22px 24px; }
.elm-author .pfp{ flex:0 0 auto; width:58px; height:58px; border-radius:50%; background:var(--elm-eyebrow,#1B7A43); color:#fff; display:grid; place-items:center; font-family:'Sora',sans-serif; font-weight:700; font-size:1.3rem; overflow:hidden; }
.elm-author .pfp img{ width:100%; height:100%; object-fit:cover; }
.elm-author p{ font-size:.95rem; color:var(--elm-text,#55665C); margin:0; }
.elm-author strong{ color:var(--elm-heading,#16241C); font-family:var(--elm-heading-font,'Sora',sans-serif); }

/* ---------- RESPONSIVE ---------- */
@media (max-width:960px){
  .elm-hero__grid{ grid-template-columns:1fr; gap:34px; }
  .elm-trust__grid{ grid-template-columns:repeat(2,1fr); }
  .elm-picks{ grid-template-columns:1fr; }
  .elm-guide{ grid-template-columns:1fr; }
  .elm-benefits{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .elm-section{ padding:52px 0; }
  .elm-trust__grid{ grid-template-columns:1fr; }
  .elm-benefits{ grid-template-columns:1fr; }
  .elm-cta{ padding:34px 22px; }
}
@media (prefers-reduced-motion:reduce){
  .elm-section *{ transition:none !important; }
}