/* Installer resources on the training page (section 04): the Installer Manual card, the guide tiles
   with a real first-page preview of each PDF, and the partner lessons in a scrolling row.
   Loaded by training-and-certification.html only, after site.css. Colors, radii and type come from
   site.css and the type kit (assets/css/bodaq-type.css): no font-family and no letter-spacing here.
   The lesson cards are site.css's .vid and .yt, so they look and play like the videos in section 03. */

.rs-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.rs-ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------------ layout */
#resources .sec-head { margin-bottom: 26px; }
.rs-top { display: grid; gap: 24px; }
.rs-series { margin-top: clamp(36px, 4vw, 52px); }
/* From 1280px the manual card stands left of the guides (one bento row); below that it is a banner above them. */
@media (min-width: 1280px) { .rs-top { grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); gap: 28px; } }

/* Sub-heads: the guides and the partner series */
.rs-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 28px; margin-bottom: 14px; }
.rs-head-t { min-width: 0; }
.rs-h { display: flex; align-items: center; gap: 12px; }
.rs-h .ico { width: 36px; height: 36px; }
.rs-sub { margin-top: 2px; font-size: var(--t-body-sm-size); line-height: var(--t-body-sm-lh); }
/* the series head: kicker, title and the arrow buttons; on phones the buttons sit on the kicker line */
.rs-head-s { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kicker ctrl" "title ctrl"; align-items: end; gap: 6px 20px; }
.rs-head-s .kicker { grid-area: kicker; margin: 0; }
.rs-head-s .rs-h { grid-area: title; }
.rs-head-s .rs-ctrl { grid-area: ctrl; }
@media (max-width: 639px) {
  .rs-head-s { grid-template-areas: "kicker ctrl" "title title"; align-items: center; }
  .rs-head-s .rs-h { margin-top: 2px; }
}
@media (max-width: 349px) { .rs-n { display: none; } }

/* ------------------------------------------------------------------ the Installer Manual card */
.rs-manual {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "cover head" "text text" "btn btn";
  align-content: space-between; gap: 18px; padding: 24px 24px 24px; border-radius: 14px; color: #fff;
  background-color: var(--char);
  background-image: radial-gradient(ellipse at 100% 0%, rgba(9, 152, 131, 0.42), transparent 62%), radial-gradient(ellipse at 0% 100%, rgba(7, 128, 110, 0.3), transparent 58%), var(--dots);
  background-size: auto, auto, 22px 22px;
  box-shadow: 0 30px 60px -38px rgba(34, 32, 33, 0.7);
}
.rs-manual :focus-visible { outline-color: var(--mint); }
.rs-cover { grid-area: cover; width: 140px; height: auto; transform: rotate(-3deg); transform-origin: 50% 90%; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, 0.45)); transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.rs-manual:hover .rs-cover, .rs-manual:focus-within .rs-cover { transform: translateY(-4px) rotate(0); }
.rs-anim .rs-manual.in .rs-cover { animation: rs-settle 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s backwards; }
@keyframes rs-settle { from { transform: translateY(12px) rotate(-9deg); opacity: 0; } to { transform: rotate(-3deg); opacity: 1; } }
.rs-manual-h { grid-area: head; align-self: center; }
.rs-manual .kicker { margin: 0 0 6px; color: var(--mint); }
.rs-manual h3 { color: #fff; }
.rs-manual-p { grid-area: text; font-size: var(--t-body-sm-size); line-height: var(--t-body-sm-lh); color: rgba(255, 255, 255, 0.8); }
.rs-manual .btn { grid-area: btn; }
/* A slim banner above the guides on tablets and small laptops. */
@media (min-width: 720px) and (max-width: 1279px) {
  .rs-manual { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "cover head btn" "cover text btn"; align-items: center; align-content: center; gap: 2px 24px; padding: 18px 26px; }
  .rs-cover { width: 74px; }
  .rs-manual-h { align-self: end; }
  .rs-manual-p { align-self: start; max-width: 64ch; }
  .rs-manual .btn { white-space: nowrap; }
}
@media (max-width: 719px) { .rs-cover { width: 92px; } }

/* ------------------------------------------------------------------ scrolling rows (guides on phones, lessons) */
.rs-track { list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--teal-line) var(--line);
  /* room inside the scroller for focus rings and hover shadows, which its overflow would otherwise cut off
     (the widest ring is 3px plus a 4px offset) */
  padding: 8px 8px 12px; margin: -8px -8px -4px; scroll-padding-inline: 8px; }
