/**
 * Design Studio — shared pieces of the ds-* blocks (Template Design Studio, Template Design Package):
 * package cards and covers, Free/price badges, 4px chips, quiet panels, outline buttons.
 * Loaded as a style dependency of every ds-* block (includes/design-studio.php).
 */

/* Section heads inside Design Studio: kicker 11.5 orange, H2 36/1.15 (mt 12), lead 16.5/1.6 .82 (mt 14, max 680). */
.bd-ds-head .bd-kicker { margin: 0; }
.bd-ds-head .bd-h2 { margin-top: 12px; }
.bd-ds-lead { font: 600 var(--wp--preset--font-size--body)/1.6 var(--wp--preset--font-family--montserrat); color: var(--bd-body); margin: 14px 0 0; max-width: 680px; }
.bd-kicker.bd-ds-kicker-plain { color: var(--bd-meta); }
.bd-kicker.bd-ds-kicker-white { color: var(--bd-haze); }

/* Badges: Free (orange, 4px, 700 10.5 uppercase) and price (hairline .4, 700 11.5). */
.bd-ds-badge-free { flex: none; display: inline-block; background: var(--bd-sun); color: var(--bd-ink); border-radius: var(--bd-r-sm); padding: 3px 8px; font: 700 10.5px/1.3 var(--wp--preset--font-family--montserrat); letter-spacing: .05em; text-transform: uppercase; }
.bd-ds-badge-price { flex: none; display: inline-block; border: 1px solid rgba(247,248,249,.4); border-radius: var(--bd-r-sm); padding: 2px 7px; font: 700 11.5px/1.3 var(--wp--preset--font-family--montserrat); color: var(--bd-haze); }
/* "Animated" (Update 7): orange hairline .7, orange text, 700 10.5 uppercase .06em; on the package page 11.5 (is-l).
   On cards it sits before the price badge, both on the right. */
.bd-ds-badge-animated { flex: none; display: inline-block; border: 1px solid rgba(250,154,66,.7); color: var(--bd-sun); border-radius: var(--bd-r-sm); padding: 2px 7px; font: 700 10.5px/1.3 var(--wp--preset--font-family--montserrat); letter-spacing: .06em; text-transform: uppercase; }
.bd-ds-badge-animated.is-l { padding: 3px 8px; font-size: 11.5px; }
.bd-ds-card__tags { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.bd-ds-badge-needs { display: inline-block; border: 1px solid rgba(250,154,66,.7); color: var(--bd-sun); border-radius: var(--bd-r-pill); padding: 2.5px 10px; font: 600 11.5px/1.3 var(--wp--preset--font-family--montserrat); }

/* Cover frame 3:2: image on a background colour (cover/contain), or a background layer for other sizes. */
.bd-ds-cover { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background-color: var(--bd-ink); }
span.bd-ds-cover > img { position: absolute; max-width: none; inset: 0; width: 100%; height: 100%; display: block; }
.bd-ds-cover__bg { position: absolute; inset: 0; background-repeat: no-repeat; }
.bd-ds-cover__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; background: #fff; color: rgba(5,1,52,.58); font: 600 11.5px/1.4 var(--wp--preset--font-family--montserrat); }

/* Package card: hairline + lift, cover 3:2, body 14/16/16, name 700 14.5, note 600 12.5 .68. */
.bd-ds-card { display: flex; flex-direction: column; overflow: hidden; color: var(--bd-haze); text-decoration: none; }
.bd-ds-card:hover, .bd-ds-card:focus-visible { color: var(--bd-haze); border-color: rgba(247,248,249,.34); }
.bd-ds-card__body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
.bd-ds-card__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; }
.bd-ds-card__name { margin: 0; font: 700 14.5px/1.35 var(--wp--preset--font-family--montserrat); color: var(--bd-haze); }
.bd-ds-card__note { font: 600 12.5px/1.4 var(--wp--preset--font-family--montserrat); color: var(--bd-meta); }
.bd-ds-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
/* docs/responsive.md §5 Design Studio: package cards 3 → 2 → 1 (desktop keeps the 4 drawn columns). */
@media (max-width: 1279px) { .bd-ds-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .bd-ds-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 767px) {
	.bd-ds-grid { grid-template-columns: minmax(0, 1fr); }
	.bd-ds-card__body { padding: 16px 20px 18px; }
	.bd-ds-card__name { font-size: 16px; }
	.bd-ds-card__note { font-size: 13px; }
}

