/* =========================================================
   TriPoint – homepage sections (Figma "Home - Hi-Fi").
   Loaded on the front page only. Depends on the tokens and
   button styles in tripoint-base.css.

   01 Hero · 02 About · 03/04 Services · 05 Schools
   06 Learn · 07 Events · 08 Get started
   ========================================================= */

/* ---------- 01 Hero ---------- */
.entry-content .tp-hero.alignfull{margin:16px 16px 0 !important;width:auto !important;max-width:none;overflow:hidden;isolation:isolate}
.tp-hero::before{
  content:"";display:block;position:absolute;inset:0;width:100%;height:100%;z-index:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.7) 0%,rgba(102,102,102,.07) 100%),rgba(59,59,56,.3);
}
.tp-hero>.kt-row-column-wrap{position:relative;z-index:1}
/* Line the hero's text up with every other section. Its padding comes from
   the block's own settings (40px desktop), and the surface is already inset
   16px from the viewport, so the text started at 56px where the sections
   below start at 80px. Same formula as the event page: cap at --tp-max and
   centre, falling back to the gutter less the inset. */
.tp-hero{--tp-hero-inset:16px}
.entry-content .tp-hero>.kt-row-column-wrap{
  max-width:none !important;
  padding-left:max(calc(var(--tp-gutter) - var(--tp-hero-inset)),(100% - var(--tp-max))/2) !important;
  padding-right:max(calc(var(--tp-gutter) - var(--tp-hero-inset)),(100% - var(--tp-max))/2) !important;
}
@media (max-width:767px){
  .tp-hero{--tp-hero-inset:8px}
}
.tp-hero__title{max-width:700px}
/* The lede paragraph does not currently carry the tp-hero__lede class, so the
   width is set on hero paragraphs generally. The credential card sets its own
   width and is exempt. Add the class to that block and this can be tightened
   back to the single selector. */
.tp-hero__lede,
.tp-hero p{max-width:650px}
/* The card's own 320px cap can lose to Kadence's per-block CSS, in which case
   this paragraph is what holds the card to its width - so it gets the card's
   inner width rather than being uncapped. */
.tp-hero .tp-credential-card p{max-width:276px}
.tp-hero .tp-credential-card{max-width:316px}
.tp-hero__aside>.kt-inside-inner-col{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;height:100%}
.tp-credential-card{
  background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-radius:20px;padding:20px;max-width:320px;width:100%;
}
@media (max-width:1024px){
  .tp-hero__aside>.kt-inside-inner-col{align-items:flex-start}
}
@media (max-width:767px){.entry-content .tp-hero.alignfull{margin:8px 8px 0 !important;border-radius:24px}}

/* ---------- 02 About ---------- */
.tp-person{overflow:hidden}
.tp-person>.kt-inside-inner-col{height:100%}
.tp-person__photo{margin:0}
.tp-person__photo img{display:block;width:100%;height:220px;object-fit:cover;border-radius:20px 20px 0 0}
.tp-person--matt .tp-person__photo img{object-position:center top}
.tp-people>.kt-row-column-wrap{align-items:stretch}
.tp-footnote{text-align:right;margin-top:0}
@media (max-width:1024px){.tp-footnote{text-align:left}}
@media (max-width:600px){.tp-people>.kt-row-column-wrap{grid-template-columns:1fr !important}}

/* ---------- 03/04 Service sections ---------- */
/* position:relative so the decorative arcs anchor to the section rather than
   to whatever positioned ancestor happens to be above it. */
.tp-service{position:relative;overflow:hidden}
.tp-service__img{margin:0}
.tp-service__img img{display:block;width:100%;height:680px;object-fit:cover;border-radius:28px}
@media (max-width:1024px){.tp-service__img img{height:520px}}
@media (max-width:767px){.tp-service__img img{height:360px;border-radius:20px}}

/* decorative arcs, bottom-right of Reading & Dyslexia */
.tp-service--reading::after{
  content:"";position:absolute;right:0;bottom:0;width:200px;height:273px;pointer-events:none;
  /* tp-arcs-transparent.svg, not tp-arcs-dyslexia-v2.svg: that one has an
     off-white rectangle baked in from the Figma export, which shows as a
     lighter box on beige sections. Identical on off-white ones. */
  background:url("/wp-content/uploads/2026/10/tp-arcs-transparent.svg") right bottom/contain no-repeat;
}
@media (max-width:1024px){.tp-service--reading::after{width:140px;height:191px}}
@media (max-width:767px){.tp-service--reading::after{width:110px;height:150px}}

/* Opt-in modifier: move the arcs to the top-left corner instead, flipped so
   they sweep the other way. Phones keep the bottom-right placement, where
   the top-left corner is already occupied. */