/* Every card is positioned, so the visually hidden text inside one (position: absolute) stays inside its row.
   Without this it has no positioned ancestor within the row, escapes the row's clip and, while the row is
   scrolling, makes the whole page wider than the screen. */
.rs-track > li { position: relative; }
.rs-track::-webkit-scrollbar { height: 8px; }
.rs-track::-webkit-scrollbar-track { background: var(--line); border-radius: 4px; }
.rs-track::-webkit-scrollbar-thumb { background: var(--teal-line); border-radius: 4px; }
/* below the page's full width the lesson row runs to the screen edge, so the next card shows */
@media (max-width: 1400px) { .rs-lessons { margin-inline: calc(var(--px) * -1); padding-inline: var(--px); scroll-padding-inline: var(--px); } }

/* ------------------------------------------------------------------ guides */
.rs-docs { min-width: 0; }
.rs-more { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; flex: 1 1 300px; max-width: 380px; min-height: 56px; margin-left: auto; padding: 9px 16px; border: 1.5px solid var(--teal-line); border-radius: 12px; background: #fff; color: var(--ink); transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s; }
.rs-more .rs-ico { width: 24px; height: 24px; color: var(--teal-ink); }
.rs-more-t b { display: block; font-size: var(--t-body-sm-size); font-weight: var(--t-semibold); line-height: 1.375; }
.rs-more-t small { display: block; color: var(--mute); }
.rs-more-go { font-size: var(--t-h4-size); line-height: 1; color: var(--teal-ink); }
@media (max-width: 899px) { .rs-head { column-gap: 20px; } .rs-more { flex-basis: 280px; } }
@media (max-width: 719px) { .rs-more { flex-basis: 100%; max-width: none; margin-left: 0; } }
.rs-more:hover { background: var(--teal); border-color: var(--teal); color: #fff; transform: translateY(-1px); }
.rs-more:hover .rs-ico, .rs-more:hover .rs-more-go { color: #fff; }
.rs-more:hover .rs-more-t small { color: #fff; }

.rs-doclist { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 959px) {
  .rs-doclist { display: flex; margin-inline: calc(var(--px) * -1); padding-inline: var(--px); scroll-padding-inline: var(--px); }
  .rs-doclist > li { flex: 0 0 clamp(158px, 40vw, 200px); scroll-snap-align: start; }
}

/* A tile: the first page of the real PDF on a paper-gray ground, the PDF badge and a download mark above it */
.rs-doc { display: block; color: var(--ink); border-radius: 14px; }
.rs-doc:focus-visible { outline-offset: 4px; border-radius: 14px; }
.rs-doc-pg { display: block; padding: 8px 12px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--wash2); transition: border-color 0.25s, background-color 0.25s; }
.rs-doc-bar { display: flex; align-items: center; justify-content: space-between; min-height: 32px; margin-bottom: 8px; }
.rs-doc-badge { display: inline-block; padding: 3px 9px; border: 1px solid var(--line2); border-radius: 6px; background: #fff; color: var(--teal-ink); font-size: var(--t-spec-label-size); font-weight: var(--t-regular); line-height: var(--t-spec-label-lh); text-transform: uppercase; }
.rs-doc-dl { display: grid; place-items: center; width: 32px; height: 32px; border: 1.5px solid var(--teal-line); border-radius: 50%; background: #fff; color: var(--teal-ink); transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.rs-doc-dl .rs-ico { width: 16px; height: 16px; }
.rs-doc-pg img { width: 100%; height: auto; border-radius: 2px; background: #fff; box-shadow: 0 1px 2px rgba(34, 32, 33, 0.16), 0 16px 24px -16px rgba(34, 32, 33, 0.55); transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.45s; }
.rs-doc-t { display: block; margin-top: 10px; font-size: var(--t-body-sm-size); font-weight: var(--t-semibold); line-height: 1.375; color: var(--ink); text-wrap: balance; transition: color 0.2s; }
.rs-doc-d { display: block; margin-top: 3px; font-size: var(--t-small-size); font-weight: var(--t-regular); line-height: var(--t-small-lh); color: var(--mute); }
.rs-doc:hover .rs-doc-pg, .rs-doc:focus-visible .rs-doc-pg { border-color: var(--teal-line); background: var(--bq-tint); }
.rs-doc:hover .rs-doc-pg img, .rs-doc:focus-visible .rs-doc-pg img { transform: translateY(-5px); box-shadow: 0 2px 4px rgba(34, 32, 33, 0.14), 0 24px 30px -16px rgba(34, 32, 33, 0.6); }
.rs-doc:hover .rs-doc-dl, .rs-doc:focus-visible .rs-doc-dl { background: var(--teal); border-color: var(--teal); color: #fff; }
.rs-doc:hover .rs-doc-dl .rs-ico { animation: rs-drop 0.55s ease-out; }
.rs-doc:hover .rs-doc-t, .rs-doc:focus-visible .rs-doc-t { color: var(--teal-ink); }
@keyframes rs-drop { from { transform: translateY(-4px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ------------------------------------------------------------------ partner lessons */
.rs-lessons { --vis: 3.5; --gaps: 3; --gap: 20px; display: flex; gap: var(--gap); }
.rs-lsn { flex: 0 0 calc((100% - var(--gaps) * var(--gap)) / var(--vis)); min-width: 0; scroll-snap-align: start; }
@media (max-width: 1099px) { .rs-lessons { --vis: 3.2; } }
@media (max-width: 899px) { .rs-lessons { --vis: 2.2; --gaps: 2; } }
@media (max-width: 639px) { .rs-lessons { --vis: 1.2; --gaps: 1; --gap: 16px; } }
.rs-lsn .yt { transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s, border-color 0.25s; }
.rs-lsn a.yt:hover, .rs-lsn a.yt:focus-visible { transform: translateY(-3px); border-color: var(--teal-line); box-shadow: 0 22px 36px -26px rgba(34, 32, 33, 0.6); }
.rs-lsn .yt .play { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
.rs-lsn .yt .play::after { border-width: 11px 0 11px 17px; margin-left: 5px; }
.rs-lsn .yt .play::before { content: ""; position: absolute; inset: -7px; border: 2px solid var(--mint); border-radius: 50%; opacity: 0; }
.rs-lsn a.yt:hover .play::before, .rs-lsn a.yt:focus-visible .play::before { animation: rs-ring 1.2s ease-out; }
@keyframes rs-ring { from { opacity: 0.9; transform: scale(0.82); } to { opacity: 0; transform: scale(1.45); } }
.rs-lsn .yt.rs-live:focus-visible { outline: 3px solid var(--teal-line); outline-offset: 3px; }
.rs-lsn .yt iframe { animation: rs-fade 0.45s ease-out both; }
@keyframes rs-fade { from { opacity: 0; } to { opacity: 1; } }

/* Playing: the lesson line gains a Close button, named "Close video" for assistive technology (Escape does
   the same). Its 44px target overlaps the line's own margins, so the card does not grow. The button never
   wraps; on a very narrow card it is the lesson line that gives way. */
.rs-lsn.is-playing .vid-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rs-close { display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 44px; margin: -14px -12px -14px 0; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--teal-ink); font-size: var(--t-eyebrow-size); font-weight: var(--t-regular); line-height: 1; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background-color 0.2s; }
.rs-close:hover { background: var(--teal-t); }
.rs-close .rs-ico { width: 16px; height: 16px; }

/* Arrow buttons, added by learn.js when the row scrolls. The two buttons' room is kept free from the
   start, so the title does not move when they appear. */
.rs-ctrl { display: flex; align-items: center; gap: 10px; flex: none; }
.rs-head-s .rs-ctrl { min-width: 98px; min-height: 44px; }
.rs-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--teal-line); border-radius: 50%; background: #fff; color: var(--teal-ink); cursor: pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, transform 0.15s; }
.rs-btn:hover { background: var(--teal); border-color: var(--teal); color: #fff; }
.rs-btn:active { transform: scale(0.94); }
.rs-btn[aria-disabled="true"] { opacity: 0.4; cursor: default; background: #fff; border-color: var(--teal-line); color: var(--teal-ink); transform: none; }

/* ------------------------------------------------------------------ reveal on scroll
   learn.js adds .rs-anim to the section only when motion is allowed; without it, or without
   JavaScript, everything is simply there. Each group rises with the site's "rise" keyframes, one
   card after the other. */
.rs-anim [data-rise="group"]:not(.in):not(.seen) > *, .rs-anim [data-rise="self"]:not(.in):not(.seen) { opacity: 0; }
.rs-anim [data-rise="group"].in > * { animation: rise 0.8s ease-out both; animation-delay: calc(min(var(--i, 0), 5) * 80ms); }
.rs-anim [data-rise="self"].in { animation: rise 0.8s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .rs-anim [data-rise="group"] > *, .rs-anim [data-rise="self"] { opacity: 1 !important; animation: none !important; }
  .rs-track { scroll-behavior: auto; }
}
@media print { .rs-anim [data-rise="group"] > *, .rs-anim [data-rise="self"] { opacity: 1 !important; animation: none !important; } }