/* Design hub (/design/) and the Bath Studio page (/design/bath/). The studio's own look is studio.css + studio-waltos.css; this file is the site's part. */
.dh-grid { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.dh-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dh-card { background: var(--white); border: 1px solid var(--rule); display: flex; }
.dh-card-link { display: flex; flex-direction: column; width: 100%; color: inherit; text-decoration: none; }
.dh-card-link:hover .dh-card-cta, .dh-card-link:focus-visible .dh-card-cta { background: var(--spruce); }
.dh-card-link:focus-visible { outline: 3px solid var(--copper-dk); outline-offset: 2px; }
.dh-card-img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--paper-2); }
.dh-card-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.dh-card-title { font: 500 1.35rem/1.2 var(--display); color: var(--ink); }
.dh-card-text { color: var(--ink-2); line-height: 1.5; flex: 1; }
.dh-card-cta { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; margin-top: 4px; background: var(--copper-dk); color: var(--white); font: 600 .9rem/1 var(--sans); }
.dh-soon { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dh-soon-item { display: grid; gap: 6px; padding: 18px 20px; border: 1px dashed var(--ink-2); background: rgba(255, 255, 255, .6); }
.dh-soon-title { font: 500 1.15rem/1.2 var(--display); color: var(--ink); }
.dh-soon-text { color: var(--ink-2); }
.dh-soon-tag { justify-self: start; font: 600 .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--copper-dk); }
.dh-soon-note { margin: 16px 0 0; color: var(--ink-2); }
.dh-soon-note a, .design-this a { color: var(--copper-dk); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.design-this { margin: 6px 0 14px; }
.dh-grid-one { grid-template-columns: minmax(0, 1fr); }
.dh-grid-one .dh-card-link { flex-direction: row; }
.dh-grid-one .dh-card-img { width: 42%; aspect-ratio: 4 / 3; flex: none; }
.dh-grid-one .dh-card-body { justify-content: center; padding: 28px 32px; }
@media (max-width: 900px) { .dh-grid-one .dh-card-link { flex-direction: column; } .dh-grid-one .dh-card-img { width: 100%; } }
@media (max-width: 900px) { .dh-grid, .dh-grid-two, .dh-soon { grid-template-columns: 1fr; } .dh-card-img { aspect-ratio: 16 / 10; } }

/* The studio is a tool that wants the whole screen: the site header is 76px, so the studio takes that off its own height. */
.studio-page .gw { --gw-hdr: 76px; }
@media (max-width: 760px) {
  .studio-page .gw { --gw-hdr: 76px; --gw-title-h: 0px; }
  .studio-page .gw-intro { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}