/* ============================================================
   Bouwsteenwinkel — Shared theme landing-page styles
   Used by technic.html, star-wars.html, city.html, etc.
   ============================================================ */

/* HERO */
.theme-hero { padding: 56px 0 72px; background: var(--off); border-bottom: 1px solid var(--gray-line); position: relative; overflow: hidden; }
.theme-hero::before { content: ''; position: absolute; top: -200px; right: -150px; width: 540px; height: 540px; background: radial-gradient(circle, var(--cream) 0%, transparent 70%); z-index: 0; }
.theme-hero .wrap { position: relative; z-index: 1; }
.theme-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
@media (max-width: 900px) { .theme-hero-grid { grid-template-columns: 1fr; gap: 32px; } }
.theme-hero h1 { font-size: clamp(40px, 5.4vw, 68px); letter-spacing: -0.03em; line-height: 1; font-weight: 700; margin: 16px 0; }
.theme-hero h1 .italic { font-style: italic; color: var(--navy-3); font-weight: 600; }
.theme-hero h1 .hl { background: linear-gradient(transparent 60%, var(--yellow) 60%, var(--yellow) 92%, transparent 92%); padding: 0 6px; }
.theme-hero .lede { color: var(--text-2); font-size: 17px; line-height: 1.6; max-width: 480px; margin-bottom: 24px; }

.theme-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 480px; }
.theme-stat { background: var(--white); border: 1px solid var(--gray-line); border-radius: var(--r-md); padding: 16px 18px; }
.theme-stat .v { font-family: var(--display); font-size: 24px; font-weight: 700; color: var(--navy); letter-spacing: -0.02em; line-height: 1; }
.theme-stat .v .accent { color: var(--yellow); }
.theme-stat .l { font-size: 11px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 6px; }

.theme-hero-visual { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; position: relative; }
.theme-hero-visual > .set-card-wrap:nth-child(1) { transform: rotate(-2deg); }
.theme-hero-visual > .set-card-wrap:nth-child(2) { transform: rotate(1.5deg); margin-top: 24px; }
.theme-hero-visual > .set-card-wrap:nth-child(3) { transform: rotate(1deg); margin-top: -14px; }
.theme-hero-visual > .set-card-wrap:nth-child(4) { transform: rotate(-1deg); }

/* WHY THIS THEME */
.theme-why { padding: 96px 0; background: var(--white); border-bottom: 1px solid var(--gray-line); }
.theme-why-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 56px; align-items: start; }
@media (max-width: 900px) { .theme-why-grid { grid-template-columns: 1fr; gap: 32px; } }
.theme-why h2 { font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -0.025em; line-height: 1.05; font-weight: 700; margin-bottom: 14px; }
.theme-why h2 .italic { font-style: italic; color: var(--navy-3); font-weight: 600; }
.theme-why p { color: var(--text-2); font-size: 15.5px; line-height: 1.7; margin-bottom: 14px; }
.theme-why p strong { color: var(--navy); font-weight: 800; }
.theme-why h3 { font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin: 22px 0 10px; }

.theme-why-facts { background: var(--cream); border-radius: var(--r-md); padding: 24px 26px; }
.theme-why-facts h4 { font-family: var(--display); font-size: 18px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 14px; }
.theme-why-facts dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; }
.theme-why-facts dt { color: var(--text-muted); font-size: 13px; font-weight: 700; }
.theme-why-facts dd { margin: 0; color: var(--navy); font-weight: 800; font-size: 13.5px; }

/* SETS SHOWCASE */
.theme-sets { padding: 96px 0; background: var(--gray-soft); }
.theme-sets .head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 36px; flex-wrap: wrap; }
.theme-sets .head .left { max-width: 520px; }
.theme-sets .head h2 { font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.025em; line-height: 1.1; font-weight: 700; margin-bottom: 8px; }
.theme-sets .head h2 .italic { font-style: italic; color: var(--navy-3); font-weight: 600; }
.theme-sets .head p { color: var(--text-2); font-size: 15px; }
.theme-sets .head a { color: var(--navy); font-weight: 800; }

