/* Home resources (TODO 00001.5.13). FINAL design/home/inspiration/sections/resources/r3/v3.png.
   The margin rule (section 7): a 2px navy rule down the left of each document card's text block; under it a
   1px line hairline, then a navy download link with the 20px download icon. White ground, 1px line hairline on top. */
.p-home-resources {
  box-sizing: border-box; background: var(--wp--preset--color--white);
  border-top: 1px solid var(--wp--preset--color--line);
  padding: var(--wp--custom--section--desktop) var(--wp--custom--gutter--desktop);
}
.p-home-resources *, .p-home-resources *::before, .p-home-resources *::after { box-sizing: border-box; }
.p-home-resources__inner { max-width: var(--wp--custom--layout--wide); margin-inline: auto; }
.p-home-resources__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--wp--preset--spacing--60);
  margin-bottom: var(--wp--preset--spacing--90);
}
.p-home-resources__eyebrow {
  display: flex; align-items: center; gap: var(--wp--preset--spacing--50); margin: 0;
  color: var(--wp--preset--color--slate); font-size: var(--wp--preset--font-size--label);
  font-weight: var(--wp--custom--font-weight--label); letter-spacing: var(--wp--custom--letter-spacing--label);
  line-height: 1.3; text-transform: uppercase;
}
.p-home-resources__eyebrow::before { content: ""; flex: none; width: 32px; height: 3px; background: var(--wp--preset--color--orange); }
.p-home-resources .p-home-resources__title {
  margin: var(--wp--preset--spacing--40) 0 0; color: var(--wp--preset--color--navy);
  font-size: var(--wp--preset--font-size--h-2); font-weight: var(--wp--custom--font-weight--h-2);
  letter-spacing: var(--wp--custom--letter-spacing--h-2); line-height: 1.15;
}
.p-home-resources__all { margin: 0; flex: none; }
.p-home-resources__all a {
  display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--30); min-height: var(--wp--custom--touch);
  color: var(--wp--preset--color--navy); font-size: var(--wp--preset--font-size--body); font-weight: 600; text-decoration: none;
}
.p-home-resources__all a::after {
  content: ""; width: 20px; height: 20px; background: currentColor; transition: transform 0.2s cubic-bezier(.22, .61, .36, 1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.p-home-resources a:focus-visible {
  outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--orange); outline-offset: var(--wp--custom--focus--offset);
}
@media (hover: hover) and (pointer: fine) {
  .p-home-resources__all a:hover::after { transform: translateX(3px); }
  .p-home-resources__dl:hover span { text-decoration-thickness: 2px; }
}
.p-home-resources__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--60); }
.p-home-resources__card {
  display: flex; flex-direction: column; padding: var(--wp--preset--spacing--70);
  background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius--default);
}
.p-home-resources__entry { border-left: 2px solid var(--wp--preset--color--navy); padding-left: var(--wp--preset--spacing--60); }
.p-home-resources__purpose {
  margin: 0; color: var(--wp--preset--color--slate); font-size: var(--wp--preset--font-size--label);
  font-weight: var(--wp--custom--font-weight--label); letter-spacing: var(--wp--custom--letter-spacing--label);
  line-height: 1.3; text-transform: uppercase;
}
.p-home-resources .p-home-resources__name {
  margin: var(--wp--preset--spacing--30) 0 0; color: var(--wp--preset--color--navy);
  font-size: var(--wp--preset--font-size--h-3); font-weight: var(--wp--custom--font-weight--h-1); line-height: 1.25;
}
.p-home-resources__desc { margin: var(--wp--preset--spacing--30) 0 0; color: var(--wp--preset--color--slate); font-size: var(--wp--preset--font-size--body); line-height: 1.6; }
.p-home-resources__dl {
  display: flex; align-items: center; gap: var(--wp--preset--spacing--40); min-height: var(--wp--custom--touch);
  margin-top: auto; padding-top: var(--wp--preset--spacing--50);
  border-top: 1px solid var(--wp--preset--color--line);
  color: var(--wp--preset--color--navy); font-size: var(--wp--preset--font-size--body); font-weight: 500;
  text-decoration: none;
}
.p-home-resources__entry { margin-bottom: var(--wp--preset--spacing--70); }
.p-home-resources__dl span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (max-width: 991.98px) {
  .p-home-resources { padding: var(--wp--custom--section--tablet) var(--wp--custom--gutter--tablet); }
  .p-home-resources__grid { gap: var(--wp--preset--spacing--50); }
  .p-home-resources__card { padding: var(--wp--preset--spacing--60); }
}
@media (max-width: 719.98px) {
  .p-home-resources__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599.98px) {
  .p-home-resources { padding: var(--wp--custom--section--phone) var(--wp--custom--gutter--phone); }
  .p-home-resources__head { flex-direction: column; align-items: flex-start; margin-bottom: var(--wp--preset--spacing--70); }
  .p-home-resources__card { padding: var(--wp--preset--spacing--60); }
}
/* Motion (stage 10, 00001.5.22.6; design/FINDINGS.md "Motion inventory: resources"). inc/motion.php sets data-mo on the
   eyebrow (hook), the title (rise 150 ms), View all resources (rise 300 ms) and each card (hook, 450 ms, pinned, no
   cascade). These are the hook start states, all under html.mo and only until the card's .mo-in, so JS off, reduced
   motion and print show the approved look. Story move: each card's margin rule (the entry's border-left) draws down,
   the three cards 120 ms apart, and the entry is written beside it as the rule passes; the download link rises last. */
