/* DRS 88: responsive image+text and testimonial reveal (VPS patch v1.0).
   Loaded last in public layout; leaves existing CMS and inventory logic unchanged. */

/* Existing CMS Image + Text placeholders must not force a grid track wider
   than the phone viewport. The screenshot showed "DRS88" clipped at the edge. */
.drs-image-text,
.drs-image-text > *,
.drs-image-frame,
.drs-image-empty { min-width:0; }
.drs-image-frame { max-width:100%; }
.drs-image-empty { box-sizing:border-box; width:100%; max-width:100%; overflow:hidden; text-align:center; }
.drs-image-empty > span { max-width:100%; line-height:1.12; }
.drs-image-empty > small { max-width:100%; text-align:center; overflow-wrap:anywhere; }

@media (max-width:800px) {
  .drs-image-text { grid-template-columns:minmax(0,1fr); gap:24px; }
  .drs-image-text > * { max-width:100%; }
  .drs-image-frame { width:100%; margin:0; min-height:0; overflow:hidden; }
  .drs-image-frame > img { display:block; width:100%; max-width:100%; height:auto; }
  .drs-image-empty {
    width:100%; min-height:0; aspect-ratio:5/4;
    padding:18px 16px; gap:10px;
  }
  .drs-image-empty > span {
    display:block; max-width:100%; flex:0 1 auto;
    font-size:clamp(1.65rem,8.5vw,3.15rem);
    letter-spacing:-.065em;
    white-space:nowrap; text-align:center;
  }
  .drs-image-empty > small {
    display:block; max-width:100%;
    font-size:clamp(.58rem,2.2vw,.75rem);
    line-height:1.5; letter-spacing:.09em;
    white-space:normal;
  }
  .drs-image-frame figcaption { max-width:100%; overflow-wrap:anywhere; }
  .drs-rich, .drs-image-text h2, .drs-image-text p { overflow-wrap:anywhere; }
  .drs-rich img, .drs-rich video, .drs-rich iframe { max-width:100%; height:auto; }
}
@media (max-width:380px) {
  .drs-image-empty { padding:12px 10px; }
  .drs-image-empty > span { font-size:clamp(1.55rem,8vw,2.1rem); }
  .drs-image-empty > small { letter-spacing:.045em; }
}

/* Approved testimonials: gentle entry and proper quotation marks.
   Decorations do not alter stored content or expose private fields. */
.drs-testimonial-card {
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:18px;
  border-color:#dce5f1;
  box-shadow:0 12px 34px rgba(8,27,65,.07);
  transition:box-shadow .28s ease,border-color .28s ease,transform .5s cubic-bezier(.2,.72,.22,1),opacity .5s ease;
}
.drs-testimonial-card::before {
  content:"\201C";
  position:absolute; top:4px; right:17px;
  color:rgba(230,0,32,.11);
  font:700 6.5rem/.9 Georgia,serif;
  pointer-events:none; z-index:-1;
}
.drs-testimonial-card blockquote { position:relative; padding:0 4px 0 13px; border-left:3px solid rgba(230,0,32,.22); }
.drs-testimonial-card blockquote::before {
  content:"\201C"; color:#d92041;
  font:700 2rem/.6 Georgia,serif;
  display:inline-block; vertical-align:-.3em; margin-right:5px;
}
.drs-testimonial-card blockquote::after {
  content:"\201D"; color:#d92041;
  font:700 1.6rem/.6 Georgia,serif;
  display:inline-block; vertical-align:-.25em; margin-left:4px;
}
@media(hover:hover) and (pointer:fine) {
  .drs-testimonial-card:hover { transform:translateY(-4px);border-color:#b9cbe4;box-shadow:0 20px 42px rgba(8,27,65,.10); }
}
.drs-testimonial-empty { position:relative; overflow:hidden; padding:28px 30px; }
.drs-testimonial-empty::before {
  content:"\201C";display:block;color:#d71b3b;font:700 3.6rem/.6 Georgia,serif;
  margin:10px 0 16px;opacity:.65;
}
/* JS adds the pending class only when IntersectionObserver is supported.
   Without JS or with reduced-motion, all reviews remain visible. */
.drs-testimonial-card.drs88-reveal-pending,
.drs-testimonial-empty.drs88-reveal-pending { opacity:0; transform:translateY(20px); }
.drs-testimonial-card.drs88-reveal-visible,
.drs-testimonial-empty.drs88-reveal-visible {
  opacity:1;transform:translateY(0);
  transition-delay:var(--drs88-reveal-delay,0ms);
}
@media (max-width:760px) {
  .drs-testimonial-card { padding:22px 20px; }
  .drs-testimonial-card blockquote { font-size:14px; }
  .drs-testimonials-grid { grid-template-columns:minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .drs-testimonial-card, .drs-testimonial-empty {
    opacity:1 !important;transform:none !important;transition:none !important;
  }
}