/* Phillips360 Modern V2.033 — guided journeys and related content.

   Components:
   - Breadcrumb trail for orientation and internal linking.
   - Contextual next-step panel for conversion continuity.
   - Related content grid using existing WordPress posts.
*/

/* Breadcrumbs ------------------------------------------------------------- */
.p360-breadcrumbs {
  border-bottom: 1px solid var(--p360-line);
  background: rgba(244,241,234,.94);
}
.p360-breadcrumbs__list {
  display: flex;
  min-height: 54px;
  margin: 0;
  padding: 0;
  align-items: center;
  gap: 9px;
  overflow-x: auto;
  scrollbar-width: thin;
  list-style: none;
  white-space: nowrap;
}
.p360-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--p360-muted);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .035em;
}
.p360-breadcrumbs__item:not(:last-child)::after {
  color: rgba(8,17,26,.4);
  content: "/";
}
.p360-breadcrumbs__item a {
  color: var(--p360-ink);
  text-decoration: none;
  text-underline-offset: 4px;
}
.p360-breadcrumbs__item a:hover,
.p360-breadcrumbs__item a:focus-visible { text-decoration: underline; text-decoration-color: var(--p360-accent); }
.p360-breadcrumbs__item [aria-current="page"] { color: rgba(8,17,26,.62); }

/* Contextual next step ---------------------------------------------------- */
.p360-next-step {
  background:
    radial-gradient(circle at 88% 14%, rgba(255,93,58,.22), transparent 28%),
    var(--p360-ink);
  color: var(--p360-white);
}
.p360-next-step__inner {
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(250px,.55fr);
  gap: clamp(42px, 8vw, 120px);
  align-items: end;
}
.p360-next-step__copy h2 {
  max-width: 930px;
  margin: 0 0 22px;
  font-size: clamp(2.8rem, 6.5vw, 7rem);
  line-height: .98;
}
.p360-next-step__copy > p:last-child { max-width: 64ch; color: rgba(255,255,255,.74); }
.p360-next-step__actions { display: flex; flex-direction: column; align-items: start; gap: 24px; }

/* Related content --------------------------------------------------------- */
.p360-related { background: var(--p360-paper); }
.p360-related__header { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 32px; align-items: end; margin-bottom: var(--p360-space-3); }
.p360-related__header h2 { max-width: 900px; margin: 0; font-size: clamp(2.8rem, 6vw, 6.6rem); }
.p360-related__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(18px, 2.5vw, 34px); }
.p360-related__grid .p360-post-card { min-width: 0; }
.p360-related__grid .p360-post-card h3 { margin: 0 0 18px; font-size: clamp(1.7rem, 2.5vw, 2.6rem); line-height: 1.03; }
.p360-related__grid .p360-post-card h3 a { text-decoration: none; }

@media (max-width: 1000px) {
  .p360-related__grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .p360-next-step__inner { grid-template-columns: 1fr; }
  .p360-next-step__actions { flex-flow: row wrap; align-items: center; }
}

@media (max-width: 680px) {
  .p360-breadcrumbs__list { min-height: 48px; }
  .p360-related__header,
  .p360-related__grid { grid-template-columns: 1fr; }
  .p360-next-step__actions { align-items: flex-start; flex-direction: column; }
}