/* =====================================================================
pages/home.css: Home page blocks (rounds 2 and 3)
---------------------------------------------------------------------
Loaded on index.html only, AFTER pds.css. pds.css stays the shared
design system (tokens, components); this file holds the Home-only
blocks and the Home additions to shared components (Katie's round-2
and round-3 feedback: content/feedback-round-2-rescues-shelters.md,
content/feedback-round-3.md). The older Home blocks still in pds.css
section 7 (hero, results, pricing, the org teaser's top row) are
otherwise unchanged.
Components marked "SHARED CANDIDATE" are written generically so they
can move into pds.css (section 6) once another page needs them.
(0. Hero photo: folded into pds.css section 7 on 2026-10-30, code audit)
1. Membership snapshot .pds-membership .pds-tile__art (the tiles themselves: pds.css 6.18)
2. Reviews the R&S partner-quote component + ratings (both pds.css 8.6)
3. For Organizations .pds-pullquote (SHARED CANDIDATE)
Final CTA: the shared .pds-cta-band--pets (pds.css 6.15, Harry and the
cat peeking over the footer), no Home rules.
Round 3 removed the Home review cards (.pds-review-cards) and the
shelter logo strip (.pds-orgs__trusted): Katie wanted the quotes to
lead, styled like R&S, and no logo bar inside the purple section.
Breakpoints match pds.css: 1180, 1023 (tablet), 640, 500 (phone).
===================================================================== */
/* ---------------------------------------------------------------------
1. Membership snapshot ("Online dog and cat training that fits real life")
A short preview of /product: heading + one line, four EQUAL tiles
(brand illustration, title, one short line), then one link through.
No mocks here; the Membership page tells the full story.
Tiles: 4 across from 1024px, an even 2 × 2 on tablets, stacked on
phones (illustration beside the text, so the stack stays short).
--------------------------------------------------------------------- */
.pds-membership { padding-top: calc(var(--pds-section-y) * .75); }
.pds-membership .pds-lede { text-wrap: balance; }
/* The tiles are the shared equal tiles (pds.css 6.18, promoted from here
in round 4: 4 across, 2 × 2 on tablets, stacked on phones). Home adds
the brand illustration at the top of each tile, centred (Katie,
2026-10-29: a bit bigger, centred, one consistent style), and on
phones turns each tile into a short row with the illustration on the
left. */
.pds-tile__art { width: 136px; height: 136px; margin: 0 auto 22px; }
.pds-tile__art img { width: 100%; height: 100%; object-fit: contain; }
.pds-tile__art--zoom img { transform: scale(1.3); transform-origin: 40% 55%; } /* art with a lot of empty canvas (the lesson screens) */
.pds-membership .pds-sec-foot { margin-top: clamp(28px, 3vw, 40px); }
@media (max-width: 1180px) {
.pds-tile__art { width: 116px; height: 116px; margin-bottom: 18px; }
}
@media (max-width: 500px) { /* each tile a short row (the shared .pds-tiles--rows, pds.css 6.18), the picture smaller */
.pds-tile__art { width: 84px; height: 84px; }
}
/* ---------------------------------------------------------------------
2. Reviews ("Pet parents love Petcademy")
Round 3 (Katie): the same component and styling as the R&S "What
partners are saying" section (pds.css 8.6, .pds-partner-grid,
.pds-partner, .pds-partner--featured), so the quotes carry the
weight: a deep purple featured card with the quote in large type,
two white cards beside it. Three reviews, lettered avatars, no photos
and no "Show more" (Bailey and Katie, 2026-10-29). No pet photos.
The pet-parent additions (ratings, lettered avatars, the featured
card's layout, the full-width odd last card on tablets) moved to
pds.css 8.6 (".pds-reviews") when Membership became the second page
to use them. No Home-only rules are left here.
--------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
3. For Organizations: the Cole Wakefield quote
The partner quote closes the section as a typographic block (no
photo). Round 3 removed the shelter logo strip from Home (Katie: the
white bar inside the purple section looked wrong); logo bars stay on
the organization pages.
--------------------------------------------------------------------- */
/* SHARED CANDIDATE: typographic pull quote on a dark section. No photo and no
coloured side bar (site-wide rule). Centred quote, then a lockup: the partner's
logo (shown white), a hairline, the name and title. The quote text carries its
own curly quote marks; there is no decorative glyph.
“…”
Name Title, Organization */
.pds-pullquote { max-width: 1000px; margin: clamp(64px, 7vw, 104px) auto 0; text-align: center; }
.pds-pullquote__text p {
max-width: 34ch; margin-inline: auto; /* a comfortable measure: three balanced lines on laptops */
font-size: clamp(1.625rem, 1.12rem + 1.6vw, 2.625rem); font-weight: 500; line-height: 1.26;
letter-spacing: -.022em; color: #fff; text-wrap: balance;
}
.pds-pullquote__by { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: clamp(28px, 3vw, 40px); }
.pds-pullquote__logo { height: 58px; width: auto; flex: none; filter: brightness(0) invert(1); opacity: .92; }
.pds-pullquote__rule { width: 1px; height: 44px; flex: none; background: rgba(255, 255, 255, .28); }
.pds-pullquote__who { text-align: left; font-size: var(--pds-fs-meta); line-height: 1.5; color: var(--pds-on-dark); }
.pds-pullquote__who strong { display: block; font-size: var(--pds-fs-body-lg); color: #fff; }
@media (max-width: 500px) {
.pds-pullquote__by { flex-direction: column; gap: 14px; }
.pds-pullquote__rule { display: none; }
.pds-pullquote__logo { height: 50px; }
.pds-pullquote__who { text-align: center; }
}
/* =====================================================================
4. Results: the "Meet our team" link (copy doc, 2026-10-23; "team" since 2026-10-29)
---------------------------------------------------------------------
One text link on the dark results panel, under the trust line, to the
About page's trainers. It sits in line with the trust text (the trust
line's round icon is 40px wide with an 18px gap; 14px on phones, where
the icon is 32px), so the two read as one block.