/* main.css */
/* ================================
   Maple Focus • Main CSS
   ================================ */
@import url("/assets/css/header.css");
@import url("/assets/css/about.css");
@import url("/assets/css/main.css");


:root{
  --mf-maple: #cf5376;
  --mf-green: #5b8040;
  --mf-yellow:#cfac53;
  --mf-blue:  #5376cf;


}


.mf-logo-large{ width:180px; display:block; border-radius:18px; box-shadow:0 8px 26px rgba(0,0,0,.18) }

.mf-logo-small{ width:40px; display:block; border-radius:13px; box-shadow:0 8px 16px rgba(0,0,0,.18) }



/* ===== Home Split Hero (desktop: card left overlaps photo right) ===== */


.home-hero{
  background:#000;
  padding-top: var(--header-h);
}

.home-hero__inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad) clamp(24px,4vw,48px);
  min-height: calc(100vh - var(--header-h));
  display: grid;
  grid-template-columns: 1fr 1.15fr;         /* card | photo */
  gap: clamp(16px, 4vw, 36px);
  align-items: center;
}

.home-card{
  position: relative;
  z-index: 2;
  background:#fff; color:#111;
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,.22);
  padding: clamp(24px,4vw,56px);

  /* overlap a bit into the photo on large screens */
  margin-right: -6%;
}








/* === HERO: make the right image flush to the viewport edge === */
.home-hero{ overflow: hidden; } /* hide any bleed */

.home-hero__inner{
  /* keep left alignment with your site container, remove right padding */
  padding-right: 0 !important;
}

/* Full-bleed image, no rounded corners/shadow */
.home-photo{
  position: relative;
  z-index: 1;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: min(82vh, 820px);

  /* pull the figure so its RIGHT edge aligns with the viewport edge */
  width: 100vw;
  justify-self: end;
  margin-right: calc(-50vw + 50%);
}
.home-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Stronger overlap of the white card into the photo (optional) */
@media (min-width: 901px){
  .home-card{ margin-right: -10%; } /* was -6% */
}


/* --- Make the grid explicitly ordered --- */
.home-hero__inner{
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  grid-template-areas: "card photo";   /* desktop: card left, photo right */
}
.home-card{ grid-area: card; }
.home-photo{ grid-area: photo; }

/* --- Mobile: photo on top, card below --- */
@media (max-width: 900px){
  .home-hero__inner{
    grid-template-columns: 1fr;
    grid-template-areas:
      "photo"
      "card";
    padding: 0 var(--pad) clamp(24px,4vw,48px);
  }

  /* make the image behave like a normal block on mobile */
  .home-photo{
    width: 100% !important;
    margin-right: 0 !important;
    height: 56vh;                /* tweak as you like */
  }

  .home-card{
    margin: 16px 0 0 0;          /* clean stack; no overlap on mobile */
  }
}