/* ===== "Little things that matter" — masonry feature cards (Figma 7648-10563) ===== */

.things {
  padding: 32px 24px 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 72px;
}
.things__title {
  font-size: clamp(44px, 6.5vw, 96px);
  font-weight: var(--font-weight-black);
  color: var(--color-label-primary);
  line-height: 1.15;
  text-align: center;
  max-width: auto;
}

/* ---- 2-column masonry ---- */
.things-grid {
  display: flex;
  gap: 32px;
  width: 100%;
  max-width: 1216px;
}
.things-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ---- Cards ---- */
.thing-card {
  background: var(--accent-50);
  border-radius: 48px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 48px; /* header → media */
}
.thing-card--blue   { --accent-50: var(--color-blue-50);   --title-c: var(--color-blue-800);   --sub-c: var(--color-blue-950); }
.thing-card--pink   { --accent-50: var(--color-pink-50);   --title-c: var(--color-pink-800);   --sub-c: var(--color-pink-950); }
.thing-card--yellow { --accent-50: var(--color-yellow-50); --title-c: var(--color-yellow-800); --sub-c: var(--color-yellow-950); }
.thing-card--green  { --accent-50: var(--color-green-50);  --title-c: var(--color-green-800);  --sub-c: var(--color-green-950); }

.thing-head { display: flex; flex-direction: column; gap: 8px; }
.thing-title {
  font-size: clamp(28px, 3.2vw, 48px);
  font-weight: var(--font-weight-extrabold);
  color: var(--title-c);
  line-height: 1.15;
}
.thing-sub {
  font-size: clamp(16px, 1.6vw, 24px);
  font-weight: var(--font-weight-bold);
  color: var(--sub-c);
  line-height: 1.3;
}

/* ---- Video frames ----
   Each frame matches its video's native aspect ratio, so the pre-cropped
   videos are shown in full (never cropped). Tweak --media-ar per card if you
   swap a video (values are the uploaded W / H). */
.thing-card--blue   { --media-ar: 1290 / 646; }  /* review-purchase */
.thing-card--pink   { --media-ar: 1290 / 1046; } /* achievements */
.thing-card--yellow { --media-ar: 1290 / 1018; } /* note-prompts */
.thing-card--green  { --media-ar: 1290 / 726; }  /* widgets */

/* sticker-outline colour tweakable (the thin gray line around the white border) */
.thing-media {
  --sticker-outline: rgba(27, 20, 15, 0.25);
  aspect-ratio: var(--media-ar); /* frame fits the video — height follows width */
  border-radius: 32px;
  overflow: hidden;
  background: var(--color-white);
  /* "sticker" border: white border + thin gray outline around it */
  border: 6px solid var(--color-white);
  outline: 0.7px solid var(--sticker-outline);
}
.thing-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* frame matches the video's aspect, so nothing is cropped */
}


.things__more {
  font-size: clamp(28px, 3.6vw, 56px);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-label-primary);
  line-height: var(--line-height-m);
  text-align: center;
  margin: 0;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .things { gap: 24px; padding-bottom: 44px; }
  .things-grid { flex-direction: column; }
  .thing-card { border-radius: 36px; padding: 24px; gap: 28px; }
  /* frames keep each video's native aspect ratio on mobile too (no cropping) */
}