/* ── Custom themes section (2.14): carousel of themed boards, the theme tiles, "use your own picture" ── */
.themes-sec{background:var(--soft);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.themes-eyebrow{display:block;text-align:center;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.themes-sec .carousel-slide img{border-color:rgba(20,15,30,.12);box-shadow:0 36px 70px -32px rgba(30,20,50,.55)}

.theme-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:860px;margin:36px auto 0;padding:0;list-style:none}
.theme-tile{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background-size:cover;background-position:center;border:1px solid var(--border);box-shadow:0 12px 26px -16px rgba(40,30,80,.45)}
.theme-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.66),rgba(0,0,0,0) 62%)}
.theme-tile span{position:absolute;left:12px;bottom:9px;z-index:1;color:#fff;font-weight:700;font-size:14px;line-height:1.2}
.theme-tile.own{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:#fff;border:1.5px dashed #b9b4c9;box-shadow:none}
.theme-tile.own::after{display:none}
.theme-tile.own span{position:static;color:var(--ink)}
.theme-tile.own i{font-style:normal;font-size:24px;line-height:1;color:var(--muted)}
@media(max-width:600px){.theme-strip{grid-template-columns:repeat(2,1fr)}}

.own-pic{display:grid;gap:28px;align-items:center;max-width:980px;margin:60px auto 0}
.own-pic h3{font-size:clamp(1.3rem,1rem+1vw,1.65rem);letter-spacing:-.015em;margin:0 0 10px;font-weight:800}
.own-pic p{margin:0 0 14px;color:var(--muted)}
.own-pic ul{margin:0;padding-left:18px;color:var(--muted)}
.own-pic li{margin:5px 0}
.own-pic li b{color:var(--ink)}
.own-pic img{width:100%;display:block;border-radius:var(--radius);border:1px solid var(--border);box-shadow:0 30px 60px -28px rgba(40,30,80,.45)}
@media(min-width:860px){.own-pic{grid-template-columns:1fr 1.15fr}}
/* ── Carousel (screenshots slider) ────────────────────────────── */
.carousel{margin:0 auto;max-width:860px}
.carousel-stage{position:relative}
.carousel-track{display:flex;overflow-x:auto;border-radius:var(--radius);-webkit-overflow-scrolling:touch;scrollbar-width:none}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-slide{flex:0 0 100%;min-width:0;margin:0}
.carousel-slide img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover;object-position:top center;background:#fff;border-radius:var(--radius);border:1px solid var(--border);box-shadow:0 20px 40px -22px rgba(60,20,45,.3)}
/* Source captions live in the slides for no-JS fallback; JS mirrors the active
   one into .carousel-cap and hides these to keep the arrows centred on the image. */
.carousel-ready .carousel-slide figcaption{display:none}
.carousel-slide figcaption{font-size:14px;color:var(--muted);text-align:center;margin-top:14px;padding:0 8px}
.carousel-slide figcaption b{color:var(--ink)}
.carousel-cap{min-height:2.6em;font-size:14px;color:var(--muted);text-align:center;margin:14px auto 0;max-width:640px;padding:0 8px}
.carousel-cap b{color:var(--ink)}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.94);color:var(--ink);font-size:26px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 18px -8px rgba(0,0,0,.45);transition:background .12s ease,border-color .12s ease}
.carousel-btn:hover{background:#fff;border-color:var(--ink)}
.carousel-btn.prev{left:12px}
.carousel-btn.next{right:12px}
.carousel-btn[hidden]{display:none}
.carousel-dots{display:flex;gap:8px;justify-content:center;margin-top:18px}
.carousel-dots button{width:9px;height:9px;padding:0;border:0;border-radius:999px;background:var(--border);cursor:pointer;transition:background .12s ease,transform .12s ease}
.carousel-dots button:hover{transform:scale(1.2)}
.carousel-dots button[aria-current="true"]{background:var(--accent)}