/* Additions of the platform to the Vendellek design (kept out of the original site.css). */

/* documents under a page's text: certificates, diplomas (PDF or scans) */
.docs { margin-top: 8px; margin-bottom: 56px; }
.docs > p { color: var(--muted); }
.docs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 22px 18px; margin-top: 18px; }
.doc-card { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.doc-card a { display: block; position: relative; text-decoration: none; color: var(--ink); }
.doc-card img, .doc-card .doc-blank { width: 100%; aspect-ratio: 210 / 297; object-fit: cover; object-position: top; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 8px 22px rgba(29,39,33,.12); transition: transform .2s, box-shadow .2s; }
.doc-card a:hover img, .doc-card a:hover .doc-blank { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 14px 30px rgba(29,39,33,.18); }
.doc-card .doc-blank { display: grid; place-items: center; color: var(--muted); font-weight: 700; letter-spacing: .08em; }
.doc-kind { position: absolute; left: 8px; bottom: 8px; font: 700 .68rem/1 var(--sans, inherit); letter-spacing: .06em; padding: 5px 8px;
  border-radius: 999px; background: var(--forest); color: #fff; }
.doc-kind.pdf { background: #8a3d33; }
.doc-card figcaption { font-weight: 600; font-size: .95rem; line-height: 1.35; overflow-wrap: anywhere; }
.doc-card figcaption small { display: block; font-weight: 400; color: var(--muted); font-size: .82rem; margin-top: 2px; }
@media (max-width: 560px) { .docs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; } }

/* blocks of the breeder's own pages (shared styles: /assets/blocks.css) in the colours of this design */
:root { --blk-accent: var(--forest); --blk-soft: var(--surface); --blk-line: var(--line); --blk-muted: var(--muted);
  --blk-head: var(--font-head); --blk-card: var(--surface); --blk-card-on-soft: var(--bg); --blk-radius: var(--radius); --blk-radius-sm: var(--radius-sm); }
.bg-soft { border-block: 1px solid var(--line); }
.blk-page { padding-bottom: 56px; }
.blk-page > .blk:last-child:not([class*="bg-"]) { padding-bottom: 24px; }
.blk .section-head { margin-bottom: 20px; }
.blk .grid.kittens { margin-top: 0; }
.blk-cta .btn { margin-top: 4px; }

/* show titles by rank (the World Winners already have their gold strip): the other Winner shows silver,
   Junior Winner bronze; the card's edge, a light tint and the medal take the colour */
.i-medal { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22 fill=%22currentColor%22%3E%3Cpath d=%22M216%2C96A88%2C88%2C0%2C1%2C0%2C72%2C163.83V240a8%2C8%2C0%2C0%2C0%2C11.58%2C7.16L128%2C225l44.43%2C22.21A8.07%2C8.07%2C0%2C0%2C0%2C176%2C248a8%2C8%2C0%2C0%2C0%2C8-8V163.83A87.85%2C87.85%2C0%2C0%2C0%2C216%2C96ZM56%2C96a72%2C72%2C0%2C1%2C1%2C72%2C72A72.08%2C72.08%2C0%2C0%2C1%2C56%2C96ZM168%2C227.06l-36.43-18.21a8%2C8%2C0%2C0%2C0-7.16%2C0L88%2C227.06V174.37a87.89%2C87.89%2C0%2C0%2C0%2C80%2C0ZM128%2C152A56%2C56%2C0%2C1%2C0%2C72%2C96%2C56.06%2C56.06%2C0%2C0%2C0%2C128%2C152Zm0-96A40%2C40%2C0%2C1%2C1%2C88%2C96%2C40%2C40%2C0%2C0%2C1%2C128%2C56Z%22/%3E%3C/svg%3E"); }
.title-card { --tier: var(--forest); }
.title-card.tier-gold { --tier: #b8892b; } .title-card.tier-silver { --tier: #8d98a3; } .title-card.tier-bronze { --tier: #b0703a; }
.title-card.tier-gold, .title-card.tier-silver, .title-card.tier-bronze { border-top: 3px solid var(--tier); background: color-mix(in oklab, var(--tier) 8%, var(--surface)); }
.title-card h3 { display: flex; align-items: center; gap: 8px; }
.title-card h3 .i { color: var(--tier); width: 1.25em; height: 1.25em; }
.title-grid { align-items: start; }
.ww-badge .i { margin-right: 6px; }

/* Vendellek's kitten card lifts a little under the pointer when it leads to the kitten's page */
.card.kitten.has-link { transition: box-shadow .2s, transform .2s; }
.card.kitten.has-link:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(31, 42, 36, .12); }