.mo .p-home-resources__eyebrow[data-mo]::before { transform-origin: 0 50%; transition: transform var(--mo-dur) var(--mo-ease) var(--mo-delay, 0ms); }
.mo .p-home-resources__eyebrow[data-mo]:not(.mo-in)::before { transform: scaleX(0); }
/* Card stagger: 0 / 120 / 240 ms by position, written here because the kit's batch index also counts the head's entries. */
.mo .p-home-resources__card[data-mo]:nth-child(2) { --nv-card: 1; }
.mo .p-home-resources__card[data-mo]:nth-child(3) { --nv-card: 2; }
/* The rule draw is a mask wipe: a white cover sits exactly over the real border-left and scales away toward the bottom,
   so the navy rule appears top down and the approved border is painted the whole time. The cover and the entry's
   position live only until the card's .mo-done (its 2.5 s timer, GO-043: the cover's transitionend fires on the entry,
   not the card), when the cover is already scaleY(0); nothing positioned stays at rest (GO-041). The cover runs 1 px
   past the entry's bottom (white on the white card) so the composited cover's anti-aliased bottom edge never lets a
   faint sliver of the rule's last, fractional pixel row show while it scales (seen at 0.8 s in the first build). */
.mo .p-home-resources__card[data-mo]:not(.mo-done) .p-home-resources__entry { position: relative; }
.mo .p-home-resources__card[data-mo]:not(.mo-done) .p-home-resources__entry::before {
  content: ""; position: absolute; top: 0; bottom: -1px; left: -2px; width: 2px; pointer-events: none;
  background: var(--wp--preset--color--white); transform-origin: 50% 100%;
  transition: transform 1.4s var(--mo-ease) calc(var(--mo-delay, 0ms) + var(--nv-card, 0) * var(--mo-stagger));
}
.mo .p-home-resources__card[data-mo].mo-in .p-home-resources__entry::before { transform: scaleY(0); }
/* The entry text fades by opacity only (a rise would leave the bordered entry), each line just after the rule front
   passes it. Children inherit the card's --mo-delay, so a late entry keeps them in step with the rule. */
.mo .p-home-resources__card[data-mo] .p-home-resources__purpose { --nv-line: 100ms; }
.mo .p-home-resources__card[data-mo] .p-home-resources__name { --nv-line: 250ms; }
.mo .p-home-resources__card[data-mo] .p-home-resources__desc { --nv-line: 400ms; }
.mo .p-home-resources__card[data-mo] .p-home-resources__purpose,
.mo .p-home-resources__card[data-mo] .p-home-resources__name,
.mo .p-home-resources__card[data-mo] .p-home-resources__desc {
  transition: opacity var(--mo-dur) var(--mo-ease) calc(var(--mo-delay, 0ms) + var(--nv-card, 0) * var(--mo-stagger) + var(--nv-line));
}
.mo .p-home-resources__card[data-mo] .p-home-resources__dl {
  transition: opacity var(--mo-dur) var(--mo-ease), transform var(--mo-dur) var(--mo-ease);
  transition-delay: calc(var(--mo-delay, 0ms) + var(--nv-card, 0) * var(--mo-stagger) + 600ms);
}
.mo .p-home-resources__card[data-mo]:not(.mo-in) .p-home-resources__purpose,
.mo .p-home-resources__card[data-mo]:not(.mo-in) .p-home-resources__name,
.mo .p-home-resources__card[data-mo]:not(.mo-in) .p-home-resources__desc { opacity: 0; }
.mo .p-home-resources__card[data-mo]:not(.mo-in) .p-home-resources__dl { opacity: 0; transform: translate3d(0, var(--mo-rise), 0); }
/* Phone: one card per row, each entering on its own scroll, so no stagger on top of the kit's late-entry cap. */
@media (max-width: 719.98px) {
  .mo .p-home-resources__card[data-mo]:nth-child(n) { --nv-card: 0; }
}