/* =========================================================
   Collage hero — centred heading, photo tiles on both sides
   (includes/collage-hero.php · Planner & About pages)
   desktop ≥1024 · tablet 768–1023 · mobile ≤767
   ========================================================= */
.qc-hero { --s: 1; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 720px) minmax(0, 1fr); align-items: center; gap: 24px; min-height: 360px; padding: 28px 0 40px; overflow: hidden; background: #fff; }
.qc-hero__center { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 8px; text-align: center; }
.qc-hero__title { margin: 0; font-size: 60px; line-height: 76px; font-weight: 700; letter-spacing: -1px; color: #1c1b1b; animation: qc-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
.qc-hero--long { grid-template-columns: minmax(0, 1fr) minmax(0, 820px) minmax(0, 1fr); }
.qc-hero--long .qc-hero__title { font-size: 50px; line-height: 62px; }
.qc-hero__title span { display: block; background: linear-gradient(90deg, #005a9a 0%, #2373ba 50%, #bf4b0e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qc-hero__sub { margin: 0; font-size: 19px; line-height: 28px; color: #414751; animation: qc-rise 0.8s 0.1s cubic-bezier(0.22, 1, 0.36, 1) both; }
.qc-hero__btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 13px 24px; border-radius: 12px; background: linear-gradient(90deg, #005a9a, #2373ba); box-shadow: 0 10px 20px -10px rgba(0, 90, 154, 0.7); font-size: 14px; font-weight: 700; line-height: 20px; color: #fff; transition: transform 0.25s ease; animation: qc-rise 0.8s 0.2s cubic-bezier(0.22, 1, 0.36, 1) both; }
.qc-hero__btn:hover { transform: translateY(-2px); }
.qc-hero__btn:focus-visible { outline: 2px solid #005a9a; outline-offset: 2px; }

.qc-hero__side { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.qc-hero__row { display: flex; gap: 22px; }
.qc-hero__row:first-child { align-items: flex-end; }
.qc-hero__row:last-child { align-items: flex-start; }
/* first photo of each row sits next to the heading, the rest spread outwards and run off the edge */
.qc-hero__side--left .qc-hero__row { flex-direction: row-reverse; }
.qc-hero__tile { --w: 108; --h: 108; flex: none; width: calc(var(--w) * var(--s) * 1px); height: calc(var(--h) * var(--s) * 1px); overflow: hidden; border-radius: 12px; background: #f6f3f2; box-shadow: 0 10px 22px -12px rgba(0, 29, 54, 0.45); animation: qc-bob 6s ease-in-out infinite; }
.qc-hero__tile img { display: block; width: 100%; height: 100%; object-fit: cover; animation: qc-pop 0.9s calc(0.1s + var(--i, 0) * 0.05s) cubic-bezier(0.22, 1, 0.36, 1) both; }
.qc-hero__row:first-child > :nth-child(1) { --w: 80; --h: 80; }
.qc-hero__row:first-child > :nth-child(2) { --w: 108; --h: 108; }
.qc-hero__row:first-child > :nth-child(3) { --w: 94; --h: 124; }
.qc-hero__row:first-child > :nth-child(4) { --w: 108; --h: 136; }
.qc-hero__row:last-child > :nth-child(1) { --w: 80; --h: 80; }
.qc-hero__row:last-child > :nth-child(2) { --w: 94; --h: 94; }
.qc-hero__row:last-child > :nth-child(3) { --w: 108; --h: 108; }
.qc-hero__row:last-child > :nth-child(4) { --w: 100; --h: 136; }
.qc-hero__row > :nth-child(2) { animation-delay: -1.5s; }
.qc-hero__row > :nth-child(3) { animation-delay: -3s; }
.qc-hero__row > :nth-child(4) { animation-delay: -4.5s; }
.qc-hero__row:last-child > * { animation-duration: 7s; }
@keyframes qc-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes qc-pop { from { opacity: 0; transform: scale(1.25); } to { opacity: 1; transform: none; } }
@keyframes qc-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .qc-hero__tile, .qc-hero__tile img, .qc-hero__title, .qc-hero__sub, .qc-hero__btn { animation: none; }
}

/* ---------- tablet ---------- */
@media (max-width: 1023px) {
  .qc-hero { --s: 0.72; grid-template-columns: minmax(0, 1fr) minmax(0, 420px) minmax(0, 1fr); gap: 14px; min-height: 290px; }
  .qc-hero__title, .qc-hero--long .qc-hero__title { font-size: 40px; line-height: 50px; }
  .qc-hero--long { grid-template-columns: minmax(0, 1fr) minmax(0, 440px) minmax(0, 1fr); }
  .qc-hero__sub { font-size: 16px; line-height: 24px; }
  .qc-hero__side, .qc-hero__row { gap: 14px; }
}

/* ---------- mobile: one photo strip above the heading, one below ---------- */
@media (max-width: 767px) {
  .qc-hero { --s: 0.62; grid-template-columns: minmax(0, 1fr); gap: 18px; min-height: 0; padding: 20px 0 28px; }
  .qc-hero__side { flex-direction: row; justify-content: center; align-items: center; gap: 10px; }
  .qc-hero__row { display: contents; }
  .qc-hero__side--left .qc-hero__row:last-child > * { order: -1; }
  .qc-hero__title, .qc-hero--long .qc-hero__title { font-size: 32px; line-height: 41px; letter-spacing: -0.6px; }
  .qc-hero--long { grid-template-columns: minmax(0, 1fr); }
  .qc-hero__sub { font-size: 15px; line-height: 22px; }
  .qc-hero__center { gap: 10px; padding: 0 16px; }
}