/* =====================================================================
   1414 — Home Page "Custom-Printed Packaging". Configurable module
   (rp_customprint): deep-red rp_hero-style panel on the left (eyebrow,
   headline, sub-text, white + outline CTAs, 4 stats, lead-time note) and
   a 2x2 grid of four product images on the right.
   Loaded by the catalog controller via addStyle().
   ===================================================================== */
.rp-cprint {
  --red:#c00c14; --red-mid:#8f0a10; --red-deep:#720a0d;
  --white:#fff; --soft:rgba(255,255,255,.9); --dim:rgba(255,255,255,.78);
  --line:rgba(255,255,255,.26); --ink:#a30810;
  font-family:'Outfit',sans-serif; margin:26px 0; color:var(--white);
  border-radius:14px; overflow:hidden;
  background:linear-gradient(152deg,var(--red) 0%, var(--red-mid) 56%, var(--red-deep) 100%);
}
.rp-cprint * { box-sizing:border-box; }

.rp-cprint__inner { display:grid; grid-template-columns:47fr 53fr; align-items:stretch; gap:0; }

/* ---- left panel ---- */
.rp-cprint__panel { display:flex; flex-direction:column; min-width:0; padding:50px 48px; }

.rp-cprint__eyebrow { font-size:13px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--soft); margin:0 0 18px; }
.rp-cprint__title { margin:0 0 18px; font-size:clamp(30px,3.3vw,46px); font-weight:800; line-height:1.04; letter-spacing:-.02em; color:#fff; }
.rp-cprint__subtext { margin:0 0 28px; font-size:17px; line-height:1.55; color:var(--soft); max-width:46ch; }

/* actions */
.rp-cprint__actions { display:flex; flex-wrap:wrap; gap:14px; margin:0 0 34px; }
.rp-cprint__btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-size:15px; font-weight:700; text-decoration:none;
  padding:15px 30px; border-radius:10px; border:2px solid transparent;
  transition:transform .12s ease, background .15s, color .15s;
}
.rp-cprint__btn:hover { transform:translateY(-1px); }
.rp-cprint__btn--white { background:var(--white); color:var(--ink); border-color:var(--white); }
.rp-cprint__btn--white:hover { background:#f4e9e9; border-color:#f4e9e9; color:var(--ink); }
.rp-cprint__btn--outline { background:transparent; color:var(--white); border-color:rgba(255,255,255,.6); }
.rp-cprint__btn--outline:hover { background:rgba(255,255,255,.12); border-color:var(--white); color:var(--white); }

/* stats */
.rp-cprint__stats { list-style:none; margin:0 0 20px; padding:24px 0 0; display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); }
.rp-cprint__stat { padding:2px 18px; }
.rp-cprint__stat + .rp-cprint__stat { border-left:1px solid var(--line); }
.rp-cprint__stat:first-child { padding-left:0; }
.rp-cprint__stat-value { display:block; font-size:21px; font-weight:800; line-height:1.1; letter-spacing:-.01em; color:var(--white); }
.rp-cprint__stat-label { display:block; font-size:12.5px; color:var(--dim); margin-top:6px; line-height:1.3; }

.rp-cprint__note { margin:auto 0 0; font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.68); max-width:52ch; }

/* ---- right: 2x2 image grid ---- */
.rp-cprint__media { display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; gap:16px; padding:22px 22px 22px 4px; min-width:0; }
.rp-cprint__tile { border-radius:14px; overflow:hidden; background:rgba(255,255,255,.08); aspect-ratio:4/3; } /* 1458 — landscape tiles = more compact block on the wider layout */
.rp-cprint__img { display:block; width:100%; height:100%; object-fit:cover; }

/* ---- responsive ---- */
@media (max-width:900px){
  .rp-cprint__inner { grid-template-columns:1fr; }
  .rp-cprint__panel { padding:36px 28px; }
  .rp-cprint__media { padding:0 22px 26px; }
}
@media (max-width:560px){
  .rp-cprint__stats { grid-template-columns:1fr 1fr; gap:18px 0; }
  .rp-cprint__stat:nth-child(3){ border-left:0; padding-left:0; }
  .rp-cprint__stat { padding:2px 14px; }
  .rp-cprint__stat:nth-child(odd){ padding-left:0; }
  .rp-cprint__title { font-size:28px; }
  .rp-cprint__btn { flex:1 1 auto; }
}