/* Care Journal: a photo in the hero and beside the ritual, one on the lead guide, and myths as struck-through
   rows. Photographs are licensed Pexels stock (credits in functions/care/index.js), not Ivari pieces. */
.c-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.c-hero figure { margin: 0; }
.c-hero img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 860px) { .c-hero { grid-template-columns: 1fr; } .c-hero img { aspect-ratio: 16 / 11; } }

.c-ritual { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.c-ritual figure { margin: 0; }
.c-ritual img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.c-ritual .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .c-ritual { grid-template-columns: 1fr; } .c-ritual img { aspect-ratio: 16 / 10; } }
@media (max-width: 520px) { .c-ritual .steps { grid-template-columns: 1fr; } }

.j-card.c-lead img { display: block; width: calc(100% + 2 * var(--jp, 0px)); height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 18px; }

.c-myths { margin-top: clamp(24px, 3vw, 36px); display: grid; }
.c-myths > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px clamp(20px, 4vw, 56px); padding: 22px 0; border-top: 1px solid var(--line); }
.c-myths > div:last-child { border-bottom: 1px solid var(--line); }
.c-myths p { margin: 0; }
.c-myths .m { color: var(--placeholder); font-size: var(--s-1); line-height: 1.35; }
.c-myths .m s { text-decoration-color: var(--rose-deep); text-decoration-thickness: 1px; }
.c-myths .t { color: var(--ink); }
@media (max-width: 760px) { .c-myths > div { grid-template-columns: 1fr; } }