/* ========= 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: row with comfy gap (HTML inline gap is OK; this is the base) */
#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 on wide layouts */
#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;
}

/* ===== Stack up to and including iPad Pro widths (≤1366px) ===== */
@media (max-width: 1366px) {
  /* Stack and center the whole block */
  #sl-home-inline .maddies .maddies-flex {
    flex-direction: column;
    align-items: center !important;  /* beat any inline flex-start */
  }

  /* Tighter, viewport-aware top/bottom padding so it doesn't feel floaty */
  #sl-home-inline .maddies .container {
    padding-top: clamp(10px, 3.5vh, 24px) !important;
    padding-bottom: clamp(10px, 3.5vh, 24px) !important;
  }

  /* Logo above card, truly centered, shrink-wrap the column */
  #sl-home-inline .maddies .logo-col {
    order: -1;
    padding-left: 0;
    width: auto;
    max-width: 100%;
    display: flex;
    justify-content: center;
  }

  /* Larger logo when stacked (iPad Pro & smaller) */
  #sl-home-inline .maddies .logo-col img {
    width: clamp(260px, 60vw, 560px) !important;
    height: auto;
    margin: 0 auto;
  }

  /* Let the card fill the width under the logo */
  #sl-home-inline .maddies .card {
    align-self: stretch;
  }
}

/* ===== Desktop wider than iPad Pro (≥1367px) ===== */
@media (min-width: 1367px) {
  #sl-home-inline .maddies .maddies-flex {
    flex-wrap: nowrap !important;       /* prevent logo dropping under */
    align-items: center !important;      /* vertical centering */
  }

  /* Logo column size on wide screens; card takes the rest */
  #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;
  }
}
/* ========== Featured-first grid fixes (medium screens) ========== */

/* 1) Never crop the featured image when it spans full width at 2-up */
@media (max-width: 900px) and (min-width: 641px) {
  /* Make sure the first item (the featured one) truly spans full width */
  #sl-home-inline .grid-3.grid-featured-first > *:first-child {
    grid-column: 1 / -1 !important;
  }

  /* Image container should auto-size (no fixed height) */
  #sl-home-inline .grid-3.grid-featured-first > *:first-child .tile img,
  #sl-home-inline .grid-3.grid-featured-first > *:first-child .tile picture img {
    width: 100% !important;
    height: auto !important;          /* key: prevent vertical cropping */
    max-height: none !important;
    display: block;
    object-fit: contain !important;   /* avoid cutting off content */
  }

  /* If you have a figure/media wrapper with overflow/height, let it grow */
  #sl-home-inline .grid-3.grid-featured-first > *:first-child .tile figure,
  #sl-home-inline .grid-3.grid-featured-first > *:first-child .tile .media,
  #sl-home-inline .grid-3.grid-featured-first > *:first-child .tile .image-wrap {
    margin: 0;
    padding: 0;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;     /* stop “half image” look */
  }
}

/* 2) Add breathing room between image and heading in all tiles */
#sl-home-inline .tile img,
#sl-home-inline .tile picture img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: clamp(10px, 1.2vw, 16px);  /* space below image */
}

/* If the image sits inside a figure/media wrapper, give that bottom margin instead */
#sl-home-inline .tile figure,
#sl-home-inline .tile .media,
#sl-home-inline .tile .image-wrap {
  margin: 0 0 clamp(10px, 1.2vw, 16px) 0;
}
/* === Fix: featured-first card image should not crop at 2-up (641–900px) === */
@media (min-width: 641px) and (max-width: 900px) {
  /* Make sure the first (featured) card spans both columns */
  #sl-home-inline .grid-3.grid-featured-first > .tile:first-child {
    grid-column: 1 / -1 !important;
  }

  /* Let the media breathe: kill fixed height and cropping */
  #sl-home-inline .grid-3.grid-featured-first > .tile:first-child figure {
    height: auto !important;         /* was height: clamp(...) inline */
    max-height: none !important;
    overflow: visible !important;
    margin: 0 0 clamp(10px, 1.2vw, 16px) !important; /* space under image */
  }
  #sl-home-inline .grid-3.grid-featured-first > .tile:first-child figure > img {
    width: 100% !important;
    height: auto !important;          /* was height: 100% inline */
    object-fit: contain !important;   /* was cover inline */
    display: block;
    border-radius: inherit;
  }
}

/* Optional: keep a consistent gap under ALL tile images as a baseline */
#sl-home-inline .tile figure { 
  margin: 0 0 clamp(10px, 1.2vw, 16px);
}
#sl-home-inline .tile figure > img {
  display: block;
  width: 100%;
  height: auto;
}