/* Curriculum unit pages ==================================================
   Shared by /explore/ai2/ecobits, /explore/ai2/data_science_unit and
   /explore/ai2/IoT_unit (Oct 2026). Each page links this file at its top.

   One centred column, like the Teach page: a photo or picture across the
   top, the intro (optionally with a picture beside it), quick facts, then
   the unit's projects or modules and its materials.

   Building blocks (class names):
     .unit                  the page column
     .unit-hero             picture across the top, with optional caption
     .unit-side             small picture beside the intro (right on wide
                            screens, centred above the text on phones)
     .unit-lede             the first, larger paragraph
     .unit-facts            quick-fact tiles (Grades, Duration, ...)
     .unit-project          picture beside text, for a unit's projects
     .unit-cards            grid of cards (.unit-card), for modules
     .unit-pills            small fact pills at the bottom of a card;
                            __hw = needs hardware (orange),
                            __nohw = no extra hardware (green)
     .unit-step             small label above a project title
     .unit-figure           centred picture with caption (--wide: full width)
     .unit-note             boxed note
   ======================================================================== */

.unit {
  max-width: 880px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
  color: #33404d;
  font-size: 1.0625rem;
  line-height: 1.6;
}
.unit p { margin: 0 0 0.9rem; }
.unit a { color: #0e7590; }
.unit a:hover { color: #92267c; }
.unit img { max-width: 100%; height: auto; }

.unit h2 {
  clear: both;
  margin: 2.5rem 0 1rem;
  padding-top: 0.75rem;
  border-top: 3px solid #f88d34;
  color: #92267c;
  font-size: 1.5rem;
  font-weight: 600;
}
.unit h3 {
  margin: 0 0 0.5rem;
  color: #12181f;
  font-size: 1.25rem;
  font-weight: 600;
}

.unit figure { margin: 0; }
.unit figcaption {
  margin-top: 0.4rem;
  color: #5b6670;
  font-size: 0.95rem;
  font-style: italic;
  line-height: 1.45;
  text-align: center;
}

/* Picture across the top. */
.unit .unit-hero { margin-bottom: 1.75rem; }
.unit-hero img { display: block; width: 100%; }

/* Small picture beside the intro. */
.unit-side {
  display: block;
  width: 170px;
  margin: 0 auto 1rem;
}
.unit-side--wide { width: 220px; }
@media (min-width: 640px) {
  .unit-side {
    float: right;
    margin: 0 0 1rem 1.75rem;
  }
}
.unit-lede {
  color: #12181f;
  font-size: 1.2rem;
}

/* Quick facts. */
.unit-facts {
  clear: both;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.unit-facts li {
  margin: 0;
  padding: 0.8rem 1rem;
  border-left: 4px solid #a5cf47;
  border-radius: 8px;
  background: #f4f9e9;
  font-size: 1rem;
  line-height: 1.4;
}
.unit-facts strong {
  display: block;
  color: #4e6817;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Projects: picture beside the text on wide screens. */
.unit-project {
  display: grid;
  gap: 1rem 1.75rem;
  margin-bottom: 2rem;
}
@media (min-width: 720px) {
  .unit-project { grid-template-columns: 260px 1fr; align-items: start; }
}
.unit-project__media img { display: block; width: 100%; }
.unit-project__media .unit-narrow {
  width: 80%;
  margin: 0 auto;
}
.unit-step {
  display: inline-block;
  margin-bottom: 0.3rem;
  color: #92267c;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.unit ul { margin: 0 0 0.9rem; padding-left: 1.25rem; }
.unit li { margin-bottom: 0.3rem; }

/* Cards (modules, projects without pictures). */
.unit-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}
.unit-card {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.25rem 0.4rem;
  border: 1px solid #dfe3e7;
  border-radius: 12px;
  background: #fff;
}
.unit-card h3 { font-size: 1.15rem; line-height: 1.3; }
.unit-card h3 a { text-decoration: none; }
.unit-card h3 a:hover { text-decoration: underline; }
.unit-card p, .unit-card li { font-size: 1rem; }
.unit-card__phone {
  display: block;
  width: auto;
  height: 260px;
  margin: 0 auto 1rem;
}

/* Fact pills at the bottom of a card (same look as the Teach and
   Tutorials pages). */
.unit .unit-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: auto 0 0.9rem;
  padding: 0;
  list-style: none;
}
.unit .unit-pills li {
  margin: 0;
  padding: 0.15rem 0.7rem;
  border-radius: 999px;
  background: #eef1f4;
  color: #33404d;
  font-size: 0.85rem;
}
.unit .unit-pills li.unit-pills__hw { background: #fdeedf; color: #7a3d06; font-weight: 600; }
.unit .unit-pills li.unit-pills__nohw { background: #edf6dc; color: #4e6817; font-weight: 600; }

.unit .unit-figure { margin: 0 auto 2rem; max-width: 560px; }
.unit .unit-figure--wide { max-width: none; }

.unit-note {
  padding: 0.9rem 1.1rem;
  border: 1px solid #dfe3e7;
  border-radius: 10px;
  background: #fafbfc;
  font-size: 1rem;
}

/* Paper: keep pictures a sensible size and cards in one piece. */
@media print {
  .unit img { max-height: 3.2in; width: auto; }
  .unit-hero img { width: 100%; max-height: none; }
  .unit-project, .unit-card, .unit-facts li, .unit-figure { break-inside: avoid; }
}