/* Landing-page patterns used by this theme, appended by scripts/patterns.py add. Styles for sections written new
 * for this prospect go in brand.css. */

/* >>> pattern hero-split */
/* PATTERN hero-split (sections/hero-split.html.twig) */
.portal-hero.dp-hero-split { text-align: left; padding: calc(var(--paligo-header-h) + clamp(2.5rem, 6vw, 4.5rem)) 0 clamp(2.5rem, 6vw, 4.5rem); }
.dp-hero-split__inner {
  width: min(var(--dp-wrap), calc(100% - 2 * clamp(1.25rem, 3vw, 2.5rem))); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.dp-hero-split--flip .dp-hero-split__copy { order: 2; }
.portal-hero.dp-hero-split h1 { font-size: clamp(2.6rem, 5.2vw, 4.6rem); line-height: 1; margin: 0 0 1rem; max-width: 14ch; }
.portal-hero.dp-hero-split .portal-sub { font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.5; max-width: 44ch; margin: 0 0 1.75rem; }
.dp-hero-split .portal-search { max-width: 34rem; margin: 0; }
.dp-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 1.5rem; }
.dp-hero-split__media {
  position: relative; border-radius: var(--dp-radius-panel); overflow: hidden;
  aspect-ratio: var(--dp-hero-media-ratio, 4 / 3); background: var(--dp-media-ground);
}
.dp-hero-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dp-hero-split__media--contain img { object-fit: contain; padding: 6%; box-sizing: border-box; }
@media (max-width: 52rem) {
  .dp-hero-split__inner { grid-template-columns: 1fr; }
  .dp-hero-split--flip .dp-hero-split__copy { order: 0; }
  .portal-hero.dp-hero-split h1 { max-width: none; }
}
/* <<< pattern hero-split */

/* >>> pattern chapters-cards */
/* PATTERN chapters-cards (sections/chapters-cards.html.twig) */
.dp-chapters { margin-top: var(--dp-section-gap); }
.dp-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--dp-cards-cols, 4), minmax(0, 1fr)); gap: 1rem; }
.dp-cards > li { margin: 0; display: flex; }
.dp-card {
  flex: 1; display: flex; flex-direction: column; min-height: 16rem; padding: 1.5rem 1.5rem 1.25rem; color: var(--paligo-text); text-decoration: none;
  border: 1px solid var(--dp-card-border); border-radius: var(--dp-radius-card); background: var(--dp-card-bg);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.dp-card:hover { text-decoration: none; color: var(--dp-hover-fg); background: var(--dp-hover-bg); border-color: var(--dp-hover-border); transform: translateY(calc(-1 * var(--dp-card-lift))); }
.dp-card__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.dp-card__index { font-family: var(--dp-label-font); font-size: 13px; color: var(--paligo-faint); }
.dp-card__title { font-family: var(--dp-display); font-weight: var(--dp-display-weight); letter-spacing: var(--dp-display-tracking); font-size: 1.55rem; line-height: 1.1; margin-top: 1.9rem; text-wrap: balance; }
.dp-card__summary { font-size: 15px; line-height: 1.5; color: var(--paligo-text); margin-top: .75rem; }
.dp-card__summary + .dp-card__desc { margin-top: .5rem; font-size: 13px; }
.dp-card--media { padding-top: 0; overflow: hidden; }
.dp-card__media { display: block; margin: 0 -1.5rem 1.25rem; aspect-ratio: 16 / 9; overflow: hidden; background: var(--dp-media-ground); }
.dp-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.dp-card--media:hover .dp-card__media img { transform: scale(1.03); }
.dp-card--media .dp-card__title { margin-top: 1rem; }
@media (prefers-reduced-motion: reduce) { .dp-card__media img { transition: none; } }
.dp-card__desc { font-size: 14px; line-height: 1.5; color: color-mix(in srgb, var(--paligo-text) 64%, transparent); margin-top: .7rem; }
.dp-card__foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 1.1rem; font-family: var(--dp-label-font); font-size: 12.5px; color: var(--paligo-faint); }
.dp-card__arrow { font-size: 16px; color: var(--paligo-text); transition: transform .18s ease; }
.dp-card:hover .dp-card__arrow { transform: translateX(4px); }
.dp-card--start { background: var(--dp-panel-bg); border-color: var(--dp-panel-bg); color: var(--dp-panel-fg); }
.dp-card--start .dp-card__index, .dp-card--start .dp-card__desc { color: rgb(var(--dp-panel-fg-rgb) / .72); }
.dp-card--start:hover { background: var(--dp-panel-bg); color: var(--dp-panel-fg); filter: brightness(1.15); }
.dp-meter { flex: 0 1 5rem; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--dp-progress-on) var(--dp-meter, 0%), var(--paligo-border) var(--dp-meter, 0%)); }
@media (max-width: 75rem) { .dp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 52rem) { .dp-card { min-height: 0; } .dp-card__title { margin-top: 1.5rem; } }
@media (max-width: 36rem) { .dp-cards { grid-template-columns: 1fr; } }
.dp-card__path { display: grid; gap: .35rem; margin-top: 1.1rem; }
.dp-card__step { display: flex; align-items: center; gap: .6rem; font-size: 14px; line-height: 1.4; }
.dp-card__step-n { flex: none; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; opacity: .7; }
/* <<< pattern chapters-cards */

/* >>> pattern help-band */
/* PATTERN help-band (sections/help-band.html.twig) */
.dp-help { position: relative; overflow: hidden; background: var(--dp-band-bg); color: var(--dp-band-fg); padding: var(--dp-section-gap) 0; margin-top: var(--dp-section-gap); }
body.portal > main > .dp-help:last-child { flex: 1 0 auto; }
.dp-help::before { content: ""; position: absolute; inset: auto -10% -60% -10%; height: 120%; pointer-events: none; background: radial-gradient(45% 60% at 20% 100%, rgb(var(--dp-hero-glow-rgb) / var(--dp-band-glow, .5)), transparent 70%); }
.dp-help__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.dp-help h2 { font-family: var(--dp-display); font-weight: var(--dp-display-weight); letter-spacing: var(--dp-display-tracking); color: var(--dp-band-fg); font-size: clamp(2.2rem, 4.2vw, 3.6rem); line-height: 1.04; margin: 0; text-wrap: balance; }
.dp-help p { color: rgb(var(--dp-band-fg-rgb) / .78); font-size: 1.05rem; line-height: 1.55; margin: 0 0 1.5rem; max-width: 42ch; }
@media (max-width: 52rem) { .dp-help__inner { grid-template-columns: 1fr; } }
/* <<< pattern help-band */

/* >>> pattern header-centered-nav */
/* PATTERN header-centered-nav (CSS only): the top nav centered in the bar, brand left, tools right. Use when the
   prospect's own header centers its navigation. The transform is static (never on :hover), so it cannot jump. */
@media (min-width: 70.01rem) { .dp-top-nav { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; } }
/* <<< pattern header-centered-nav */