/* ========= Shelter Learniverse Homepage Micro CSS (v1.4) ========= */
/* Scope everything inside #sl-home-inline to avoid leaks */

#sl-home-inline {
  --brand: #0e8296;
  --bg: #f7fafb;
  --ink: #1f2d2f;
  --muted: #6b7a80;
  --shadow-3: 0 10px 24px rgba(0,0,0,.12);
  font-family: "Roboto Light","Roboto",Arial,Helvetica,sans-serif;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  box-sizing: border-box;
  /* Guard against teal/white box overflow on mobile */
  overflow-x: hidden;
}

/* -------- Containers -------- */
#sl-home-inline .container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 28px 16px;
  box-sizing: border-box;
}

/* -------- Cards & Tiles -------- */
#sl-home-inline .card {
  background: #fff;
  border: 1px solid #e8eef2;
  border-radius: 12px;
  box-shadow: var(--shadow-3);
  padding: 20px;
  box-sizing: border-box;
}

#sl-home-inline .tile {
  background: #fff;
  border: 1px solid #e8eef2;
  border-radius: 12px;
  box-shadow: 0 1px 8px rgba(13,30,55,.06);
  padding: 16px;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
#sl-home-inline .tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}

/* -------- Grids -------- */
#sl-home-inline .scs-grid,
#sl-home-inline .grid-3 {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 900px) {
  #sl-home-inline .scs-grid,
  #sl-home-inline .grid-3 {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
@media (max-width: 640px) {
  #sl-home-inline .scs-grid,
  #sl-home-inline .grid-3 {
    grid-template-columns: 1fr;
  }
}

/* -------- Headings -------- */
#sl-home-inline h1,
#sl-home-inline h2,
#sl-home-inline h3 {
  font-family: "Montserrat",Arial,Helvetica,sans-serif;
  margin: 0 0 8px;
  line-height: 1.25;
}

/* -------- Pill Buttons -------- */
#sl-home-inline a.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  border: 2px solid var(--brand);
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-decoration: none;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
/* remove special visited styling so pills never gray out */
#sl-home-inline a.pill.is-visited { }

/* make :visited look exactly like normal */
#sl-home-inline a.pill:visited {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

/* Keyboard focus visible */
#sl-home-inline a.pill:focus-visible,
#sl-home-inline button:focus-visible {
  outline: 2px solid #0e8296;
  outline-offset: 3px;
  border-radius: 12px;
}

/* -------- Reveal Motion -------- */
#sl-home-inline .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
#sl-home-inline .reveal.in {
  opacity: 1;
  transform: translateY(0);
}
/* === 2-column layout: feature the first tile full width, then two halves === */
@media (max-width: 900px) {
  #sl-home-inline .grid-3.grid-featured-first {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #sl-home-inline .grid-3.grid-featured-first > *:first-child {
    grid-column: 1 / -1; /* span both columns */
  }
}
/* --- HARD RESET: phone portrait â†’ 1 column, even for featured-first grids --- */
@media (max-width: 640px) {
  #sl-home-inline .grid-3,
  #sl-home-inline .scs-grid {
    grid-template-columns: 1fr !important;
  }
  /* first card should NOT span on 1-col */
  #sl-home-inline .grid-3.grid-featured-first > *:first-child {
    grid-column: auto !important;
  }
}
/* === HERO: phone portrait stacks image above text, and shrinks body text adding 100125 816 PM === */
@media (max-width: 430px) and (orientation: portrait) {
  /* Override inline 2-col hero grid */
  #sl-home-inline .hero .hero-inner {
    grid-template-columns: 1fr !important;
    row-gap: 12px;
    justify-items: center;
  }
  /* Image first (DOM order is already image â†’ card); keep it modest in size */
  #sl-home-inline .hero .hero-figure {
    order: 1;
    justify-self: center;
  }
  #sl-home-inline .hero .hero-figure figure {
    max-width: clamp(200px, 60vw, 320px);
  }
/* Phone portrait: center hero image and add a bit of right-side breathing room */
#sl-home-inline .hero .hero-figure { 
  justify-self: center !important; /* override inline justify-self:end; */
}
#sl-home-inline .hero .hero-figure figure {
  margin-right: 10px; /* small extra space on the right; tweak 8–12px to taste */
}

  /* Card second, full width */
  #sl-home-inline .hero .card {
    order: 2;
    width: 100%;
  }
  /* Make paragraph body text smaller than the subtitle inside the hero card */
  #sl-home-inline .hero .card p {
    font-size: 15px !important;
    line-height: 1.45 !important;
  }
}
/* ========== Maddie's section: responsive logo placement & sizing ========== */

/* Container: center logo+card vertically in the section */
#sl-home-inline .maddies .container {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Flex wrapper: horizontal row with comfy gap */
#sl-home-inline .maddies .maddies-flex {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
}

/* Logo column centers its image and adds left inset */
#sl-home-inline .maddies .logo-col {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: clamp(12px, 2vw, 32px);
}

/* Image fills the column (override any inline caps) */
#sl-home-inline .maddies .logo-col img {
  width: 100% !important;
  max-width: none !important;
  height: auto;
  display: block;
}

/* Desktop & up: side-by-side, no wrapping; set the logo column size */
@media (min-width: 1024px) {
  #sl-home-inline .maddies .maddies-flex {
    flex-wrap: nowrap; /* prevent logo from dropping under the card */
  }
  #sl-home-inline .maddies .logo-col {
    flex: 0 0 clamp(280px, 33vw, 480px) !important;
    padding-left: clamp(20px, 4vw, 48px);
  }
  #sl-home-inline .maddies .card {
    flex: 1 1 auto;
    align-self: center;
    position: relative;
  }
}

/* Tablet & below: stack logo above card, center both */
@media (max-width: 1023px) {
  #sl-home-inline .maddies .maddies-flex {
    flex-direction: column;
    align-items: center;
  }
  #sl-home-inline .maddies .logo-col {
    order: -1;
    padding-left: 0;
  }
  #sl-home-inline .maddies .logo-col img {
    width: 52vw !important;
    max-width: 300px !important;
    height: auto;
  }
  #sl-home-inline .maddies .card {
    align-self: stretch;
  }
}
