/* ===========================
   Teacher’s Resources
   =========================== */
body { margin: 0; font-family: Arial, sans-serif; background:#fff; color:#000; }
.container-narrow { max-width: 1100px; margin: 0 auto; padding: 0 2rem; }

.tr-header { display:flex; align-items:center; }
.tr-title { margin: 0; padding: 2.25rem 0 1.25rem; font-size: 1.8rem; font-weight: 800; text-transform: uppercase; }
.tr-dot { display:inline-block; width:1.6rem; height:1.6rem; border-radius:50%; margin-left:.5rem; }
.tr-dot--red { background:#C14E42; }

.tr-rule { border:none; border-top:1px solid #cfcfcf; margin:0 0 1.25rem; }

.tr-split {
  display:grid;
  grid-template-columns: 1.05fr 1fr;  /* text / image */
  gap: 2rem;
  align-items: start;
  padding-bottom: 2rem;
}

/* Left column content */
.tr-greeting { margin: .25rem 0 1rem; color:#333; }
.tr-left p { line-height: 1.7; color:#222; }

.tr-bullets { list-style:none; padding-left: 0; margin: .5rem 0 1rem; }
.tr-bullets li {
  position: relative;
  padding-left: 1.15rem;
  margin: .5rem 0;
  line-height: 1.6;
}
.tr-bullets li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: .48rem; height: .48rem;
  background: #C14E42;
  border-radius: 50%;
}

/* CTA buttons */
.tr-ctas { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; }
.tr-cta {
  display:flex; align-items:center; justify-content: space-between;
  width: 100%;
  padding: .85rem 1rem;
  border: 2px solid #111;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: #111; text-decoration: none;
  background:#fff;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.tr-cta:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,.06); }
.tr-cta__icon {
  width: 34px; height: 34px;
  display: grid; place-items: center;
}

.tr-cta__icon img {
  width: 16px; height: auto;
  display: block;
}

/* color variants */
.tr-cta--light { background:#fff; }
.tr-cta--orange { background:#E3664F; color:#111; }
.tr-cta--teal { background:#11A9B3; color:#001a1c; }
.tr-cta--navy { background:#1B4C66; color:#fff; }

/* Right image */
.tr-right { margin: 0; }
.tr-right img { width: 100%; display:block; height:auto; object-fit: cover; }

/* Responsive */
@media (max-width: 1000px) {
  .tr-split { grid-template-columns: 1fr; }
  .tr-right { order: 2; }
}
@media (max-width: 640px) {
  .container-narrow { padding: 0 1.25rem; }
  .tr-cta__icon { width: 32px; height: 32px; font-size: 16px; }
}
 
.tr-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr; /* text / image */
  gap: 2rem;
  align-items: stretch; /* <-- stretch both columns to equal height */
  padding-bottom: 2rem;
}

.tr-right {
  margin: 0;
  display: flex; /* so child img can stretch */
}

.tr-right img {
  width: 100%;
  height: 100%;       /* <-- force equal height with left side */
  object-fit: cover;  /* <-- cover ensures proper crop */
  display: block;
}