/* Ballistics per-calculator static pages.

   Layers on directory/listing-page.css (header, breadcrumb, sidebar cards) and
   ballistics/styles.css (the calculator card, shot profile, combobox), adding
   only the page-specific layout: the 2-column embed + ammo sidebar, the ammo
   mini-profile, and the "more calculators" grid. */

.bx-detail { background: var(--paper, #F4F1EA); }
.bx-detail .listing-inner { max-width: 1180px; }

/* lede under the title */
.bx-header .dx-model-header-text { width: 100%; }
.bx-lede { font: 400 16px/1.6 var(--body, 'DM Sans', sans-serif); color: #44504f; margin: 12px 0 0; max-width: 70ch; }

/* body: calculator on the left, ammo sidebar on the right */
.bx-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-7, 36px); align-items: start; margin-bottom: var(--s-8, 48px); }
.bx-main { min-width: 0; display: flex; flex-direction: column; gap: var(--s-5, 22px); }
.bx-side { display: flex; flex-direction: column; gap: var(--s-4, 16px); position: sticky; top: 18px; }

/* the shot-profile bar sits inside a framed band so it reads as the control
   surface for the calculator below */
/* The shot-profile section carries both .profile (SPA) and .bx-profile. Override
   the SPA's full-width gradient bar chrome with a single clean white card, and
   crucially do NOT clip overflow (that was hiding the ammo dropdown). */
.profile.bx-profile {
  background: #fff;
  border: 1.5px solid var(--rule, #E2DBC9) !important;
  border-radius: var(--r-lg, 14px);
  padding: 14px 18px;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
  position: relative; z-index: 5;
}
.bx-profile .profile-inner { margin: 0; max-width: none; }
/* ammo dropdown floats above the calculator card below it */
.bx-profile .combobox__listbox { z-index: 60; }

/* the embedded calculator card: it always shows its full (expanded) view here,
   and the expand/collapse button is pointless on a dedicated page, so hide it */
.bx-embed .calc-card { margin: 0; }
.bx-embed .cc-expand-btn { display: none !important; }
.bx-embed .calc-card.is-embed .cc-mini { border-bottom: none; }

/* ammo mini-profile card */
.bx-ammo-card h3, .bx-tip-card h3 {
  font: 600 var(--t-eye, 11px) var(--mono, 'JetBrains Mono', monospace);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange-deep, #C84711);
  margin: 0 0 14px;
}
.bx-ammo-card { border-top: 4px solid var(--range-tan-deep, #C9B68A); }
.bx-ammo-card.is-active { border-top-color: var(--orange, #F25C1F); }
.bx-ammo-empty { font: 400 13px/1.55 var(--body, 'DM Sans', sans-serif); color: var(--muted, #6E7178); margin: 0 0 14px; }
.bx-ammo-head { margin-bottom: 14px; }
.bx-ammo-mfr { display: block; font: 700 11px var(--mono, 'JetBrains Mono', monospace); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted, #6E7178); }
.bx-ammo-fam { display: block; font: 800 18px/1.2 var(--display, 'Archivo', sans-serif); color: var(--charcoal, #1F2528); margin-top: 2px; }
.bx-ammo-rows { display: flex; flex-direction: column; }
.bx-ammo-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--rule, #E2DBC9); }
.bx-ammo-row:first-child { padding-top: 0; }
.bx-ammo-k { font: 600 10px var(--mono, 'JetBrains Mono', monospace); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted, #6E7178); align-self: center; }
.bx-ammo-v { font: 700 14px var(--body, 'DM Sans', sans-serif); color: var(--charcoal, #1F2528); text-align: right; }
.bx-ammo-browse { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font: 700 13px var(--body, 'DM Sans', sans-serif); color: var(--orange-deep, #C84711); text-decoration: none; }
.bx-ammo-browse:hover { gap: 9px; }

.bx-tip-card p { font: 400 13px/1.6 var(--body, 'DM Sans', sans-serif); color: #4a5258; margin: 0 0 14px; }

/* "more calculators" grid */
.bx-others { border-top: 1px solid var(--rule, #E2DBC9); padding-top: var(--s-6, 28px); }
.bx-other-group { margin-bottom: var(--s-5, 22px); }
.bx-other-grouph { font: 700 11px var(--mono, 'JetBrains Mono', monospace); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted, #6E7178); margin: 0 0 12px; }
.bx-other-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.bx-other {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--rule, #E2DBC9); border-radius: 11px;
  padding: 13px 15px; text-decoration: none;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
.bx-other:hover { transform: translateY(-2px); border-color: var(--orange, #F25C1F); box-shadow: 0 10px 22px -13px rgba(200, 71, 17, 0.32); }
.bx-other-eye { font: 700 9px var(--mono, 'JetBrains Mono', monospace); letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange-deep, #C84711); }
.bx-other-name { font: 800 14px var(--display, 'Archivo', sans-serif); color: var(--charcoal, #1F2528); flex: 1; }
.bx-other .dx-related-arrow { color: var(--orange, #F25C1F); flex-shrink: 0; }
.bx-other-eye + .bx-other-name { margin-left: 2px; }

/* ===== responsive ===== */
@media (max-width: 920px) {
  .bx-body { grid-template-columns: 1fr; gap: var(--s-5, 22px); }
  .bx-side { position: static; order: 2; flex-direction: column; }
  .bx-main { order: 1; }
}

/* On phones, get the shot profile + calculator onto the first screen: tighten
   the header, clamp the description, and compact the profile + spacing. */
@media (max-width: 680px) {
  .bx-detail .listing-section { padding: 14px var(--gutter, 18px) var(--s-7, 40px); }
  .bx-detail .listing-breadcrumb { margin-bottom: 8px; }
  .bx-detail .dx-back-link { margin-bottom: 14px; }
  .bx-header { margin-bottom: 18px !important; padding-bottom: 16px !important; }
  .bx-header .dx-model-title, .bx-header .listing-title { font-size: clamp(24px, 7vw, 30px); }
  /* clamp the explainer to two lines with a fade so it doesn't dominate; the
     full text stays in the DOM for SEO and expands on tap of the calculator */
  .bx-lede {
    font-size: 14px; line-height: 1.5; margin-top: 8px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .bx-body { gap: 14px; margin-bottom: var(--s-6, 28px); }
  .bx-main { gap: 12px; }
  .profile.bx-profile { padding: 12px 13px; }
  .bx-profile .profile-label { margin-bottom: 8px; }
  /* shot-profile fields: pellet search full width, then weight/velocity/BC in a
     tight 3-up row so the whole control surface is compact */
  .bx-profile .profile-fields { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .bx-profile .profile-field--pellet { grid-column: 1 / -1; }
  .bx-profile .profile-field label { font-size: 10px; }
  .bx-profile .profile-reset { margin-top: 10px; }
  /* trim the embedded calculator's internal padding a touch */
  .bx-embed .cc-mini, .bx-embed .cc-expanded { padding-left: 14px; padding-right: 14px; }
  .bx-ammo-card, .bx-tip-card { padding: 16px; }
}

@media (max-width: 560px) {
  .bx-other-grid { grid-template-columns: 1fr; }
}

/* ===== crawlable calculator links injected on the /ballistics/ SPA ===== */
.bx-spa-links { background: var(--paper, #F4F1EA); border-top: 1px solid var(--rule, #E2DBC9); padding: var(--s-8, 48px) 0 var(--s-9, 64px); }
.bx-spa-links .wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter, 24px); }
.bx-spa-eye { font: 600 11px var(--mono, 'JetBrains Mono', monospace); letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange-deep, #C84711); }
.bx-spa-title { font: 900 clamp(22px, 2.6vw, 30px) var(--display, 'Archivo', sans-serif); letter-spacing: -0.02em; color: var(--charcoal, #1F2528); margin: 8px 0 6px; }
.bx-spa-sub { font: 400 14.5px/1.55 var(--body, 'DM Sans', sans-serif); color: #4a5258; max-width: 60ch; margin: 0 0 var(--s-6, 26px); }
.bx-spa-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7, 36px); }
.bx-spa-h { font: 700 11px var(--mono, 'JetBrains Mono', monospace); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted, #6E7178); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--rule, #E2DBC9); }
.bx-spa-list { list-style: none; padding: 0; margin: 0; }
.bx-spa-list li { margin-bottom: 8px; }
.bx-spa-list a { font: 600 14.5px var(--body, 'DM Sans', sans-serif); color: #3f474d; text-decoration: none; transition: color 0.14s ease; }
.bx-spa-list a:hover { color: var(--orange-deep, #C84711); text-decoration: underline; }
@media (max-width: 640px) { .bx-spa-cols { grid-template-columns: 1fr; gap: var(--s-5, 22px); } }