/* SUBCATEGORIES */
.theme-subcats { padding: 80px 0; background: var(--white); }
.subcat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .subcat-grid { grid-template-columns: 1fr; } }
.subcat-card {
  background: var(--off);
  border: 1px solid var(--gray-line);
  border-radius: var(--r-md);
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.2s, border-color 0.2s, background 0.2s;
}
.subcat-card:hover { transform: translateY(-3px); border-color: var(--navy); background: var(--white); text-decoration: none; }
.subcat-card .name { font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--navy); letter-spacing: -0.02em; }
.subcat-card .desc { color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.subcat-card .foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--gray-line); font-size: 12.5px; font-weight: 700; }
.subcat-card .foot .count { color: var(--text-muted); }
.subcat-card .foot .arrow { color: var(--navy); transition: transform 0.2s; }
.subcat-card:hover .foot .arrow { transform: translateX(4px); }

/* BUYER GUIDE */
.theme-guide { padding: 96px 0; background: var(--off); }
.guide-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.guide-head h2 { font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.025em; line-height: 1.1; font-weight: 700; margin: 14px 0; }
.guide-head h2 .italic { font-style: italic; color: var(--navy-3); font-weight: 600; }
.guide-head p { color: var(--text-2); font-size: 15.5px; line-height: 1.65; }
.guide-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .guide-cards { grid-template-columns: 1fr; } }
.guide-card {
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-radius: var(--r-md);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.guide-card .num { font-family: var(--display); font-size: 36px; font-weight: 700; color: var(--yellow); letter-spacing: -0.03em; line-height: 1; }
.guide-card h3 { font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.guide-card p { color: var(--text-2); font-size: 14.5px; line-height: 1.55; }
.guide-card .pick { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--gray-line); font-size: 13px; }
.guide-card .pick strong { color: var(--navy); font-weight: 800; }
.guide-card .pick a { color: var(--navy); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; }

/* FAQ */
.theme-faq { padding: 96px 0; background: var(--white); border-top: 1px solid var(--gray-line); }
.theme-faq .head { text-align: center; margin-bottom: 40px; }
.theme-faq .head h2 { font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.025em; line-height: 1.05; font-weight: 700; margin: 14px 0; }
.theme-faq .head h2 .italic { font-style: italic; color: var(--navy-3); font-weight: 600; }
.theme-faq-list { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.theme-faq-list details { background: var(--white); border: 1px solid var(--gray-line); border-radius: var(--r-md); }
.theme-faq-list details[open] { border-color: var(--navy); }
.theme-faq-list summary { list-style: none; cursor: pointer; padding: 22px 26px; display: flex; justify-content: space-between; align-items: center; font-size: 15.5px; font-weight: 800; color: var(--navy); gap: 18px; }
.theme-faq-list summary::-webkit-details-marker { display: none; }
.theme-faq-list .chev { width: 30px; height: 30px; border-radius: 50%; background: var(--gray-soft); display: grid; place-items: center; font-size: 20px; line-height: 1; color: var(--navy); transition: transform 0.25s, background 0.15s; flex-shrink: 0; }
.theme-faq-list details[open] .chev { transform: rotate(45deg); background: var(--yellow); }
.theme-faq-list .answer { padding: 0 26px 22px; color: var(--text-2); font-size: 14.5px; line-height: 1.7; max-width: 760px; }
.theme-faq-list .answer p + p { margin-top: 10px; }

/* CTA BANNER */
.theme-cta { background: var(--navy); color: var(--white); padding: 56px 0; text-align: center; position: relative; overflow: hidden; }
.theme-cta::before { content: ''; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: var(--navy-2); opacity: 0.5; top: -160px; right: -100px; }
.theme-cta .wrap { position: relative; z-index: 1; }
.theme-cta h2 { color: var(--white); font-size: clamp(28px, 3.4vw, 44px); font-weight: 700; letter-spacing: -0.025em; margin-bottom: 12px; }
.theme-cta h2 .italic { color: var(--yellow); font-style: italic; }
.theme-cta p { color: rgba(255,255,255,0.7); font-size: 16px; max-width: 480px; margin: 0 auto 28px; }