@media (min-width:768px){
  .tp-service--reading.tp-service--arcs-tl::after{
    right:auto; bottom:auto; left:0; top:0;
    transform:rotate(180deg);
  }
}

/* sub-page links: moved to tripoint-base.css, so [tp_services] lists look
   the same on bios and overview pages. The 480px description width stays
   here, further down, because it is a homepage measure. */

/* ---------- 05 Schools & Professionals ---------- */
.tp-schools{overflow:hidden}
.tp-schools::before,.tp-schools::after{content:"";position:absolute;pointer-events:none;z-index:0;background-repeat:no-repeat;background-size:contain}
.tp-schools::before{left:-362px;top:-84px;width:966px;height:344px;background-image:url("/wp-content/uploads/2026/10/tp-arc-schools-top-v2.svg")}
.tp-schools::after{right:-232px;bottom:-310px;width:753px;height:621px;background-image:url("/wp-content/uploads/2026/10/tp-arc-schools-bottom-v2.svg")}
.tp-schools>.kt-row-column-wrap{position:relative;z-index:1}
@media (max-width:767px){.tp-schools::before{left:-480px}.tp-schools::after{right:-460px}}
.tp-school-list>.kt-row-column-wrap{padding:0}
/* The hover colour goes on the inner element, which is the one carrying the
   card's background and corner radius. On the outer wrapper it paints a
   square-cornered block that shows past the rounded card. */
