/*
 * BBL page (medi.ge/bblai): the few pieces the dental design does not have.
 *
 * Everything else is dental-v3.css, loaded first and unchanged: same tokens,
 * same type, same slabs. Classes here are prefixed b- and only ever add to a
 * dental component (a grid count, an aspect ratio) or style something new
 * (the offer badge, grouped prices, the safety columns). Colours come from the
 * dental tokens only.
 */

/* ---------- hero ---------- */

.b-badge {
  align-self: flex-start;
  margin: 0 0 18px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--d-gold);
  color: #231a05;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  box-shadow: 0 6px 24px rgba(199, 164, 85, .35);
}
.d-hero__benefits.b-benefits-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px; }

/* ---------- grids sized to this page's counts ---------- */

.d-why.b-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.d-cards-4.b-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.d-steps.b-steps-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ---------- what it helps with ----------
   A card without a photo leads with a strip of the light the device emits:
   one long band of the brand's purple-to-gold, each card showing the next
   stretch of it, so the six read left to right as one spectrum. */

.b-concern__band {
  height: 72px;
  background: linear-gradient(90deg,
    var(--d-purple-deep) 0%, var(--d-purple) 18%, var(--d-purple-bright) 36%,
    #b48ad8 52%, var(--d-gold-soft) 72%, var(--d-gold) 88%, #a8853a 100%);
  background-size: 600% 100%;
  background-position: calc(var(--k, 0) * 20%) 0;
  position: relative;
  overflow: hidden;
}
/* The pulse: a soft bright bar crossing the strip, as the handpiece flashes. */
.b-concern__band::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .9s var(--d-ease, ease);
}
.b-concern:hover .b-concern__band::after { transform: translateX(120%); }

/* ---------- results ----------
   The clinical pairs are portrait, so the slider is too. */

.b-cases .d-ba { aspect-ratio: 4 / 5; }
.b-cases .d-ba img { object-position: center 40%; }
.b-note { margin-top: 36px; font-size: 13px; }

/* ---------- protocols (on the dark slab) ---------- */

.b-protocols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--d-gap); }
.d-tech.b-protocol { padding: 24px; gap: 14px; }
.d-tech.b-protocol h3 { min-height: 0; font-size: 22px; line-height: 1.25; }
.d-tech.b-protocol .d-tech__text { font-size: 13.5px; line-height: 1.65; }
.b-tags { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.b-tags li {
  position: relative;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--d-white);
}
.b-tags li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--d-gold);
  box-shadow: 0 0 10px rgba(199, 164, 85, .8);
}
.b-after-grid { margin-top: 32px; }

/* ---------- prices ---------- */

.b-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  margin: 0 0 32px;
  padding: 18px 22px;
  border: 1px solid rgba(199, 164, 85, .55);
  border-radius: var(--d-r-soft);
  background: rgba(199, 164, 85, .08);
}
.b-offer__title { margin: 0; font-size: 20px; font-weight: 700; color: var(--d-gold); }
.b-offer__text { margin: 0; font-size: 13px; line-height: 1.6; color: var(--d-on-dark); flex: 1 1 320px; }

/* Each protocol is a dropdown, closed until asked for (the clinic's choice).
   The closed header still says the protocol and its lowest price. */
.b-price-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; align-items: start; }
.b-price-group {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--d-r-soft);
  background: rgba(255, 255, 255, .04);
  transition: border-color .25s ease, background-color .25s ease;
}
.b-price-group[open] { border-color: rgba(199, 164, 85, .55); background: rgba(199, 164, 85, .06); }
.b-price-group__h {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px 14px;
  flex-wrap: wrap;
  padding: 18px 52px 18px 20px;
  position: relative;
  border-radius: inherit;
}
.b-price-group__h::-webkit-details-marker { display: none; }
.b-price-group__h:focus-visible { outline: 2px solid var(--d-gold); outline-offset: 2px; }
.b-price-group__name { font-size: 16px; font-weight: 700; color: var(--d-white); }
.b-price-group__from { font-size: 14px; font-weight: 700; color: var(--d-gold); font-variant-numeric: tabular-nums; }
/* The admin's discount: list price struck through, the discounted one after it. */
.b-price-old { font-weight: 400; color: var(--d-on-dark-3); text-decoration-thickness: 1px; margin-right: 2px; }
.b-price-new { color: var(--d-gold); }
.b-price-group__chev {
  position: absolute;
  right: 20px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -7px;
  border-right: 2px solid var(--d-gold);
  border-bottom: 2px solid var(--d-gold);
  transform: rotate(45deg);
  transition: transform .3s var(--d-ease, ease), margin-top .3s var(--d-ease, ease);
}
.b-price-group[open] .b-price-group__chev { transform: rotate(-135deg); margin-top: -2px; }
.b-price-group__h:hover .b-price-group__name { color: var(--d-gold-soft); }
.b-price-group .d-prices { margin: 0 20px 6px; }
.b-price-group .d-price-row { padding: 13px 0; }
.b-price-group .d-price-row:last-child { border-bottom: 0; }
.b-price-group[open] .d-prices { animation: b-drop .35s var(--d-ease, ease); }
@keyframes b-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- safety ---------- */

