/* Core bedrijfsdata page (templates/pages/data.html). Hero bits only — the
   whole record-card component, .record-id and .record-favicon included, comes
   from theme.css. */


/* hero */
.da-hero { padding-top: clamp(1.5rem, 4vh, 3rem); }
.da-hero h1 { font-size: clamp(2rem, 4.2vw, 3rem); margin-top: 1.1rem; }
.da-lede { color: var(--ink-60); font-size: 1.12rem; margin-top: 1rem; max-width: 35rem; }
.da-note { color: var(--ink-40); font-size: .85rem; margin-top: 1.1rem; }

/* stats strip */

/* sources */
.da-sources { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.da-source { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.4rem 1.5rem; }
.da-source.da-core { border-color: var(--blue); box-shadow: var(--shadow-lg); }
.da-source-tag { font-family: var(--jbmono); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-deep); background: var(--blue-tint); padding: .22rem .55rem; border-radius: 99px; }
.da-source-tag.muted { color: var(--ink-60); background: var(--bg-soft); }
.da-source h3 { font-size: 1.1rem; margin: .9rem 0 .5rem; }
.da-source p { font-size: .88rem; color: var(--ink-60); line-height: 1.5; }
@media (max-width: 64rem) { .da-sources { grid-template-columns: 1fr 1fr; } }
@media (max-width: 34rem) { .da-sources { grid-template-columns: 1fr; } }

/* fields grid */
.da-fields-sec { background: var(--bg-soft); }
.da-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.da-field { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.2rem 1.3rem; }
.da-field h3 { font-size: 1.02rem; }
.da-field p { font-size: .88rem; color: var(--ink-60); margin-top: .4rem; line-height: 1.5; }
.da-fields-more { margin-top: 1.3rem; text-align: center; color: var(--ink-60); font-size: .92rem; line-height: 1.6; }
.da-fields-more a { color: var(--blue-deep); font-weight: 600; }
@media (max-width: 56rem) { .da-fields { grid-template-columns: 1fr 1fr; } }
@media (max-width: 34rem) { .da-fields { grid-template-columns: 1fr; } }

/* proof / provenance */
.da-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.3rem; }

/* ways to use */
.da-ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.da-way { display: block; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.3rem 1.4rem; transition: border-color .15s, box-shadow .15s, transform .15s; }
.da-way:hover { border-color: var(--blue); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.da-way h3 { font-size: 1.05rem; color: var(--blue-deep); }
.da-way p { font-size: .88rem; color: var(--ink-60); margin-top: .4rem; line-height: 1.5; }
@media (max-width: 56rem) { .da-ways { grid-template-columns: 1fr 1fr; } }
@media (max-width: 34rem) { .da-ways { grid-template-columns: 1fr; } }

/* bedrijfscategorieën browse + search */
.da-cat-sec { background: var(--bg-soft); }
.da-cat-search { display: flex; align-items: center; gap: .6rem; max-width: 34rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: .8rem 1.1rem; margin-bottom: 1.4rem; color: var(--ink-40); }
.da-cat-search input { flex: 1; min-width: 0; border: none; outline: none; font: inherit; color: var(--ink); background: none; }
.da-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .7rem; }
.da-cat { display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: .85rem 1.1rem; transition: border-color .15s, box-shadow .15s, transform .15s; }
.da-cat:hover { border-color: var(--blue); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.da-cat-name { font-weight: 600; font-size: .96rem; }
.da-cat-count { font-family: var(--jbmono); font-size: .72rem; color: var(--ink-40); white-space: nowrap; }
.da-cat-empty { margin-top: 1rem; color: var(--ink-60); }
.da-cat-empty[hidden] { display: none; }
.da-cat-foot { margin-top: 1.3rem; }
.da-cat-foot a { color: var(--blue-deep); font-weight: 600; text-decoration: none; }