.tp-school-row{position:relative;background-color:transparent !important}
.tp-school-row>.kt-inside-inner-col{transition:background-color .2s ease}
.tp-school-row:hover>.kt-inside-inner-col{background-color:#20707f !important}
.tp-school-row::after{
  content:"";position:absolute;right:16px;top:16px;width:32px;height:32px;border-radius:999px;
  background:var(--tp-teal) var(--tp-arrow-r-white) center/16px 16px no-repeat;
  transition:transform .2s ease;
}
.tp-school-row:hover::after{transform:translateX(3px)}

/* ---------- 06 Learn ---------- */
.tp-heading-group{margin:0}
.tp-learn__title{max-width:720px}
.tp-resources>.kt-row-column-wrap{padding:0}
.tp-resource__img{margin:0;overflow:hidden;border-radius:24px}
.tp-resource__img img{display:block;width:100%;height:340px;object-fit:cover;border-radius:24px;transition:transform .4s ease}
.tp-resource:hover .tp-resource__img img{transform:scale(1.03)}
@media (max-width:767px){.tp-resource__img img{height:260px}}
.tp-tag{display:inline-block;align-self:flex-start;background:var(--tp-purple);border-radius:999px;padding:5px 10px;margin:0}

/* ---------- 07 Community events ---------- */
.tp-events-wrap>.kt-row-column-wrap{padding:0}
.tp-events>.kt-inside-inner-col>.kb-row-layout-wrap>.kt-row-column-wrap{padding:0}
.tp-event-rows>.kt-row-column-wrap{gap:0 !important;padding:0}
.tp-event{border-top:1px solid var(--tp-border)}
.tp-event>.kt-inside-inner-col{align-items:center}
.tp-date{
  flex:0 0 84px;width:84px;margin:0;padding:12px 0;border-radius:16px;
  background:var(--tp-yellow);color:var(--tp-navy);text-align:center;letter-spacing:-.025em;
}
.tp-date__mon{display:block;font-size:12px;font-weight:600;line-height:1.3;color:var(--tp-navy);letter-spacing:0;margin-bottom:2px}
.tp-date__day{display:block;color:var(--tp-navy)}
.tp-event__text{flex:1 1 auto;min-width:0}
.tp-event__text>*{margin-top:0}
.tp-event__rsvp.kb-buttons-wrap{flex:0 0 auto;margin:0}
@media (max-width:600px){
  .tp-event>.kt-inside-inner-col{flex-wrap:wrap}
  .tp-event__text{flex-basis:calc(100% - 100px)}
  /* The button drops below the text here, so it needs its own space above
     and a tighter shape - the desktop padding reads as oversized next to
     two or three lines of small text. */
  .tp-event__rsvp.kb-buttons-wrap{margin-left:100px;margin-top:12px}
  .tp-event__rsvp .kb-button.tp-btn--outline{padding:9px 18px;font-size:14px}
}

/* ---------- Vertical rhythm inside columns ---------- */
.tp-home .kb-section-dir-vertical>.kt-inside-inner-col{display:flex;flex-direction:column;gap:16px}
.tp-home .kb-section-dir-vertical>.kt-inside-inner-col>*{margin-top:0;margin-bottom:0}
.tp-person.kb-section-dir-vertical>.kt-inside-inner-col{gap:10px;padding-bottom:24px}
.tp-person>.kt-inside-inner-col>:not(figure){margin-left:24px !important;margin-right:24px !important}
.tp-person>.kt-inside-inner-col>figure+*{margin-top:10px !important}
.tp-sublink.kb-section-dir-vertical>.kt-inside-inner-col{gap:6px}
.tp-school-row.kb-section-dir-vertical>.kt-inside-inner-col{gap:8px}
.tp-schools>.kt-row-column-wrap>.wp-block-kadence-column>.kt-inside-inner-col,
.tp-learn>.kt-row-column-wrap>.wp-block-kadence-column>.kt-inside-inner-col{gap:56px}
@media (max-width:1024px){
  .tp-schools>.kt-row-column-wrap>.wp-block-kadence-column>.kt-inside-inner-col,
  .tp-learn>.kt-row-column-wrap>.wp-block-kadence-column>.kt-inside-inner-col{gap:40px}
}
@media (min-width:601px){.tp-event>.kt-inside-inner-col{flex-wrap:nowrap}}
.tp-sublinks{margin-top:0}

/* ---------- Upcoming events ([tp_events]) ----------
   Reuses .tp-event, .tp-date and .tp-event__rsvp so the existing styling and
   responsive rules apply. What is declared here is the row layout (the
   hand-built version gets it from Kadence's column wrapper) and the type
   sizes, which came from Kadence's per-block CSS. Values read from the
   built section: 28px row padding, 16px gap, 32/20/14px type. */
.tp-events-auto .tp-event{
  display:flex;align-items:center;flex-wrap:wrap;
  column-gap:16px;
  padding:28px 0;
}
.tp-events-auto .tp-date{
  /* margin:0 because Kadence's .single-content p rule outranks the plain
     .tp-date rule and adds 32px below the tile - the same clash the team
     cards had. */
  margin:0;
  font-size:32px;line-height:1;font-weight:500;
}
/* Let the title column absorb the spare width so a long title wraps instead
   of pushing the button onto its own line. min-width:0 is what allows a flex
   item to shrink below its content's natural width. */
.tp-events-auto .tp-event__text{flex:1;min-width:0}
/* The old buttons were Kadence buttons, which strip the underline; these are
   plain links and inherit it from the content styles. */
.tp-events-auto .tp-rsvp,
.tp-events-auto .tp-rsvp:hover,
.tp-events-auto .tp-rsvp:focus{text-decoration:none}
.tp-events-auto .tp-event__title{
  margin:0 0 8px;
  font-size:20px;line-height:1.3;font-weight:600;
  color:var(--tp-dark-teal);
}
.tp-events-auto .tp-event__meta{
  margin:0;
  font-size:14px;line-height:1.3;font-weight:400;
  color:var(--tp-body);
}
.tp-events-auto .tp-event__rsvp{margin:0;flex:0 0 auto}
.tp-events-empty{margin:0;color:var(--tp-body)}
@media (max-width:1024px){
  .tp-events-auto .tp-date{font-size:28px}
  .tp-events-auto .tp-event__title{font-size:19px}
}
@media (max-width:600px){
  .tp-events-auto .tp-event{flex-wrap:wrap}
  .tp-events-auto .tp-event__text{flex-basis:calc(100% - 100px)}
  .tp-events-auto .tp-event__rsvp{margin-left:100px;margin-top:12px}
  .tp-events-auto .tp-btn--outline{padding:9px 18px;font-size:14px}
}

/* RSVP button states. "Full" and "RSVP closed" still link to the event, but
   should not look like an invitation to book. */
.tp-rsvp--full,
.tp-rsvp--closed,
.tp-rsvp--pending{opacity:.7}
.tp-rsvp--full:hover,
.tp-rsvp--closed:hover,
.tp-rsvp--pending:hover{opacity:1}

/* ---------- Reading width ----------
   The container went from 1280 to 1440 and the gutter changed with it, so
   section paragraphs that used to sit at a comfortable width now run the
   full column. Capped at 68 characters, which is a normal line length for
   body text. Components that set their own width are exempt below. */
.tp-about p,
.tp-service p,
.tp-schools p,
.tp-learn p{max-width:68ch}
.tp-sublink p,
.tp-person p,
.tp-resource p,
.tp-event p,
.tp-event__text p,
.tp-school-row p,
.tp-credential-card p,
.tp-team__bio p{max-width:none}
/* these keep the widths they were given */
.tp-measure{max-width:560px}
.tp-sublink .tp-sublink__desc,
.tp-sublink p{max-width:480px}