/* Review title covers (5 designs) - shared by home cards and the review page. */
.review-title-placeholder-wrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    flex: 1;
    display: flex;
    padding: 34px 13px 50px; /* top clears the rating tag, bottom clears the name overlay */
}

.review-title-placeholder {
    font-size: var(--fs-sm);
    font-weight: 800;
    line-height: 1.55;
    margin: 0;
    word-break: break-word;
    overflow-wrap: break-word;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── D0: Notebook — ruled paper, red margin line, washi tape, handwriting ── */
.rtb-d0 {
    background-color: #fdfbf4;
    background-image:
        linear-gradient(90deg, transparent 29px, rgba(214, 92, 104, 0.55) 29px, rgba(214, 92, 104, 0.55) 30px, transparent 30px),
        repeating-linear-gradient(180deg, transparent 0, transparent 25px, #cfdcec 25px, #cfdcec 26px);
}
.rtb-d0::before {
    content: '';
    position: absolute;
    z-index: 3;
    top: 10px;
    right: -16px; /* top-left is taken by the rating tag */
    width: 74px;
    height: 20px;
    background: rgba(221, 174, 182, 0.8);
    transform: rotate(38deg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    pointer-events: none;
}
.rtb-d0 .review-title-placeholder-wrapper {
    align-items: flex-start;
    padding: 31px 14px 50px 38px; /* 31px top puts each 26px line on a ruled line */
}
.rtb-d0 .review-title-placeholder {
    font-family: Caveat, 'STKaiti', 'KaiTi', cursive;
    font-weight: 700;
    font-size: 23px;
    line-height: 26px;
    color: #27406b;
    -webkit-line-clamp: 6;
}

/* ── D1: Chalkboard — wood frame, chalk dust, yellow chalk star ── */
.rtb-d1 {
    background-color: #2f4b3f;
    background-image:
        radial-gradient(120% 80% at 15% 20%, rgba(255, 255, 255, 0.09), transparent 60%),
        radial-gradient(90% 60% at 85% 85%, rgba(255, 255, 255, 0.06), transparent 60%);
    box-shadow: inset 0 0 0 6px #9a7550, inset 0 0 0 8px #6b4f34, inset 0 0 30px rgba(0, 0, 0, 0.35);
}
.rtb-d1::after {
    content: '\2606';
    position: absolute;
    z-index: 1;
    top: 14px;
    right: 18px;
    font-size: 26px;
    line-height: 1;
    color: rgba(255, 214, 102, 0.9);
    transform: rotate(-12deg);
    text-shadow: 0 0 1px rgba(255, 214, 102, 0.6);
    pointer-events: none;
}
.rtb-d1 .review-title-placeholder-wrapper {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 38px 20px 58px;
}
.rtb-d1 .review-title-placeholder-wrapper::after {
    content: '';
    flex: 0 0 auto;
    width: 44px;
    height: 3px;
    margin-top: 12px;
    border-radius: 2px;
    background: rgba(244, 241, 232, 0.55);
    transform: rotate(-2deg);
}
.rtb-d1 .review-title-placeholder {
    flex: 0 0 auto;
    text-align: center;
    color: #f3f0e6;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.01em;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.7), 0 0 8px rgba(255, 255, 255, 0.18);
}

/* ── D2: Editorial — deep blue, giant blush quote mark, serif at the bottom ── */
.rtb-d2 { background-color: #34505e; }
.rtb-d2::before {
    content: '\201C';
    position: absolute;
    z-index: 0;
    top: -22px;
    right: 8px;
    font-family: Fraunces, Georgia, serif;
    font-size: 170px;
    line-height: 1;
    color: #000;
    pointer-events: none;
}
.rtb-d2 .review-title-placeholder-wrapper {
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 34px 16px 60px;
}
.rtb-d2 .review-title-placeholder-wrapper::before {
    content: '';
    flex: 0 0 auto;
    width: 26px;
    height: 2px;
    margin-bottom: 12px;
    background: #000;
}
.rtb-d2 .review-title-placeholder {
    font-family: Fraunces, 'Noto Serif SC', 'Songti SC', 'SimSun', Georgia, serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.25;
    color: #fbf7f2;
}

/* ── D3: Parent chat — WhatsApp-style beige ground, tailed bubble + "typing" reply ── */
.rtb-d3 {
    background-color: #efeae2;
    background-image: radial-gradient(rgba(84, 72, 56, 0.12) 1px, transparent 1.6px);
    background-size: 14px 14px;
}
.rtb-d3 .review-title-placeholder-wrapper {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    padding: 38px 14px 58px;
}
.rtb-d3 .review-title-placeholder {
    width: auto;
    max-width: 100%;
    flex: 0 0 auto;
    padding: 9px 12px 0;
    border-bottom: 9px solid transparent; /* bottom spacing outside the clip box, so clamped lines don't peek through */
    border-radius: 0 10px 10px 10px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(11, 20, 26, 0.13);
    color: #111b21;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
}
.rtb-d3 .review-title-placeholder-wrapper::after {
    content: '\2022\2022\2022';
    align-self: flex-end;
    padding: 3px 12px 5px;
    border-radius: 10px 0 10px 10px;
    background: var(--blush-deep);
    color: #fff;
    font-size: 14px;
    letter-spacing: 3px;
    line-height: 1.2;
}

/* ── D4: Poster — soft butter ground, dusty-blue circle, heavy type at the bottom ── */
.rtb-d4 { background-color: #f6ecd4; }
.rtb-d4::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: -38px;
    right: -58px;
    width: 176px;
    height: 176px;
    border-radius: 50%;
    background: #b4c4da;
    pointer-events: none;
}
.rtb-d4 .review-title-placeholder-wrapper {
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 34px 14px 58px;
}
.rtb-d4 .review-title-placeholder-wrapper::before {
    content: '';
    flex: 0 0 auto;
    width: 36px;
    height: 4px;
    margin-bottom: 10px;
    background: #ddaeb6;
}
.rtb-d4 .review-title-placeholder {
    font-size: 23px;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #2f3a4a;
}