.b-safety { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--d-gap); }
.b-safety__col {
  background: var(--d-white);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-card);
  box-shadow: var(--d-shadow);
  padding: 24px 26px 26px;
}
.b-safety__col h3 { margin: 0 0 14px; font-size: 17px; font-weight: 700; color: var(--d-ink); }
.b-safety__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.b-safety__col li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.6; color: var(--d-muted); }
.b-safety__col li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .6em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--d-purple-bright);
}
.b-safety__col--prep li::before { background: var(--d-gold); }

/* ---------- doctors ---------- */

.d-doctor h3 a { color: inherit; text-decoration: none; }
.d-doctor h3 a:hover { color: var(--d-purple-bright); }

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .d-why.b-grid-4, .d-cards-4.b-grid-3, .b-protocols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d-steps.b-steps-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .b-price-groups { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .d-steps.b-steps-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-safety { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .d-hero__benefits.b-benefits-3,
  .d-why.b-grid-4, .d-cards-4.b-grid-3, .b-protocols, .d-steps.b-steps-5 { grid-template-columns: minmax(0, 1fr); }
  .b-concern__band { height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .b-concern__band::after { transition: none; display: none; }
}

/* "BBL" alone on the first line read as a stray word: give the title room to
   keep the procedure name together. */
.b-page .d-hero h1 { max-width: 17.5em; }

/* Three doctors to a row rather than the dental page's two: this page starts
   with one, and a lone half-width card reads as a placeholder. */
.b-page .d-doctor { flex-basis: calc((100% - 36px) / 3); }
@media (max-width: 1100px) { .b-page .d-doctor { flex-basis: calc((100% - 18px) / 2); } }
@media (max-width: 860px)  { .b-page .d-doctor { flex-basis: 70%; } }
@media (max-width: 620px)  { .b-page .d-doctor { flex-basis: 84%; } }

/* Five portrait pairs stacked on a phone is a very long scroll: square there. */
@media (max-width: 620px) { .b-cases .d-ba { aspect-ratio: 1 / 1; } }

/* „ფოტოგაახალგაზრდავება" is one 20-letter word: at the dental page's 30px it
   is wider than a phone. Sized to the viewport there, and allowed to break as
   a last resort so it can never be cut off. */
.b-page .d-hero h1 { overflow-wrap: break-word; }
@media (max-width: 620px) { .b-page .d-hero h1 { font-size: clamp(21px, 6.1vw, 30px); } }
.b-page .d-hero h1 { text-wrap: balance; }

/* =====================================================================
   Phones (≤620px). The page was 18 screens long, most of it card blocks
   stacked one under another. They become swipe rails, with the next card
   peeking in from the edge and dots underneath, and the type and spacing
   are brought down to a phone's scale. Desktop is untouched.
   ===================================================================== */

@media (max-width: 620px) {
  /* Rails, dots and tap-to-compare are shared (base.css "compact", compact.js);
     only this page's card widths are set here. */
  .b-page .d-hero__benefits.b-swipe:not(#cx) > * { flex-basis: 64%; }
  .b-page .d-cases.b-swipe:not(#cx) > * { flex-basis: 86%; }
  /* The dental connector line behind the steps assumes a grid. */
  .b-page .d-steps.b-swipe::before { display: none; }

  /* --- this page's own pieces at phone scale (the shared scale is in dental-v3.css) --- */
  .b-page .b-badge { margin-bottom: 12px; font-size: 12px; padding: 7px 13px; }
  .b-page .b-concern__band { height: 44px; }
  .b-page .b-note { margin-top: 18px; font-size: 12px; }
  .b-page .b-offer { padding: 14px 16px; margin-bottom: 18px; }
  .b-page .b-offer__title { font-size: 17px; }
  .b-page .b-price-groups { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .b-page .b-price-group__h { padding: 15px 46px 15px 16px; }
  .b-page .b-price-group__name { font-size: 15px; }
  .b-page .b-price-group .d-prices { margin-inline: 16px; }

}

@media (prefers-reduced-motion: reduce) {
  .b-price-group[open] .d-prices { animation: none; }
}

/* Zone and price on one line inside a dropdown: the names are short, and the
   dental page's stacked phone layout doubled every row. */
@media (max-width: 620px) {
  .b-page .b-price-group .d-price-row { flex-direction: row; align-items: baseline; gap: 12px; padding: 11px 0; }
  .b-page .b-price-group .d-price-row__value { white-space: nowrap; }
}