/* ==========================================================
   Service overview pages: /dyslexia/, and reusable for
   /autism/ and /professionals/.
   Loaded after tripoint-home.css, which this builds on: the
   rows reuse .tp-service and .tp-school-row from there, and
   the card arrow override below has to come after that file
   to win on source order.
   Everything else on these pages is set in the Kadence builder.
   ========================================================== */

/* ---------- Hero card: rainbow motif, bottom-right ----------
   The card (palette8, 32px radius) is the Kadence row itself;
   overflow:hidden clips the motif to the rounded corners. */
.tp-ov-hero{position:relative;overflow:hidden}
.tp-ov-hero>.kt-row-column-wrap{position:relative;z-index:1}
.tp-ov-hero::after{
  content:"";position:absolute;pointer-events:none;z-index:0;
  right:-127px;bottom:-39px;width:300px;height:275px;
  background:url("/wp-content/uploads/2026/10/tp-dys-hero-arcs.svg") no-repeat center/contain;
}
@media (max-width:1024px){
  .tp-ov-hero::after{right:-89px;bottom:-27px;width:210px;height:193px}
}
@media (max-width:767px){
  .tp-ov-hero::after{right:-64px;bottom:-20px;width:150px;height:138px}
}

/* ---------- "How we can help": dark teal arc ----------
   Same placement method as .tp-schools on the homepage.
   .tp-service already gives the row position:relative and
   overflow:hidden.
   Top-left only: the bottom-right arc was dropped. */
.tp-ov-help::before{
  content:"";position:absolute;pointer-events:none;z-index:0;
  background-repeat:no-repeat;background-size:contain;
  left:-362px;top:-84px;width:966px;height:344px;
  background-image:url("/wp-content/uploads/2026/10/tp-arc-dark-top.svg");
}
.tp-ov-help>.kt-row-column-wrap{position:relative;z-index:1}
@media (max-width:767px){
  .tp-ov-help::before{left:-480px}
}

/* ---------- Title-only service cards ----------
   Homepage .tp-school-row cards have a title + description,
   so their arrow sits top-right. Cards with a title only
   centre the arrow vertically and match the 28px card padding
   set in the builder. top is used instead of transform so the
   existing hover transform still works. */
.tp-school-row--title::after{top:calc(50% - 16px);right:28px}

/* ==========================================================
   Reading intervention page (/dyslexia/reading-intervention/).
   The process steps use the global .tp-step / .tp-steps notched
   card, and the page guide pills sit beside the intro text, both
   set in the Kadence builder. Everything else on the page is
   built there too, or reuses existing classes.
   ========================================================== */

/* ---------- Process cards: number pill in card colours ----------
   .tp-step::after in tripoint-base.css paints the number dark teal
   on white for the Get started CTA. Here the pill matches the card
   (palette8) with dark teal text, the same colour as the card
   titles. */
.tp-ri-pstep.tp-step::after{
  background:var(--global-palette8);
  color:var(--global-palette2);
}

/* ---------- Process option B: stacked sticky cards ----------
   Section .tp-ri-stack-section, built below the current process
   section for comparison. Desktop only: each card sticks under
   the floating header and the next slides over it, staggered 40px
   so earlier numbers stay visible.
   - .tp-service sets overflow:hidden, which stops position:sticky
     working; clip hides overflow the same way without that.
   - The margin-bottom / negative margin-top pairs cancel out in
     the layout but keep the stagger once the stack scrolls away,
     otherwise the cards bunch up at the end.
   Delete this block if option A is kept. */
.tp-ri-stack-section{overflow:clip}
@media (min-width:1025px){
  .tp-ri-stack-section .tp-ri-stack__card{position:sticky}
  .tp-ri-stack-section .tp-ri-stack__card:nth-child(1){top:120px;margin-bottom:80px}
  .tp-ri-stack-section .tp-ri-stack__card:nth-child(2){top:160px;margin-top:-80px;margin-bottom:40px}
  .tp-ri-stack-section .tp-ri-stack__card:nth-child(3){top:200px;margin-top:-40px}
}
/* Bigger number and notch for the wide cards (the global card is a 72x58
   notch with a 14px number). */
.tp-ri-stack-section .tp-step>.kt-inside-inner-col{
  -webkit-mask-size:100% 100%,100px 80px;
  mask-size:100% 100%,100px 80px;
}
.tp-ri-stack-section .tp-ri-pstep.tp-step::after{
  top:8px;right:8px;padding:9px 20px;
  font-size:20px;line-height:24px;letter-spacing:1px;
}
/* Number matches its card (cards set in the builder:
   palette8 / palette1 / palette2). */
.tp-ri-stack-section .tp-ri-stack__card:nth-child(1) .tp-ri-pstep.tp-step::after{background:var(--global-palette8);color:var(--global-palette2)}
.tp-ri-stack-section .tp-ri-stack__card:nth-child(2) .tp-ri-pstep.tp-step::after{background:var(--global-palette1);color:#fff}
.tp-ri-stack-section .tp-ri-stack__card:nth-child(3) .tp-ri-pstep.tp-step::after{background:var(--global-palette2);color:#fff}

/* ---------- About Orton-Gillingham: rainbow motif ----------
   Same artwork as the /dyslexia/ hero, larger and bottom-right.
   .tp-service already gives the row position:relative and
   overflow:hidden. */
.tp-ri-og>.kt-row-column-wrap{position:relative;z-index:1}
.tp-ri-og::after{
  content:"";position:absolute;pointer-events:none;z-index:0;
  right:-158px;bottom:-58px;width:358px;height:331px;
  background:url("/wp-content/uploads/2026/10/tp-dys-hero-arcs.svg") no-repeat center/contain;
}
@media (max-width:1024px){
  .tp-ri-og::after{right:-110px;bottom:-40px;width:250px;height:231px}
}
@media (max-width:767px){
  .tp-ri-og::after{right:-80px;bottom:-30px;width:180px;height:166px}
}