/* bimdb.openbim.dk: the landing page's own layout. The look (fonts, colours, header, footer) comes from the
   shared openbim.dk kit, linked before this file: https://openbim.dk/kit/v1/buahuas.css and kit.css. */

.bd-hero { padding: clamp(2rem, 6vw, 4.5rem) 0 1rem; }
.bd-eyebrow {
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-display); text-transform: uppercase; color: var(--ob-muted); margin-bottom: .75rem;
}
.bd-hero h1 { font-size: clamp(var(--text-4xl), 7vw, var(--text-7xl)); margin-bottom: .3em; }
.bd-hero .ob-lede { max-width: 46ch; }
.bd-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 .5rem; padding: 0; list-style: none; }
.bd-tags li {
  border: 2px solid var(--ob-ink); padding: .1rem .6rem; font-family: var(--font-display);
  font-size: var(--text-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-wide);
}
.bd-tags li.bd-warn { background: var(--color-bauhaus-yellow-100); }
.bd-licence { color: var(--ob-muted); font-size: var(--text-sm); }

.bd-section { margin-top: clamp(2.5rem, 6vw, 4rem); }
.bd-section > h2 { border-top: 2px solid var(--ob-ink); padding-top: .9rem; }
.bd-section > p { max-width: var(--ob-measure); }

