/* Start custom CSS *//* ========================================================================== 
   Prepage: navigation, category chooser, and reduced footer
   ========================================================================== */
@scope (.mrkt-prepage) {
  :scope .e-div-block-base,
  .elementor :scope {
    padding: 0;
    min-width: 0;
    min-height: 0;
  }

  .elementor :scope {
    box-sizing: border-box; 

    min-height: calc(100svh - (var(--mrkt-small-footer-height)));
    display: flex;
    flex-direction: column;
    
    padding-inline: calc(var(--mrkt-section-padding-inline) / 4);
    padding-top: calc(var(--mrkt-header-height) + var(--mrkt-space-M));
    padding-bottom: calc(var(--mrkt-small-footer-height) + var(--mrkt-space-M));

    background-image: linear-gradient(
      to bottom in oklab,
      var(--mrkt-color-white),
      var(--mrkt-color-primary-50),
      var(--mrkt-color-primary-100)
    );
  }

  :scope .grid {
    display: grid;
    flex: 1; 
    min-height: 0; 
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, 1fr); 
    grid-template-areas:
      "edu edu med med"
      "edu edu kid baby";
    gap: var(--mrkt-space-M);
  }

  :scope :is([class*='tile--']) {
    --tile-accent: var(--mrkt-color-primary);
    --tile-overlay: var(--mrkt-color-primary-700);
    position: relative;
    isolation: isolate;
    min-width: 0;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: var(--mrkt-space-M);
    color: var(--mrkt-color-white);
    background-color: var(--tile-overlay);
    background-position: center;
    background-size: cover;
    border-radius: var(--mrkt-border-radius-base);
    box-shadow: var(--mrkt-shadow-S);
    min-height: 23rem; 
  }

  :scope :is([class*='tile--'])::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
      160deg,
      oklch(from var(--tile-accent) l c h / 0.42) 0%,
      oklch(from var(--tile-overlay) l c h / 0.76) 72%,
      oklch(from var(--mrkt-color-black) l c h / 0.82) 100%
    );
    transition: background-color var(--mrkt-transition-base);
  }

  :scope :is([class*='tile--'])::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: oklch(from var(--tile-accent) l c h / 0.28);
    opacity: 0;
    transition: opacity var(--mrkt-transition-base);
  }

  :scope :is([class*='tile--']):hover::after,
  :scope :is([class*='tile--']):focus-within::after {
    opacity: 1;
  }

  :scope .tile--edu {
    --tile-accent: var(--mrkt-color-accent-edu-500);
    --tile-overlay: var(--mrkt-color-accent-edu-900);
    grid-area: edu;
  }

  :scope .tile--med {
    --tile-accent: var(--mrkt-color-accent-med-500);
    --tile-overlay: var(--mrkt-color-accent-med-900);
    grid-area: med;
  }

  :scope .tile--kid,
  :scope .tile--baby {
    --tile-accent: var(--mrkt-color-accent-kid-500);
    --tile-overlay: var(--mrkt-color-accent-kid-900);
  }

  :scope .tile--kid {
    grid-area: kid;
  }

  :scope .tile--baby {
    grid-area: baby;
  }

  :scope .content {
    width: min(100%, 37rem);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mrkt-space-S);
  }

  :scope p {
    max-width: 65ch;
  }

  @media only screen and (max-width: 1600px) {
    .elementor :scope {
      min-height: calc(100svh - var(--mrkt-small-footer-height));
      height: auto;
    }

    :scope .grid {
      flex: 1;
      min-height: auto;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-template-areas:
        "edu edu edu"
        "med kid baby";
    }
  }

  @media only screen and (max-width: 767px) {
    .elementor :scope {
      min-height: auto;
      height: auto;
    }

    :scope .grid {
      flex: none;
      min-height: none;
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      grid-template-areas:
        "edu"
        "med"
        "kid"
        "baby";
      gap: var(--mrkt-space-S);
    }

    /* Allow stacked tiles to size according to their content. */
    :scope :is([class*='tile--']) {
      min-height: fit-content;
      padding: var(--mrkt-space-M);
    }

    :scope .tile--edu { 
      min-height: 32rem; 
    }
  }
}/* End custom CSS */