/* Planner hero — layout + motion. Colours/type live inline in PlannerHero.tsx. */

.ph-grid {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 64px;
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(300px, 440px) minmax(0, 320px);  /* equal side tracks keep the photo centred */
  justify-content: center;    /* side columns sit right next to the photo */
  gap: 44px;
  align-items: end;           /* all three columns sit on the marquee */
  min-width: 0;
}

.ph-left  { order: 0; display: flex; flex-direction: column; gap: 44px; padding-bottom: 72px; align-items: flex-start; text-align: left; }
.ph-right { order: 2; display: flex; flex-direction: column; gap: 40px; padding-bottom: 72px; align-items: flex-end; text-align: right; min-width: 0; }
.ph-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; max-width: 300px; }

/* Photo stage: height follows the viewport so title + photo + marquee fit one screen */
.ph-photo {
  order: 1;
  position: relative;
  height: clamp(380px, calc(100vh - 345px), 560px);
  aspect-ratio: 771 / 1060;
  max-width: 100%;
  margin-top: 12px;
  justify-self: center;
}

.ph-deco { position: absolute; inset: 0; pointer-events: none; }

.ph-social {
  width: 36px; height: 36px; border-radius: 50%;
  background: #263D69; color: #DFC79B;
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease, color .2s ease;
}
.ph-social:hover { transform: translateY(-2px); color: #fff; }

.ph-marquee {
  display: flex;
  width: max-content;
  animation: ph-marquee 30s linear infinite;
}
@keyframes ph-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- below 1100px: single centred column ---------- */
@media (max-width: 1099px) {
  .ph-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .ph-photo { order: 0; }
  .ph-right { order: 1; align-items: center; text-align: center; padding-bottom: 64px; }
  .ph-left  { order: 2; align-items: center; text-align: center; padding-bottom: 64px; }
  .ph-chips { justify-content: center; }
  .ph-deco  { display: none; }
}

@media (max-width: 640px) {
  .ph-grid { padding: 0 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .ph-marquee { animation: none; }
}

/* ---------- desktop: both side columns hug the photo ---------- */
@media (min-width: 1100px) {
  .ph-left  { align-items: flex-start; text-align: left; }
  .ph-right { align-items: flex-start; text-align: left; }
  .ph-chips { justify-content: flex-start; }
}
@media (min-width: 1100px) {
  .ph-left  { justify-self: end;   }   /* left block hugs the photo, text stays left-aligned inside it */
  .ph-right { justify-self: start; }
}