/* ================================
   grid.css — Option 1 (minimal classes inside grid)
   Replaces .grid__* selectors with semantic tag-based selectors.
   ================================ */

:root{
  --grid-width: 100%;
  --grid-max: 1000px;
  --grid-gap: 16px;
  --grid-side-mobile: 25px;

  --box-pad: 20px;
  --card-img-pad: 25px;  /* 👈 only for the image box */

  --box-title-size: 1.4rem;
  --box-title-weight: 700;
  --box-title-line: 1.35;
  --box-title-color: #fff;

  --box-text-size: 0.95rem;
  --box-text-weight: 500;
  --box-text-line: 1.5;
  --box-text-color: #999;

  --box-accent: #CC1FA1;
}

/* ================================
   GRID CONTAINER
   ================================ */
.grid{
  width: var(--grid-width);
  max-width: var(--grid-max);
  margin: 40px auto 0;
  padding: 0;

  display: grid;
  gap: var(--grid-gap);
}

/* Basic column presets */
.grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ================================
   GRID BOX (default item)
   (3x1 intro grid, 2x1 info grid, FAQ grid)
   ================================ */

/* Default grid item */
.grid:not(.grid--cards) > article{
  padding: var(--box-pad);
  box-sizing: border-box;
  border-radius: 10px;
  background: #151515;
  text-align: center;
}

/* Titles (h3 inside grid items) */
.grid:not(.grid--cards) > article > h3{
  font-family: inherit;
  font-weight: var(--box-title-weight);
  font-size: var(--box-title-size);
  line-height: var(--box-title-line);
  color: var(--box-title-color);

  margin: 0 0 12px;
  padding: 10px 0 4px;

  display: inline-block;

  text-decoration: underline;
  text-decoration-color: var(--box-accent);
  text-decoration-thickness: 2px;
  text-underline-position: under;
  text-decoration-skip: ink;
}

/* Normal text paragraphs in non-card grids (intro + FAQ + info grid) */
.grid:not(.grid--cards) > article > p{
  font-family: inherit;
  font-weight: var(--box-text-weight);
  font-size: var(--box-text-size);
  line-height: var(--box-text-line);
  color: var(--box-text-color);

  margin: 0;
  padding: 0 15px 10px;

  text-align: justify;
}

/* Subtitle = first paragraph under title in 2x1 info grid */
.grid.grid--2:not(.grid--cards) > article > p:first-of-type{
  margin: 0 auto 14px;
  padding: 0;
  text-align: center;
}

/* IMPORTANT:
   Paragraph text = justified (your original look)
   Span text (inside lists) = NOT justified (prevents weird spacing)
*/
.grid:not(.grid--cards) > article span{
  font-family: inherit;
  font-weight: var(--box-text-weight);
  font-size: var(--box-text-size);
  line-height: var(--box-text-line);
  color: var(--box-text-color);

  margin: 0;
  padding: 0;

  text-align: left;
}

/* Lists inside normal grid boxes (2x1 info grid) */
.grid.grid--2:not(.grid--cards) > article ul{
  margin: 0;
  padding: 0 0 0 18px;
  text-align: left;
}

.grid.grid--2:not(.grid--cards) > article ul li{
  font-family: inherit;
  font-weight: var(--box-text-weight);
  font-size: var(--box-text-size);
  line-height: var(--box-text-line);
  color: var(--box-text-color);
}



/* Lists inside normal 3-column grid boxes (match the 3x1 paragraph padding) */
.grid.grid--3:not(.grid--cards) > article > ul{
  margin: 0;
  padding: 0 15px 10px;
  text-align: left;
}

.grid.grid--3:not(.grid--cards) > article > ul li{
  font-family: inherit;
  font-weight: var(--box-text-weight);
  font-size: var(--box-text-size);
  line-height: var(--box-text-line);
  color: var(--box-text-color);
}
/* ================================
   2x2 CARDS ("What you’ll learn inside" modules)
   ================================ */

.grid.grid--cards{
  max-width: 1000px;
  margin: 40px auto 0;
  color: #fff;
  text-align: left;
}

/* Card wrapper = article inside .grid.grid--cards */
.grid.grid--cards > article{
  padding: 0;
  background: #1b1b1b;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(18, 38, 63, 0.08);
  overflow: hidden;

  display: flex;
  flex-direction: column;
  min-height: 220px;
  text-align: left;
}

/* Card image wrapper */
.grid.grid--cards > article > figure{
  margin: 0;
  padding: var(--card-img-pad) var(--card-img-pad) 0;
  background: transparent;
  border-radius: 10px;
  overflow: hidden;
  box-sizing: border-box;

  aspect-ratio: 16 / 9;      /* ✅ replaces height:0 + padding-bottom */
}

/* Card image */
.grid.grid--cards > article > figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  transition: transform 0.35s ease;
}


/* Zoom on hover/focus */
.grid.grid--cards > article:hover figure img,
.grid.grid--cards > article:focus-within figure img{
  transform: scale(1.05);
}

/* Card body */
.grid.grid--cards > article > div{
  padding: calc(var(--box-pad) + 10px) calc(var(--box-pad) + 15px) calc(var(--box-pad) + 10px);
}

/* Card title (no underline) */
.grid.grid--cards > article > div > h3{
  font-family: inherit;
  font-weight: var(--box-title-weight);
  font-size: var(--box-title-size);
  line-height: var(--box-title-line);
  color: var(--box-title-color);

  display: block;
  text-decoration: none;
  padding: 0;
  margin: 0 0 10px;
}

/* Card text */
.grid.grid--cards > article > div > p{
  font-family: inherit;
  font-weight: var(--box-text-weight);
  font-size: var(--box-text-size);
  line-height: var(--box-text-line);
  color: var(--box-text-color);

  margin: 0;
  padding: 0;
  text-align: left;
}

/* Reduced motion: disable zoom animation */
@media (prefers-reduced-motion: reduce){
  .grid.grid--cards > article > figure img{
    transition: none;
  }

  .grid.grid--cards > article:hover figure img,
  .grid.grid--cards > article:focus-within figure img{
    transform: none;
  }
}

/* Cards stack ONLY at 600px (like before) */
@media (max-width: 600px){
  .grid.grid--cards{
    grid-template-columns: 1fr;
    width: auto;
    max-width: none;
    margin: 40px var(--grid-side-mobile) 0;
  }
}

/* ================================
   RESPONSIVE GRID
   ================================ */
@media (max-width: 768px){
  .grid{
    width: auto;
    max-width: none;
    margin: 0 var(--grid-side-mobile);
  }

  /* 3-column and 2-column grids collapse to single column */
  .grid--3{
    grid-template-columns: 1fr;
  }

  .grid.grid--2{
    grid-template-columns: 1fr;
  }
}




/* ======================================
   UG-LI — emoji lists
   ====================================== */

.ug-li {
  margin: 0;
  padding: 0;
}

.ug-li li {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}

/* Emoji bullet (override global span rule) */
.ug-li li .emoji {
  display: inline-block;
  font-size: 0.9em !important;      /* size control */
  margin-right: 0.5em !important;   /* space between emoji and text */
  line-height: 1;
  transform: translateY(0px);       /* tweak up/down for “middle” feel */
}