/* MGM Landing — CSS (v1.2.0) */
/* Scope everything to .mgm-root to avoid touching other pages. */

.mgm-root{
  /* Full-bleed even inside constrained themes */
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);

  --mgm-gap:clamp(18px, 2.2vw, 34px);
  --mgm-radius:26px;
  --mgm-shadow:0 18px 45px rgba(0,0,0,.12);
  --mgm-bg:#f6efe8;
  --mgm-stage-h:clamp(620px, 78vh, 900px);

  background:var(--mgm-bg);
  padding:clamp(18px, 2.6vw, 44px);
  box-sizing:border-box;
  position:relative;
  overflow:clip; /* prevents tiny scrollbars in some themes */
}

/* Prevent theme defaults from adding random spacing inside */
.mgm-root *{ box-sizing:border-box; }
.mgm-root figure{ margin:0; }
.mgm-root img{ display:block; width:100%; height:100%; object-fit:cover; }

/* Stage + grid */
.mgm-stage{
  width:min(1280px, 100%);
  margin:0 auto;
}

.mgm-grid{
  display:grid;
  grid-template-columns: 0.95fr 1.25fr 0.95fr;
  gap:var(--mgm-gap);
  align-items:stretch;
}

/* Columns have identical height on desktop (PPT look) */
.mgm-left, .mgm-center, .mgm-right{
  height:var(--mgm-stage-h);
}

/* Left / right stacks */
.mgm-left, .mgm-right{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:var(--mgm-gap);
  min-height:0;
}

/* Media cards */
.mgm-media{
  border-radius:var(--mgm-radius);
  overflow:hidden;
  box-shadow:var(--mgm-shadow);
  background:#fff0; /* transparent */
}

/* Fine-tune the “PPT” proportions */
.mgm-left .mgm-apiculture{ flex:0 0 34%; }
.mgm-left .mgm-bees{ flex:1 1 auto; }

.mgm-right .mgm-flower{ flex:1 1 auto; }
.mgm-right .mgm-card{ flex:0 0 28%; }

/* Business card should not be cropped */
.mgm-card img{ object-fit:contain; background:#fff; }

/* Center panel */
.mgm-center{
  position:relative;
  border-radius:var(--mgm-radius);
  overflow:hidden;
  box-shadow:var(--mgm-shadow);
  background:transparent;
  min-height:0;
}

.mgm-center-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center bottom;
  background-repeat:no-repeat;
  transform:scale(1.02);
}

.mgm-center-content{
  position:relative;
  height:100%;
  padding:clamp(18px, 2.0vw, 28px);
  display:flex;
  flex-direction:column;
  gap:clamp(12px, 1.4vw, 18px);
}

/* Top row */
.mgm-topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.mgm-title{
  margin:0;
  font-weight:800;
  line-height:1.05;
  font-size:clamp(28px, 2.7vw, 44px);
  letter-spacing:-0.02em;
  color:#121212;
  background:rgba(255,255,255,.55);
  border-radius:18px;
  padding:10px 14px;
  display:inline-block;
}

.mgm-cta{
  text-decoration:none;
  color:#121212;
  font-weight:700;
  font-size:clamp(14px, 1.3vw, 18px);
  background:rgba(255,255,255,.75);
  border-radius:999px;
  padding:10px 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}

.mgm-cta:hover{ background:rgba(255,255,255,.90); }

/* Text block */
.mgm-text{
  background:rgba(255,255,255,.40);
  border-radius:18px;
  padding:clamp(14px, 1.6vw, 18px);
  color:#1b1b1b;
  font-size:clamp(13px, 1.2vw, 16px);
  line-height:1.45;
  max-width: 92%;
}

.mgm-text p{ margin:0 0 10px 0; }
.mgm-text p:last-child{ margin-bottom:0; }

/* Email pill anchored at bottom like the PPT */
.mgm-email{
  margin-top:auto;
  width:fit-content;
  background:rgba(255,255,255,.75);
  border-radius:999px;
  padding:10px 14px;
  font-weight:600;
  color:#1b1b1b;
}

.mgm-email a{ color:inherit; font-weight:800; text-decoration:underline; }

/* Splash (optional) */
.mgm-splash{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--mgm-bg);
  transition:opacity .6s ease;
}

.mgm-splash-card{
  width:min(360px, 70vw);
  aspect-ratio:1/1;
  border-radius:22px;
  overflow:hidden;
  box-shadow:var(--mgm-shadow);
}

.mgm-root.mgm-splash-done .mgm-splash{
  opacity:0;
  pointer-events:none;
}

@media (max-width: 1024px){
  .mgm-root{
    padding:24px;
    --mgm-stage-h:auto;
    overflow:visible;
  }

  .mgm-grid{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "center center"
      "left right";
  }

  .mgm-center{ grid-area:center; height:clamp(520px, 68vh, 760px); }
  .mgm-left{ grid-area:left; height:auto; }
  .mgm-right{ grid-area:right; height:auto; }

  .mgm-left .mgm-apiculture,
  .mgm-left .mgm-bees,
  .mgm-right .mgm-flower,
  .mgm-right .mgm-card{
    flex:none;
  }

  .mgm-left .mgm-media,
  .mgm-right .mgm-media{
    height:auto;
    aspect-ratio:4/3;
  }

  .mgm-right .mgm-card{ aspect-ratio:3/1; }
}

@media (max-width: 640px){
  .mgm-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "center"
      "left"
      "right";
  }

  .mgm-center{ height:clamp(520px, 74vh, 820px); }
  .mgm-left, .mgm-right{ gap:18px; }
}