.jp-pattern-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 24px 0; }
.jp-pattern-card { min-width: 0; border: 1px solid #e6dfe4; border-radius: 12px; overflow: hidden; background: #fff; }
.jp-pattern-card { display: flex; flex-direction: column; }
.jp-pattern-card > a { display: flex; flex: 1; flex-direction: column; color: #302730; text-decoration: none; }
.jp-pattern-card > a:hover .jp-pattern-link { text-decoration: underline; }
.jp-pattern-card > a:focus-visible { outline: 3px solid #a3427c; outline-offset: -3px; }
.jp-pattern-image { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: #faf7f9; overflow: hidden; }
.jp-pattern-frame { display: block; width: 100%; height: 100%; }
.jp-pattern-card img { display: block; width: 100%; height: 100%; object-fit: contain; }
.jp-pattern-photo img { object-fit: cover; }
.jp-pattern-crop { display: block; position: relative; width: 100%; overflow: hidden; }
.jp-pattern-crop img { position: absolute; max-width: none; max-height: none; }
.jp-pattern-missing { padding: 16px; text-align: center; color: #665b63; }
.jp-pattern-copy { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 16px; overflow-wrap: anywhere; }
.jp-pattern-kind { font-size: 12px; color: #71646e; }
.jp-pattern-card h2 { margin: 0; font-size: 17px; line-height: 1.4; min-height: 2.8em;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.jp-pattern-footer { margin-top: auto; padding-top: 8px; display: flex; flex-direction: column; gap: 8px; font-size: 12px; line-height: 1.4; color: #71646e; }
.jp-pattern-byline, .jp-pattern-social { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; }
.jp-pattern-author { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jp-pattern-byline time { white-space: nowrap; }
.jp-pattern-palette { display: flex; align-items: center; gap: 4px; min-height: 16px; }
.jp-pattern-swatch { flex: 0 0 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px #30273040; }
.jp-pattern-more-colours { font-size: 12px; color: #71646e; }
.jp-pattern-facts { font-size: 12px; line-height: 24px; color: #665b63; max-height: 48px;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.jp-pattern-fact { display: inline-block; }
.jp-pattern-difficulty { display: inline-block; border-radius: 4px; padding: 0 4px; line-height: 20px; }
.jp-pattern-difficulty-easy { color: #315b4a; background: #edf5ef; }
.jp-pattern-difficulty-medium { color: #73532e; background: #faf1e5; }
.jp-pattern-difficulty-advanced { color: #713755; background: #f7eaf2; }
.jp-pattern-new { position: absolute; top: 8px; left: 8px; padding: 4px 8px; border-radius: 16px;
    color: #713755; background: #fff4fa; font-size: 12px; line-height: 16px; pointer-events: none; }
.jp-pattern-link { color: #853963; }
.jp-pattern-likes { color: #853963; white-space: nowrap; }
@media (min-width: 700px) { .jp-pattern-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1100px) { .jp-pattern-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 420px) { .jp-pattern-grid { gap: 12px; } .jp-pattern-copy { padding: 8px; } .jp-pattern-card h2 { font-size: 15px; } }
.jp-carousel { position: relative; aspect-ratio: 4 / 3; }
.jp-carousel-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.jp-carousel-track::-webkit-scrollbar { display: none; }
.jp-carousel-track > a { position: relative; flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.jp-carousel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; }
.jp-carousel video[data-playing="1"] { opacity: 1; }
.jp-carousel-controls[hidden] { display: none; }
.jp-carousel-dots { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; }
.jp-carousel button { border: 0; color: #302730; cursor: pointer; }
.jp-carousel-dots button { background: transparent; padding: 0; width: 32px; height: 32px; pointer-events: auto; display: grid; place-items: center; }
.jp-carousel-dots span { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px #665b63; }
.jp-carousel-dots [aria-current] span { background: #853963; }
.jp-carousel-arrow { display: none; position: absolute; top: calc(50% - 20px); width: 40px; height: 40px; border-radius: 50%; background: #ffffffeb; font-size: 28px; }
.jp-carousel-prev { left: 4px; }.jp-carousel-next { right: 4px; }
.jp-carousel button:focus-visible { outline: 3px solid #a3427c; outline-offset: -3px; }
@media (hover: hover) { .jp-carousel-arrow { display: block; opacity: 0; } .jp-carousel:hover .jp-carousel-arrow, .jp-carousel:focus-within .jp-carousel-arrow { opacity: 1; } .jp-carousel-arrow:disabled { visibility: hidden; } }