/**
 * MobileHeaven — Prémium főoldal
 *
 * Mivel a Blocksy oldalait a Gutenberg blokk-szerkesztővel építed,
 * ez a fájl "segéd-osztályokat" (utility class) ad, amiket bármelyik
 * blokkra rá tudsz húzni a szerkesztőben:
 * Blokk kijelölése → jobb oldali panel → "Speciális" → "További CSS-osztályok"
 *
 * Elérhető osztályok:
 *   mh-hero          → teljes szélességű, kiemelt nyitó szekció
 *   mh-section        → általános szekció, világosszürke háttérrel
 *   mh-section-white   → általános szekció, fehér háttérrel
 *   mh-card-row        → kártyás elrendezéshez konténer (pl. "Miért mi" dobozok)
 *   mh-card            → egyedi lekerekített, árnyékolt kártya
 *   mh-eyebrow          → kis, nagybetűs felirat kártyák/szekciók fölé
 *   mh-cta-button        → prémium, fekete, lekerekített gomb
 */

.mh-hero{
  padding:100px 24px;
  text-align:center;
  background:linear-gradient(180deg, #ffffff 0%, var(--mh-bg-soft) 100%);
}

.mh-hero h1{
  font-size:clamp(38px, 6vw, 68px);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.05;
  margin-bottom:20px;
  color:var(--mh-text);
}

.mh-hero p{
  font-size:19px;
  color:var(--mh-muted);
  max-width:600px;
  margin:0 auto 32px;
  line-height:1.6;
}

.mh-section{
  padding:80px 24px;
  background:var(--mh-bg-soft);
}

.mh-section-white{
  padding:80px 24px;
  background:#fff;
}

.mh-eyebrow{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--mh-muted);
  margin-bottom:12px;
}

.mh-card-row{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  max-width:1100px;
  margin:0 auto;
}

.mh-card{
  background:#fff;
  border:1px solid var(--mh-line);
  border-radius:var(--mh-radius-lg);
  padding:32px;
  box-shadow:var(--mh-shadow);
}

.mh-card:hover{
  box-shadow:var(--mh-shadow-hover);
  transform:translateY(-4px);
}

.mh-card h3{
  font-size:19px;
  font-weight:800;
  margin-bottom:10px;
}

.mh-card p{
  color:var(--mh-muted);
  font-size:15px;
  line-height:1.6;
}

.mh-cta-button,
.mh-cta-button.wp-block-button__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--mh-text) !important;
  color:#fff !important;
  border-radius:999px !important;
  padding:16px 34px !important;
  font-weight:700 !important;
  font-size:16px !important;
  box-shadow:0 10px 30px rgba(17,18,20,.18);
}
.mh-cta-button:hover{
  background:#000 !important;
  transform:translateY(-2px);
}

/* finom, visszafogott megjelenés-animáció a szekciókra görgetéskor,
   ha a téma/blokk támogatja az intersection alapú class-t (opcionális,
   JS nélkül statikus állapotban is jól néz ki) */
@media (prefers-reduced-motion: no-preference){
  .mh-card{
    animation:mh-fade-up .5s ease both;
  }
  @keyframes mh-fade-up{
    from{opacity:0; transform:translateY(14px)}
    to{opacity:1; transform:translateY(0)}
  }
}

@media (max-width: 768px){
  .mh-hero{padding:64px 20px}
  .mh-section, .mh-section-white{padding:48px 20px}
  .mh-card-row{grid-template-columns:1fr; gap:16px}
}