/* =====================================================================
   1571 — Custom Printing Formats hub (/custom-printing-formats). rp-UI.
   Loaded by information/information for the matching keyword. Builds on the
   shared rp-cof-* block system (rp-industry-builder.css) for tokens, hero, the
   FAQ accordion (.rp-acc) and the CTA. This file adds the format-card selectors,
   the revealed detail panels, the feature lists and the comparison tables.
   ===================================================================== */

/* ===== FORMAT CARDS (selectors) ===== */
.rp-cpf-cards-wrap { background:var(--cream); padding:56px 0; }
.rp-cpf-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:26px; }
.rp-cpf-card { display:flex; flex-direction:column; text-align:left; background:#fff; border:1.5px solid var(--line);
  border-radius:16px; overflow:hidden; padding:0 0 18px; cursor:pointer; font-family:inherit; color:inherit;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.rp-cpf-card:hover { transform:translateY(-4px); box-shadow:0 16px 34px rgba(28,28,28,.10); border-color:#dcd7cf; }
.rp-cpf-card.is-active { border-color:var(--red); box-shadow:0 14px 30px rgba(219,15,22,.14); }
.rp-cpf-card__media { display:block; aspect-ratio:4/3; background:#efeae1; overflow:hidden; }
.rp-cpf-card__media img { width:100%; height:100%; object-fit:cover; display:block; }
.rp-cpf-card__name { display:block; font-size:18px; font-weight:800; color:var(--ink); line-height:1.2; padding:16px 18px 0; }
.rp-cpf-card__purpose { display:block; font-size:13.5px; line-height:1.5; color:var(--muted); padding:8px 18px 0; }
.rp-cpf-card__useslbl { display:block; font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--red); padding:14px 18px 0; }
.rp-cpf-card__uses { display:block; font-size:12.5px; line-height:1.5; color:var(--muted); padding:4px 18px 0; flex:1 1 auto; }
.rp-cpf-card__cue { display:block; font-size:13px; font-weight:700; color:var(--red); padding:14px 18px 0; }
.rp-cpf-card.is-active .rp-cpf-card__cue { color:var(--red-dark); }

/* ===== DETAIL PANELS (revealed) ===== */
.rp-cpf-detail { background:#fff; padding:56px 0; }
.rp-cpf-panel[hidden] { display:none; }
.rp-cpf-panel { max-width:1000px; }
.rp-cpf-panel > .rp-cof-h2 { scroll-margin-top:20px; }
.rp-cpf-rte p { margin:0 0 14px; font-size:16px; line-height:1.65; color:var(--muted); }
.rp-cpf-rte p:first-of-type { color:var(--ink); font-size:17px; }
.rp-cpf-rte > :last-child { margin-bottom:0; }
.rp-cpf .rp-cpf-note { margin:0 0 12px; font-size:14.5px; line-height:1.55; color:var(--muted); font-style:italic; }

.rp-cpf-subhead { margin:30px 0 14px; font-size:19px; font-weight:800; line-height:1.2; letter-spacing:-.01em; color:var(--ink); }

.rp-cpf-actions { display:flex; flex-wrap:wrap; gap:12px; margin:22px 0 0; }
.rp-cpf-actions--foot { margin-top:30px; padding-top:24px; border-top:1px solid var(--line); }

/* feature / use lists — brand diamond bullets */
.rp-cpf-list { list-style:none; margin:0; padding:0; }
.rp-cpf-list li { position:relative; padding:0 0 11px 24px; font-size:15px; line-height:1.55; color:var(--ink); }
.rp-cpf-list li::before { content:""; position:absolute; left:0; top:8px; width:8px; height:8px; background:var(--red); transform:rotate(45deg); }
.rp-cpf-list--2col { columns:2; column-gap:40px; }
.rp-cpf-list--2col li { break-inside:avoid; }
.rp-cpf-cols2 { display:grid; grid-template-columns:1fr 1fr; gap:34px; }

/* ===== TABLES (per-format comparison + cross-format) ===== */
.rp-cpf-table-wrap { overflow-x:auto; margin:4px 0 0; -webkit-overflow-scrolling:touch; }
.rp-cpf-table { width:100%; border-collapse:collapse; font-size:14px; min-width:640px; }
.rp-cpf-table th, .rp-cpf-table td { text-align:left; vertical-align:top; padding:12px 14px; border-bottom:1px solid var(--line); line-height:1.5; }
.rp-cpf-table thead th { background:var(--ink); color:#fff; font-weight:700; font-size:13px; border-bottom:none; }
.rp-cpf-table thead th:first-child { border-top-left-radius:10px; }
.rp-cpf-table thead th:last-child { border-top-right-radius:10px; }
.rp-cpf-table tbody th { font-weight:700; color:var(--ink); background:var(--warm); width:20%; }
.rp-cpf-table tbody td { color:var(--muted); }
.rp-cpf-table tbody tr:last-child th, .rp-cpf-table tbody tr:last-child td { border-bottom:none; }

/* cross-format comparison lives in its own warm band */
.rp-cpf-compare { background:var(--warm); padding:56px 0; }
.rp-cpf-table--compare { min-width:860px; font-size:13.5px; }
.rp-cpf-table--compare thead th { font-size:12.5px; }
.rp-cpf-table--compare tbody th { width:16%; }
.rp-cpf-compare .rp-cpf-table-wrap { background:#fff; border:1px solid var(--line); border-radius:12px; }
.rp-cpf-compare .rp-cpf-table thead th:first-child,
.rp-cpf-compare .rp-cpf-table thead th:last-child { border-radius:0; }

/* ===== responsive ===== */
@media (max-width:960px){
  .rp-cpf-cards { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .rp-cpf-cards { grid-template-columns:1fr; }
  .rp-cpf-list--2col { columns:1; }
  .rp-cpf-cols2 { grid-template-columns:1fr; gap:8px; }
  .rp-cpf-actions .rp-cof-btn { flex:1 1 auto; }
}

/* 1586 — format cards now LINK to each format's own page (were toggle-tab buttons). */
a.rp-cpf-card { text-decoration: none; color: inherit; }
a.rp-cpf-card:hover, a.rp-cpf-card:focus { text-decoration: none; color: inherit; }
.rp-cpf-cards--links .rp-cpf-card__cue { color: var(--red); }
a.rp-cpf-card:hover .rp-cpf-card__cue { color: var(--red-dark); }

/* 1589 — gallery heading + testimonials brought over from /custom-flexible-packaging, RP-UI styling. */
.rp-cpf-gallery { padding: 28px 0 32px; }  /* 1711 — more top/bottom breathing room */
.rp-cpf-gallery .rp-cf-galhead { font-family:'Outfit',sans-serif; font-size:28px; font-weight:800; letter-spacing:-.01em; color:var(--ink); text-align:center; margin:0 0 22px; }

.rp-cpf-testimonials { padding: 48px 0 8px; margin-bottom: 56px; }
.rp-cpf-testimonials > .container > .rp-cof-h2 { text-align:center; margin:0 0 30px; }
/* hide the plugin's own heading + the view-all / add-testimonial buttons */
.rp-cpf-testimonials .testimonial-main h1,
.rp-cpf-testimonials .testimonial-main .view_all { display:none !important; }
.rp-cpf-testimonials .testimonial-main { background:none !important; padding:0; margin:0; }
/* owl didn't init here → force a clean responsive card grid (overrides owl-carousel's display:none) */
.rp-cpf-testimonials .testimonial1 { display:grid !important; grid-template-columns:repeat(3,1fr); gap:24px; opacity:1 !important; }
.rp-cpf-testimonials .testimonial1 > div { width:auto !important; margin:0 !important; padding:0 !important; float:none !important; }
/* card — forced with specificity + !important to beat the testimonial module's own .firstpart rules */
.rp-cpf-testimonials .testimonial1 .firstpart { box-sizing:border-box !important; background:#fff !important; border:1px solid #e4ded5 !important; border-radius:18px; padding:44px 34px 34px !important; margin:0 !important; box-shadow:0 18px 44px -30px rgba(28,28,28,.4); text-align:center; height:100%; display:flex; flex-direction:column; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.rp-cpf-testimonials .testimonial1 .firstpart:hover { transform:translateY(-4px); box-shadow:0 28px 56px -30px rgba(28,28,28,.5); border-color:#dcd6cc !important; }
.rp-cpf-testimonials .rating { margin:0 0 10px; }
.rp-cpf-testimonials .rating .fa-stack { width:1.5em; height:1.3em; line-height:1.3em; }
.rp-cpf-testimonials .rating .fa-star { color:var(--red); background:none; font-size:17px; }
.rp-cpf-testimonials .rating .fa-star-o { color:#e2ded8; font-size:17px; }
.rp-cpf-testimonials .rating .fa-star + .fa-star-o { display:none; }
.rp-cpf-testimonials .designation { color:var(--red) !important; font-family:'Outfit',sans-serif; font-size:14.5px; font-weight:700; letter-spacing:-.01em; margin-bottom:12px; }
.rp-cpf-testimonials .caption { flex:0 1 auto; position:relative; }
.rp-cpf-testimonials .caption::before { content:"\201C"; display:block; font-family:Georgia,'Times New Roman',serif; font-size:68px; line-height:.4; color:var(--red); opacity:.28; margin:14px 0 2px; }
.rp-cpf-testimonials .caption p { background:none !important; color:#33312f !important; font-family:'Outfit',sans-serif; font-size:16.5px; line-height:1.62; margin:0 0 8px;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:6; overflow:hidden; }
.rp-cpf-testimonials .name { color:var(--ink) !important; font-family:'Outfit',sans-serif; font-weight:700; font-size:15.5px; }
.rp-cpf-testimonials .date { color:#8f8a86 !important; font-size:12.5px; margin-top:2px; }
.rp-cpf-testimonials .image { margin-top:auto; }
.rp-cpf-testimonials .image img { display:block; width:auto; height:34px; max-height:none; max-width:none; margin:18px auto 0; border:0; border-radius:0; }
@media (max-width:980px){ .rp-cpf-testimonials .testimonial1 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .rp-cpf-testimonials .testimonial1 { grid-template-columns:1fr; } }

/* 1710 — Custom Printing Formats hero ("Custom printing" block, cpformats only via .rp-cpf--cp):
   both intro + body paragraphs share the muted colour and a consistent 18px (the 2nd paragraph
   was 16px/ink). Scoped so the shared packaging-formats hub hero is unaffected. */
.rp-cpf--cp .rp-cof-hero__rte p { font-size:18px; color:var(--muted); }

/* 1711 — Testimonials infinite marquee (JS adds .rp-cpf-marq to the track + .rp-marq-on to the
   viewport, and clones the card set once for a seamless loop). The grid rules above remain the
   no-JS fallback. Pauses on hover; soft edge fade. Card margin (not gap) keeps the -50% loop seamless. */
.rp-cpf-testimonials .testimonial-main.rp-marq-on { overflow:hidden; padding:16px 0 34px !important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%); }
.rp-cpf-testimonials .testimonial1.rp-cpf-marq { display:flex !important; flex-wrap:nowrap !important;
  width:max-content; grid-template-columns:none !important; gap:0 !important; align-items:stretch;
  animation-name:rpMarq; animation-timing-function:linear; animation-iteration-count:infinite;
  will-change:transform; }
.rp-cpf-testimonials .testimonial1.rp-cpf-marq:hover { animation-play-state:paused; }
.rp-cpf-testimonials .testimonial1.rp-cpf-marq > div { flex:0 0 340px !important; width:340px !important;
  margin:0 24px 0 0 !important; padding:0 !important; }
@keyframes rpMarq { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (max-width:620px){
  .rp-cpf-testimonials .testimonial1.rp-cpf-marq > div { flex-basis:300px !important; width:300px !important; margin-right:18px !important; }
}
@media (prefers-reduced-motion:reduce){
  .rp-cpf-testimonials .testimonial1.rp-cpf-marq { animation:none; }
}

/* 1713 — FAQ section now uses the shared rp-cof-faq / rp-acc accordion (identical to the format detail
   pages, e.g. /custom-printing-formats/stand-up-pouches). No cpformats-specific FAQ styling needed. */
/* 1713 — contact tabs nav fills the widened content width (the global .rp-cf-tabs__nav max-width:1060px
   otherwise leaves the two tab buttons narrower than the Calendly content on this block). */
#contact-block .rp-cf-tabs__nav { max-width: none; }
/* Contact block: widen the Calendly tabs so the inline widget renders its 2-column (calendar + time slots)
   side-by-side layout. The global `.rp-cf-tabs{max-width:1060px}` + content padding otherwise squeezes the
   widget below Calendly's ~975px two-column threshold, forcing the stacked layout. Scoped to this block. */
#contact-block .rp-cf-tabs { max-width: 1200px; }  /* iframe ends up ~1170px (>live 1140) so Calendly renders 2-column */