/* try it: three ways into the demo */
.bd-try { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.bd-button {
  display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border: 2px solid var(--ob-ink);
  color: var(--ob-ink); text-decoration: none; font-family: var(--font-display); font-weight: var(--font-weight-semibold);
  background: var(--ob-paper);
}
.bd-button.bd-primary { background: var(--ob-logo-yellow, #f0cd6b); }
.bd-button:hover { background: var(--ob-ink); color: var(--ob-paper); }
.bd-button small { font-weight: var(--font-weight-normal); color: inherit; opacity: .75; }

/* experiments: one research question each, with its measured answer */
.bd-grid {
  list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1.5rem 2rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
/* colour bars in the logo's colours (from the kit, with the same values as fallback) */
.bd-grid li { border-top: 6px solid var(--ob-logo-blue, #7ec5ed); padding-top: .75rem; min-width: 0; }
.bd-grid li:nth-child(4n + 2) { border-top-color: var(--ob-logo-pink, #f8aaa6); }
.bd-grid li:nth-child(4n + 3) { border-top-color: var(--ob-logo-yellow, #f0cd6b); }
.bd-grid li:nth-child(4n) { border-top-color: var(--ob-logo-green, #97d9ac); }
.bd-grid .bd-track {
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide); color: var(--ob-muted); text-transform: uppercase; margin: 0 0 .25rem;
}
.bd-grid h3 { font-size: var(--text-lg); margin-bottom: .35em; }
.bd-grid .bd-q { color: var(--ob-muted); font-size: var(--text-sm); margin-bottom: .5em; }
.bd-grid .bd-a { margin: 0; }

/* use cases */
.bd-table-wrap { overflow-x: auto; margin-top: 1.25rem; }
.bd-table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: var(--text-sm); }
.bd-table th, .bd-table td { text-align: left; vertical-align: top; padding: .55rem .75rem .55rem 0; border-bottom: 1px solid var(--ob-rule); }
.bd-table th { font-family: var(--font-display); font-weight: var(--font-weight-semibold); border-bottom: 2px solid var(--ob-ink); }

.bd-small { color: var(--ob-muted); font-size: var(--text-sm); max-width: var(--ob-measure); }

/* the foundation of a CDE: two definitions side by side, then the layers */
.bd-quotes { display: grid; gap: 1.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); margin: 1.5rem 0 2rem; }
.bd-quote { margin: 0; padding: 1rem 0 0 1.25rem; border-left: 6px solid var(--ob-logo-blue, #7ec5ed); }
.bd-quote-own { border-left-color: var(--ob-logo-yellow, #f0cd6b); }
.bd-quote blockquote { margin: 0; }
.bd-quote blockquote p { font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--leading-snug, 1.35); margin: 0; }
.bd-quote figcaption { margin-top: .75rem; font-size: var(--text-sm); color: var(--ob-muted); }
.bd-quote figcaption::before { content: "— "; }
.bd-quote-tr { margin: .5rem 0 0; font-size: var(--text-sm); color: var(--ob-muted); }

.bd-stack { display: grid; gap: .5rem; margin-top: 1.5rem; }
.bd-layer { border: 2px solid var(--ob-ink); padding: .75rem 1rem; display: grid; grid-template-columns: 9rem 1fr; gap: .25rem 1rem; align-items: baseline; }
.bd-layer h3 { font-size: var(--text-lg); margin: 0; grid-column: 1; grid-row: 1 / span 2; }
.bd-layer > p { margin: 0; grid-column: 2; }
.bd-layer .bd-when {
  font-family: var(--font-display); font-size: var(--text-2xs); font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ob-muted);
}
.bd-layer-next { border-style: dashed; }
.bd-layer-api { background: var(--ob-paper-deep); }
.bd-layer ul { grid-column: 2; list-style: none; padding: 0; margin: .25rem 0 0; display: grid; gap: .5rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 60rem) { .bd-layer ul { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 30rem) { .bd-layer ul { grid-template-columns: 1fr; } }
.bd-layer li { padding: .5rem .6rem; background: var(--ob-logo-blue, #7ec5ed); color: var(--ob-logo-ink, #141312); }
.bd-layer li:nth-child(4n + 2) { background: var(--ob-logo-pink, #f8aaa6); }
.bd-layer li:nth-child(4n + 3) { background: var(--ob-logo-yellow, #f0cd6b); }
.bd-layer li:nth-child(4n) { background: var(--ob-logo-green, #97d9ac); }
.bd-layer li strong { display: block; font-family: var(--font-display); }
.bd-layer li span { font-size: var(--text-sm); }
@media (max-width: 40rem) {
  .bd-layer { grid-template-columns: 1fr; }
  .bd-layer h3, .bd-layer > p, .bd-layer ul { grid-column: 1; grid-row: auto; }
}

/* how BIMdb stores IFC: one drawing per idea, IFC and BIMdb side by side */
.bd-figs { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 2.5rem 2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); }
.bd-fig { margin: 0; border-top: 6px solid var(--ob-logo-blue, #7ec5ed); padding-top: .75rem; }
.bd-figs li:nth-child(4n + 2) .bd-fig { border-top-color: var(--ob-logo-pink, #f8aaa6); }
.bd-figs li:nth-child(4n + 3) .bd-fig { border-top-color: var(--ob-logo-yellow, #f0cd6b); }
.bd-figs li:nth-child(4n) .bd-fig { border-top-color: var(--ob-logo-green, #97d9ac); }
.bd-fig h3 { font-size: var(--text-lg); margin-bottom: .75rem; }
.bd-fig figcaption p { margin: .6rem 0 0; font-size: var(--text-sm); }
.bd-fig figcaption b { font-family: var(--font-display); display: inline-block; min-width: 3.4rem; }
.bd-fig-svg { display: block; width: 100%; height: auto; overflow: visible; }
.bd-fig-svg text { font-family: var(--font-body); font-size: 12px; fill: var(--ob-logo-ink, #141312); }
.bd-fig-svg .tx-b { font-family: var(--font-display); font-weight: 600; font-size: 13px; }
.bd-fig-svg .tx-c { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10.5px; }
.bd-fig-svg .tx-n { font-size: 11.5px; }
.bd-fig-svg .tx-s { font-size: 11px; fill: var(--ob-muted, #4a4743); }
.bd-fig-svg .tx-h { font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.bd-fig-svg rect, .bd-fig-svg circle, .bd-fig-svg path { stroke: var(--ob-logo-ink, #141312); stroke-width: 2; }
.bd-fig-svg .ln { stroke: var(--ob-logo-ink, #141312); stroke-width: 1.6; }
.bd-fig-svg .ln-d { stroke: var(--ob-logo-ink, #141312); stroke-width: 1.4; stroke-dasharray: 4 4; fill: none; }
.bd-fig-svg .f-ink { fill: var(--ob-logo-ink, #141312); stroke: none; }
.bd-fig-svg .f-paper { fill: var(--ob-paper, #fbf8f1); }
.bd-fig-svg .f-blue { fill: var(--ob-logo-blue, #7ec5ed); }
.bd-fig-svg .f-pink { fill: var(--ob-logo-pink, #f8aaa6); }
.bd-fig-svg .f-yellow { fill: var(--ob-logo-yellow, #f0cd6b); }
.bd-fig-svg .f-green { fill: var(--ob-logo-green, #97d9ac); }