/* Quiet panel (how-to, guide, extras): .05 fill, .12 border, radius 24. Rows are separated by a top hairline. */
.bd-ds-panel { background: rgba(247,248,249,.05); border: 1px solid rgba(247,248,249,.12); border-radius: var(--bd-r-card); overflow: hidden; }
.bd-ds-panel__row { box-shadow: 0 -1px 0 rgba(247,248,249,.12); }

/* Outline button (extras rows): 1.5px .62, 700 14, padding 12/24. */
.bd-ds-btn-outline { display: inline-flex; align-items: center; justify-content: center; flex: none; border: 1.5px solid rgba(247,248,249,.62); color: var(--bd-haze); font: 700 14px/1.2 var(--wp--preset--font-family--montserrat); padding: 12px 24px; border-radius: var(--bd-r-pill); text-decoration: none; transition: border-color 180ms ease-out, background-color 180ms ease-out; white-space: nowrap; }
.bd-ds-btn-outline:hover { color: var(--bd-haze); border-color: var(--bd-haze); background: rgba(247,248,249,.06); }

/* Dot list (uses, chips): 3 columns, rows 13/0 between hairlines, 6px orange dot, 600 14.5/1.45. */
.bd-ds-dots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; margin: 0; padding: 0; list-style: none; }
.bd-ds-dots li { display: flex; gap: 12px; align-items: baseline; padding: 13px 0; border-top: 1px solid rgba(247,248,249,.12); font: 600 14.5px/1.45 var(--wp--preset--font-family--montserrat); color: var(--bd-haze); }
.bd-ds-dots li::before { content: ""; width: 6px; height: 6px; border-radius: 100px; background: var(--bd-sun); flex: none; transform: translateY(-2px); }
@media (max-width: 1023px) { .bd-ds-dots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .bd-ds-dots { grid-template-columns: 1fr; } }

/* White placeholder for missing screenshots (reference style): 600 12.5, ink .58. */
.bd-ds-ph { display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; box-sizing: border-box; background: #fff; color: rgba(5,1,52,.58); font: 600 12.5px/1.4 var(--wp--preset--font-family--montserrat); }

/* Mobile (docs/responsive.md §3): button pairs stacked, full width, primary on top, where blocks opt in. */
@media (max-width: 767px) {
	.bd-ds-actions { flex-direction: column; align-items: stretch; }
	.bd-ds-actions .bd-btn { width: 100%; }
	.bd-ds-actions .bd-btn--primary { order: -1; }
}

/* Topic body layout (two core groups: bd-ds-layout > [ds-toc, bd-ds-main]) — Template Design Studio (Detail §3):
   padding 82/80/76, flex gap 56; right column flex column gap 96. */
.bd-ds-layout { box-sizing: border-box; width: 100%; max-width: 1440px; margin-inline: auto; padding: calc(82px * var(--bd-s)) var(--bd-gutter) calc(76px * var(--bd-s)); display: flex; gap: 56px; align-items: flex-start; }
.bd-main--plugin .wp-block-post-content .bd-ds-layout > *, .bd-main--plugin .wp-block-post-content .bd-ds-main > * { margin-block: 0; }
.bd-ds-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(96px * var(--bd-s)); }
/* Sections in the body: anchor jumps leave room for the sticky header. */
.bd-ds-main > [id] { scroll-margin-top: 90px; }
/* Tablet and mobile: the "On this page" box goes above the body (ds-toc), the body gets the full width. */
@media (max-width: 1279px) { .bd-ds-layout { flex-direction: column; align-items: stretch; gap: 36px; } }